Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

НТМ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> сигнализирует браузеру о том, что нужно завершить данный абзац и начать следующий.

 

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...