Форматирование документа




Общие сведения об 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>

 



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2018-02-25 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: