| Атрибут | Возможные значения | Действие атрибута | В каких тегах используется |
| COLOR= | GRAY (серый), AQUA (аквамарин), BLACK (черный), BLUE (синий), FUCHSIA (яркий пурпурно-красный), GREEN (зеленый), LIME (зеленоватый), MAROON (темно-бордовый), NAVY (темно-синий), OLIVE (оливковый), PURPLE (пурпурный), RED (красный), SILVER (серебристый), TEAL, YELLOW (желтый), WHITE (белый). Возможны также те же слова с приставками LIGHT и DARK, например LIGHTGREEN (светло-зеленый), DARKBLUE (темно-голубой) | Задает цвет линий и шрифта в тексте или таблице | , |
| BGCOLOR= | Задает цвет фона | , , , | |
| BORDERCOLOR= | Задает цвет внешнего контура таблицы | ||
| TEXT= | Задает цвет шрифта в документе в целом | ||
| LINK=, VLINK=, ALINK= | Цвета соответственно непосещенных, посещенных и активных ссылок | ||
| BACKGROUND= | «URL» файла с изображением для фона | Создает фон-картинку | , , , |
| BORDER= | Целое число без размерности | Задает толщину окантовки для изображения или таблицы | , |
| ALIGN= | LEFT, CENTER, RIGHT | Горизонтальное выравнивание текстового фрагмента или таблицы в целом | , , , …, , , , , |
| ALIGN= | BOTTOM, ТОP | Размещение заголовка над или под таблицей | |
| ALIGN= | BOTTOM, LEFT, RIGHT, ТОP, MIDDLE | Размещение текстового пояснения к картинке | |
| VALIGN= | MIDDLE, TOP, BOTTOM | Вертикальное выравнивание фрагмента | , , |
| WIDTH= | Целое число без размерности или со знаком % | Длина/высота фрагмента в пикселах или в процентах от ширины/высоты окна. Для всех ячеек, находящихся в строке/столбце, используется максимальное значение из заданных в ее/его ячейках | , , , , |
| HEIGHT= | |||
| SIZE= | Целое число без размерности (по умолчанию 1) | Толщина линии, размер шрифта | , |
| TYPE= | 1, A, a, i, I | Тип нумерации элементов упорядоченного списка | |
| START= | Номер первого элемента в выбранном типе нумерации | ||
Примечание. Первое из перечисленных значений атрибутов тегов – значение по умолчанию.
Иногда в документе приходится использовать такие знаки, которые имеют в языке HTML специальный смысл. Например, двойные кавычки » » выделяют значение атрибута, и если их использовать вне тега, браузер не поймет конструкцию и пропустит ее. Чтобы этого не произошло, для отображения служебных символов используют специальные последовательности знаков, начинающиеся с символа & и заканчивающиеся знаком ; (точка с запятой) – так называемые &-последовательности. Основные из них:
- последовательность < (от английского «less than») – вместо символа < (меньше);
- последовательность > (от «greater than») – вместо символа > (больше);
- последовательность " (от «quotations mark») – вместо символа » (двойные кавычки);
- последовательность & (от «ampersand») – вместо символа &;
- последовательность (от nonbreaking space – неразрывный пробел) – вместо пробела, который не следует игнорировать при выдаче документа в окно браузера. Эта &-последовательность как бы вставляет в текст невидимую глазу букву, которую браузер воспринимает как реальную и оставляет для нее место на экране. Она используется для заполнения пустых ячеек таблицы, пустых абзацев, для склеивания слов (если набрать TOP 100, то у вас никогда не получится, что TOP останется в одной строке, а 100 перенесется на следующую, например, при изменении шрифта или размера окна браузера).
Внимание: &-последовательности должны набираться только в нижнем регистре, точка с запятой в конце последовательности обязательна. Пример: чтобы пользователь увидел на экране слова крейсер «Аврора», в HTML-документе должен быть следующий код:
Чтобы код HTML было легче понимать и править, полезно вводить в него комментарии, которые были бы видны только при работе с кодом, но не отражались бы в окне браузера при просмотре документа. Для этой цели используют специальный контейнер, написанный не по стандартным правилам. Он выглядит так:
Внимание: в текст комментария не допускается вставлять два и более дефисов подряд: — или —— (разные браузеры по-разному реагируют на это).
4. Структура документа HTML
- Объявление HTML-код а – контейнер …
- Заголовок документа – контейнер …
- Тело документа – контейнер …
Лабораторная работа №1 Язык гипертекстовой разметки html
Цель работы: ознакомиться с основными тегами и атрибутами языкаHTML, структурой документа, получить практические навыки создания веб-страниц.
Основные понятия
Веб-страница— гипертекстовый ресурс, обычно написанный на языке HTML.
Вёрстка веб-страниц— процесс формирования веб-страниц в текстовом либо WYSIWYG-редакторе, а также результат этого процесса, то есть собственно веб-страницы.
Обычно файл Веб-страницы имеет расширение .htmlили.htm.
Структура html документа
Любой HTML-файл состоит из трех разделов — элемента , заголовка (head>) и тела документа (body>).
Пример 1. Простейший HTML-документ
Блочные и инлайновые элементы
Блочные элементыотображаются в виде прямоугольников, выстраивающихся друг под другом и, обычно, занимают всю доступную область по ширине. Типичным примером блочного элемента является абзацp или простой тегdiv.
Инлайновые элементыотображаются в общем потоке текста и имеют минимальные размеры, которые допускает их содержание. Примерами инлайновых элементов являются тегиb, i, a, span.
В отличнии от блочных элементов, инлайновые не имеют жестких линейных размеров, не могут иметь границы, а также внутренних и внешних отступов. То есть конструкция типа не приведет к появлению границы у элемента. При этом инлайновые элементы складываются на странице построчно, и если очередной инлайновый элемент не помещается в остаток строки, то его контент частично переносится на следующую строку. Блочные элементы складываются «в столбик».
Основные теги Тег html
Тег является контейнером, который заключает в себе все содержимое веб-страницы, включая теги и . Открывающий и закрывающий теги в документе необязательны, но хороший стиль диктует непременное их использование.
Тег head
Тег предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
Содержимое тега не отображается напрямую на веб-странице, за исключением тега устанавливающего заголовок окна веб-страницы.
Тег body
Элемент предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера body. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.
Вставка изображений
Тег предназначен для отображения на веб-странице изображений в графическом формате gif, jpeg или png. Этот тег имеет единственный обязательный параметр src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег
в контейнер
Разметка текста
br— устанавливает перевод строки в месте, где этот тег встречается.
div— является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.
h1. h6— HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег H1 представляет собой наиболее важный заголовок первого уровня, а тег H6 служит для обозначения заголовка шестого уровня и является наименее значительным.
hr— рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера.
marquee— создает бегущую строку на странице. На самом деле содержимое контейнераmarqueeне ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д.
p— определяет текстовый параграф. Тегpявляется блочным элементом, перед ним всегда добавляется пустая строка, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком.
pre — определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами.
span — предназначен для определения встроенных элементов документа.
Форматирование текста
b— устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.
big— увеличивает размер шрифта на единицу по сравнению с обычным текстом.
blockquote— предназначен для выделения длинных цитат внутри документа. Текст отображается как выровненный блок с отступами слева и справа, а также с отбивкой сверху и снизу.
code— предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Сюда относятся имена переменных, ключевые слова, тексты функции и т.д.
em— предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
font— представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитуры. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.
i— устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.
small— уменьшает размер шрифта на единицу по сравнению с обычным текстом.
strike— отображает текст как перечеркнутый. Этот тег аналогичен тегу S, который имеет сокращенную форму записи.
strong— предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
sub— отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.
sup— отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.
dd — входит в тройку элементовdl, dt, dd, предназначенных для создания списка определений.
dl — входит в тройку элементовdl, dt, dd,предназначенных для создания списка определений.
dt — входит в тройку элементовdl, dt, dd,предназначенных для создания списка определений.
li— определяет отдельный элемент списка. Внешний тегul илиol устанавливает тип списка — маркированный или нумерованный.
ol — определяет нумерованный список. Каждый элемент списка должен начинаться с тегаli.
ul — определяет маркированный список. Каждый элемент списка должен начинаться с тегаli.
a— является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметровidили href тегaустанавливает ссылку или якорь.