Создание сайтов бесплатно

Для создания HTML страниц, нам понадобиться обычная программа Блокнот для Windows. Запускаем её! «Пуск» – «Все программы» – «Стандартные» – «Блокнот».

Первым делом нам необходимо прописать структуру HTML документа. Состоит она из 4-х основных тегов, это:

<html></html> — данный тег определяет начало и конец документа;
<head></head> — голова, тег отвечает за заголовок страницы;
<title></title> — название сайта, этим тегом прописывается название вашего сайта;
<body></body> — тело документа, в данном теге прописывается основной код сайта.

Пример создания сайта на HTML, структура документа будет выглядеть следующим образом:

1
2
3
4
5
6
7

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<HTML><!-- Начало HTML документа -->
<HEAD><!-- Начало заголовка -->
<TITLE>Заголовок документа</TITLE>
</HEAD><!-- Конец заголовка -->
<BODY>Основной текст документа</BODY>
</HTML><!-- Конеч HTML документа -->

Где,

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”> – 1-я строчка определяет версию языка HTML. Она прописывается один раз при создании сайта на HTML и остается неизменной.

Прописываем данный код у себя в Блокноте, сохраняем его в формате .html и открываем в любом браузере (Opera, Internet Explorer, Mozilla Firefox). Если вы все сделали правильно, должна открыться совершенно пустая страница.

ОК, продолжаем создание сайта на HTML. Нам необходимо определиться, где у нас будет находится шапка сайта, где меню, где текст главной страницы и др. Примерная схема:

Шапка сверху, под шапкой будут располагаться 4 кнопки, дальше меню сайта слева и текст главной страницы справа. Давайте попробуем создать сайт с помощью HTML и все это реализовать.

Делается разметка сайта в HTML с помощью обычных таблиц. Говоря простыми словами, нам необходимо визуально разбить страницу на несколько ячеек, то есть одна для шапки, другие для кнопок, меню и текста.

Таблица в HTML определяется тегами <table></table>, строка в таблице определяется тегом <tr></tr>, столбец <td></td>. Таким образом, наша таблица при создании сайта на HTML, будет выглядеть примерно так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY bgcolor="#cccc66">
 
<br><br>
<table border="1" cellpadding="0" cellspacing="5" align="center">
 
<tr height="141" width="680" background="i/site_03.gif">
<td colspan="4"></td>
</tr>
 
<tr>
<td><br><br></td>
<td></td>
<td></td>
<td></td>
</tr>
 
<tr>
<td colspan="1" width="170" height="317" valign="top" background="i/site_09.gif">
 
</td>
 
<td colspan="3" width="510" height="317" valign="top" background="i/site_10.gif">
 
</td>
</tr>
 
</table>
 
</BODY>
</HTML>

Где,

<table></table> — 9-я и 32-я строчки открывают и закрывают таблицу;
<tr></tr> — 15-я и 20-я строчки открывают и закрывают строку в таблице;
<td></td> — 16-я, 17-я, 18-я и 19-я строчки открывают и закрывают столбец в таблице. То есть в одной строке, мы прописываем 4 столбца. Вот этот элемент таблицы:

<td colspan="1" width="170" height="317" valign="top" background="i/site_09.gif"></td> — 23-я и 25 строка открывает и закрывает столбец, причем атрибут colspan=»1″ определяет количество столбцов на которое эта ячека будет растянута, в данном случае одна ячейка. Width=»170″ и height=»317″ определяют ширину и длину ячейки;
<td colspan="3" width="510" height="317" valign="top" background="i/site_10.gif"></td> — 27-я и 29-я строка вновь открывают и закрывают столбец. Здесь ячейка растягивается на 3 столбца, атрибут colspan=»3″. Соответственно размер её width=»510″ height=»317″.

Вот таким образом и происходит создание страниц сайта с помощью таблиц в HTML. Вы сами можете поэкспериментировать и по добавлять (по удалять) строки (столбцы) и посмотреть, что происходит в браузере.

Конечно, саму таблицу мы сделаем невидимой. Для этого достаточно убрать атрибут border=»1″ в 9-ой строке. Мы сделаем свой шаблон в Photosop и в ячейках в качестве фона вставим отдельные элементы графики шапку, меню и кнопки . Продолжаем создание сайта на HTML самостоятельно.

Создание сайтов бесплатно

Страницы

вторник, 15 января 2013 г.

Создание HTML страницy

Комментариев нет:

Отправить комментарий

Страницы

вторник, 15 января 2013 г.

Создание HTML страницy

Комментариев нет:

Отправить комментарий

вторник, 15 января 2013 г.