День 3. Голова и тело
Британцы в этом плане молодцы, во всяком случае Тим Бернерс-Ли точно молодец. Называют они вещи безо всякой выдумки, что потом существенно облегчает понимание того, что они придумали. Так получилось и с основными тегами HTML <head> и <body>. Простота, как говорится, простецкая.Голова у человека наверху и в ней вся нужная информация хранится, при этом совсем не обязательно, чтобы информация эта становилась предметом общественного достояния. На туловище же, которое прям под головой, мы цепляем всякую одежду, татуировки и т.д. Всю эту одежду видят окружающие, ведь отчасти за тем мы ее и надеваем.
В HTML все то же самое. Есть <head>,он над <body> , о котором мы говорили вчера и в который нужно помещать элементы, несущие информацию о том, как обработать страницу и работы с поисковыми системами(это новая информация, запомните ее!!!).Чуть ниже мы поговорим еще об этом элементе.
И есть <body>, он под <head>, в который мы вносим все то, что хотим видеть на странице и задаем в каком виде мы хотим это видеть.
Таким образом возникает вот такая конструкция:(спасибо одному кайфовейшему читателю за картинку)
Элемент head. Продолжение
Здесь, друзья, по крайней мере у меня возникают первые сложности по причине незнания терминов, чтобы узнать которые нужно знать другие термины... Поэтому я решил поподробнее описать элемент style, применяемый внутри head и просто перечислить остальные элементы с комментариями по предположительному их назначению.Итак, элемент style задает стили, используемые на странице. То есть внутри него прописывается то, каким образом браузер должен форматировать элементы, к которым применяется стиль, заданный в элементе style. Style поддерживает следующие атрибуты: знакомые нам lang и title, а также новые type для указания языка стилей(что это разберем позже), media указывает на каком устройстве предпологается чтение документа. Для задания стилей в нынешней версии HTML используется язык CSS(позже, друзья, позже, не торопите дядю).
Давайте рассмотрим конкретный пример, пояснения к коду расположены сразу под итогом работы.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru" dir="LTR" title="Привет">
<head>
<meta http-equiv="content-type" content="text/html"; charset=windows-1251"/>
<title>365.WEB-программирование</title>
<style type="text/css">
p.style {
color:#3366FF;
background:#FF9900;
word-spacing:20px;
}
</style>
</head>
<body>
<p class="style">
365.WEB-программирование
</p>
</body>
</html>
Итог работы:
В этом коде достаточно много новых элементов, давайте рассмотрим их по порядку:
<meta http-equiv="content-type" content="text/html"; charset=windows-1251"/> это элемент meta, предназначенный для хранения дополнительной информации о странице и его атрибуты:
http-equiv - служит для обмена служебной информацией с браузером, ему присвоено значение
content-type , что говорит о том, что мы определяем тип содержимого в документе, дальнейшее же указание
content="text/html" говорит о том, что в качестве содержимого будет текстовын данные.
Строка
charset=windows-1251" обеспечивает правильное восприятие кириллической кодировки в рамках ОС Windows(пока не вижу необходимости приводить значения атрибута для остальных кодировок кириллицы).
Далее идет собственно блок составления стиля, который мы хотели бы использовать<style type="text/css">
p.style {
color:#3366FF;
background:#FF9900;
word-spacing:20px;
}
Здесь атрибут type элемента style используется для того, чтобы сказать какого рода данные будут привлекаться для создания стиля. Незамысловатая конструкция p.style говорит о том, что стиль под названием style(название может быть любым другим, но кажется в рамках латиницы) будет применен к абзацу. Конкретные параметры стиля указаны в скобках и они задают цвет букв, цвет фона и расстояние между словами, соответственно.
Здесь пару слов нужно сказать о цвете. Умные люди в свое время установили, что какие попало цвета не надо использовать в сайтах и создали таблицу "безопасных" цветов. Вот вам ссылка, где вы можете посмотреть цвета и коды для них.
Кам бэк ту зэ код, плиз. На этом, как вы видите, элемент <head> заканчивается и мы переходим к телу. В "теле" у нас есть знакомый абзац, к которому мы атрибутом class применяем стиль style. Ну и по завершении блока "тела" завершается и весь код.
При том, что в коде достаточное количество незнакомых нам элементов, думается, что разъеснен он достаточно подробно, так что в понимании его работы не должно возникнуть вопросов.
Чего не скажешь собственно об этих элементах. Как говорилось выше, в "голове" у нас по большей части служебная информация, а потому лично у меня возникли проблемы с пониманием того, что там да как. Вот вам небольшой список того, что там и зачем, а вот осмысление придет несколько позже:
- SCRIPT - позволяет добавлять сценарии(не до конца ясно, что понимается под сценариями)
- LINK - задает ссылку на таблицы стилей(Аналог STYLE получается, что ли?)
- BASE - задает базовый адрес документа(вероятно я просто чего то пока не знаю, для того чтобы понять назначение его)
- OBJECT - определяет методы обработки нестандартного содержимого(вот это ваще мое любимое, ибо че такое нестандартное содержимое я так и не отыскал)
Если есть у кого то сведения о данной теме, расскажите, не ленитесь, пожалуйста, вы поможете десяткам (выпендрился) других людей.
Ближе к телу
Так получилось, что основное предназначение элемента <body> было разъеснено чуть выше, так что здесь давайте посмотрим на его атрибуты и пойдем спать. Или есть. Или ещёчёнить.alink - устанавливает цвет активной ссылки.
vlink - устанавливает цвет посещенных ссылок.
link - устанавливает цвет непосещенных ссылок на веб-странице
background - задает фоновый рисунок на веб-странице.
bgcolor - цвет фона веб-страницы.
bgproperties - определяет, прокручивать фон совместно с текстом или нет.
text - цвет текста в документе.
Это, разумеется не все, но самое понятное и прикольное)
Полный список приведен где-нибудь.
Я настолько обнаглел, что оставляю вам домашнее задание.
Попробуйте поэкспериментировать с оформлением текста на странице. Помните, что нам уже известны элемент абзаца, мы рассмотрели задание стилей в head, теперь еще получили инструмент управления в <body>. Этого вполне должно хватить, чтобы оформить, скажем, стихотворение.Итог.
Детки, мы с вами познакомились с главным скелетом документа HTML, теперь нам предстоит наращивать на этот скелет мясо. Завтра я постараюсь несколько раскрасить наши страницы и может быть даже...Спокойной ночи мне, дорогие ребята.
Лёш, забыл написать о том, что рекомендуется всё набирать самостоятельно, а не ctrl+c, ctrl+v...
ОтветитьУдалитьЗато ты не забыла)))
ОтветитьУдалитьSCRIPT - это исполняемый код, например на javascript. Предназначается для выполнения на стороне клиента, то есть непосредственно html страницей.
ОтветитьУдалитьLINK - подключение внешних файлов. Это может быть тот же исполняемый код или стили элементов. И да, стили можно прописывать (а точнее даже нужно) во внешних файлах, что бы их можно было использовать на нескольких страницах одновременно.
BASE - позиционирование относительно доменного имени. Все ссылающиеся с данной страницы файлы, не имеющие полного пути, будут релеватироваться относительно него. Например, если у этой страницы путь http://iamin365days.blogspot.com/2012/ , то для файла /08/3.html будет предпринята попытка поиска по абсолютному пути http://iamin365days.blogspot.com/2012/08/3.html .
OBJECT - похоже перепутан с элементом < object >, потому что краткое объяснение вполне совпадает с его свойствами. Нестандартное содержимое - это то, что браузер не воспринимает в чистом виде, например файлы .swf (Shockwave Flash Object).