- •А. П. Багаева разработка web-страниц
- •Университет имени академика м. Ф. Решетнева, 2012 © Багаева а. П., 2012 оглавление
- •5. Форматирование страницы с использованием
- •6. Использование формы для создания интерактивности
- •Предисловие
- •1. Первые шаги по созданию
- •1.1. Структура документа
- •Правила записи тегов
- •Параметры типа метаопределений name
- •Использование цветовых спецификаций при создании web-страницы
- •Способы задания цвета
- •1.2. Форматирование текста
- •Теги логического форматирования
- •Теги физического форматирования
- •1.3. Структурное форматирование
- •Теги структурного форматирования
- •1.4. Списки
- •Практическое задание создание web-страницы
- •2. Настройка страницы.
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •Исходные данные для создания web-страницы
- •2. Делаем web-страницу интереснее
- •2.1. Гиперссылки
- •2.2. Графика и мультимедиа на web-странице
- •2.2.1. Вставка графики в html-документ
- •2.2.2. Встраивание мультимедийных файлов в html-документ
- •Практическое задание графика и гиперссылки на web-странице
- •1. Включение графики.
- •2. Создание гиперссылок.
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •3. Основы построения таблиц
- •3.1. Создание и форматирование простой таблицы
- •3.2. Создание сложных таблиц
- •3.3. Вложенные таблицы
- •3.4. Разметка web-страницы при помощи таблицы
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •4. Оформление страниц с помощью фреймов
- •4.1. Создание простых фреймов
- •4.2. Создание вложенных фреймов
- •4.3. Взаимодействие фреймов
- •4.4. Плавающие фреймы
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •5. Форматирование страницы с использованием каскадных таблиц стилей
- •5.1. Формирование каскадных таблиц стилей
- •Селектор { Свойство: Значение; }
- •Единицы измерений значений свойств
- •5.2. Варианты использования css
- •5.3. Принцип наследования
- •5.4. Обзор свойств css
- •Свойства форматирования текста в css
- •Свойства структурного форматирования в css
- •5.5. Слои и позиционирование документов
- •Использование css при форматировании
- •1. Задание стиля для одного тега.
- •2. Задание стиля для одной web-страницы.
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •6. Использование формы для создания интерактивности на web-странице
- •6.1. Задание формы
- •6.2. Создание элементов управления
- •Теги и атрибуты для пользовательских форм
- •6.3. Комбинирование форм и таблиц
- •Практическое задание создание формы
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •Послесловие
- •Библиографический список
- •Багаева Анна Прокопьевна разработка web-страниц
- •660014, Г. Красноярск, просп. Им. Газ. «Красноярский рабочий», 31.
Параметры типа метаопределений name
Параметр |
Назначение |
Подпараметр |
keywords |
Указание ключевых слов документа |
– |
description |
Указание краткого описания документа |
– |
author |
Информация об авторе (авторах) документа |
– |
robots |
Составление правил для индексирования документа поисковыми системами (роботами) |
all none index noindex follow nofollow |
rating |
Установление возрастной категории содержания документа |
– |
document-state |
Определение частоты индексирования документа |
– |
revisit |
Определение промежуточного времени, через которое должно производиться повторное индексирование документа |
– |
distribution |
Категория распространения документа (массовое или ограниченное) |
– |
URL |
Указание основного адреса документа (в случае существования «зеркальных» копий) |
– |
Окончание табл. 1.1
Параметр |
Назначение |
Подпараметр |
copyright |
Установление авторского права и перечисление условий распространения документа |
– |
generator |
Информация о программном обеспечении, с помощью которого создавался документ |
– |
META NAME="keywords" – конструкция задает набор ключевых слов документа, предназначенных для индексирования поисковыми системами (добавление информации о документе в базы данных). Слова указываются через запятую.
<META NAME="keywords" CONTENT="HTML, web, WWW, web-стра-ница, Интернет" >
META NAME="description" – предоставление небольшого описания текущего HTML-документа, также необходимо для поисковых систем (при поиске информации описание выводится рядом со ссылкой на найденный интернет-ресурс).
<META NAME="description" CONTENT="HTML. Быстрый старт: Быстрое освоение популярного языка гипертекстовой разметки HTML" >
META NAME="author". Конструкция предназначена для указания автора (авторов) текущего документа.
<META NAME="author" CONTENT="Иван Петров" >
META NAME="robots" – одна из наиболее важных конструкций, используемая для описания правил индексирования документа поисковыми системами (роботами).
Отдельно следует перечислить возможные значения параметра CONTENT:
– all – разрешение индексирования документа со всеми присутствующими в нем гиперсвязями (ссылками);
– none – запрет индексирования документа со всеми присутствующими в нем гиперсвязями;
– index – разрешение индексирования документа;
– noindex – запрет индексирования документа;
– follow – разрешение индексирования присутствующих в документе гиперсвязей;
– nofollow – запрет индексирования присутствующих в документе гиперсвязей.
Если конструкция META NAME="robots" не указывается, то по правилу умолчания индексируется документ со всеми присутствующими в нем гиперссылками (равнозначно значению all или index, follow).
<META NAME="robots" CONTENT="all" >
В целом следует помнить, что использование всех метаопределений не обязательно. В зависимости от типа документа, его содержания и прочих факторов следует выбрать только самые необходимые теги метаданных. Наиболее важными являются данные для поисковых систем и указания кодирования документа.
Тело документа. Раздел BODY является одним из самых важных компонентов любого HTML-документа, так как в нем располагается содержательная часть, которая выводится браузером на экран монитора пользователя. Парные теги <BODY> и </BODY> указывают на начало и конец тела документа.
Начальный и конечный теги элемента BODY являются необязательными в структуре HTML-документа. Однако контейнер <BODY> необходим, когда требуется задать свойства всей странице.
Таким образом, структура HTML-документа будет выглядеть следующим образом:
<!DOCTYPE HTML PUBLIC «-//W3C// HTML 4.01 Transitional//EN»>
<HTML>
<HEAD>
<TITLE> Моя первая WEB страница </TITLE>
<META HTTP-EQUIV=«Content-Type»
CONTENT="text/html; charset=Windows-1251">
</HEAD>
<BODY>
Здесь будет размещено содержимое страницы
</BODY>
</HTML>
Тег <BODY> имеет ряд параметров, которые условно можно разделить на четыре основные группы: параметры заднего фона, параметры границ документа, параметры текста и параметры гиперссылок (табл. 1.2).
Таблица 1.2
Атрибуты тега <BODY>
Атрибут |
Назначение |
BACKGROUND |
Указывает на URL-адрес изображения, которое используется в качестве фонового |
BGCOLOR |
Определяет цвет фона документа |
Окончание табл. 1.2
Атрибут |
Назначение |
BGPROPERTIES |
Если установлено значение FIXED, то фоновое изображение не прокручивается |
LEFTMARGIN |
Устанавливает границу левого поля в пикселях |
RIGHTMARGIN |
Устанавливает границу правого поля в пикселях |
TOPMARGIN |
Устанавливает границу верхнего поля в пикселях |
BOTTOMMARGIN |
Устанавливает границу нижнего поля в пикселях |
TEXT |
Определяет цвет текста |
ALINK |
Определяет цвет активной ссылки |
LINK |
Определяет цвет еще не просмотренной ссылки |
VLINK |
Определяет цвет уже просмотренной ссылки |
Параметры заднего фона: BGCOLOR, BACKGROUND и BGPROPERTIES.
BGCOLOR устанавливает цвет заднего фона, значение которого может быть выведено в символьном эквиваленте, в шестнадцатеричном коде или формате цветовой модели RGB (см. табл. 1.3). Система указания цвета основана на трех основных цветах: красном, зеленом и синем.
Приведем пример указания цвета заднего фона (белый) в трех вариантах:
<BODY BGCOLOR="white">
<BODY BGCOLOR="#ffffff">
<BODY BGCOLOR="255, 255, 255">
Параметр BACKGROUND позволяет накладывать на задний фон документа графическое изображение.
<BODY BACKGROUND="images/bg.gif΄" >
Параметр BGPROPERTIES поддерживается только браузером Internet Explorer и позволяет менять свойства заднего фона документа. Например, конструкция
<BODY BACKGROUND="images/bg.gif" BGPROPERTIES="fixed">
позволит прокручивать содержимое документа, оставляя фоновое графическое изображение в зафиксированном виде.
Описанные параметры не являются обязательными, однако использование BGCOLOR рекомендуется по следующей причине: пользователь в настройках своего браузера может поставить любой цвет заднего фона, а разработчик, полагая, что белый цвет является основным по умолчанию, может не указать этот параметр. В результате, вместо подразумеваемого белого цвета может оказаться черный, зеленый и т. д., что может привести к нарушению оформления документа.
Параметры границ документа: LEFTMARGIN, RIGHTMARGIN, TOPMARGIN, BOTTOMMARGIN создают отступы заданного размера от левого, правого, верхнего и нижнего края документа. Значения для них задаются в пикселах.
<BODY TOPMARGIN="5" BOTTOMMARGIN="5" LEFTMARGIN="10" RIGHTMARGIN="10">
Однако данные параметры неправильно распознаются некоторыми браузерами, в частности Netscape, который объединяет упомянутые параметры в две группы: горизонтальные отступы и вертикальные отступы.
<BODY MARGINWIDTH="10" MARGINHEIGHT="10">
Таким образом, если вы хотите учесть особенности всех браузеров, в HTML-конструкцию подставляются и те и другие параметры.
<BODY TOPMARGIN="5" BOTTOMMARGIN="5" LEFTMARGIN="10" RIGHTMARGIN="10" MARGINWIDTH="10" MARGINHEIGHT="10">
Параметры текста: TEXT – задает цвет основного текста на страницу.
<BODY TEXT="black" >
Параметры гиперссылок: ALINK, VLINK, LINK определяют цвета ссылок соответственно активной, посещенной и непосещенной.
<BODY ALINK="#00ffff" VLINK="blue" LINK="#0000ff" >
Итак, мы рассмотрели основные разделы любого HTML-документа. В целом код простейшей страницы выглядит так:
<!DOCTYPE HTML PUBLIC "-//W3C// HTML 4.01
Transitional//EN">
<HTML>
<HEAD>
<TITLE> Моя первая WEB страница </TITLE>
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset=Windows-1251">
</HEAD>
<BODY TEXT="green">
Здесь будет размещено содержимое страницы
</BODY>
</HTML>