ЛАБ11_HTML_1

МИНИСТЕРСТВО ОБРАЗОВАНИЯ и НАУКИ

РЕСПУБЛИКИ КАЗАХСТАН

КАЗАХСКИЙ НАЦИОНАЛЬНЫЙ УНИВЕРСИТЕТ ИМ. АЛЬ-ФАРАБИ

Кафедра информационных систем

Б. Бурибаев

для студентов естественно-технических специальностей

Алматы

2008

УДК СОСТАВИТЕЛИ: Бурибаев Б.

Лабораторный практикум по созданию web-документов. –Алматы: КазНУ им.аль-Фараби, 2008. -56 с.

Лабораторный практикум предназначен для студентов естественнотехнических специальностей, изучающих информационные технологии по дисциплине «web-технологии».

Приведенный материал соответствует динамичным изменениям предметной области дисциплины. В соответствии с современными требованиями сформирована структура и содержание лабораторных работ.

Рецензент: Заведующий кафедрой информационных систем КазахстанскоБританского технического университета, к.т.н., доцент Длимбетов Б.К.

Печатается по плану издания КазНУ им. Аль-Фараби

Бурибаев, 2008 г.

2

Введение в язык HTML

Все Web-страницы Интернета имеют одну общую черту — они созданы с помощью средств языка HTML. HTML — не обычный язык программирования, хотя процесс создания Web-страницы очень близок к процессу программирования. HTML — это язык разметки гипертекста. Он определяет правила, согласно которым обычный текст представляется в виде Web-страниц.

World Wide Web и HTML

Современный этап развития Интернета начался в начале 90-х годов прошлого века с появлением нового протокола обмена информацией. Этот протокол называется HTTP (HyperText Transfer Protocol — протокол передачи гипертекста). Вместе с этим протоколом появилась и служба World Wide Web (часто также называемая WWW или просто Web), которая представляет собой обширную сеть серверов HTTP, передающих файлы через Интернет.

Основную часть этих файлов представляют собой Web-страницы – специальные файлы, написанные на языке HTML (HyperText Markup Language — язык разметки гипертекста). Web-страницы публикуются, в Интернете путем размещения таких файлов на серверах HTTP (Web-узлах). Содержание Webстраниц может быть разным и посвященным совершенно произвольным темам, но все они используют одну и ту же основу — язык HTML. Документы HTML обычно имеют расширение *.НТМ или *.HTML

Язык HTML появился одновременно со службой World Wide Web и развивался вместе с ней, постепенно вбирая в себя новые черты, которые позволяли создавать все более и более впечатляющие Web-страницы. Он является основой World Wide Web и одновременно причиной ее широчайшей популярности. Смысл и назначение языка HTML можно понять, исходя из его названия.

Гипертекст — это текст, в который встроены специальные коды, управляющие дополнительными элементами, такими как форматирование, иллюстрации, мультимедийные вставки и гиперссылки на другие документы. Под разметкой понимается вставка в текст этих кодов, определяющих то, как итоговый гипертекстовый документ должен отображаться специальной программойброузером. Разметка может быть простой или сложной, но в любом случае исходный текст сохраняется в документе в неизменном виде.

Но самое важное слово в этом описании — язык. HTML представляет собой компьютерный язык, в некотором смысле родственный языкам программирования. Он включает достаточно строгие правила, которые необходимо соблюдать, чтобы получить правильные результаты.

Назначение языка HTML

Несмотря на то, что Web-страницы появляются на экране компьютера в отформатированном виде, язык HTML не предназначен для форматирования документов, поскольку жесткое задание оформления и точное позиционирование элементов текста на странице приводит к ограничениям, недопустимым в Интернете.

3

Так, например, когда мы форматируем текст с помощью текстового процессора Word, мы однозначно определяем, как должен выглядеть этот текст при печати на совершенно определенном принтере и на бумаге заданного формата.

