Специализированные языки разметки документов (HTML) — страница 2
Обновлено
Цвет | Символьная метка | Цифровой код | |
Белый | White | #FFFFFF | |
Черный | Black | #000000 | |
Зеленый | Green | #008000 | |
Светло-зеленый | Lime | #00FF00 | |
Серый | Gray | #808080 | |
Светло-серый | Silver | #C0C0C0 | |
Желтый | Yellow | #FFFF00 | |
Темно-бордовый | Maroon | #800000 | |
Синий | Blue | #0000FF | |
Темно-синий | Navy | #000080 | |
Голубой | Aqua | #00FFFF | |
Изумрудный | Teal | #008080 | |
Красный | Red | #FF0000 | |
Пурпурный | Purple | #800080 | |
Розовый | Fuchsia | #FF00FF | |
Оливковый | Olive | #808000 |
Для передачи цветов в html предпочтительнее пользоваться шестнадцатеричным цифровым кодом.
3.3 Форматирование текстаEscape-последовательности. Иногда возникает необходимость использования в тексте символы, зарезервированные для обозначения элементов кода HTML. Это могут быть угловые скобки, прямые кавычки и т.д.Т. е. необходимо, чтобы символы отображались как текст, интерпретатор же воспринимает их как часть команд разметки гипертекста. Поэтому существуют escape-последовательности, или их еще называют "нотации символьных объектов". Они начинаются символом & и заканчиваются; а между ними размещается сама команда, записываемая в строчном регистре. Таблица.Символ | Значение | Именной примитив | Числовой примитив | |
< | Левая угловая скобка | < | < | |
> | Правая угловая скобка | > | > | |
“ | Прямые кавычки | " | " | |
& | Амперсант | & | & | |
Неразрывный пробел | |   | ||
© | Символ копирайта | © | © | |
® | Символ зарегистрированной торговой марки | ® | ® | |
= | Знак равенства | ≡ | = | |
Стрелка влево | ← | ← | ||
Стрелка вправо | → | → | ||
Стрелка вверх | ↑ | ↑ | ||
Стрелка вниз | ↓ | ↓ |
Пример:
На этой страничке изложены мои " мысли вслух " по данному вопросу
Перевод строки, пробелы, табуляция. Введенное пользователем с помощью клавиатуры форматирование текста, включающее в себя пробелы, отступы табуляции и переводы строки, игнорируется браузером при интерпретации html-документа.
Исключением из этого правила может служить только текст, помеченный специальным тегом <PRE> - командой предварительного форматирования. Формат команды:
<PRE>
предварительно отформатированный текст
</PRE>
В этом случае все, что расположено между открывающим и закрывающим тегами <PRE> отобразится в окне броузера с сохранением всех введенных дизайнером пробелов, переводов строк и отступов табуляции.
Тег стандартного абзаца.
<P align=аргумент>
Текст, заключенный в абзац
</P>
Аргументы ALIGN:
right - выравнивание текста по правому краю;
left - выравнивание текста по левому краю;
center - выравнивание текста по центру;
justify - выравнивание текста по ширине.
Если при использовании тега <P> не задано никаких атрибутов, по умолчанию используется левое выравнивание.
Для выравнивания текста по центру можно использовать тег:
<CENTER> Текст
</CENTER>
Разрывы строк. Для того, чтобы внутри тестового блока броузер отобразил перевод строки, например, для отделения одного абзаца от другого, в конце строки следует поместить тег <BR>. Следующее слово, встречающееся за данным тегом, будет перенесено на новую строку. Возможно использование нескольких тегов <BR> подряд для задания последовательности из нескольких пустых строк. Команда <BR> не имеет закрывающего тега.
Иногда тег <BR> содержит атрибут clear, который может принимать одно из трех значений: left, right, all. Указанные параметры позволяют переносить текст со смещением новой строки соответственно к левой, правой или обеим границам экрана одновременно. Синтаксис записи этого тега с атрибутом clear:
<BR clear=”значение”>
Некоторые браузеры переносят строки самостоятельно, причем разрывают строку в том месте, где она выходит за границы экрана. Если программисту необходимо отобразить текстовую строку фиксированной длины без переносов, используется тег <NOBR>:
<NOBR> строка без переносов </NOBR>
При использовании данного тега в случае, если длина строки превышает ширину экрана, в нижней части окна браузера появляется горизонтальная полоса прокрутки.
Шрифты. Элемент <FONT> определяет свойства шрифта.
Синтаксис записи тега <FONT>:
<FONT face=”значение1”
size=”значение2”
color=”значение3”>
текст
</FONT>
Значением атрибута face является название шрифта, который используется для отображения текста, заключенного в теги <FONT> </FONT>. Если, например, вместо параметра "значение1" в приведенном примере вы подставите "Arial", помеченный тегом <FONT>, текст будет отображаться именно этим шрифтом. В атрибуте face в качестве значений допустимо указывать несколько гарнитур шрифтов, разделяя их запятой. Для отображения текста браузер применит одну из перечисленных гарнитур, имя которой первой совпадает с имеющимся в его распоряжении набором гарнитур.
<FONT face=”Helvetica, Arial”>
Атрибут size указывает на размер шрифта. Параметр этого атрибута может быть описан либо абсолютной, либо относительной величиной. Абсолютная величина подразумевает использование в качестве параметра целого числа, указывающего на высоту шрифта в пунктах. Относительная же величина, обозначаемая целым числом со знаком плюс или минус (например, +2 или - 1), - это количество пунктов, которые следует прибавить или отнять от размера шрифта, используемого браузером по умолчанию (12pt). Так, запись <FONT size="+1"> говорит о том, что размер помеченного таким тегом текста будет на один пункт больше, чем обычный текст документа. Кроме того, размер шрифта можно записывать целыми числами от 1до 7. В этих единицах основному шрифту, используемому по умолчанию, присваивается размер 3. Самый мелкий шрифт имеет размер 1, самый крупный - 7. Каждый шрифт в шкале "1-7" на 20% больше или меньше размера основного шрифта.
Атрибут color определяет цвет шрифта и подставляется либо цифровым кодом, либо символьной меткой.
Очевидно, что при использовании тега <FONT> любой из его атрибутов может быть опущен.
<FONT face=”Arial"
size="+2"
color="#OOOOFF">
отрывок текста
</FONT>
<FONT face=”Arial"
size=5
color="olive">
отрывок текста
</FONT>
<Font size=6> текст </Font>
<Font size=+2> текст </Font>
<Font size=-1> текст </Font>
Изменение основного шрифта. По умолчанию текстовое содержимое документа отображается основным шрифтом, заданным в начальных установках браузера. Обычно основной шрифт имеет размер 3 и гарнитуру Times New Roman. Для изменения свойств основного шрифта предназначен одиночный тег <BASEFONT>, который имеет атрибуты size, color и face.
<BASEFONT size=5>
Задание цвета фона. Цвет фона всего документа определяется атрибутом bgcolor тега <BODY>.
<BODY bgcolor=”blue”>
Цвет текста. Для определения цвета шрифта можно пользоваться одним из 3 способов:
назначить цвет символов всего документа с помощью атрибута text тега <BODY>
<BODY text=”green”>
если в документе определен основной шрифт с помощью тега <BASEFONT>, можно дополнить этот элемент атрибутом color
<BASEFONT size=5 color=”red”>
для текстовых фрагментов цвет задается с помощью атрибута color в тегах <FONT>, при этом такое задание цвета отменяет действие атрибута text тега <BODY>
<FONT color=”red”>
Элементы стиля шрифтов.
<B> Выделение текста полужирным шрифтом</B>
<I> Выделение курсивным шрифтом</I>
<U> Выделение текста подчеркиванием </U>
<TT> Моноширинный текст </TT>
<SMALL> Уменьшение размера шрифта на 10-20% относительно текущего размера шрифта </SMALL>
<BIG> Увеличение размера шрифта на 10-20% относительно текущего размера шрифта </BIG>
<STRIKE> Зачеркнутый текст </STRIKE>
<S> Зачеркнутый текст </S>
<SUB> Нижний индекс </SUB>
<SUP> Верхний индекс </SUP>
Данные пары тегов можно вкладывать одна в другую. Например, выделить текст жирным курсивным шрифтом можно так:
<В><I>Текст, выделенный жирным курсивным шрифтом</I></В>
Фразеологические элементы. Фразеологический элемент не указывает точного способа отображения текста, а лишь определяет, что содержимое элемента несет определенную смысловую нагрузку и должно быть каким-то образом выделено относительно обычного текста.
<EM> Элемент акцентирования. Большинство броузеров воспринимают его как выделение текста курсивом. </EM>
<STRONG> Элемент акцентирования. Этот элемент обычно интерпретируется браузерами как выделение полужирным шрифтом. </STRONG>
<DFN> Термин и его определение. Отображается курсивом. </DFN>
<KBD> “Текст, набранный с клавиатуры”. Отображается шрифтом Courier. </KBD>
<VAR> Задание переменной или ее значения. Содержимое выводится курсивом. </VAR>
<CODE> Воспроизведение специальных символов. Применяется в случаях, когда необходимо показать, что текст является исходным кодом какой-либо программы. </CODE>
<SAMP> Воспроизведение буквенных символов. Указывает, что текст является образцом. </SAMP>
<ACRONYM title=”значение”>
Элемент аббревиатуры. В содержимом располагается сокращенное название аббревиатуры. Расшифровка термина появляется в виде всплывающей подсказки, текст которой задается значением атрибута title. Содержимое ACRONUM появляется обычным текстом. Назначение ACRONUM состоит в подготовке информации для поисковых серверов по расшифровке аббревиатур.
</ACRONYM>
Оформление цитат.
<BLOCKQUOTE cite=”URL”>
Текст длинной цитаты
</BLOCKQUOTE>
Задает отображение длинных цитат отдельным текстовым блоком. Содержимое элемента выводится с небольшим отступом от левого и правого краев страницы (по умолчанию отступ равен 40px). Перед цитатой и после нее браузер оставляет по одной пустой строке. Атрибут cite предназначен для указания URL-адреса цитируемого документа. Этот атрибут не влияет на отображение цитаты и носит справочный характер.
<Q> Текст короткой цитаты </Q>
Тег применяется для форматирования коротких цитат. Содержимое элемента отображается без разрыва строки.
<CITE> Текст цитаты </CITE>
Цитаты, оформленные с помощью этого элемента, выделяются курсивным шрифтом.
Элемент <ADDRESS>. Используется для размещения в документе контактной информации. Элемент представляет собой блок, содержимое которого отображается курсивом и внутрь которого можно помещать другие элементы, например, разрывы строк, рисунки, гиперссылки и т.д., но нельзя вставлять блоки (разделы, списки, абзацы).
Формат элемента:
<ADDRESS>
Содержимое
</ADDRESS>
Пример:
<ADDRESS>
Екатерина Семенова <BR>
Ведущий менеджер
Телефон 123-123-123
<A href=”URL”>realiz@kdk. com</A>
</ADDRESS>
Атрибуты тега <BODY>. Общий формат записи тега <BODY> со всеми допустимыми атрибутами имеет вид:
<BODY background=”URL”
bgcolor=”значение1”
text=”значение2”
link=”значение3”
vlink=”значение4”
alink=”значение5”>
тело документа HTML
</BODY>
Атрибут background позволяет поместить на web-страницу фоновый рисунок, записав в качестве параметра атрибута URL этого рисунка. URL можно задавать либо в виде полного адреса Интернета (например, "http: // www. server. ru/images/имя_файла. gif"), либо в виде сокращенного адреса с указанием пути к директории на текущем сервере, в которой хранится данное изображение (например, ". . /images/имя_файла. gif”). Допускается просто указывать имя графического файла, если он хранится в той же директории, что и использующий его файл HTML. Данное изображение может иметь любой размер, поскольку при интерпретации кода оно многократно повторяется, заполняя все доступное пространство в окне броузера.
Атрибут text позволяет задать цвет текста для всего документа в целом. Однако он может быть изменен в определенном участке текста путем использования команды <FONT> с атрибутом color.
Атрибут bgcolor используется для задания фонового цвета всему документу. Атрибуты bgcolor и background не исключают друг друга, однако у последнего имеется приоритет. Это означает, что в случае, когда заданы оба эти атрибута, сначала выполняется заливка web-страницы цветом, назначенным в атрибуте bgcolor, поверх которой размещается изображение, заданное атрибутом background.
Атрибут link задает цвет, которым отображается непосещенная гиперссылка, то есть ссылка, к которой посетитель данного web-сайта еще не обращался. По умолчанию ей присваивается значение "blue" (#0000FF). В свою очередь, атрибут vlink указывает на цвет посещенной ссылки, значение которой по умолчанию - "purple" (#800080).
Атрибут alink определяет цвет гиперссылки в момент нажатия. По умолчанию данный атрибут также имеет значение "purple".
Пример использования тега <BODY> со всеми допустимыми атрибутами:
<BODY
background=http: // www. myserver. com/1mages/back. jpg
bgcolor="#000000"
text="#FFFFFF"
link="#008000"
vlink="#800080"
alink="#FF0000">
Тело документа HTML
</BODY>
Применение многоязычного текста. Указание языка, на котором составлен документ или его фрагмент выполняется атрибутом lang. В качестве значения этого атрибута представляется код языка (en - английский, en-US - английский США, de - немецкий, ru - русский, uk - украинский). Например,
<HTML lang=”de”> - документ составлен на немецком языке,
<Q lang=”uk”> - цитата на украинском.
Направление чтения текста. Задается атрибутом dir, принимающим значения: ltr - слева направо, rtl - справа налево. Атрибут задается для текстов на арабском языке или иврите.
3.4 Разделы, заголовки и горизонтальные линииРазделы. Формат задания раздела: <DIV>HTML-код или текст</DIV>или<SPAN>HTML-код или текст</SPAN>Разделы используются для задания параметров текста и его расположения. К разделу можно применять любые атрибуты стиля. Теги <DIV> и <SPAN> отличаются тем, что при использовании тега <DIV> браузер производит перенос раздела на новую строку и перед ним автоматически устанавливается пустая строка. При использовании тега <SPAN> переноса не возникает. Заголовки. Заголовки позволяют разделить web-страницу на логически законченные блоки и помогают ориентироваться в содержимом документа. Спецификация HTML позволяет программисту использовать шесть различных стилей, или, как их еще принято называть, логических уровней заголовков. Для того чтобы отобразить заголовок на web-странице, необходимо использовать тег <Нn>, где n - целое число от 1 до 6, обозначающее номер уровня заголовка, причем самым верхним уровнем принято считать 1. Синтаксис записи этой команды: <Нn аlign="параметр">Текст заголовка</Нn> Атрибут align дает возможность web-мастеру определить расположение заголовка в окне браузера. Параметр этого атрибута может принимать одно из трех возможных значений: right - позиционирование заголовка по правой границе документа; left - позиционирование заголовка по левой границе документа; center - позиционирование заголовка по центру документа. По умолчанию заголовки выравниваются по левому краю страницы. Высоты заголовков относятся как 2: 1,5: 1,17: 1,33: 0,83: 0,67. Заголовки как блоковые элементы отделяются от текста пустыми строками. Пример: <Н1 align=”center”>ДОБPO ПОЖАЛОВАТЬ НА МОЮ СТРАНИЧКУ! </Н1>Горизонтальные линии. Чтобы визуально отделить часть объектов документа от других, применяются горизонтальные линии. Горизонтальная линия - это графический элемент, имеющий длину, толщину и цвет.д.ля создания таких линий в HTML используется непарный тег <HR> (сокращение от Horizontal Ruler). В спецификации HTML для отображения вертикальных линий не предусмотрено специальных тегов. Формат создание стандартной линии (по умолчанию стандартная линия занимает всю ширину окна браузера, а её толщина составляет 2px, верхняя часть линии несколько темнее нижней): <HR>Формат сплошной темной линии без тени: <HR noshade>Формат горизонтальной линии с указанием свойств: <HR align=”значение”width=”значение”size=”значение”color=”значение”>Атрибут align задает выравнивание линии и может принимать значения center, left или right. По умолчанию линии выравниваются по центру страницы. Атрибут width задает длину линии в пикселях или процентах. Например, тег <HR width=25> определяет горизонтальную линию шириной 25 пикселов. Если значение атрибута задается в процентах (ставится символ %), то ширина линии вычисляется относительно ширины окна, например <HR width=”25%”>. Задание длины линии в относительных единицах предпочтительнее. Толщина линии задается атрибутом size. Значение этого атрибута задается в пикселах в диапазоне от 1 до 175. Присвоение больших значений игнорируется. По умолчание size=2px. Цвет линии определяется атрибутом color. 4.СпискиСуществуют 3 вида списков: маркированный (неупорядоченный), нумерованный (упорядоченный), список определений. 4.1 Маркированный список Формат задания списка: <UL tуре="параметр"> <LH>Заголовок списка</LH><LI>Содержимое 1 строки списка</LI> <LI>Содержимое 2 строки списка </LI> …<LI> Содержимое n строки списка</LI> </UL>Атрибут type позволяет программисту управлять так называемым "буллет-стилем", то есть внешним видом и формой обозначающих каждое вхождение меток. Параметр этого атрибута может принимать одно из трех значений: disc - метки отображаются в виде заполненных черным цветом окружностей; circle - метки отображаются в виде полых окружностей; square - метки отображаются в виде заполненных черным цветом квадратов. По умолчанию, то есть в случае, когда в маркированном списке тег <UL> записывается без атрибутов, type="disc". 4.2 Нумерованный список Нумерованный список позволяет отображать упорядоченную информацию, которая выводится на экран в виде обозначенного цифрами перечисления. Формат задания списка: <OL tуре=”параметр” start=”значение”> <LI>Содержимое 1 строки списка</LI> <LI>Содержимое 2 строки списка </LI> …<LI> Содержимое n строки списка</LI> </OL>Атрибут type позволяет изменять буллет-стиль, то есть определять вид маркеров, которыми будут обозначаться составляющие список значения. В составе атрибута type можно использовать один из следующих параметров: "1" - обычные арабские числа 1, 2, 3 и т.д. "I" - римские цифры в заглавном регистре I, II, III, IV и т.д. "i" - римские цифры в строчном регистре i, ii, iii и т.д. "А" - символьная маркировка в заглавном регистре А, В, С и т.д. "а" - символьная маркировка в строчном регистре а, b, с и т.д. В НТМL возможно изменить порядок нумерации строк списка и порядок нумерации внутри списка. Атрибут start позволяет задавать позицию, с которой следует начать маркировку. Например, если атрибут type задан как "I", а атрибут start - как "5", то нумерация начнется с цифры 5. Если же type имеет значение "А", а start - "D", то маркировка начнется с символа D. Можно изменить нумерацию внутри списка, указав в теге <LI> атрибут value. <LI value=значение> Содержимое 1 строки списка </LI>По умолчанию значение атрибута type принимается как "I", нумерация начинается с первого элемента в каждом из типов маркировки. 4.3 Вложенные списки Возможно создание так называемых вложенных списков, реализуемых посредством размещения одной пары тегов в другой, например, команд создания маркированного списка внутри нумерованного. Простая реализация вложенного списка имеет вид: 1. Вхождение 1 Вхождение 1-а Вхождение 1-б2. Вхождение 2Вхождение 2-аВхождение 2-бТакой список можно представить следующим набором команд: <OL><LI> Вхождение 1<UL><LI>Вхождение l-a</LI><LI>Вхождение 1-б</LI> </UL></LI><LI> Вхождение 2<UL><LI>Вхождение 2-a</LI> <LI>Вхождение 2-б</LI> </UL></LI></OL>Тег <LI> может включать те же атрибуты, что и теги самих списков <UL> и <OL>. Если, например, вхождения маркированного списка отображаются принятым по умолчанию маркером disc, но одно из наиболее значимых по контексту вхождений программисту необходимо пометить маркером square, можно записать тег данного элемента следующим образом: <LI type=”square”>Вхождение</LI>. Аналогично, один из пунктов нумерованного арабскими цифрами списка можно пометить символьным маркером, записав соответствующий тег следующим образом: <LI type=”А”>Вхождение</LI>. 4.4 Списки определений Эти списки представляют собой списки терминов вместе с их определениями, то есть они напоминают толковый словарь. Формат записи списка: <DL><DT> Тег, задающий определяемый термин </DT> <DD>Тег, задающий определение термина</DD> <DD> Тег, задающий определение термина </DD> <DТ> Тег задающий определяемый термин </DT><DD> Тег, задающий определение термина </DD><DD> Тег, задающий определение термина </DD></DL>Закрывающие теги для команд <DТ> и <DD> списка определений можно опустить. Данные теги могут использоваться и самостоятельно: <DT> для отображения терминов, выделяемых в тексте шрифтом, a <DD> - для их расшифровки, помеченной отступом. В этом случае наличие соответствующих закрывающих тегов обязательно. 5. Таблицы5.1 Формат задания и общие параметры таблицы Для создания таблиц применяется тег <TABLE>. Состав таблицы по строкам и ячейкам задается с помощью следующих элементов: TR - элемент, формирующий отдельную строку; TD - элемент, определяющий содержимое ячейки данных; TH - элемент, задающий ячейку заголовка; CAPTION - элемент названия таблицы. Структура записи тега <TABLE> в общем виде следующая: <TABLE аlign=”значение” width=”значение” height=”значение” background=”URL” bgcolor=”значение” border=”целое число”borderсolor=”значение”borderсolordark=”значение”borderсolorlight=”значение”cellpadding=”целое число”cellspacing=”целое число”cols=”значение”frame=”значение” rules=”значение”> <CAPTIONalign=”значение” valign=”значение”>Название таблицы</CAPTION><TR align=”значение” valign=”знaчeниe”width=”значение”height=”целое число”bgcolor=”значение” borderсolor=”значение”borderсolordark=”значение”borderсolorlight=”значение”><TH align=”значение” valign=”знaчeниe”width=”значение”height=”целое число”background=”URL” bgcolor=”значение” borderсolor=”значение”borderсolordark=”значение”borderсolorlight=”значение”colspan=”целоe число” rowspan=”целое число”nowrap> Ячейка заголовка таблицы</TH></TR><TR><TDalign=”значение” valign=”значение” width=”значение”height=”целое число”background=”URL” bgcolor=”значение” borderсolor=”значение”borderсolordark=”значение”borderсolorlight=”значение”colspan=”целоe число” rowspan=”целое число”nowrap> Содержимое ячеек</ТD> </TR></TABLE>