Уроки 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>.
Давайте попробуем ввести заголовок в нашу страницу. Этот текст должен
распологаться в части, отдельной тегами <BODY> и </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">
- По умолчанию, линия имеет прозрачный цвет. Но из-за тени, нам кажется
что линия серая. Мы можем изменить цвет линии. Чуть раньше было
рассказано, и объяснено на примерах какими могут быть цвета. Синтаксис
виден из примера.
Все эти параметры могут сочетаться и использоваться паралельно.
Итак,
на этом уроке мы с Вами изучили гиперссылки, затронули тему цветов,
поговорили о заголовках, начали разговор о наборе текста и изучили
различные виды разделителей.
|
Шаг 2: Размещаем в интернет | |
-------------------------
|