Первое знакомство с тэгами
Основным понятием языка HTML является "тэг" (англ.: tag -ярлычок, этикетка).
Тэги - это заключенные в угловые скобки " <,> " последовательности букв, (образованные, как правило, сокращением английских слов).
Код любого HTML -документа начинается тегом <html> и завершается тегом </html>.
Пара "открывающий - закрывающий" тэги называется контейнером.
Каждый документ имеет контейнер <head>...</head>, содержащий вспомогательную информацию, и контейнер <body>...</body>, содержащий сам текст документа.
Контейнер <title>...</title>, расположенный в секции <head>...</head>, содержит текст, отображаемый в верхней строке окна браузера.
Задание 1: создайте Ваш первый HTML-документ. Пусть он будет озаглавлен Вашей фамилией (в титульной строке) и содержит следующую информацию: · Вашу фамилию, имя, отчество · год рождения · место рождения · адрес · номер школы, которую Вы закончили. |
Большинство тэгов предназначено для форматирования документов:
Код | Вид |
Шампунь для <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>строки | перевод строки |
Задание 2: Измените Ваш HTML-документ: · фамилию, имя, отчество - наберите крупными жирными наклонными буквами, разместите по центру; · год рождения - на следующей строке, подчеркните; · место рождения - на следующей строке, мелкими буквами; · адрес- на следующей строке, мелкими буквами. |
В HTML -документах часто используются списки: ненумерованные или нумерованные.
Ненумерованный список | Нумерованный список |
· бананы · анансы · апельсины · яблоки | 1. тетради 2. авторучки 3. карандаши 4. ластики |
Элементы списков выделяются с помощью тега <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> |
Задание 3: Измените Ваш HTML-документ, добавив в него: · нумерованный список дисциплин, которые Вы будете слушать в этом семестре · ненумерованный список Ваших любимых кушаний. |
Атрибуты тэгов
Большинство тэгов имеет атрибуты, т.е. свойства, которые могут принимать различные значения. Например, если мы хотим, чтобы текст документа находился на желтом фоне, нам нужно использовать следующий код:
<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 - для достижения эффекта скольжения текста по фону |
Задание 4: Создайте два HTML-документа.(Используйте ту информацию, что Вы уже ввели в свой первый документ). Для одного из них выберите фоновый рисунок, для другого задайте цвет фона. |
Метки и гиперссылки
Гиперссылки составляют самую "соль" любого HTML-документа. Гиперссылки - это фрагменты (слова, рисунки, кнопки и т.д.), щелкнув мышью на которых мы попадаем на новый документ
или на новой место в этом же документе.
Гиперссылки создаются с помощью тэга <a>...</a> (англ.: anchor - якорь).
Гиперссылки имеют два основных атрибута: href и name.
Рассмотрим два типа гиперссылок:
Переход к другому документу.
Например, мы хотим, чтобы щелкнув на тексте ' Информация о пакете ' мы открыли в нашем окне документ ' About.html '.
Код | Результат |
<html> <head>... </head> <body> текст документа <a href='About.html'>Информация о пакете</a> </body> </html> | текст документа Информация о пакете |
2. Перемещение в пределах документа.
Если документ большой, если в нем есть несколько смысловых разделов, желательно предусмотреть возможность перехода по гиперссылкам в пределах документа. Например, обеспечить возможность перехода на начало или конец документа. Для того, чтобы мы могли перейти на то или иное место в документе, его нужно предварительно отметить, бросить туда "якорь". Это делается с помощью того же тэга <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), которые автоматически определяют относительный путь к выбранному с помощью кнопки "Обзор" файлу. Следует учитывать, что автоматическое определение пути возможно лишь тогда, когда текущий файл уже сохранен, т.е. имеет адрес. Иначе - непонятно, относительно чего следует вычислять путь.
Задание 5: Создайте в двух HTML-документах взаимные гиперссылки. |
Форматирование текста
Форматирование текста, т.е. определение шрифта, размера и цвета букв, можно осуществлять с помощью атрибутов тэга <font> (они перечислены ниже), хотя позднее Вы познакомитесь с другими, более гибкими способами управления стилем документа, в том числе и характеристиками текста.
Атрибуты | Примеры | ||
size | размер | <font size="+2"> <font size="-1"> | Увеличили шрифт на 2 пункта Уменьшили шрифт на 1 пункт |
color | цвет | <font color='Red'>Красный текст</font> <font color=rgb(30,20,155)>цвет в формате RGB</font> <font color="#aa00cc">и в 16-ичном виде</font> | Красный текст цвет в формате RGB и в 16-ичном виде |
face | шрифт | <font face='Arial'>Arial</font> <font face='Currier'>Currier</font> | Arial Currier |
Изображения
Сейчас трудно представить себе web-документы без картинок, хотя первые текстовые браузеры "не поддерживали" графику. Чтобы "вставить" картинку в документ, используется тэг <img>.
Его основные атрибуты:
src | Источник(source) изображения, т.е. адрес графического файла. |
width, height | Ширина и высота изображения. Эти атрибуты можно не указывать, тогда рисунок будет выглядеть "как есть", но лучше задавать их явно, чтобы браузер зарезервировал соответствующий объем памяти. |
alt | Текст, появляющийся на экране вместо рисунка, если тот по какой-либо причине не может быть загружен. "Всплывает" при наведении мыши на рисунок. |
border | Толщина рамки вокруг рисунка. |
Теперь Вам вполне по силам выполнить первые 5 простых заданий. |
Простые задания
Создайте страничку с информацией о себе - выберите цвет фона и текста, начертание букв; разместите свою фотографию (можно условную). Используйте различные тэги форматирования текста.
2. Создайте небольшой сайт (4-5 страниц) с информацией о себе и своей семье (или своей учебной группе, друзьях и пр.). Обоснуйте выбор с труктуры сайта и способа навигации по нему. Используйте в качестве фона для HomePage подходящее изображение. Создайте для HomePage музыкальный фон. Создайте гиперссылки с помощью фрагментов текста и изображений.
3. Создайте документ длиной 4-5 экранных страниц,разбитый на смысловые абзацы. Для перехода от одного абзаца к другому используйте метки.
4. Создайте документ, содержащий выдержки из законодательных актов, регламентирующих приобретение и использование пакетов прикладных программ. Выдержите документ в следующем стиле:
названия законодательных актов выведите жирным шрифтом темно-красного цвета размером 20pt. Текст выдержите черным цветом, курсивом, размер букв - 14 pt. Создайте метки на название каждого документа.
5. Создайте сайт из HomePage и 3-х документов. Предусмотрите взаимные гиперссылки:
HomePage - документы 1,2,3;
Документ 2 - документы 1,2,3.Обеспечьте единство стилевого оформления (цвета фона, букв, заголовков, типа
и размера шрифтов) за счет применения каскадной таблицы стилей.