| Меню сайта |
|
 |
| Реклама |
 |
|
|
 | |  |
|
Структура HTML-документа
|
|
Структура HTML-документа
В этом уроке ознакомимся со структурой html-документа, узнаем из чего он состоит, попробуем создать свой первый html-документ и проверим как он работает в браузере. Первым делом необходимо создать на своем компьютере папку в которой будем хранить html-файлы, созданные на уроках.
Открываем блокнот и пишем первую строку документа:
<!DOCTYPE html public "-//W3C//DTD html 4.01 Transitional//EN">
В этой строке идет указание версии языка html на которой пишется html-документ. В данном случае версия 4.01.
Следующие - это два корневых тега <html> и </html> именно они указывают, что все, что лежит внутри этих тегов и является html-кодом. А что же такое тег? Это и есть ячейка (элемент) языка html из которых мы и делаем разметку всего документа. Тег всегда заключается в угловые скобки < и >.
Теги бывают парные и непарные. В данном случае мы видим парный тег: <html> - открывающий, </html> - закрывающий тег. Непарный тег - это тег одинарный: только открывающий.
Вторым элементом структуры html-документа является парный тег <head> и </head>. Это голова документа которая содержит служебную информацию (название страницы, ее кодировку, различные мета-теги для поисковых систем и др.) Первый тег, который помещаем в голову документа тег <title>.
<title>заголовок документа (web-страницы)</title>
Следующий тег в голове документа - тег кодировки. Это кодировка текста на русском языке. И еще мы видим пример непарного (одинарного) тега.
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Следующий служебный тег мета тег "Keywords". Этот тег больше предназначен для поисковых систем. В него мы вносим ключевые слова, встречающиеся в html-документе.
<meta name="Keywords" content="Ключевые слова">
Далее идет служебный тег мета "Description". Это так же тег для поисковиков. В него вписываем краткое описание вашей страницы (о чем ее содержание). Из всех перечисленных тегов пользователь увидит только тег <title>, который отображается в самом верху браузера.
<meta name="Description" content="Описание страницы">
Основной же контент который будет видеть пользователь размещается между тегами <body> и </body>.
Body с английского - это тело. Все прописанное в этом теге и есть тело html-документа, в котором будет содержаться вся информация, которую пользователь,увидит на вашей web-странице.
Давайте теперь просмотрим целиком все, что мы написали в блокноте:
<!DOCTYPE html public "-//W3C//DTD html 4.01 Transitional//EN">
<html>
<head>
<title>заголовок документа (web-страницы)</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="Keywords" content="Ключевые слова">
<meta name="Description" content="Описание страницы">
</head>
<body>
Тут будет контент web-страницы
</body>
</html>
Это и есть основная структура html-документа. Осталось наполнить страницу каким-нибудь содержимым, что бы посмотреть результаты работы. Этот каркас документа мы будем использовать во всех страницах, которые будем создавать, лишь будем менять название страницы, ключевые слова и описание страницы.
После того, как вы прописали в блокноте этот html-код, давайте сохраним этот файл в ту папку, которую мы создали для этой цели. Не забудьте при этом дать имя файлу (например: index) и сменить расширение txt на html, что бы операционная система знала, что это html-файл, а не обычный текстовый. Тип файла - все файлы.
Откроем созданный нами файл браузером. Как видим - страница пуста. Это потому, что тег <body> ни чем не наполнен. Так давайте же займемся наполнением нашей web-странички.
Добавим в тело нашей страницы два абзаца, применив при этом парный тег <p>. Там где абзац начинается ставим открывающий тег <p>, где абзац заканчивается ставим закрывающий тег </p>.
Пример:
<p>Первый абзац</p>
<p>Второй абзац</p>
Добавьте эти два абзаца (можно вставить свой текст) в html-файл и просмотрите в браузере результат.
|
|
|
|
|
| |
 | |  |
|
| Заработай сейчас! |
 |
|
| Навигация по сайту |
|
|
| Поиск по сайту |
|
|
|
