Структура html документа практика

Атрибут	Возможные значения	Действие атрибута	В каких тегах используется
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

1. Объявление HTML-код а – контейнер …
2. Заголовок документа – контейнер …
3. Тело документа – контейнер …

Источник

Практическая работа «Основы HTML»

Самуил Маршак(заголовок в 6 уровнях) (Апрель! Апрель!
На дворе звенит капель.
По полям бегут ручьи,
На дорогах лужи.)- по левому краю
(Скоро выйдут муравьи
После зимней стужи.
Пробирается медведь) – по центру
(Сквозь густой валежник.
Стали птицы песни петь
И расцвел подснежник.)- по правому краю

• а)strong strong (B B) полужирное начертание
  emem ( I I) курсивное начертание
  U U подчеркнутый шрифт
  FONT size=число color=цвет face= «тип шрифта» FONT — задание параметров шрифта.
  атрибут size – размер шрифта, целое число от 1 до 7, по умолчанию 3
  атрибут color – цвет шрифта, название цвета по-английски или 16-ричный код (например: #FF00FF)
  атрибут face – название типа шрифта
  Атрибуты можно использовать в любом сочетании.

1. Горизонтальный разделитель:
   HR size=число width=число color=цвет — горизонтальная линия, разделяющая части документа, можно использовать без атрибутов или с атрибутами в любом сочетании,
   size – толщина линии в пикселях,
   width – ширина линии в пикселях,
   color – цвет линии (название или код цвета).

• Задание:
  а) создать HTML-документ в котором будут заданы параметры форматирования текста
• б) Сохранить документ в файле с именем 2.html в рабочей папке

• Пример текста:

Текст с перечислением – список. Выделяют два основных вида списков – маркированный и нумерованный. Маркированный список используют, если порядок перечисления не важен, нумерованный – если порядок перечисления важен.
а) Оформление маркированного списка:

атрибут type – вид маркера (вводится в теге UL)
type=circle — маркер в виде небольшой окружности ○
type=disc — маркер в виде закрашенной окружности ●
type=square — маркер в виде закрашенного квадратика ■

Задание:
а) оформить HTML-документ содержащий 6 списков (расположить друг под другом):

б) Сохранить документ в файле с именем 4.html в рабочей папке.
в) Просмотреть HTML-документ в обозревателе Internet Explorer.

• Браузеры «понимают» три графических формата – gif, jpg, png.

1. Мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик (нарисовать отдельные кадры, настроить время задержки и последовательность показа, «зациклить» кино или показывать кадры только один раз). Когда анимация готова, она записывается на диск как обычный gif-файл. В HTML нет различия в выводе на экран простого gif-файла или анимационного.
2. Прозрачная графика. GIF-формат позволяет один или несколько цветов в картинке объявить прозрачными. Это помогает избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательно. Прозрачный цвет задается в редакторе (GIF-редактор или FOTOSHOP) при записи файла на диск.

• Оформление фона:
  атрибут background=”имя файла” – для тегов BODY, TABLE, TD)
• Вставка рисунков:
  IMG src=”имя файла” width=число height=число — имя файла – путь к файлу с рисунком, width – ширина рисунка в пикселях, height – высота рисунка в пикселях.
• Задание:

• оформить фон страницы;
• в ячейки, помеченные *, вставить рисунки, указав размеры рисунка;
• в ячейки, помеченные +, вставить текст пояснения к соответствующим рисункам и оформить фон ячейки.

Источник