Файл: Языки гипертекстовой разметки (Веб-страница как гипертекстовый инструмент).pdf

Использование HTML для задания элементов, находящихся на веб-странице, CSS для изменения внешнего вида объектов, взаимодействие пользователя с сайтом с помощью JavaScript является стандартом современного сайтостроения.

Огромное преимущество CSS при задании внешенего вида сайта состоит в разделении описания содержимого от его внешнего вида. Большинство правил оформления при использовании DHTML содержатся в CSS, а описание всех элементов, которые изначально находятся на веб-странице, задается в файле с расширением html.

Глава 2. Описание языка HTML

2.1 Базовые конструкции

Язык HTML не является языком программирования, как многие ошибочно думают. Если основой многих языков программирования являются операторы, которые говорят исполнителю, что нужно делать, то основу языка HTML составляют элементы.

Элементы в документе обозначаются с помощью специальных тегов, двух угловых скобок, внутри которых находится название элемента. Например, чтобы выделить некоторый текст полужирным шрифтом, например слово “Информатика”, на языке HTML следует использовать элемент b (от английского bold — жирный, полужирный). Для этого в документе можно заключить выделяемый текст между двумя тегами, то есть вот так: <b>Информатика</b>. Первый из этих тегов,<b> называется открывающим, потому что он открывает структуру, а второй </b> называется закрывающим, потому что он закрывает эту часть текста. Между этими двумя тегами может помещаться текст, либо теги других элементов, вместе с их содержимым.

Например, отдельный параграф на языке HTML обозначается с помощью элемента p. Если внутри этого параграфа мы захотим выделить часть текста жирным, мы можем использовать элемент b. Например так:

<p>Язык <b>HTML</b> очень удобен для применения и легок в освоении</p>

В браузере данный пример будет отображаться примерно так:

Язык HTML очень удобен для применения и легок в освоении.

То есть в предложении слово “HTML” будет иметь жирное начертание[7].

Большинство элементов задаются парой тегов и содержимым, однако есть некоторые элементы, которые не могут иметь содержимого. Например, элемент br задается тегом <br> без использования закрывающего тега. Данный элемент создает в тексте разрыв строки, то есть перенос части текста на другую строку. Другим распространенным примером является элемент img, который позволяет вставлять на веб-страницу изображение. Например так

<img src="goodgirl.jpg" alt="good girl">.

Здесь мы видим один тег <img> и внутри него особую конструкцию имя атрибута со значением атрибута. В данном примере атрибуты являются обязательными, поэтому мы приводим этот пример вместе с атрибутами.

2.2 Атрибуты

С помощью атрибутов сообщают некоторую информацию о элементе. Часто это информация о внешнем виде, либо о поведении элемента при взаимодействии с пользователем. Атрибуты бывают как обязательными, так и необязательными. В приведенном выше примере используется атрибут src — указывающий имя файла в той же директории в которой находится файл html документа (в более общем виде здесь должен находится путь к файлу) со значением атрибута goodgirl.jpg и атрибут с именем alt со значением good girl. Значение атрибута alt отображается вместо изображения, если по каким-то причинам изображение не отображается (например, не удалось загрузить). На заре развития веб-технологий с помощью атрибутов полностью описывался внешний вид веб-страниц. В настоящее время атрибуты используются только там, где это необходимо, либо целесообразно. Оформление же веб страницы формируется в основном с помощью технологии CSS и использования для этого отдельного файла с таблицами стилей[7]. Чаще всего в современных веб-страницах используются необязательные атрибуты id и class позволяющие выделить данный элемент среди других, либо выделить группу элементов, чтобы задать им потом одинаковое оформление, либо поведение. Общая структура введения атрибута такова:

<элемент имя атрибута=”значение атрибута”>

Например, с помощью записи

<p class=”front”>Язык <b>HTML</b> очень удобен для применения и легок в освоении</p>,

Мы отнесли данный параграф к классу front. Особенности представителей данного класса могут быть потом определены, например, с помощью технологий CSS, либо JavaScript.

2.3 Минимальная структура документа.

Документ на языке HTML должен отвечать правилам языка. Эти правила указывают структуру документа, то есть какие элементы обязательно должны присутствовать в документе и как их нужно располагать. Элемент, находящийся внутри содержания другого элемента называется вложенным, например

<p class=”front”>Язык <em>HTML</em> позволяет создавать веб-страницы.</p>

В этом примере элемент em является вложенным в элемент p. Говорят также, что элемент em является потомком элемента p, а элемент p является предком элемента em. Немного обговорим здесь назначение элемента em. Элемент em обычно используется для выделения некоторого элемента текста, хотя может использоваться и для других целей. Как именно будет реализовано выделение, определяется стилями, описанными для этого документа. По умолчанию содержимое данного элемента будет выделено курсивом[7].

Таким образом, в HTML одни элементы вкладываются в другие, при этом цепочка вложений может быть очень длинной. Структуру гипертекстового документа можно представлять в виде иерархической структуры. Часто можно встретить упоминание, что элементы HTML — это кирпичики, из которых состоит документ. Также структура документа похожа на русскую матрешку, где одни матрешки вкладываются в другие.

