В большинстве документов основными функциональными элементами являются заголовки и абзацы. Лабораторная работа № 12 Тема: Язык разметки гипертекста HTML Теговая модель языка Управляющие конструкции языка называются тегами. Все теги заключаются в угловые скобки <…>. Сразу после открывающей скобки помещается ключевое слово, определяющее тег, например <BODY>. Теги бывают парнымиинепарными. Непарные теги оказывают воздействие на весь документ. Парные теги бывают открывающими и закрывающими и воздействуют они на ту часть документа, которая заключена между ними. Например: <B> - открывающий тег, </B> - закрывающий тег. Закрытие парных тегов выполняется так, чтобы выполнялось правило вложения: если тег открыт внутри какого-то тега, то и закрываться он должен внутри этого же тега. Например: <B><I>На этот текст воздействуют два тега</I></B>. Эффект применения тега может видоизменяться путем добавления атрибутов. В парных тегах атрибуты могут добавляться только к открывающему тегу. Атрибуты – это дополнительные ключевые слова, отделяемые от слова, определяющего тег и от других атрибутов пробелами и размещаемые до символа >. Иногда требуется указание значения атрибута. Значение атрибута отделяется от ключевого слова атрибута знаком «=» и заключается в кавычки. Например: <HR ALIGN=”LEFT” > Тег <HR > позволяет создать на странице горизонтальную линейку, а атрибут ALIGN со значением LEFT размещает ее в левой части экрана. Структура документа HTML Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов. Документ HTML всегда должен начинаться с тега <HTML> и заканчиваться соответствующим тегом </HTML>. Внутри документа выделяются два основных раздела: раздел заголовков и тело документа – идущие именно в таком порядке. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается заголовками <HEAD> и </HEAD>. Раздел заголовка также содержит общий заголовок документа, ограниченный парным тегом <TITLE>. Основное содержание размещается в теле документа, которое ограничивается парным тегом <BODY>. Простейший правильный документ HTML, содержащий все теги, выглядит следующим образом: <HTML> <HEAD> <TITLE>Заголовок документа</TITLE> </HEAD> <BODY>Содержание документа</BODY> </HTML> В браузере Internet Explorer страница отобразится так, как показано рисунке 1.  Рисунок 1 – Вид простейшей Web-страницы Функциональные элементы HTML Элементы, заключенные между тегами <BODY> и </BODY> делят на блочныеитекстовые. Блочные элементы относятся к частям текста уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и еще более мелких частей текста. Создавая документ HTML нужно следовать основным правилам вложения элементов, а именно: 1) элементы не должны пересекаться, т.е. если открывающий тег располагается внутри элемента, то и соответствующий закрывающий тег должен располагаться внутри этого же элемента, 2) блочные элементы могут содержать вложенные блочные и текстовые элементы, 3) текстовые элементы могут содержать вложенные текстовые элементы, 4) текстовые элементы не могут содержать вложенные блочные элементы. В большинстве документов основными функциональными элементами являются заголовки и абзацы. Язык HTML поддерживает шесть уровней заголовков. Они задаются при помощи парных тегов от <Н1> до <Н6>. При отображении Web-документов на экране компьютера эти элементы отличаются размером шрифта, и расположением относительно последующего текста. Параметры каждого уровня заголовков описаны в таблице 1. Таблица 1 – Параметры уровней заголовков Уровень абзаца | Параметры | H1 | Толстый, очень крупный шрифт, текст центрирован. Между заголовком и последующим текстом вставляется одна или две пустых строки. При выводе на принтер заголовок печатается на новой странице. | H2 | Толстый крупный шрифт. Без отступа. До и после заголовка помещаются одна или две пустых строки. | H3 | Крупный шрифт. До и после заголовка помещаются одна или две пустые строки. С небольшим отступом. | H4 | Толстый нормальный шрифт. До и после заголовка помещается пустая строка. | H5 | Нормальный шрифт. Пустая строка ставится перед заголовком, но не после. | H6 | Толстый шрифт. Перед заголовком ставится пустая строка. | На Web-странице абзацы разных уровней выглядят так, как показано на рисунке 2.  Рисунок 2 – Шесть уровней абзацев, отображенных на странице HTML-код такой страницы выглядит следующим образом: <HTML> <HEAD> <TITLE>Уровни абзацев</TITLE></HEAD> <BODY> <H1>Первый уровень абзацев</H1> <H2>Второй уровень абзацев</H2> <H3>Третий уровень абзацев</H3> <H4>Четвертый уровень абзацев</H4> <H5>Пятый уровень абзацев</H5> <H6>Шестой уровень абзацев</H6> </BODY> </HTML> Каждый абзац страницы задается парным тегом <Р>. Язык HTML не содержит средств для создания «красной строки», поэтому при отображении на экране абзацы разделяются пустой строкой. Закрывающийся тег </Р> является необязательным. Например, если часть HTML-кода записана так: <Н1>Заголовок</Н1> <Р>Первый абзац<Р>Второй абзац <Н2>Заголовок второго уровня</Н2>, то на Web-странице она отобразится так, как показано на рисунке 3.  Рисунок 3 – Страница с заголовками двух уровней и двумя абзацами, расположенными между ними В отличие от текстового редактора ввод символа Enter не является признаком конца абзаца. Язык HTML рассматривает символы конца строки и пробелы особым образом. Любая последовательность, состоящая только из пробелов и символов конца строки, при отображении рассматривается как одиночный пробел. Enter не осуществляет также и переход на новую строку. Для того, чтобы перейти на новую строку, используют тег <BR>. В качестве разделителя абзацев используется также текстовая линейка. Она задается непарным тегом <HR>. К этому тегу можно применять атрибуты: ALIGN – для выравнивания линейки по центру (значение center), по правому краю страницы (значение right) и по левому краю страницы (значение left), SIZE – высота линейки в пикселах, WIDTH – ширина в процентах относительно ширины экрана, COLOR – цвет линии Например, <HR ALIGN=”RIGHT” SIZE=”10” WIDTH=”50%”> Этот тег создает горизонтальную линейку шириной в 10 пикселов, занимающую половину экрана и расположенную справа. Форматирование текста Основным тегом, управляющим форматированием текста является тег <FONT>. <FONT> - парный тег, управляющий параметрами шрифта. Тег FONT должен обязательно содержать хотя бы один из атрибутов: COLOR, FACE или SIZE. Атрибут SIZE задает размер шрифта в относительных единицах от -7 до 7 (от мелкого шрифта к крупному), например, < FONT SIZE=”6”> - шрифт шестого размера. Атрибут COLOR задает цвет текста, выраженный текстовым значением, например, < FONT COLOR =”GREEN”> - шрифт зеленого цвета. Атрибут FACE задает гарнитуру шрифта. Значение этого атрибута есть название шрифта, например, < FONT FACE=”Times New Roman”> шрифт Times New Roman. Кроме тега FONT существуют и другие теги, предназначенные для форматирования текста. <CITE> - парный тег для вывода цитат (отображаются курсивом), <EM> - парный тег выделения, <STRONG> - парный тег сильного выделения, <U> - парный тег подчеркнутого шрифта, <S> - парный тег зачеркнутого шрифта, <B> - парный тег полужирного шрифта, <I> - парный тег курсива, <SUB> - парный тег нижнего индекса, <SUP> - парный тег верхнего индекса, <MARQUEE> - парный тег бегущей строки, <BASEFONT> - парный тег задания параметров вывода текста по умолчанию. Также должен обязательно содержать хотя бы один из атрибутов: COLOR, FACE или SIZE. |