ЛЕКЦИЯ
Тема: «Основные понятия Web-технологий. Теги
в HTML»
План лекции.
1. Основные понятия Web-технологий.
4. Кодировка.
5.2. Заголовки.
5.3. Разделители текста.
5.4. Теги для форматирования текста.
5.5. Теги для ввода «компьютерного» текста
5.6. Выравнивание элементов в HTML.
5.7. Списки.
5.9. Ссылки в HTML.
5.10. Внутренние ссылки.
5.11. Как сделать изображение на ссылку?
5.12. Как сделать ссылку на телефонный номер, скайп или адрес электронной почты?
6. Отображение специальных символов.
1. Основные понятия Web-технологий
WWW или «Всемирная паутина» - это сеть документов, связанных между собой
гиперссылками.
Гипертекст – это документ,
который наряду с обычной текстовой и графической информацией содержит ссылки на другие документы, причем эти ссылки встроены в текстовые фрагменты
или в графические объекты данного документа.
Гиперссылка – это некоторое ключевое слово или объект в
документе, с которым связан указатель для перехода на другую страницу в
паутине; изображение гиперссылки выделяется цветом и подчеркиванием.
Web-сайт – это
совокупность взаимосвязанных страниц, принадлежащих какому-то человеку или
организации;
- организуется на Web-сервере провайдера сетевых услуг;
- имеет главную страницу, являющуюся титульным листом
сайта (представляет владельца сайта и содержит гиперссылки на разные его
разделы).
Web-страницы –
это документы «Всемирной паутины», которые имеют собственные адреса и содержат
текстовую и графическую информацию, а также ссылки на другие документы
Интернета;
- страницы форматируются с помощью специального гипертекстового
языка описания документов HTML (Hypertext Markup Language), имеют расширение .HTM или .HTML.
HTML –
это язык разметки данных.
Базовым структурным элементом Web-документа является тег, или дескриптор, или
контейнер.
Дескрипторы
(теги) в HTML – это
специальные элементы разметки, которые определяют, как данный HTML-документ должен интерпретироваться программой
просмотра информации – браузером.
Или
Тэги – инструкции браузеру, указывающие способ отображения
текста.
Для создания Web-страниц
служат простейшие текстовые редакторы.
Технология HTML
состоит в том, что в обычный текстовый документ вставляют управляющие символы
(тэги) и в результате получают Web-страницу.
W3C (World
Wide Web Consortium/ Консорциум Всемирной паутины) – это организация,
которая занимается внедрением новых технологий в WEB и их стандартизацией. Основная
цель создания WEB стандартов — возможность взаимодействия различных
программных продуктов. Соответственно это разработка программных продуктов в
соответствии со стандартами и в итоге качественный IT продукт.
Стандарт это соответствие текущим правилам разработки
на определенном языке. Например, вы разрабатываете ресурс на HTML, который
имеет стандарт, включающий в себя определенные теги и исключающий старые менее
эффективные теги прошлых его стандартов/версий. Если ваш ресурс использует теги
в соответствии с текущими стандартами, то он считается ресурсом с валидным
кодом, но если вы использовали старые теги, которые уже не входят в состав
нового стандарта, то ваш продукт имеет не валидный код. Но это не значит, что
теги не будут работать. Стандарты проверяются специальными
программами/сервисами, которые называются валидаторы.
HTML в 1990 году изобрел ученый Тим Бёрнсом-Ли. Данный код предназначался тогда для обмена
документами и научными исследованиями между учеными разных университетов. К тому же, стало возможным применять
«гипертекст» в документах – ссылаться на какие-то другие страницы в Internet
для обмена опытом.
Проект стал
иметь гораздо больший успех, чем изначально предполагал Бёрнс-Ли. Именно этим своим изобретением он заложил
основу всем нам известной сети Интернет.
Версии языка
HTML 1.0 официальной спецификации не имеет. С момента
появления и вплоть до 1995 года распространялось большое количество
неофициальных версий HTML. Таким образом, чтобы стандартная версия имела
отличия от них, ей был дан номер два. HTML версии 2.0 был утвержден как
стандарт, что произошло 22.09.95.
HTML 3.2. Эта версия появилась 14.01.97. Необходимо отметить,
что версия HTML 3.1 пользователям официально нигде предложена не была. А версия
3.0 была пробной.
Следующей официальной версией стал HTML 4.0, датой выхода которого считают
18.12.97. Все устаревшие элементы в ней были зачищены. Значительным образом был
изменен код в HTML 4.1.
В данный момент в разработке находится HTML 5. Необходимо отметить, что
черновой вариант данной версии был представлен 20 ноября 2007. Конец разработки
запланирован на 2014 год. HTML 5.1 начал
разрабатываться примерно 19 декабря 2012 года.
Написание кода в HTML достаточно свободное. Но из-за этой свободы возникает большое
количество противоречий для браузеров. Ведь им нужно как-то отображать
"вольный" код, и желательно, чтобы каждый браузер отобразил этот код
одинаково. И тут им на помощь приходит DOCTYPE.
DOCTYPE - это объявление типа документа, другими
словами, DOCTYPE означает, какую версию HTML (либо XHTML) Вы используете. HTML развивается
уже давно, и много тегов было раньше, потом они устаревали, появлялись новые. И
очень важно дать понять браузеру, какую версию HTML Вы используете или, другими словами,
какой набор тегов у Вас имеется, и, главное, как его надо отображать.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Данный DOCTYPE означает, что документ соответствует
стандарту HTML 4.01.
Язык HTML следует правилам, которые содержатся в файле
объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ,
определяющий, какие теги, атрибуты и их значения действительны для конкретного
типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает
за корректное отображение веб-страницы браузером. DOCTYPE определяет не только
версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
Для HTML5 DOCTYPE записывается проще:
<!DOCTYPE HTML>
Любая HTML-страница имеет такую структуру:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Заголовок документа
</TITLE>
<META
http-equiv="Content-type" content="text/html;
charset=windows-1251">
</HEAD>
<BODY>
Тело документа
</BODY>
</HTML>
Давайте рассмотрим, что записано.
<html>, <head>, <body> - это открывающие теги.
</html>, </head>, </body> - закрывающие теги.
Теги бывают парные
и одиночные. Парные теги - это теги,
которые нуждаются в закрытии.
Одиночные теги - это
теги, которые не требуют наличие закрывающего тега.
Назначения
данных тегов:
Тег <html> означает начало HTML-документа.
Тег <head> означает начало заголовка
HTML-документа. Сюда могут входить, например, заголовок страницы, различные
мета-теги. Этот тег необязательно заполнять каким-либо текстом.
Тег </head> означает конец заголовка HTML-документа.
Тег <body> означает начало самого документа. То
есть всё (текст, картинки, ссылки и т. д.), что Вы видите на страницах в
Интернете - всё расположено в теге <body>.
Тег </body> означает конец содержимого
документа.
Тег </html> означает конец HTML-страницы.
Тег <title> определяет заголовок страницы,
который будет отображён в заголовке окна
браузера.
Тег </title> сообщает, что здесь заголовок
заканчивается.
Что касается тега <meta>,
то здесь сначала необходимо поговорить об атрибутах
этого тега.
У тегов могут быть различные атрибуты, определяющие,
например, вид их содержимого. Теги с атрибутами записываются в виде:
<тег
атрибут=”значение”
атрибут=”значение”
…>текст</тег>
Здесь атрибут=”значение”
– задание конкретных значений параметрам (атрибутам) тега. Не является
обязательным.
Текст – текст, который выводится на экран в виде,
обусловленном тегом и его атрибутами.
Значения атрибутов принято брать в кавычки, но
большинство браузеров понимают запись и без них. Исключения составляют
значения, у которых присутствует пробел, - тогда такой атрибут обязательно
берут в кавычки.
Тег
<meta> (в данном случае)
служит для определения языка, на котором написана страница. Атрибут http-equiv и его значение Content-type определяет, что сейчас
будет описан тип документа. Атрибут content
и его значение text/html; charset =
windows-1251 сообщают браузеру, что данный документ является HTML-документом (text/html), и кодировка
этого документа кириллица (windows-1251).
3.2. Созданную Web-страницу
необходимо сохранить в виде файла, имеющего расширение .htm или .html. Принято
сохранять титульный лист сайта, т.е. тот, который первый загружается в браузер,
под именем index.html.
3.3. Рекомендуется создать для размещения сайта
специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
3.4. Необходимо различать имя файла index.html (т.е. имя
под которым Web-страница хранится в файловой
системе) и собственно имя Web-страницы,
которое высвечивается в верхней строке окна браузера (в заголовке) и в первую
очередь анализируется поисковыми системами.
Понятно, что
кириллица - это "windows-1251", а Unicode - это "UTF-8".
Кодировка - это таблица, в которой описывается соответствие определённого
символа и числа. То есть любой символ, который мы видим или вводим, для
компьютера в реальности - всего лишь набор битов (набор нулей и единиц). Именно
эти биты и перегоняются от устройства к устройству. А чтобы показать результат
этих перегонок человеку, компьютер преобразует с помощью таблицы (той самой
кодировки) код символа в соответствующий внешний вид.
Кодировка UTF-8 - самая популярная во всём мире. Она
объединяет все кодировки в одну и является самой универсальной кодировкой.
Кодировок
большое количество, и задача Web-мастера состоит в правильном выборе кодировки
и указания её напрямую.
Если Вы точно знаете, что на разрабатываемом вами
сайте будет не только русский и латинский алфавит, то используйте UTF-8.
Если речь идет о содержимом страницы - значит, код
пишется внутри тега <body>.
background – фоновое
изображение страницы
Пример, <body background=”image/fon.jpeg”> (фоном
документа станет картинка fon.jpeg из папки image).
bgcolor - цвет фона
HTML-документа. Можно символьные или шестнадцатеричные значения.
Шестнадцатеричные значения задаются в формате #RRGGBB – соответственно красный, зеленый и синий цвет модели
RGB.
Пример:
<body bgcolor=”LightYellow”>
или
<body bgcolor =” #FFFFE0”> (документу задан светло-желтый цвет)
text - цвет шрифта
документа
Пример:
<body text=”Green”> (в
документе весь текст будет напечатан зеленым цветом)
LINK, VLINK, ALINK задают
цвет гиперссылок в документе, соответственно для ссылок, которые встречаются в тексте, уже посещенных и активных в
данный момент (в момент щелчка мышкой). По умолчанию эти цвета равны LINK=blue, VLINK=purple, ALINK=red.
Пример:
<body link = "green" vlink = "red" alink = "blue">
Заголовки являются важными элементами веб-страницы,
они упорядочивают текст, формируя его визуальную структуру.
Теги <h1>...<h6> должны использоваться только для
выделения заголовков нового раздела или подраздела. При использовании заголовков
необходимо учитывать их иерархию, т.е. за <h1> должен
следовать <h2> и т.д. Также не допускается вложение других
тегов в теги <h1>...<h6>.
Тег
<h1>. Заголовок самого верхнего
уровня, на странице рекомендуется использовать только один раз, по возможности
частично дублируя заглавие страницы. Тег <h1>должен быть уникальным
для каждой страницы сайта. Рекомендуется прописывать тег в начале статьи,
используя ключевое слово в тексте заголовка. Размер шрифта в браузере
равен 2em, верхний и нижний отступ по умолчанию 0.67em.
Примечание.
1em – текущий размер шрифта.
Можно брать любые пропорции от текущего
шрифта: 2em, 0.5em и т.п.
Размеры в em – относительные, они
определяются по текущему контексту.
Тег <h2. Им обозначаются подзаголовки тега <h1>. Размер
шрифта в браузере равен 1.5em, верхний и нижний отступ по
умолчанию 0.83em.
Тег
<h3>. Показывает подзаголовки
тега <h2>. Размер шрифта в браузере равен 1.17em, верхний и
нижний отступ по умолчанию 1em.
Теги
<h4>, <h5>, <h6>. Обозначают
подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере
равен 1em / 0.83em / 0.67em, верхний и нижний отступ
по умолчанию 1.33em / 1.67em / 2.33em соответственно.
|
внутренний заголовок документа |
<H1>… </H1> <H2>… </H2> - - - - - - - - - - <H6>… </H6> |
заголовок первого уровня заголовок второго уровня - - - - - - - - - - - - - - - - - - - - заголовок шестого уровня |
|
заголовок с выравниванием |
<H?
ALIGN=”LEFT”>… </H?> <H?
ALIGN=”CENTER”>… </H?> <H?
ALIGN=”RIGHT”>…</H?> |
выравнивание заголовка по левому краю выравнивание заголовка по центру выравнивание заголовка по правому краю |
|
цвет шрифта заголовка |
<H?><FONT
COLOR="#FF0000"> </FONT>…</H?> |
шрифт заголовка - красного цвета |
Пример:
…
<BODY>
<H1>Заголовок 1</H1>
<H2>Заголовок 2</H2>
<H3>Заголовок 3</H3>
<H4>Заголовок 4</H4>
<H5>Заголовок 5</H5>
<H6>Заголовок 6</H6>
</BODY>
…
Результат отображения в браузере:
|
горизонтальный разделитель |
<HR> |
тэг
создает линию, идущую через весь экран |
|
выравнивание разделительной
линии |
<HR ALIGN=”LEFT”> <HR ALIGN=”CENTER”> <HR ALIGN=”RIGHT”> |
по
левому краю по
центру по
правому краю |
|
толщина линии |
<HR SIZE=”7”> |
линия
имеет толщину 7 пикселей |
|
длина линии |
<HR WIDTH=”50%”> |
длина
линии составляет 50% от ширины страницы |
|
цвет линии |
<HR COLOR="#FFD800"> |
золотой
цвет линии |
|
перевод строки |
<BR> |
текст
после этого тэга начнется с новой строки |
|
абзац |
<P>… </P> |
абзацы
разделяются пустыми строками и не начинаются с красной строки |
|
абзац с выравниванием |
<P ALIGN=”LEFT”>… </P> <P ALIGN=”CENTER”>… </P> <P ALIGN=”RIGHT”>… </P> |
выравнивание
абзаца по правому краю выравнивание
абзаца по центру выравнивание
абзаца по правому краю |
5.4. Теги для
форматирования текста
В HTML имеются различные теги, позволяющие задать
определённый внешний вид текста:
<I>Текст
курсивом</I>
<EM>Текст
курсивом</EM >
<B>Жирное
начертание</B>
<STRONG>Жирное
начертание</STRONG>
<U>Подчёркнутый
текст</U>
Тег <SMALL> уменьшает
размер шрифта на единицу по отношению к обычному тексту.
Чтобы сделать текст, например, курсивным и жирным,
пишут так:
<i><b>Жирный курсивный
текст</b></i>
Замечание. Соблюдайте принцип вложенности (пока не закрыт внутренний тег - внешний не закрывается). НЕЛЬЗЯ писать так:
<i><b>Жирный курсивный текст</i></b>
Для задания верхнего
индекса используют тег: <SUB>…</SUB>
Для нижнего
индекса: <SUP>…</SUP>
Размер
шрифта
Изменить размер, цвет, гарнитуру текста можно с
помощью тега <font>…</font>.
Тег имеет три атрибута: size (размер), color (цвет), face (гарнитура).
Пример
<font size =
"5" color=”red” face=”Arial”>Текст </font>
Размер шрифта может принимать значения от 1 до 7 (1 – мелкий, … 7 - крупный). По умолчанию
используется размер шрифта 3.
5.5. Теги для
ввода «компьютерного» текста
Тег
<code>
Служит для выделения фрагментов программного кода.
Отображается моноширинным шрифтом.
Тег
<kbd>
Отмечает фрагмент как вводимый пользователем с
клавиатуры. Отображается моноширинным шрифтом.
Тег
<samp>
Применяется для выделения результата, полученного в
ходе выполнения программы. Отображается моноширинным шрифтом.
Тег
<var>
Выделяет имена переменных, отображая курсивом.
Тег
<pre>
Язык HTML не является
чувствительным к переносам строк и пробелам. Любое количество пробелов браузер
отобразит как один пробел. Для сохранения форматирования текста используют тег <PRE>…</PRE>. Текст,
помещенный между этими тегами, будет иметь такой же вид, что и в оригинале.
Пример:
<html>
<head>
<title>Использование тега PRE</title>
</head>
<body>
<PRE>
Этот текст сохранит форматирование.
Можно делать
отступы
табуляцией
или
пропускать строки
а также использовать много пробелов.
</PRE>
</body>
</html>
Результат отображения в браузере будет таким:
А если тег
<PRE> не
использовать:
…
<body>
Этот текст не сохранит форматирование.
Отступы
табуляцией
и
пробелы не сохранятся
также
как и пропущенные строки.
</body>
…
То в браузере получим результат:
5.6.
Выравнивание элементов в HTML
В HTML браузер по умолчанию выравнивает элементы по левому
краю.
Для выравнивания элементов HTML
используют контейнеры, которые
создаются с помощью тега <div>. Тег имеет атрибут "align"
со значениями: "left", "center", "right".
Пример:
<div
align = "right">
<h1>Заголовок 1-го уровня, выровненный по правому краю</h1>
</div>
В HTML-документах
можно задавать три вида списков: нумерованные, ненумерованные (маркированные) и
словарь терминов.
Нумерованный список начинается с тега <ol>
и заканчивается тегом </ol>. Элементы списка добавляются
с помощью тега <li>.
Пример:
<ol>
<li>Первый элемент
<li>Второй элемент
</ol>
Под
элементом списка может подразумеваться не только элемент в виде текста, но и
ссылка, изображение.
Тег <ol>
может иметь атрибуты:
<ol type=A | a | I | i |1 start=n> (для всего списка)
<li
type=A | a | I | i | 1> (этот и следующие)
Атрибут type задает вид нумерации:
A – большие латинские буквы (A, B, C, …)
a – маленькие латинские буквы (a, b, c, …)
I – большие римские цифры (I, II, III, …)
i – маленькие римские цифры (i, ii, iii, …)
1 – обычные цифры (1, 2, 3, …)
start=n – число, с
которого начинается отчет.
Ненумерованный список начинается с тега <ul> и
заканчивается закрывающимся тегом </ul>. Элементы списка добавляются
с помощью тега <li>.
Например:
<ul>
<li>Первый
элемент
<li>Второй элемент
</ul>
Для задания внешнего вида метки (маркера)
ненумерованного списка используют атрибут type:
<ul type=disc | circle | square> (для всего списка)
<li type= disc | circle | square> (этот и следующие).
disc (по
умолчанию) – закрашенный круг,
circle – пустой
круг
square – квадрат.
Пример:
<ul type=circle>
<li>Первый элемент
<li>Второй элемент
</ul>
|
вставка изображения |
<IMG SRC=”фотография.jpg”> |
в
документ вставлен графический файл
”фотография.jpg” |
|
выравнивание текста около
изображения |
<IMG SRC=”*” ALIGN=”LEFT”> |
рисунок
расположен слева, а текст справа |
|
<IMG SRC=”*” ALIGN=”TOP”> |
выравнивание
текста по верхней границе рисунка |
|
|
<IMG SRC=”*” ALIGN=”BOTTOM”> |
выравнивание
текста по нижней границе рисунка |
|
|
<IMG SRC=”*” ALIGN=”RIGHT”> |
рисунок
расположен справа, а текст слева |
|
|
<IMG SRC=”*” ALIGN=”MIDDLE”> |
выравнивание
текста по центру рисунка |
|
|
ширина картинки |
<IMG SRC=”*” WIDTH=”400”> |
ширина
картинки 400 пикселей |
|
высота картинки |
<IMG SRC=”*” HEIGT=”300”> |
высота
картинки 300 пикселей |
|
расстояние от текста до
рис. по горизонтали |
<IMG SRC=”*” HSPACE=”30”> |
расстояние
от текста до рисунка по горизонтали 30 пикселей |
|
расстояние от текста до
рис. по вертикали |
<IMG SRC=”*” VSPACE=”20”> |
расстояние
от текста до рисунка по вертикали 20 пикселей |
|
рамка вокруг картинки |
<IMG SRC=”*” BORDER=”3”> |
вокруг
картинки рамка толщиной 3 пикселя |
|
всплывающая подсказка к
рис. |
<IMG SRC=”*” ALT=”фото моего лучшего друга ”> |
при
наведении указателя мыши на картинку всплывает подсказка ”фото моего лучшего друга ” |
Пример. Напишем в теге <body> такой код:
<img src = "flower1.gif" alt = "Картинка" width =
"100" height =
"100">
Тег <img> означает, что мы хотим добавить здесь
изображение. Этот тег является одиночным, то есть у него нет закрывающего тега.
Атрибуты тега очень простые.
Атрибут "src"
указывает путь к картинке.
Атрибут "alt"
указывает текст, который описывает картинку. Этот же текст будет показываться в
случае, если картинка по каким-либо причинам будет не найдена.
Атрибуты "width" и "height" указывают ширину и высоту картинки
соответственно. Если их не указывать, то картинка будет иметь такой размер,
какой имеет исходное изображение.
Если картинки будут находиться в отдельной папке,
например images, то в атрибуте "src"
необходимо писать значение "images/имя картинки".
(Например, src = "images/flower1.gif").
Форматы графических файлов
Формат JPEG (Joint Photographic
Experts Group). Изображения JPEG
идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают
изображения лучше GIF, но текст и большие площади со сплошным цветом могут
покрыться пятнами.
Формат GIF (Graphics Interchange
Format). Идеален для сжатия изображений,
в которых есть области со сплошным цветом, например, логотипов. GIF-файлы
позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы
может проявляться через часть изображения. Также GIF-файлы могут включать в
себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за
чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.
Формат PNG (Portable Network
Graphics). Включает в себя лучшие
черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один
из цветов прозрачным, при этом сжимает изображения в меньший размер, чем
GIF-файл.
Формат APNG (Animated Portable
Network Graphics). Формат
изображения, основанный на формате PNG. Позволяет хранить анимацию, а также
поддерживает прозрачность.
Формат SVG (Scalable
Vector Graphics). SVG-рисунок состоит из набора геометрических фигур,
описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как
статичная, так и анимированная графика. Набор функций включает в себя различные
преобразования, альфа-маски, эффекты фильтров, возможность использования
шаблонов. Изображения в формате SVG могут изменяться в размере без снижения
качества.
Формат BMP (Bitmap
Picture). Представляет собой несжатое (оригинальное) растровое изображение,
шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из
заголовка, палитры и графических данных. В заголовке хранится информация о
графическом изображении и файле (глубина пикселей, высота, ширина и количество
цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат
палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов.
Графические данные представляют саму картинку. Глубина цвета в данном формате
может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.
Формат ICO (Windows
icon). Формат хранения значков файлов в Microsoft Windows. Также, Windows
icon, используется как иконка на сайтах в интернете. Именно картинка такого
формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл
содержит один или несколько значков, размер и цветность каждого из которых
задаётся отдельно. Размер значка может быть любым, но наиболее употребимы
квадратные значки со сторонами 16, 32 и 48 пикселей.
Гипертекстовая
ссылка (гиперсвязь) – это указатель
на определенное место в текущем или другом документе, или во внешнем
графическом, видео- или аудиофайле.
Для внедрения гиперссылок используют общий синтаксис:
<A
HREF="адрес ресурса" >текст_ссылки-маршрутизатор</A>
Здесь адрес ресурса
– имя текущего документа, путь к другому файлу или Интернет-адрес ресурса, с
которым устанавливается связь - для пользователя не виден.
Текст_ссылки-маршрутизатор
(указатель) – текст или другой
объект, при нажатии на который выполняется переход по адресу ресурса – видимый
для пользователя.
Рассмотрим использование ссылок на примере. Для этого
напишем в теге <body> следующий код:
<a target =
"_self" href =
"str_1.html" title = "Ссылка"> Узнать более подробно…</a>
Атрибут targeT может
принимать три значения: "_self",
"_new", "_blank".
Значение "_self" означает, что страница
откроется в этой же вкладке.
Значение "_new" означает, что страница
откроется в новом окне (некоторые браузеры открывают не новое окно, а создают
новую вкладку в браузере).
Значение "_blank" означает, что страница
будет открыта на новой вкладке.
Атрибут title задаёт текст, который будет
виден при наведении мышки на ссылку.
Атрибут href означает путь к странице. Что
касается формы записи, то здесь бывают абсолютные
и относительные пути (ссылки).
Абсолютные ссылки содержат всю информацию, необходимую браузеру для нахождения
файла.
Абсолютный путь содержит следующие компоненты:
1) протокол (например, http)
2) домен (доменное имя или IP-адрес компьютера)
3) папка (имя папки, указывающей путь к файлу)
4) файл (имя файла)
http://www.site.ru/папка/file.html
Если файл находится в корневой папке, то путь к файлу
будет отсутствовать: Если файл находится в корневой папке, то путь к файлу
будет отсутствовать:
http://www.site.ru/file.html
Относительный
путь указывает путь относительно
каталога, в котором находится текущий файл. Например, наш файл
"index.html" лежит в корне сервера, и мы делаем такую запись: href="images/img1.gif'". Это
означает то же самое, что и если бы мы написали: "http:// www.site.ru/images/img1.gif".
Когда браузер не находит в ссылке
протокол http://, он выполняет поиск указанного документа на том же
сервере.
Относительный путь содержит следующие компоненты:
1) папка (имя папки, указывающей путь к файлу)
2) файл (имя файла)
Путь для относительных ссылок имеет три специальных
обозначения:
/ указывает на корневую директорию и говорит о
том, что нужно начать путь от корневого каталога документов и идти вниз до следующей
папки
./ указывает на текущую папку
../ подняться на одну папку (директорию) выше
Главное отличие относительного пути от абсолютного в
том, что относительный путь не содержит имени корневой папки и родительских
папок, что делает адрес короче, и в случае переезда с одного домена на другой
не нужно прописывать новый абсолютный адрес. Но если сторонний ресурс будет
ссылаться, например, на ваши изображения с относительными адресами, то они не
будут отображаться на другом сайте.
Якоря, или внутренние ссылки, создают переходы на
различные разделы текущей веб-страницы, позволяя быстро перемещаться между
разделами. Это оказывается очень удобным в случае, когда на странице слишком
много текста. Внутренние ссылки также создаются при помощи тега <a> с разницей в том, что
атрибут href содержит имя
указателя — так называемый якорь, а не URl-адрес. Перед именем указателя
всегда ставится знак #.
Ссылка на
другое место внутри одного документа осуществляется
так:
<A
HREF="#метка">маршрутизатор</A>
<A
NAME="метка"></A>
… (в это место будет осуществлен переход)
В качестве метки
можно использовать любые цифры и символы латиницы, кроме специальных.
Следующая разметка создаст оглавление с быстрыми
переходами на соответствующие разделы:
<h1>Времена года</h1>
<h2>Оглавление</h2>
<a
href="#p1">Лето</a> <!--создаём якорь-->
<a
href="#p2">Осень</a>
<a
href="#p3">Зима</a>
<a
href="#p4">Весна</a>
<a name="p1">
<p>...</p> </a>
<!—переход на соответствующий раздел-->
<a
name="p2"> <p>...</p> </a>
<a
name="p3"> <p>...</p> </a>
<a name="p4"> <p>...</p>
</a>
5.11. Как
сделать изображение-ссылку?
Чтобы сделать кликабельное изображение, необходимо
поместить элемент <img>внутрь тега <a>. Чтобы ссылка
открывалась в другом окне, нужно добавить атрибут target="_blank" для
ссылки.
<a
href="http://www.site.ru/page.html"
target="_blank"><img src="img/image1.jpg">
</a>
5.12. Как
сделать ссылку на телефонный номер,
скайп или адрес электронной почты
У ссылок появились новые возможности — по клику можно
не только переходить на другие страницы и скачивать файлы, но и совершать
звонки на телефоны, отправлять сообщения или звонить по скайпу.
ссылка на телефонный номер
<a
href="tel:+74951234567">+7 (495) 123-45-67</a>
ссылка на адрес электронной почты
<a
href="mailto:example@mail.ru">example@mail.ru</a>
ссылка на скайп (позвонить)
<a
href="skype:имя-пользователя?call">Skype</a>
ссылка на скайп (открыть чат)
<a href="skype:имя-пользователя?chat">Skype</a>
ссылка на скайп (добавить в список контактов)
<a href="skype:имя-пользователя?add">Skype</a>
ссылка на скайп (отправить файл)
<a href="skype:имя-пользователя?sendfile">Skype</a>
6.
Отображение специальных символов
Иногда возникают проблемы при отображении некоторых
символов. Такие символы, как &, <, >, =, ",
пробел, используются при написании
тегов. Чтобы эти символы были отображены на Web-странице, их заменяют специальными тегами. Теги должны быть в нижнем регистре.
|
Имя |
Вид |
Описание |
|
|
|
неразрывный
пробел |
|
£ |
£ |
фунт стерлингов |
|
€ |
€ |
знак евро |
|
¶ |
¶ |
символ
параграфа |
|
§ |
§ |
параграф |
|
© |
© |
знак copyright |
|
® |
® |
знак
зарегистрированной торговой марки |
|
™ |
™ |
знак торговой
марки |
|
° |
° |
градус |
|
± |
± |
плюс-минус |
|
¼ |
¼ |
дробь - одна
четверть |
|
½ |
½ |
дробь - одна
вторая |
|
¾ |
¾ |
дробь - три
четверти |
|
× |
× |
знак умножения |
|
÷ |
÷ |
знак деления |
|
ƒ |
ƒ |
знак функции |
|
Α |
Α |
греческая
заглавная буква альфа |
|
Β |
Β |
греческая
заглавная буква бета |
|
Γ |
Γ |
греческая
заглавная буква гамма |
|
Δ |
Δ |
греческая
заглавная буква дельта |
|
Ε |
Ε |
греческая
заглавная буква эпсилон |
|
Ζ |
Ζ |
греческая
заглавная буква дзета |
|
Η |
Η |
греческая
заглавная буква эта |
|
Θ |
Θ |
греческая
заглавная буква тета |
|
Ι |
Ι |
греческая
заглавная буква иота |
|
Κ |
Κ |
греческая
заглавная буква каппа |
|
Λ |
Λ |
греческая
заглавная буква лямбда |
|
Μ |
Μ |
греческая
заглавная буква мю |
|
Ν |
Ν |
греческая
заглавная буква ню |
|
Ξ |
Ξ |
греческая
заглавная буква кси |
|
Ο |
Ο |
греческая
заглавная буква омикрон |
|
Π |
Π |
греческая
заглавная буква пи |
|
Ρ |
Ρ |
греческая
заглавная буква ро |
|
Σ |
Σ |
греческая
заглавная буква сигма |
|
Τ |
Τ |
греческая
заглавная буква тау |
|
Υ |
Υ |
греческая
заглавная буква ипсилон |
|
Φ |
Φ |
греческая
заглавная буква фи |
|
Χ |
Χ |
греческая заглавная
буква хи |
|
Ψ |
Ψ |
греческая
заглавная буква пси |
|
Ω |
Ω |
греческая
заглавная буква омега |
|
α |
α |
греческая
строчная буква альфа |
|
β |
β |
греческая
строчная буква бета |
|
γ |
γ |
греческая
строчная буква гамма |
|
δ |
δ |
греческая
строчная буква дельта |
|
ε |
ε |
греческая
строчная буква эпсилон |
|
ζ |
ζ |
греческая
строчная буква дзета |
|
η |
η |
греческая
строчная буква эта |
|
θ |
θ |
греческая
строчная буква тета |
|
ι |
ι |
греческая
строчная буква иота |
|
κ |
κ |
греческая строчная
буква каппа |
|
λ |
λ |
греческая
строчная буква лямбда |
|
μ |
μ |
греческая
строчная буква мю |
|
ν |
ν |
греческая
строчная буква ню |
|
ξ |
ξ |
греческая
строчная буква кси |
|
ο |
ο |
греческая
строчная буква омикрон |
|
π |
π |
греческая
строчная буква пи |
|
ρ |
ρ |
греческая
строчная буква ро |
|
ς |
ς |
греческая
строчная буква сигма |
|
σ |
σ |
греческая
строчная буква сигма |
|
τ |
τ |
греческая
строчная буква тау |
|
υ |
υ |
греческая
строчная буква ипсилон |
|
φ |
φ |
греческая
строчная буква фи |
|
χ |
χ |
греческая
строчная буква хи |
|
ψ |
ψ |
греческая
строчная буква пси |
|
ω |
ω |
греческая
строчная буква омега |
|
← |
← |
стрелка влево |
|
↑ |
↑ |
стрелка вверх |
|
→ |
→ |
стрелка вправо |
|
↓ |
↓ |
стрелка вниз |
|
↔ |
↔ |
стрелка
влево-вправо |
|
♠ |
♠ |
знак масти
"пики" |
|
♣ |
♣ |
знак масти
"трефы" |
|
♥ |
♥ |
знак масти
"червы" |
|
♦ |
♦ |
знак масти
"бубны" |
|
" |
" |
двойная кавычка |
|
& |
& |
амперсанд |
|
< |
< |
знак
"меньше" |
|
> |
> |
знак
"больше" |
|
… |
… |
многоточие ... |
|
′ |
′ |
одиночный штрих
- минуты и футы |
|
″ |
″ |
двойной штрих -
секунды и дюймы |
|
– |
– |
тире |
|
— |
— |
длинное тире |
|
‘ |
‘ |
левая одиночная
кавычка |
|
’ |
’ |
правая
одиночная кавычка |
|
‚ |
‚ |
нижняя
одиночная кавычка |
|
“ |
“ |
левая двойная
кавычка |
|
” |
” |
правая двойная
кавычка |
|
„ |
„ |
нижняя двойная
кавычка |
|
« |
« |
левая двойная
угловая скобка |
|
» |
» |
правая двойная
угловая скобка |
|
000000 |
333333 |
666666 |
999999 |
CCCCCC |
FFFFFF |
|
000033 |
333300 |
666600 |
999900 |
CCCC00 |
FFFF00 |
|
000066 |
333366 |
666633 |
999933 |
CCCC33 |
FFFF33 |
|
000099 |
333399 |
666699 |
999966 |
CCCC66 |
FFFF66 |
|
0000CC |
3333CC |
6666CC |
9999CC |
CCCC99 |
FFFF99 |
|
0000FF |
3333FF |
6666FF |
9999FF |
CCCCFF |
FFFFCC |
|
003300 |
336633 |
669966 |
99CC99 |
CCFFCC |
FF00FF |
|
006600 |
339933 |
66CC66 |
99FF99 |
CC00CC |
FF33FF |
|
009900 |
33CC33 |
66FF66 |
990099 |
CC33CC |
FF66FF |
|
00CC00 |
33FF33 |
660066 |
993399 |
CC66CC |
FF99FF |
|
00FF00 |
330033 |
663366 |
996699 |
CC99CC |
FFCCFF |
|
00FF33 |
330066 |
663399 |
9966CC |
CC99FF |
FFCC00 |
|
00FF66 |
330099 |
6633CC |
9966FF |
CC9900 |
FFCC33 |
|
00FF99 |
3300CC |
6633FF |
996600 |
CC9933 |
FFCC66 |
|
00FFCC |
3300FF |
663300 |
996633 |
CC9966 |
FFCC99 |
|
00FFFF |
330000 |
663333 |
996666 |
CC9999 |
FFCCCC |
|
00CCCC |
33FFFF |
660000 |
993333 |
CC6666 |
FF9999 |
|
009999 |
33CCCC |
66FFFF |
990000 |
CC3333 |
FF6666 |
|
006666 |
339999 |
66CCCC |
99FFFF |
CC0000 |
FF3333 |
|
003333 |
336666 |
669999 |
99CCCC |
CCFFFF |
FF0000 |
|
003366 |
336699 |
6699CC |
99CCFF |
CCFF00 |
FF0033 |
|
003399 |
3366CC |
6699FF |
99CC00 |
CCFF33 |
FF0066 |
|
0033CC |
3366FF |
669900 |
99CC33 |
CCFF66 |
FF0099 |
|
0033FF |
336600 |
669933 |
99CC66 |
CCFF99 |
FF00CC |
|
0066FF |
339900 |
66CC33 |
99FF66 |
CC0099 |
FF33CC |
|
0099FF |
33CC00 |
66FF33 |
990066 |
CC3399 |
FF66CC |
|
00CCFF |
33FF00 |
660033 |
993366 |
CC6699 |
FF99CC |
|
00CC33 |
33FF66 |
660099 |
9933CC |
CC66FF |
FF9900 |
|
00CC66 |
33FF99 |
6600CC |
9933FF |
CC6600 |
FF9933 |
|
00CC99 |
33FFCC |
6600FF |
993300 |
CC6633 |
FF9966 |
|
009933 |
33CC66 |
66FF99 |
9900CC |
CC33FF |
FF6600 |
|
006633 |
339966 |
66CC99 |
99FFCC |
CC00FF |
FF3300 |
|
009966 |
33CC99 |
66FFCC |
9900FF |
CC3300 |
FF6633 |
|
0099CC |
33CCFF |
66FF00 |
990033 |
CC3366 |
FF6699 |
|
0066CC |
3399FF |
66CC00 |
99FF33 |
CC0066 |
FF3399 |
|
006699 |
3399CC |
66CCFF |
99FF00 |
CC0033 |
FF3366 |
КОНТРОЛЬНЫЕ ВОПРОСЫ
1. Дайте определение Web-страницы.
2. Что такое HTML?
3. Дайте определение тега.
4. Какова структура HTML-документа?
5. Приведите примеры парных и одиночных тегов.
6. Назовите атрибуты тега <BODY> и опишите их использование и назначение.
7. Как задаются заголовки?
8. Какие теги применяются для форматирования текста?
9. Как задается нумерованный список? Назовите его
атрибуты.
10. Как задается ненумерованный список? Назовите его
атрибут.
11. Как добавить изображение на Web-страницу?
12. Что такое гиперссылка?
13. Какой тег определяет гиперссылку на другой документ
или иной адрес Интернета?
14. Какое отличие у абсолютных и относительных ссылок?
15. Опишите атрибуты тега гиперссылки.
16. Как задается ссылка на место одного документа?
17. Как отображать специальные символы?