Введение в HTML [Копия]

Пример упорядоченного списка.

Неупорядоченный список

Это тоже самое, что простой перечень или ненумерованный список, каждый элемент в котором предваряется вводным символом, например, жирной точкой. Сам список формируется с помощью контейнера <ul>, а каждый пункт списка начинается с тега <li>, как показано ниже.

<ul>

<li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li>

умолчанию.

Circle – Вводные символы выглядят как незакрашенные окружности.

Square – Используются квадратные вводные символы.

Пример неупорядоченного списка.

Список определений

Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера <dl>, термин — тегом <dt>, а его определение — с помощью тега <dd>. Вложение тегов для создания списка определений:

<dl>

<dt>Термин 1</dt> <dd>Определение 1</dd>

<dt>Термин 2</dt> <dd>Определение 2</dd>

</dl>

Атрибуты:

Compact – Указывает на то, что при отображении списка должен использоваться

минимальный сдвиг вправо и минимальное межстрочное расстояние. Пример списка определений.

Список каталогов

Определен в стандарте как список, содержащий элементы длинной не более 24 символов. Web - броузеры отображают его без вводных символов и сдвига вправо, поэтому, если бы элемент списка имел длину более 24 символов и его окончание переносилось на следующую строку, было бы трудно понять, что новая стока является продолжением предыдущего элемента.

Синтаксис:

<dir><li>Элемент списка</dir>

Список пунктов меню

Меню - это неупорядоченный список, каждый из элементов которого, должен располагаться на одной строке. Меню может отображаться в браузере более компактно, чем обычный неупорядоченный список. Имейте ввиду, что меню не могут быть вложенными. Синтаксис:

<menu><li>Элемент списка</menu>

Создание вложенных списков

Существует возможность вложить один список в другой, вставив тэги списка, внутрь элемента списка <li>. Однако не рекомендуется делать вложенные списки с количеством уровней больше трех.

Практическое задание.

Создать веб-страницу, содержащую все перечисленные варианты списков (нумерованный, маркированный, список определений, список меню, список каталогов, вложенный список). Заголовок страницы должен содержать ваше ФИО, номер группы и номер бригады.

Контрольные вопросы:

1.Какие теги используются для создания нумерованных списков? Маркированных?

2.Списки с каким уровнем вложенности предпочтительнее создавать в веб-документе?

3.Перечислите три основных вида списков в HTML-документе.

4.Какой атрибут определяет тип маркера неупорядоченного списка?

Лабораторная работа №3.

Ссылки

Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую. Гипертекстовые ссылки выделяются в тексте документа специальным цветом, и, активизировав их мышью, вы без труда сможете перемещаться по документам или частям одного документа. Ссылка может вести не только на HTML-файлы, но и на файл любого типа, причем этот файл может размещаться совсем на другом сайте. Любая ссылка на вебстранице может находиться в одном из следующих состояний.

Непосещенная ссылка. Такое состояние характеризуется для ссылок, которые еще не открывали. По умолчанию непосещенные текстовые ссылки изображаются синего цвета и с подчеркиванием.

Активная ссылка. Ссылка помечается как активная в момент ее открытия. Поскольку время между нажатием на ссылку и началом загрузки нового документа достаточно мало, подобное состояние ссылки весьма кратковременно. Активной ссылка становится также, при ее выделении с помощью клавиатуры. Цвет такой ссылки по умолчанию красный.

Посещенная ссылка. Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещенная и меняет свой цвет на фиолетовый, установленный по умолчанию.

Общий синтаксис создания ссылок следующий.

<a href="URL">текст ссылки</a>

Атрибут href определяет URL (Universal Resource Locator, универсальный указатель ресурса), иными словами, адрес документа, на который следует перейти. Т.е. URL служит для указания местоположения файлов в World Wide Web. Такие адреса необходимы для ссылок на документы, которые находятся на других серверах. Cодержимое контейнера <a> является ссылкой. Текст, расположенный между тегами <a> и </a>, по умолчанию становится синего цвета и подчеркивается. Структура URL:

