HTML

1. Web-страница как понятие
2. Что такое HTML?
3. Как создаются HTML документы?
4. Основные положения
5. META-теги (кодировка страницы)
6. Теги тела документа (задание отступов, задание стандартных цветов, фоновый рисунок)
7. Уровни заголовков
8. Основной текст (параграф, абзац, разрыв строки, неразрывная строка, перенос)
9. Форматирование шрифта (размер шрифта, цвет шрифта)
10. Физические и логические стили
11. Списки (нумерованные, ненумерованные, вложенные, элемент списка)
12. Дополнительные конструкции (списко оперделений, список пунктов, список с короткими названиями пунктов, цытаты, авторские стиль редактирования, горизонтальная линия)
13. Гипертекстовые ссылки (структура ссылов в HTML-документе, ссылка на закладку внутри документа, ссылки на закладки в других документах, различные стили внутри гиперссылки)
14. Графика
15. Вставка мультимедика (аудио файлы, вложение Flash-файлов, применения Java-апплетов, опубликования видео в Интернете)
16. Таблицы (теги таблиц, заголовок таблицы, строка таблицы, ячейка таблицы, Атрибуты тега TD, подпись, основные атрибуты таблицы)
17. Формы (синтаксис, текстовое поле, тег INPUT, переключатели типа флажки, атрибут RADIO, атрибут IMAGE, атрибут PASSWORD, кнопки, атрибут RESET, атрибут SUBMIT, меню выбора в формах, SELECT, SELECT SINGLE, SELECT MULTIPLE, отпревление файлов при помощи форма, тег APPLET, тег PARAM, тег SCRIPT, тег TEXTFLOW)
18. Фреймы (FRAMESET, FRAME, планирование фрейтом и взаимодейсвтия между фреймами, зарезервированные имена фреймов)
19. Создание карты изображений (составные картинки, тег MAP, применение)
20. Дополнительные функции (адрес, escape-последовательности, комментарии, центирование элементов документа)
21. Атрибуты (ACTION, ALIGN, ALINK, ALT, BACKGROUND, BGCOLOR, BORDER, CHECKED, CLEAR, COLS, COLSPAN, COMPACT, CONTENT, ENCTYPE, FACE, HEIGHT, HREF, HTTP-EQUIV, LINK, MAXLENGTH, METHOD, MULTIPLE)

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

Все HTML документы записываются в ASCII формате и поэтому могут быть созданы и отредактированы в любом текстовом редакторе, например стандартное приложение "Блокнот" операционной системы Windows. Многие Web-мастера используют в работе редакторы, и правят тексты непосредственно на HTML. С помощью специализированных программ с использованием технологии WYSIWYG (что вижу, то и получу - примерный перевод) на подобие "Microsoft FrontPage", которые дают возможность, создавать документы графически без знания HTML. Подобные программы сами расставляют теги - вам останется только взять готовые текст, графику и, оформить страницу. Создавать страницу со сложной структурой, имея перед глазами только HTML-код трудно, но никакая программа не создаст текст, оптимальнее чем опытный Web-мастер, да и встраивать специфические теги значительно удобней вручную.

HTML (Hyper Text Markup Language) - язык разметки гипертекстовых документов. Основное преимущество HTML-документов заключается в том, что созданный документ может быть просмотрен на браузерах различных типов и на различных платформах. Когда документ создан с использованием HTML, браузер может интерпретировать HTML команды для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы, состоящие из текстовых и графических объектов.

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

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

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

Основа в используемой в HTML технологии состоит в том, что в обычный текстовый документ вставляются управляющие символы (теги) и в результате мы получаем Web-страницу. Браузер при загрузке Web-страницы представляет ее на экране в том виде, который задается тегами.

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

Так как HTML-страница по своей сути специально размеченный текстовый документ, то для ее создания и редактирования необходимо использовать простейшие текстовые редакторы (типа Блокнот), которые создает документ, не содержащий управляющих символов форматирования текста.

