Структура html-документа
Текст всего документа заключается в теги: <HTML>. . . </HTML>.
В заголовке (<HEAD> . . . </HEAD>) указывается название HTML-документа и другие параметры, которые браузер будет использовать при отображении документа.
Т
ело
(<BODY>
. . . </BODY>)
– это та
часть, в которой помещается собственно
содержимое HTML-документа.
Рис. 1. Структура HTML-документа.
<HTML> и </HTML>
Эти теги сообщают браузеру, что текст между ними следует интерпретировать как текст html.
<HEAD> и </HEAD>
Эти теги отмечают вводную и заголовочную части документа HTML-документа. Между тегами <HEAD> всегда располагаются теги <TITLE>.
<TITLE></ TITLE>
Между этими тегами помещается название HTML-документа. Заголовок должен описывать цель документа и содержать не больше 5-6 слов. Название домашней страницы выводится браузером на строке заголовка. Кроме того, когда вы устанавливаете закладку на определенную страницу, выводится и ее название.
<BODY></BODY>
Текст, охваченный этими тегами, является основной частью документа, т.е. его содержимым.
Еще есть пара важных тегов - <ADDRESS> и </ADDRESS>.
Эти теги охватывают информацию о том, к кому нужно обращаться в отношении данной страницы в том случае, если у кого-либо возникнут вопросы или замечания (например, адрес электронной почты).
Теги <ADDRESS> используются для того, чтобы отделить эту информацию от основного блока.
Задание 1.
Загрузите текстовый редактор Notepad (Блокнот). Наберите следующий ниже текст и сохраните его под именем web1.html в вашей личной папке.
_________________________________________________
<HTML> <HEAD> <TITLE>Домашняя страница (укажите свою фамилию и имя).</TITLE> </HEAD>
<BODY> ПРИВЕТ! Это моя личная домашняя страничка! Меня зовут (укажите свою фамилию и имя).
<ADDRESS>
Иванов Сергей – e-mail:ivanov@psu.unibel.by
</ADDRESS>
</BODY>
</HTML>
_________________________________________________
Запустите браузер Internet Explorer. Откройте файл web1.html. Вот что должно получиться (Рис. 2).
Рис. 2. Иллюстрация к заданию 1.
Создание заголовков
Язык HTML поддерживает 6 уровней заголовков, для которых используются теги <Hn> и </Hn>. n - это уровень заголовка. Он принимает значение от 1 до 6. Причем, первый номер соответствует самому крупному шрифту. Заголовки должны быть информативны и привлекательны для читателя. Текст заголовка пишется между открывающим и закрывающим тегом.
Задание 2.
Измените вид вашей Web-страницы, введя приведенный ниже текст. Сохраните файл под именем web2.html в свою личную папку, выполнив операцию Сохранить как. Откройте этот файл в браузере. Результат приведен на рисунке 3.
_________________________________________________
<HTML> <HEAD> <TITLE>Домашняя страница (укажите свою фамилию и имя).</TITLE> </HEAD>
<BODY> <H1> Добро пожаловать к (укажите свою фамилию и имя)</H1>
<H2>Приглашаются все желающие!</H2>
<ADDRESS>
Иванов Сергей – e-mail: ivanov@psu.unibel.by
</ADDRESS>
</BODY>
</HTML>
_________________________________________________
Рис. 3. Иллюстрация к заданию 2.
Ввод текста и иной информации
Web-браузеры игнорируют пробелы, табуляции и переводы строки, если только они не определены соответствующими тегами.
Тег нового абзаца.
Для форматирования абзацев используется тег <Р>, его следует располагать в начале нового абзаца, за исключением тех мест, где используется тег прерывания строки. <P> предписывает браузеру разделить два фрагмента текста пустой строкой. Закрывающий тег </P> использовать необязательно.
Таблица 1.
|
ТЕГ |
АТРИБУТЫ |
|
<Р> - тег нового абзаца |
align=тип Задает способ выравнивания текста в абзаце: по левому краю (left, по умолчанию), центру (center) или правому краю (right). Например, <P align=right>…- абзац будет выровнен по правому краю. |
Теги заголовков автоматически выполняют возврат каретки и оставляют пустую строку после текста между тегами <Hn> и </Hn>.
Тег перевода строки.
Тег перевода строки <BR> аналогичен тегу нового абзаца, но он не вводит пустую строку после отделяемого им текста. После этого тега текст продолжает отображаться с начала следующей строки.
В HTML существует два тега, производных от <BR>.
Тег разбивки слова <WBR> означает, что браузер должен разбить указанное слово, если его придется перенести на следующую строку.
Если, напротив, браузеру не следует переносить текст на другую строку, его окружают тегами <NOBR> и </NOBR>. Теги запрета переноса блокируют автоматический перенос строк. Они полезны, когда вам необходимо, чтобы определенная группа слов всегда отображалась на одной строке.
Тег горизонтальной линии.
Тег горизонтальной линии <HR> может быть средством организации текста и дизайна. Он помогает посетителям страницы понять, какие части информации соотносятся друг с другом, а также разделяет страницу на несколько частей. Например, тег <HR> можно применить непосредственно над адресом электронной почты, чтобы отделить эту информацию от обычного текста. Используя атрибуты тега <HR> можно видоизменить горизонтальную линию.
Таблица 2.
|
ТЕГ |
АТРИБУТЫ |
|
<HR> - тег горизонтальной линии |
align=тип Задается способ выравнивания линейки: по левому краю (left), по центру (center, по умолчанию) или правому краю (right). color=цвет Задается цвет линейки. size=n Установка толщины линейки равной целому числу пикселей. Чтобы толстые линии отображались сплошными (темными), используйте вместе со словом size опцию noshade (<HR noshade size=5>). width=значение Установка ширины линейки либо равной целому числу пикселей, либо в процентах от ширины страницы.
|
Предварительное форматирование.
Если Вы хотите, чтобы браузер не форматировал ваш текст и чтобы информация, набранная в HTML-файле, точно также выглядела и в браузере без использования тегов форматирования, используйте теги <PRE> и </PRE>. Заключенный в теги текст будет отображаться так, как он был отформатирован предварительно, без обработки, с точным соблюдением переносов строк и интервалов.
Задание 3.
Откройте ваш HTML-файл. Внесите следующие изменения. Сохраните изменения. Обновите Web-страницу.
_________________________________________________
<HTML>
<HEAD>
<TITLE>Домашняя страница (укажите свою фамилию и имя).</TITLE>
</HEAD>
<BODY>
<H1> Добро пожаловать к (укажите свою фамилию и имя) </H1>
<H2>Приглашаются все желающие!</H2>
<HR>
Я рад приветствовать Вас на моей Web-странице. Я непрерывно работаю над этой страницей, и она постоянно обновляется.
<P>Вот что я люблю делать в свободное время: (напишите о себе).
<H3> Мои любимые книги (можно кинофильмы и пр.):</H3>
(Введите название первой книги)<BR>
(Введите название второй книги)<BR>
(Введите название третей книги) <P>
<HR>
<ADDRESS>
Иванов Сергей – e-mail:ivanov@psu.unibel.by
</ADDRESS>
</BODY>
</HTML>
_________________________________________________
В конце используется тег <P>, чтобы отделить список от следующего абзаца.
У вас должно получиться что-то похожее на представленное на рис.4.
Р
ис.
4. Иллюстрация к заданию 3.