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