Когда документ размещен в Интернете, невозможно предсказать, какой компьютер будет использован для его просмотра, да и будет ли вообще у этого компьютера монитор.

Может быть, текст появится на экране компьютера, работающего в системе Windows в окне одного из современных броузеров. Может быть, это будет текстовый броузер (неспособный отображать графику), работающий в системе MS-DOS. Возможно, текст документа вообще не будет отображаться на экране, а будет воспроизводиться вслух с помощью синтезатора речи. Для слепого пользователя документ может выводиться на специальное устройство шрифтом Брайля.

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

Например, если в тексте встречается заголовок, то код HTML просто указывает, что соответствующий фрагмент является заголовком. Получив такой код, программа просмотра (броузер) сама «решает», что ей делать с заголовком. Возможно, она отобразит его более крупным шрифтом, а может быть выровняет по центру экрана. Возможно, что синтезатор речи, воспроизводящий текст документа, использует код заголовка для того, чтобы повысить громкость и сделать необходимую интонационную паузу.

Язык HTML все-таки имеет некоторые команды форматирования, но общий курс на разделение содержания и оформления документа выдерживается четко. В последней версии HTML-4.0 использовать команды форматирования, как правило, не рекомендуется.

Структура документа

Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тег, который встречается в документе, должен быть тегом <HTML>. Данный тег сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Минимальный HTMLдокумент будет выглядеть так:

<HTML> ...тело документа... </HTML>

Заголовочная часть документа <HEAD>. Тег заголовочной части документа должен быть использован сразу после тега <HTML> и более нигде в теле документа. Данный тег представляет из себя общее описание документа. Избегайте размещать какой-либо текст внутри тега <HEAD>. Стартовый тег <HEAD> помещается непосредственно перед тегом <TITLE> и другими тегами, описывающими документ, а завершающий тег </HEAD> размещается сразу после окончания описания документа. Например:

4

<HTML>

<HEAD>

<TITLE> Список студентов </TITLE> </HEAD>

...

Внимание! Технически, стартовые и завершающие теги типа <HTML>, <HEAD> и <BODY> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тегов позволяет WEB-броузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.

Заголовок документа <TITLE>. Большинство WEB-броузеров отображают содержимое тега <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-броузером. Заголовок, ограниченный тегами <TITLE> и </TITLE>, размещается внутри <HEAD>-тегов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.

Теги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.

Тело документа <BODY>. Тело документа должно находиться между тегами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Теги HTML

Коды языка HTML, с помощью которых выполняется разметка исходного текста, называются тегами. Teг — это набор символов. Все теги начинаются с символа «меньше» (<) и заканчиваются символом «больше» (>). Пару этих символов иногда называют угловыми скобками. После открывающей угловой скобки идет ключевое слово, определяющее тег.

HTML-теги могут быть условно разделены на две категории:

теги, определяющие, как будет отображаться WEB-броузером тело документа вцелом

теги, описывающие общие свойства документа, такие как заголовок или автор документа

Основное преимущество HTML заключается в том, что документ может быть просмотрен на WEB-броузерах различных типов и на различных платформах.

Каждый тег в языке HTML имеет специальное назначение. Регистр букв в названиях тегов не имеет значения — можно использовать как строчные, так и прописные буквы, хотя общепринято использовать прописные буквы, чтобы теги отличались от обычного текста документа.

Как правило, один тег HTML воздействует только на часть документа, например на абзац. В таких случаях используют парные теги: открывающий и закрывающий. Открывающий тег создает эффект, а закрывающий — прекращает

его действие. Закрывающие теги начинаются с символа косой черты (/).

5

Некоторые теги дают разовый эффект в месте своего появления. В этом случае необходимости в закрывающем теге нет, и он не употребляется.

Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тег игнорируется целиком.

При отображении документа в броузере сами теги не отображаются, но влияют на способ отображения документа.

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

Некоторые атрибуты требуют указания значения атрибута. Это значение отделяется от ключевого слова знаком равенства (=). Значение атрибута должно заключаться в кавычки, но во многих случаях эти кавычки могут опускаться без какого-либо вреда. Закрывающие теги никогда не содержат атрибутов.

