Представляю вам пошаговую инструкция создания сайта на HTML от А до Я. Здесь я постарался подробно расписать, как вы можете прямо сейчас начать создание сайта и в течении 1-2 часов стать реальным обладателем своей первой HTML странички.
На самом деле все не так сложно, как кажется. Многие пользователи просто бояться иной раз, даже, начать обучение в этом направлении. Думают, что создание сайта, по силам, только опытным вебмастерам и ведущим программистам HTML, PHP, Perl, JavaScript.
Говоря откровенно, все с точностью, да, наоборот. Сегодня, создание HTML страниц по силам даже самому неопытному пользователю в сети. Для этого не требуется каких то глобальных знаний и специального программного обеспечения. Достаточно пройти всего 3 пункта обучения, представленных на этой страничке и уже через пару часов (я уверен) вы будете разбираться в HTML и сможете создавать сайты, ни чуть не хуже, чем сайт, который мы с вами создадим.
Пошаговое создание сайта на HTML:
- Разработка сайта на HTML — здесь мы будем описывать код сайта. Познакомимся со структурой создания HTML страниц, пропишем основные теги, разберем какие теги за что отвечают и др.;
- Разработка шаблона — здесь мы научимся рисовать шаблон сайта в программе Adobe Photoshop, разрезать его на элементы и сохранять все в нужном нам формате (для Web);
- Верстка сайта на HTML — здесь мы будем размещать элементы графики, пропишем навигацию и отформатируем текст на сайте.
Как создать HTML страницу?
Для создания 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”> <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> |
<!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 самостоятельно.
Разработка шаблона сайта
Для того, чтобы создать шаблон для нашего будущего сайта на HTML, нам потребуется программа Adobe Photoshop. Для тех у кого нет Photoshop, советую скачать и установить его, в любом случае, он потребуется в дальнейшем при создании сайтов.
Итак, открываем Photoshop и создаем новый документ «Файл» — «Новый». Здесь нам необходимо сразу указать высоту, ширину, разрешение, цветовую гамму и др. Прописываем все как показано на скрине:
Перед нами откроется пустой документ. Теперь нам необходимо точно так же, как и в HTML документе, визуально разбить его на части, аналогичные ячейкам таблицы. Для этого нам понадобятся направляющие.
Если у вас не отображается линейка, включите её «Просмотр» — «Линейки» и простым перетаскиванием мыши прямо с линейки вытаскивайте направляющие и разбивайте ваш шаблон, как показано на рисунке:
Для наглядности сразу выбираем фон нашего сайта и закрасим его, например, зеленоватым цветом #cccc66. Для этого создаем новый слой в Photoshop, кликаем на панели инструментов «Палитра цветов» и прописываем нужный нам цвет. Зажимаем горячие кнопки ALT+Backspace и ваш документ должен закрасится в цвет, который мы указали #cccc66. Вы можете выбрать любой цвет.
ОК, продолжаем создание нашего сайта на HTML. Теперь нам необходимо разметить области нашего сайта, то бишь шапку, меню, кнопочки и др. Для этого создаем еще один слой, выбираем инструмент, который у меня называется «Прямоугольная область», у вас он может называться по другому.
Выделяем шапку нашего сайта, с помощью клавиш ALT+Backspace (точно так же как и фон) закрашиваем нашу шапку, например, белым. Далее нажимаем CTRL+T один раз, зажимаем клавишу ALT и уменьшаем шапку строго по отношению к нашей области. Должно получится нечто подобное:
Точно так же делаем и другие области. Можете сделать рамку у блоков, изменить цвет, наложить градиент, добавить тень. Для этого нужно выделить слой с зажатой клавишей CTRL и воспользоваться функциями Photoshop.
Здесь просто выбираем нужную нам функцию, например обводка, указываем цвет и размер линии обводки в пикселях.
Аналогичным образом создаем другие элементы для всех областей сайта.
Плюс на кнопочках можно прописать названия, сделать это можно и на HTML, но мы сразу сделаем графичные кнопки. Выбираем инструмент «Текст» и на кнопочках прописываем названия, например «Главная», «Об авторе», «Контакты» и «Услуги».
Добавляем картинку в шапку сайта, для этого просто открываем файл с нужным нам изображением и простым перетаскиванием мышки, размещаем картинку в верхнем блоке. Изменить размер картинки вы можете с помощью горячих клавиш CTRL+T.
И в итоге у нас должно получится нечто подобное:
Вот в принципе и все, наш шаблон для сайта готов! Осталось разрезать его на области и сохранить отдельные элементы в нужном нам формате.
Выбираем инструмент «Раскройка» и выделяем им каждую область нашего сайта.
Далее сохраняем все это дело, меню «Файл» — «Сохранить для WEB». Выбираем формат .PNG и сохраняем. В итоге у вас должна появиться папка на Рабочем столе с готовыми блоками нашего сайта. Переносим эти файлы в нашу папку с сайтом.
Верстка сайта на 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> |
<!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:
ВСЕ! Наш первый сайт готов. Как видите создание сайта на HTML заняло у нас всего 2-3 часа. Да, это, конечно, простейшая страница на HTML, но тем не менее вы уже знаете основные теги HTML для создания сайта, умете делать шаблоны, верстку и можете приступать к изучению более сложных структур, например с использованием языков PHP, вставкой JavaScript, создание сайта на WordPress, DLE и др.
Скачать готовый сайт на HTML, который только что, нам с вами, удалось создать можно здесь.
Каждый вебмастер проходит через это и когда то, даже я, пытался реализовать создание своих первых HTML страниц таким образом. Поэтому пробуйте и начните с малого. Если вы научитесь создавать простейшие страницы в сети, то безусловно сможете, со временем, создать нечто большее! Главное не бросайте обучение, вы не заметите сами, как начнете создавать профессиональные сайты и HTML теги будут просто отскакивать у вас от зубов.
Реализуйте данный материал на практике и если у вас вдруг остались вопросы по теме, создания страниц сайта на HTML, оставляйте их в комментариях. Я с удовольствием отвечу на каждый из них.
