1896
.pdfЯзык 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">
<TITLE>Internet</TITLE>
</HEAD>
<BODY>
<H1>Интернет и World Wide Web</H1> <BR>
<HR>
<H2>Здесь вы можете узнать:</H2> <BR>
<P><B>Что такое Интернет</B> <P><I>Историю создания Интернета</I> <P><U>Основные понятия среды Интернета</U> </BODY>
</HTML>
Теперь необходимо посмотреть файл primer.htm. Просмотр страницы – простая операция, самое замечательное – для этого не придется подключаться к провайдеру. Это позволяет просмотреть страницу до установки ее в Web. Просмотр осуществляется с помощью Web-браузера. Все браузеры разные, но у всех них есть опция открытия HTML - файла. Она находится в меню браузера Файл (File)/Открыть (Open). Например, ваша страница primer.htm находится на диске С: в каталоге HOME.
Просмотреть файл можно несколькими способами.
1способ:
1.Запустить браузер. Подключаться к Интернету не обязательно.
2.Выбрать в меню браузера Файл (File)/Открыть (Open).
3.Укажите путь к файлу. Это можно сделать двумя способами:
–в строке ввода прописать путь: С:\HOME\primer.htm. Нажать
Ok.
–выбрать опцию Обзор и найти необходимый файл. Нажать
Открыть. Нажать Ok.
4.Просмотреть, как выглядит на экране Web-страница. Если все в порядке, пропустить следующие шаги.
5.Для исправления имеющихся недостатков внести изменения в HTML
–документ.
2способ: с помощью программ Мой компьютер, Проводник, Far или аналогичным им найдите файл и два раза щелкните по нему мышкой (щелчок может быть одинарный – это зависит от настроек Windows). Данное действие загрузит браузер и отобразит вашу Web-страницу. Далее выполняйте п. 4 и 5 из предыдущего способа.
На рис. 7. представлен браузер Internet Explorer с отображенным Web-
файлом primer.htm.
Замечание: в дальнейшем также будем осуществлять просмотр Web-
файлов браузером Internet Explorer.
Рис. 7. Вид Web-страницы в окне браузера
Если при просмотре Web-страница выглядит иначе, чем первоначально предполагалось, ее можно отредактировать. Для исправления недостатков необходимо выполнить следующие действия:
1.В меню браузера Вид выбрать: В Виде HTML или Источник. Нажать Enter.
2.Внести исправления в тексте программы.
3.Сохранить файл.
4.Нажать кнопку Обновить браузера.
Впервый раз получится немного не то, чтобы хотелось видеть на самом деле. Ничего страшного. С первого раза это еще никому не удавалось. Большинству людей приходится по несколько раз вносить изменения в Web–страницы. Обычно не там, где надо, находится заголовок или графика и тому подобное. Корректировка Web-страниц не требует большого времени, но это половина работы по их созданию.
Изменим расположение текста данной Web-страницы, используя тег <PRE>…</PRE>, тег самостоятельного форматирования.
Текст программы Web-файла primer.htm будет представлен следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; harset=windows-
1251">
<TITLE>Internet</TITLE>
</HEAD>
<BODY>
<H1>Интернет и World Wide Web</H1> <BR>
<HR>
<H2>Здесь вы можете узнать:</H2> <BR>
<PRE>
<B>Что такое Интернет</B> <I>Историю создания Интернета</I>
<U>Основные понятия среды Интернета</U>
</PRE>
</BODY>
</HTML>
На рис. 8. показано, как будет выглядеть файл в окне браузера.
Кнопка Обновить
Рис. 8. Вид Web-страницы в окне браузера
1.1.9. Расположение текста относительно экрана браузера
Расположение текста задается путем включения нескольких ключевых слов в тег <P> (табл. 4).
|
Таблица 4. Теги выравнивания текста |
|
Тег |
Комментарий |
|
<P ALIGN="LEFT"> |
Абзац выравнивается по левому краю экрана |
|
<P ALIGN="RIGHT"> |
Абзац выравнивается по правому краю экрана |
|
<P ALIGN="CENTER"> |
Абзац выравнивается по центру экрана |
|
<P ALIGN="JUSTIFY"> |
Абзац выравнивается по ширине экрана, но браузер |
|
|
выполняет это лучшим, возможным для себя |
|
|
способом. Абзац не всегда будет выглядеть так, как |
|
|
было бы после его обработки текстовым процессором |
|
Замечание: если не указывать в теге <P> зарезервизированное слово, определяющее расположение текста, то текст автоматически расположится относительно левого края экрана.
Применим для нашей Web-страницы теги расположения текста.
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; harset=windows1251">
<TITLE>Internet</TITLE>
</HEAD>
<BODY>
<H1><P ALIGN="CENTER">Интернет и World Wide Web</H1> <BR>
<HR>
<H2><P ALIGN="CENTER">Здесь вы можете узнать:</H2> <BR>
<B><P ALIGN="LEFT">Что такое Интернет</B>
<I><P ALIGN="RIGHT">Историю создания Интернета</I> <U><P ALIGN="JUSTIFY">Основные понятия среды
Интернета</U> </BODY>
</HTML>
На рис. 9 показано, как будет выглядеть файл в окне браузера.
Рис. 9. Вид Web-страницы в окне браузера
Контрольные вопросы
1.Что такое Интернет, гипертекст, Web-страница, Web-файл, сайт, Web-браузер, провайдер, URL, протокол HTTP?
2.Как используется технология «клиент-сервер» в Web?
3.Какую информацию можно расположить на Web-странице?
4.Что такое HTML, HTML-файл, тег?
5.Перечислите и дайте характеристику структурным тегам.
6.Перечислите и дайте характеристику тегам управления внешним видом Web-страниц.
7.Перечислите и дайте характеристику тегам форматирования символов.
8.Перечислите основные шаги по созданию Web-страницы.
9.Как можно расположить текст относительно экрана браузера?
Практические задания
1.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 10):