Вторая строка вторая строка и т.д.

Как видим перенос на новую строку в окне браузера выполняется по <BR> несмотря на то что, в редакторе этот текст записан в одной строке. Ниже приведены основные оформительские элементы HTML.

Элемент базового шрифта:

<BaseFont

Color=red

Face=”Times New Roman”

Size=3>

Данный элемент задает тип, размер и цвет шрифта, которые применяются по умолчанию для всего документа, Этот элемент необходимо размещать сразу же за элементом <BODY>.

В атрибуте Color указывается цвет символов одним из допустимых английских слов (в этом случае слово можно не заключать в кавычки) или в палитре красный-зеленый-синий (в этом случае значение надо заключать в кавычки) точно также, как это описано в соответствующем атрибуте элемента <BODY>.

В атрибуте Face указывается название допустимого шрифта с соблюдением принятого написания шрифта, т.е. с учетом прописных и заглавных букв в соответствующих местах.

В атрибуте Size указывается число от 1 до 7, где: 1 – самый малый размер шрифта, 7 – самый большой размер шрифта.

По умолчанию полагается шрифт Times New Roman размером 3 черного цвета. Элемент фонового звука:

<BGSound

Balance=0

Loop=100

Volume=-500

SRC=”aaa.wav”>

Атрибут SRC указывает вместе с расширением имя звукового файла, предназначенного для воспроизведения. Форматами файла могут быть .wav, .au, .mid. Звуковой файл должен быть помещен в туже папку, где находиться файл данного документа.

Атрибут Loop указывает на то, сколько раз будет воспроизводиться звуковой файл. Если вместо числа указать ключевое слово infinite, то файл будет воспроизводиться бесконечно.

Атрибут Balance может содержать число от -10000 до 10000 и балансирует звук между динамиками (значение 0 – одинаковое звучание в обоих динамиках).

Атрибут Volume может принимать значение от -10000 до 0 и определяет громкость звука.

Элемент комментария:

<!- комментарий ->

Этот элемент служит только для комментирования текста HTML-документа и его содержимое в окне браузера не отображается.

Элемент заголовков:

<Н1 Align = Right> текст </Н1>

Center – по центру

Left– слева

Justify – по ширине окна

Текст, помещенный между <H1> и </H1>, будет являться заголовком.

Вместо H1 можно указывать H2, H3, H4, H5, H6. Элемент H1 отображает заголовок самым большим шрифтом, элемент Н6 – соответственно самым малым шрифтом. Атрибут Align используется для выравнивания заголовка относительно окна браузера. Значение Right выравнивает заголовок по правой границе окна браузера, Center – по центру, Left – по левой границе окна браузера.

Элемент центрирования текста:

<Center>текст</Center>

Элемент вставки горизонтальной линии:

<HR Align = Center Width = "50%" Size = 2 Color=Red>

Атрибут Align определяет выравнивание линии.

Атрибут Width определяет длину горизонтальной линии в пикселах или в процентах относительно ширины экрана.

Атрибут Size определяет толщину горизонтальной линии в пикселах.

Атрибут Color определяет цвет линии (см. описание значений цветов для элемента Body).

Шрифтовые элементы:

Действие любого из приведенных ниже элементов распространяется на текст, который этот элемент ограничивает.

<I>текст</I> – курсив;

<В>текст</В> – выделенный (полужирный) текст;

<Strong>текст</Strong> – сильное выделение (жирный) текста

<U>текст</U> – подчеркивание;

<Strike>текст</Strike> – зачеркнутый текст;

<ТТ>текст</ТТ> – моноширинный шрифт (как на пишущей машинке);

<Big> текст </Big> – большой шрифт. Этот элемент увеличивает размер текста на определенную величину. Можно использовать вложенные друг в друга элементы <Big> для многократного увеличения размера шрифта;

