Источник: www.webmastak.com

Автор: Codenet www.codenet.ru

Что такое HTML?

Всемирная паутина соткана из WEB-страниц (WEB-pages), а эти страницы создаются при помощи языка разметки гипертекста (Hypertext Markup Language, HTML). Хотя многие, особенно новички, говорят сегодня о "Программировании на HTML", HTML - это язык разметки. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.

Основы HTML

Перед вами краткое руководство по написанию HTML. Многие до сих пор пишут HTML,А используя средства похожие на Notepad или SimpleText. Данное руководство поможет вам получить начальное представление о HTML. Даже если вы не планировали редактировать HTML напрямую, а использовать HTML-редактор, такой как Netscape Composer или FrontPage, данное руководство поможет вам использовать эти средства лучше, а также делать ваши HTML-документы понятными для большинства браузеров. Почувствовав выгоды, которые дает вам знание основ написания HTML, вы, возможно, захотите освоить материал, размещенный в раздел Продвинутый HTML.

Хороший способ научиться - это посмотреть, как другие люди пишут коды своих HTML-страниц. Для этого выберите в браузере пункт "View" ("Вид"), а затем "Source" ("В виде HTML").

Данная страница научит вас как:

• добавлять заголовки и параграфы
• выделять текст курсивом
• изменять цвет и размер текста
• вставлять рисунки
• создавать ссылки на другие страницы
• использовать различные виды списков

Если вы ищете что-то еще, попробуйте Продвинутый HTML

Добавление заголовков и параграфов

Если вы пользовались Microsoft Word, вам должно быть хорошо знакомо использование стилей для выделения заголовков по степени важности. В HTML заголовки по степени важности делятся на шесть уровней. Н1 - самый важный, Н2 - чуть менее важен, и, наконец, Н6 - наименее значимый.

Пример того, как добавить важный заголовок:

<h1>Важный заголовок</h1>

Результат:

Важный заголовок

и чуть менее важный:

<h2>Чуть менее важный</h2>

Результат:

Чуть менее важный

Каждый параграф, который вы напишете должен начинаться тэгом <p> и заканчиваться тэгом </p> . Например:

<p>Это первый параграф.</p> <p>А это второй параграф.</p> Выделение курсивом

Вы можете выделить одно или больше слов, используя тэг <em>, пример:

Это действительно <em>интересный</em> пункт!

Результат:

Это действительно интересный пункт!

Изменение цвета и размера текста

Тэг FONT может быть использован для указания цвета и размера шрифта, которым будет выведен ваш текст. В этом примере устанавливается цвет:

В этом предложении есть <font color="yellow">слово</font> , выделенное желтым цветом.

Результат:

В этом предложении есть слово выделенное желтым цветом.

Атрибут size служит для указания размера шрифта в условных единицах от 1 до 7. Принято считать, что размер "нормального" шрифта соответствует числу 3. Размер может быть указан как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2):

Советы <font size="+2" color="maroon">ветеринарного</font> врача

Результат:

Советы ветеринарного врача

Вставка рисунков

Использование рисунков делает ваши страницы более интересными. Вставить рисунок позволяет тэг <img>. Предположим, что файл рисунка "peter.jpeg", шириной 200 пикселов и высотой 150, лежит в той же папке что и HTML файл.

<img src="peter.jpeg" width="200" height="150"><BR>

Указание ширины и высоты не является строго необходимым, но увеличивает скорость загрузки вашей WEB-страницы. Следует задать описание картинки для людей, у которых отключена загрузка изображений. Вы можете добавить краткое описание, используя атрибут alt:

<img src="peter.jpeg" width="200" height="150" alt="Мой друг Петя">

В WWW используется два формата графических файлов GIF и JPEG. Формат GIF используется, когда требуется прозрачное изображение или анимация, а также для:

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

Формат JPEG больше подходит в следующих случаях:

• сканированные изображения
• графика со сложным сочетанием цветов и оттенков
• любое изображение с палитрой более чем 256 цветов

Создание ссылок на другие страницы

Ссылки обозначаются тэгом <a>. Определим ссылку на страницу определенную в файле "advanced.htm":

Это ссылка на <a href="advanced.htm">Продвинутый HTML</a>.

Результат:

Это ссылка на Продвинутый HTML.

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

Для ссылки на другую Web-страницу нужно указать ее полный Web-адрес (называемый URL), например, для ссылки на http://www.km.ru/ необходимо набрать следующий текст:

Это ссылка на <a href="http://www.km.ru/">www.km.ru</a>.

Вы можете использовать в ссылке картинку. Следующий пример позволяет кликаньем на логотипе компании перейти на ее домашнюю страницу:

<a href="/"><img src="logo.gif" alt="home page"></a> Списки

HTML предлагает три вида списков. Первый вид называется маркированным (неупорядоченным) списком. Маркированный список открывается тэгом <ul>, а каждый его пункт начинается стандартным тэгом <li>, пример:

<ul> <li>первый пункт списка</li> <li>второй пункт списка</li> <li>третий пункт списка</li> </ul>

Результат:

• первый пункт списка
• второй пункт списка
• третий пункт списка

