HyperText Markup Language (HTML) - язык разметки гипертекста.
Гипертекст - информационная структура, позволяющая устанавливать смысловые связи между элементами текста на экране компьютера таким образом, чтобы можно было легко осуществлять переходы от одного элемента к другому. На практике в гипертексте некоторые слова выделяют путем подчеркивания или окрашивания в другой цвет (гиперссылки). Выделение слова говорит о наличии связи этого слова с некоторым документом, в котором тема, связанная с выделенным словом рассматривается более подробно.
Отдельный документ, выполненный в формате HTML, называется:
Такие страницы как правило имеют расширение htm или html.
Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимиы для того, чтобы обеспечить возможность перехода от одного документа к другому. Группа Web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-узлом или Web-сайтом. Каждая HTML-страница имеет свой уникальный URL-адрес в интернете.
Структура URL-адреса
Url-адрес ресурса образуется объединением доменного имени компьютера, на котором он хнанится, и пути поиска (пути доступа), который ведет от корневого каталога жесткого диска этого компьютера черех все вложенные каталоги к файлу, представляющему ресурс.
Типичный URL для WWW имеет вид:
http://www.название.домен/имя файла
Здесь название - это часть адреса, который часто употребляется для обозначения владельца сайта, а домен - обозначение крупного "раздела" Интернета: страны (ru), области деятельности (com) и т.д. Например, адрес фантастического рассказа desant_2003.doc в Интернете:
<a href='http://tuapse-more.narod.ru/desant_2003.doc' title='Десант'>Десант</a> будет выглядеть на веб странице так: Десант
Элемент
Тег
Атрибуты
Пример
Абзац
<P> </p>
<P align="left"> </p> - выравнивание текста
по левому краю экрана.
<P align="center> </p> - выравнивание текста
по центру экрана.
<P align="right"> </p> - выравнивание текста
по правому краю экрана.
<P align="center"> Текст этого
абзаца выровнен по центру экрана </p>
Принудительный переход на новую строку
<br>
Уронили мишку на пол <BR> Оторвали мишке лапу <BR>
Все равно его не брошу <BR> Потому что он хороший.
Выделение текста полужирным шрифтом
<B> </b>
Этот текст имеет обычное начертание, <B> а этот выделен
полужирным шрифтом </b>.
Выделение текста курсивом
<I> </i>
Этот текст имеет обычное начертание, <I> а этот выделен
курсивом</i>.
Определение типа, размера и цвета шрифта.
<FONT> </font>
<FONT size=3> </font> - абсолютный размер шрифта
(возможные значения от 1 до 7).
<FONT color="blue"> </font> - цвет шрифта
<FONT face="arial"> </font> - определение
определенного шрифта.
<FONT size=3 color="blue" face="arial">
</font> - все атрибуты могут быть использованы совместно
внутри данного тега.
<FONT size=1> Это шрифт 1 </font>
<FONT size=2> Это шрифт 2 </font>
<FONT size=3>Это шрифт 3 </font>
<FONT size=4>Это шрифт 4 </font>
<FONT size=5> Это шрифт 5 </font>
<FONT size=6> Это шрифт 6 </font>
<FONT size=7> Это шрифт 7 </font>
<FONT color="blue"> Это шрифт синего цвета </font>
<FONT face="arial" size=3 color="blue"
> Это шрифт arial размером 3, цвет синий. </font>
Цитата
<BLOCKQUOTE> </blockquote>
Это обычный текст абзаца. <BLOCKQUOTE> А это текст цитаты.
</blockquote> А это снова обычный текст.
Маркированный список
<UL>
<LI>
<LI>
<LI>
</ul>
<UL>
<LI> Первый пункт списка;
<LI> Второй пункт списка;
<LI> Третий пункт списка.
</ul>
Нумерованный список
<OL>
<LI>
<LI>
<LI>
</ol>
<OL>
<LI> Первый пункт списка;
<LI> Второй пункт списка;
<LI> Третий пункт списка.
</ol>
Управление цветом
Кодирование цвета используется для раскрашивания шрифтов,
горизонтальных линий, фона и других элементов страницы. Цвета обозначаются
английскими названиями или числовыми шестнадцатеричными кодами.
Стандартные цвета
Аквамарин
aqua
#00FFFF
Белый
white
#FFFFFF
Желтый
yellow
#FFFF00
Зеленый
green
#008000
Золотистый
gold
#FFD700
Индиго
indigo
#4B0080
Каштановый
maroon
#800000
Красный
red
#FF0000
Оливковый
oliv
#808000
Пурпурный
purple
#800080
Светло-зеленый
lime
#00FF00
Серебристый
silver
#C0C0C0
Серый
gray
#808080
Сизый
teal
#008080
Синий
blue
#0000FF
Ультрамарин
navy
#000080
Фиолетовый
violet
#EE80EE
Фуксиновый
fuchsia
#FF00FF
Черный
black
#000000
Градации красного
Код
Цвет
Код
Цвет
#010000
#800000
#100000
#900000
#200000
#A00000
#300000
#B00000
#400000
#C00000
#500000
#D00000
#600000
#E00000
#700000
#FF0000
Градации зеленого
Код
Цвет
Код
Цвет
#000100
#008000
#001000
#009000
#002000
#00A000
#003000
#00B000
#004000
#00C000
#005000
#00D000
#006000
#00E000
#007000
#00FF00
Градации синего
Код
Цвет
Код
Цвет
#000001
#000080
#000010
#000090
#000020
#0000A0
#000030
#0000B0
#000040
#0000C0
#000050
#0000D0
#000060
#0000E0
#000070
#0000FF
Градации оранжевого цвета
Код
Цвет
#FFB000
1
#FFA800
2
#FFA000
3
#FF9800
4
#FF9000
5
#FF8800
6
#FF8000
7
#FF7800
8
#FF7000
9
#FF6800
10
#FF6000
11
#FF5800
12
А так может выглядеть
компьютерная радуга:
К
О
Ж
З
Г
С
Ф
Использование цвета при офромлении страницы
Цвет шрифта можно задать с помощью атрибута color
в теге <FONT>, например:
<FONT color="FF5800"> Это цветной
текст 1 </font>
<FONT color="blue"> Это цветной текст
2 </font>
Чтобы задать цвет фона страницы используется атрибут color
внутри тега <BODY>, например:
<BODY color=" FFFFCC">
Рисунки на WEB-страничке
<IMG> - элемент для создания ссылки на графический файл (image). Он не содержит конечного тега - вся необходимая информация задается при помощи атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения в гиперссылках, вставлять картинки в таблицы, просто размещать рисунки на Web-странице, решать задачи дизайна и т.д.
Необходимым атрибутом является src - указатель на файл графики:
Очень полезным атрибутом является alt. Он позволяет выводить текст в тех местах, где должны располагаться рисунки. Страница может загружаться достаточно долго, и пока графические файлы на подходе, пользователь должен видеть, какие изображения он сможет получить.
Например:
<IMG src="bos2.gif alt="Скриншот игры" >
<IMG src="pantera.gif" alt="Обои для Windows">
Высоту и ширину области, в которой демонстрируется рисунок, задают при помощь атрибутов height - высота и width - ширина.
Например:
<IMG src="bos2.gif" width="76" height="121">
<img src="bos2.gif" width="176">
Обратите внимание, что во втором случае изменен размер рисунка (мы изменили ширину, высота будет изменена автоматически). При этом происходит потеря качества изображения, поэтому желательно задавать эти атрибуты в соответствии с реальными размерами рисунка.
Атрибут border задает рамку вокруг объекта. border="2' - ширина рамки задается в пикселах.
Если вы хотите использовать рисунок в качестве обоев странички (background), то в теге <BODY> используем этот атрибут с указанием адреса рисунка обоев.