Cправочник web-дизайнера / prog1
.htmMy home page
1.Структура HTML - документов Документ в целом должен быть отмечен как документ в формате HTML. Для этого он должен обрамляться командами
<HTML> и </HTML>.
Данная совокупность <команда> </команда> называется элементом, а команда называется и дескриптором и директивой и тэгом.
Дескриптор <HTML> определяет HTML-документ, то-есть весь входящий в него текст маркируется как документ HTML. В языке HTML при написании команд как правило не различаютсятрочные и прописные буквы,т.е. не имеет значение, какими буквами мы будем вводить требуемые команды.
Как правило такой документ состоит из двух частей:
- заголовок (Head);
- собственно документ (Body).
Перечисленные части - заголовок и тело должны быть между соответсвующими HTML-командами, чтобы броузеры могли различать эти части.
Для выделения заголовка необходимы команды
<HEAD> заголовок </HEAD>.
Основной текст документа выделяется командами
<BODY> основной текст </BODY>.
Для отображения титульных данных в заголовке необходимо ввести соответсвующие команды:
<HEAD>
<TITLE> Титульная строка документа </TITLE>
</HEAD>
Заголовок содержит в себе общую информацию о документе, которая не отображается на экране. Только один элемент в заголовке является обязательным - это дескриптор <TITLE> и его инверсный </TITLE>.
Он определяет краткое наименование документа, в котором обычно указывается тематика документа, которая используется поисковыми серверами.
Поскольку титульная строка отображается не в основном окне, а в специальных полях броузера, где используются системные шрифты, то титул документа должен быть набран на английском языке.
Заголовок документов не имеет атрибутов. По сложившейся традиции, дескрипторы начала и конца заголовка может быть опущены. Элементы заголовка должны правильно интерпретироваться и в этом случае игнорирование дескрипторов заголовка стало возможным благодаря тому, что схожество имен элементов тела и заголовка не пересекаются.
Основное назначение элементов заголовка - это описание общих для всего документа параметров отображения. К таким параметрам можно отнести стиль отображения документа, общий базовый адрес гипертекстовых ссылок, общие гипертекстовые ссылки, идентифиткатор и имя документа и т.п.
2. Добавление комментариев В HTML-документе Вы можете добавлять строки комментариев для того, чтобы сделать его структуру более понятной. Броузеры игнорируют комментарии и не отображают их на экране. Комментарии могут находиться в любом месте файла, кроме описания дескриптора. Они не могут быть вложенными. Большое количество комментариев может замедлить передачу файла с HTML-документом.
Пример 1
3. Форматирование абзацев Для создания пустого абзаца в HTML - документе испольуется тег <P>. Ее действие равноценно двум нажатиям клавиши 'Enter' в обычных текстах, т.е. выводится пустая строка. Данный дескриптор служит не только для вывода пустой строки, но и устанавливает отпуск в первой строке абзаца.
Пример 2
4. Центрирование абзацев Для того, чтобы абзацы располагались по центру экрана (строк), необходимо использовать директиву:
<center> Центрирование </center>
Пример 3
5. Заголовки разных уровней В HTML-документах применяются следующие заголовки. Например,
<h1> Самый крупный заголовок </h1>
<h2> Второй заголовок </h2>
<h3> Третий заголовок </h3>
<h4> Четвертый заголовок </h4>
<h5> Пятый заголовок </h5>
<h6> Самый мелкий заголовок </h6>
Пример 4
Отображение отдельных заголовков зависит от параметров шрифтов, заданных в используемом броузере.
Атрибут ALIGN указывает на тип выравнивания заголвка и может принимать значения:
- "center";
- "left";
- "right".
Синтаксис:
<h4 align="center"> Текстовое выражение </h4>
<h4 align="left"> Текстовое выражение </h4>
<h4 align="right"> Текстовое выражение </h4>
Пример 5
6. Форматирование символов HTML позволяет определить специальные шрифты и стили для отображения текта. Это придает документу более привлекательный вид. При этом используются два метода:
- физические шрифты;
- логические шрифты.
Разница при использовании того или иного типа заключается в том, что логические шрифты броузер подставляет вместо него альтернативный шрифт.
Для физических шрифтов используем следующие теги:
<b> </b> -для жирных шрифтов
<i> </i> -для использования курсива
<u> </i> -символы с подчеркиванием
<tt> </tt> -моноширинный текст
Большинство броузеров допускает объединение стилей текста.
<b> <i> Вложенная структура </b> </i>
Можно вывести различные слова или символы различными размерами. Для этого используем теги:
<font size=3> Текст с размером 3 </font>
<font size=5> Текст с размером 5 </font>
Пример 6
7. Использование цвета в документах Для использования цветового выделения фрагмента текста необходимо использовать следующие директивы:
<font color="Необходимый цвет"> </font>
Для изменения всей цветовой палитры при построении документа надо в директиве <BODY> применить атрибуты:
1. Установить цвет текста:
TEXT="FFFFFF" - для текта;
BGCOLOR="000000" - для фона;
LINK="FFFF00" - для гипертекстовой ссылки;
ALINK="00FF00" - для активизированной гипертекстовой ссылки;
VLINK="FF00FF" - для просмотренных гипертекстовых ссылок.
Пример 7
8. Отображение специальных символов Если нужно использовать специальные символы в тексте документа без их cпециального назначения, то необходимо включить их как "символьные ссылки" или как "смысловые ссылки".
Специальные символы в HTML Символ Символьная ссылка Смысловая ссылка & &_#_36; &_amp; < &_#_60; &_lt; > &_#_62; &_gt; " &_#_34; &_gout; Когда броузер анализирует HTML-документ, то он ищет специальные символы и интерпретирует их в соответствии с назначением.
Пример 8
9. Списки в HTML-документе Cписки являются одним из важнейших компонентов HTML-документа. Они используются для представления больших упорядоченных и неупорядоченных массивов информации.
В HTML-документе используются несколько видов списков:
1.Неупорядоченные списки Это списки, использующие для выделения записей, символы различного вида, например,
- символы 1-го уровня;
* символы 2-го уровня;
+ символы 3-го уровня.
Они отображаются в виде последовательности помеченных элементов. Элементы неупорядоченного списка могут идти в любом порядке. Отдельные элементы списка могут быть довольно велики и даже включать в себя другие дескрипторы.
Для формирования неупорядоченного списка используются директивы <ul> </ul> и <li>. В директиве <ul> может применяться атрибут TYPE="тип", где тип принимает следующие значения:
- DISC - элемент списка отмечается темным кругом (по умолчанию);
- CIRCLE - элемент списка отмечается окружностью;
- SQUARE - элемент списка отмечается прямоугольником.
Пример 9
2. Упорядоченные списки Это списки, все записи которых при отображениии пронумерованы.
Например,
1. Первый пункт
2. Второй пункт
3. Третий пункт
Для формирования упорядоченного списка используются директивы <ol> </ol> и <li>
Пример 10
Можно изменить способ нумерации в этих списках. Для этого в дескриптор <ol> можно включить атрибут,позволяющий определить способ другой нумерации. В этом случае команда имеет вид
<ol type="тип">,
где тип определяется одним из следующих символов:
Тип Способ нумерации Пример 1 Стандартные номера 1,2,3 a Строчные буквы a,b,c A Прописные буквы A,B,C i Малые римские цифры i,ii,iii I Большие римские цифры I,II,III Для типа, равного "1" можно еще применять атрибут START="число". В этом случае нумерация списка начинается с числа, указанного в атрибуте START.
Для упорядоченного списка в дескрипторе <li> можно применять атрибут VALUE="тип". При наличии этого атрибута все элементы списка начинают нумероваться с этого числа для типа "1", а для остальных типов - начиная с первого значения.
Пример 11
3. Списки-определения (Списки типа глоссария) Это списки, состоящие из определяемой части (термина) и определяющей части (определения).
Данный список задается дескриптором <dl> и его инверсией </dl>. Каждый элемент в этом списке описывается отдельным параграфом. Даннный список может быть использован для составления традиционных глоссариев.
Для задания определяемой части применяется директива
<dt> и ее инверсия </dt>.
Для задания определяющей части применяется директива
<dd> и ее инверсия </dd>.
Так как после определяемой части идет определяющая, то директиву </dt> можно не ставить. Аналогично и для определяющего текста после него может идти другой определяюмый термин или конец списка глоссария.
Содержимое определяемой части должно быть коротким, обычно несколько слов. В определяющем тексте дается краткое описание определямого термина. Это может быть длиееый текст, который может содержать в себе другие списки, параграфы и т.п.
4. Список-меню и список без пометок Меню и списки без пометок - это варианты неупорядоченного списка. Они предназначены для отображения списка из элементов небольшого размера, которые можно отобразить в сжатом виде. Элементы меню очень часто оформляют как гипертекстовые связи. Как правило, каждый пункт меню занимает одну строку.
Меню - это список элементов или даже небольших абзацев, который лишен любых пометок. Такой список напопинает простой список из абзацев, с тем исключением, что броузер отображает его элементы не как простые абзацы. Броузеры отображают меню или непомеченные списки как с пометками, характерными для неупорядоченных списков, так и без них.
Для вывода списка - меню ипользуется дескриптор <menu> и его инверсия </menu>. В нем используется директива <li> для маркировки элементов списка.
Для вывода списка без пометок ипользуется дескриптор <dir> и его инверсия </dir>. Такой список обычно используется, если длина элементов не превышает 20 символов. При отображении на экране содержимое списка будет выведено в несколько строк.
10. Маркировка цитаты Для этой цели используется директива <BLOCKQUOTE> и ее инверсия </BLOCKQUOTE>. Данная директива используется для маркировки блока текста, как цитаты. Броузеры могут отражать этот по разному курсивом или по другому. Данная директива отображает тескт как новый абзац, поэтому параграфы можно не ставить.
11. Горизонтальная линия Для прочерчивания горизонтальной линии используется директива <HR>. Она чертит горизонтальную линию шириной WIDTH и толщиной SIZE в пикселях или в процентах от выводимого экрана. Здесь WIDTH= и SIZE= - атрибуты данной директивы. Принятая по умолчанию линия имеет толщину, равную единице.
Например, строка в документе
<HR SIZE=2 WIDTH=300>
на экране броузером представляется линией толщиной в 2 пикселя и длиной 300 пикселей, а строка в документе
<HR SIZE=2 WIDTH=10%>
толщиной в 2 пикселя и длиной, равной 10% от ширины экрана.
Кроме того, в данном дескрипторе может применяться атрибут выравнивания ALIGN=, который может принимать стандартные значения: left,rigth,center, и атрибут NOSHADE, который проводит линию на экране плоской, а не объемной.
Пример 12
12. Встраивание предварительно сформатированного текста Как правило, броузер удаляет все лишние пробелы между словами. Чтобы избежать этого применяют встраивание предварительно сформатированного текста. На экране он будет отображаться как правило, шрифтом фиксированной ширины с сохранением всех пробелов.
Это применяют для встраивания таблиц, в которых для удобства их построения были применены символы табуляции, отступов и др.
В этом случае используется директива
<PRE> и ее инверсия </PRE>,
между которыми заключается предварительно сформатированный текст. Здесь также могут использоваться и другие директивы этой группы:
<BR> - конец строки,
<P> - параграф.
В этом случае текст располагается так, как его сделали текстовым редактором. С директивой <PRE> может быть использован атрибут WIGTH="число", который определяет ширину строки в символах. Тогда броузер не будет переносить строки, которые короче указанной длины.