Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.224.70.11
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Модератор форума: Hawk  
Уроки HTML'а. Урок # 2.
Сообщение оставлено 29.08.2010 в 13:03:28 | Сообщение #1
Уроки HTML'а. Урок # 2.


Итак, на предыдущем уроке мы начали разговор о гиперссылках. У многих браузеров существует история посещенных страниц. Скажем, если я когда-то был на вашем сайте, и заходил в раздел про меня, то я увижу эту ссылку другим цветом. По умолчанию этот цвет фиолетовый, но изменив в <BODY> значение VLINK="LIME", мы увидим посещенную ссылку салатовым цветом. А еще можно сделать так, чтобы кликая на ссылку, скрывающаяся за ней страница открывалась в новом окне. Синтаксис таков:


  <a target="_blank" href="http://cray.vision.krg.kz/~Sam/dlab">Design Lab</a>


Отсюда видно, что кроме параметра HREF (что значит "направление", "расположение"), здесь присутствует target="_blank". Этот параметр и дает команду открывать ссылку в новом окне.

Вообще мы еще, скорее всего, вернемся к этой теме. Пока нам достаточно и этого...

Давайте поговорим о цветах. Язык HTML понимает 2 вида цветовых переменных: HEX и Color. Color - это ввод цвета словом, как в английском языке (red - красный, blue - синий и т.д.). А очень интересно устроены HEX-значения. Давайте посмотрим на эту таблицу:























#110000 #330000 #550000 #990000 #ff0000
#001100 #003300 #005500 #009900 #00ff00
#000011 #000033 #000055 #000099 #0000ff

В HEX паллитре числа представлены парами. Т.е. можно присмотрвешись заметить то, что первая пара влияет на красный цвет, вторая пара чисел влияет на зеленый цвет, и треьтя пара - на синий (#RRGGBB). А сейчас я представлю вам паллитру текстовых цветов:























red cyan lime pink fuchsia
green gray maroon navy olive
blue purple silver teal yellow

Заголовки

Итак, продолжим набивать текстом нашу страницу. Поговорим о заголовках. Подобно названию страницы, заголовки должны быть краткими и полезными. Существует шесть размеров шрифта заголовков (они пронумерованы от одного до шести, причем первый номер соответствует самому крупному размеру шрифта). Итак, давайте взглянем на эти виды заголовков:


Пример заголовка - размер 1


Пример заголовка - размер 2


Пример заголовка - размер 3


Пример заголовка - размер 4


Пример заголовка - размер 5

Пример заголовка - размер 6


Заголовки отображаются Web-браузерами намного крупнее и жирнее стандартного текста. Это хороший способ выделять различные части Web-страницы.

Чтобы поспользоваться заголовком с размером букв первого номера, нужно обозначить выделяемый текст тегами <H1> и </H1>. Давайте попробуем ввести заголовок в нашу страницу. Этот текст должен распологаться в части, отдельной тегами <
Code
BODY
> и </
Code
BODY
>.

файл: index.html

<HTML>

  <HEAD>

    <TITLE>Design LAB</TITLE>

    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

  </HEAD>

  <BODY BGCOLOR="BLACK" TEXT="WHITE" LINK="LIME" ALINK="LIME" VLINK="LIME">

    <H1>Моя Домашняя Страничка</H1>

    На этой страничке есть информация <a href="about.html">про меня</a>

  </BODY>

</HTML>


И вот что мы получим в результате:

preview: index.html

Моя Домашняя Страничка



На этой страничке есть информация про меня


Написав <H1>, мы активизировали комманду "Заголовок #1". Написав </H1>, мы закрыли эту команду. Весь текст который находился между этими тегами был подвластен комманде "Заголовок #1".

Набор текста

Давайте теперь набьем какой-нибуть текст в нашу страничку. Процедура набора текста в HTML-документ является самой простой. Итак, наберем:


Здравствуйте. Меня зовут Выскубов Семен. Мои любимые сайты:

Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab)