Для того чтобы создать Web-страницу, необходимо запустить Блокнот из Windows командой [Пуск-Программы-Стандартные-Блокнот] или из Internet Explorer командой [Вид-В виде HTML]. Сохранить файл под именем index.htm (имя index всегда присваивается стартовой странице, расширение htm в имени файла задает формат Web-страницы).

Минимальная Web-страница имеет вид:

<HTML>
<HEAD>
<TITLE> Заголовок в окне браузера </TITLE>
</HEAD>
<BODY> 
Основное содержание страницы
</BODY>
</HTML>
			

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

Любая Web-страница должна содержать следующие теги, их условно можно разделить на две категории:

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

Тег <HTML> обычно является первым и размещается в начале документа. Он информирует браузер о том, что используется язык HTML. Тэг </HTML> является последним тегом и размещается в самом конце документа. Между тегами <HTML> и </HTML> должны находиться теги <HEAD> </HEAD> и <BODY> </BODY>. Описательная часть документа <HEAD> Тег описательной части документа должен быть использован сразу после тега <HTML>, и более нигде. Данный тег представляет собой общее описание документа. Не следует размещать какой-либо текст внутри тега <HEAD>. Стартовый тег <HEAD> помещается непосредственно перед тегом <TITLE> и другими тегами, описывающими документ, а завершающий тег </HEAD> размещается сразу после окончания описания документа. В описании помещается название странички (то, которое показывается в заголовке окна) и некоторая другая информация. Для задания названия странички используются теги <TITLE> </TITLE>. Внутри контейнера <BODY> </BODY> будут происходить основные события по разметки страницы, работой с текстом и графикой в том числе.

Внимание! Технически, стартовые и завершающие теги типа <HTML>, <HEAD> и <BODY> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тегов позволяет браузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.

Все теги HTML начинаются с < (левой угловой скобки) и заканчиваются символом > (правой угловой скобки). Как правило, существует стартовый тег и завершающий тег. Для примера приведем теги заголовка, определяющие текст, находящийся внутри стартового и завершающего тега и описывающий заголовок документа:

Завершающий тег, выглядит также как стартовый, но отличается от него прямым слешем "/" перед текстом внутри угловых скобок. Тег <TITLE> говорит браузеру о задании названия страницы, а тег </TITLE> - о завершении названия.

Некоторые теги, такие, как <P> (параграф), не требуют завершающего тега, но его использование придает документу улучшенную читаемость и структурность.

Внимание! Дополнительные пробелы, символы табуляции и перевода строки, добавленные в исходный текст HTML-документа для его лучшей читаемости, будут проигнорированы Web-браузером при интерпретации документа. HTML-документ может включать вышеописанные элементы, только если они помещены внутрь тегов <PRE> и </PRE>. Более подробно о тегах <PRE> будет написано ниже.

Данный тег определяет следующую информацию:

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

Каждый тег <META> указывает на пару имя-значение.

Если в документе встречается несколько тегов <META> с одинаковым именем, их объединенное содержание - список, образованный путем сложения нескольких значений, - и является значением, связанным с данным именем.

Кодировка страниц

Наверняка Вам приходилось сталкиваться с проблемой кодировки, когда выводимый на монитор текст, представлен в виде непонятных символов. Весь фокус в том, что символы в различных кодировочных таблицах имеют разные номера в таблице символов. Проблема кодировки решается путем изменения кодировки. Данный способ построения текста в машинном коде имеют место и в Интернете. Чтобы посетители Вашего сайта не увидели вместо русских букв - набор иероглифов; и им не пришлось "ковыряться " в настройках браузера - решите эту проблему вставив в контейнер <HEAD> нужную кодировку. В Windows русский язык поддерживают следующие кодировки: Windows-1251, UTF-8, ISO-8859-5, KOI-8R. Русская кодировка страницы выбирается следующем образом:

Примечание: Значения атрибутов CONTENT и CHARSET заносятся в одни кавычки

Для полной совместимости русского языка на различных ОС используйте Windows-1251.

Теги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию. Тело документа <BODY> Тело документа должно находиться в контейнере <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашей Web-страницы.

Задание отступов

