Создаем сайт HTML
Приступим к созданию одностраничного сайта HTML.
Следует заметить, что при создании web-страницы пользоваться таблицами. Чуть подробнее, как ее создать.
Тег <TABLE> и </TABLE> описывают таблицу, и располагаются между тегами BODY.
Для того, что бы создать строку в таблице, используют тег <TR> и </TR>. Если Вы хотите разбить строку на столбцы, нужно между тегами TR добавить тег <TD> и </TD>
Например,
<TABLE>
<TR>
<TD>
Ячейка 1 </TD>
<TD>
Ячейка 2 </TD>
</TR>
<TR>
<TD>
Ячейка 3 </TD>
<TD>
Ячейка 4 </TD>
</TR>
</TABLE>
Даст результат:
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Указав в параметрах таблицы тега TABLE значение border="номер", где номер - размер рамки таблицы в пикселях (по умолчанию стоит 0) - например, 1, а так же цвет заливки ячеек bgcolor="номер цвета", где номер цвета - значение цвета в HTML палитре - например, YELLOW, получаем:
<TABLE bgcolor="YELLOW" border="1">
<TR>
<TD>
Ячейка 1 </TD>
<TD>
Ячейка 2 </TD>
</TR>
<TR>
<TD>
Ячейка 3 </TD>
<TD>
Ячейка 4 </TD>
</TR>
</TABLE>
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Так же для редактирования доступны параметры:
height="..." - высота таблицы/колонки
width="..." - ширина таблицы/колонки
background="URL рисунка" - фоновый рисунок таблицы
Тег colspan="кол-во ячеек" - задает ширину ячейки на заданное количество ячеек (доступно для TD)
Одностраничный сайт
Вашему вниманию предлагаю заготовку, состоящую из картинки, логотипа, заливки, готовой страницы html и текстового документа (нажмите ниже скачать).
Советую, создать новую папку на Вашем компьютере, туда перетащить разархивированные картинки. Откройте Блокнот. Начнем писать код страницы.
Создайте файл index.html, и не забывайте его сохранять и обновлять в браузере после каждого шага, что бы увидеть результат работы!!!
Создадим заготовку страницы:
<HTML>
<HEAD>
<TITLE>
Мой сайт
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Теперь в нашей заготовке сделаем каркас будущего сайта из таблицы. Структура будет такая:
↓ Развернуть HTML код примера
<HTML>
<HEAD>
<TITLE>
Мой сайт
</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>
</TD>
<TD>
</TD>
</TR>
<TR>
<TD>
</TD>
<TD>
</TD>
</TR>
<TD>
</TD>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>
Мой сайт
</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>
</TD>
<TD>
</TD>
</TR>
<TR>
<TD>
</TD>
<TD>
</TD>
</TR>
<TD>
</TD>
</TABLE>
</BODY>
</HTML>
Теперь структурируем сайт, задав размеры для таблицы и ячеек:
↓ Развернуть HTML код примера
<HTML>
<HEAD>
<TITLE>
Мой сайт
</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="100%">
<TR>
<TD width="200">
</TD>
<TD>
</TD>
</TR>
<TR height="300">
<TD width="200">
</TD>
<TD>
</TD>
</TR>
<TD colspan="2">
</TD>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>
Мой сайт
</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="100%">
<TR>
<TD width="200">
</TD>
<TD>
</TD>
</TR>
<TR height="300">
<TD width="200">
</TD>
<TD>
</TD>
</TR>
<TD colspan="2">
</TD>
</TABLE>
</BODY>
</HTML>
Теперь, зададим оформление для ячеек, используя рисунок logo.gif, zalinka.gif и цвет #f0e6fa:
↓ Развернуть HTML код примера
<HTML>
<HEAD>
<TITLE>
Мой сайт
</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="100%">
<TR>
<TD width="200">
<img src="logo.gif">
</TD>
<TD background="zalivka.gif">
</TD>
</TR>
<TR height="300">
<TD width="200" background="zalivka.gif">
</TD>
<TD>
</TD>
</TR>
<TD colspan="2" bgcolor="#f0e6fa">
</TD>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>
Мой сайт
</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="100%">
<TR>
<TD width="200">
<img src="logo.gif">
</TD>
<TD background="zalivka.gif">
</TD>
</TR>
<TR height="300">
<TD width="200" background="zalivka.gif">
</TD>
<TD>
</TD>
</TR>
<TD colspan="2" bgcolor="#f0e6fa">
</TD>
</TABLE>
</BODY>
</HTML>
Заполним ячейки информацией:
↓ Развернуть HTML код примера
<HTML>
<HEAD>
<TITLE>
Мой сайт
</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="100%">
<TR>
<TD width="200">
<img src="logo.gif">
</TD>
<TD background="zalivka.gif">
<center>
<FONT color="GREEN" size="7">
<B>
Оформление страницы от сайта ex77.at.ua
</B>
</FONT>
</center>
</TD>
</TR>
<TR height="300">
<TD width="200" background="zalivka.gif">
Создать сайт (список):
<ul type="circle">
<li>Быстро</li>
<li>Легко</li>
<li>Надежно</li>
</ul>
</TD>
<TD valign="top">
<h1>
Мой первый одностраничный сайт!
</h1>
<BR>
Приветствую вас на моей странице. Для того, что бы перезагрузить страницу, нажмите на эту <a href="index.html">ссылку</a>.
<BR>
<center>
<img src="sait.gif">
</center>
</TD>
</TR>
<TD colspan="2" bgcolor="#f0e6fa">
<center> Информация предоставлена сайтом <a href="ex77.at.ua">Ex77.at.ua</a>
</center> </TD>
</TABLE>
</BODY>
</HTML>
<HEAD>
<TITLE>
Мой сайт
</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="100%">
<TR>
<TD width="200">
<img src="logo.gif">
</TD>
<TD background="zalivka.gif">
<center>
<FONT color="GREEN" size="7">
<B>
Оформление страницы от сайта ex77.at.ua
</B>
</FONT>
</center>
</TD>
</TR>
<TR height="300">
<TD width="200" background="zalivka.gif">
Создать сайт (список):
<ul type="circle">
<li>Быстро</li>
<li>Легко</li>
<li>Надежно</li>
</ul>
</TD>
<TD valign="top">
<h1>
Мой первый одностраничный сайт!
</h1>
<BR>
Приветствую вас на моей странице. Для того, что бы перезагрузить страницу, нажмите на эту <a href="index.html">ссылку</a>.
<BR>
<center>
<img src="sait.gif">
</center>
</TD>
</TR>
<TD colspan="2" bgcolor="#f0e6fa">
<center> Информация предоставлена сайтом <a href="ex77.at.ua">Ex77.at.ua</a>
</center> </TD>
</TABLE>
</BODY>
</HTML>
Сохраните документ. ПОЗДРАВЛЯЮ, ВЫ СОЗДАЛИ СВОЙ ОДНОСТРАНИЧНЫЙ САЙТ!!!
Если создать еще и вторую страницу, и добавить на первую ссылку на нее, то получим много страничный сайт. Теперь, главное заполнить его информацией, которая будет интересна посетителям. Об этом читайте ДАЛЬШЕ
Ещё по теме Введение в HTML Гиперсылки HTML VertrigoServ
