10-методические
указания по проведению лабораторных
занятий
Лабораторная работа №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-документе. |
Для изменения исходного текста
программы в виде 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.
На практике определить местоположение
этих основных структурных тегов можно
и при их отсутствии. Поэтому, если теги
<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 начинаются со
специального тега <!-- . Следует обратить
внимание на отсутствие закрывающей угловой
скобки. Любой текст, идущий за этим тегом,
рассматривается как комментарий и не
отображается на экране броузера при просмотре
документа. Заканчивают комментарий символами
-->. Комментарий может содержать любые
символы, кроме символа «больше» (>), и,
таким образом, не может включать в себя
теги.
Синтаксис комментария:
<!-- Это комментарий -->
Комментарии могут встречаться
в документе где угодно и в любом количестве.
В языке 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-документы
самостоятельно от начала до конца.
В языке HTML нет средств для создания
абзацного отступа («красной строки»),
поэтому для удобочитаемости текста между
абзацами применяют тег <P> или используется
тег <PRE>.
Тег преформатирования
– <PRE>, позволяет представлять текст
со специфическим форматированием на
экране. Предварительно сформатированный
текст заканчивается завершающим тегом
</PRE>. Внутри предварительно сформатированного
текста разрешается использовать:
символы табуляции (сдвиг на
8 символов вправо);
непропорциональный шрифт, устанавливаемый броузером.
Использование тегов, определяющих
формат абзаца, таких как <Hx> или <ADDRESS>,
будет игнорироваться броузером при помещении
их между тегами <PRE> и </PRE>.
Теперь рассмотрим, как можно
улучшить наш простой HTML-документ. Если
же надо осуществить переход на новую
строку без создания абзаца, можно использовать
тег <BR>. Он очень
удобно при публикации стихов. Следующий
пример демонстрирует использование этого
тега.
Исходный текст документа |
Результат на экране |
<html> <head> <title> Пример
3 </title> </head>
<body>
<H2> Стихотворения
Абая </H2>
<P> А того, кто жил
не любя, <BR> Человеком назвать нельзя.
<BR>
Пусть ты наг и нищ – у тебя <BR>
Все же есть семья и друзья. <BR>
<P>Ясный свет юных лет, <ВR> Вера
в жизнь и мечту, <ВR>
С чем сравнить внешний цвет,
<ВR> Юных лет красоту! <ВR>
</body>
</html> |
Стихотворения Абая
А того, кто жил не любя,
Человеком назвать нельзя.
Пусть ты наг и нищ – у тебя
Все же есть семья и друзья.
Ясный свет юных лет,
Вера в жизнь и мечту,
С чем сравнить внешний цвет,
Юных лет красоту! |
Дополнительный атрибут позволяет
расширить возможности тега <BR>.
<BR CLEAR=left|right|all>
Данный атрибут позволяет выполнить
не просто перевод строки, а разместить
следующую строку, начиная с чистой левой
(left), правой (right) или обоих
(all) границ окна
броузера. Например, если рядом с текстом
слева встречается рисунок, то можно использовать
тег <BR> для смещения текста ниже рисунка:
<p> Эта моя собачка <BR CLEAR=left>
<img src="dog.jpg" align=baseline>
Ее кличка Актос </p>
Неразрывная строка
<NOBR>
Если вы не хотите, чтобы броузер
автоматически переносил строку, то вы
можете обозначить ее тегами <NOBR> и
</NOBR>. В этом случае броузер не будет
переносить строку, даже если она выходит
за границы экрана; вместо этого броузер
позволит горизонтально прокручивать
окно. Например:
<NOBR> Данная
строка является самой длинной
строкой документа, которая не
допускает какого-либо разбиения,
где бы то ни было </NOBR>
Если же вы хотите все же позволить
разбиение данной строки на две, но в строго
запланированном месте, то вставьте тег
<WBR> в это место.
Например:
<NOBR> Данная
строка является самой длинной
строкой документа,<WBR> которая не
допускает какого-либо разбиения где бы
то ни было </NOBR>
Цитата <BLOCKQUOTE>
Данный тег предназначен для
обозначения в документе цитаты из другого
источника. Текст, обозначенный тегом
<BLOCKQUOTE>, отступает от левого края документа
на 8 пробелов. Например:
На первой лекции
преподаватель произнес: <P>
<BLOCKQUOTE>
Сегодня один из знаменательных дней для
вашей группы. <BR>
Мы изучаем новую технологию, позволяющую
Вам открыть свои web-сайты с помощью простого
языка разметки гипертекста – HTML-кода.
</BLOCKQUOTE>
При отображении броузером данный
текст будет выглядеть так:
Список базовых тегов HTML
Стартовый |
Завершающий |
Описание |
<HTML> |
</HTML> |
Обозначение HTML-документа |
<HEAD> |
</HEAD> |
Заголовочная часть документа |
<TITLE> |
</TITLE> |
Заголовок документа |
<BODY> |
</BODY> |
Тело документа |
<H1> |
</H1> |
Заголовок абзаца первого уровня |
<H2> |
</H2> |
Заголовок абзаца второго уровня |
<H3> |
</H3> |
Заголовок абзаца третьего уровня |
<H4> |
</H4> |
Заголовок абзаца четвертого уровня |
<H5> |
</H5> |
Заголовок абзаца пятого уровня |
<H6> |
</H6> |
Заголовок абзаца шестого уровня |
<P> |
</P> |
Абзац |
<PRE> |
</PRE> |
Форматированный текст |
<BR> |
|
Перевод строки без конца абзаца |
<BLOCKQUOTE> |
</BLOCKQUOTE> |
Цитата |