Если хотите, чтобы на Web-странице не было отступов от краев, то в теге <BODY> запишите:

<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

Где LEFTMARGIN - величина отступа от левого края окна, TOPMARGIN - величина отступа сверху, MARGINWIDTH - отступ справа, MARGINHEIGHT отступ снизу>

Поддерживает следующие атрибуты: ALINK, BACKGROUND, BGCOLOR, LINK, TEXT, VLINK.

Задание стандартных цветов

Многие Web-мастера заранее определяют цвета фона документа, обычного текста и ссылок. Чтобы задать эти цвета, необходимо включить в тег <BODY> дополнительные параметры:

где каждый из параметров определяет цвет того или иного элемента:

• BGCOLOR - цвет фона документа
• TEXT - цвет простого текста
• LINK - цвет ссылки

Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue).

Фоновый рисунок

Большинство браузеров позволяет включать в документ фоновый рисунок, который замостит фон всего документа. Некоторые пользователи любят фоновую графику, некоторые нет. Ненавязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона для большинства документов. Описание фонового рисунка включается в тег BODY и выглядит следующим образом:

Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д.

HTML имеет шесть уровней заголовков, имеющих номера с 1 по 6 (заголовок первого уровня является заголовком высшего уровня). По сравнению с нормальным текстом, заголовки выделяются шрифтом - размером и толщиной букв. Заголовок самого верхнего уровня имеет значение "1".

Заголовки могут быть представлены в общем случае так:

<Hx> Заголовок x-го уровня </Hx>, где x - цифра от 1 до 6, определяющая уровень заголовка.

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

Основным из них является тег <P> (параграф). В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа. Однако браузер разделяет абзацы только при наличии тега <P>. Если вы не разделите абзацы тегом <P>, ваш документ будет выглядеть как один большой абзац.

Также заметим, что хотя в действующих версиях HTML нет признака форматирования </P> (конец абзаца), рекомендуется его употреблять, поскольку он может быть введен в последующих версиях. К ошибке это не приведет, поскольку все незнакомые символы просто игнорируются браузером.

Элемент <P> определяет параграф внутри документа. Обычно браузер окружает параграф пустыми строками (1,5 интервала).

Формат:

Дополнительные параметры тега: <P ALIGN=left|center|right> позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.

Абзац

Тег <DIV> используется при разбиении текста документа на несколько частей, для каждой из которых можно использовать различные атрибуты. Например, можно изменять выравнивание отдельной части текста или кодовую страницу.

Поддерживается атрибут ALIGN.

Пример:

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

Разрыв строки

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

Например, если рядом с текстом слева встречается рисунок, то можно использовать тег <BR> для смещения текста ниже рисунка: Атрибут CLEAR позволяет организовать переход на новую строку с тем, чтобы новая строка стирала левый либо правый край.

Дополнительный параметр позволяет расширить возможности тега <BR>.

Данный параметр позволяет выполнить перевод строки и разместить следующую строку, начиная с чистой левой (left), правой (right) или обоих (all) границ окна браузера.

Неразрывная строка

Если вы не хотите, чтобы браузер автоматически переносил строку, то вы можете обозначить ее тегами <NOBR> и </NOBR>. В этом случае браузер не будет переносить строку, даже если она выходит за границы экрана; вместо этого браузер позволит горизонтально прокручивать окно.

Например:

Если же вы хотите все же позволить разбиение данной строки на две, но в строго запланированном месте, то вставьте тег <WBR>.

Например:

Теперь поработаем над видоизменением шрифта. Для того, чтобы выбрать шрифт применяем атрибут FACE, в значении ставим название шрифта (Arial, Tahoma и т.д) или слово serif - с засечками; san_serif - без засечек; cursive - курсивный; monospace - моноширинный

Пример:

Здесь значение описаны несколько шрифтов. Если у конечного пользователя не будет в операционной системе шрифта "Tahoma", то у него на мониторе появится "Arial" и т.д.

Размер шрифта

Вы можете изменять размер шрифта при помощи тега:

