- •Краткие сведения из теории
- •Основные тэги языка html Тэги, определяющие структуру документа
- •Тэги, определяющие внешний вид документа
- •Тэги, применяемые для создания списков
- •Тэги, применяемые для вставки различных разделителей
- •Тэги, применяемые для вставки ссылок и графики
- •Тэги, применяемые для описания таблиц
- •Вставка бегущей строки
- •Порядок выполнения задания 1
- •Контрольные вопросы
Лабораторная работа №9
Тема: Создание сайтов средствами языка HTML.
Содержание
Краткие сведения из теории 1
Основные тэги языка HTML 2
Тэги, определяющие структуру документа 2
Тэги, определяющие внешний вид документа 3
Тэги, применяемые для создания списков 4
Тэги, применяемые для вставки различных разделителей 6
Тэги, применяемые для вставки ссылок и графики 6
Тэги, применяемые для описания таблиц 8
Вставка бегущей строки 10
Фреймы 10
Контрольные вопросы 18
Краткие сведения из теории
HTML-документ является обычным текстовым файлом, сохраненным в формате html.
Этот файл может содержать обычный текст, а также элементы, заключенные в значки "<" и ">". Элементы html-документа, заключенные в угловые скобки, называются html-дескрипторами или html-тэгами. Дескрипторы несут информацию о структуре и особенностях форматирования web-страницы. Большинство дескрипторов являются парными, то есть состоят из открывающей и закрывающей частей и воздействуют на текст, помещенный между ними.
Например, чтобы выделить текст "размер шрифта" соответствующего предложения курсивом надо записать следующую команду на языке HTML:
Кегль определяет <i>размер шрифта</i> |
В браузере данное предложение будет выглядеть так:
Кегль определяет размер шрифта |
Признаком закрывающего дескриптора является обратная косая черта "/".
К основным понятиям языка также относится понятие - элемент. Элемент-конструкция языка, состоящая из открывающего дескриптора, содержания и закрывающего дескриптора. Содержанием называется все, что находится между открывающим и закрывающим дескрипторами.
Дополнительные к дескрипторам параметры или свойства элементов называются атрибутами.
Примечание: атрибуты прописываются в открывающем дескрипторе и отделяются друг от друга пробелами.
На рисунке ниже, показан пример структуры элемента языка HTML.
Результат выполнения этой команды в браузере (текстовая строка) будет выглядеть так:
текст выделен красным цветом
Любой html-документ должен иметь следующую структуру:
<HTML> |
<HEAD> |
<title>Название html-документа</title> |
<meta> |
</HEAD> |
<BODY> |
Тело html-документа |
</BODY> |
</HTML> |
Рассмотрим некоторые атрибуты тэга <BODY>
Наименование |
Описание |
Background="image" |
задает фон документа в виде графического изображения. image - относительный путь к рисунку |
alink, vlink, link |
задает цвета гиперссылок (активной, посещенной, неактивной) |
Bgcolor="цвет" |
задает цвет фона документа |
Text="цвет" |
задает цвет текста документа по умолчанию |
Примечание: цвета можно задавать с помощью символьных констант (red, green) или в 16-ричном коде (#******). Каждый символ * заменяют любой цифрой от 0 до 9 или латинской буквой от A до F.
Таким образом, команда <body bgcolor="#FFOOOO"> означает, что фон html-документа - красный.
Основные тэги языка html Тэги, определяющие структуру документа
Наименование |
Описание тэга |
Атрибуты |
Описание назначения атрибута |
<Hn> текст </Hn> |
выделение текста заголовком n-го уровня. n принимает значения от 1 до 6 |
align=left|right|center|justify |
выравнивание текста по левому, правому полю страницы, по центру, по ширине |
<p> текст </p> |
создание абзаца текста |
align=left|right|center |
|
<div>содержимое раздела</div> |
создание раздела с целью применения единого форматирования к его элементам (абзацам) |
align=left|right|center |
|
<blockquote>текст цитаты</blockquote> |
выделение цитаты отступом |
|
|
<code>текст программного кода</code> |
выделение программного кода |
|
|
Примечание: Применение заголовков на web-странице облегчает визуальное восприятие информации, а также помогает пользователям найти соответствующий сайт в Internet, так как многие поисковые системы находят ключевые слова и сопоставляют их с текстом именно заголовков. На одной web-странице не рекомендуется использовать более 3 различных заголовков.