Примеры использования тегов HTML:

<HTML>

<HEAD>

<ТIТLЕ> Функциональные разделы документа </ТIТLЕ> </HEAD>

<BODY>

<Н1>Главный заголовок</Н1> <Н2>Подзаголовок</Н2>

<Р>Эти строки изображаются слитно, несмотря на то, что в документе они отделены друг от друга

<Р> Закрывающий тег абзаца не обязателен. <Р>Тег начала абзаца более важен, чем реальный переход на новую строку. <HR>

Текст после горизонтальной линейки <BR> разбит на две строки.

</BODY>

</HTML>

Примеры парных тегов HTML:

Примеры одиночных тегов HTML:

6

Лабораторная работа №1 Основные теги HTML

Цель работы научить студентов:

созданию первичного HTML-документа,

использованию основных тегов,

построению простейших HTML-документов.

1.1.Подготовка HTML-документа

Документ HTML состоит из основного текста документа и тегов разметки, которые, как мы уже знаем, являются наборами обычных символов. Таким образом, документ HTML — это, по существу, обычный текстовый файл. Для его создания можно использовать любой текстовый редактор, хотя бы и тот простейший редактор Блокнот, который входит в состав Windows 98/2000/XP.

Простейший HTML-документ – это просто текстовый файл с расширением ИМЯ.htm. Можно набрать следующий самый простой HTML-документ в блокноте:

<html>

<head> Моя первая страница <title> Пример 1 </title>

</head>

<body>

<H1>

Привет!

</H1>

<P> Это простейший пример HTML-документа. </P> <P>

Этот *.htm-файл может быть одновременно открыт

и в Notepad, и в Internet Explorer. Сохранив изменения в Notepad, просто нажмите кнопку Обновить в Internet Explorer,

чтобы увидеть эти изменения реализованными в HTML-документе. </P>

</body>

</html>

Теперь нужно этот текст сохранить на Рабочем столе под именем, например, PROBA.HTM, далее его нужно закрыть. Для просмотра этого текста как в Интернете, нужно загрузить с рабочего стола снова файл PROBA. HTM. Загрузится этот текст в броузере Internet Explorer.

Результат этого фрагмента HTML-программы на экране:

Моя первая страница

Привет!

Это простейший пример HTML-документа.

Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Internet Explorer. Сохранив изменения в Notepad, просто нажмите кнопку Обновить в Internet Explorer, чтобы увидеть эти изменения реализованными в HTML-документе.

7

Для изменения исходного текста программы в виде HTML-программы выполните команду Вид – В виде HTML и после каждого изменения нужно выполнить команду Файл – Сохранить.

Далее, чтобы просмотреть эти изменения в броузере нужно перейти в Internet Explorer и выполнить команду Обновить.

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

<html> <head> <title> Пример 1</title> </head> <body> <H1>Привет!</H1>

</body> </html>

Результат работы на экране:

Привет!

Это простейший пример HTML-документа.

Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Internet Explorer. Сохранив изменения в Блокнот, просто сохраните как ИМЯ.HTM . Далее закройте и загрузите документ ИМЯ.HTM, чтобы увидеть эти изменения реализованными в HTML-документе.

1.2. Теги определения структуры документа HTML

Все документы HTML имеют строго заданную структуру. Документ должен начинаться с тега <HTML> и заканчиваться соответствующим закрывающим тегом </НТМL>. Эта пара тегов сообщает броузеру, что перед ним действительно документ HTML. Тег <HTML> должен открывать документ и, аналогично, метка </html> должна завершать HTML-документ.

Документ HTML состоит из раздела заголовков и тела документа, идущих именно в таком порядке. Раздел заголовков заключен между тегами <HEAD> и </HEAD> и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги <TITLE> и </TITLE >, между которыми размещают заголовок документа. Все, что находится между тегами <title> и </title>, толкуется броузером как название документа. Internet Explorer, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер.