http://webdoc.best.com

Его первая часть(до двойной дробной черты) определяет метод доступа к ресурсу. Вторая часть, как правило, представляет собой сетевой адрес компьютера, на котором находятся искомые данные. Оставшиеся части могут обозначать имя файла, порт, с которым необходимо соединиться, либо текст, по которому должен производиться поиск в базе данных.

Пример создания нескольких ссылок на разные веб-страницы.

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=windows-1251"> <title>Ссылки на странице</title>

</head>

<body>

<p><a href="lab1.html">Лабораторная работа №1</a></p> <p><a href="lab2.html">Лабораторная работа №2</a></p>

</body>

</html>

Абсолютные и относительные ссылки

Существуют два способа задания URL-адреса: абсолютный и относительный. Рассмотрим на следующем примере. Предположим, что есть корневая папка – “Сайт”. Все страницы на сервере у нас хранятся в двух папках “Папка 1” и “Папка 2”. При этом в папке “Папка 1” содержатся файлы Lab1.html и Lab2.html, а в папке “Папка 2” – Lab2.html. Т.е. имеется следующая структура:

При абсолютной адресации используется полный путь. В нашем примере абсолютный адрес страницы Lab1.html следующий:

<a href="http://Сайт/Папка 1/Lab1.html">Ссылка на страницу Lab1.html</a>

При относительной адресации путь указывается от того каталога, в котором хранится исходный файл. Например, если мы хотим разместить ссылку со страницы Lab1.html (исходный файл) на страницу Lab2.html, то, учитывая, что обе страницы лежат в одном каталоге (т.е имеют один уровень), она будет выглядеть следующим образом:

<a href="Lab2.html">Ссылка на страницу Lab2.html</a>

Если же мы захотим сделать ссылку со страницы Lab1.html на страницу Lab3.html, то, учитывая, что страницы лежат в разных каталогах, она будет выглядеть следующим образом:

<a href="../Папка 2/Lab3.html">Ссылка на страницу Lab3.html</a>

Две точки вначале означают подняться в иерархии папок на уровень выше.

Атрибуты ссылок

Атрибуты:

Target – Устанавливает окно или фрейм в котором откроется документ при переходе по

ссылке.

<a target="имя окна">...</a>

В качестве значения используется имя окна или фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен применяются следующие.

К папках Lab1-Lab3 создать текстовые документы, содержащие краткое описание соответствующих работ. Например, в папке Lab1 создать документ lab1.txt со следующим содержимым: “Лабораторная работа № 1. Изучение тегов HTML.”. И т.д.

Заголовок каждой html-страницы должен содержать ваше ФИО, номер группы и номер бригады. В качестве файлов Lab1.html и Lab2.html взять файлы I и II лабораторных работ. Вверху каждой страницы создать ссылки на 2 других файла html и на файлы с их описанием. (Ссылки разместить последовательно в виде маркированного списка) Т.е. файл Lab1.html должен содержать ссылки на файлы Lab2.html, Lab3.html и на их описание в файлах 2.txt и 3.txt и т.д.

Ссылки на файл: одна абсолютная ссылка, одна относительная.

Ссылки на веб-документы: одна ссылка открывается в новом окне, вторая в окне родителе.

Ссылки отделить от остального документы разделительной чертой. Каждая ссылка должна иметь всплывающую подсказку.

Файл Lab3.html должен содержать неупорядоченный список (должен содержать не менее 3 элементов). Каждый элемент списка содержит вложенный упорядоченный список (должен содержать не менее 3 элементов). Элементы маркированного списка должны быть отделены друг от друга интервалом не менее 10 строк (использовать тег <br>). Файл Lab3.html должен содержать ссылки (якоря) на каждый пункт маркированного списка. Поменять стандартный цвет ссылок.

В конце файла Lab3.html разместить ссылку на вашу электронную почту. Ссылку отделить разделительной чертой. Пример выполнения работы: