ЛАБ11_HTML_1
.pdf
В языке 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>
11
Неразрывная строка <NOBR>
Если вы не хотите, чтобы броузер автоматически переносил строку, то вы можете обозначить ее тегами <NOBR> и </NOBR>. В этом случае броузер не будет переносить строку, даже если она выходит за границы экрана; вместо
этого броузер позволит горизонтально прокручивать окно. Например:
<NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения, где бы то ни было </NOBR>
Если же вы хотите все же позволить разбиение данной строки на две, но в строго запланированном месте, то вставьте тег <WBR> в это место. Напри-
мер:
<NOBR> Данная строка является самой длинной строкой документа,<WBR> которая не допускает какого-либо разбиения где бы то ни было </NOBR>
Цитата <BLOCKQUOTE>
Данный тег предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тегом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов. Например:
На первой лекции преподаватель произнес: <P> <BLOCKQUOTE>
Сегодня один из знаменательных дней для вашей группы. <BR>
Мы изучаем новую технологию, позволяющую Вам открыть свои webсайты с помощью простого языка разметки гипертекста – HTML-кода. </BLOCKQUOTE>
При отображении броузером данный текст будет выглядеть так:
12
Список базовых тегов 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> |
Цитата |
С использованием описанных тегов вы можете создать простой HTMLдокумент. Однако, следующие разделы позволят вам существенно улучшить внешний вид ваших документов и опишут новые возможности HTML-языка.
1.4. Тег FONT
Для управления внешним видом текста в HTML служит элемент FONT. Элемент FONT является контейнером, который открывается тегом < FONT > И закрывается тегом </FONT>. Если в открывающем теге не указаны атрибуты, то элемент FONT не будет оказывать никакого воздействия.
Элемент FONT можно использовать внутри любого текста. С помощью атрибутов FACE (гарнитура), SIZE (размер) и COLOR (цвет) можно радикально изменить внешний вида текста в документах.
FACE позволяет выбрать шрифт, который вы хотите использовать при отображении вашего документа. Параметр атрибута FACE — название шрифта. Название, указанное в атрибуте, должно точно совпадать с названием шрифта на компьютере пользователя — в противном случае броузер игнорирует этот атрибут и использует шрифт, заданный пользователем по умолчанию. Прописные и строчные буквы в названии шрифта игнорируются, а пробелы являются обязательными. Ниже показано, как задать определенный шрифт.
<HTML> <HEAD> <TITLE>Выбор типа шрифта</TITLE> </HEAD> <BODY>
<FONT FACE=”Arial”>Здесь выбран другой тип шрифта</FONT> </BODY>
</HTML>
Но для документа, размещенного в Интернете, нельзя предсказать, какие шрифты доступны на компьютере пользователя, поэтому в атрибуте FACE можно указать несколько названий шрифтов через запятую. Броузер просматривает список шрифтов слева направо и использует первый подходящий шрифт. Ниже используется несколько типа шрифтов.
<HTML> <HEAD> <TITLE>Пример выбора шрифта</TITLE> </HEAD> <BODY>
13
<FONT FACE=”Verdana”, “Arial”, “Helvetica”> Это пример выбора шрифта. </FONT>
</BODY>
</HTML>
В этом примере указан в качестве основного варианта шрифт Verdana, но кроме того перечислены также допустимые шрифты Arial и Helvetica.
Чтобы задать значения параметров шрифта для всего документа в целом, используют одиночный тег <BASEFONT>. Он содержит аналогичные атрибуты и задает значение вида, цвета и размера шрифта, используемое по умолчанию.
SIZE позволяет указать высоту знаков текста. Размер шрифта указывается в условных единицах от 1 до 7. Эти значения не соответствуют каким-либо единицам измерения, но чем больше значение, тем крупнее шрифт. По умолчанию используется значение 3. Атрибут size можно использовать двумя различными способами: указать абсолютный размер шрифта, например SIZE=5, или относительный размер, например SIZE=+2. Второй способ чаще применяется в том случае, если был указан основной шрифт basefont.
Приведенный ниже пример показывает эффект установки абсолютного размера шрифта:
Фрагмент HTML программы |
Результат на экране |
|
|
|
|
<font sіze=1> sіze=1 </font> <br> |
sіze=1 |
|
<font sіze=2> sіze=2 </font> <br> |
sіze=2 |
|
sіze=3 |
||
<font sіze=3> sіze=3 </font> <br> |
||
sіze=4 |
||
<font sіze=4> sіze=4 </font> <br> |
sіze=5 |
|
<font sіze=5> sіze=5 </font> <br> |
sіze=6 |
|
<font sіze=6> sіze=6 </font> <br> |
||
<font sіze=7> sіze=7 </font> <br> |
sіze=7 |
|
|
||
|
|
Следующий пример показывает эффект относительного размера шрифта при базовом размере шрифта, равном 3:
sіze=-2 sіze=-1 sіze=+1 sіze=+2 sіze=+3 sіze=+4
COLOR задает цвет текста таким же образом, как и название шрифта или его размер. Атрибут COLOR воспринимает либо шестнадцатеричное значение RGB-формата (например, #FF0000 – красный), либо стандартные названия цветов (например, RED — это тоже красный).
Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания размерности каждой компоненты цвета в шестнадцатиричном формате. Например, белый цвет обозначается "000000", черный - "FFFFFF", синий - "0000FF" и т.п.
<FONT COLOR="#FF0000"> Красный </FONT>
<FONT COLOR="#00FF00"> Зеленый </FONT>
14
<FONT COLOR="#0000FF"> Синий </FONT>
Красный Зеленый Синий Ниже приведен более полный пример с использованием этого атрибута.
<HTML>
<HEAD>
<TITLE>Пример выбора цвета</TITLE> </HEAD>
<BODY>
<FONT COLOR=”#FF0000”> Этот текст имеет красный цвет</FONT><BR> <FONT COLOR= “GREEN”>Этот текст имеет зеленый цвет</ FONT><BR >
</BODY> </HTML>
Попробуйте использовать различные цвета и типы шрифтов для различных фрагментов текста, как указано в следующем примере.
<HTML>
<HEAD> <TITLE> Управление стилем шрифта </TITLE> </HEAD>
<BODY>
<BASEFONT SIZE=5 FACE="Arial"> <HR>
Этот текст использует пятый размер шрифта Arial, заданного по умолчанию. <HR>
<P> <FONT SIZE= 2 FACE="Times New Roman" COLOR="GREEN">
Этот текст мельче и использует шрифт Times New Roman и другой – зеленый цвeт. </FONT>
<HR>
</BODY>
</HTML>
Результат этого фрагмента на экране:
1.5 Специальные теги HTML
Следующие теги позволят сделать ваш HTML-документ более функциональным.
Тег адреса <ADDRESS> используется для выделения автора документа и его адреса (например, e-mail). Синтаксис:
<ADDRESS> Адрес-автора </ADDRESS>
15
Escape-последовательности. Некоторые символы являются управляющими символами в HTML и не могут напрямую использоваться в документе в явном виде. Для их отображения используются символьные элементы CER (Character Entity Reference) или escape-последовательности.
Для представления символа "<" в теле документе HTML используется < , а для символа ">" используется > . Символьный элемент отображается в виде:
&имя_символа;
или
#номер_символа;
Например, знак меньше (<) изображается в виде: < или <. Преимущество использования имени вместо номера состоит в том, что имя
легче запомнить. Недостаток состоит в том, что не все браузеры поддерживают самые новые имена объектов, в то время как поддержка номеров объектов реализована очень хорошо почти во всех браузерах. Обратите внимание, что символьные объекты зависят от регистра символов.
Следующий пример позволит поэкспериментировать с символьными объектами.
<html>
<body>
<p>Это символьный объект: </p> <p>
Попробуйте заменить номер (000) на другой номер (например, 169), сохраните измененный текст и перезагрузите страницу в браузере, чтобы увидеть результат.
</p>
</body>
</html>
Неразрывный пробел. Наиболее часто используемым символьным объектом является неразрывный пробел –  . Обычно браузер удаляет лишние пробелы и вместо нескольких использует один, если необходимо вставить в текст пробелы, используется символьный объект  . Еще одно частое применение неразрывного пробела заполнение пустых ячеек в таблице, так большинство браузеров отображает ячейки, в которых ничего нет некрасиво.
Таблица наиболее часто используемых символьных объектов
Результат |
Описание |
Имя объекта |
Номер объекта |
|
неразрывный пробел |
|
|
|
|
|
|
< |
меньше |
< |
< |
|
|
|
|
> |
больше |
> |
> |
|
|
|
|
& |
амперсанд |
& |
& |
|
|
|
|
" |
двойная кавычка |
" |
" |
|
|
|
|
¢ |
цент |
¢ |
¢ |
|
|
|
|
£ |
фунт стерлингов |
£ |
£ |
|
|
|
|
¥ |
йена |
¥ |
¥ |
|
|
|
|
§ |
параграф |
§ |
§ |
|
|
|
|
16
|
© |
|
авторское право |
|
© |
|
© |
|
|
|
|
|
|
|
|
|
|
|
® |
|
зарегистрированная торговая марка |
|
® |
|
® |
|
|
|
|
|
|
|
|
|
|
|
× |
|
умножение |
|
× |
|
× |
|
|
|
|
|
|
|
|
|
|
÷ |
|
деление |
÷ |
÷ |
|
Полный список символьных объектов HTML можно посмотреть в приложении данного пособия или в справочниках объектов HTML.
Одной из особенностей является замена символов во 2-ой части символьной таблицы (после 127-ого символа) на escape-последовательности для передачи текстовых файлов с национальными языками по 7-битным каналам.
Внимание! Escape-последовательности чувствительны к регистру: НЕЛЬЗЯ использовать < вместо < .
Задания
Упражнение 1
1. Откройте программу Блокнот (Notepad).
2. Наберите текст: <Hl> Здравствуйте, друзья </Hl>.
3.Сохраните текст под именем l.htm в своей папке и закройте Блокнот.
4.Теперь найдите файл l.htm в своей папке и двойным щелчком по нему активизируйте броузер с Вашими данными. Теперь измените вид документа, для этого:
5. Вернитесь в исходный текст с помощью команд Вид – В виде HTML из броузера.
6.Откроется Блокнот, измените текст:
<H2> Здравствуйте, друзья </H2>
исохраните его под прежним именем l.htm.
7.Вернитесь к броузеру через Панель задач и нажмите на панели инструментов кнопку Обновить. Размер символов в надписи изменится.
8.Вернитесь к Блокноту, измените текст:
<Hl>Здравствуйте, друзья</Hl> <H2> Здравствуйте, друзья </H2> <H3>Здравствуйте, друзья </H3>
исохраните его под прежним именем l.htm в своей папке.
9.Вернитесь к броузеру и нажмите на панели инструментов
кнопку Обновить.
10.Поэкспериментируйте, оформляя текст с помощью других тегов.
Упражнение 2
1.Создайте на диске отдельную папку для своей будущей web-страницы. Вы можете назвать ее своим именем (фамилией). Например, D:\Askarova.
2.Запустите Блокнот.
3.Наберите текст HTML, в который включите все теги, что мы разобрали. Между тегами <BODY> и </BODY> напишите несколько слов о себе.
4.В меню Файл (File) выполните команду Сохранить как. В диалоговом окне Сохранения файла найдите созданную папку, укажите в поле Тип
файла Все файлы и сохраните файл, назвав его своим именем (фамилией), и указав расширение HTM. Например, D:\ASKAROVA\Alia.HTM
17
5.Закройте Блокнот. Вы уже создали реальный электронный документ. Можете посмотреть, что у Вас получилось. Для этого:
6.Откройте папку D:\ASKAROVA и загрузите файл Alia.HTM, при этом активизируется броузер Internet Explorer с Вашим файлом.
7.В меню Вид выполните команду В виде HTML. Откроется Блокнот с исходным текстом, как в упражнении 1. Измените некоторые теги или их атрибуты, а также вставленные в них тексты по Вашему усмотрению, далее сохраните исходный файл.
8.Затем перейдите в броузер щелчком по имени файла на Панели задач и нажмите кнопку Обновить. Снова перейдите в исходный текст и т.д. Обратите внимание на то, что если вы не забыли указать название в теге TITLE, то оно отразилось в верхней строке броузера.
Упражнение 3
Подготовьте HTML-документ, содержащий информацию о своем вузе так, чтобы размещенная информация имела несколько уровней вложенности.
Упражнение 4
Составьте HTML-документ с информацией о своей студенческой группе. При этом используйте теги параграфов, перевода строки и горизонтальных линий.
Упражнение 5
Подготовьте HTML-документ для размещения на web-странице Вашего расписания занятий.
Каждый день недели оформляйте как новый параграф и отделяйте друг от друга с помощью горизонтальной линии.
Текст снабжайте комментариями для служебного пользования (например, время начала и окончания пары, Фамилия, И.О. преподавателя).
Упражнение 6
Создайте объявление в виде HTML-документа о предстоящем заседании студсовета. Посмотрев текстобъявления с помощью программыІnternet Explorer измените и оформите его по вашему усмотрению. Окончательный вариантработысохраните на диске.
Контрольные вопросы
1.Что такое Web-страница и какие существуют способы ее создания?
2.Дайте определения терминам языка HTML – тег (метка), гиперссылка.
3.Почему для разработки Web-страниц используется специальный язык разметки гипертекста?
4.Какова общая структура документа HTML?
5.Какие теги должны присутствовать в HTML-файле обязательно? Какова логическая структура Web-документа?
6.Почему нельзя использовать текстовый процессор Word для разработки Web-документов?
18
7.С помощью каких известных вам программ можно создавать Webдокументы в коде HTML?
8.С помощью каких программ можно просматривать Web-документы?
9.Как создается абзац в языке HTML?
10.Укажите способы изменения размеров букв в HTML-документе.
11.Как проводится горизонтальная линия в языке HTML?
12.Перечислите все атрибуты тега FONT.
19
Лабораторная работа №2 Форматирование HTML-документа
Цель работы научить студентов:
форматированию фрагментов HTML-документа,
работе с гиперссылками и с изображениями в HTML-документах,
использованию шрифтового оформления.
1.Форматирование шрифта
HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста должен быть жирным, наклонным или подчеркнутым, то есть изменить физический стиль текста. С другой стороны, можно пометить некоторый фрагмент текста как имеющий некоторый отличный от нормального логический стиль, оставив интерпретацию этого стиля броузеру. Поясним это на примерах.
1.1. Физические стили
Под физическом стилем принято понимать прямое указание броузеру на модификацию текущего шрифта с использованием различных начертаний для выделения текстовой информации в документах. Вот короткий список стилей, поддерживаемых большинством броузеров:
bold (жирный)
italic (наклонный)
underline (подчеркивание)
mono spaced (type writer - с использованием фиксированных шрифтов) Вы можете комбинировать различные виды стилей, например жирный и на-
клонный.
Стиль |
Элемент или тег |
Результат |
bold |
<B> Этот текст жирный </B> |
Этот текст жирный |
italic |
<I> Этот текст наклонный </I> |
Этот текст наклонный |
mono |
<TT> Этот текст с моноширинным |
Этот текст с моноши- |
spaced |
шрифтом </TT> |
ринным шрифтом |
underline 
<U>Этот текст с подчеркиванием </U> 
Этот текст с подчеркиванием
Комбинирование стилей позволяет вам отображать в одной строке несколько элементов различными стилями, например:
<b>Жизнь</b> – <i>это <b>песня!</b></i>
Жизнь – это песня!
Таким образом, все, что находится между метками <B> и </B>, будет написано жирным шрифтом.
Текст между метками <I> и </I> будет написан наклонным шрифтом. Текст между метками <U> и </U> будет написан с подчеркиванием.
20