Файл: Основы программирования на языке HTML (ПО для создания и просмотра HTML документа).pdf

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

<noscript> используется для предоставления альтернативного контента для пользователей, у которых отключены скрипты в браузере, или у которых браузер их не поддерживает. Элемент noscript может содержать все элементы, которые могут использоваться в элементе body нормальной HTML страницы. Контент внутри элемента noscript будет показан при условии, что скрипты не поддерживаются или отключены в браузере.

Последние два тега можно использовать не только в голове, но и в теле документа.

Тело документа содержит в себе основной видимый контент. Находится оно между открывающим и закрывающим тегами <body></body>.

Следует отметить, что использование тегов <head>, <body> и <html> не является обязательным в текущей, пятой редакции HTML. Однако и сообщество разработчиков и организации, занимающиеся развитием HTML, сходятся на том, что их применение является правилом хорошего тона.

Основные теги

Различие строчных и блочных тегов.

Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные и строчные элементы.

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

Обычно блочные элементы используются, чтобы разделить содержимое веб-страницы на логические блоки (верхний колонтитул (шапка сайта), меню, блок с контентом, нижний колонтитул (footer) и др.). Блочные элементы нельзя вкладывать в строчные, исключением являются только ссылки и ячейки таблиц, внутри которых по стандарту HTML5 могут быть расположены блочные элементы.

Строчные элементы используются для разметки частей содержимого элементов. Ширина строчного элемента равна объему содержимого. В отличии от блочных элементов браузер не добавляет разрыв строки до и после строчного элемента, поэтому, если несколько строчных элементов идут подряд друг за другом, они располагаются на одной строке и переносятся на другую строку при необходимости. В большинстве случаев внутрь строчных элементов допустимо помещать другие строчные элементы, вставлять блочные элементы внутрь строчных запрещено.

Теги разметки текста

Теги <h1>-<h6>. HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>,...,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. В настоящее время принято за правило использовать на странице только один заголовок первого уровня, в котором помещают основной заголовок, воспринимаемый поисковыми системами как основу семантики страницы. Заголовки второго – шестого уровня можно использовать в любом необходимом количестве

Тег <p> (параграф). Определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста, идущие друг за другом, разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

Тег <span>. Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега <br> можно сделать так, чтобы следующая строка начиналась ниже элемента.

Теги выделения текста <em>, <strong>, <mark>, <i>, <b>, <strike>. Эти теги используются для различного выделения частей текста. Позволяют изменять начертание шрифта в жирный, курсив, подчеркнутый, зачеркнутый и т.п. В настоящее время используются редко, обычно заменяются стилизованным при помощи CSS тегом <span>.

Ссылки

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис:

Атрибуты:

accesskey

Активация ссылки с помощью комбинации клавиш.

coords

Устанавливает координаты активной области.

download

Предлагает скачать указанный по ссылке файл.

href

Задает адрес документа, на который следует перейти.

hreflang

Идентифицирует язык текста по ссылке.

name

Устанавливает имя якоря внутри документа.

rel

Отношения между ссылаемым и текущим документами.

rev

Отношения между текущим и ссылаемым документами.

shape

Задает форму активной области ссылки для изображений.

tabindex

Определяет последовательность перехода между ссылками при нажатии на кнопку Tab.

target

Имя окна или фрейма, куда браузер будет загружать документ.

title

Добавляет всплывающую подсказку к тексту ссылки.

type

Указывает MIME-тип документа, на который ведёт ссылка.

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

Нумерованные и маркированные списки

Маркированные списки (или ненумерованные списки)

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

<li>Пункт 1</li>

<li>Пункт 2</li>

<li>Пункт 3</li>

</ul>

Сначала весь список берется в теги <ul> </ul>. Необходимо помнить, что теги открытия и закрытия списка – парные, требуется обязательный закрывающий тег.

Атрибут type

Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя с помощью CSS можно задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов (в том числе и в нумерованном списке HTML):

Элементы списка — тег <li>

Каждый элемент в списке обворачивают в отдельную пару тегов <li> </li>. Допускается не использовать закрывающий тег, в случае если дальше идет закрывающий родительский элемент, либо следующий элемент списка. Однако лучше всегда использовать закрывающий тег.

Приведенный выше список имеет общий атрибут type для списка <ul>, однако его можно так же задать для каждого элемента списка <li>.

Упорядоченный / нумерованный список

Если вы хотите упорядочить элементы списка, тогда необходимо использовать тег <ol>. По умолчанию он задает нумерованный список HTML:

<li> Пункт 1</li>

<li> Пункт 2</li>

<li> Пункт 3</li>

</ol>

Результат:

A. Пункт 1

B. Пункт 2

C. Пункт 3

Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными.

Свойство start, которое позволяет начать нумерацию с указанного номера:

<li> Пункт 1</li>

<li> Пункт 2</li>

<li> Пункт 3</li>

</ol>

Результат:

4. Пункт 1

5. Пункт 2

6. Пункт 3

Свойство reversed позволяет вывести нумерованный список в обратном порядке.

Изображения

Изображения добавляются в гипертекстовый документ с помощью тега <img>. Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа. Тег <img> является строчным, и имеет два обязательных атрибута: src и alt (Рисунок 3).

Рисунок 3

В атрибуте src указывают адрес изображения. Адрес изображения может быть указан полностью (абсолютный URL), например:

http://site.ru/folder/picture.jpg

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

../ — означает подняться вверх на один уровень, к корневому каталогу,

folder/ — перейти к папке folder,

picture.jpg — указывает на файл изображения.

В атрибуте alt указывается текст, который браузер покажет вместо изображения, в случае, если по какой-то причине, само изображение не будет обнаружено.

С помощью HTML-тегов <map> и <area> можно создавать карты-изображения с активными областями.

Тег <map> служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.

Для тега доступен атрибут name, который задает имя карты. Значение атрибут name для тега <map> должно соответствовать имени в атрибуте usemap элемента <img>:

...

</map>

Элемент <map> содержит ряд элементов <area>, определяющих интерактивные области в изображении карты.