3.1.2 Создание заголовков

Заголовки в документе создаются с помощью команд: <Hi> Заголовок </Hi>, причем при i = 1 заголовок самый крупный, а при i = 6 - самый мелкий.

Например,

Отображаемый текст Запись в формате HTML
Заголовок1 <H1> Заголовок1 </H1>
Заголовок2 <H2> Заголовок2 </H2>
Заголовок3 <H3> Заголовок3 </H3>
Заголовок4 <H4> Заголовок4 </H4>
Заголовок5 <H5> Заголовок5 </H5>
Заголовок6 <H6> Заголовок6 </H6>

Создание списков

Списки предназначены для представления информации в упорядоченном виде.

В HTML - документах используется 3 вида списков:

- Неупорядочные списки,

- Упорядочные списки,

- Списки - определения.

Неупорядоченный список использует для выделения записей специальные символы. Неупорядоченный список определяется следующими командами начала и конца списка: <UL> и <UL>

Каждый элемент списка начинается с команды: <LI>

В команде <LI> может быть параметр TYPE, который определяет внешний вид символа, используемого для выделения строки в списке и может иметь следующие значения:

<LI TYPE=DISK> - круглая жирная точка,

<LI TYPE=CIRCLE> - окружность,

<LI TYPE=SQUARE> - маленький черный квадрат.

В упорядоченном списке все записи пронумерованы.

Упорядоченный список определяется следующими командами начала и конца списка: <OL> и </OL>

Каждый элемент списка начинается с команды: <LI>

В команде <LI> может быть параметр TYPE, который определяет тип нумерации и может иметь следующие значения:

<LI TYPE = A> - прописными буквами,

<LI TYPE = a> - строчными буквами,

<LI TYPE = I> - прописными римскими цифрами,

<LI TYPE = i> - строчными римскими цифрами,

<LI TYPE = 1> - арабскими цифрами.

В списке - определении все записи сдвинуты влево при помощи табуляции.

Список - определение определяется следующими командами начала и конца списка: <DL> и </DL>

Каждый элемент списка начинается с команды: <DD>

Форматирование параграфов и вывод текста в несколько столбцов.

В документе HTML невозможно создать абзац, используя клавишу [Enter].

Использование этой клавиши улучшает внешний вид исходного текста, но не влияет на полученное изображение.

Для перехода на следующую строку воспользуйтесь командой <br>

Для создания пустой строки воспользуйтесь командой <p>

Для создания горизонтальной черты воспользуйтесь командой <hr>

Если черта создается не на всю строку, а на какую - то ее часть, например, на 40%, то команда выглядит следующим образом: <hr width= 40 %>

Для создания широкой черты следует задать ее ширину (по умолчанию - в пикселях) <hr size= 10 >

Для выравнивания черты ВЛЕВО/ВПРАВО/ПО ЦЕНТРУ задайте соответственный параметр ALIGN=LEFT/RIGHT/CENTER

Черная линия задается наличием параметра NOSHADE.

Вы можете расположить текст по центру с помощью следующих команд: <CENTER>

Иногда необходимо создать текстовый документ, расположение строк которого (табуляция, отступы, выравнивание) определяется разработчиком домашней страницы, а не программой - редактором.

Для создания такого текста воспользуйтесь командами: <PRE> текст </PRE>

Полученный в «браузере» образ текста будет точно соответствовать тексту в исходном HTML файле.

Аналогичные функции выполняет пара команд: <LISTING> текст </LISTING>

Netscape 3.0 и выше поддерживает вывод текста в несколько столбцов, в газетном формате с помощью команд <MULTICOL> и </MULTICOL>.

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

<MULTICOL COLS= «N» GUTTER= «M»> текст </MULTICOL>.

Здесь N - количество столбцов, M - расстояние между столбцами.

«Браузеры», не поддерживающие вывод текста в несколько столбцов, обеспечат вывод текста нормально, в 1 столбец.

Форматирование символов

Для выделения отдельных частей текста можно воспользоваться следующими стилями:

B - жирный (Bold);

I - курсив (Italic);

U - с подчеркиванием (Underline);

S - с перечеркиванием (STRIKE);

Ниже представлена таблица команд выделения текста.

