|
Версия 21:41, 5 марта 2012
Гіпермаркет Знань>>Інформатика>>Інформатика 11 клас>> Інформатика: Структура веб-сайтів, різновиди веб-сайтів
Практична робота до предмету Інформатика 11 клас.
Тема «Практическая работа № 23: Основные Мета тэги».
Розгляд теми: Структура веб-сайтів, різновиди веб-сайтів
Практическая работа № 23: Основные Мета тэги
Дескрипторы <META> - необязательные дескрипторы Вэб-страницы. Они располагаются в теле <HEAD>, после заголовка <TITLE>. Эти дескрипторы содержат описание страницы, ключевые слова, информацию об авторе, команды для роботов и прочую служебную информацию. Другими словами можно сказать, что это визитная карточка страницы для различных служб Интернета.
Следует сказать, что мета тегов существует очень много и далеко не все они нужны на конкретной странице. Поэтому здесь рассмотрим наиболее важные и часто используемые мета тэги.
<META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251">
Указание типа документа и его кодировки.
<META NAME="Title" CONTENT="Заголовокстраницы">
Указание заголовка страницы.
<META NAME="Description" CONTENT="Описание вашей страницы.">
Это аннотация страницы. Если Вэбстраница не содержит этого тэга, то поисковая система в качестве аннотации возьмет начальный фрагмент текста страницы, что зачастую нежелательно, т.к. в верхней части страницы может располагаться баннер.
<META NAME="Keywords" CONTENT="Ключевыеслова.">
Список ключевых слов страницы. Зачастую используется поисковыми машинами. Ключевые слова должны быть простыми и обязаны описывать суть страницы.
Если содержание Вашей страницы часто меняется, то вставьте следующие два тега:
<META NAME="Document-state" CONTENT="Dynamic">
Указывает, что страница динамичная, т.е. ее содержание периодически меняется.
<META NAME="Revizit-after" CONTENT="10 days">
Указывает роботу периодичность смены информации.
<META NAME="Document-state" CONTENT="Static">
Указывает, что страница статичная, т.е. ее содержание не меняется.
<META NAME="author" content="Автор">
Тег, в который вы можете вписать своё имя.
<META HTTP-EQUIV="Reply-to" content="mail@pochta.ru">
Тег для указания адреса электронной почты автора.
<META NAME="Copyright" content="Авторскиеправа">
Описание авторских прав на документ.
Дескрипторы HTML и их атрибуты
В таблице представлены наиболее часто употребляемые тэги и их атрибуты
| Наименование дескриптора/атрибута
| Описание
|
| <A>
| Гиперссылка
|
| accesskey
| Определение "горячей клавиши" для гиперссылки
|
| href
| Определяет имя и местоположение объекта гиперссылки
|
| name
| Служит для именования области Вэб-страницы
|
tabindex
| Определяет порядок перехода по гиперссылкам
|
| target
| Определяет окно для отображения объекта гиперссылки
|
| <AREA>
| Определяет информацию зоны карты ссылок
|
| alt
| Задает текстовый ярлык для зоны карты ссылок
|
| coords
| Задает координаты характерных точек зоны карты ссылок
|
| href
| Задает имя и местоположение файла, связанного с зоной карты ссылок
|
| shape
| Задает форму зоны карты ссылок
|
tabindex
| Задает порядок перехода по зонам карты ссылок
|
| <B>
| Признак полужирного начертания текста
|
| <BASEFONT>
| Изменяет внешний вид всего текста
|
size
| Изменяет размер шрифта всего текста
|
| <BIG>
| Укрупняет шрифт относительно размера соседнего текста
|
| <BLOCKQUOTE>
| Создает блок цитаты
|
| <BODY>
| Тело Вэб-страницы - описывает ее содержимое
|
alink, link, vlink
| Опрделеляют цвет гиперссылок
|
| background
| Определяет графический фон
|
bgcolor
| Изменяет цвет фона
|
| bgproperties
| Определяет возможность перемещения графического фона при пролистывании страницы
|
| bottommargin
| Изменяет высоту нижнего поля
|
| leftmargin
| Изменяет ширину левого поля
|
| marginheight
| Изменяет высоту верхнего и нижнего полей
|
| marginwidth
| Изменяет ширину левого и правого полей
|
rightmargin
| Изменяет ширину правого поля
|
| text
| Изменяет цвет текста
|
| topmargin
| Изменяет высоту верхнего поля
|
| <BR>
| Создает новую строку
|
| clear
| Предотвращает перенос слов текста
|
| <CAPTION>
| Снабжает таблицу заголовком
|
| align
| Задает признак выравнивания заголовка таблицы
|
| <CENTER>
| Центрирует элемент Web-страницы
|
| <COL>
| Создает неструктурную группу столбцов таблицы
|
| align
| Задает признак выравнивания данных в ячейках группы по горизонтали
|
| bgcolor
| Задает цвет фона ячеек группы
|
| char
| Задает символ, определяющий порядок выравнивания данных в ячейках группы
|
| span
| Задает количество столбцов в группе
|
| valign
| Задает признак выравнивания данных в ячейках группы по вертикали
|
<COLGROUP>
| Создает структурную группу столбцов таблицы
|
| align
| Создает признак выравнивания данных в ячейках группы по горизонтали
|
bgcolor
| Задает цвет фона ячеек группы
|
|
|
|
char Задает символ, определяющий порядок выравнивания данных в ячейках группы
span Определяет количество столбцов в группе
valign Задает признак выравнивания данных в ячейках группы по вертикали
<DD> Отмечает статью определения в списке определений
<DEL> Снабжает текст признаком зачеркивания
<DIV> Делит Вэб-страницу на области с целью применения стилей
class Определяет стиль, применяемый для области Вэб-страницы
<DL> Создает список определений
<DT> Отмечает текст термина в списке определений
<EM> Выделяет текст курсивом
<FIELDSET> Создает группы элементов формы
<FONT> Изменяет внешний вид текста
color Изменяет цвет текста
face Изменяет шрифт текста
size Изменяет размер шрифта
<FORM> Создает форму
accept-charset Задает формат кодировки данных
action Задает место назначения данных формы
enctype Определяет формат передаваемых данных формы
method Задает способ пересылки данных формы по сети
target Определяет место отображения сообщения о доставке данных формы
<FRAME> Определяет набор данных фрейма
bordercolor изменяет цвет линий рамки фрейма
frameborder Обеспечивает сокрытие рамки фрейма
marginheight Изменяет высоту верхнего и нижнего полей фрейма
marginwidth Изменяет ширину левого и правого полей фрейма
name Служит для именования фрейма
noresize Предотвращает возможность изменения размеров фрейма
scrolling Обеспечивает сокрытие или отображение полос прокрутки фрейма
src Определяет имя и местоположение файла данных, отображаемых фреймом
<FRAMESET> Создает набор фреймов
border Изменяет толщину линий рамок фреймов
bordercolor изменяет цвет линий рамок фреймов
cols Создает столбцы рамок фреймов
frameborder Скрывает рамки фреймов
framespacing Задает толщину линий рамок фреймов
rows Создает строки фреймов
<H1>..<H6> Заголовки разных уровней
align Признак выравнивания заголовка
<HEAD> Определяет раздел заголовка Вэб-страницы
<HR> Создает горизонтальную линейку
align Признак выравнивания линейки
noshade Эффект объемности горизонтальной линейки
size Задает толщину линейки
width Задает ширину линейки
<HTML> Определяет данные как доккумент HTML
<I> Признак курсивного начертания текста
<IFRAME> Создает плавающий фрейм
<IMG> Вставляет графическое изображение в текст Вэб-страницы
align Задает признаки выравнивания текста относительно изображения
alt Отображает альтернативный текст при отсутствии графики
border Заключает изображение в рамку
dynsrc Создает внедренный объект видео
height, width Задает высоту и ширину графического изображения
hspace, vspace Обрамляет графическое изображение полосами чистого пространства
ismap Создает карту ссылок
lowsrc Указывает имя и расположение файла изображения низкого разрешения
name Именует изображение
src Определяет имя и местоположение файла графического изображения
tabindex Определяет порядок перехода по изображениям
usemap Определяет имя карты ссылок
<INS> Подчеркивает вставленный фрагмент текста
<KBD> Выделяет текст, который необходимо ввести
<LAYER> Позиционирует слой (группу элементов) страницы
height, width Задает высоту и ширину слоя
left Координата слоя относительно левой кромки окна
top Координата слоя относительно верхней кромки окна
z-index Задает приоритет воспроизведения перекрывающихся элементов слоя
<LI> Определяет элемент списка
type Стиль маркирования элемента списка
value Устанавливает номер элемента списка
<LINK> Ссылка на файл внешнего листа стилей
href Определяет имя и местоположение файла внешнего листа стилей
rel Тип отношения внешнего листа стилей к Вэб-странице
type Формат внешнего листа стилей
<MAP> Создает карту ссылок
name Именование карты ссылок
<MARQUEE> Создает объект бегущей строки
behavior Способ поведения бегущей строки
bgcolor Задает цвет фона бегущей строки
direction Направление перемещения бегущей строки
height, width Высота и ширина бегущей строки
hspace, vspace Обрамление бегущей строки полосами чистого пространства
loop Число циклов перемещения бегущей строки
scrollamount Шаг единовременного перемещения бегущей строки
scrolldelay Величина задержки между отдельными тактами перемещения текста бегущей строки
truespeed Определяет минимальное значение нтервала задержки scrolldelay
<META> Служебная информация о Вэб-странице для поисковых роботов
<NOBR> Запрет перехода текста на новую строку
<NOFRAMES> Отображает альтернативный текст при невозможности показа фреймов
<NOSCRIPT> Отображает альтернативный текст при невозможности исполнения сценариев JavaScript
<OL> Создает нумерованный список
start Задает начальный номер элементов списка
type Определяет стиль нумерации списка
<P> Создает новый абзац
align Признак выравнивания текста абзаца
<PRE> Возможность сохранения признаков предварительного форматирования
<Q> Краткий блок цитаты
<SAMP> Выделяет текст примеров
<SCRIPT> Создает объект сценария JavaScript
<SMALL> Уменьшает шрифт относительно размера соседнего текста
<SPACER> Добавляет блок чистого пространства
align Признак обтекания блока текстом
height, width Высота и ширина блока чистого пространства
type Тип блока
<STRIKE> Признак зачеркивания текста
<STRONG> Полужирный текст
<STYLE> Преобразует текст в подстрочный индекс
<SUB> Преобразует текст в надстрочный индекс
<SUP>
<TABLE> Создает таблицу
align Признак обтекания таблицы текстом
background Графический фон таблицы
bgcolor Цвет фона таблицы
border Задает толщину линии рамки
bordercolor Цвет линий рамки
cellpadding Определяет размер полос чистого пространства, отделяющего содержимое ячеек таблицы от ее границ
callspacing Определяет размеры полос чистого пространства, разделяющих ячейки таблицы.
frame Определяет набор линий рамки таблицы, которые будут показаны
height, width Высота и ширина таблицы
rules Определяет набор внутренних линий таблицы, которые будут показаны
<TBODY> Группа строк данных таблицы
align Способ выравнивания данных по горизонтали
bgcolor Цвет фона группы
char Задает символ, определяющий порядок выравнивания данных в ячейках группы
valign Способ выравнивания данных по вертикали
<TD><TH> Определяют ячейку данных и ячейку заголовка таблицы
align Способ выравнивания по горизонтали
background Графический фон ячеек
bgcolor Цвет фона ячеек
char Задает символ, определяющий порядок выравнивания данных в ячейках
colspan Объединяет соседние ячейки одной строки таблицы
height, width Высота и ширина ячейки
nowrap Запрещает перенос слов внутри ячейки на новую строку
rowspan Объединяет соседние ячейки одного столбца
valign Способ выравнивания данных по вертикали
<TFOOT> Создает группу строк итоговых данных таблицы
align Способ выравнивания данных по горизонтали
bgcolor Цвет фона
char Задает символ, определяющий порядок выравнивания данных в ячейках группы
valign Способ выравнивания данных по вертикали
<THEAD>
align Способ выравнивания данных по горизонтали
bgcolor Цвет фона
char Задает символ, определяющий порядок выравнивания данных в ячейках группы
valign Способ выравнивания данных по вертикали
<TITLE> Заголовок Вэб-страницы
<TR> Создает строку таблицы
align Способ выравнивания данных по горизонтали
bgcolor Цвет фона
char Задает символ, определяющий порядок выравнивания данных в ячейках строки
valign Способ выравнивания данных по вертикали
<TT> Воспроизведение текста моноширинным шрифтом
<U> Подчеркивание текста
<UL> Создает маркированный список
type Стиль маркированного списка
Свойства css
Свойство Описание
background Создает графический фон, изменяет цвет фона
background-attachment Определяет принак статичности графического фона
background-image Создается графический фон элемента
background-position Задает начальную точку размещения фонового графического изображения
beckground-repeat Определяет способ копирования графических изображений фона
border Заключает элемент в рамку
border-bottom Определяет свойства нижней части рамки
border-color Определяет цвет линий рамки
border-left Определяет свойства левой части рамки
border-right Определяет свойства правой части рамки
border-style Определяет стиль представления рамки
border-top Определяет свойства верхней части рамки
border-width Определяет толщину линий рамки
bottom Задает направление относительного или абсолютного позиционирования элемента
clear Прекращает действие функций обтекания элемента текстом
color Изменяет цвет элемента
display Задает способ воспроизведения элемента
float Обеспечивает возможность обтекания элемента текстом
font Изменяет свойства шрифта
font-family Изменяет шрифт текста
font-size Изменяет размер шрифта текста
font-style Задает тип начертания шрифта
font-variant Воспроизводит текст малыми прописными буквами
font-weight Задает тип полужирного начертания текста
height Определяет высоту элемента
left Задает направление относительного или абсолютного позиционирования элемента
letter-spacing Изменяет межсимвольный интервал
line-height Изменяет межстрочный интервал
list-style Задает стиль нумерации или маркирования списков
margin Определяет размеры всех полей элемента
margin-bottom Определяет высоту нижнего поля элемента
margin-left Определяет ширину левого поля элемента
margin-right Определяет ширину правого поля элемента
margin-top Определяет высоту верхнего поля элемента
padding Определяет размеры всех полос чистого пространства вокруг элемента
padding-bottom Определяет высоту нижней полосы чистого пространства
padding-left Определяет ширину левой полосы чистого пространства
padding-right Определяет ширину правой полосы чистого пространства
padding-top Определяет высоту верхней полосы чистого пространства
page-break-after Вводит символ разрыва страницы после элемента
page-break-before Вводит символ разрыва страницы перед элементом
position Задает абсолютную или относительную позицию элемента
right Задает направление относительного или абсолютного позиционирования элемента
text-align Устанавливает признак выравнивания текста
text-decoration Задает признак выделения текста линиями
text-indent Задает величину отступа для первой строки абзаца текста
text-transform Изменяет регистр символов текста
top Задает направление относительного или абсолютного позиционирования элемента
vertical-align Задает признак выравнивания встроенного элемента по вертикали
width Задает ширину элемента
word-spacing Задает интервал между словами текста
z-index Задает приоритет воспроизведения перекрывающихся элементов
На этом теоретическая часть изучения языка HTML-разметки закончена. Как говорил известный герой: "Суха теория, мой друг, а древо жизни пышно зеленеет".
Полностью с ним согласен. Освоить материал, изучив его только теоретически очень сложно. Гораздо эффективнее сразу же подкреплять изучение теории применением знаний на практике. Поэтому приглашаю всех желающих закрепить изученное на практическом создании сайта.
Дополнительная информация по теме:
Создание и разработка сайта в примерах - on-line-teaching.com/site/
Основы векторной и растровой графики - grafika-online.com
Надіслав викладач інформатики Миловидов Юрій Олегович, университет «КРОК»
Предмети > Інформатика > Інформатика 11 клас > Структура веб-сайтів, різновиди веб-сайтів > Структура веб-сайтів, різновиди веб-сайтів. Практикуми, лабораторні, кейси
|
