Вопрос № 43. НТМL документ. Назначение, структура и основные элементы

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов воВсемирной паутине. Большинство веб-страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки < br> ). Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге.

Структура HTML-документа

Начало и конец документа тегами < html> и < /html> соответственно. Внутри этих тегов должны находиться теги заголовка (< head> < /head> ) и тела (< body> < /body> ) документа.

Основные элементы («теги»)

Теги и их параметры нечувствительны к регистру. То есть < A HREF=" http: //yahoo.com" > и < a href=" http: //yahoo.com" > означают одно и то же.

Приведем только основные параметры тегов.

Текстовые блоки

· < H1> … < /H1>, < H2> … < /H2>, …, < H6> … < /H6> — заголовки 1, 2, … 6 уровня. Используются для выделения частей текста (заголовок 1 — самый большой, 6 — почти равен обычном тексту по умолчанию).

· < P> — новый абзац. Можно в конце абзаца поставить < /P>, но это не обязательно.

· < BR> — новая строка. Этот тег не закрывается (то есть не существует тега < /BR> )

· < HR> — горизонтальная линия

Форматирование текста

· < I> … < /I> — выделение текста курсивом

· < B> … < /B> — выделение текста жирным шрифтом

· < U> … < /U> — подчёркивание текста

· < S> … < /S> (или < STRIKE> … < /STRIKE> )— зачёркивание текста

· < BIG> … < /BIG> — увеличение шрифта

· < SMALL> … < /SMALL> — уменьшение шрифта

· < BLINK> … < /BLINK> — мигающий текст.

· < SUB> … < /SUB> — подстрочный текст. Например, H< SUB> 2< /SUB> O создаст текст H₂O.

· < SUP> … < /SUP> — надстрочный текст. Например, E=mc< SUP> 2< /SUP> создаст текст E=mc².

· < FONT параметры> … < /FONT> — задание параметров шрифта. У этого тега есть следующие параметры:

· COLOR=color — задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 — зелёную, последние 2 — синюю) или названием.

· SIZE=размер задание размера шрифта. Размер от 1 до 7: стандартный по умолчанию 3. Есть много способов изменить стандартный размер.

Списки

 < UL > -ненумерованный < LI > первый элемент < / LI > < LI > второй элемент < / LI > < LI > третий элемент < / LI > < / UL >

Если вместо < UL> (Unordered List — ненумерованный список) поставить < OL> (Ordered List — нумерованный список), список получится нумерованным:

У этих тегов есть параметры:

type = " тип"

где тип — форма: в < UL> — символов

· square — квадрат

· round — окружность

· disk — круг: по умолчанию

а в < OL> — цифр или букв

· A или а (латинскими буквами) — буквенный список: соответственно заглавными или строчными буквами

· I или i — римские цифры: соответственно заглавными или строчными буквами

· 1 — арабские цифры: по умолчанию

Параметр start = " начало" (только для < OL> ), определяющий начало нового отсчёта: например, если нужно не 1, 2, 3, а 24, 25, 26

и, наконец для тега < LI> параметр value = " следующий" — если необходимо перескочить с одной цифры на другую: например, не 1, 2, 3, 4, а 1, 2, 22, 23

< ol > < li > Один < / li > < li > Два < / li > < li value=" 22" > Двадцать два < / li > < li > Двадцать три < / li >

создаст следующее:

1. Один

2. Два

22. Двадцать два

23. Двадцать три

Изображения

· IMG — вставка изображения. Этот тег не закрывается.

· SRC — имя или URL

· ALT — альтернативное имя (отобразится, если в браузере запретить отображать картинки)

· TITLE — краткое описание изображения (отобразится при наведении курсора на картинку)

· WIDTH, HEIGHT — размеры (если не совпадают с истинными размерами картинки, то изображение «растянется» или «сожмется»)

· ALIGN — задает параметры обтекания текстом (top, middle, bottom, left, right)

· VSPACE, HSPACE — задают размеры вертикального и горизонтального пространства вокруг изображения

Пример:

< IMG SRC=url ALT=" текст" TITLE=" текст" (пикс, %)" HEIGHT=" размер (пикс, %)" >

Изображение можно сделать ссылкой:

< A HREF=url > < IMG SRC=url> < / A >

Таблицы

· TABLE — создание таблицы. Параметры тега:

· BORDER — толщина разделительных линий в таблице

· CELLSPACING — расстояние между клетками

· CAPTION — заголовок таблицы (этот тег необязателен)

· TR — строка таблицы

· TH — заголовок столбца таблицы (этот тег необязателен)

· TD — ячейка таблицы

· height — высота таблицы

· width — ширина таблицы

Так, например,

< TABLE BORDER=" 1" CELLSPACING=" 0" > < CAPTION > Улов крокодилов в Мумбе-Юмбе < / CAPTION > < TH > Год < / TH >   < TH > Улов < / TH > < TR > < TD > 1997 < / TD >     < TD > 214 < / TD > < / TR > < TR > < TD > 1998 < / TD >     < TD > 216 < / TD > < / TR > < TR > < TD > 1999 < / TD >     < TD > 207 < / TD > < / TR > < / TABLE >

Создаст таблицу:

Улов крокодилов в Мумбе-Юмбе
Год	Улов
1997	214
1998	216
1999	207

Гиперссылки

< A HREF=" filename" target=" _self" > название ссылки< / A >

· Атрибут HREF задает значение адреса документа, на который указывает ссылка.

· filename — имя файла или адрес Internet, на который необходимо сослаться.

· название ссылки — название гипертекстовой ссылки, которое будет отображаться в браузере, то есть показываться тем, кто зашел на страницу.

· TARGET — задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:

· _top — открытие документа в текущем окне;

· _blank — открытие документа в новом окне;

· _self — открытие документа в текущем фрейме;

· _parent — открытие документа в родительском фрейме.

Значение по умолчанию: _self.

Некоторые теги не имеют конечного компонента и являются автономными элементами

Например, тег изображения < IMG>, который служит для вставки в документ графического изображения.

Разрыв строки (< BR> ), горизонтальная линейка (< HR> ) и теги, которые не влияют на отображаемое содержимое, например, теги < META> и < BASE>.

Иногда конечные теги в документе можно опускать.

Например – тег абзаца < P>. Поскольку он используется в документе очень часто, его обычно ставят только в начале каждого абзаца.

Когда один абзац заканчивается, следующий тег < P> сигнализирует браузеру о том, что нужно завершить данный абзац и начать следующий.

⇐ Предыдущая9101112131415161718Следующая ⇒

Поделиться: