Предварительное форматирование текста
Наиболее простым способом форматирования в документах HTML является сохранение признаков формата раннее подготовленного текста. Для этого используется элемент <PRE>. Текст, который находится между тегами <PRE> и </PRE> отображается в браузере точно в таком виде, как и в текстовом редакторе, со всеми символами табуляции, пробелами, переходами на новую строку и т.д.
На основе приведенного ниже кода создайте в Блокноте новый файл.
<HTML>
<HEAD>
<TITLE> Пример предварительного формата </TITLE>
</HEAD>
<BODY>
<PRE>
_ _ _ _ _ _ _это_ _ _ _ _ _ _
пример текста с предварительным форматированием
</PRE>
_ _ _ _ _ _А это_ _ _ _ _ _ _
текст без форматирования
</BODY>
</HTML>
Сохраните файл на диске под именем prim_2.html и откройте его в Internet Explorer. Вы должны будите получить следующее изображение Web – странички.
рис. 1.4 HTML-документ с предварительным форматированием текста
Задания для самостоятельной работы:
В редакторе Блокнот в созданном файле prim_2.html внесите какие-либо изменения в текст, который находится в контейнере <PRE>, а потом – изменения в текст вне контейнера.
Перейдите с полноэкранного в окно режим Internet Explorer и проанализируйте как изменяется расположение текста при изменении ширены окна.
Заголовки
На любой Web – страничке пользователь сначала обращает внимания на заголовки. Именно здесь он получает информацию про содержание основного текста. Поэтому заголовки должны нести максимальную содержательную нагрузку.
Заголовки задаются парными тегами <Hx>, где х=1,2,3…6, причем конечный тег </Hx> является обязательным.
В HTML определено шесть уровней заголовков от Н1 до Н6. Самый крупный заголовок – первого уровня (Н1), а шестого (Н6) – самый мелкий. При отображении в браузере заголовки отделяются от текста пустыми строками и полужирным шрифтом.
1.6.1 На основе приведенного ниже кода создайте новый файл, который будет
иметь заголовки всех шести уровней.
<HTML>
<HEAD>
<TITLE> Пример заголовков </TITLE>
</HEAD>
<BODY>
<H1> Заголовок первого уровня </H1>
<H2> Заголовок второго уровня </H2>
<H3> Заголовок третьего уровня </H3>
<H4> Заголовок четвертого уровня </H4>
<H5> Заголовок пятого уровня </H5>
<H6> Заголовок шестого уровня </H6>
<BODY>
</HTML>
1.6.2 Сохраните файл на диске под именем prim_3.html и откройте его в Internet Explorer.
1.6.3 Используя атрибут align, самостоятельно выровняйте в файле prim_3. html
заголовки третьего и пятого уровней по центру, а 4-го и 6-го уровней по правому краю.
Вы должны получить следующее изображение Web- странички:
рис. 1.5 Пример использования заголовков в HTML
Горизонтальные линии в документе
Разные части большого документа можно визуально отделить друг от друга с помощью горизонтальных линий.
Для отображения горизонтальных линий используется элемент (HR) По умолчанию стандартная линия занимает всю ширину окна браузера.
Горизонтальная линия – это графический элемент HTML – документа, которая имеет длину, толщину и цвет, для их обозначения существуют соответствующие атрибуты.
Атрибуты дескриптора <HR>:
ALIGN – Выравнивание линии;
WIDTH – Устанавливает длину линии в пикселях или процентах;
SIZE – Устанавливает толщину линии;
NOSHADE – Создает линию без тени;
COLOR – Задает цвет линии.
На основе приведенного ниже кода создать новый файл, который будет демонстрировать использование разных атрибутов элемента (HR)
<HTML>
<HEAD>
<TITLE> Пример горизонтальной линии </TITLE>
</HEAD>
<BODY>
<H3> Пример горизонтальной линии </H3>
Линия шириною 40
<HR width =40>
Линия шириною 90, выровнена по правому краю
<HR width = 90 align = right>
Голубая линия толщиной 10 пикселов
<HR color = BLUE size = 10>
</BODY>
</HTML>
Сохраните файл на диске под именем prim 4. html и откройте его в Internet Explorer.
Вы должны получить следующее изображение Web- странички:
Рис. 1.6 Пример использования элемента <HR>.
1.7.3 Используя атрибут (HR), самостоятельно добавьте в файл prim_4. html следующие линии:
а) желтую линию с выравниванием по центру;
б) линию без тени шириною 30
в) красную линию шириною 5 пикселов и длинною 200 пикселов