 |
НТМ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 создаст текст H2O.
· <SUP> … </SUP> — надстрочный текст. Например, E=mc<SUP>2</SUP> создаст текст E=mc2.
· <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="текст" WIDTH="размер (пикс, %)" 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 >Создаст таблицу:
| Улов крокодилов в Мумбе-Юмбе | |
| Год | Улов |
Гиперссылки
< A HREF="filename" target="_self">название ссылки</ A >· Атрибут HREF задает значение адреса документа, на который указывает ссылка.
· filename — имя файла или адрес Internet, на который необходимо сослаться.
· название ссылки — название гипертекстовой ссылки, которое будет отображаться в браузере, то есть показываться тем, кто зашел на страницу.
· TARGET — задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:
· _top — открытие документа в текущем окне;
· _blank — открытие документа в новом окне;
· _self — открытие документа в текущем фрейме;
· _parent — открытие документа в родительском фрейме.
|
|
|
Значение по умолчанию: _self.
Некоторые теги не имеют конечного компонента и являются автономными элементами
Например, тег изображения <IMG>, который служит для вставки в документ графического изображения.
Разрыв строки (<BR>), горизонтальная линейка (<HR>) и теги, которые не влияют на отображаемое содержимое, например, теги <META> и <BASE>.
Иногда конечные теги в документе можно опускать.
Например – тег абзаца <P>. Поскольку он используется в документе очень часто, его обычно ставят только в начале каждого абзаца.
Когда один абзац заканчивается, следующий тег <P> сигнализирует браузеру о том, что нужно завершить данный абзац и начать следующий.
|
|
|
