HTML (HyperText Markup Language) - язык разметки гипертекста.
HTML указывает браузеру (интернет-обозревателю), как разместить элементы на странице при ее отображении на экране монитора.
HTML состоит из элементов, которые называются
тегами.
Между угловыми скобками
< ...
> находится имя тега и его параметры (если они есть).
В основном все теги парные, т.е. один открывающий < >, а другой - закрывающий < / >.
Такая пара тегов называется контейнером. А все, что находится между ними - содержимым контейнера.
Действия тегов распространяются только на их содержимое.
Теги могут иметь параметры (или атрибуты).
Структура документа на HTML
Пример страницы на HTML
Чтобы посмотреть результат в действии выполните:
- В Windows откройте программу Блокнот.
- Наберите (или скопируйте) указанный ниже код в Блокноте.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Моя первая веб-страница</title>
</head>
<body>
<div align=center>
<h2>Моя первая страница на HTML</h2>
<br>
<h1>Привет МИР!</h1>
<img src="http://u4ilka.kcbux.ru/Css/css-004-slon.jpg">
</div>
</body>
</html>
- Сохраните готовый документ (файл) на свой ПК с любым именем, например, rodina.html.
Обратите внимание, что расширение у файла должно быть html.
- Запустите в браузере созданный вами файл rodina.html.
- Насладитесь своей первой страничкой на HTML.
Смотреть пример 1-й страницы
Пример шаблонов сайта
Табличная верстка web-страниц сайта
При табличной верстке используются таблицы (HTML-тег <table>)
| WEB - страница | Код в документе HTML |
|
| Шаблон сайта-1 |
| Меню |
Контент |
| Подвал сайта |
|
<![CDATA[
<html>
<body>
<table border="1" bgcolor=#e8e3d4 width=100%>
<tr align=center>
<td style="color:#950000; font-size:14pt">
Шаблон сайта-1</td></tr>
<tr align=center><td bgcolor=#ccc0b3>
Меню</td></tr>
<tr align=center>
<td bgcolor=#ebebeb>Контент</td></tr>
<tr align=center><td bgcolor=#ccc0b3>
Подвал сайта</td></tr>
</table>
</body>
</html>
]]>
|
|
| Шаблон сайта-2 |
| Меню | Контент |
| Подвал сайта |
|
<![CDATA[
<html>
<body>
<table border="1" bgcolor=#bfa798 width=100%>
<tr align=center>
<td colspan=2 style="color:#950000; font-size:14pt">
Шаблон сайта-2</td></tr>
<tr align=center>
<td style="width:20%">Меню</td>
<td bgcolor=#ebebeb>Контент</td></tr>
<tr align=center><td colspan=2>Подвал сайта</td></tr>
</table>
</body>
</html>
]]>
|
|
| Шаблон сайта-3 |
| Меню | Контент | фото дня |
| Подвал сайта |
|
<![CDATA[
<html>
<body>
<table border="1" bgcolor=#bfa798 width=100%>
<tr align=center>
<td colspan=3 style="color:#950000; font-size:14pt">
Шаблон сайта-3</td></tr>
<tr align=center>
<td style="width:20%">Меню</td>
<td bgcolor=#ebebeb> Контент </td>
<td style="width:20%">фото дня</td></tr>
<tr align=center><td colspan=3>Подвал сайта</td></tr>
</table>
</body>
</html>
]]>
|
|
| Шаблон сайта-4 |
Контент | Меню |
| Подвал сайта |
|
<![CDATA[
<html>
<body>
<table border="1" bgcolor=#bfa798 width=100%>
<tr align=center>
<td colspan=2 style="color:#950000; font-size:14pt">
Шаблон сайта-4</td></tr>
<tr align=center>
<td bgcolor=#ebebeb>Контент</td>
<td style="width:20%">Меню</td></tr>
<tr align=center><td colspan=2>Подвал сайта</td></tr>
</table>
</body>
</html>
]]>
|
Язык HTML был создан Тимом Бернерсом-Ли в 90-х годах прошлого века. Изначально HTML использовался исключительно как инструмент для форматирования и обмена документации пользователями, которые не имели навыков верстки. Главной функцией первой версии HTML было корректное, без каких-либо структурных искажений, воспроизведение текста на различных устройствах вывода информации.
За прошедшее время HTML претерпел существенные изменения и значительно расширил возможности верстки документов. Язык имеет несколько версий:
- Первые версии HTML — начало 90-х годов. Спецификаций не существует, так как единого официального стандарта языка на тот момент не было. Язык был ориентирован только на обработку текста и применение к нему атрибутов — жирный текст, курсив etc.
- HTML 2.0 — появилась поддержка форм.
- HTML 3.2 — появилась возможность создания таблиц, отображение математических формул, эффект обтекания изображений.
- HTML 4.0 — были отменены некоторые элементы HTML, взамен которых было предложено использовать таблицы стилей CSS. Была добавлена поддержка скриптов и фреймов.
- HTML 4.01 — доработанная версия 4.0.
- HTML 5 — 2010-й год — нынешнее время.
