HTML
.pdf
Валидация
http://validator.w3.org/
Справочники
http://htmlbook.ru/
Задача
1.С помощью Блокнота Windows создайте и сохраните в личной папке HTML-файл с именем index.html и заголовком, совпадающим с Вашей фамилией. В тексте файла создайте 2 заголовка первого уровня "Мои анкетные данные" и "HTML". Задайте шрифт Verdana для параграфов и размер шрифта 0.5em.
2.В разделах "Мои анкетные данные" добавьте по 2-3 абзаца осмысленного текста, выровненных по ширине окна. Внутри текста используйте выделение слов курсивом, жирным и подчеркиванием.
3.К нижней части документа добавьте неразрываемую строку, набранную шрифтом Arial с использованием размера 0.7em:
4.Добавьте к документу подпись, отформатированную как в примере:
Студент группы 110 Иванов А.П.
5.Добавьте в заголовок документа мета-теги Description и Keywords.
6.Добавьте в раздел "HTML" заголовок второго уровня "Файл: <название вашего файла>" и поместите под ним листинг HTML-кода текущего документа. Позаботьтесь о том чтобы при выводе листинга сохранились все отступы, интервалы и переносы строк. Выделите цветом основные элементы кода, для улучшения читабельности.
7.Проверьте на валидность полученный код.
Гиперссылки
Тег <a> предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри вебстраницы. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным.
Синтаксис |
Пример: |
|
<a href="URL">...</a> |
|
<p><a href="address.html#p1">Текст ссылки</a></p> |
|
|
|
<a name="идентификатор">...</a> |
|
<p><a href="mailto:my@mail.ru">Моя почта</a></p> |
|
|
<p id="p1"></p> |
|
|
|
Атрибуты
●accesskey - Активация ссылки с помощью комбинации клавиш.
●href - Задает адрес документа, на который следует перейти.
●name - Устанавливает имя якоря внутри документа.
●tabindex - Определяет последовательность перехода между ссылками при нажатии на кнопку <Tab>.
●target=[ _self, _blank] - Имя окна, куда браузер будет загружать документ.
●title - Добавляет всплывающую подсказку к тексту ссылки.
Структура URL
URL - Uniform Resource Locator может состоять из следующих частей:
●префикс протокола, то есть, указание на используемую сетевую службу. (http://...... https://..... ftp://...... mailto:...... file://......)
●доменное имя компьютера или его IP-адрес вместо доменного имени. http://mysite.ru, http://президент.рф.
●номер порта, через который происходит взаимодействие с сервером. Перед номером порта ставится двоеточие.
http://othersite.com:8080
● имя файла на сервере, может включать и путь от корневого каталога сервера. В записи пути по дереву каталогов сервера используется символ ‘/’, а не ‘\’, как принято в Dos и Windows.
http://simple.net/path/to/file.html
● закладка, позволяющая перейти в нужную часть документа. Имя закладки отделяется от имени файла символом '#'.
file://c:/some.html#line19
Формат URL
Без перекодирования в URL можно использовать только ограниченное количество символов. Обычно советуют ограничиться набором из символов:
[0-9],[a-z],[A-Z],[_],[-].
Рекомендуется задавать название файлов и URL страниц своего сайта в нижнем регистре, т.к для UNIX подобных систем (на которых работает большинство веб серверов) символы в верхнем и нижнем регистре являются разными (в отличии от Windows).
Использование каких-либо других символов (включая русские) в URL адресах допустимо, но при этом будет происходить перекодировка этих самых символов (URL Encoding).
Пример:
Каждый символ кириллицы кодируется с помощью двух байт в Юникоде (UTF-8), записанных в шестнадцатеричном коде и разделенных знаком процента «%».
Например, URL адрес:
http://my.ru/путь_к_файлу
кодируется в URL как:
http://my.ru/%EF%F3%F2%FC_%EA_%F4%E0%E9%EB%F3%2F
Относительный/абсолютный URL
Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.
<a href="http://my.ru/dir/file.html">Текст ссылки</a>
При указании в качестве ссылки каталога сайта (например, http://my.ru/dir/), отображается индексный файл. Это файл, который загружается по умолчанию при обращении к каталогу без явного указания имени файла. Обычно в качестве индексного файла выступает документ с именем index.html.
Обычно применяются для указания документа на другом сетевом ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта.
При создании относительных ссылок надо понимать, какое значение для атрибута href следует указывать, поскольку оно зависит от исходного расположения файлов.
<a href="Ссылаемый документ.html">Ссылка</a> <a href="../Ссылаемый документ.html">Ссылка</a> <a href="../../Ссылаемый документ.html">Ссылка</a>
<a href="Папка/Ссылаемый документ.html">Ссылка</a>
<a href="/Папка/Ссылаемый документ.html">Ссылка</a>
Якорь
С помощью таких гиперссылок и созданных заранее Html якорей (anchor) читатель сможет сразу перейти к тому месту на web странице, где находится интересная ему информация
<h2 id="якорь_метка"> Текст заголовка </h2>
<a href="#якорь_метка"> текст ссылки на место web страницы, помеченной Html якорем </a>
При переходе по такой гиперссылке (хеш ссылке), открытия нового web документа не произойдет. Браузер прокрутит web страницу до такого положения, чтобы место в тексте куда вы вставили Html якорь (anchor), заняло позицию в самом верху экрана. Значения всех меток (якорей) на одной web странице должно быть уникальным,
Служебные гиперссылки
Служебные гиперссылки не будут видны на странице, т.к. они прописываются в области Head Html кода, содержимое которой на странице не отображается.
Служебные гиперссылки создаются не с помощью тега «A» (как обычные ссылки), а с помощью тега «Link». Задач, выполняемых служебными гиперссылками, довольно много, например, с помощью них к Html документу подключаются внешние файлы с таблицами каскадных стилей CSS или, например, подключается иконка Favicon
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="alternate" type="application/rss+xml"
title="RSS канал" href="http://my.ru/rss.xml"> <link rel="shortcut icon" href="http://my.ru/favicon.ico">
Мультиклассы CSS
К любому тегу можно одновременно добавить несколько классов, перечисляя их в значении атрибута class через пробел, такая форма называется мультиклассы. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса.
Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берется значение у класса, который описан в коде ниже.
<style type="text/css">
.level1 { font-size: 1em; }
.level2 { font-size: 1.2em; }
.level3 { font-size: 1.4em; }
.level4 { font-size: 1.6em; } A.tag {
color: #468be1; /* Цвет ссылок */
}
</style>
<a href="/term/11" class="tag level4">палитра</a> <a href="/term/43" class="tag level3">слои</a> <a href="/term/97" class="tag level2">свет</a>
<a href="/term/44" class="tag level2">панели</a> <a href="/term/16" class="tag level1">линия</a>
<a href="/term/33" class="tag level1">прямоугольник</a> <a href="/term/14" class="tag level1">пиксел</a>
<a href="/term/27" class="tag level1">градиент</a>