Структура Web-страницы. Базисные элементы HTML

ЛАБОРАТОРНАЯ РАБОТА №1

Тема работы: Создание HTML-документа.

Цель работы: Научиться создавать файлы, содержащие элементы форматирования, предписанные языком HTML.

Теоретическая часть:

HTML-документ — это просто текстовый файл с расширением *.htm или *.html).

HTML (Hyper Text Markup Language) представляет собой язык разметки, используемый программистами для создания документов, не зависимых от аппаратно-программной платформы. Т.е. HTML устанавливает ряд правил (синтаксис), следуя которым программисты создают документы, пригодные для использования в различных приложениях, работающих под управлением различных операционных систем. HTML не является языком программирования, это описательный язык разметки. При создании документов с использованием HTML программисты вставляют теги (разделители) и т.н. CER в текстовый документ в качестве указателей на операции, выполняемые приложением (обычно браузером) над соответствующим текстом.

История HTML. Использование HTML началось с 1990 года. Создателями данного языка разметки были Тим Бернерс-Ли и Дэниел В. Конноли. В качестве прототипа HTML был использован SGML, являющимся метаязыком, т.е. языком, предназначенным для формального описания языков разметки. Он является стандартом ISO.

Элементы HTML. Основными элементами HTML являются:

· Теги

· CER

Теги – это разделители элементов текста используются для разбиения документа HTML на логические части (параграфы, заголовки, таблицы и т.п.) Теги HTML служат двум целям: они определяют структуру документа (необходимо для вывода документа на экран с помощью браузера) и используются при формировании ключевой информации для систем поиска в Web.

Наименования тегов всегда заключаются в символы «<» «>». В них помимо наименования тега могут быть использованы буквы, цифры и знаки препинания. Общая длина тега не должна превышать 72 символа (требование SGML). Имена тегов не чувствительны к регистру, т.е. <BODY> и <body> - равнозначны.

Большинство тегов состоят из так называемых старт-тегов и стоп-тегов. Старт-тег обозначает место в документе, где начинают действовать параметры тега, он может содержать в себе атрибуты тега, т.е. дополнительную информацию о содержимом элемента. Стоп-тег определяет место, на котором заканчивается действие тега. Для обозначения стоп-тега используется бек-слеш и наименование тега </BODY>.

CER (Character Entity Reference) позволяет работать с символами, имеющими специальное значение (например, «<»), которые браузеры могут неправильно интерпретировать при выводе на экран.В этом случае можно вводить эти символы при помощи специальных кодов. Эти коды состоят из символа амперсанта (&) и следующим за ним именем символа или его десятичным кодом. Заканчиваться специальный символ должен точкой с запятой.

< – знак меньше; (<)

> – знак больше; (>)

  – неразрывный пробел; ( )

& – знак амперсанта; (&)

" – знак кавычек. (")

Структура Web-страницы. Базисные элементы HTML

Документы, составленные с помощью языка HTML, имеют определенную стандартизированную структуру (см. рис. 1).

Рис. 1.

Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки".

Начало страницы. Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML!DOCTYPE, которая обычно выглядит так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

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

Начинается и завершается любая HTML-страница парой тегов <html> и </html>. Эти теги сигнализируют браузерам о том, что данная программа написана на языке HTML. Все, что находится между этими тегами, называется документом (Web-страницей, программой).

Заголовок страницы

Название страницы располагается между тегами <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> Это простейший пример HTML-документа. Этот html-файл может быть одновременно открыт и в блокноте, и в Internet Explorer'е. Сохранив изменения в блокноте, просто нажмите кнопку Reload ('перезагрузить') в Explorer'е, чтобы увидеть эти изменения. </body> </html>

Web-страница имеет вид (Рис. 4)

Рис.4.

Для удобства чтения в примере введены дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому пример 4 мог бы выглядеть вот так:

<html> <head> <title>Лабораторная 2. Пример 4.</title> </head> <body> <H1>Привет!</H1> Это простейший пример HTML-документа. Этот html-файл может быть одновременно открыт и в блокноте, и в Internet Explorer'е. Сохранив изменения в блокноте, просто нажмите кнопку Reload ('перезагрузить') в Explorer'е, чтобы увидеть эти изменения. </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 — при отображении гипертекста броузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущих подряд пробелов. Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, существует команда, которая запрещает программе броузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла.
тег перевода строки отделяет строку от последующего текста или графики. тег абзаца тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тега являются одноэлементными (не требуют закрывающего тега).

14. Внесите изменения в текст файла HTML:

15. <HTML>16. <HEAD>17. <TITLE> Учебный файл HTML </TITLE>18. </HEAD>19. <BODY>20. Расписание занятий на вторник21. </BODY>22. </HTML>

Сохраните внесенные изменения в файле schedule.html. Просмотрите с помощью браузера обновленную страницу.

Выделение фрагментов текста.

теги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тега выделения фрагментов текста: : — для выделения полужирным, : — для выделения курсивом, : — для выделения подчеркиванием.

1. Внесите изменения в файл schedule.html:

2. <HTML>3. <HEAD>4. <TITLE> Учебный файл HTML </TITLE>5. </HEAD>6. <BODY>7. Расписание занятий на вторник8. </BODY>9. </HTML>

10. Посмотрите новую полученную Web-страницу.

11. Попробуейте использовать вложение тегов:
Расписание занятий на вторник

Изменение размера текста

Существует два способа управления размером текста, отображаемого браузером:

o использование стилей заголовка;

o задание размера текущего шрифта;

2. Внесите изменения в файл schedule.html:

3. <HTML>4. <HEAD>5. <TITLE> Учебный файл HTML </TITLE>6. </HEAD>7. <BODY>8. <H1>Расписание</H1> занятий на вторник9. </BODY>10. </HTML>

11. Просмотрите обновления через браузер.

12. Внесите следующие изменения изменения в файл schedule.html:

13. <HTML>14. <HEAD>15. <TITLE> Учебный файл HTML </TITLE>16. </HEAD>17. <BODY>18. Расписание занятий на вторник19. </BODY>20. </HTML>

21. Самостоятельно измените размер шрифта для текста "занятия на вторник", используя тег .

Гарнитура и цвет шрифта

Тег предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тегу атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать .

Для изменения цвета шрифта в теге можно использовать атрибут 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. Расписание8. занятий на вторник9. </BODY>10. </HTML>

11. Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.

Выравнивание текста по горизонтали

С помощью тегов HTML можно управлять горизонтальным выравниванием текста. Если не оговаривать способ выравнивания, все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле (см. Рис.2). Современные броузеры для выравнивания текста используется атрибут ALIGN=, который встраивается в теги абзаца или заголовка.

o ALIGN=CENTER — Выравнивание по центру

o ALIGN=RIGHT — Выравнивание по правому краю

o ALIGN=LEFT — Выравнивание по левому краю

2. Внесите изменения в файл schedule.html:

3. <HTML>4. <HEAD>5. <TITLE> Учебный файл HTML </TITLE>6. </HEAD>7. <BODY>8. 9. Расписание 10. занятий на вторник11. 12. </BODY>13. </HTML>

14. Просмотрите обновления

Задание цвета фона и текста

Цвета фона и текста документа устанавливаются в начале файла HTML в теге <BODY>. Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK= и VLINK= определяют цвета соответственно непросмотренных и просмотренных ссылок.

1. Внесите изменения в файл schedule.html:

2. <HTML>3. <HEAD>4. <TITLE> Учебный файл HTML </TITLE>5. </HEAD>6. <BODY BGCOLOR="#FFFFCC" TEXT="#330066">7. 8. Расписание 9. занятий на вторник10. 11. </BODY>12. </HTML>

Для форматирования текста используются следующие элементы (табл. 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> позволяют, например, записать формулы: x₂³H₂O E=mc²h=gt²/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>

Сергей Соловьев

родился 27 марта 1954 года

окончил в 1968 году среднюю школу №137

</body>

</html>

Файл сохраним как w2.html.

В этом примере текст заголовка помещается между тегами <title> </title>. Текст заголовка- web-cтраница 2.

Сергей Соловьев означает:

- высота шрифта 5;

- жирный шрифт;

- переход на новую строку;

- курсив.

Если запустить Internet Explorer, то web-станица будет выглядеть следующим образом (рис. 6).

Рис. 6. Web-страница с абзацами и разными шрифтами

Пример 2. Возьмем за основу предыдущий пример и используем форматирование текста. Пусть только каждая запись будет с новой строки. Файл сохраним как w3.html.

<html>

<head>

<title>web-страница3</title>

</head>

<body>

Сергей Соловьев

родился 27 марта 1954 года

окончил в 1968 году среднюю школу №137

</body>

</html>

Если запустить Internet Explorer, то web-станица будет выглядеть следующим образом (рис. 7).

Рис. 6. Web- страница с записями через строку

Задание на самостоятельное выполнение.

Самостоятельно создайте собственный HTML-документ. Пусть это будет небольшой рассказ о себе и своих увлечениях