Далее приведем основную структуру HTML документа, то есть ту структуру, которую должны иметь все документы.

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Название нашей чудесной страницы</title>

</head>

<body>

<p>Я параграф 1</p>

<p>Я параграф 2</p>

</body>

</html>

В первой строчке объявляется тип документа. Если мы после слова DOCTYPE пишем просто HTML, это означает, что мы будем использовать версию языка HTML 5, то есть последнюю версию языка. Все, что дальше будет задавать на наш документ должно располагаться между открывающим и закрывающим тегом html[7].

Все остальные элементы вкладываются в элемент html. На третьей строчке мы видим открывающий тег элемента head. В этом элементе содержится информация о документе[8]. Например, на четвертой строчке указываются тип кодировки символов, который используется в данном документе. Содержимое элемента title служит для формирования названия страницы. Именно это название отображается в качестве названия вкладки окна браузера, когда в браузере будет открыта наша веб-страница. Внутри элемента head могут располагаться и другие элементы, несущие другую информацию. Например, может описываться для поисковых систем о чем данная веб-страница, могут указываться адреса подключаемых таблиц стилей CSS, сценариев на языке JavaScript и др[8].

Внутри элемента body находится все то, что должен увидеть пользователь на нашей странице. В нашем примере внутри элемента body находятся два элемента p, то есть два параграфа текста. В конце мы видим закрывающие теги элементов body и html. В этом документе, есть обязательные элементы это html, head и body, то есть они должны присутствовать в любом html-документе.

2.4 Элементы языка.

Рассмотрим те элементы языка HTML, которые можно встретить в исходном тексте практически любой веб-страницы. Прежде всего, это элементы, которые позволяют обрабатывать текст. Помимо приведенных элементов p сюда также относятся заголовки различных уровней, элементы h1, h2, h3 и т.д. Всего язык HTML 5 предусмотрено 6 уровней заголовков, то есть заголовки с первого по шестой уровень. В качестве примера приведем использование текстовых элементов параграфа и заголовка первого уровня [8].

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

Элемент h1 превращает текст (My First Heading) в заголовок первого уровня, который будет отображаться специальным образом, отличным от основного текста. Основной текст (My first paragraph.) является содержанием элемента p (параграфа текста).

Обратите внимание, элементы h1 и p являются дочерними по отношению к элементу body. Элементы могут быть вложены друг в друга, как матрешки.

Результат обработки такого документа в браузере будет выглядеть следующим образом:

Рисунок 2 — Отображение содержимого элементов h1 и p в браузере[8]

Часто используются на сайтах элементы img (изображение) и br, о которых мы рассказывали в предыдущих разделах. Элемент div не несет никакой смысловой нагрузки, однако является контейнером для других элементов. В современном подходе к созданию страниц без этого элемента не обходится ни один сайт.

Очень интересно применение элементов таблиц table. Помимо тех таблиц, что мы видим на сайте, на веб-страницах можно использовать таблицы для создания разметки. То есть эти таблицы не будут видны пользователю непосредственно, однако позволят расположить элементы там, где нужно. Такой способ создания разметки (верстка) широко использовался еще 7 лет назад. Однако, теперь он устарел, так как с его помощь тяжело реализовывать адекватное отображение веб-страниц на мобильных устройствах. Таблица задается следующим образом:

<table>

<tr>

<td>...</td>

</tr>

</table>

Элемент tr задает строку таблицы, а элемент td отдельную ячейку таблицы.

Для формирования нумерованного списка используется элемент ol, а для создания маркированного списка элемент ul. Например, маркированный список можно оформить так:

<ul>

<li>Чебурашка</li>

<li>Крокодил Гена</li>

<li>Шапокляк</li>

<li>Крыса Лариса</li>

</ul>

Этот пример будет отображаться в брузере так:

Рисунок 3 — Использование элементов ul

Элемент li служит для создания одного пункта списка. Такие элементы должны быть вложены в элемент ul, либо в элемент ol [7].

Существует много других элементов, позволяющих делать информацию в сети Интернет интересной и доступной.

Есть ряд элементов, называющихся пустыми. У этих элементов нет содержимого. Точнее, оно не задается между двумя тешами.

К таким элементам относятся: hr, img, input, keygen, link, meta.

Согласно модели DOM все элементы по способу представления (расположения на странице) делятся на группы: inline, block, inline-block и др

Отнесение к определенной группе означает, каким образом задается область расположения элемента и каким образом элемент ведет себя относительно других элементов.

Инлайн-элементы — это те элементы, которые не образуют новых блоков содержимого; содержимое определяется в строке (на месте) (например, выделенные участки текста внутри параграфа, инлайн-изображения и т.п.)

Таблица — Элементы группы Inline. Таблица составлена по [7,9]

Элементы уровня блока это элементы документа-источника, визуально отформатированные как блоки (например, параграфы).

Таблица — Элементы группы Block. Таблица составлена по [7,9]