Контейнерная модель html-документа
Теги HTML-документов образованы с помощью слов английского языка, понятных сокращений и обозначений.
Тег состоит из имени, за которым может следовать необязательный список атрибутов тега.
Атрибуты тега могут иметь конкретные значения, устанавливаемые для изменения функции тега. Текст тега заключается в угловые скобки ("<" и ">").
Например, при описании таблицы открывающий тег с атрибутами может выглядеть так: 
Эта запись означает следующее: таблица шириной 570 пикселов, выровнена по центру.
Порядок записи атрибутов в теге значения не имеет. Значение атрибута следует за знаком равенства. Если значение атрибута — одно слово или число, то его можно указывать без кавычек. Во всех остальных случаях значения необходимо заключать в одинарные или двойные кавычки. Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов.
Чаще всего HTML-контейнеры состоят из начального и конечного тегов, между которыми размещаются текст и другие элементы документа.
Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта / (например, для тега тела документа <BODY> закрывающая пара представляет собой </BODY>). Конечные теги никогда не содержат атрибутов. Некоторые элементы разметки не имеют конечного компонента, поскольку являются автономными элементами. Например, тег изображения <IMG>, который служит для вставки в документ графического изображения, конечного компонента не требует.
HTML-документ — это один большой контейнер, который начинается с тега <HTML> и заканчивается тегом </HTML>:
Контейнер HTML состоит из двух других вложенных контейнеров: заголовка документа (HEAD) и тела документа (BODY):
В заголовке с помощью тега TITLE можно именовать окна браузера:
…
…
Существуют и другие тэги, расположенные между <head> </head>, в основном несущие служебную и управляющую информацию.
Тег тела документа BODY, в отличие от тега НEАD, имеет атрибуты.
Атрибут BАСКGROUND определяет фон, на котором отображается текст документа.
Так, если источником для фона HTML- документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:
Также с помощью атрибутов ВGCOLOR и ТЕХТ можно указать цвета фона и текста документа.
Цвета определяются в терминах RGB в шестнадцатеричной нотации (#ХХХХХХ). Также имеется возможность задавать цвета по названию.
СПИСОК ТЭГОВ HTML
| Назначение | Название тэга | Примеры значений аргументов (*) | Комментарии к примерам |
| Структура Web -страницы | |||
| начало и конец страницы | <HTML> </HTML> | этот тэг обрамляет документ, весь текст находится внутри этого тэга | |
| описание страницы | <HEAD> </HEAD> | внутри тэга находится информация о документе, например имя Web-страницы | |
| имя страницы | <TITLE> </TITLE> | имя отразится в заголовке окна Web-страницы | |
| содержание страницы | <BODY> </BODY> | внутри тэга пишется то, что можно будет прочитать и увидеть на экране, т.е. «тело» документа | |
| цвет шрифта для всего документа | <BODY TEXT="#*"> </BODY> | <BODY TEXT="#0000FF"> </BODY> | в документе весь текст будет напечатан синим цветом шрифта |
| цвет фона для всего документа | <BODY BGCOLOR="#*"> </BODY> | <BODY BGCOLOR="#808080"> </BODY> | документу задан серый цвет фона |
| фоновое изображение | <BODY BACKGROUND="*"> </BODY> | <BODY BACKGROUND="море.jpg"> </BODY> | фоном документа стала картинка море. jpg |
| Определение функциональных разделов документа | |||
| 1. Работа с заголовком. | |||
| внутренний заголовок документа | <H?> </H?> | <H1> </H1> <H2> </H2> - - - - - - - - - - <H6> </H6> | заголовок первого уровня заголовок второго уровня - - - - - - - - - - - - - - - - - - - - заголовок шестого уровня |
| заголовок с выравниванием | <H? ALIGN=”*”></H?> | <H? ALIGN=”LEFT”> </H?> <H? ALIGN=”CENTER”> </H?> <H? ALIGN=”RIGHT”> </H?> | выравнивание заголовка по левому краю выравнивание заголовка по центру выравнивание заголовка по правому краю |
| цвет шрифта заголовка | <FONT COLOR="#*"> </FONT> | <H?><FONT COLOR="#FF0000"> </FONT></H?> | шрифт заголовка - красного цвета |
| 2. Форматирование шрифта. | |||
| жирный | <B></B> | ||
| курсив | <I></I> | ||
| подчеркнутый | <U></U> | ||
| верхний индекс | <SUB></SUB> | ||
| нижний индекс | <SUP></SUP> | ||
| размер шрифта | <FONT SIZE=?></FONT> | <FONT SIZE=4></FONT> | размер шрифта от 1 до 7 |
| выравнивание по центру | <CENTER></CENTER> | текст (графика) выровнен по центру | |
| гарнитура шрифта | <FONT FACE="*"> </FONT> | <FONT FACE="Arial"> </FONT> | текст напечатан шрифтом вида Arial |
| 3 . Работа с разделителем текста. | |||
| горизонтальный разделитель | <HR> | тэг создает линию, идущую через весь экран | |
| выравнивание разделительной линии | <HR ALIGN=”*”> | <HR ALIGN=”LEFT”> <HR ALIGN=”CENTER”> <HR ALIGN=”RIGHT”> | по левому краю по центру по правому краю |
| толщина линии | <HR SIZE=”*”> | <HR SIZE=”7”> | линия имеет толщину 7 пикселей |
| длина линии | <HR WIDTH=”*%”> | <HR WIDTH=”50%”> | длина линии составляет 50% от ширины страницы |
| цвет линии | <HR COLOR="#*"> | <HR COLOR="#FFD800"> | золотой цвет линии |
| перевод строки | <BR> | текст после этого тэга начнется с новой строки | |
| абзац | <P> </P> | абзацы разделяются пустыми строками и не начинаются с красной строки | |
| 4. Вставка изображений. | |||
| вставка изображения | <IMG SRC=”*”> | <IMG SRC=”фотография.jpg”> | в документ вставлен графический файл ”фотография.jpg” |
| выравнивание текста около изображения | <IMG SRC=”*” ALIGN=”*”> | <IMG SRC=”фотография.jpg” ALIGN=”LEFT”> | рисунок расположен слева, а текст справа |
| ширина картинки | <IMG SRC=”*” WIDTH=”*”> | <IMG SRC=”*” WIDTH=”400”> | ширина картинки 400 пикселей |
| высота картинки | <IMG SRC=”*” HEIGT=”*”> | <IMG SRC=”*” HEIGT=”300”> | высота картинки 300 пикселей |
| расстояние от текста до рис. по горизонтали | <IMG SRC=”*” HSPACE=”*”> | <IMG SRC=”*” HSPACE=”30”> | расстояние от текста до рисунка по горизонтали 30 пикселей |
| расстояние от текста до рис. по вертикали | <IMG SRC=”*” VSPACE=”*”> | <IMG SRC=”*” VSPACE=”20”> | расстояние от текста до рисунка по вертикали 20 пикселей |
| рамка вокруг картинки | <IMG SRC=”*” BORDER=”*”> | <IMG SRC=”*” BORDER=”3”> | вокруг картинки рамка толщиной 3 пикселя |
| всплывающая подсказка к рис. | <IMG SRC=”*” ALT=”*”> | <IMG SRC=”*” ALT=”фото моего лучшего друга ”> | при наведении указателя мыши на картинку всплывает подсказка ”фото моего лучшего друга ” |
| 5. Вставка гиперссылок. | |||
| ссылка на другую страницу | <A HREF=”*”></A> | <A HREF=”фотоальбом.htm”> посмотрите мои фото</A> | текст «посмотрите мои фото» является указателем ссылки и откроет документ ”фотоальбом.htm” |
| 6. Вставка бегущей строки. | |||
| вставка бегущей строки | <MARQUEE></MARQUEE> | <MARQUEE>Поздравляю!</MARQUEE> | текст «Поздравляю!» двигается справа на лево по экрану |
| движение бегущей строки влево-вправо | <MARQUEE BEHAVIOR=ALTERNATE> </MARQUEE> | <MARQUEE BEHAVIOR=ALTERNATE> Поздравляю! </MARQUEE> | текст «Поздравляю!» двигается по экрану справа на лево и обратно |
| 7. Вставка таблицы. | |||
| вставить таблицу | <TABLE></TABLE> | <TABLE ALIGN=CENTER BORDER=3> </TABLE> | таблица выровнена по центру, границы ячеек шириной 3 пикселя |
| ширина таблицы | <TABLE </TABLE> | <TABLE </TABLE> | таблица шириной 50% от ширины страницы на экране |
| заглавие таблицы | <CAPTION></CAPTION> | <CAPTION>Название таблицы </CAPTION> | |
| строка таблицы | <TR></TR> | ||
| заголовки столбцов таблицы | <TH></TH> | <TR><TH>заголовок ячейки</TH></TR> | |
| ячейка таблицы | <TD></TD> | <TR><TD>текст ячейки</TD></TR> | ячейка должна быть внутри строки |
Атрибуты задания цветовой схемы (цвета фона, текста и гиперссылок)
| цвет | код | название | цвет | код | название |
| черный | # 000000 | black | фуксиновый | # FF00FF | magenta |
| белый | # FFFFFF | white | бирюзовый | # 00FFFF | cyan |
| красный | # FF0000 | red | желтый | # FFFF00 | yellow |
| известь | # 00FF00 | lime | золотой | # FFD800 | gold |
| бордовый | # 800000 | maroon | чирок | # 008080 | teal |
| зеленый | #008000 | green | темно-синий | # 000080 | navy |
| синий | # 0000FF | blue | оранжевый | # FFA500 | orange |
| серый | # 808080 | gray | коричневый | # A82828 | brown |