Понятие тэга, виды тэгов

Занятие 1. Введение и основные понятия
Что такое Интернет
Интернет – это совокупность мировых компьютерных сетей и сетевых служб.
Упрощенная схема Интернета
Локальная сеть (клиенты)
Клиент
Сервер
СЕТЬ
WWW (World Wide Web) - Всемирная паутина. Всемирная - потому что
компьютеры в сети Интернет охватывают весь мир. Паутина – потому что гиперссылки
соединяют информацию на этих компьютерах, как нити паутины. WWW предоставляет
доступ к разным ресурсам – документам, графике, аудио – и видеозаписям. В настоящее
время это самая популярная служба в Интернет.
Гипертекст – это форма представления документов, позволяющая перемещаться как
между разделами одного документа, так и между различными документами.
Браузер (browser) – программа для просмотра Web-страниц.
Гипертекстовые документы принято называть Web-страницами.
Совокупность таких страниц называют сайтом или Web-узлом.
Среди этих страниц выделяется одна главная, называемая домашней (Home Page), с
которой можно перейти по ссылкам на другие страницы, как принадлежащие тому же
сайту, так и другим сайтам.
Что необходимо для создания Web-страницы
1. Компьютер.
2. Браузер для просмотра результата своего творчества. Наиболее
распространены сейчас три вида браузеров: Mozilla, Opera и Internet Explorer.
3. Текстовый редактор. Это может быть как стандартный Блокнот (Notepad),
специализированный редактор (Aditor, EditPlus) или визуальный редактор
(DreamWeaver, Microsoft FrontPage).
Что такое HTML
HTML (Hyper Text Markup Language) - язык гипертекстовой разметки.
Для разработки HTML-файлов нужен всего лишь текстовый редактор. Мы будем
использовать редактор EditPlus.
HTML-страницы – это обычные текстовые файлы, только они имеют расширение не
.txt, а .htm или .html.
NB! Если Вы создаете HTML-страницу в текстовом редакторе, не забудьте с
помощью команды Сохранить как (Save As) сохранить файл, добавив к его имени
расширение .htm или .html.
Создавая Web-страницу, время от времени следует проверять, как она выглядит в
браузере.
Версии HTML
Когда HTML только появился, он был очень простым, поэтому его и назвали HTML
(первая его версия теперь называется HTML 1).
В 1994 году Международная комиссия по стандартам в Интернет разработала
стандарт HTML 2.0.
После создания стандарта HTML 2.0 Консорциум W3C разработал стандарт HTML
3.0. Это было сделано без участия фирм Netscape и Microsoft, поэтому стандарт HTML 3.0
так и не был принят. Тогда W3C разработал стандарт HTML 3.2 со стандартизированным
синтаксисом, в который уже были включены многие дополнительные дескрипторы,
введенные фирмами Netscape и Microsoft.
HTML 3.2 – это современный стандарт W3C, и большинство входящих в него
дескрипторов реализовано почти в каждом Web-браузере.
В июне 1997 года был принят новый стандарт HTML 4.0. По сравнению с HTML 3.2
стандарт HTML 4.0 содержит более широкие возможности контроля над макетом
страницы. С помощью HTML 4.0 Web-мастер может размещать на странице текст и
изображения с точностью до долей сантиметра, если, конечно, его браузер поддерживает
этот стандарт.
Поддержка HTML различными браузерами
Выделим основные типы браузеров и их особенности.
Mozilla последних версий - это быстрый, стабильный и безопасный браузер,
практически идеально поддерживающий последние стандарты HTML, CSS, JavaScript.
Если ваша страничка неправильно показывается или ваши скрипты не работают в Mozilla,
то наверняка вы сами нарушили стандарты и вам нужно искать ошибку в вашем коде.
Internet Explorer 5 является одним из самых распространенных браузеров. Если
ваша страничка не работает в IE5, то большинство пользователей не смогут оценить
ваших усилий по ее созданию.
Netscape Navigator 4 показывает только поддерживаемые им атрибуты CSS. Кроме
того, NN4 очень чувствителен к структурным ошибкам в верстке HTML и CSS незакрытым тегам, ошибочно прописанным атрибутам, некорректным селекторам и
свойствам CSS и т.п.
Opera показывает HTML и CSS очень корректно, уступая только Mozilla. В
частности, она даст вам понять, что вы не знаете, что такое абзац. Кроме того, она умеет
масштабировать и позволяет узнать, насколько ваш HTML-документ привязан к размеру
монитора (известно, что правильный HTML-документ никак к этому размеру не
привязан).
Создание Web-страницы
1 шаг
1. Сформулировать цель.
2. Определить содержание Web-страницы.
Во «всемирной паутине» вы можете найти огромный массив данных:
-
биржевые котировки;
-
предложения работы;
-
электронные доски объявлений;
-
анонсы новых фильмов;
-
литературные, экономические и политические обзоры;
-
игры и многое другое;
-
«домашние» страницы.
Понятие тэга, виды тэгов
Понятие тэга
Тэг (дескриптор) – основной элемент кодирования, принятый в стандарте HTML.
Тэги заключаются в угловые скобки (<>).
Например, тэгом абзаца является <P>, а тэгом горизонтальной линии - <HR>.
Тэги можно записывать как строчными, так и прописными буквами.
NB! Не забывайте о парности угловых скобок: за открывающей скобкой (<)
обязательно должна следовать закрывающая (>).
Виды тэгов
Существует два типа тэгов:
-
контейнеры;
-
одиночные тэги.
Контейнер – это дескрипторная пара, состоящая из начального (открывающего) и
конечного (закрывающего) тэгов.
Начальный дескриптор имеет вид <TAG>, где TAG – имя реального HTMLдескриптора. Конечный дескриптор имеет вид </TAG>.
Контейнеры предназначены для хранения некоторой информации, например текста.
Поэтому между начальным и конечным дескрипторами заключено содержимое
контейнера. Например, элемент, представляющий собой отформатированный текст,
заключается между тэгами <PRE> и </PRE>:
<PRE>Это отформатированный текст.</PRE>
Пустой дескриптор не содержит никакой информации. У него есть только
начальный дескриптор. Пустой дескриптор обычно выполняет самостоятельную задачу,
не связанную с конкретным текстом.
Например, дескриптор <HR> создает горизонтальную линию и не выполняет при
этом никаких действий над текстом.
Структура HTML-документов
С чего начинается HTML
Для того, чтобы текстовый файл превратился в HTML-файл, поменять его
расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки":
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии,
обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно
выглядит так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU">
Эта строка поможет браузеру определить, как правильно интерпретировать данный
документ. В данном случае мы говорим браузеру, что HTML соответствует
международной спецификации версии 3.2, которая хоть и не отличается новизной, но, в
отличие от более поздних версий, является полноценным, широко распространенным
стандартом без каких-либо неопределенностей. Как видно из примера, самый короткий
html-документ состоит буквально из одной строки.
С чего начинается работа
На самом деле одной строкой дело не обходится. После объявления версии и типа
документа необходимо обозначить его начало и конец. Это делается с помощью тэгаконтейнера <HTML>. Необходимо отметить, что любой HTML-документ открывается
тэгом <HTML> и им же закрывается.
Затем, между тэгами <HTML> и </HTML> следует разместить заголовок и тело
документа. Вот и все! Начало положено - вы получили прекрасную заготовку. Вот как
должен выглядеть ваш базовый HTML-файл перед началом работы:
Правильный пример самого короткого HTML-документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU">
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>
Текст документа
</BODY>
</HTML>
Если приведенный выше пример пояснить схематически, получится следующее:
Из схемы видно, что документ состоит из двух основных блоков – «заголовка» и
«тела документа». Заголовок определяется с помощью элемента HEAD, а тело элементом BODY.
Заголовок содержит «техническую» информацию о документе, хотя чаще всего
используется только для обозначения его названия.
Тело документа - святая святых. Именно в нем находится все то, что отображается
на странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство
ваших HTML-экспериментов будет проводиться в пространстве между тэгами <BODY> и
</BODY>
Одной из наиболее распространенных ошибок было и остается размещение
заголовка в теле документа или наоборот, что совершенно недопустимо. Сначала
закрываем заголовок </HEAD>, затем открываем тело.
Заголовок HTML-документа
Создается с помощью элемента HEAD, между тэгами которого размещаются
элементы, содержащие техническую информацию о документе.
Элементы, относящиеся к заголовку документа:
HEAD
Определяет начало и конец заголовка документа
TITLE
Определяет имя всего документа, которое отображается в
заголовке окна браузера
BASE
Определяет базовый адрес, от которого
относительные линки внутри документа
STYLE
отсчитываются
Используется для вставки в документ таблицы стилей CSS
LINK
Описывает взаимосвязь документа с другими объектами
META
Используется для вставки метаданных
SCRIPT
Определяет операторы языков сценария JavaScript,VBScript и др.
<TITLE>
У документа, как и у книги, тоже должно быть название. Для наименования
документа используется элемент TITLE. Название должно быть простым и в то же время
содержательным, чтобы читатель сразу получил представление о ее содержании.
NB! Не следует путать название с именем файла HTML-документа. Имя файла
присваивается в HTML-редакторе при сохранении документа.
HTML-код элемента TITLE выглядит следующим образом:
<TITLE>Поисковая система</TITLE>
<META>
Информация, содержащаяся в тэгах <META>, не отображается браузером и служит
специальным целям.
Описание некоторых мета-тэгов.
EXPIRES – дата устаревания документа
После истечения указанного срока документ будет каждый раз загружаться заново
(обновляться).
Пример: <META Http-equiv="Expires" Content="Sat, 6 March 2004 16:38:15 GMT">
CONTENT-TYPE – тип документа и его кодировка
Выбор кодовой страницы для правильного отображения символов браузером.
Пример: <META Http-equiv=”Content-Type” Content=”text/html; charset=windows1251”>
AUTHOR – информация об авторе данного документа
Пример: <META Name=“Author" Content =“Анна Коряковская”>
KEYWORDS – ключевые слова
Набор слов и фраз, наиболее полно характеризующих данный документ. Являются
основным критерием поиска вашей страницы поисковыми системами.
Пример: <META Name="Keywords" Content =“Библиотека, Учебный центр, HTML,
CSS, Архангельск”>
DESCRIPTION – описание документа
Один из наиболее важных параметров. Информация, содержащаяся в нем, влияет на
результаты поиска, осуществляемого поисковыми системами.
Пример: <META Name="Description" Content =“Сайт, на котором отображены
работы слушателей курсов.”>
<BODY>
Указывает начало и конец тела HTML-документа.
Параметры:
BGCOLOR - определяет цвет фона документа.
BACKGROUND - определяет изображение для "заливки" фона. Значение задается в
виде полного URL или имени файла с картинкой в формате gif или jpg.
TEXT - определяет цвет текста в документе.
MARGINHEIGHT - определяет ширину (в пикселях) верхнего и нижнего полей
документа. Работает только в браузерах Netscape.
TOPMARGIN - определяет ширину (в пикселях) верхнего и нижнего полей
документа. Работает только в браузерах Internet Explorer.
MARGINWIDTH - определяет ширину (в пикселях) левого и правого полей
документа. Работает только в браузерах Netscape.
LEFTMARGIN - определяет ширину (в пикселях) левого и правого полей
документа. Работает только в браузерах Internet Explorer.
LINK - определяет цвет гиперссылок в документе.
ALINK - определяет цвет подсветки гиперссылок в момент нажатия.
VLINK - определяет цвет гиперссылок на документы, которые вы уже просмотрели.
Значения параметров BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо
RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
Пример: <BODY BACKGROUND="images/bricks.jpg" BGCOLOR="#202020"
TEXT="#FFFFFF" LINK="#FF0000" VLINK="#505050" MARGINHEIGHT="30" TOPMARGIN="30" LEFTMARGIN="40" MARGINWIDTH="40">
Форматирование текста
<h1>..<h6>
HTML имеет шесть уровней заголовков разделов документа, пронумерованных
цифрами от 1 до 6. Заголовки объявляются парой тэгов с номерами, соответствующими
уровню, например, <h1></h1> - заголовок раздела первого уровня, а <h6></h6> заголовок раздела шестого уровня. От нормального текста заголовки отличаются
размером и толщиной букв. Заголовок первого уровня <h1> отображается обычно очень
крупным шрифтом, в то время как заголовок шестого уровня h6 – очень мелким.
По умолчанию заголовок выравнивается по левому краю страницы. Но его также
можно выровнять по правому краю или центрировать. Для правостороннего
выравнивания в тэге <h1> используется атрибут align=right, а для центрирования –
align=center. Допускается также явное указание левостороннего выравнивания –
align=left.
Начертание текста
<b></b> - полужирное начертание.
<i></i> - курсивное начертание.
<u></u> - подчеркнутое начертание.
<tt></tt> - телетайпный шрифт.
Тэги <big></big> увеличивают размер шрифта текста, заключенного между ними.
С помощью тэгов <small></small> вы можете уменьшить размер шрифта текста по
сравнению с исходным.
Другой способ указания размера шрифта – с помощью тэгов <font></font> с
атрибутом size. В качестве значений этого атрибута используются целые числа от 1 до 7.
Причем значение 1 соответствует минимальному размеру шрифта, а значение 7 –
максимальному.
В тэгах <font></font> может использоваться также атрибут color для указания цвета
шрифта, ограниченного тэгами текста.
Абзацы
Для того, чтобы представлять текст в виде отдельных абзацев, понадобятся тэги
<p></p>. Эти тэги имеют следующие параметры:
ALIGN – выравнивание текста. Возможные значения: LEFT – по левому краю,
RIGHT – по правому краю, CENTER – по центру, JUSTIFY – по ширине.
<p align=justify>Параграф, выровненный по ширине</p>
<p align=left>Параграф, выровненный по левому краю</p>
<p align=right>Параграф, выровненный по правому краю</p>
<p align=center>Параграф, выровненный по центру</p>
<BR>
Данный элемент осуществляет перевод строки, то есть практически аналогичен
нажатию Enter в текстовом редакторе. Элемент не имеет конечного тэга.
<DIV>
Используется для отделения блока HTML-документа от остальной части документа.
Находящиеся между начальным и конечным тэгами текст или HTML-элементы
оформляются как отдельный параграф.
Параметры:
ALIGN - определяет выравнивание содержимого элемента DIV. Параметр может
принимать следующие значения: left, right, center.
Создание линий
Тэг <HR> вставляет в текст горизонтальную разделительную линию.
Параметры:
WIDTH - определяет длину линии в пикселах или процентах от ширины окна
браузера.
SIZE - определяет толщину линии в пикселах.
ALIGN - определяет выравнивание горизонтальной линии. Параметр может
принимать следующие значения:
left - выравнивание по левому краю документа.
right - выравнивание по правому краю документа.
center - выравнивание по центру документа (используется по умолчанию).
NOSHADE - определяет способ закраски линии как сплошной. Параметр является
флагом и не требует указания значения. Без данного параметра линия отображается
объемной.
COLOR - определяет цвет линии.
<PRE>
Используется для включения в документ уже отформатированного текста. Браузеры
воспроизводят содержимое этого элемента с помощью моноширинного шрифта, сохраняя
пробелы и символы конца строки.