Основные теги HTML
Автор работы: Пользователь скрыл имя, 04 Декабря 2014 в 12:16, лабораторная работа
Краткое описание
Цель работы:
Научить студентов:
• созданию первичного HTML-документа,
• использованию основных тегов,
• построению простейших HTML-документов.
Прикрепленные файлы: 1 файл
10-методические указания по проведению лабораторных занятий Web-технологии.docx
— 1.14 Мб (Скачать документ)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> |
Цитата |