Html для начинающих ( часть 2-ая)

Среда, 11 Ноября 2009 г. 12:34 + в цитатник

Html для начинающих ( часть 2-ая)

Продолжаем попытку разобраться в html :-) Первая часть ТуТ

Если помните, в первой части мы тренировались в форматировании шрифтов. У себя же на "народе". Изначально вам уже были даны какие-то теги в редакторе, а сама "тренировка" велась между тегами <body> и </body>
Так вот, теперь про эти "ключевые" теги, которые даются изначально:

<html> и в самом низу закрывающий </html> - говоря простым языком,- этот тег обозначает, что за "документ" собственно говоря и где его начало и конец. Прописывать его надо ( если сами создаете страницу с нуля и без "народа",- не забывайте об этом).

<head> и закрывающий </head> - так называемая "голова" документа ( страницы сайта). Между этими тегами пишут некую "служебную информацию". Об этом конечно еще будем говорить, но пока так. Плюс содержимое распложенное между этими тегами не видно пользователю на странице.

<title> и закрывающий </title> - Заголовок страницы, вот и первый пример такой "служебной информации". Как видите, эти два тега написаны именно в "голове" документа ( смотреть выше).
Между этими тегами прописывается название странички или еще какая-нибудь информация о содержании. В результате, пользователь это увидит в самом "верху" браузера, а точнее:
(216x78, 9Kb)

И наконец:

<body> и </body> - тело документа ( странички сайта). Т.е. между этими тегами и пишется вся видимая пользователю страничка. Тут и картинки, и тексты и пр., пр., пр.,- все то, что вы захотите, чтоб увидел пользователь:-))

Теперь простой пример со всеми этими тегами:

<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Всем привет!!!

</body>
</html>

Это минимум конечно, но при всем при том,- это уже страничка сайта. Полностью рабочая. Попробуйте все это скопировать и вставить в редактор на народе. Только в пустой, все что там было изначально- удалите:-)
Теперь, думаю, стало более менее понятно, как написать элементарную страничку:-)
В моем примере, фразу "Всем привет!!!" можно написать другим "шрифтом" ( форматированием шрифта). Жирным, курсивом и т.д., теми вариантами, которые мы рассматривали в первой части нашего обучения. Попробуйте сами. Вот один пример. Когда будете пробовать,- следите за верной последовательностью тегов:

<html>
<head>
<title>Моя первая страничка</title>
</head>

<body>
Всем привет!!!

</body>
</html>

Основу рассмотрели. Теперь еще один тег вам на изучение:

Для начала, если кто не знает что такое ссылка:-)
Как всегда простым языком - ссылка это адрес странички сайта. У нас есть телефоны,- с номерами. Квартиры - с адресами. Так вот и у странички сайта должен быть адрес. Например адрес странички записей моего дневника:

http://www.liveinternet.ru/users/legionary/

Но это просто адрес... не очень удобно пользоваться таким оформлением. Гораздо лучше, чтобы адрес был кликабельным. Т.е. чтобы при нажатии на него кнопкой мыши, пользователя перекидывало именно на эту страничку. Т.е. вот такое оформление:

http://www.liveinternet.ru/users/legionary/

Уже лучше. Но не очень красиво. Лучше, чтобы вместо всего этого адреса был понятный, но точно так же - "кликабельный", текст. Который хотя бы будет объяснять,- адрес чего или кого это:-) Пример:

Мой блог:-)

Замечательно:-) Теперь о том, как создать такую кликабельную ссылку в html. Как всегда,- нам помогут теги:

<a href="Адрес странички(ссылка)">Фраза подмена ( например "мой дневник")</a>

Обращаем внимание на закрывающий тег </a>.

Это код самой обычной ссылки. Но есть множество дополнений к коду вставки ссылки.
Расскажу о некоторых.

Одна и та же ссылка на страничке может принимать одно из трех значений:

1. - Просто ссылка на страничке
2. - активная ссылка. Т.е. если вы нажали на ссылку она становится активной, пока браузер не перекинет вас на указанную в этой ссылке страницу.
3. - посещенные ссылки - предположим на страничке есть 3 ссылки, на одну из них вы нажали, вас перекинуло по адресу... посмотрели эту новую страничку и вернулись обратно к тем трем ссылкам. Теперь, та ссылка которую вы уже нажимали становится "посещенной"

К чему это все?
В коде страничке можно прописать цвета ссылок. Отдельно для простой, активной и посещенной.
Для этого используется дополнительные параметры нашего тега <body>.
А точнее:

LINK - просто ссылка
ALINK - активная ссылка
VLINK - посещенная ссылка

Т.е. пишем примерно так -
ALINK="цвет"

Т.к. это все параметры тега <body>, прописывать надо именно в этом теге. Смотрим пример всей странички с прописанными цветами для ссылок:

<html>
<head>
<title>Моя первая страничка</title>
</head>

<body link="red" vlink="#000000" alink="#ffffff" >

Всем привет!!!
</body>
</html>

Остается только вставить саму нашу ссылку в тело документа:-))
Вот пример, как это будет выглядеть Страничка. Вид конечно неказистый, но пока так:-) Все еще узнаем, но позже:-)

Сразу оговорюсь, это не все "параметры" ссылки, которые можно задать, но для начала хватит:-)

Немного вернемся... Наверняка возникает вопрос,- что это за цвет такой в коде #000000?
Отвечаю:
Это, скажем так - цифровое обозначение цвета. Маленький совет, чтобы узнать обозначение того или иного цвета, можно испотльзовать наш любимый ЛиРу;-)
Идем в настройки, в настройки дизайна. И там у кого- нибудь пункта жмем "выбрать цвет", смотрим:
(206x49, 5Kb)

Подводим мышку к нужному цвету и смотрим его значение:
(251x197, 31Kb)

Либо в "линейке" подбираем цвет вручную двигая ползунки:
(278x148, 14Kb)

Только после всего этого, кнопочку "внести изменения" не нажимайте:-)) Чтоб дизайн свой не убить:-))

Пока все. Понимаю, что до интересного мы еще не дошли, а очень хочется:-) Но надо познавать все поэтапно:-)) Построить нормальный сайт без ссылок... нельзя:-(( Так что это знать тоже надо:-)

Все, всем удачи:-) Если возникнут вопросы, пишите либо СЮДА либо в личку:-))

Рубрики:

html для начинающих