Второй вид - нумерованный (упорядоченный) список. Он использует тэги <ol> и <li>. Пример:

<ol> <li>первый пункт списка</li> <li>второй пункт списка</li> <li>третий пункт списка</li> </ol>

Результат:

1. первый пункт списка
2. второй пункт списка
3. третий пункт списка

И последний - это список определений (глоссарий). Он представляет текст в форме словарной статьи, состоящей из определяемого термина и абзаца, раскрывающего его значение, открывается тэгом <dl>. Каждый термин открывается тэгом <dt>, а определение тэгом <dd>. Пример:

<dl> <dt>первый термин</dt> <dd>его определение</dd> <dt>второй термин</dt> <dd>его определение</dd> <dt>третий термин</dt> <dd>его определение</dd> </dl>

Результат:

первый термин

его определение

второй термин

его определение

третий термин

его определение

Списки могут быть вложенными, один в другой. Пример:

<ol> <li>первый пункт списка</li> <li>второй пункт списка <ul> <li>первый пункт вложенного списка</li> <li>второй пункт вложенного списка</li> </ul> </li> <li>третий пункт списка</li> </ol>

Результат:

1. первый пункт списка
2. второй пункт списка
   • первый пункт вложенного списка
   • второй пункт вложенного списка
3. третий пункт списка

Определение цветов в HTML

В HTML цвета определяются цифрами в шестнадцатиричном коде. Цветовая система базируется на трех основных цветах - красном, зеленом и синем. Для каждого цвета задается значение от 00 до FF. Затем эти значения объединяются в одно число, перед которым ставится символ #. Данная таблица демонстрирует различные цвета и их шестнадцатиричный код.

FFF FFF

CCC CCC

999 999

666 666

333 333

000 000

FFC C00

FF9 900

FF6 600

FF3 300

99C C00

CC9 900

FFC C33

FFC C66

FF9 966

FF6 633

CC3 300

CC0 033

CCF F00

CCF F33

333 300

666 600

999 900

CCC C00

FFF F00

CC9 933

CC6 633

330 000

660 000

990 000

CC0 000

FF0 000

FF3 366

FF0 033

99F F00

CCF F66

99C C33

666 633

999 933

CCC C33

FFF F33

996 600

993 300

663 333

993 333

CC3 333

FF3 333

CC3 366

FF6 699

FF0 066

66F F00

99F F66

66C C33

669 900

999 966

CCC C66

FFF F66

996 633

663 300

996 666

CC6 666

FF6 666

990 033

CC3 399

FF6 6CC

FF0 099

33F F00

66F F33

339 900

66C C00

99F F33

CCC C99

FFF F99

CC9 966

CC6 600

CC9 999

FF9 999

FF3 399

CC0 066

990 066

FF3 3CC

FF0 0CC

00C C00

33C C00

336 600

669 933

99C C66

CCF F99

FFF FCC

FFC C99

FF9 933

FFC CCC

FF9 9CC

CC6 699

993 366

660 033

CC0 099

330 033

33C C33

66C C66

00F F00

33F F33

66F F66

99F F99

CCF FCC

CC9 9CC

996 699

993 399

990 099

663 366

660 066

006 600

336 633

009 900

339 933

669 966

99C C99

FFC CFF

FF9 9FF

FF6 6FF

FF3 3FF

FF0 0FF

CC6 6CC

CC3 3CC

003 300

00C C33

006 633

339 966

66C C99

99F FCC

CCF FFF

339 9FF

99C CFF

CCC CFF

CC9 9FF

996 6CC

663 399

330 066

990 0CC

CC0 0CC

00F F33

33F F66

009 933

00C C66

33F F99

99F FFF

99C CCC

006 6CC

669 9CC

999 9FF

999 9CC

993 3FF

660 0CC

660 099

CC3 3FF

CC0 0FF

00F F66

66F F99

33C C66

009 966

66F FFF

66C CCC

669 999

003 366

336 699

666 6FF

666 6CC

666 699

330 099

993 3CC

CC6 6FF

990 0FF

00F F99

66F FCC

33C C99

33F FFF

33C CCC

339 999

336 666

006 699

003 399

333 3FF

333 3CC

333 399

333 366

663 3CC

996 6FF

660 0FF

00F FCC

33F FCC

00F FFF

00C CCC

009 999

006 666

003 333

339 9CC

336 6CC

000 0FF

000 0CC

000 099

000 066

000 033

663 3FF

330 0FF

00C C99

009 9CC

33C CFF

66C CFF

669 9FF

336 6FF

003 3CC

330 0CC

00C CFF

009 9FF

006 6FF

003 3FF

Для простоты в HTML определены 16 стандартных цветов, которые вместе с их шестнадцатиричными кодами приведены ниже.

black = "#000000"	green = "#008000"
silver = "#C0C0C0"	lime = "#00FF00"
gray = "#808080"	olive = "#808000"
white = "#FFFFFF"	yellow = "#FFFF00"
maroon = "#800000"	navy = "#000080"
red = "#FF0000"	blue = "#0000FF"
purple = "#800080"	teal = "#008080"
fuchsia = "#FF00FF"	aqua = "#00FFFF"