
- •1. Знакомство с языком разметки гипертекста html
- •2. Структура html-документа
- •3. Комментарий в html-коде
- •4. Атрибуты тега
- •5. Форматирование текста
- •5.1 Отступы от края
- •5.2 Фон странички
- •5.3 Цвет текста
- •5.4 Курсив, жирный шрифт и подчеркивание
- •5.6 Абзацы
- •5.7 Абзац с атрибутами
- •5.8 Разрыв строки
- •5.9 Специальные символы
- •5.10 Заголовки
- •5.11 Шрифты
- •5.12 Списки
- •6. Гиперссылка
- •6.1 Атрибут гиперссылки href
- •6.2 Атрибут гиперссылки target
- •6.3 Цвет гиперссылок
- •6.4 Ссылки, которые не являются ссылками
- •7 Графические объекты на web-странице
- •7.1 Вставка графики
- •7.2 Размер изображения
- •7.3 Подсказка
- •7.4 Выравнивание картинки по горизонтали. Обтекание текстом
- •7.5 Выравнивание картинки по вертикали относительно текущей строки
- •7.6 Рамки и отступы
- •7.7 Ссылки-картинки
- •7.7.1 Карта изображений
- •7.7.2 Атрибуты зон
- •8. Связь с поисковыми системами
5.9 Специальные символы
Кавычки. В полиграфии существует три типа кавычек: елочки, верхние и рукописные
лапки. Они обозначаются следующим образом:
елочки - « и »
верхние - “ и ”
рукописные - „ и ”
Дефис и тире. В полиграфии существует три знака: длинное тире, короткое тире и
дефис. Из них на компьютерной клавиатуре есть только один – последний. Отсутствующие
символы записываются так:
короткое тире - –
длинное тире - —
10
5.10 Заголовки
Язык HTML поддерживает 6 уровней заголовков от <H1> до <H6> (чем больше цифра,
тем мельче шрифт). По умолчанию браузеры выводят заголовки жирным начертанием. Для
создания заголовков используется конструкция:
<H1> Введение</H1>
<H2>1. Использование информационных технологий при решении
экономических задач </H2>
<H3>1.1 Классификация ИТ </H3>
В браузере это будет выглядеть следующим образом (рис.6):
Рис. 6. Отображение заголовков разного уровня в браузере
Заголовки так же можно выравнивать по левому краю (по умолчанию), по правому
краю и по центру. Для этого используется атрибут align с параметрами соответственно left,
right, center.
Пример:
<h1 align=center >Заголовок</h1>
Заголовок будет отцентрирован.
5.11 Шрифты
Вся работа со шрифтами в HTML формируется одним тегом <FONT>, но у этого тега
есть три атрибута, которые отвечают за его имя, размер и цвет. Атрибут, отвечающий за имя
шрифта, называется face. В код это заносится так, <FONT face=Arial> ……..
</FONT>, но если имя шрифта состоит из двух или более слов, то название помещается в
кавычки.
Атрибут, отвечающий за размер шрифта, называется size. В код это заносится так,
<FONT size=5> ……… </FONT>. Размер задается в диапазоне от 1 до 7 (чем больше
цифра, тем крупнее шрифт).
Атрибут, отвечающий за цвет шрифта, называется color. В код это заносится так,
<FONT color=red> ………. </FONT>.
Также можно использовать вложенные комбинации, при этом порядок атрибутов не
имеет значения, например:
<FONT face=Arial size=5 color=red> <I> Продолжаем изучать HTML
</I></FONT>
11
Рис. 7. Форматирование шрифта
5.12 Списки
Списки в HTML бывают трех видов: неупорядоченные, упорядоченные и списки
определений.
Неупорядоченные списки создаются тегами <ul> </ul>. Название тега <ul> -
происходит от английских слов «unordered list», что означает «неупорядоченный список».
Внутри помещается весь список. Отдельные элементы списка отмечаются тегом <li> – от
английского «list item» («элемент списка»). Закрывающий тег для <li> не требуется. У
команд <ul> и <li> можно указать атрибут type, который принимает одно из трех
значений: disc, square, circle.
Пример:
В html-коде
На странице браузера
<ul>
<li> Первый элемент
<li> Второй элемент
<li> Третий элемент
</ul>
<ul type=circle>
<li> Первый элемент
<li type=square> Второй элемент
<li> Третий элемент
</ul>
Упорядоченные списки создаются тегами <ol> и </ol> (от английского «ordered list»
или «упорядоченный список»). У тега <ol> есть два атрибута type и start. Атрибут type
задает тип нумерации:
1 — арабские числа 1, 2, 3, ...;
a — прописные буквы a, b, c, ...;
A — заглавные буквы A, B, C, ...;
I — маленькие римские числа i, ii, iii, ...;
I — большие римские числа I, II, III, ...
Атрибут start указывает, с какого номера начинать список.
У тега <li> можно указать тоже два атрибута: type и value. С помощью value
можно задать номер элемента в списке.
12
Пример:
В html-коде
На странице браузера
<ol type=i start=5>
<li> Первый элемент
<li> Второй элемент
<li type=1> Третий элемент
</ol>
<ol type=I>
<li> Первый элемент
<li> Второй элемент
<li value=10> Третий элемент
</ol>
Списки определений. Для создания списка используются теги <dl> и </dl>. Элемент
списка создается двумя тегами <dt> и <dd>. Они не требуют закрывающих тегов. Первый
тег задает термин, второй - определение. Для большей наглядности термин можно выделить
жирным шрифтом.
Пример:
В html-коде
<dl>
<dt> <b> WWW (World Wide Web) </b>
<dd> Всемирная Паутина — основная служба в сети Интернет,
позволяющая получать доступ к информации на любых серверах,
подключенных к сети
<dt> <b> DNS (Domain Name System) </b>
<dd> Система доменных имен — распределенная служба
формирования имен узлов, используемая в сети Интернет,
устанавливающая соответствие между именами узлов и доменов, с
одной стороны, и IP-адресами, с другой стороны.
</dl>
На странице браузера
Кроме того, в HTML возможно создавать многоуровневые списки. Это делается
способом, который абсолютно подобен способу вложенных тегов, который описан в начале
этой работы.
13