ЛАБ11_HTML_1
.pdfМИНИСТЕРСТВО ОБРАЗОВАНИЯ и НАУКИ
РЕСПУБЛИКИ КАЗАХСТАН
КАЗАХСКИЙ НАЦИОНАЛЬНЫЙ УНИВЕРСИТЕТ ИМ. АЛЬ-ФАРАБИ
Кафедра информационных систем
Б. Бурибаев
для студентов естественно-технических специальностей
Алматы
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> |
</HTML> |
<B> |
</B> |
<HEAD> |
</HEAD> |
<H3> |
</H3> |
Примеры одиночных тегов HTML:
<BR> <HR> <BASEFONT> |
<FRAME> |
<INPUT> |
<P> |
Примеры тегов HTML с атрибутами: |
|
|
|
<BODY BGCOLOR="YELLOW" TEXT="BLUE" > … |
|
|
|
<HR COLOR=RED SIZE=16 WIDTH=100%> |
… |
|
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>
<P> |
Это простейший пример HTML-документа.</P> |
<P> |
Этот *.htm-файл может быть одновременно открыт и в Notepad, и в |
|
Internet Explorer. Сохранив изменения в Блокнот, просто сохраните как |
|
ИМЯ.HTM . Далее закройте и загрузите документ ИМЯ.HTM , |
|
чтобы увидеть эти изменения реализованными в HTML-документе.</P> |
</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