|
Учебник HTML. Учебник по веб дизайну
Краткий учебник по языку HTML для начинающих веб дизайнеров (по веб дизайну)
Введение
HyperText Markup Language (HTML) - язык разметки гипертекста.
Гипертекст - информационная структура, позволяющая устанавливать смысловые связи между элементами текста на экране компьютера таким образом, чтобы можно было легко осуществлять переходы от одного элемента к другому. На практике в гипертексте некоторые слова выделяют путем подчеркивания или окрашивания в другой цвет (гиперссылки). Выделение слова говорит о наличии связи этого слова с некоторым документом, в котором тема, связанная с выделенным словом рассматривается более подробно.
Отдельный документ, выполненный в формате HTML, называется:
- HTML-документом;
- Web-документом;
- Web-страницей.
Такие страницы как правило имеют расширение 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 - указатель на файл графики:
src="Ссылка на файл".
Например:
<IMG src="bos2.gif> - обычный рисунок
<IMG src="pantera.gif"> - анимированный рисунок
Очень полезным атрибутом является 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' - ширина рамки задается в пикселах.
Например:
<IMG src="pantera.gif" border="2" alt="Панорама побережья">
Полностью тег IMG должен выглядеть следующим образом:
<IMG src="bos2.gif" width="76" height="121" alt="Скриншот игры">
Если вы хотите использовать рисунок в качестве обоев странички (background), то в теге <BODY> используем этот атрибут с указанием адреса рисунка обоев.
|
|