Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 680 RSS
←   Июль 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

680 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


Добрый день, уважаемые подписчики!

Тема сегодняшнего выпуска: «Начинаем делать сайт».

 

В предыдущем выпуске мы изучили тэги <body>, <font>, <br>, <b>, <i> и <u>.  Для того, что бы начать делать сайт, изучим еще один тэг <a></a>. Он обозначает гиперссылку, по которой можно перейти на другой документ.

Рассмотрим пример:

 

<HTML>

<HEAD>

<TITLE>Урок 3. Начинаем делать сайт</TITLE>

</HEAD>

<BODY>

<font size=5>

<A href=index.htm>О Компании</a><br>

<A href=news.htm>Новости</a><br>

<A href=steklom.htm>Стекломагниевый лист</a><br>

<A href=cement.htm>Цемент</a><br>

<A href=plitka.htm>Потолочная плитка</a><br>

<A href=profil.htm>Профиля</a><br>

<A href=zamki.htm>Дверные замки, ручки</a><br>

<A href=siding.htm>Сайдинг</a><br>

<A href=dekor.htm>Потолочная плика</a><br>

<A href=contacts.htm>Контакты</a><br>

</font>

</BODY>

</HTML>

 

Вот у нас и готово оглавление сайта. Правда, когда мы щелкаем на гиперссылке, у нас выдает «Невозможно отобразить страницу …». Правильно, сами странички то еще не готовы.

 

Давайте создадим их, начнем с файла index.htm:

<HTML>

<HEAD>

<TITLE>Урок 3. Начинаем делать сайт </TITLE>

</HEAD>

<BODY>

<B>Добро пожаловать!</B> Рады приветствовать Вас на сайте нашей компании.<br>

Наша компания занимается экспортом-импортом различных товаров производства Китай.<br>

Персонал компании постоянно работает над внедрением новых строительных товаров на потребительский рынок.<br>

Вся продукция сертифицирована и соответствует ГОСТ  и ТУ.<br>

«ИжСнаб» - это:<br>

<UL>

<LI>Гарантированное качество товара;</LI><br>

<LI>Гибкая система скидок;</LI><br>

<LI>Индивидуальный подход к клиенту;</LI><br>

<LI>Поддержание договорных отношений;</LI><br>

<LI>Любая форма оплаты.</LI><br>

</UL>

Придя в офис ООО «ИжСнаб», Вы получите профессиональную, полную информацию о товарах, реализуемых компанией.<br>

 

</BODY>

</HTML>

 

Как вы заметили, в тексте присутствуют новые, незнакомые тэги, это <UL></UL> и <LI></LI>. Опробовал пример, вы, наверное, уже догадались, что это список. Тэг <UL></UL> обозначает список, а <LI></LI> - элемент списка.

Теперь приступим к изучению параметров. Попробуйте вместо <UL> написать <UL type=circle>. Заметили разницу? А теперь попробуйте <UL type=square>. Увидели, что маркеры стали квадратные?

Возможно так же задавать нумерованный список (type=1), список с буквенной нумерацией, если в качестве параметра type задать a или A,  а так же можно сделать нумерацию элементов списка римскими цифрами (type=I).

Можно задать вид маркера для отдельного элемента списка. Попробуйте, например такой пример:

<HTML>

<HEAD>

<TITLE>Урок 2. Изучение тэгов</TITLE>

</HEAD>

<BODY>

<b>Добро пожаловать!</B> Рады приветствовать Вас на сайте нашей компании.<br>

Наша компания занимается экспортом-импортом различных товаров производства Китай.<br>

Персонал компании постоянно работает над внедрением новых строительных товаров на потребительский рынок.<br>

Вся продукция сертифицирована и соответствует ГОСТ  и ТУ.<br>

«ИжСнаб» - это:<br>

<UL type=1>

<LI>Гарантированное качество товара;</LI><br>

<LI type=circle>Гибкая система скидок;</LI><br>

<LI type=square>Индивидуальный подход к клиенту;</LI><br>

<LI>Поддержание договорных отношений;</LI><br>

<LI>Любая форма оплаты.</LI><br>

</UL>

Придя в офис ООО «ИжСнаб», Вы получите профессиональную, полную информацию о товарах, реализуемых компанией.<br>

 

</BODY>

</HTML>

 

А теперь займемся нашим оглавлением. Давайте сделаем так, что бы гиперссылки были подчеркнуты только когда на них наводиться мышка. А еще пусть они выделяться красным цветом.  Все это реализовано в следующем примере:

<HTML>

<HEAD>

<TITLE>Урок 3. Делаем сайт</TITLE>

</HEAD>

            <STYLE TYPE="text/css">

            <!--

            A:hover {

                        color:red;

                        text-decoration:underline;

                        }

            A:link {

                        text-decoration:none;

            }

            A:visited {

                        text-decoration:none;

            }

            A:visited:hover {

                        text-decoration:underline;

            }

            -->

            </STYLE>

<BODY>

 

<font size=5>

<A href=index.htm>О Компании</a><br>

<A href=news.htm>Новости</a><br>

<A href=steklom.htm>Стекломагниевый лист</a><br>

<A href=cement.htm>Цемент</a><br>

<A href=plitka.htm>Потолочная плика</a><br>

<A href=profil.htm>Профиля</a><br>

<A href=zamki.htm>Дверные замки, ручки</a><br>

<A href=siding.htm>Сайдинг</a><br>

<A href=dekor.htm>Потолочная плика</a><br>

<A href=contacts.htm>Контакты</a><br>

</font>

</BODY>

</HTML>

 

Вот вы познакомились с новым тэгом <STYLE></STYLE>. Из названия нетрудно догадаться, что он задает стиль оформления. Синтаксис данного тэга именно такой, как приведен в этом пример, сначала идет <STYLE TYPE="text/css">, затем <!--, после чего идут правила стиля. Все это дело заканчивается --> а потом тэгом  </STYLE>.  Теперь подробнее о правилах. Сперва идет селектор, он показывает, для какого элемента указано правило, в {} заключено само правило. A:hover обозначает, что задается правило стиля для гиперссылок, на которые наведен курсор мыши; color:red – это цвет текста (красный), text-decoration – обозначает оформление (декорацию текста), underline – подчеркнутый текст, none – текст без подчеркивания.

A:link – обозначает не посещенную ссылку, A:visited – посещенную, A:visited:hover – посещенную ссылку, на которую наведен курсор мыши.

Подробнее о стилях я расскажу, когда мы будем проходить CSS. А сейчас, с вашего позволения, я окончу урок, думаю, на сегодня хватит. В следующем выпуске мы продолжим делать сайт.
В избранное