Основные теги HTML
Лабораторная работа, 04 Декабря 2014, автор: пользователь скрыл имя
Краткое описание
Цель работы:
Научить студентов:
• созданию первичного HTML-документа,
• использованию основных тегов,
• построению простейших HTML-документов.
Прикрепленные файлы: 1 файл
10-методические указания по проведению лабораторных занятий Web-технологии.docx
— 1.14 Мб (Скачать документ)
С использованием описанных тегов вы можете создать простой 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>
<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> <font sіze=2> sіze=2 </font> <br> <font sіze=6> sіze=6 </font> <br> <font sіze=7> sіze=7 </font> <br> |
sіze=1 sіze=2 …. sіze=6 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>
<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>
Escape-последовательности. Некоторые символы являются управляющими символами в HTML и не могут напрямую использоваться в документе в явном виде. Для их отображения используются символьные элементы CER (Character Entity Reference) или escape-последовательности.
Для представления символа "<" в теле документе HTML используется < , а для символа ">" используется > . Символьный элемент отображается в виде:
&имя_символа;
или
#номер_символа;
Например, знак меньше (<) изображается в виде: < или <.
Преимущество использования имени вместо номера состоит в том, что имя легче запомнить. Недостаток состоит в том, что не все браузеры поддерживают самые новые имена объектов, в то время как поддержка номеров объектов реализована очень хорошо почти во всех браузерах. Обратите внимание, что символьные объекты зависят от регистра символов.
Следующий пример позволит поэкспериментировать с символьными объектами.
<html>
<body>
<p>Это символьный объект: �</p>
<p>
Попробуйте заменить номер (000) на другой номер (например, 169), сохраните измененный текст и перезагрузите страницу в браузере, чтобы увидеть результат.
</p>
</body>
</html>
Неразрывный пробел. Наиболее часто используемым символьным объектом является неразрывный пробел –  . Обычно браузер удаляет лишние пробелы и вместо нескольких использует один, если необходимо вставить в текст пробелы, используется символьный объект  . Еще одно частое применение неразрывного пробела заполнение пустых ячеек в таблице, так большинство браузеров отображает ячейки, в которых ничего нет некрасиво.
Таблица наиболее часто используемых символьных объектов
Результат |
Описание |
Имя объекта |
Номер объекта |
неразрывный пробел |
|
  | |
< |
меньше |
< |
< |
> |
больше |
> |
> |
& |
амперсанд |
& |
& |
" |
двойная кавычка |
" |
" |
¢ |
цент |
¢ |
¢ |
£ |
фунт стерлингов |
£ |
£ |
¥ |
йена |
¥ |
¥ |
§ |
параграф |
§ |
§ |
© |
авторское право |
© |
© |
® |
зарегистрированная торговая марка |
® |
® |
× |
умножение |
× |
× |
÷ |
деление |
÷ |
÷ |
Полный список символьных объектов HTML можно посмотреть в приложении данного пособия или в справочниках объектов HTML.
Одной из особенностей является замена символов во 2-ой части символьной таблицы (после 127-ого символа) на escape-последовательности для передачи текстовых файлов с национальными языками по 7-битным каналам.
Внимание! Escape-последовательности чувствительны к регистру: НЕЛЬЗЯ использовать < вместо < .
Задания
Упражнение 1
1. Откройте программу Блокнот (Notepad).
2. Наберите текст: <Hl> Здравствуйте, друзья </Hl>.
3. Сохраните текст под именем l.htm в своей папке и закройте Блокнот.
4. Теперь найдите файл l.htm в своей папке и двойным щелчком по нему активизируйте броузер с Вашими данными. Теперь измените вид документа, для этого:
5. Вернитесь в
исходный текст с помощью команд
Вид – В виде HTML из броузера.
Откроется Блокнот, измените текст:
<H2> Здравствуйте, друзья </H2>
и сохраните его под прежним именем l.htm.
7. Вернитесь к броузеру через Панель задач и нажмите на панели инструментов кнопку Обновить. Размер символов в надписи изменится.
8. Вернитесь к Блокноту, измените текст:
<Hl>Здравствуйте,
друзья</Hl>
<H2> Здравствуйте, друзья </H2>
<H3>Здравствуйте,
друзья </H3>
и сохраните его под прежним именем l.htm в своей папке.
<H3>Здравствуйте, друзья </H3>
и сохраните его под прежним именем l.htm в своей папке.
9. Вернитесь к броузеру и нажмите на панели инструментов
кнопку Обновить.
10. Поэкспериментируйте,
оформляя текст с помощью других
тегов.
Упражнение 2
1. Создайте на диске отдельную папку для своей будущей web-страницы. Вы можете назвать ее своим именем (фамилией). Например, D:\Askarova.
2. Запустите Блокнот.
3. Наберите текст HTML, в который включите все теги, что мы разобрали. Между тегами <BODY> и </BODY> напишите несколько слов о себе.
4. В меню Файл (File) выполните команду Сохранить как. В диалоговом окне Сохранения файла найдите созданную папку, укажите в поле Тип файла Все файлы и сохраните файл, назвав его своим именем (фамилией), и указав расширение HTM. Например, D:\ASKAROVA\Alia.HTM
5. Закройте Блокнот. Вы уже создали реальный электронный документ. Можете посмотреть, что у Вас получилось. Для этого:
6. Откройте папку D:\ASKAROVA и загрузите файл Alia.HTM, при этом активизируется броузер Internet Explorer с Вашим файлом.
В меню Вид выполните команду В виде HTML. Откроется Блокнот с исходным текстом, как в упражнении 1. Измените некоторые теги или их атрибуты, а также вставленные в них тексты по Вашему усмотрению, далее сохраните исходный файл.
Затем перейдите в броузер щелчком по имени файла на Панели задач и нажмите кнопку Обновить. Снова перейдите в исходный текст и т.д. Обратите внимание на то, что если вы не забыли указать название в теге TITLE, то оно отразилось в верхней строке броузера.
Упражнение 3
Подготовьте HTML-документ, содержащий информацию о своем вузе так, чтобы размещенная информация имела несколько уровней вложенности.
Упражнение 4
Составьте HTML-документ с информацией о своей студенческой группе. При этом используйте теги параграфов, перевода строки и горизонтальных линий.
Упражнение 5
Подготовьте HTML-документ для размещения на web-странице Вашего расписания занятий.
Каждый день недели оформляйте как новый параграф и отделяйте друг от друга с помощью горизонтальной линии.
Текст снабжайте комментариями для служебного пользования (например, время начала и окончания пары, Фамилия, И.О. преподавателя).
Упражнение 6
Создайте объявление в виде HTML-документа о предстоящем заседании студсовета. Посмотрев текст объявления с помощью программы Іnternet Explorer измените и оформите его по вашему усмотрению. Окончательный вариант работы сохраните на диске.
Контрольные вопросы
Что такое Web-страница и какие существуют способы ее создания?
Дайте определения терминам языка HTML – тег (метка), гиперссылка.
Почему для разработки Web-страниц используется специальный язык разметки гипертекста?
Какова общая структура документа HTML?
Какие теги должны присутствовать в HTML-файле обязательно? Какова логическая структура Web-документа?
Почему нельзя использовать текстовый процессор Word для разработки Web-документов?
С помощью каких известных вам программ можно создавать Web-документы в коде HTML?
С помощью каких программ можно просматривать Web-документы?
Как создается абзац в языке HTML?
Укажите способы изменения размеров букв в HTML-документе.
Как проводится горизонтальная
линия в языке HTML?