Что такое HTML?
Всемирная паутина соткана из WEB-страниц
(WEB-pages), а эти страницы создаются при
помощи языка разметки гипертекста (Hypertext
Markup Language, HTML). Хотя многие, особенно
новички, говорят сегодня о "Программировании
на HTML", HTML - это язык разметки.
Вы используете 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.xserver.ru/
необходимо набрать следующий текст:
Это ссылка на <a href="http://www.xserver.ru/">www.xserver.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>
Результат:
- первый пункт списка
- второй пункт списка
- третий пункт списка
И последний - это список
определений (глоссарий). Он
представляет текст в форме
словарной статьи, состоящей из
определяемого термина и абзаца,
раскрывающего его значение,
открывается тэгом <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>
Результат:
- первый пункт списка
- второй пункт списка
- первый пункт вложенного
списка
- второй пункт вложенного
списка
- третий пункт списка
Определение цветов в 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"
|
Литература по HTML
|