- •Лабораторная работа №1 создание домашней web - страницы Цели работы:
- •Материально – техническое оснащение
- •Порядок выполнения работы
- •Методические указания
- •Гиперссылки и гипертекст
- •Технология клиент-сервер для World Wide Web
- •Классификация web-сайтов:
- •Структурные теги
- •Элементы форматирования на уровне блоков
- •Цветовая гамма html-документа
- •Контрольные вопросы:
- •Задания
- •Лабораторная работа №2 использование ссылок и объектов мультимедиа на web- страницах Цели работы:
- •Порядок выполнения работы
- •Методические указания
- •Объекты
- •Форматы графических изображений
- •Изображения в html-документе
- •Звук в html-документе
- •Видео в html-документе
- •Создание бегущей строки
- •Задания
- •Контрольные вопросы:
- •Лабораторная работа №3 стилевое оформление web - страницы Цели работы:
- •Методические указания
- •Контрольные вопросы:
Структурные теги
<html>...</html> - теги, являющиеся признаком начала и конца документа. Тег <html> должен открывать HTML-документ. Аналогично, тег </html> должен завершать HTML-документ.
<head>...</head> - эта пара тегов указывает на начало и конец заголовка документа (Web-страницы). Помимо наименования в этот раздел может включаться множество служебной информации.
<title>...</title> - все, что находится между тегами <title> и </title>, толкуется браузером как название документа. Текст, размещенный за тегом <title>, отображается в заголовке окна браузера.
<body>...</body> - эта пара меток указывает на начало и конец тела HTML-документа и определяет содержание документа (Web-страницы).
Элементы форматирования на уровне блоков
Текстовые блоки
Типичными примерами текстовых блоков являются параграфы, абзацы и главы. Для отделения одной части текста от другой также используются разделительные горизонтальные линии и символы возврата каретки.
Элементы:
H1,H2,...H6 – Используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни – разделы и подразделы.
Атрибуты:
align – определяет способ выравнивания заголовка по горизонтали. Возможные значения: left, right, center.
Пример:
<H1 ALIGN="center">Самый большой заголовок по центру</H1>
<H2>Заголовок поменьше</H2>
<H6>Самый маленький заголовок</H6>
P – Используется для разметки параграфов. Перед параграфом автоматически добавляется пустая строка
Атрибуты:
align – определяет способ горизонтального выравнивания параграфа. Возможные значения: left, right, center, justify (по ширине). По умолчанию имеет значение left.
Пример:
<P ALIGN="center">Это центрированный параграф.<BR>
Текст располагается в центре окна браузера</P>
<P ALIGN="right">А это параграф, выровненный по правому краю.</P>
DIV – Отделяет блок HTML-документа от остальной его части. Используется для логического выделения блока HTML-документа. Элемент группировки, как и элемент SPAN. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать – перемещать, включать/выключать, создавать слои, регулировать отступы и т.п. Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф.
Атрибуты:
align – определяет выравнивание содержимого элемента DIV. Атрибут
может принимать значения: left, right, center.
Пример:
...Текст документа...
<DIV ALIGN="center">
...Текст, таблицы, изображения. Выравнивание по центру.
</DIV>
...Текст документа...
BR – Осуществляет перевод строки. Элемент не имеет конечного тега.
Атрибуты:
clear – указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения:
-
all – завершить обтекание изображения текстом.
-
left – завершить обтекание текстом изображения, выровненного по левому краю.
-
right – завершить обтекание текстом изображения, выровненного по правому краю.
HR – Вставляет в текст горизонтальную разделительную линию.
Атрибуты:
width – определяет длину линии в пикселах или процентах от ширины
окна браузера.
size – определяет толщину линии в пикселах.
align – определяет выравнивание горизонтальной линии. Атрибут может принимать значения left, right, center.
noshade – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной.
color – определяет цвет линии.
&-последовательности
Поскольку символы < и > воспринимаются браузерами как начало и конец тегов, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ <, когда встречает в тексте последовательность < (по первым буквам английских слов less than — меньше, чем). Знак > кодируется последовательностью > (по первым буквам английских слов greater than — больше, чем).
Символ & кодируется последовательностью &
Двойные кавычки (" ") кодируются последовательностью "
Точка с запятой — обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие). Не допускается использование меток типа " или &.