Материал: Создание простейших web-документов. методические указания к выполнению лабораторной работы. Кострюков С.А., Пешков В.В
Структура документа HTML
Все документы HTML имеют одинаковую структуру, которая определяется фиксированным набором тегов структуры. Документ HTML всегда начинается с тега <HTML> и заканчивается соответствующим закрывающим тегом </HTML>. Внутри документа должны быть два основных раздела – раздел заголовков и тело документа, идущих именно в таком порядке. Раздел заголовков содержит данные, описывающие документ в целом, и ограничивается тегами <HEAD> и </HEAD>. В частности, он должен содержать общий заголовок документа, ограниченный парным тегом <TITLE>, </TITLE>.
Основное содержание помещается в теле документа, которое ограничивается тегами <BODY> и </BODY>. Вообще говоря, положение этих структурных тегов в документе нетрудно определить, даже если они опущены. Поэтому стандарт языка HTML требует только наличия тега <TITLE> (и, соответственно, </TITLE>). Тем не менее, при создании документа HTML опускать структурные теги не рекомендуется.
Простейший корректный документ HTML, содержащий все теги, определяющие структуру, выглядит следующим образом:
Элементы HTML
В случае парных тегов их область действия – от открывающего до закрывающего тега. Эта часть документа рассматривается как элемент языка HTML. Например, можно говорить об «элементе BODY», включающем тег <BODY>, основное содержание документа и закрывающий тег </BODY>. Весь документ HTML формально можно рассматривать как «элемент HTML». В случае непарных тегов элемент совпадает с тегом, который его определяет.
6
Как правило, элемент языка HTML описывает часть документа и находится между тегами <BODY> и </BODY>. Такие элементы делятся на блочные и текстовые. Блочные элементы относятся к частям текста уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и еще более мелких частей текста.
Правила вложения элементов:
–Элементы не должны пересекаться. То есть, если открывающий тег находится внутри элемента, то и соответствующий закрывающий тег должен стоять внутри того же элемента.
–Блочные элементы могут содержать вложенные блочные и текстовые элементы.
–Текстовые элементы могут содержать вложенные текстовые элементы, но не могут содержать вложенные блочные элементы.
Вообще говоря, все правила языка HTML можно рассматривать как «пожелания». Средство воспроизведения web-доку- мента сделает всѐ возможное, чтобы истолковать разметку наиболее разумным образом. Тем не менее, гарантию правильного отображения документа даѐт только четкое следование правилам языка.
Заголовки и абзацы
Основными функциональными элементами в большинстве web-страниц являются заголовки и абзацы. Язык HTML позволяет использовать заголовки шести уровней. Они задаются парными тегами от <Н1> до <Н6>. При выводе web-страницы на экран эти заголовки отображаются шрифтами разного размера.
Обычные абзацы задаются парным тегом <Р> (при этом закрывающий тег </Р> необязателен). При отображении на экране абзацы отделяются друг от друга пустой строкой. Например:
Следует помнить, что из-за наличия специального тега, задающего абзац, обычного символа конца абзаца (клавиша
7
Enter) для создания нового абзаца недостаточно. Язык HTML рассматривает символы конца абзаца и пробелы особым образом. Любая последовательность, состоящая только из пробелов и символов конца абзаца, при отображении документа рассматривается как одиночный пробел. В частности, это означает, что символ конца абзаца даже не осуществляет перехода на новую строку (для этого используется непарный тег <BR>).
В качестве разделителя абзацев может также использоваться горизонтальная линейка. Этот элемент задается непарным тегом <HR>. При отображении документа на экране линейка отделяет части текста друг от друга. Ее параметры задаются атрибутами тега. Например:
<HR ALIGN="RIGHT" SIZE="10" WIDTH="50%">
Этот тег создает горизонтальную линейку шириной в 10 пикселов, которая занимает половину ширины окна и располагается справа.
Гиперссылки
Гипертекстовая ссылка, или просто гиперссылка, является текстовым элементом, который задаѐтся парным тегом <А>. Этот тег должен содержать обязательный атрибут HREF=, в качестве значения которого используется адрес URL документа, на который указывает ссылка. Она может указывать на произвольную web-страницу на любом общедоступном сайте, либо другую часть этого же документа. Пример открывающего тега:
<А HREF="http://www.abcdef.com/index.htm">.
Адрес URL в абсолютной форме начинается с указания протокола и адреса сайта. Такая форма записи используется, если нужно перенаправить посетителя на другой сайт, и является внешней ссылкой. Если же используется относительный адрес, то в ссылке указывается относительный путь доступа для документа. При этом предполагается использование того же протокола и того же сайта, а ссылка рассматривается как внутренняя. Такая ссылка сохраняет работоспособность в случае изменения адреса сайта в целом, например, при переносе его на другой сервер.
8
Гиперссылки могут применяться для ссылки на файлы мультимедиа. Это удобно, так как при этом не приходится ждать загрузки мультимедийных файлов при работе с данной web-страницей. Если же нужно интегрирование объектов мультимедиа в web-страницу, то используется парный тег <OBJECT> или нестандартный непарный тег <EMBED>, который тоже поддерживается большинством браузеров.
Полный формат гиперссылки дает возможность ссылки на определенное место внутри той же страницы. Это можно сделать, пометив соответствующее место при помощи якоря. Якорь задается также парным тегом <А>, но здесь обязательным атрибутом является NAME=. Значение атрибута – произвольная последовательность символов (латинских букв и цифр, пробелы недопустимы), которая будет служить именем якоря. Для ссылки на якорь его имя указывается в конце адреса URL после символа «#»:
<A HREF="http://www.abcdef.com/index.htm#address">
Web-графика
В настоящее время для включения в web-страницы используются в основном три формата изображений – GIF, JPEG и PNG. Все браузеры способны распознавать и отображать файлы этих форматов.
Подготовку изображений можно производить в любом графическом редакторе, который способен сохранять файлы в указанных форматах, например, в программе Paint.
Рисунки в формате GIF (Graphic Interchange Format) со-
держат 256 цветов, заданных индексной палитрой. Файл архивирован и имеет намного меньший размер, чем соответствующий неупакованный растровый рисунок (например, в формате
.BMP). Формат GIF поддерживает анимационные изображения. Файлы с рисунками в формате JPEG (Joint Photographic Expert Group) имеют расширение .JPEG или .JPG. Этот формат служит для хранения фотографий, использующих 24-битный цвет. Алгоритм JPEG позволяет сжимать изображение как с
9
потерями, так и без потерь. Поддерживаются изображения с линейным размером не более 65535 × 65535 пикселей.
PNG (Portable Network Graphics) – растровый формат хра-
нения графических данных, также использующий сжатие без потерь. PNG был создан как свободный формат для замены устаревшего формата GIF и позиционируется прежде всего для использования в Интернете и редактирования графики.
Рисунки хранятся на web-сайтаx в отдельных файлах, но отображаются как элементы web-страниц. Для вставки изображения в web-страницу используется непарный тег <IMG>. Этот тег должен включать обязательный атрибут SRC=, в котором задаѐтся адрес URL файла с изображением (относительный или абсолютный):
<IMG SRC="pic1.gif">
По умолчанию при выводе рисунка браузер будет использовать его реальные размеры. Если же рисунок нужно масштабировать, то используют атрибуты WIDTH= и HEIGHT=, где задаются соответственно ширина и высота рисунка в пикселах. Если эти параметры присутствуют, браузер может рассчитать требуемое место для отображения рисунка ещѐ до того, как рисунок будет загружен. Это немного ускорит вывод на экран данной web-страницы, поэтому рекомендуется всегда задавать эти атрибуты.
<IMG SRC="pic2.jpg" WIDTH="150" HEIGHT="50">
Расположение рисунка относительно текста и других элементов web-страницы может быть различным. Поскольку рисунок задается как элемент, находящийся внутри какого-то абзаца, то по умолчанию он рассматривается как встроенное изображение, включѐнное в строку текста. Для того, чтобы рисунок отображался независимо, его следует включить в отдельный абзац. Для рисунка, включѐнного в строку, можно задать режим взаимодействия с текстом при помощью атрибута ALIGN=.
<IMG SRG="pic3.gif" ALIGN="BOTTOM">
Этот атрибут может иметь следующие значения:
10