Общие сведения об HTML
Web-документы используют язык HTML, который представляет собой набор текстовых символов, называемых элементами, содержащими данные и правила их форматирования.
Большинство элементов состоят из парных тегов: открывающего и закрывающего: открывающий тег – <B>, з акрывающий – </B>.
Пример:
<B> Этот текст набран жирным шрифтом </B>, а этот – нет.
Некоторые элементы не требуют закрывающего тега, например элемент <BR> – перевод строки. В ряде элементов, как, например, в элементе абзаца <P>, закрывающий тег ставится по желанию.
Открывающий тег может содержать атрибуты. Атрибуты помещаются внутри угловых скобок тега и должны быть отделены от имени элемента пробелом. В парных тегах атрибуты добавляются только к открывающему тегу. Большинство атрибутов требует указания значения атрибута:
<H1 ALIGN =”CENTER”> (выравнивание заголовка по левому краю).
Синтаксис типичного элемента HTML
|
< H1 ALIGN=”LEFT”> Пример заголовка </H1>
 |  | ||||
 |
Структура документа HTML
<HTML> … </HTML> – данный элемент говорит о том, что данный документ содержит информацию с HTML-разметкой.
<HEAD> … </HEAD> – данный элемент определяет заголовок HTML-документа.
<TITLE>… </TITLE> – данный элемент определяет название документа.
<BODY>…</BODY> – данный элемент окружает содержимое документа, выводимое на экран, в отличие от описательной информации, которая размещается в элементе <HEAD>.
Пример:
<HTML>
<HEAD><TITLE>Заголовок документа</TITLE></HEAD>
<BODY>
Текст документа
</BODY>
</HTML>
Синтаксис <BODY>:
<BODY BACKGROUND = ”имя файла” BGCOLOR = “название цвета” TEXT = “название цвета” > … </BODY>
BGCOLOR – цвет фона документа.
TEXT – устанавливает цвет текста для всего документа.
BACKGROUND – фоновый рисунок для всего документа
Пример:
<BODY BGCOLOR = ”GREEN” TEXT = ”RED”>
<BODY BACKGROUND = “FON.JPG”>
Форматирование документа
<P> … </P> – создание абзаца текста.
Синтаксис:
<P ALIGN = “CENTER | JUSTIFY | LEFT | RIGHT”> … </P>
ALIGN – выравнивание текста внутри абзаца.
По умолчанию атрибуту присваивается значение LEFT – выравнивание по левому краю. JUSTIFY – выравнивание по ширине, CENTER – центрирование текста, RIGHT – выравнивание по правому краю. Закрывающий тег </P> необязателен.
Примеp:
<P ALIGN = “RIGHT”> текст этого абзаца выровнен по правой стороне
<BR> – перевод строки в пределах абзаца. При необходимости вставки нескольких пустых строк в документ необходимо использовать тег <BR>.
Пример:
<HTML>
<HEAD><TITLE>Создание абзацев</TITLE></ HEAD>
<BODY>
Это первый абзац.
<P> А это второй абзац.
<BR> Начало новой строки.
</BODY>
</HTML>
<HR> – горизонтальная линейка.
Синтаксис:
<HR ALIGN = “CENTER | LEFT | RIGHT” SIZE=”пиксели” WIDTH = “пиксели | проценты” COLOR = “название цвета” >
ALIGN – выравнивание линии по горизонтали.
SIZE – толщина линии в пикселях.
WIDTH – ширина линии. Значение указывается либо в пикселях, либо в процентах от ширины экрана, например 80 %.
COLOR – цвет линии
Пример:
<HR ALIGN = “RIGHT” SIZE = 10 WIDTH = 50%>
(создаётся горизонтальная линейка шириной в 10 пикселей, занимающая половину ширины окна и расположенная справа).
<HR COLOR = RED SIZE = 3> (создаётся красная горизонтальная линейка шириной в 3 пикселей).
Создание заголовков
<H1> – <H6> с помощью данных элементов определяются заголовки документа.
<H1> … </H1> заголовок первого уровня (самый большой).
<H2> … </H2> заголовок второго уровня.
<H3> … </H3> заголовок третьего уровня.
<H4> … </H4> заголовок четвертого уровня.
<H5> … </H5> заголовок пятого уровня.
<H6> … </H6> заголовок шестого уровня (самый маленький).
Синтаксис:
<H1 ALIGN =”CENTER | JUSTIFY | LEFT | RIGHT”> … </H1>
ALIGN – выравнивание заголовка по горизонтали. По умолчанию данный атрибут имеет значение LEFT.
Примеры:
<H1> Это главный заголовок документа </H1>
<H2 ALIGN = ”CENTER”> Это заголовок второго уровня, выровнен по центру </H2>
<H3 ALIGN = ” RIGHT”> Это заголовок третьего уровня, он выровнен по правому краю </H2>
<H6> Самый маленький заголовок </H6>
Стили форматирования
<FONT> … </FONT> – управление параметрами шрифта. Позволяет задать размер, цвет и начертание шрифта.
Синтаксис:
<FONT COLOR = “имя цвета” FACE = “название шрифта” SIZE=”от 1 до 7> … </FONT>
COLOR – задание цвета текста.
FACE – атрибут указывает название шрифта или список названий шрифтов, разделённый запятыми. Браузер поочередно просматривает список шрифтов и отображает текст документа на экране первым шрифтом, который установлен на компьютере пользователя.
SIZE – данный атрибут задаёт размер шрифта. Числовые значения размера шрифта располагаются в диапазоне от 1 до 7, где 1 – наименьший размер шрифта, а 3 – размер шрифта, используемый по умолчанию.
Пример:
<FONT FACE = ”Helvetica, Comic Sans MS” SIZE=”4”> ……….. </FONT >
(данный шрифт немного больше текущего и выведен шрифтом Helvetica или Comic Sans MS)
<FONT COLOR = ”GREEN” FACE = ”АRIAL” SIZE=”5”> ………… </FONT >
(шрифт Arial, красного цвета, размер шрифта равен 5)
Форматирование текста
Для выделения текста в HTML-документах могут быть использованы различные стили шрифтов.
<B> … </B> – текст выводится полужирным шрифтом
<I> … </I> – наклонный шрифт
<U> … </U> – подчёркнутое написание символов
<S> … <S> –отображение перечёркнутого текста
<SUP> … </SUP> – данный тег выводит текст, помещённый в него, как верхний индекс.
<SUB> … </SUB> – данный тег выводит текст, помещённый в него, как нижний индекс.
<BIG> … </BIG> – вывод текста более крупным шрифтом. Чем обычный текст.
<SMALL> … </SMALL> – отображение текста, помещённого в этот тег шрифтом меньшего размера, чем размер, объявленный базовым для всего документа.
Гиперссылки
<A HREF=”filename”> текст_ссылки </A>
filename – имя файла или адрес Internet, на который надо перейти; текст_ссылки – текст гипертекстовой ссылки, который будет непосредственно показан в HTML-документе.
Примеры:
<A HREF = “my_work.htm”> Перейти на документ </A>
<A HREF = “https://www.yandex.ru”> Поиск в Internet </A>