 |
Создаём свой WEB - Сайт шаг за шагом. Часть 2.Автор: MadCoder (madcoder@hotbox.ru)
Получилось как-то блекло и неаккуратно. Сегодня нам предстоит это исправить. Во первых, мы заменим надпись"Pupkin Software homepage" (конечно в вашем случае это какая-то другая надпись) на логотип, а также познакомимся с несколькими тегами, которые украсят ваш сайт.
Здесь "путь к картинке"это адрес по которому расположено изображение, которое вы хотите добавить. Когда мы будем помещать свою страничку на сервер (т.е. собственно в интернет), то укажем там адрес на сервере. А пока укажите путь, по которому у вас лежит картинка на жёстком диске. Например "C:\Photos\vasia.jpg". Если картинка сохранена в том же каталоге, что и ваша страничка, то просто укажите её имя - "vasia.jpg". Именно так мы поступим. Копируйте вашу картинку в каталог со страничкой и обзовите её, например, "logo.jpg".Теперь нам осталось только заменить заголовок "Pupkin Software Homepage на картинку. Для этого удалите теги <h1> и </h1>, а также сам текст.Теперь пишем:
В значении поля ALT напишите текст, который должен появляться при наведении на картинку курсора. У тега IMG Есть много других атрибутов, но мы рассмотрим их потом. Обратите внимание, что я добавил ещё одну отсекающую черту (<HR>). Я сделал это просто для красоты, вы можете убрать её, но картинка всё равно появится. Теперь сохраните измеенения и откройте страничку в браузере. Ну как? Уже гораздо лучше, но всё равно нам ещё работать и работать. А где же содержание ? Знаете чего так не хватает на нашей страничке? Текста. Ведь в конце-концов посетители приходят на сайт из-за его содржания, а дизайн лишь создаёт приятную обстановку и удобства. Так что пора добавить немногo текста. Но текст должен быть красиво оформлен, то есть должны быть соблюдены элементы форматирования - заголовки, отступы, абзацы. Первые мы создавать уже умеем (теги <Hx&lg), а сейчас поговорим о последних. Новый абзац создаётся очень просто -тегом <p&lg. Вообще - то этот тег парный, но закрывающий тег можно не указывать. У тега есть одни важный атрибут - align. Он может принимать следующие значения: left, right, justify, center. Этот атрибут указывает куда должен прилегать абзац. В целом это выглядит так:
В этом примере я буду указывать значение left, вы же можете поэксперементировать с другими значениями. Теперь можно со спокойно душой писать содержание главной странички. Что бы создать новый абзац просто пишем тег <p>. Посмотрите на мой пример и вы во всём разберетесь. Обратите внимание на то, что я часто использую теги <B>, <I>, <H3>, <LI>.Советую и вам их использовать, так как они позволяют красиво отформатироватьтекст. Вот собственно и сам пример:
В этом примере нет гиперссылок, так как мы с вами ещё не изучили их - ими мы займёмся в следующий раз, обещаю. Но даже без ссылок можно создать вот такую вот страничку и получать от неё пользу - в данном примере они узнают о группе разработчиков ПО и смогут заказать у них по E-Mail программу. Если захотят :) Как видите, даже зная совсем немного тегов, можно создать довольно приличную страничку. Я специально привёл этот пример чтобы не сомневались в своих силах и уже сейчас могли начать создавать дизайн своего сайта. В качестве домашнего задания вы можете, опираясь на данный пример, создать свою главную страничкку. А в следующий раз мы разобьём разделы по отдельным страницам и (если успеем :) я покажу вам некоторые приёмы работы с Cute Html. |