Web-программирование: Урок 3. «Начинаем делать сайт».
- Об уроке
- Читать урок
Тема сегодняшнего урока: «Начинаем делать сайт».
В предыдущем уроке мы изучили тэги <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. А сейчас, с вашего позволения, я окончу урок, думаю, на сегодня хватит. В следующем выпуске мы продолжим делать сайт.
Комментарии: Добавить комментарий
Пока нет комментариев.
Добавьте ваш комментарий:
Чтобы оставить комментарий вам нужно войти на сайт или зарегистрироваться.