Уроки Web-программирования: Начинаем делать сайт (body, font, html, style, a, css)

Автор megabax

27.07.2009 г.

Уроки web-программирования: «Начинаем делать сайт».

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

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

<HTML>

<HEAD>

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

</HEAD>

<BODY>

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

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

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

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

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

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

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

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

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

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

</BODY>

</HTML>

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

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

<HTML>

<HEAD>

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

</HEAD>

<BODY>

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

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

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

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

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

<UL>

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

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

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

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

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

</UL>

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

</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>

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

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

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

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

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

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

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

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

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

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

</UL>

</BODY>

</HTML>

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

<HTML>

<HEAD>

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

</HEAD>

<!--

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>

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

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

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

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

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

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

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

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

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

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

</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. А сейчас, с вашего позволения, я окончу урок, думаю, на сегодня хватит. В следующем выпуске мы продолжим делать сайт.

Последнее обновление ( 14.09.2010 г. )

« След.		Пред. »

Вернуться