Первое знакомство с тэгами
Основным понятием языка
HTML является
"тэг" (англ.: tag - ярлычок, этикетка).
Тэги - это заключенные в угловые скобки "
<,>" последовательности букв, (образованные, как правило, сокращением английских слов).
Код любого
HTML-документа начинается тегом
<html> и завершается тегом
</html>. Пара "открывающий - закрывающий" тэги называется
контейнером.
Каждый документ имеет контейнер
<head>...</head>, содержащий
вспомогательную информацию, и контейнер
<body>...</body>, содержащий
сам текст документа.
Контейнер
<title>...</title>, расположенный в секции
<head>...</head>, содержит текст,
отображаемый в верхней строке окна браузера.
Большинство тэгов предназначено для
форматирования документов:
| Код |
Вид |
| Шампунь для <b>жирных</b> котов |
Шампунь для жирных котов |
| <i>Спагетти, пицца, капуччино </i> |
Спагетти, пицца, капуччино |
| <strike>Вычеркнуть из памяти</strike> |
Вычеркнуть из памяти |
| <u>Я подчеркиваю, что</u> |
Я подчеркиваю, что |
| A<sub>i,j</sub> |
Ai,j |
| A<sup>2</sup> |
A2 |
| <big>БОЛЬШОЙ</big> ТЕАТР |
БОЛЬШОЙ ТЕАТР |
| <small>Маленький</small> Мук |
Маленький Мук |
| <center>ЦЕНТР</center> |
ЦЕНТР |
| неразрывный пробел |
неразрывный пробел |
| перевод<br>строки
|
перевод
строки |
В HTML -документах часто используются
списки:
ненумерованные или
нумерованные.
| Ненумерованный список |
Нумерованный список |
- бананы
- ананасы
- апельсины
- яблоки
|
- тетради
- авторучки
- карандаши
- ластики
|
Элементы
списков выделяются с помощью тега
<li> (list item).
Нумерованный список должен находиться в контейнере
<ol>...</ol> (ordered
list),
ненумерованный список может находиться в контейнере
<ul>...</ul> (unordered list) (наличие контейнера необязательно).
Так, для создания приведенного выше списка фруктов был использован код:
| <li>бананы <li>ананасы <li>апельсины <li>яблоки |
С тем же успехом мы могли использовать код:
| <ul> <li>бананы <li>ананасы <li>апельсины <li>яблоки </ul> |
Заменив контейнер
<ul>...</ul>
на
<ol>...</ol>, мы получили бы список с номерами при каждом
элементе. В частности, вот так выглядит код для списка канцелярских
принадлежностей:
| <ol> <li>тетради <li>авторучки <li>карандаши <li>ластики </ol> |
Атрибуты тэгов
Большинство тэгов имеет
атрибуты, т.е. свойства, которые могут принимать различные
значения. Например, если мы хотим, чтобы текст документа находился на желтом
фоне, нам нужно использовать следующий код:
<html>
<head>
...
</head>
<body bgcolor='yellow'>
Наш документ на желтом фоне
</body>
</html>
|
Посмотрите на
HTML-код и найдите название этого цвета. Нередко документ размещают на фоне некоторого
рисунка. Сам рисунок должен находиться в файле
графического формата (
gif или
jpg), а связь документа с ним обеспечивается атрибутом
background тэга
<body>:
<html>
<head>
...
</head>
<body background='sky.gif'>
Наш документ на фоне неба
</body>
</html>
|
Возможно, у Вас возник вопрос:
"какого размера должен быть фоновый рисунок?"
Дело в том, что если размер рисунка меньше размера окна браузера, то рисунок будет дублироваться по всему окну. Этот принцип лежит в основе создания
текстур для background'а. Эффект "скольжения" достигается за
счет одного атрибута тэга
<body>:
<html>
<head>
...
</head>
<body background='адрес изображения' bgproperties='fixed'>
Наш документ 'скользит' по фоновому рисунку
</body>
</html>
|
Итак, вам уже знакомы:
| Атрибуты тэга <body> |
| background |
адрес фонового изображения |
| bgcolor |
цвет фона |
| bgproperties |
fixed - для достижения эффекта скольжения текста по фону |
Метки и гиперссылки
Гиперссылки составляют самую "соль" любого HTML-документа.
Гиперссылки - это фрагменты (слова, рисунки,
кнопки и т.д.), щелкнув мышью на которых мы попадаем на новый документ или на
новое место в этом же документе.
Гиперссылки создаются с помощью тэга
<a>...</a>(англ.: anchor - якорь).
Гиперссылки имеют два основных атрибута:
href и
name.
Рассмотрим
два типа гиперссылок:
- Переход к другому документу. Например, мы хотим, чтобы, щелкнув
на тексте 'Информация о пакете' мы открыли в нашем окне документ 'About.html'.
<html>
<head>
...
</head>
<body>
текст документа
<a href='About.html'>Информация о пакете</a>
</body>
</html>
|
- Перемещение в пределах документа. Если документ большой, если в нем есть несколько смысловых разделов, желательно предусмотреть возможность перехода по гиперссылкам в пределах документа. Например, обеспечить возможность перехода на начало или конец документа. Для того чтобы мы могли перейти на то или иное место в документе, его нужно предварительно отметить,
бросить туда "якорь". Это делается с помощью того же тэга <a>, но с атрибутом name (a не href). Если Вы посмотрите на HTML-код этого документа, то в самом начале увидите фрагмент:
<body>
<a name="#nachalo">
...
|
Тем самым мы "отметили" начало документа. Визуально наличие этой метки незаметно - просматривая документ в браузере мы не можем узнать о ее существовании. Но предположим, нам нужно иметь возможность перейти на начало документа. Сделаем
следующее:
<html>
<head>
...
</head>
<body>
текст документа
<a href="#nachalo">На начало документа</a>
</body>
</html>
|
Итак, основными атрибутами тэга
<a> являются:
| name |
Имя. Используется, если нужно отметить то или иное место в документе, чтобы потом "приходить" на него |
| href |
(hyper reference)- адрес документа, вызываемого при щелчке на гиперссылке, и/или имя метки для перехода (метка должна быть установлена заранее).
Например,
код <a href='#nachalo'>все заново</a> вызывает перемещение на начало данного документа,
код <a href='Books.html#zakaz'>о заказе</a> вызывает перемещение на соответствующую метку в файле 'Books.html'. |
| target |
Окно, в которое будет загружен указанный документ. Если этот атрибут опущен (или указан как _self), новый документ будет открыт в том же окне, что и текущий. Значение атрибута target="_blank" приведет к открытию нового документа в новом окне.
|
Важно! Говоря о гиперссылках, следует отметить, что адрес документа (значение атрибута "
href" не следует указывать, как
полный физический путь, например, гиперссылка:
<a href="C:\Sum\Kek\Eos\Tests\LIntro.html">Введение в web-технологии</a>,
конечно, сработает на вашем компьютере, но если Вы перенесете Ваш файл на другой компьютер, то при его просмотре активизация гиперссылки приведет к тому, что браузер будет искать файл
LIntro.html в папке
Tests, вложенной в папку
Eos, вложенную в папку
Kek, вложенную в папку
Sum, находящуюся на диске
C. Чтобы гиперссылка сработала на другом компьютере, он должен содержать такую же структуру папок. Если, к примеру, Вы перенесете свой файл не на диск
C:, а на диск
D:, то гиперссылка работать не будет. Поэтому следует указывать
не абсолютный, а
относительный путь.
Так, если файл, на который Вы ссылаетесь, находится
в той же директории, что и текущий, к нему следует обращаться просто
по имени. Например:
<a href="LIntro.html">Введение в web-технологии</a>
Если файл находится в какой-либо папке,
вложенной в папку с текущим файлом, следует указать имя папки и имя файла. Например:
<a href="Pages/Barbie.htm">Страничка Барби</a>
Если файл находится в папке, которая
содержит "текущую", обращение должно выглядеть следующим образом:
<a href="../имя файла">текст гиперссылки</a>.
Если файл находится в папке,
вложенной в папку, содержащую "текущую", обращение должно выглядеть следующим образом:
<a href=";../имя папки/имя файла">текст гиперссылки</a>
Если нужно подняться на два уровня выше, обращение должно выглядеть следующим образом:
<a href="../../имя файла">текст гиперссылки</a>
и т.д....
К счастью, запоминать все эти правила не нужно - в HTML-редакторах есть "мастера" (или, как их еще называют "волшебники", wizards), которые
автоматически определяют относительный путь к выбранному с помощью кнопки "Обзор" файлу.
Следует учитывать, что
автоматическое определение пути возможно лишь тогда, когда текущий файл уже сохранен, т.е.
имеет адрес. Иначе - непонятно,
относительно
чего следует вычислять путь.
Форматирование текста
Форматирование текста, т.е. определение
шрифта,
размера и
цвета букв, можно
осуществлять с помощью атрибутов тэга
<font> (они перечислены ниже), хотя позднее Вы познакомитесь с другими, более гибкими способами
управления стилем документа, в том числе и характеристиками текста.
| Атрибуты |
Примеры |
| size |
размер |
<font size="+2"> |
Увеличили шрифт на 2 пункта |
| <font size="-1"> |
Уменьшили шрифт на 1 пункт |
| color |
цвет |
<font color='Red'>Красный текст</font> |
Красный текст |
| <font color=rgb(30,20,155)>цвет в формате RGB</font> |
цвет в формате RGB |
| <font color="#aa00cc">и в 16-ичном виде</font> |
и в 16-ичном виде |
| face |
шрифт |
<font face='Arial'>Arial</font> |
Arial |
| <font face='Courier'>Currier</font> |
Courier |
Изображения
Сейчас трудно представить себе web-документы без картинок, хотя первые текстовые браузеры "не поддерживали" графику. Чтобы "вставить" картинку в документ, используется тэг
<img>. Его основные атрибуты:
| src |
Источник style='font-family:Arial'>(source) изображения, т.е. адрес графического файла. |
| width, height |
Ширина и высота изображения. Эти атрибуты можно не указывать, тогда рисунок будет выглядеть "как есть", но лучше задавать их явно, чтобы браузер зарезервировал соответствующий объем памяти. |
| alt |
Текст, появляющийся на экране вместо рисунка, если тот по какой-либо причине не может быть загружен. "Всплывает" при наведении мыши на рисунок. |
| border |
Толщина рамки вокруг рисунка. |
наверьх
следующая глава
предыдущий раздел
