Материал: 1896
Язык HTML состоит из специальных разметочных указателей – тегов. Их также называют командами или кодами языка HTML.
Тег (от англ. слова Tag) – команда HTML, указывающая, какую операцию необходимо выполнить, например, вывести на экран текст, нарисовать линию или использовать графику.
Содержащиеся в тексте теги могут изменять шрифты, стили и создавать специальные эффекты. Это позволяет обеспечить интересный графический интерфейс при отображении стандартного текстового файла. Кроме изменения стиля текста, HTML также сообщает браузеру, когда некий текст на странице должен считаться гипертекстовой ссылкой, в каком месте вставить графические и специальные элементы, команды отправки почты и другие специальные возможности.
Тег начинается со знака «меньше» (<) и заканчивается знаком «больше» (>). Прописные и строчные буквы при написании тегов не различаются.
Существует два типа тегов – парные и непарные. Парный тег влияет на текст с того места, где употреблен, до того места, где указан признак окончания его действия (им служит тот же самый тег, только начинающийся с символа слэш «/»). В качестве примера приведем парный тег, указывающий браузеру, что далее следует HTML-файл: <HTML>…</HTML>. Теги по выполняемым ими функциям делятся на структурные теги, теги формирования абзацев, символов и т.д.
В табл. 1 приведены структурные теги.
|
Таблица 1. Структурные теги |
|
Тег |
Комментарий |
|
<HTML>…</HTML> |
Указывает браузеру, что далее следует HTML-файл. Весь |
|
|
текст HTML-файла должен находиться внутри этого тега |
|
<HEAD>…</HEAD> |
Внутри этого тега находится заголовок документа, |
|
|
состоящий из нескольких частей, основной из которых |
|
|
является заголовок окна, а также описываются общие |
|
|
правила интерпретации HTML-документа в целом и |
|
|
вспомогательная информация о документе, например, |
|
|
команда: |
|
|
<META http-equiv="Content-Type" content="text/html; |
|
|
charset=windows-1251"> задает браузеру информацию о |
|
|
кодировке, в которой написан текст HTML-документа. В |
|
|
данном случае задана стандартная кодировка Windows |
|
<TITLE>…</TITLE> |
Тег названия окна. Пишется внутри тега HEAD. |
|
|
Отображается в строке заголовка окна, название можно |
|
|
поместить в списке закладок, при поиске в WWW |
|
|
считается названием Web-страницы |
|
<BODY>…</BODY> |
Определяет тело документа, внутри этого тега пишется то, |
|
|
что будет доступно в области просмотра браузера. Этот |
|
|
тег имеет несколько параметров, описывающих цвет фона |
|
|
окна просмотра, рисунок в нем, цвет текста и т. п. |
|
1.1.7. Средства создания HTML-файлов
Существует множество программных продуктов, облегчающих работу по созданию HTML-файлов. Все средства работы с HTML можно разделить на три категории: редакторы тегов, шаблоны и программыпреобразователи. При использовании шаблонов и программпреобразователей пользователю не надо иметь представление о том, что такое теги. Редакторы по созданию HTML-файлов предполагают некоторые знания о тегах. В данном случае будем создавать HTML-файлы «вручную» используя для этого текстовый редактор Блокнот. Это позволит познакомиться с тегами языка HTML.
Основные шаги по созданию страницы
1.Создайте новую папку (каталог) в Windows для хранения всех компонентов вашей страницы.
2.Щелкните мышью на кнопку Пуск (в левом углу рабочего стола).
3.Щелкните мышью на значке Программы/Стандартные/Блокнот
(Notepad) (рис. 3.).
Рис. 3. Загрузка редактора Блокнот
Редактор Блокнот откроется, и курсор окажется в первой строке, как показано на рис. 4.
Рис. 4. Окно редактора Блокнот
4.Создайте HTML-документ, набрав в первой строке тег <HTML>.
5.Введите несколько пустых строк и поставьте закрывающий тег, который завершает его действие. Для тега <HTML> закрывающим является тег </HTML>.
6.Вернитесь на строку после тега <HTML> и ограничьте заголовок документа:
<HEAD>
<TITLE>Internet</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=windows- 1251">
</HEAD>
7.Запишите парные теги тела документа <BODY> и </BODY>.
8.Сохраните текстовый файл. Файлу необходимо присвоить расширение htm. Для этого необходимо в меню редактора Блокнот
выбрать команду Файл/Сохранить как… В появившемся диалоговом окне в строке напротив записи Имя файла записать имя файла primer с расширением htm, как это сделано на рис. 5.
Замечание: имя файла и его расширение необходимо записывать только маленькими буквами. Это позволит любому браузеру распознать файл. Желательно, чтобы имя файла было записано только латинскими буквами, например, chat.htm, kino.htm, kat.htm и т. п. Имя файла и его расширение отделяются точкой.
имя файла и расширение
Рис. 5. Сохранение файла с именем primer.htm в папку HOME
На рис. 6. показан сохраненный файл primer.htm.
Рис. 6. Листинг программы
1.1.8. Оформление текста в Web-документе
Для этого рассмотрим теги управления внешним видом Web-документа (табл. 2) и теги форматирования символов (табл. 3).
|
Таблица 2. Теги управления внешним видом Web-документа |
||
Тег |
|
Комментарий |
|
<P> |
Тег «параграф» отделяет абзацы друг от друга, ставится в |
|
|
|
начале абзаца. В соответствии с международным стандартом |
|
|
|
абзацы разделяются пустыми строками и не начинаются с |
|
|
|
красной строки |
|
|
<BR> |
Осуществляет переход на новую строку |
|
|
<HR> |
Отображает горизонтальную линию, идущую через весь экран |
|
|
|
(далее рассмотрим параметры данного тега) |
|
|
<HR SIZE=" "> |
Устанавливает высоту (толщину) линии |
|
|
<HR WIDTH=" "> |
Устанавливает ширину линии, можно указать в процентах или |
|
|
|
пикселях, например, |
|
|
|
<HR WIDTH="50%"> или <HR WIDTH ="325"> |
|
|
<HR COLOR=" "> |
Задает линии определенный цвет. |
|
|
|
Замечание: цвета рассмотрим позже |
|
|
<HR NOSHADE> |
Создает линию без тени |
|
|
<PRE>…</PRE> |
Вставляет предварительно отформатированный текст |
|
|
<H1>…</H1> |
Определяют заголовки документа. <H1> – отображает текст |
|
|
<H2>…</H2> |
самым большим размером шрифта (высший уровень), <H6> – |
|
|
<H3>…</H3> |
самым малым (низший уровень). |
|
|
<H4>…</H4> |
Замечание: если не определять уровень заголовка, то браузер |
|
|
<H5>…</H5> |
отобразит его размером <H3> |
|
|
<H6>…</H6> |
|
|
|
|
|
Таблица 3. Теги форматирования символов |
|
Тег |
|
Комментарий |
|
<B>…</B> |
|
Текст, заключенный в этот тег, отобразится |
|
|
|
жирным шрифтом |
|
<I>…</I> |
|
Текст, заключенный в этот тег, отобразится |
|
|
|
курсивом |
|
<U>…</U> |
|
Текст, заключенный в этот тег, отобразится |
|
|
|
подчеркнутым шрифтом |
|
<TT>…</TT> |
|
Создает текст, имитирующий стиль печатной |
|
|
|
машинки |
|
<CITE>…</CITE> |
|
Используется для цитат (обычно наклонный |
|
|
|
текст) |
|
<EM>…</EM> |
|
Используется для выделения из текста слова |
|
|
|
(наклонный или жирный текст) |
|
<STRONG>…</STRONG> |
Используется для выделения наиболее важных |
|
|
|
|
частей текста (наклонный или жирный текст) |
|
Используя теги, приведенные в данных таблицах, изменим текст программы в файле primer.htm следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows- 1251">