День 2. HTML - он как вселенная.
Смотрите, до какой аналогии я сегодня в метро додумался.
Как известно практически все в нашей вселенной состоит из ограниченного числа химических элементов. Эти самые элементы вступая друг с другом во взаимодействие и порождают все многообразие веществ - от воды до никотинамидадениндинуклеотидфосфатгидрина, и даже не вздумайте спросить, что это такое. При этом одни и те же элементы в разных условиях выглядят абсолютно по разному. Например H20 при одной температуре - пар, а при другой - лед. То есть температура здесь выступает в качестве атрибута, изменяющего состояние вещества. Более того, когда элементы и внешние условия собираются строго определенным образом, то возникает (барабанная дробь) ЖИЗНЬ!
Аналогия с HTML проглядывается сама собой: есть набор элементов, которые, работая в команде, дают нам документ. А если элементы будут "правильные" и в "правильных пропорциях", да еще снабжены соответсвующими атрибутами, то браузер сможет такой документ прочитать и дать нам красивую, удобную страницу. То есть снова возникает жизнь!!!(Не совсем я придумал каким образом в эту модель Метрополитена - Хандоженко вписать теги, ну тут уж не обессудьте, а лучше помогите мне и подумайте над этим.)
Так давайте же разберемся какие элементы необходимо передать браузеру, чтобы возникла жизнь.
Объявление типа документа.
В объявлении типа документа содержатся служебные сведения о данном документе, то есть такие сведения, которые необходимы браузеру для корректной обработки кода. Простецкие документы, типа приведенных ниже прекрасно работают и без объявления типа, однако W3C(World Wide Web Consortium - это какая то нереально крутая организация, которая задает стандарты написания Web - документов) настоятельно рекомендует всегда включать объявление в документ, а поскольку мы с вами ребята серьезные, то давайте-ка не халтурить и прописывать его в начале документа.
Объявление может иметь три вида:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> Это набор переходных правил, которым будет следовать браузер, если мы используем элементы, которые не являются основными для текщей версии языка. Так как сказать, правила для времен революции, когда вводятся новые версии языка HTML. Сейчас, кстати, такое время, мы(ну как мы...) переходим на HTML 5. - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"
"http://www.w3.org/TR/html4/strict.dtd"> Это набор строгих правил, которые требуют соответствия всем нормам версии языка. -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"> Это набор правил для документов с фреймами(типа страничек внутри других страничек, точнее пока не понял).
Чаще всего, думается, будет использоваться первый набор правил, как окажется на деле будет видно.
Элемент HTML
Элемент HTML - самый крутой. Серьезно, он неимоверно крут. Настолько крут, что при том, что его вообще можно не использовать, его все равно надо использовать. Все, что мы хотели бы написать в документе, все элементы, всё содержимое нужно помещать внутрь элемента html.Вот некоторые атрибуты для элемента html:
title - добавляет всплывающую подсказку,
lang - определяет язык документа,
dir - задает направление чтения на языке документа(он поддерживается не всеми версиями не всех браузеров, лично у меня не получилось его использовать)
И вот тут наступает исторический момент, друзья. Пришло время создать первую страничку. Еееееееее)))))))
Правда, тут стоит сделать одно отступление. Знающий человек, читающий наш блог, дал дельный совет: для написания кодов страниц использовать не стандартный блокнот и даже не средства браузера, а вот такую вещь. Преимущества этого, уверен, будут мной оценены позже, а пока я лишь делюсь с вами полезностями.
Итак, переходим к первому в жизни коду.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru" dir="LTR" title="Привет">
</html>
Если вы не сделаете ошибок в переносе кода, сохраните файл с расширением .html и откроете его браузером, то получите вот такой результат:
 |
| Результат кода |
Элемент HEAD
Элемент head не крутой. Он рабочая лошадка, он нужен чтобы помагать браузеру в обработке страницы, вы даже не увидите ничего введенного в него, кроме элемента title, на странице документа.Пасхальное яйцо.Внутри элемента head, могут быть использованы элементы для заголовка окна, для определения стилей таблицы, для определения служебной информации.На сегодняшний день мной сполна освоен элемент title, для добавления заголовка окна который, так что давайте на его действие и позырим.
<!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>
<title>Кайфовый заголовок</title>
<!--первый в жизни комментарий, элемент, который не отбражается на странице, но позволяет пояснять код-->
</head>
</html>
Делаем те же минипуляции с этим кодом, что и выше и получаем:
На сегодня в общем то, думаю, хватит.
Ытожим.
Главный итог - я кошмарно медленный WEB - изучатель - рассказыватель. Вновь удалось рассказать лишь кроху материала, однако, я сегодня сделал для себя осознанный выбор. Я решил сделать ставку на доступность, понятность и искренность. Правильно ли это покажет время, а пока я правдами и неправдами разобрался с элементами html и head, написал пару амебных кодов, о чем с огромным удовольствием поделился с вами)Завтра, друзья, я подробнее разберу другие элементы внутри head, а также затронем, как мне сказали, крайне важный тег <body>.
Все, друзья, до скорых новых встреч)))
P.S. Все ваши отзывы и предложения оставляйте в комментариях, давайте улучшать самих себя вместе)
На самом деле количество типов элементов в html не конечно. Бразуер вполне может воспринять что то специфичное, будь то это атрибут или элемент.
ОтветитьУдалитьСогласен, у меня были такие подозрения изначально, они подтвердились в последствии. Просто те, которые я описал, я понял для чего и как они сработают)
ОтветитьУдалитьПасхального яйца хватило как раз ровно на столько, чтобы выполнить практическую часть ;)
ОтветитьУдалитьУдачное яйцо попалось)
ОтветитьУдалить