| Атрибут | Возможные значения | Действие атрибута | В каких тегах используется |
| 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-документа.
- Лабораторная работа №2 Создание html-документа.
4. Структура документа HTML
- Объявление HTML-код а – контейнер …
- Заголовок документа – контейнер …
- Тело документа – контейнер …
Лабораторная работа «Создание HTML документа»
· Научиться создавать простейший гипертекстовый документ средствами текстового редактора Блокнот.
· Научиться использовать теги форматирования шрифта и абзаца.
Задание на выполнение
1. Создать файл с гипертекстовым документом:
· Запустить редактор Блокнот, ввести текст:
Приветствую Вас на моей первой web -страничке!
· Сохранить файл в созданной папке. При сохранении, в окне диалога Сохранить как… в строке Тип файла: выбрать вариант Все файлы (*.*) , а в строке Имя файла задать имя с расширением . htm , например 1_ name . htm (где name – ваше имя)
· Закрыть документ, найти его пиктограмму в окне Мой компьютер или в окне программы Проводник.
· Открыть файл. Проанализировать, с помощью какого приложения отображается файл и как выглядит введенная фраза.
2. Ввести теги, определяющие структуру html -документа:
· С помощью контекстного меню открыть файл с помощью редактора Блокнот. Ввести приведенные ниже теги, в разделе заголовка документа (между тегами < TITLE > TITLE > ) указать свою фамилию.
Приветствую Вас на моей первой web -страничке!
· Сохранить документ под тем же именем, обновить его отображение в броузере (выполнить Вид/Обновить или нажать кнопку Обновить на панели инструментов). Проанализировать произошедшие изменения в отображении документа.
3. Отредактировать документ:
· Вызвать меню браузера Вид/Просмотр HTML -кода и добавить после текста « Приветствую Вас на моей первой web -страничке!» текст подписи:
Студент группы NNN Фамилия Имя
Сохранить документ (но не закрывать) и обновить его просмотр в браузере.
· Используя одиночный тег BR > , отредактировать документ так, чтобы подпись начиналась с новой строки, а Фамилия Имя – в следующей строке. Просмотреть в браузере новый вариант.
Внимание ! После каждого изменения документ нужно сохранять, а просмотр в браузере начинать с обновления загрузки документа с помощью кнопки «Обновить» на панели инструментов.
4. Оформить фрагменты текста с помощью стилей Заголовков:
· Первую строку документа оформить стилем Заголовок 1-го уровня с помощью парного тега H 1> … H 1> . Вторую строку оформить как Заголовок 6-го уровня, а третью как Заголовок 4-го уровня.
· Просмотреть документ в браузере, изменяя настройку отображения шрифтов (меню Вид / Размер шрифта / Самый крупный, Средний, Мелкий и Самый мелкий).
· Поменять стиль оформления первой строки на Заголовок 2 уровня, второй строки — на Заголовок 5 уровня, последней строки — на Заголовок 3-го уровня.
5. Выполнить форматирование шрифта:
· После строки Фамилия Имя добавить еще одну строку текста
Нас утро встречает прохладой
· Оформить фразу по приведенному ниже образцу.
В слове УТРО все буквы должны иметь разные цвета. В слове ПРОХЛАДОЙ оформить буквы ПРО – красным цветом, ОЙ – синим.
· Оформить строку с подписью ( Студент группы NNN Фамилия Имя ) курсивом, размер шрифта задать относительным изменением. Использовать теги FONT SIZE =«+2»> и I >
· Просмотреть полученный документ в браузере.
6. Выполнить форматирование абзацев:
· Создать новый документ 2_ name . htm , сохранить его в той же рабочей папке.
· Ввести текст (использовать копирование текста из документа 1_ name . htm ):
Приветствую Вас на моей второй web -страничке! BR > Монолог Гамлета
· Выровнять текст по центру.
Быть иль не быть — вот в чем вопрос. Что благороднее: сносить удары неистовой судьбы — иль против моря невзгод вооружиться, в бой вступить. И все покончить разом.
· Оформить выравнивание абзаца по ширине.
· Ограничить абзац горизонтальными разделительными линиями сверху и снизу, используя тег < HR >.
· Скопировать монолог и разбить его на абзацы. Выровнять по центру.
Быть иль не быть — вот в чем вопрос.
Что благороднее: сносить удары
Неистовой судьбы — иль против моря
Невзгод вооружиться, в бой вступить
И все покончить разом.
· Просмотреть документ в окне броузера, изменяя размер окна.
7. Выполнить оформление списков:
· Создать новый документ 3_ name . htm , сохранить его в той же рабочей папке жесткого диска.
Приветствую Вас на моей третьей web -страничке!
· Дополнить текст документа (между тегами
…) следующим текстом:Я знаю как оформлять:
Шрифты,
Заголовки,
Абзацы
· Оформить три последние строки как список нумерованный. Для этого использовать следующую конструкцию тегов:
· Поменять оформление списка на список маркированный. Использовать теги < UL >,
· Разрыв строк внутри абзаца
· С использованием переформатирования .
8. Предъявить результаты работы преподавателю.
Таблица основных тегов HTML -документа. Теги форматирования шрифта и абзаца
Общая структура документа HTML
Не отображается броузером
Содержимое строки заголовка окна броузера
Структура содержания документа
Внутренние заголовки различного уровня
Где № – номер уровня заголовка (от 1 до 6). Например, < H 1>… — заголовок 1-го уровня.
Заголовок с выравниванием
Создание абзаца (параграфа)
Абзацы отделяются двойным межстрочным интервалом
Перевод строки внутри абзаца
Лабораторная работа №1 Создание html-документа.
Цели работы: Научиться создавать файлы, содержащие элементы форматирования, предписанные языком HTML.
- Создание простейших файлов HTML.
- Создаём папку, в которой будем сохранять созданные Web-страницы.
- Запускаем стандартную программу Блокнот и набираем следующий текст с элементами форматирования:
- Сохраняем файл под именем schedule.html.
- Для просмотра созданной Web-страницы используем браузер (Рис.1).
Рис.1 «Учебный файл HTML»
- Управление расположением текста на экране.
- Вносим изменения в текст, расположив слова «Расписание», «занятий», «на вторник» на разных строках:
- Сохраняем внесенные изменения.
- Новая полученная Web-страница не изменилась (см. Рис.1). Для того, чтобы переносить текст используют теги. Тег перевода строки отделяет строку от последующего текста или графики. Тег абзаца тоже отделяет строку, но еще добавляет пустую строку..
- Вносим изменения в текст файла HTML:
Рис.2 «Изменённый файл» - Выделение фрагментов текста.
Существует три тега выделения фрагментов текста: : — для выделения полужирным, : — для выделения курсивом, : — для выделения подчеркиванием.
- Вносим изменения в файл schedule.html: Рис.3
Рис. 3 «Новый вид» - Также используем вложение тегов: Расписаниезанятийна вторник (Рис.4).
Рис.4 «Ещё один вариант»
- СобственныйHTMLдокумент
Лабораторная работа №2 Создание html-документа.
Цели работы: Научиться создавать файлы, содержащие элементы форматирования, предписанные языком HTML. Ход работы:
- Создаём документ с именем 2012.html и вставляем туда основную часть документа:
- В головной части задаём заголовок страницы и конструкцию использования каскадных таблиц, которые мы расположим в документе main.css.
используется для логического выделения блока HTML-документа. Элемент группировки, как и элемент SPAN. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать — перемещать, включать/выключать, создавать слои, регулировать отступы и т.п. В браузеронезависимой вёрстке обычно используется для выравнивания блока html-кода в окне браузера. Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф. 
Рис.1 «Элементdiv» На рисунке видно, что ссылка на картинку и подпись к ней расположены в и расположены по центру.
- Текст заключаем в параграф . Для пробелов используем специальный символ « ». Для перехода на другую строку необходимо ставить в том месте
. Также для использования css для разных элементов документа нужно задавать им имена, например см.Рис.2.
Рис.2 «Имя элемента» Имя задаётся при помощи конструкции заключённой в скобках элемента <>.
- Для вставки картинки используется конструкция
. Если же требуется, чтобы при нажатии картинка открывалась отдельно в новом окне, то мы используем следующую конструкцию (Рис.3). 
Рис.3 «Ссылка на картинку»
- Для вставки ссылки в документ на скачивание видео тоже используется конструкция:
(«текст» ) Как выглядит нажатая ссылка для скачивания можно увидеть на рисунке 4. 
Рис.4 «Нажатая ссылка»
- Таблица задается тэгом:
таблица состоит из строк и столбцов (ячеек), надо еще указать и их: — строчка таблицы; — столбец (ячейка) таблицы. фоновый цвет и виды рамочек мы задали в main.css (Рис.5) 
Рис.5 «Параметры таблицы» Вид ячеек также задаём в том же документе: 
Рис.6 «Параметры ячеек»
- Вид готовой страницы с таблицей
Рис.7 «Таблица»