KNOWLEDGE HYPERMARKET


Практическая работа № 23: Основные Мета тэги

Гіпермаркет Знань>>Інформатика>>Інформатика 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="[email protected]">

Тег для указания адреса электронной почты автора.

<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 клас > Структура веб-сайтів, різновиди веб-сайтів > Структура веб-сайтів, різновиди веб-сайтів. Практикуми, лабораторні, кейси