Учебник HTML по веб     дизайну бесплатно

  

Полезные ссылки:     

 

 
сайт бесплатно сайт бесплатно

Учебник 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> используем этот атрибут с указанием адреса рисунка обоев.

 

  
  бесплатные шаблоны   www.newmoscow71.ru   заработок в интернете   Сайт бесплатно    хостинг бесплатно   Раскрутка    разработка


сайт бесплатно сайт бесплатно

Каталог@MAIL.RU - каталог ресурсов интернет Rambler's Top100
Hosted by uCoz