Используется для определения размера шрифта от 1 (самый маленький) до 7 (самый большой). Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию 3) в положительную или отрицательную сторону. Выражение <FONT> предшествует атрибуту SIZE и символам "+" или "-", которые указывают на то, как данный размер шрифта соотносится с размером базового шрифта документа. Базовое значение можно изменить при помощи тега: <BASE FONT SIZE=n>

Например, следующий фрагмент демонстрирует увеличение размера шрифта на 1: <FONT SIZE=+1>

Цвет шрифта

Вы можете изменить цвет шрифта при помощи тега:

Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания размерности каждой компоненты цвета в шестнадцатеричном формате. Например, белый цвет обозначается черный - "000000", белый - "FFFFFF" и т.п.

Можно описывать специальными стилями отдельные слова или предложения. Имеются два типа стилей: логический и физический. Физические стили определяют некоторые участки текста, автор задает стиль написания текста в исходном HTML-документе, в то время как, логические стили определяют текст согласно заданному значению описывая шрифт.

Физические стили

Существуют следующие физические стили:

Логические стили

Существуют следующие логические стили:

<DFN> - служит для описания определения (термина):

<EM> - служит для выделения текста, имеющего особое значение (типографское ударение, выводится курсивом):

<CITE> - служит для выделения заголовков книг, фильмов, цитат и т.п. Данная информация выводится курсивом:

<CODE> - служит для выделения программных кодов, текстов программ и т.п. Выводится моноширинным шрифтом:

<KBD> - используется при выделении текста, обозначающего клавиатурный ввод пользователя. Может быть изображено жирным шрифтом (но в большинстве браузеров изображается моноширинным шрифтом):

<SAMP> - используется для машинных сообщений или последовательности буквенных символов. Изображается моноширинным шрифтом:

<STRONG> - служит для ОСОБОГО выделения слов. Обычно выделяется жирным шрифтом:

<VAR> - используется для символьных переменных:

В языке HTML существует два основных вида списков:

• Нумерованный
• Маркированный

Нумерованные списки

В нумерованном списке браузер автоматически вставляет номера элементов по порядку. Это означает, что если вы удалите один или несколько элементов пронумерованного списка, то остальные номера автоматически будут пересчитаны. Нумерованный список начинается стартовым тегом <OL> и завершается тегом конечным тегом </OL>. Каждый элемент списка начинается с тега <LI>.

Например:

Маркированные списки

Для ненумерованных списков браузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь браузера. Пронумерованный список начинается стартовым тегом <UL> и завершается тегом </UL>. Каждый элемент списка начинается с тега <LI>.

Например:

Вложенные списки

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

Элемент списка

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

Поддерживаются атрибуты: COMPACT , START , TYPE.

В зависимости от того, в списке какого вида находится данный элемент.
TYPE - вид маркера
VALUE=n - значение для элемента нумерованного списка (его номер). Все дальнейшие номера элементов списка будут отсчитываться от этого номера.

тип тега <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square)

способ нумерации 1 - арабские цифры (по умолчанию), A - прописные буквы латинского алфавита, a - строчные, I - римские прописные, i - римские строчные.

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

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

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

Пример:

Примечание: В документе не может быть подряд несколько тегов <DD>.

Если список очень большой, можно использовать дополнительный атрибут COMPACT в рамках тега <DL>. Таким образом вы указываете браузеру, что он должен использовать самый маленький шрифт для вывода списка.

Например:

Список пунктов

Используя тег <DIR> можно вывести список пунктов по колонкам. Для вывода каждого пункта в отдельной строке можно использовать тег <MENU>:

Поддерживается атрибут COMPACT.

Список с короткими названиями пунктов

Для того, чтобы вывести список с короткими названиями пунктов (менее 20 символов), можно использовать тег <DIR>. Обычно такой список выводится в колонках по 24 символа. Данный тег поддерживает атрибут COMPACT.

Например:

Цитаты

Тег <BLOCKQUOTE> используется при цитировании текста, взятого из другого источника. Большинство браузеров отделяет такую цитату от окружающего текста пустыми строками с использованием отступа.

Например: