|
Переход к другому документу.
Первое знакомство с тэгами
Основным понятием языка 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 простых заданий.
| Простые задания
Не нашли, что искали? Воспользуйтесь поиском по сайту:
©2015 - 2024 stydopedia.ru Все материалы защищены законодательством РФ.
|