Для правильного отображения HTML документа браузером этот документ должен иметь определенную структуру.
Структура простейшего HTML документа.
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>
Здесь расположено содержимое документа
</BODY>
</HTML>
Примечание. Для удобства восприятия парные теги (контейнеры) HTML документа выделены цветом.
Пояснения к тегам.
Парный тег <HTML> - в нем находится всё содержимое документа, включая теги <HEAD> и <BODY>.
Парный тег <HEAD> (от английского head - голова) - содержит заголовок документа, записанный внутри тега <TITLE> и другую служебную информациюю.
Наличие тега <TITLE> является обязательным для HTML документа
Наличие тега <TITLE> является обязательным для HTML документа
Парный тег <BODY> - содержимое этого тэга выводится в рабочую область браузера.
Именно внутри этого тега надо размещать содержательную часть документа: текст, рисунки, таблицы и т.п.
Именно внутри этого тега надо размещать содержательную часть документа: текст, рисунки, таблицы и т.п.
Простая HTML страница
Текст HTML страницы, сохраненной в файле index.html
<HTML>
<HEAD>
<TITLE>Моя первая Web-страница</TITLE>
</HEAD>
<BODY>
Привет! Привет! Привет! Это моя первая страница!
</BODY>
</HTML>
А вот как выглядит окно браузера Firefox , если открыть эту страницу:
Текст тега <TITLE> (заголовок страницы) отображается на вкладке браузера.
Текст тега <BODY> выводится в рабочую область браузера.
Текст тега <BODY> выводится в рабочую область браузера.
Текст следует набирать в блокноте (Notepad) и сохранять его в соответствующей папке с соответствующим именем и расширением .html.
Для упрощения работы создан бесплатно распространяемый редактор гипертекстовых документов Hefs. Редактор позволяет набирать, редактировать и просматривать гипертекстовые документы. Для просмотра полученного результата следует нажать кнопку "Показать в браузере" на панели редактора.
Окно редактора с HTML страницей из файла index.html:
Задания
Задание 1
1. В редакторе Hefs набрать следующий текст:
<HTML>
<HEAD>
<TITLE>Моя первая Web-страница</TITLE>
</HEAD>
<BODY>
Привет! Привет! Привет! Это моя первая страница!
</BODY>
</HTML>
2. Сохранить этот текст в головной папке вашего сайта, в файле index.html
3. Нажать кнопку "Показать в браузере" на панели редактора Hefs
4. Сравнить полученный результат с приведенным изображением.
Задание 2
1. Вставить в текст HTML страницы (index.html) теги <br> (перевод курсора на новую строку) как показано ниже.
<HTML>
<HEAD>
<TITLE>Моя первая Web-страница</TITLE>
</HEAD>
<BODY>
Привет! <br> Привет! <br> Привет! <br> Это моя первая страница!
</BODY>
</HTML>
2. Сохранить файл index.html.
3. Нажать кнопку "Показать в браузере" на панели редактора Hefs.
4. Сравнить полученный результат с приведенным изображением.