Основы HTML

Основы HTML

Первое знакомство с тэгами

Основным понятием языка 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>	A_i,j
A<sup>2</sup>	A²
<big>БОЛЬШОЙ</big> ТЕАТР	БОЛЬШОЙ ТЕАТР
<small>Маленький</small> Мук	Маленький Мук
неразрывный     пробел	неразрывный пробел
перевод<br>строки	перевод строки

Задание 2: Измените Ваш HTML-документ:

 фамилию, имя, отчество - наберите крупными жирными наклонными буквами, разместите по центру;

 год рождения - на следующей строке, подчеркните;

 место рождения - на следующей строке, мелкими буквами;

 адрес- на следующей строке, мелкими буквами.

В 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>

Задание 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.

Рассмотрим два типа гиперссылок:

1. Переход к другому документу.

Например, мы хотим, чтобы щелкнув на тексте 'Информация о пакете' мы открыли в нашем окне документ '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 простых заданий.

Простые задания

Минимальное число баллов: 10

1. Создайте страничку с информацией о себе - выберите цвет фона и текста, начертание букв; разместите свою фотографию (можно условную).
Используйте различные тэги форматирования текста.

(1 балл)

2. Создайте небольшой сайт (4-5 страниц) с информацией о себе и своей семье (или своей учебной группе, друзьях и пр.).
Обоснуйте выбор структуры сайта и способа навигации по нему.
Используйте в качестве фона для HomePage подходящее изображение.
Создайте для HomePage музыкальный фон .
Создайте гиперссылки с помощью фрагментов текста и изображений.

(2 балла)

3. Создайте документ длиной 4-5 экранных страниц,разбитый на смысловые абзацы.
Для перехода от одного абзаца к другому используйте метки.

(2 балла)

4. Создайте документ, содержащий выдержки из законодательных актов, регламентирующих приобретение и использование пакетов прикладных программ. Выдержите документ в следующем стиле:
названия законодательных актов выведите жирным шрифтом темно-красного цвета размером 20pt. Текст выдержите черным цветом, курсивом, размер букв - 14 pt. Создайте метки на название каждого документа.

(2 балла)

5.   Создайте сайт из HomePage и 3-х документов.
Предусмотрите взаимные гиперссылки:
   HomePage - документы 1,2,3;
   Документ 2 - документы 1,2,3.
Обеспечьте единство стилевого оформления (цвета фона, букв, заголовков, типа и размера шрифтов) за счет применения каскадной таблицы стилей.

(2 балла)

6. Расположите на странице два изображения и кнопку ЗАМЕНА, при нажатии на которую изображения будут меняться местами.

(3 балла)

7. Создайте страницу вида:

И рисунки, и текст должны являться гиперсылками на соответствующие документы (1 - 6).
Для хранения адресов документов, адресов рисунков и самих текстов гиперссылок используйте один строковый массив.

(4 балла)

8. Создайте три бегущие строки:

a. убегающий вправо и исчезающий за границей области текст;

b. колеблющуюся на оранжевом фоне последовательность слов и рисунков;

c. движущийся справа налево и останавливающийся по достижению границы текст.

(4 балла)

Скачано с www.znanio.ru

Основы HTML Первое знакомство с тэгами

Ненумерованный список Нумерованный список  бананы  анансы  апельсины  яблоки тетради авторучки карандаши ластики

Нередко документ размещают на фоне некоторого рисунка

Метки и гиперссылки Гиперссылки составляют самую "соль" любого

Например, обеспечить возможность перехода на начало или конец документа

Окно , в которое будет загружен указанный документ

Обзор" файлу. Следует учитывать, что автоматическое определение пути возможно лишь тогда, когда текущий файл уже сохранен, т

Источник (source) изображения, т

Создайте документ длиной 4-5 экранных страниц,разбитый на смысловые абзацы

Материалы на данной страницы взяты из открытых истончиков либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.

07.03.2023