Название страницы располагается между тегами <title> и </title>. Название отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза.
Пример 1. Web-страница с заголовком.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Web-страница</title>
</head>
<body>
Показан пример web-страницы с заголовком
</body>
</html>
Внешний вид страницы показан на рис. 2.
Рис.2. Пример простой web-страницы с заголовком
Пример 2. web-страница с использованием только текста.
Например, воспользуйтесь программой Блокнот (Пуск > Программы > Стандартные > Блокнот) и напишите:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<BODY>
Домашняя страница Сергея Сергеева
Сергей Сергеев - писатель-юморист, автор 20 рассказов.
В жизни большой любитель собак и компьютерных игр.
</BODY>
</HTML>
Файл сохранить как w1.html.
Тег <HTML> , который вы видите в первой строке, означает, что наш текст действительно написан на языке HTML. Большинство тегов языка HTML — парные. Они обязательно требует присутствия закрывающего тега. Например, в этом примере в первой строке стоит открывающий тег <HTML>, а в последней — закрывающий тег </HTML>. Все, что расположено между ними, считается HTML-документом.
Если запустить Internet Explorer и открыть файл w1.html, то web- страница будет иметь вид (рис.3)
Рис.3. Просмотр текстовой web-страницы
Пример 3. Создайте текстовый документ: <html>
<head> <title> Лабораторная работа 1. Пример 3. </title> </head> <body> <H1> Привет! </H1> <P> Это простейший пример HTML-документа. </P> <P> Этот html-файл может быть одновременно открыт и в блокноте, и в Internet Explorer'е. Сохранив изменения в блокноте, просто нажмите кнопку Reload ('перезагрузить') в Explorer'е, чтобы увидеть эти изменения. </P> </body> </html>
Web-страница имеет вид (Рис. 4)
Рис.4.
Для удобства чтения в примере введены дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому пример 4 мог бы выглядеть вот так:
<html> <head> <title>Лабораторная 2. Пример 4.</title> </head> <body> <H1>Привет!</H1> <P>Это простейший пример HTML-документа.</P> <P>Этот html-файл может быть одновременно открыт и в блокноте, и в Internet Explorer'е. Сохранив изменения в блокноте, просто нажмите кнопку Reload ('перезагрузить') в Explorer'е, чтобы увидеть эти изменения.</P> </body> </html>Заданная web-страница показана на рис. 5. Рис. 5.
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается "тег").
Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/".
Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково.
Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. Более подробно метки и их атрибуты рассмотрим в ходе выполнения лабораторной работы.
Практическая работа:
Создание простейших файлов HTML.
1. Создайте папку, в которой Вы будете сохранять созданные Web-страницы.
2. Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с элементами форматирования:
3. <HTML>4. <HEAD>5. <TITLE> Учебный файл HTML </TITLE>6. </HEAD>7. <BODY>8. Расписание занятий на вторник9. </BODY>10. </HTML>
11. Сохраните файл под именем schedule.html.
12. Для просмотра созданной Web-страницы загрузите браузер Microsoft Internet Explorer.
13. Откройте в меню браузера Файл (File), Открыть (Open), Просмотр(Обзор — Browse) и найдите созданный ранее файл schedule.html, загрузите его. Убедитесь, что название Web-страницы (Учебный файл HTML) отразилось в верхней статусной строке броузера.
Управление расположением текста на экране.
1. Внесите изменения в текст, расположив слова "Расписание", "занятий", "на вторник" на разных строках:
2. <HTML>3. <HEAD>4. <TITLE> Учебный файл HTML </TITLE>5. </HEAD>6. <BODY>7. Расписание8. занятий9. на вторник10. </BODY>11. </HTML>
12. Сохраните внесенные изменения, с помощью команд Файл (File), Сохранить (Save).
13. Просмотрите с помощью броузера Microsoft Internet Explorer новую полученную Web-страницу используя клавишу F5 или с помощью кнопки Обновить (Refresh).
Предыдущие шаги не вызвали никаких видимых изменений в документе html — при отображении гипертекста броузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущих подряд пробелов. Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, существует команда, которая запрещает программе броузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла. тег перевода строки <BR> отделяет строку от последующего текста или графики. тег абзаца <P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тега являются одноэлементными (не требуют закрывающего тега).
Сохраните внесенные изменения в файле schedule.html. Просмотрите с помощью браузера обновленную страницу.
Выделение фрагментов текста.
теги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тега выделения фрагментов текста: <B> : </B> — для выделения полужирным, <I> : </I> — для выделения курсивом, <U> : </U> — для выделения подчеркиванием.
1. Внесите изменения в файл schedule.html:
2. <HTML>3. <HEAD>4. <TITLE> Учебный файл HTML </TITLE>5. </HEAD>6. <BODY>7. <B>Расписание</B> <I>занятий</I> <U> на вторник</U>8. </BODY>9. </HTML>
10. Посмотрите новую полученную Web-страницу.
11. Попробуейте использовать вложение тегов: <I><B>Расписание</B></I> <I>занятий</I> <U> на вторник</U>
Изменение размера текста
Существует два способа управления размером текста, отображаемого браузером:
12. Внесите следующие изменения изменения в файл schedule.html:
13. <HTML>14. <HEAD>15. <TITLE> Учебный файл HTML </TITLE>16. </HEAD>17. <BODY>18. <FONT SIZE="7">Расписание</FONT> занятий на вторник19. </BODY>20. </HTML>
21. Самостоятельно измените размер шрифта для текста "занятия на вторник", используя тег <FONT>.
Гарнитура и цвет шрифта
Тег <FONT> предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тегу <FONT> атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать <FONT FACE="ARIAL">.
Для изменения цвета шрифта в теге <FONT> можно использовать атрибут COLOR="X". Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие: красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF. Примеры записи цвета в формате RGB приведены в таблице:
Цвет
RRGGBB
black | черный
white | белый
FFFFFF
red | красный
FF0000
green | зеленый
00FF00
azure | бирюзовый
00FFFF
blue | синий
0000FF
gray | серый
A0A0A0
purple | фиолетовый
FF00FF
yellow | желтый
FFFF00
brown | коричневый
orange | оранжевый
FF8000
violet | лиловый
8000FF
1. Внесите изменения в файл schedule.html:
2. <HTML>3. <HEAD>4. <TITLE> Учебный файл HTML </TITLE>5. </HEAD>6. <BODY>7. <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">Расписание</FONT></B></I></U>8. занятий на вторник9. </BODY>10. </HTML>
11. Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.
Выравнивание текста по горизонтали
С помощью тегов HTML можно управлять горизонтальным выравниванием текста. Если не оговаривать способ выравнивания, все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле (см. Рис.2). Современные броузеры для выравнивания текста используется атрибут ALIGN=, который встраивается в теги абзаца или заголовка.
Цвета фона и текста документа устанавливаются в начале файла HTML в теге <BODY>. Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK= и VLINK= определяют цвета соответственно непросмотренных и просмотренных ссылок.
Для форматирования текста используются следующие элементы (Справочная табл. 1).
Таблица 1
N
Наименование
Теги
Примечания
Жирный
<B></B>
Усиленное выделение
STRONG
Пример:Я <STRONG>сильный</STRONG>, но легкий.
Текст будет выделен жирным шрифтом. Этот элемент предпочтительнее предыдущего.
Курсив
<I></I>
Подчеркнутый
<U></U>
(часто не поддерживается)
Перечеркнутый
<STRIKE></STRIKE>
Может использоваться более короткий тег <s>
(часто не поддерживается)
Увеличение шрифта относительно текущего
<BIG></BIG> аналогичен по действию тегу <FONT SIZE="+1">
Текст, заключенный между начальным и конечным тегами, отображается увеличенным шрифтом (относительно текущего.
Уменьшение шрифта относительно текущего
Тег <SMALL> аналогичен по действию тегу <FONT SIZE="-1">
Текст, заключенный между начальным и конечным тегами, отображается уменьшенным шрифтом (относительно текущего).
Объединение параметров текста
Вложенные теги типа <i> <b> ВЫДЕЛЯЕМЫЙ ТЕКСТ </b> </i> позволяют одновременно выполнять несколько видов форматирования. Текст одновременно становится и жирным и наклонным. При использовании вложенных тегов необходимо, чтобы открывающие и закрывающие теги размещались в строгом порядке: <тег 1><тег 2><тег 3>Текст</тег 3> </тег 2></тег 1>
Текст с новой строки
<br>
Перенос текста на новую строку без создания нового абзаца
Текст с новой строки с пробелом в одну строку
<p> </p>
Строчки текста через строку
Текст на кнопке
<button> текст на кнопке </button>
Кнопка с текстом
Индексы
<SUB></SUB>
Теги формирования подстрочного и надстрочного текстов <sub> </sub> и <sup> </sup> позволяют, например, записать формулы:
x23 H2O E=mc2 h=gt2/2
Верхний индекс
<SUP></SUP>
Нижний индекс
Печатная машинка
<TT></TT>
<TT>ПРИЕДУ ПОЕЗДОМ ТЧК ПОДРОБНОСТИ ПРИ ВСТРЕЧЕ ТЧК</TT>
(изображается как шрифт фиксированной ширины)
CODE, SAMP
Данные элементы оформляют текст, находящийся между начальным и конечным тегами, как формулу или программный код.
<CODE> n=((x*15-z/1.25)/4)^5 </CODE>
Форматированый
<PRE></PRE>
Теги предварительного форматирования <pre> </pre>дают возможность сохранить формат набранного текста,например, сделать несколько пробелов между словами.Без использования рассматриваемого тега пробелы, отступы, табуляция и переводы строк браузером игнорируются.
(сохранить формат текста как есть)
Ширина
<PRE WIDTH=?></PRE>
(в символах)
Центрировать
<CENTER></CENTER> [*]
(как текст, так и графика)
Размещение текста
<p align="center">Текст</p"> и <p align="right">Текст</p">
Текст размещается в разных частях страницы
Мигающий
<BLINK></BLINK>
(наиболее осмеянный элемент)
Текст как цитата
<CITE></CITE>
Цитируемый текст отображается курсивом.
Как сказал классик:<BR> <CITE>"Любви все возрасты покорны"</CITE>
Изменение размера шрифта в заголовках
<h1><h1>
Теги заголовков вида <h1> </h1>предназначены для изменения размера шрифта в заголовках
Размер шрифта
<FONT SIZE=?></FONT>
(от 1 до 7)
Изменить размер шрифта
<FONT SIZE="+|-?"></FONT>
Базовый размер шрифта
<BASEFONT SIZE=?>
(от 1 до 7; по умолчанию 3)
Цвет шрифта
<FONT COLOR="#$$$$$$"></FONT>
Цвет можно задавать как с помощью символьных меток типа red, green, так и с помощью шестнадцатеричного кода типа #008080, #FF0080.
Теги определения цвета вида <font color=red> </font> и <font color=#008080> </font> используются для задания нужного цвета текста.
Цвет фона
Тег типа <body bgcolor="white" text="black" > позволяет задать цвет фона страницы и цвет текста (чернил). Следующий пример демонстрирует смену белого (white) фона страницы на желтый (yellow) фон. В данном случае был использован тег <body bgcolor="yellow" text="black">. Чтобы установить красный цвет текста следует использовать тег <body bgcolor="white" text="red">
Выбор шрифта
<FONT FACE="***"></FONT>
Многоколоночный текст
<MULTICOL COLS=?></MULTICOL>
Пробел между колонками
<MULTICOL GUTTER=?></MULTICOL>
(по умолчанию 10 точек)
Ширина колонки
<MULTICOL WIDTH=?></MULTICOL>
Пустой блок
<SPACER>
Тип пустого блока
<SPACER TYPE=horizontal| vertical|block>
Величина пустого блока
<SPACER SIZE=?>
Размеры пустого блока
<SPACER WIDTH=? HEIGHT=?>
Выравнивание
<SPACER ALIGN=left|right|center>
Отображения текста, который пользователь должен набрать на клавиатуре
<KBD></RBD>
Чтобы войти в систему наберите <KBD>"GUEST"</KBD> заглавными буквами.
Обозначение в тексте переменной
<VAR></VAR>
Переменная <VAR>IndexZ</VAR> равна 5.
Отлиновки- горизонтальные линии
Непарный тег <hr> обеспечивает создание горизонтальной разделительной линии. С помощью атрибута типа <hr hoshade size=10> можно изменять ширину разделительной линии. Ширина задается в пикселях. С помощью атрибута color можно изменять цвет отлиновки <hr hoshade size=5 color="#33CC33"">
Отлиновки - горизонтальные линии, служащие для отделения одной части текста от другой.
Дополнительные примеры
Пример 1. Добавим к тексту заголовок. Воспользуемся снова программой Блокнот и наберем новый текст.
<html>
<head>
<title>web-страница2</title>
</head>
<body>
<font size="5"><b>Сергей Соловьев</b><br>
родился 27 марта 1954 года<br>
<i>окончил в 1968 году среднюю школу №137
</i></font>
</body>
</html>
Файл сохраним как w2.html.
В этом примере текст заголовка помещается между тегами <title> </title>. Текст заголовка- web-cтраница 2.
Если запустить Internet Explorer, то web-станица будет выглядеть следующим образом (рис. 6).
Рис. 6. Web-страница с абзацами и разными шрифтами
Пример 2. Возьмем за основу предыдущий пример и используем форматирование текста. Пусть только каждая запись будет с новой строки. Файл сохраним как w3.html.
<html>
<head>
<title>web-страница3</title>
</head>
<body>
<font size="5">
Сергей Соловьев
<p>родился 27 марта 1954 года</p>
<i><p>окончил в 1968 году среднюю школу №137</p>
</i></font>
</body>
</html>
Если запустить Internet Explorer, то web-станица будет выглядеть следующим образом (рис. 7).
Рис. 5. 
