Рейтинг@Mail.ru
    Работа \ Обучение \ Web-программирование: Урок 3. «Начинаем делать сайт».

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



    Теги: HTML , web-программирование , body , font , title , UL , LI , STYLE , visited , hover , CSS , link , href , text-decoration , underline
    Смотрели:

    всего 18679 раз



    Комментарии: Добавить комментарий

    Пока нет комментариев.

    Добавьте ваш комментарий:

    Чтобы оставить комментарий вам нужно войти на сайт или зарегистрироваться.