<Small> текст </Small> – малый шрифт. Этот элемент уменьшает размер шрифта на определенную величину. Можно использовать вложенные друг в друга элементы <Small> для многократного уменьшения размера шрифта. В ниже приведенном примере:

<Big><Small> текст</Small></Big>

текст будет печататься стандартным размером шрифта, так как <Big> увеличивает размер шрифта, а элемент <Small> уменьшает его на эту же величину.

<Sub> текст </Sub> – подстрочный текст (нижний индекс);

<Sup> текст </Sup> – надстрочный текст (верхний индекс);

<Font Color=red Size=4>текст</Font> – используется для указания характеристик шрифта. Чаще всего используются два атрибута элемента <Font>: атрибут задания цвета символов Color (значения этого атрибута такие же, как и для элемента <Body>) и атрибут указания размера шрифта Size (значением этого атрибута должно быть число от 1 для самого малого размера шрифта до 7). Вместо элемента <Font> рекомендуется использовать листы стилей.

Блочные элементы:

<p>текст</p> – новый абзац;

<BlockQuote> текст </BlockQuote> – текст отображается с отступом от края листа, текст начинается с нового абзаца;

<PRE>текст</PRE> – определяет предварительно отформатированный текст. Переносы на новую строку и количество пробелов между словами будут такими же, как и в редакторе БЛОКНОТ;

<div> текст </div> – блок текста. Практически всегда используется совместно с листами стилей.

<em>текст</em> – выделенный фрагмент текста. Очень часто используется совместно с листами стилей для придания фрагменту текста заданных свойств.

<acronym Title=”Республика Беларусь”>РБ</acronym>– аббревиатура и ее расшифровка. Расшифровка определяется атрибутом Title и появляется при установке курсора мыши на аббревиатуру.

<marquee behavior=”alternate” scrolldelay=100 width=500 height=30> текст </marquee> – движение текста (справа-налево до упора в левую границу и затем, наоборот) в блоке размером 500х30 со скоростью, определенной временем задержки 100 миллисекунд; если опустить атрибут behavior, то движение текста будет только справа-налево.

<cite Title=”Источник”>цитата</cite> - указывает, что текст, помещенный в него, является цитатой из книги или другого источника. Текст выводится при этом курсивом. С использованием листов стилей тексту можно придать нужное раскрашивание. Атрибутом Titleможно указывать источник, откуда взята цитата; эта информация будет появляться при установке мыши на цитату.

Создание списков и вставка графики

Ненумерованный список определяется элементом <UL>, внутри которого может находиться элемент заголовка списка <LH> и обязательно один или несколько элементов <LI> непосредственно самих элементов списка. Фрагмент документа для формирования ненумерованного списка имеет следующий вид:

<UL>

<LH> заголовок списка</LH>

<LI> первый элемент списка

<LI> второй элемент списка

<LI> третий элемент списка

</UL>

В элементе <UL> можно указывать тип маркера списка следующим образом:

<UL Type = Disk> – заполненный кружок

Square – заполненный квадрат

Circle – незаполненный кружок

Если тип маркера указан в явном виде, то именно он и отображается. Если тип маркера не указан, то браузером автоматически происходит его изменение для вложенных списков.

В качестве маркера может быть использована любая картинка, подключение которой выполняется с использованием листов стилей, что будет рассмотрено в соответствующем разделе.

Пример фрагмента формирования ненумерованного списка приведен ниже:

<ul>

<lh>список клиентов:

<li>Иванов

<li>Петров

<li>Сидоров

</ul>

Организация нумерованного списка

Нумерованный список формируется с использованием элемента <OL>, внутри которого может находиться элемент формирования заголовка списка <LH> и обязательно один или несколько элементов <LI> формирования непосредственно самих элементов списка. Фрагмент документа для формирования нумерованного списка имеет следующий вид:

<OL>

<LH> заголовок списка </LH>

<LI> первый элемент списка

<LI> второй элемент списка

<LI> третий элемент списка

</OL>

