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

Верстка сайта на HTML


Теперь самое главное, как создать HTML страницу.

 На этом этапе мы должны разместить все части нашего шаблона в HTML документе, прописать меню, добавить текст главной страницы и др. Сложного здесь ничего нет. Я выкладываю сразу окончательный вариант кода, пример создание сайта на 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
36
37
38
39
40
41
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY bgcolor="#cccc66">
 
<br><br>
<table cellpadding="0" cellspacing="0" align="center">
 
<tr height="141" width="680" background="i/site_03.gif">
<td colspan="4"></td>
</tr>
 
<tr>
<td><a href="http://sitese.ru"><img src="i/site_05.png"></td>
<td><a href="http://sitese.ru"><img src="i/site_06.png"></td>
<td><a href="http://sitese.ru"><img src="i/site_07.png"></td>
<td><a href="http://sitese.ru"><img src="i/site_08.png"></td>
</tr>
 
<tr>
<td colspan="1" width="170" height="317" valign="top" background="i/site_09.gif">
    <li style="padding-left:25px;padding-top:25px;"><a href="http://sitese.ru/yazyk-html">Структура</a></li>
    <li style="padding-left:25px;padding-top:25px;"><a href="http://sitese.ru/zagolovok-html-dokumenta.html">Заголовки</a></li>
    <li style="padding-left:25px;padding-top:25px;"><a href="http://sitese.ru/rabota-so-ssylkami-i-izobrazheniyami-v-html.html">Абзацы</a></li>
    <li style="padding-left:25px;padding-top:25px;"><a href="http://sitese.ru/rabota-so-spiskami-v-html.html">Списки</a></li>
    <li style="padding-left:25px;padding-top:25px;"><a href="http://sitese.ru/rabota-s-tablicami-v-html.html">Таблицы</a></li>
    <li style="padding-left:25px;padding-top:25px;"><a href="http://sitese.ru/rabota-s-tablicami-v-html.html">Фреймы</a></li>
</td>
 
<td colspan="3" width="510" height="317" valign="top" background="i/site_10.gif">
<p><h2 style="padding-left:25px;padding-top:25px;">Язык HTML</h2></p>
<p style="padding-left:25px;padding-right:25px;">По данным Википедии язык HTML был разработан британским учёным Тимом Бернесом в 1989 г. Данный язык был придумал для обмена научной информацией (документацией) между людьми не являющимися специалистами в области верстки. С помощью простых “тегов” языка HTML стало возможным создание подобных документов. То есть, каждый научный сотрудник, при желании обладая простым набором “тегов” языка HTML, мог создавать собственные документы и форматировать их в удобном для чтения виде. Плюс появилась возможность использования “гипертекста” в документах, то есть ссылаться на другие страницы в сети и обмениваться опытом.</p>
</td>
</tr>
 
</table>
 
</BODY>
</HTML>
Где, не сложно разобраться, что к чему
  • <tr height="141" width="680" background="i/site_03.gif"> - 11-я сточка, прописываем шапку нашего сайта атрибутом background=»i/site_03.gif»
  • <td><a href="http://sitese.ru"><img src="i/site_05.png"></td> — 16-я строчка, вставляем кнопки нашего сайта и прописываем ссылки. Остальные кнопки аналогично.
  • <td colspan="1" width="170" height="317" valign="top" background="i/site_09.gif">— 23-я строчка, атрибутом background=»i/site_09.gif» прописываем фон меню нашего сайта.
  • <li style="padding-left:25px;padding-top:25px;"><a href="http://sitese.ru/yazyk-html">Структура</a></li> — 24-я строчка, прописываем пункты меню нашего сайта;
  • <p style="padding-left:25px;padding-right:25px;">По данным Википедии язык HTML был разработан британским учёным Тимом Бернесом в 1989 г. </p> — 34-я строчка, прописываем текст нашего сайта.
Как вы видите сложно здесь вообще ничего нет. В итоге у нас получается полноценный сайт, который нам удалось создать с помощью HTML:


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

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