Сам текст документа располагается в теле документа. Тело документа располагается между тегами <BODY> и </BODY>.

Четыре перечисленных парных тега определяют основную структуру документа HTML. Они встречаются (или их наличие подразумевается) во всех документах HTML.

8

На практике определить местоположение этих основных структурных тегов можно и при их отсутствии. Поэтому, если теги <HTML>, <HEAD> и <BODY>, а также соответствующие им закрывающие теги опущены, то программа-броу- зер может сама определить то место, где они должны были находиться. Тег <TITLE>, определяющий заголовок документа, считается обязательным, но и его пропуск не вызовет никаких изменений в современных броузерах. Но всетаки при создании Web-страниц опускать все эти теги не рекомендуется, ведь заранее неизвестно, как поведет себя конкретный броузер, установленный на компьютере пользователя.

1.3. Основные теги HTML-документа

Язык HTML предназначен для описания функциональных разделов документа. В большинстве документов основными разделами являются заголовки и абзацы.

HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от <Н1> и </Н1> до <Н6> и </Н6>. Заголовок первого уровня – самый крупный, шестого уровня, естественно – самый мелкий. Реально на экране компьютера все эти заголовки изображаются шрифтами полужирного начертания.

В соответствии с идеологией HTML текст, который действительно является заголовком, следует пометить с помощью одного из этих тегов, В составе языка имеются теги форматирования, изменяющие размер и начертание шрифта, но пользоваться ими в этом случае не рекомендуется.

Для обозначения обычных абзацев в языке HTML используют тег <Р> (и соответствующий закрывающий тег </Р>). Теги, описывающие абзацы, являются необязательными. Однако при наличии этих тегов броузеры четко отслеживают границы между абзацами.

Теги <H1> ... <H6> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), <P ALIGN=left|center|right> позволяют выравнивать абзац по левому краю, центру и правому краю соответственно. Например:

<H1 ALIGN=CENTER> Выравнивание заголовка по центру </H1>

или

<P ALIGN=RIGHT> Образец абзаца с выравниванием по правому краю </P>

Вы можете центрировать все элементы документа в окне броузера. Для этого можно использовать тег <CENTER>. Все элементы между тегами <CENTER> и </CENTER> будут находиться в центре окна.

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

Комментарии

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

9

Следует обратить внимание на отсутствие закрывающей угловой скобки. Любой текст, идущий за этим тегом, рассматривается как комментарий и не отображается на экране броузера при просмотре документа. Заканчивают комментарий символами -->. Комментарий может содержать любые символы, кроме символа «больше» (>), и, таким образом, не может включать в себя теги.

Синтаксис комментария:

<!-- Это комментарий -->

Комментарии могут встречаться в документе где угодно и в любом количестве.

В языке HTML для создания абзаца броузер обычно вводит пустую строку. Важным средством создания разделителей в тексте являются горизонтальные полоски-линейки, визуально отделяющие разные части документа друг от друга. Горизонтальная линейка создается тегом <HR>. Это одиночный тег, не имеющий соответствующего закрывающего тега.

При применении этих тегов важно принять во внимание, что все кратные («лишние») пробелы между словами и переходы на новую строку при воспроизведении документа HTML игнорируются.

Подытожим все, что мы знаем, и поработаем с помощью примера 2:

<html>

<head>

<title> Пример 2 </title> </head>

<body>

<H1 ALIGN=CENTER> Привет! </H1> <HR>

<H2>Это чуть более сложный пример HTML-документа </H2>

<P> Теперь мы знаем, что абзац можно выравнивать не только влево, </P> <P ALIGN=CENTER>но и по центру</P> <P ALIGN=RIGHT>или по

правому краю.</P> </body>

</html>

Результат на экране:

С этого момента Вы знаете достаточно, чтобы создавать простые HTMLдокументы самостоятельно от начала до конца.

10