Структура 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) позволяет работать с символами, имеющими специальное значение (например, «<»), которые браузеры могут неправильно интерпретировать при выводе на экран.В этом случае можно вводить эти символы при помощи специальных кодов. Эти коды состоят из символа амперсанта (&) и следующим за ним именем символа или его десятичным кодом. Заканчиваться специальный символ должен точкой с запятой.

&lt; – знак меньше; (&#60;)

&gt; – знак больше; (&#62;)

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

&copy; – знак копирайта; (&#169;)

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

&quot; – знак кавычек. (&#34;)

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

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

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

Рис. 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.

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

Рис.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)

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

Рис.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)

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

Рис.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. Структура Web-страницы. Базисные элементы HTML - student2.ru Рис. 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> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тега являются одноэлементными (не требуют закрывающего тега).

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

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

Сохраните внесенные изменения в файле 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>

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

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

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

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

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

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

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

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=, который встраивается в теги абзаца или заголовка.

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. <P ALIGN=CENTER>9. <FONT COLOR="#008080" SIZE="7"><B>Расписание</B></FONT><BR>10. <FONT SIZE="6"><I>занятий на вторник</I></FONT>11. </P>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. <P ALIGN=CENTER>8. <FONT COLOR="#008080" SIZE="7"><B>Расписание</B></FONT><BR>9. <FONT SIZE="6"><I>занятий на вторник</I></FONT>10. </P>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> позволяют, например, записать формулы: 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.

<font size="5"><b>Сергей Соловьев</b><br> означает:

<font size="5"> - высота шрифта 5;

<b> - жирный шрифт;

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

<i> - курсив.

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

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

Рис. 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).

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

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

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

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

Наши рекомендации