Отображаемый текст Запись в формате HTML
Выделение текста жирным шрифтом Выделение <b> текста </b> жирным шрифтом
Выделение текста курсивом Выделение <i> текста </i> курсивом
Выделение текста подчеркиванием Выделение <u> текста </u> подчеркиванием
Выделение текста перечеркиванием Выделение <strike> текста </strike> перечеркиванием

Для изменения размера текстовых символов воспользуйтесь командами:

<FONT SIZE = +-i > </FONT>, где i в пределах от 1 до 7 относительно начального размера букв.

Кроме того, можно увеличить или уменьшить высоту шрифта с помощью команд <BIG> и <SMALL>. Эти команды используются в паре с командами </BIG> и </SMALL>.

Еще две пары команд:

<SUB> и </SUB> - подстрочный индекс, например, H2SO4.

<SUP> и </SUP> - надстрочный индекс, например, (a2 - b2) = (a - b)(a + b).

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

Кроме того, есть логическое форматирование символов - Вы даете описание, а браузер решает, как изменять характеристики. В общем, кто доверяет браузеру - пользуйтесь этими командами. Они выглядят следующим образом:

<CITE> Цитата <CITE>
<EM> Особо важный текст </EM>
<STRONG> Сильное выделение текста </STRONG>
<KBD> Текст, введенный пользователем </KBD>
<CODE> Листинг программы </CODE>
<SAMP> Последовательность литералов </SAMP>
<VAR> Имя переменной </VAR>

Браузер пользователя сам выбирает шрифт, если Вы его конкретно не задали в описании страницы. Если в странице задан шрифт, которого нет у пользователя, то Вы можете задать список, состоящий из нескольких шрифтов, и браузер выберет самый левый, а если его в системе нет, то следующий и т. д. Если ни одного из шрифтов нет, браузер выбирает свой шрифт.

Фонт задается с помощью команды: FONT FACE

Управление цветом

Цвета и изображения фона задаются с помощью команды <BODY>.

Эта команда может задаваться только в начале HTML файла и не может быть измене-на в дальнейшем. Ее параметры:

bgcolor = «# код цвета» - цвет фона документа,

text = «# код цвета» - цвет текста документа,

link = «# код цвета» - цвет текста, используемого в качестве ссылки,

vlink = «# код цвета» - цвет ссылки на просмотренный ранее документ,

alink = «# код цвета» - цвет ссылки в момент нажатия на нее правой кнопки мыши.

Код цвета задается в кодировке RGB - шесть шестнадцатеричных чисел.

Важно отметить, что цвет фона не отображается на бумаге при выводе HTML - документа на печать. Ниже приводятся коды простейших цветов:

Белый = FFFFFF Малиновый = FF00FF
Желтый = FFFF00 Бирюзовый = 008080
Красный = FF0000 Темно-синий = 000080
Серый = 808080 Коричневый = 808000
Синий = 0000FF Голубой = 00FFFF
Зеленый = 00FF00 Темно-зеленый = 008000,
Черный = 000000 Индиго = 800080
Пурпурный = CC33FF Темно-красный = 800000

Для изменения цвета текущего текста можно в любом месте домашней страницы воспользоваться командами: <FONT COLOR= Код цвета > Текущий текст </FONT COLOR>

Определено несколько именованных цветов. Их значения видны из таблицы:

<FONT COLOR = black >

Если Вы хотите создать «обои», то есть цветной фон с использованием Image - файла с именем, например, Ground.gif, то вместо параметра BGCOLOR записываем: BACKGROUND = «Ground.gif»

Если при этом вы хотите, чтобы фоновое изображение не двигалось, т.е. чтобы создался эффект «водяных знаков», то задайте дополнительный параметр:

BACKGROUND = «Ground.gif» BGPROPERTIES=FIXED

Использование специальных символов

В языке HTML символ < используется как первый символ каждой команды.

Этот символ не может быть использован для обозначения отношения «меньше». Для отображения на экране символа < («меньше») и некоторых других символов в HTML приняты специальные обозначения:

Отображаемый текст Запись в формате HTML
&lt
&gt
& &amp
« &quot

