автор: Груднина Елена Леонидовна
педагог дополнительного образования МАУ ДО «ДДЮТ им. Е.А.Евтушенко» МО г.Братска
«Основные теги языка разметки HTML»
«Методическая разработка педагога дополнительного образования»
Е.Л.Груднина
педагог дополнительного образования
МАУ ДО «ДДЮТ им. Е.А.Евтушенко»
МО г.Братска
«Основные теги языка разметки HTML»
| Значение | Синтаксис | Атрибуты | Пример | Пояснение | |||||
| Форматирование текста | |||||||||
| Текстовый абзац | <P align=аргумент>текст</P> | justify. | <P align=justify></P> | Текст будет выровнен на экране по ширине. | |||||
| center | <P align=center></P> | Текст будет выровнен на экране по центру. | |||||||
| right | <P align=right></P> | Текст будет выровнен на экране по правому краю. | |||||||
| left | <P align=left></P> | Текст будет выровнен на экране по левому краю (по умолчанию). | |||||||
| Перевод строки | текст на одной строке <BR> а этот — на другой | clear | <BR clear=»значение»> | Значение: left, right, all. Указывает смещение строки после переноса: по правому краю, левому или по ширине. | |||||
| Заголовки | <Hi>Текст</Hi> | align
|
<H2 align=”center”>Текст</H2> | i — цифра от 1 до 6 описывают заголовки шести уровней. Заголовок 1 уровня — самый крупный, 6 уровня — самый мелкий. | |||||
| Горизонтальная линия | <HR> | size
noshade align width color |
<HR size=»значение» noshade align=”выравнивание” width=”значение” color=”#цвет”> | Толщина линии (пикс.)
Плоские линии Сдвиг линии Ширина линии (пикс. или %) Цвет линии |
|||||
| Выравнивание по центру | <CENTER></CENTER> | Тег используется для выравнивания таблицы по центру | |||||||
| Форматирование шрифта | |||||||||
| Курсив | <I>текст, выделяемый курсивом</I> | Выделяет текст, помещенный внутри тега, курсивом | |||||||
| Жирный | <B>текст, выделяемый жирным шрифтом</B> | Выделяет текст, помещенный внутри тега, жирным шрифтом | |||||||
| Подчеркивание | <U>подчеркнутый текст</U> | Подчеркивает текст, размещенный внутри тега. | |||||||
| Зачеркивание | <STRIKE>Зачеркнутый текст</STRIKE> | Зачеркивает текст, размещенный внутри тега | |||||||
| Подстрочный текст | <SUB>Текст</SUB> | Оформляет текст, расположенный внутри тега, нижним индексом | |||||||
| Надстрочный текст | <SUP>Текст</SUP> | Оформляет текст, расположенный внутри тега, верхним индексом | |||||||
| Шрифт | <FONT>Текст</FONT> | size
color fase |
<FONT size=«размер» color=«цвет» face=”тип шрифта>Текст </FONT> | Размер шрифта в пунктах (1-7)
Цвет шрифта Тип шрифта, гарнитура (Arial TimesET) |
|||||
| Цвет фона, текста, ссылок в документе | |||||||||
| Цвет текста | <BODY text= “цвет”> | <BODY text= “#CCOOOO”> | Цвет текста во всем документе | ||||||
| Фоновый рисунок | <BODY background= “адрес рисунка”> | Адрес в виде полного адреса Интернета либо просто путь до файла. Имеет приоритет. | |||||||
| Фоновый цвет | <BODY bgcolor= “#цвет”> | <BODY bgcolor= “red”>
<BODY bgcolor= “#FFFFFF”> |
Страница будет целиком заполнена равномерной заливкой указанного цвета. | ||||||
| Цвет ссылки | <BODY link= “цвет”> | <BODY link= “red”> | |||||||
| Цвет посещенной ссылки | <BODY vlink= “цвет”> | <BODY vlink= “blue”> | |||||||
| Цвет активной ссылки | <BODY alink= “цвет”> | <BODY alink= “#FFFFFF”> | Цвет активной т.е. нажатой ссылки | ||||||
| Вставка изображения | |||||||||
| Вставка изображения | <IMG src=”адрес рисунка”> | align | <IMG src=”адрес рисунка” align=”middle”> | Выравнивание текста около изображения задается значением атрибута align:
top – картинка вверху bottom –картинка внизу middle –картинка посередине left right |
|||||
| alt
border |
<IMG src=”адрес рисунка” alt=”Пирамиды” border=0> | Краткое описание картинки, появляется при наведении указателя мыши на картинку.
Рамка вокруг картинки. По умолчанию рамка присутствует, чтобы ее убрать: border=0 |
|||||||
| width
height |
<IMG src=”адрес рисунка” width=”150” height=”100”> | Ширина картинки в пикселях. Высота картинки в пикселях. | |||||||
| vspaсe
hspaсe |
<IMG src=”адрес рисунка”
vspace =”30” hspace=”30”> |
Расстояние между текстом и рисунком по вертикали в пикселях.
Расстояние между текстом и рисунком по горизонтали в пикселях. |
|||||||
| Гиперссылка | <A href=”index.html”>
Главная</A> |
target | Создание ссылки на страницу index.html | ||||||
Теги создания таблиц
Атрибуты команды TABLE
| Атрибут | Назначение |
| align=(left, right) | Выравнивание по горизонтали |
| width=(число или процент) | Ширина таблицы |
| cellpadding=(число) | Расстояние между содержимым ячейки и рамкой |
| cellspacing=(число) | Расстояние между ячейками таблицы |
| bgcolor=(цвет) | Цвет фона таблицы |
| background=(файл) | Фоновая картинка |
| border=(число) | Ширина линий рамки |
| bordercolor=(цвет) | Цвет линий рамки |
| bordercolordark=(цвет) | Цвет рамки (снизу и справа) |
| bordercolorlight=(цвет) | Светлый цвет рамки (сверху и слева) |
Атрибуты команды TR
| Атрибут | Назначение |
| align=(left, center, right) | Выравнивание по горизонтали |
| valign=(top, center,bottom, baseline) | Выравнивание по вертикали |
| bgcolor=(цвет) | Цвет фона |
| bordercolor=(цвет) | Цвет линий рамки |
| bordercolordark=(цвет) | Цвет рамки (снизу и справа) |
| bordercolorlight=(цвет) | Светлый цвет рамки (сверху и слева) |
Атрибуты команды TD (TH)
| Атрибут | Назначение |
| align=(left, center, right) | Выравнивание по горизонтали |
| valign=(top, center, bottom, baseline) | Выравнивание по вертикали |
| width=(число или процент) | Ширина ячейки |
| height=(число или процент) | Высота ячейки |
| bgcolor=(цвет) | Цвет фона |
| background=(файл) | Фоновая картинка |
| bordercolor=(цвет) | Цвет линий рамки |
| bordercolordark=(цвет) | Цвет рамки (снизу и справа) |
| bordercolorlight=(цвет) | Светлый цвет рамки (сверху и слева) |
| nowrap | Выключение автоматического разрыва строк |
| colspan=(число) | Ширина большой ячейки (в столбцах) |
| rowspan=(число) | Высота большой ячейки (в строках) |
Описание атрибутов (TABLE)
Атрибут align
Если атрибут не задан, таблица выравнивается по левому краю окна, точно так же, как и при align=left. Значение right выравнивает таблицу по правому краю. Других значений атрибута align не предусмотрено.
Выровнять таблицу по центру окна можно при помощи команды CENTER:
| <CENTER>
<TABLE> … </TABLE> </CENTER> |
Атрибут width
Если атрибут не задан, браузер рисует таблицу минимальных размеров вокруг данных, которые она содержит. Запись width=число заставляет браузер рисовать таблицу шириной в указанное количество пикселов. Если реально для таблицы требуется больше места, значение width игнорируется. Если заданный размер уводит таблицу за правую границу окна, браузер добавляет к окну горизонтальную линейку протяжки.
Старайтесь формировать окно документа таким образом, чтобы горизонтальная протяжка в нем никогда не появлялась. Во-первых, линейка протяжки уменьшает полезный размер окна, во-вторых, ухудшает восприятие документа и раздражает пользователя.
Можно задавать ширину таблицу в процентном отношении к ширине окна браузера. В этом случае используют запись width=процент.
Атрибуты cellpadding и cellspacing
Первый атрибут задает расстояние между рамкой таблицы и содержимым ячеек, второй – между рамками соседних ячеек. Когда атрибуты не заданы, это равнозначно cellpadding=1 и cellspacing=2 (зависит от браузера).
Атрибуты bgcolor и background
Если атрибуты не заданы, элементы выводятся прямо на фон документа, и таблица выглядит прозрачной. Атрибут bgcolor задает цвет фона таблицы, а атрибут background паркетную укладку картинкой с диска.
Атрибут background позволяет накладывать рисунки друг на друга в любом количестве (при использовании вложенных таблиц). Этот эффект можно использовать как элемент дизайна.
Атрибуты border и bordercolor
Первый атрибут задает толщину рамки вокруг всей таблицы, второй – ее цвет. Если задано border=0, то рамка, а заодно и прямоугольники клеток не рисуются.
Атрибуты bordercolordark и bordercolorlight
Браузер Netscape Navigator эти атрибуты не поддерживает. В Microsoft Internet Explorer эти атрибуты позволяют при необходимости нарисовать на экране объемную рамку. Первый задает цвет ее нижней и правой стороны, второй — левой и верхней.
Если необходимо рамку нарисовать плоской (одноцветной), нужно задать атрибут bordercolor, а атрибуты bordercolordark и bordercolorlight не задавать.
Описание атрибутов (TR и TD)
Атрибут align
Горизонтальное выравнивание. Если атрибут не задан, содержимое ячеек выравнивается по левому краю границы ячейки, точно так же, как и при align=left. Значение align=right – выравнивание по правому краю, align=center – по центру.
Атрибут valign
Вертикальное выравнивание сордержимого ячеек (top – по верхнему краю, bottom – по нижнему, center – по центру, baseline – по самой верхней текстовой строке). По умолчанию (атрибут не задан) браузер центрирует содержимое ячеек по вертикали.
Атрибут bgcolor
Если атрибут не задан, ячейки выводятся на фон, установленный для таблицы или на фон документа, если фон таблицы не задан. Атрибут bgcolor позволяет задать собственный фоновый цвет для всех ячеек в строке.
Атрибуты bordercolor, bordercolordark и bordercolorlight
Эти атрибуты позволяют настроить обрамление ячеек в строке особым по отношению к всей таблице образом. Атрибут bordercolor – задает цвет рамки, остальные два служат для настройки «объема».
Браузер Netscape Navigator атрибуты bordercolordark и bordercolorlight не поддерживает. В Microsoft Internet Explorer эти атрибуты позволяют нарисовать для ячеек объемную рамку. Первый задает цвет ее нижней и правой стороны, второй — левой и верхней.
Дополнение: данный методический материал был разработан и применяется в процессе преподавания курса «Web-дизайн», раздел «Основы языка HTML», для обучающихся 7-10 классов во Дворце детского и юношеского творчества им. Е.А.Евтушенко МО г.Братска, в коллективе «Компьютерная грамотность». Методическая разработка представляет собой ценность как для педагогов, ведущих данный раздел информатики, так и для учеников, осваивающих курс языка HTML.