По умолчанию нумерация осуществляется арабскими цифрами, начиная с 1. Это умолчание можно изменить указанием атрибута Typeв виде:

<OL Type=a>

Атрибут Typeможет принимать следующие значения:

1 – арабские цифры (это единица, а не буква эл);

а – строчные буквы латинского алфавита;

А – прописные буквы латинского алфавита;

I – прописные римские цифры;

i – строчные римские цифры

Кроме этого нумерацию можно изменить в элементах <LI>:

<LI VALUE = 3> – дальнейшая нумерация будет с 3-го символа.

Пример формирования вложенного списка с использованием нумерованного и ненумерованного списков приведен ниже:

<ol>

<lh>список магистрантов:

<li>БГАТУ

<ul>

<li>агромеханический факультет

<li>агроэнергетический факультет

<li>факультет предпринимательства и управления

</ul>

<li>БГЭУ

<ul>

<li>учетно-экономический факультет

<li>факультет международных экономических отношений

</ul>

<li>БГУ

</ol>

Список определений

Элемент <DL> списка определений в отличие от нумерованных и ненумерованных списков состоит из двух частей: первая служит для задания термина, вторая – для вывода определения этого термина. В одном <DL> может находиться определение нескольких терминов:

<DL>

<LH> заголовок списка </LН>

<DT> термин 1

<DD> определение термина 1

<DT> термин 2

<DD> определение термина 2

</DL>

Текст после элемента <DD> будет отображаться с отступом от левой границы окна браузера.

Внутри <DD> могут находиться нумерованные и ненумерованные списки.

Пример списка определений приведен ниже:

<DL>

<LH> заголовок списка </LН>

<DT> термин 1

<DD>

определение термина 1<br>возможно из нескольких строк

<DT> термин 2

<DD>

определение термина 2<br>вторая строка определения<br>третья строка

</DL>

Вставка графики

Вставка графики в документ HTML производится с помощью элемента <IMG>:

<Img srс=”имя графического файла” Align= Height= Width= Border= Hspace= Vspace= Alt= >

src –определяет имя графического файла вместе с его расширением, сам графический файл должен находиться в той же папке, что и HTML-документ.

Align – задает расположение изображения относительно текста документа:

Left – изображение располагается слева от текста;

Right – изображение располагается справа от текста;

Top – вверх изображения по строке текста;

Bottom – (умолчание) низ изображения по строке текста;

Middle – середина изображения по строке текста.

Height – высота изображения в пикселах. Если это свойство не задано, то высота изображения определяется самим файлом;

Width – ширина изображения в пикселах. Если это свойство не задано, то ширина изображения определяется самим файлом;

Border –ширина рамки в пикселах вокруг изображения (0 – нет рамки);

Hspace – ширина незаполненного пространства (расстояние от границы изображения до текста) в пикселах слева и справа от изображения;

Vspace – ширина незаполненного пространства в пикселах снизу и сверху от изображения.

Alt –всплывающая подсказка появляющаяся при установке курсора мыши на картинку. Чаще всего используется, если картинка является гиперссылкой.

DynSrc –тоже, что и Src, только используется для анимационных видеофайлов .gif или .avi.

Loop– используется совместно с DynSrcи задает количество повторов видеоролика либо ключевое слово Infinite при бесконечном повторе.

Вставка таблицы

Таблицы являются одними из самых используемых при формировании HTML-документа элементов. Часто таблицы используются при формировании меню и еще более часто для рационального и компактного размещения информации на странице. Это можно было заметить в созданных по предыдущим разделам документам: в них содержалось много пустого неиспользуемого места.

Пример формирования таблиц:

<HTML>

<Head>

</Head>

<Body>

<H1> Простейшая таблица</H1>

<Table Border=1> 

<Caption Align=Center>У таблицы может быть заголовок</Caption>

<TR> 

<TD>

<14 15 161718 19 20 >

Дата добавления: 2015-04-03; просмотров: 1078;