Bjork (http://bjurk.by.ru)

Prodigy (http://prodiga.by.ru)

iPoizon.com (http://iPoizon.com)


Но запустив нашу страничку на браузере, мы увидим:

preview: index.html

Моя Домашняя Страничка



Здравствуйте. Меня зовут Выскубов Семен. Мои любимые сайты: Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab) Bjork (http://bjurk.by.ru) Prodigy (http://prodiga.by.ru) iPoizon.com (http://iPoizon.com)


Все смешалось. Необходимо отформатировать текст. Существует тег <br>. Этот тег нужно вставлять в месте, где нужно делать перенос строки. Давайте теперь, после обработки посмотрим на результат:

preview: index.html
файл: index.html

Моя Домашняя Страничка



Здравствуйте. Меня зовут Выскубов Семен. Мои любимые сайты:

- Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab)

- Bjork (http://bjurk.by.ru)

- Prodigy (http://prodiga.by.ru)

- iPoizon.com (http://iPoizon.com)


<HTML>

  <HEAD>

    <TITLE>Design LAB</TITLE>

    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

  </HEAD>

  <BODY BGCOLOR="BLACK" TEXT="WHITE" LINK="LIME" ALINK="LIME" VLINK="LIME">

    <H1>Моя Домашняя Страничка</H1>

    Здравствуйте. Меня зовут Выскубов Семен. Мои любимые сайты:<br>

    - Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab)<br>

    - Bjork (http://bjurk.by.ru)<br>

    - Prodigy (http://prodiga.by.ru)<br>

    - iPoizon.com (http://iPoizon.com)<br>

  </BODY>

</HTML>




Существует также тег параграфа, т.е. небольшой отступ от начала строки. Это тег <dd>. Давайте попробуем заменить в списке знаки - на <dd>:

preview: index.html
файл: index.html

Моя Домашняя Страничка



Здравствуйте. Меня зовут Выскубов Семен. Мои любимые сайты:

Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab)

Bjork (http://bjurk.by.ru)

Prodigy (http://prodiga.by.ru)

iPoizon.com (http://iPoizon.com)


<HTML>

  ...

    Здравствуйте. Меня зовут Выскубов Семен. Мои любимые сайты:<br>

    <dd>Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab)<br>

    <dd>Bjork (http://bjurk.by.ru)<br>

    <dd>Prodigy (http://prodiga.by.ru)<br>

    <dd>iPoizon.com (http://iPoizon.com)<br>

  ...

</HTML>


Но, к сожалению, этот тег не работает в ранних версиях различных браузеров.

Разделители

Хотя простые линии очень полезны, они довольно скоро надоели создателям Web-страниц. Поэтому несколько лет назад, тег <hr> был доработан до его теперешнего, "резинового" в обращении, вида. Теперь помимо тонкой линии поперек страницы вы можете применить и другой тип линии, используя расширения тега <hr>. Давайте посмотрим что можно сделать с линиями:


Простая линия
<hr>


Линия без тени
<hr noshade>


Линия размером в 10px
<hr size="10">


Линия шириной в 80%
<hr width="80%">


Оранжевая линия
<hr color="orange">


А теперь сгармонируем все параметры в одну линию
<hr noshade width="80%" color="orange" size="10" >





А теперь спокойно разберем все возможные параметры линий:

  • <hr noshade> - По умолчанию, линия отбрасывает трудно-видимую тень. Для того чтобы тени от линии не было, необходимо использовать такой синтаксис.

  • <hr size="10"> - По умолчанию, линия имеет размер 1 пиксел. Но мы можем его менять. Для этого необходимо вписать size="ваше число", где ваше число - число пикселей.

  • <hr width="80%"> - По умолчанию, линия имеет ширину равную 100%, т.е. во всю длинну окна браузера. В данном случе мы изменили этот параметр на 80%, т.е. ширина линии равна не 100, а 80 % занимаемой ширины окна.

  • <hr color="orange"> - По умолчанию, линия имеет прозрачный цвет. Но из-за тени, нам кажется что линия серая. Мы можем изменить цвет линии. Чуть раньше было рассказано, и объяснено на примерах какими могут быть цвета. Синтаксис виден из примера.

    Все эти параметры могут сочетаться и использоваться паралельно.


    Итак, на этом уроке мы с Вами изучили гиперссылки, затронули тему цветов, поговорили о заголовках, начали разговор о наборе текста и изучили различные виды разделителей. Если у вас есть вопросы по пройденному материалу, присылайте их .


  •  Сообщение отредактировал Ashot - Воскресенье, 29.08.2010, 13:06:26
     
     
       
    Сообщение оставлено 07.09.2010 в 06:41:02 | Сообщение #2
    Напомню, что по стандартам HTML5 все теги БОЛЬШИМИ буквами убраны, тоесть ваш сайт не пройдет валидность в HTML5 и будет некорректно отображаца ))

    Урок хороший, но большие теги, это Беее.....

     
       
    Сообщение оставлено 01.10.2010 в 17:56:42 | Сообщение #3
    не плохо smile
     
     
       
    Сообщение оставлено 17.10.2010 в 08:51:49 | Сообщение #4
    Спасибо!
     
     
       
    Сообщение оставлено 20.10.2010 в 23:43:51 | Сообщение #5
    Kenny9171, незачто smile
     
     
       
    Сообщение оставлено 06.12.2010 в 17:55:39 | Сообщение #6
    спасибо!!
     

    У гениальности есть побочные эффекты
     
       
    Сообщение оставлено 18.01.2011 в 18:58:17 | Сообщение #7
    Спасибо хороший урок)))
     
     
       
    Сообщение оставлено 21.01.2011 в 20:32:16 | Сообщение #8
    Круто, большое спасибо!
     
     
       
    Сообщение оставлено 22.02.2011 в 00:22:57 | Сообщение #9
    Просто шиК
     
     
       
    • Страница 1 из 1
    • 1
    Поиск:
     
    Графика от: Megas, GraFOS | Дизайн сверстал E.A.
    Хостинг от uCoz
    Яндекс.Метрика