Язык HTML всегда уменьшает количество подряд расположенных пробелов до одного, независимо от того, сколько пробелов было в исходном тексте. Для задания необходимого количества подряд расположенных пробелов следует воспользоваться специальным символом пробела: &nbsp.

Например, в следующей записи исходного текста: (A &nbsp; &nbsp; &nbsp; B) в отображаемом тексте между символами A и B будет 3 пробела.

При необходимости изобразить на экране команду языка HTML возникает дополнительная проблема - редактор может преобразовать ее в соответствующую команду прямо в исходном тексте.

И вместо отображения соответствующей команды на экране Вы получаете расположенный по центру текст в следующих строках. Чтобы этого избежать, можно, например, вставить внутрь команды две парные команды. Например, вышеприведенную команду следует записать следующим образом:<<u></u>CENTER>

Создание таблиц

Таблица создается с помощью команд <TABLE> и </TABLE>.

Команда <TABLE> может иметь следующие параметры:

- UNITS - может принимать значение RELATIVE или PIXELS. Определяет единицы измерения в других параметрах. По умолчанию, UNITS = PIXELS.

- BORDER - определяет линии, разграничивающие клетки в таблице. Ширина линии задается командой BORDER = N.

- CELLPADDING - Определяет минимальный промежуток вокруг содержимого таблицы.

- BGCOLOR - Определяет цвет фонового изображения в таблице. Во всех таблицах данного документа я использую BGCOLOR= WHITE

Есть еще несколько команд, задающих цвет обрамления: BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT, но они используются только в Explorer.

Для формирования таблицы, состоящей из нескольких строк, воспользуйтесь командой <TR> , разделяющей строки. Команды <TH> и </TH> используются для обозначения заголовка столбца клеток.

Параметры ROWSPAN и COLSPAN команд <TD> и <TH> используются для формирования клеток данных, объединяющих более одной строки или столбца.

Встраивание гипертекстовых ссылок

Переход в другое место того же документа.

Для организации перехода внутри одного HTML - файла следует ввести необходимый текст в двух местах:

- Записать метку в том месте HTML - файла, куда необходимо перейти.

- Записать переход на эту метку в том месте, откуда будет выполнен переход.

Для организации метки запишите: <A NAME = «МЕТКА» ></A>, где МЕТКА - любое имя, состоящее из букв английского алфавита и цифр.

Для перехода на эту метку запишите:<A href=МЕТКА>.Перейти на метку. </A>

Переход в другой документ той же домашней страницы.

Для перехода из любого места HTML - файла h1.html в начало HTML - файла h2.html следует записать: <A href = «h2.html»>Переход к разделу h2 </A>

Префикс URL Функция
FTP:// Ссылка на сервер FTP
HTTP:// Ссылка на объект, который будет передаваться с использованием протокола HTTP
FILE://localhost Ссылка на локальный диск
GOPHER:// Ссылка на сервер Gopher
MAILTO:// Ссылка на электронный почтовый адрес
NEWS:// Ссылка на электронную конференцию
NNTP:// Ссылка на сервер электронной конференции
TELNET:// Ссылка на сервер электронной конференции

Переход в другой документ.

В любом месте HTML - файла можно ввести гипертекстовые ссылки на другой документ или файл.

Гипертекстовые ссылки вводятся в HTML - файл с помощью унифицированного локатора ресурсов - URL.

Этот локатор определяет правила написания различных видов ссылок.

Ниже приводятся важнейшие префиксы для URL:

Для записи гипертекстовой ссылки в HTML - файл используйте следующую команду: <A href = «URL»> Переход по гипертекстовой ссылке. </A>

При нажатии левой кнопки мыши на текст Переход по гипертекстовой ссылке. Вы перейдёте на ресурс, заданный в URL. Для возврата воспользуйтесь клавишей «Back» «браузера».

Вывод изображения на экран.

Изображения могут быть выведены на экран так же, как текст. Файлы изображения могут быть заданы в нескольких различных форматах, наилучшие из которых - GIF (файлы *.gif) и JPEG (файлы *.jpg).

Ниже приводится формат команды:

<IMG SRC= «ИМЯ ФАЙЛА» ALT = «Текст» ALIGN = DIRECTION WIDTH = WIDTH HEIGHT = HEIGHT >, где:

ИМЯ ФАЙЛА - это имя данного файла в вашей домашней странице или полное имя пути и файла, если файл не принадлежит данной домашней странице.

Текст - это текст, выводимый вместо изображения, если файл изображения по какой - либо причине недоступен.

DIRECTION - место расположения изображения. Принимает следующие возможные значения:

ALIGN=TOP - последующий текст располагается в верхней части изображения.

ALIGN=BOTTOM - последующий текст располагается в нижней части изображения.

ALIGN=LEFT - изображение находится в левой части листа. Текст обтекает изображение справа.

ALIGN=MIDDLE - изображение находится в центре листа.

ALIGN=RIGHT - изображение находится в правой части листа. Текст обтекает изображение слева.

WIDTH = WIDTH - ширина требуемого изображения на экране,

HEIGHT = HEIGHT - высота требуемого изображения на экране.

Гипертекстовая ссылка с помощью изображения.

Допустим, что Вы выводите на экран изображение IMAGE - файл, который называется, например, image.gif.

Если Вы хотите организовать домашнюю страницу так, чтобы при нажатии левой кнопки мыши на изображение, перейти на другую домашнюю страницу, например, на:

HTTP://WWW.HOME.COM ,

то следует записать следующую команду:

<A href= «HTTP://WWW.HOME.COM»> <IMG SRC = «image.gif» >

Создание ссылки на почтовый адрес.

Например, мой почтовый адрес в GEOCITIES.COM: family_katz@geocities.com

Для организации ссылки в моей домашней странице на мой почтовый адрес я записал в конце главного раздела домашней страницы:

<A href = mailto: family_katz@geocities.com > Перейти на мой почтовый адрес </A>

В следующей строчке я задал такую же ссылку с помощью аппликации MAIL12.GIF вместо текста:

<A href = mailto: family_katz@geocities.com ><IMS SRC = «MAIL12.GIF» ></A>



Информация о работе «Разработка сайта "Магазин на диване"»
Раздел: Информатика, программирование
Количество знаков с пробелами: 99714
Количество таблиц: 12
Количество изображений: 2

Похожие работы

Скачать
182312
6
11

... рук! Используйте бумажный шарик как эспандер. Если его объем покажется вам недостаточным, просто оберните его еще одним слоем бумаги. Пусть вас не смущает, что бумага не обладает свойством растягиваться как резина: для тренировки рук это не помеха, а дополнительное преимущество, так вы получите даже больше пользы. Бумагу легко найти практически в любом месте, и дома, и на работе. Ее также легко ...

Скачать
151927
21
11

... , представителей рекламной службы и опроса зрителей через Интернет. Результаты показали, что степень интереса достаточно высока, но ТРК «Петербург» не владеет технологией прогнозирования и использования социокультурного потенциала телерекламы. Передачи готовятся к выпуску интуитивно, основываясь на личных пристрастиях режиссера музыкально – развлекательного вещания. Иногда это срабатывает – иногда ...

Скачать
92024
6
0

... маркетинговых акций; -  имидж компании, открывшей и поддерживающей простую web-витрину, всегда хуже, чем компании, организовавшей Интернет-торговлю с помощью полнофункционального Интернет-магазина или ТИС. Но самое главное - организация Интернет-торговли с помощью web-витрины оказывается для торговой компании малоэффективным и даже часто нерентабельным делом. Интернет-магазин существенно более ...

Скачать
156192
7
4

... , а в отдельных случаях к реализации коммуникаций при меньших затратах, так как при этом проявляется принцип: «Целое - это больше, чем сумма составляющих ее частей». 2 АНАЛИЗ СИСТЕМЫ МАРКЕТИНГА ИНТЕГРИРОВАННЫХ МАРКЕТИНГОВЫХ КОММУНИКАЦИЙ ОАО «ДОНЕЦКАЯ МАНУФАКТУРА М». ОРГАНИЗАЦИЯ СЛУЖБЫ МАРКЕТИНГА   2.1 Анализ системы управления интегрированными маркетинговыми коммуникациями ОАО «Донецкая ...

0 комментариев


Наверх