Четверг, 28.03.2024, 17:51
Приветствую Вас Гость | RSS

!!!!!!!!!!!!!

Site Translation
Перевести эту страницу
Translate.Ru PROMT©
Меню сайта
БОНУС

Получить WMR-бонус Balans.kz на свой кошелек!
Музыка
Радио Форекс
Форма входа
Наш опрос
Оцените мой сайт
Всего ответов: 9

Блог

Главная » 2011 » Апрель » 27 » Учебник HTML
15:17
Учебник 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 

Градации оранжевого цвета

КодЦвет
#FFB0001
#FFA8002
#FFA0003
#FF98004
#FF90005
#FF88006
#FF80007
#FF78008
#FF70009
#FF680010
#FF600011
#FF580012

А так может выглядеть компьютерная радуга:

К
О
Ж
З
Г
С
Ф

Использование цвета при офромлении страницы

Цвет шрифта можно задать с помощью атрибута 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="Скриншот 
Java игры"> 
       
      Если вы хотите использовать рисунок в качестве обоев странички (background), то в теге <BODY> используем этот атрибут с указанием адреса рисунка обоев. 

Просмотров: 851 | Добавил: Карина | Рейтинг: 0.0/0
Всего комментариев: 2
2 Ahmet  
0
Wow! Great to find a post with such a clear mesgesa!

1 David  
0
I didn't know where to find this info then kbooam it was here.

Имя *:
Email *:
Код *:
Календарь
«  Апрель 2011  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Глобус
Страны
free counters
Раскрутка Сайта
Обмен визитами 1xN
Введите url сайта: 
Выберите план: 
Луна
Фазы Луны на RedDay.ru (Барнаул)