Федеральное агентство по образованию
Государственное образовательное учреждение
Высшего профессионального образования
«Санкт-Петербургский государственный
инженерно-экономический университет»
Кафедра вычислительных систем и программирования
Программные средства разработки web-страниц и презентаций
Методические указания
по выполнению лабораторных работ
Специальности:
090103 – Организация и технология защиты информации,
190603 – Сервис транспортных и технологических машин и оборудования (автомобильный транспорт),
080105 – Финансы и кредит,
080301 – Коммерция
Санкт-Петербург
2011
Допущено
редакционно-издательским советом СПбГИЭУ
в качестве методического издания
Составитель:
канд. физ.-мат. наук, доц. И.Н. Васильева
Рецензент:
канд. экон. наук, доц. Е.Б. Попов
Подготовлено на кафедре
вычислительных систем и программирования
Одобрено научно-методическими советами специальностей
090103 – Организация и технология защиты информации,
190603 – Сервис транспортных и технологических машин и оборудования (автомобильный транспорт),
080105 – Финансы и кредит, 080301 – Коммерция
Отпечатано в авторской редакции с оригинал-макета,
представленного составителем
© СПбГИЭУ, 2011
СОДЕРЖАНИЕ
Тема1. Базовые технологии создания web-страниц: html и css
Web-страницы являются гипертекстовыми и гипермедийными документами, которые могут содержать графику, аудио- и видео- информацию, а также ссылки на другие ресурсы сети Интернет. Базовой технологией создания Web-страниц является язык гипертекстовой разметки HTML (Hyper Text Markup Language). Просмотр web-страниц осуществляется специальными программами – браузерами (например, MS Internet Explorer), содержащими интерпретатор языка HTML.
Под гипертекстом понимается совокупность информационных фрагментов, связанных между собой. При этом просмотр информационных фрагментов может осуществляться пользователем в произвольном порядке. В HTML все элементы связи между фрагментами текста находятся в теле самого документа и записываются в ASCII-формате (только текст).
Возможно создание web-страниц в режиме непосредственного редактирования кода языка HTML (редакторы кодов HTML), либо в режиме визуального редактирования внешнего вида страницы наподобие редактирования документов MS Word (WYSIWYG-редакторы).
Общие идеи построения и интерпретации HTML- документов: документ выглядит как совокупность текстовых фрагментов, каждый из которых окружен тегами (tags).
Каждый тег разметки HTML имеет свой идентификатор (имя) и, возможно, несколько параметров (атрибутов). Название тега вместе с его параметрами заключаются в скобки < >. В общем виде тег выглядит следующим образом:
<тег параметр1=”значение1” параметр2=”значение2”...> Текст </тег>
Действие тега распространяется на фрагмент текста «Текст». Значения параметров заключают в двойные кавычки.
Первый тег называется открывающим, а парный ему – закрывающим. Закрывающий тег имеет тот же идентификатор (имя), но начинается с символа слеша (/). Закрывающая часть тега никогда не содержит параметров.
Теги, не предусматривающие наличие вложенного текста, называются пустыми или непарными, они не имеют закрывающей части. Непарные теги имеют вид:
<тег параметр1=”значение1” параметр2=”значение2”...>
Для связи информационных фрагментов между собой в гипертекстовом (гипермедийном) документе используются однонаправленные ссылки, называемые гиперссылками. В информационных фрагментах выделяются специальные поля связывания, активизация такого поля приводит к переходу на другой фрагмент. Чтобы идти дальше, необходимо активизировать следующие поля связывания.
В HTML-документе могут присутствовать гиперсвязи различных типов. Актуальны следующие типы связей:
поле связывания → метка назначения;
поле связывания → фрагмент;
поле связывания → фрагмент+метка назначения;
поле связывания → подсеть.
Гиперсвязь первого типа определена внутри одного фрагмента (web-страницы). Метка назначения отмечает конкретное место HTML-документа, это именованная строка.
Второй тип ссылается на начало документа (web-страницы).
При использовании связи третьего типа переход осуществляется не к началу указанного документа, а к метке, установленной внутри документа.
Гиперсвязь четвертого типа ссылается на корневой каталог подсети, откуда есть доступ ко всем принадлежащим подсети фрагментам (обычно это ссылка на корневой каталог web-узла).
Любой ресурс WWW может быть указан с помощью универсального идентификатора – URL (Uniform Resource Locator). В общем виде URL выглядит следующим образом:
метод://сервер:порт/путь/файл#метка
URL определяет:
- протокол доступа к документу,
- имя и адрес сервера, содержащего этот web-документ,
- местоположение документа в общей структуре web-сервера.
В настоящее время действующей является спецификация HTML 4.01 (ISO/IEC 15445:2000), которая, в строгой версии, не содержит ряд элементов, помеченных как «устаревшие» или «не одобряемые». Данная спецификация близка к XHTML (Extensible Hypertext Markup Language) – расширяемому языку разметки гипертекста. XHTML по возможностям сопоставим с HTML, но предъявляет более строгие требования к синтаксису, поскольку соответствует синтаксическим правилам XML.
XML – это обобщенный язык разметки. В отличие от HTML, XML позволяет создавать собственные теги и таким образом формировать произвольные структуры документов и данных. Общий характер XML позволяет рассматривать HTML-документы как XML-документы с ограниченным набором тегов для отображения в web-браузерах. Однако старые стандарты HTML не до конца совместимы с XML в части синтаксиса. Чтобы устранить разрыв между этими двумя языками разметки и был разработан XHTML. По существу, это обычный HTML, в который добавлены синтаксические правила XML для создания «правильно сформированных» (well-formed) документов.
Стандарт XHTML построен не как самодостаточное описание языка, а как перечень различий между HTML 4.01 и XHTML. На практике, в HTML надо добавить несколько правил, чтобы получился XHTML. Основные из них – следующие:
Все теги должны быть записаны в нижнем регистре, то есть нельзя писать <BODY>, а надо писать <body>.
Все теги должны быть закрыты.
2a. В случае, если элемент непарный, то есть не имеет закрывающего тега (например, <img> или <br>), надо добавлять слеш в конце тега <img /> и <br />.
Вложенность тегов должна быть корректной.
Например, нельзя писать <strong><p>текст</strong></p>, а надо писать <p><strong>текст</strong></p>. Также недопустимо вложение блочных элементов внутрь элементов уровня текста. Например, блочные элементы div или p не могут быть вложены внутрь элементов a, span, em и так далее. То есть нельзя писать <strong><p>текст</p></strong>.
Все значения атрибутов должны быть заключены в кавычки.
Например, нельзя писать <p align=center>, а надо писать <p align=”center”>.
Вообще говоря, правила 1, 2 и 4 присутствуют и в HTML, но не являются обязательными. Правило 3 является обязательным, хотя браузеры в большинстве случаев игнорируют ошибки вложенности. Единственное действительно новое правило – это правило 2а. Существуют и другие особенности:
В HTML встречаются параметры, указывающиеся без значения (включают или выключают некоторое свойство). В XHTML такие атрибуты записываются в развёрнутой форме. Например, следует писать <td nowrap=”nowrap”>.
Обязательное задание альтернативного текста для изображений (атрибут alt).
Документ не должен содержать текст вне какого-либо блочного элемента (то есть не должно быть текста непосредственно в теге body, весь текст должен быть заключен в теги блоков p, div, td и др.).
XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL, должны замещаться < и & соответственно.
Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по умолчанию является ISO 8859-1).
В большинстве браузеры поддерживают старые версии HTML и корректно отображают «неправильные» страницы. Однако современные визуальные редакторы web-страниц поддерживают новые стандарты и генерируют код в соответствии с ними. Как правило, это XHTML переходной версии (Transitional), которая обеспечивает наибольшую совместимость со старыми версиями HTML.
Первой строкой такого документа указывается:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
Если на странице необходимо использовать фрэймовые структуры (разделить окно браузера на несколько подокон) используется фреймовая версия XHTML (Frameset).
Параллельно, начиная с 2004 года, сообществом WHATWG ведётся разработка HTML версии 5.
Основной идеологией разработки web-страниц является возможность отделения оформления (описания внешнего вида) от фактического содержимого web-страницы, что достигается использованием технологии каскадных таблиц стилей CSS.
Каскадные таблицы стилей CSS (Cascade Style Sheets) – это простая технология определения и присоединения стилей оформления к документам HTML. Стиль оформления определяется набором правил отображения тегов, задаваемых таблицей стилей. Таблица стилей – это шаблон, который управляет форматированием тегов в web-документе.
Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения. Селектор – это любой тег HTML, для которого определяется форматирование. Определение описывает конкретный вид форматирования и состоит из двух частей: свойства и значения, разделенных знаком двоеточия. Например, стиль задающий цвет текста абзаца p: <p style=”color:red”>Текст</p>. При необходимости задать в одном правиле несколько определений, они разделяются знаком точки с запятой (;). Например,
<p style=”color:red;font-weight:bold”>Текст</p>.
Данный стиль является встроенным в тег и его действие распространяется на данный конкретный экземпляр тега p.
Описание стиля может быть вынесено за рамки конкретного экземпляра тега, то есть задано для всех экземпляров или для группы экземпляров тега. В этом случае изменение форматирования экземпляров тега производится однократным внесением изменений в общее описание стиля.
В случае внедренной в страницу таблицы стилей, таблица описывается в разделе заголовка head с помощью тега style, стили действуют в пределах данной страницы.
Стили могут быть описаны во внешней таблице стилей – текстовом файле с расширением .css. Затем файл таблицы стилей присоединяется к web-странице (с помощью строки link в разделе head), либо таблица может быть импортирована с другого сайта (строка import). Таким образом, можно задать описание стиля сразу для нескольких (многих) страниц.
Приоритет имеет тот стиль, который «расположен» ближе к элементу (в порядке убывания приоритета: встроенный стиль, внедренная таблица, внешняя таблица стилей).