Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. Иногда в публикуемых материалах мне приходится возвращаться к началу и сейчас я хочу рассмотреть первые шаги в Html. Ранее мною уже были написаны несколько обзорных статей, рассказывающих про html теги таблицы, а так же про то, как можно вставлять в документ изображения с помощью html тега img.

Мы даже успели рассмотреть html формы и фреймы, но вот про сам язык гипертекстовой разметки мы не поговорили, не разобрались с валидатором W3C, да и, собственно, не дали определение что такое Html, что означает эта аббревиатура, когда появилась первая версия языка, какая версия актуальна сейчас и что нас ждет в будущем (Html 5).

Так же сегодня мы попробуем разобраться с тем, что такое Html тэги, чем отличаются блочные тэги от строчных, изучим стандартную структуру Html документа (рассмотрим назначение тэгов DOCTYPE, body, head), ну и, если успеем, то коснемся вопроса форматирования кода, узнаем как интерпретируются в языке гипертекстовой разметки пробел, табуляция и перенос строки, для чего может понадобиться неразрывный пробел, как оформляются комментарии в коде и ...

Что такое Html, история появления и развития языка гипертекстовой разметки, validator W3C

Итак, что же такое Html? Аббревиатура Html (HyperText Markup Language) как раз и означает язык гипертекстовой разметки. Создал его всем известный основоположник «всемирной паутины WWW» Тим Бернерс-Ли (на основе уже имеющегося к тому времени языка SGML), который и сейчас продолжает участвовать в работе над новыми стандартами языка гипертекстовой разметки в рамках консорциума W3c, который еще часто называют валидатор W3C (validator), но о нем мы поговорим чуть позже.

Собственно говоря, первая версия языка Html появилась в начале девяностых годов прошлого века (жутковато звучит — прошлого века, однако, это именно так) и была ориентирована в первую очередь на передачу информации в научной среде, но, однако, с этого момента можно начинать отчет популярности всемирной паутины.

До этого интернет был уделом немногих знающих и интересующихся людей, но с появлением языка Html и первых браузеров, способных интерпретировать его незамысловатый код в понятные и удобные пользователю вещи (веб страницу или как еще часто говорят — веб документ), всемирная паутина начала свое победоносное шествие. Наверное, появление языка гипертекстовой разметки можно приравнять к переходу от текстовых к графическим операционным системам.

Довольно интересными на мой взгляд представляются темп и нюансы развития этого языка гипертекстовой разметки. Итак, через несколько лет после появления первой версии Html по инициативе Тима Бернерса-Ли был создан консорциум W3C (World Wide Web Consortium — консорциум всемирной паутины), который призван был стать законодателем стандартов языка гипертекстовой разметки и не допустить разброда и шатаний в рядах разработчиков, которые могли привести к очень неприятным последствиям.

В 1994 году разрабатываются стандарты языка гипертекстовой разметки второй версии, а уже в 1995 ведутся работы над Html 3 с поддержкой CSS (таблиц каскадных стилей). Примерно в это же время появляется и набирает популярность первый браузер Мозаика, который очень быстро был переделан в Netscape Navigator. MicroSoft хотела купить Netscape Navigator для интеграции его в Windows, но разработчики этого браузера отказались (в итоге появился Mozilla Firefox), в результате чего мы получили и имеем по сей день собственное творение MicroSoft (IE — Internet Explorer), которое они создали на базе открытых кодов Мозаики.

Что интересно, IE (в силу своей предустановленности в самой популярной операционной системе) сумел таки выжать с рынка браузеров некогда очень популярный Netscape Navigator, но получил взамен ряд новых игроков (Opera, Mozilla, Google Chrome и др.). В этот период разработчики браузеров зачастую бежали впереди паровоза (валидатора W3c) и вводили свои собственные стандарты, ибо работа над форматом Html в W3C шла довольно медленно.

Узрев такое дело, валидатор W3C в течении одного 1997 года сделал огромный скачок — язык гипертекстовой разметки претерпел сразу два изменения, перейдя от версии 3.2 до версии 4.0, а затем (в 1999) и до той версии, которую мы используем по сей день — Html 4.01. С тех пор, представляете, стандарт не менялся уже около двенадцати лет (всех все устраивало, и разработчиков браузеров и команду валидатора W3C).

Сейчас валидатор W3C с подачи конгломерата разработчиков браузеров ведет активные работы над форматом Html 5, но ждать его появления в ближайшем будущем, наверное, не стоит. Хотя, некоторые нововведения формата Html 5 уже поддерживаются некоторыми браузерами в той или иной степени. Скорее всего, именно так и будет происходить дальше — Html 5 будет внедряться по частям, но полной его поддержки всеми браузерами придется ждать довольно долго.

Итак, с помощью языка гипертекстовой разметки мы создаем web страницы (web документы). Множество web страниц, относящихся к одному и тому же доменному имени, называются web сайтом, ну, или просто сайтом. Понятно, что web страницы, входящие в состав сайта, должны где-то физически размещаться и быть доступными любым пользователям в течении 24 часов.

Для этих целей предназначены web сервера, которые, как правило, размещены в специально оборудованных для этого помещениях, и представляют из себя обычные компьютеры, заточенные и оптимизированные под выполнение данной задачи. Web сервера имеют постоянный и широкополосный доступ в интернет для того, чтобы пользователи из любой точки земного шара и в любом количестве могли получить доступ к вашему сайту.

Услуги по предоставлению места для размещения сайтов предлагают так называемые хостеры и, естественно, делают они это за деньги, хотя в природе встречаются и приятные исключения в виде бесплатного хостинга с php. В зависимости от посещаемости вашего сайта вам может понадобиться как весь web сервер целиком (услуга предоставления выделенного сервера), так и его малая часть (виртуальные хостинг или виртуальный выделенный сервер).

Любая web страница (веб документ) вашего сайта, будет иметь свой собственный уникальный web адрес или другими словами URL (Uniform Resource Locator). Для того, чтобы пользователь увидел содержимое этой web страницы у себя на экране компьютера, его браузер должен будет завязать диалог с web сервером путем посылки http запросов и получения http ответов (в одной из ближайших статей я собираюсь поговорить об этом подробнее).

В результате этого диалога браузер получает Html код web документа, разбирает этот код, подгружает все необходимые дополнительные элементы оформления web страницы (изображения, ccs файлы, скрипты) и пользователь видит на экране страницу сайта.

Html тэги для начинающих, список Html тегов в валидаторе W3C

Любой Html документ будет состоять из двух частей:

1. То содержимое, которое мы хотим вывести в том или ином виде на web странице, т.е. то, что мы размечаем средствами языка гипертекстовой разметки
2. Html тэги (само средство разметки). Тэги можно отличить от содержимого web страницы по угловым скобкам, в которые они будут обязательно заключены (<тэг>). Иногда Html тэги еще называют дескрипторами, но чаще все же употребляется именно термин тэги.

Править или писать Html теги лучше всего будет в специализированном редакторе, таком, например, как Notepad++ с подсветкой синтаксиса. Сами Html тэги опять же можно разделить на два простых вида:

1. Открывающий Html тэг, после которого размещается то содержимое web страницы, которое мы хотим отформатировать или структурировать с помощью этого тега. Пример такого тэга может выглядеть так:
   <body >.
2. Закрывающий Html тэг — он выглядит так же как и открывающий, но сразу после первой угловой скобки в закрывающем тэге прописывается прямой слеш (</body >) перед именем этого самого Html тэга

Вот наглядный пример закрывающего и открывающего Html тэга, который позволяет разметить заключенный в него текст, как заголовок третьего уровня:

<h3> Язык гипертекстовой разметки </h3>

Да, еще существуют так называемые одиночные или же по другому пустые Html тэги, которые попросту не имеют закрывающего тэга и таким образом в них нельзя что-либо заключить для разметки, но зато с помощью них можно будет что-либо вывести на web страницу (например, изображение).

В языке гипертекстовой разметки имеется четко ограниченный и заранее составленный набор тэгов, которые подробнейшим образом описаны на соответствующей стандарту странице валидатора W3C. Само собой разумеется, что лучше всего будет пользоваться именно этим списком разрешенных Html тэгов на странице валидатора W3C, ибо это первоисточник и не допускает двойственных толкований.

Для этого на странице валидатора W3C со списком стандартов языка гипертекстовой разметки, которые относятся к различным спецификациям, вам нужно будет перейти по ссылке «HTML 4.01 Specification». На открывшейся странице W3C вам нужно будет перейти на вкладку «elements» из верхнего меню, после чего вы сможете, наконец то, лицезреть список Html тегов валидных на данный момент по версии спецификации 4.01, разработанной аж в далеком 1999 году (в прошлом веке).

В столбце «Description» списка Html тегов вы найдете краткое описание интересующего вас Html тэга, а прочитать подробнейшее описание вы сможете, щелкнув по названию этого тэга. В колонке «Start Tag» (начальный тэг) напротив некоторых Html тегов в списке вы можете наблюдать проставленную букву «O», означающую, что данный открывающий тег можно использовать опционально, т.е. можно его использовать, а можно и не использовать.

Таких тегов в списке всего четыре и три из них задают общую структуру всего Html документа (<html>, <body> и <head> — о них мы отдельно поговорим чуть ниже). В столбце списка под названием «End Tag» (закрывающий тэг) вы тоже может встретить пометку «O» (опционально). Что это означает? Дело в том, что стандарт языка гипертекстовой разметки 4.01 делает нам послабление и (зачем то) разрешает не писать помеченные буквой «O» закрывающие или открывающие теги. За нас это сможет сделать браузер, разбирая полученный от web сервера Html код.

Т.е. касаемо структуры Html документа, о которой мы поговорим чуть ниже, браузер сам сможет создать необходимые ему разделы документа <html>, <body> и <head>, даже если вы забудете это сделать. Кроме этого, вы можете ставить, например, только открывающий тэг параграфа (абзаца) <p>, а закрывающий тэг </p> можно игнорировать, т.к. в любом случае за вас его проставит браузер при разборе кода языка гипертекстовой разметки.

Да, еще одним послаблением валидатора W3C в спецификации 4.01 является то, что Html тэги вы можете писать в любом удобном вам регистре (хоть большими буквами, хоть маленькими, а хоть и вперемешку). Т.е. язык Html является регистронезависимым.

Это, конечно же, очень здорово, что нам так много позволено, но дело в том, что в следующей версии Html 5, похоже от всех этих двусмысленностей попытаются отказаться. В результате чего придется писать все открывающие и закрывающие теги, а так же сам язык Html 5 будет регистрозависимым. Поэтому, наверное, имеет смысл уже сейчас не начинать привыкать к этим вольностям, и закрывать все Html тэги, а так же писать названия тэгов в нижнем регистре.

Если вы посмотрите на список Html тегов спецификации W3C 4.01 повнимательнее, то увидите еще, что есть тэги у которых в столбце «End Tag» (закрывающий тег) стоит буква «F» (запрещено), а в столбце списка под названием «Empty» (пустой) стоит буква «E» (пустой). Это как раз и будут упомянутые чуть выше пустые или же одиночные Html тэги, для которых закрывающий тэг просто-напросто запрещен. Примером одиночного тэга может служить тег <img> (вставка изображения) или же тег <hr> (разделительная линия).

На странице валидатора W3C, где приведен список Html тегов стандарта 4.01 имеется еще один столбец с названием «Depr», где буквами «D» помечены не рекомендованные к использованию Html теги. Если посмотрите в списке что это за теги, которые не рекомендуются к применению валидатором W3C, то увидите, что они в основном отвечают за оформление содержимого документа (например, <font> или <center>).

Дело в том, что сейчас для визуального оформления Html документов принято использовать CSS (таблицы каскадных стилей), которые имеют гораздо больше возможностей, нежели не рекомендованные к использованию валидатором W3C Html тэги. Хотя, такое к ним отношение в validator W3C вовсе не означает, что про эти теги вы можете забыть.

Эти не рекомендованные в списке валидатора W3C теги вы может встретить в Html документах интернета, а кроме этого, в случаях, когда нельзя использовать оформление через CSS (все та же почтовая рассылка Subscribe), то эти самые не рекомендованные в validator Html теги могут вам очень сильно помочь и пригодиться.

Список Html тегов в W3C хорош, но тем кто не очень дружит с английским может пригодиться мой (откуда-то скопированный) список тегов с описанием на русском и основными атрибутами приведенных тэгов. Дорабатывать его я не пытался, поэтому...

Первые шаги: структура Html документа (тэги html, body, head)

Язык гипертекстовой разметки предусматривает наличие корневого тэга, внутри которого будет заключен весь текст Html документа. Таким тэгом является <html>. Вообще, описывать структуру Html документа лучше всего, имея перед глазами наглядную схему,:

Внутри коневого тэга в языке гипертекстовой разметки предусмотрено наличие двух обязательных разделов, формируемых тэгами <head> и <body>:

• Все, что будет отображаться на создаваемой web странице, должно быть размещено внутри открывающего и закрывающего тега <body>
• Внутри Html тэга <head> размещается служебная информация, которая может понадобиться браузеру для правильной интерпретации кода web документа. Эта служебная информация внутри тэга <head> не будет видна на web странице.

Ну вот, задал слишком большой план в начале статьи, а успел рассказать только о половине из задуманного. Довольно часто у меня так случается, например, когда писал статью о html теге div и блочной верстке, то планировал уложиться в одну статью, а в результате получилось четыре. Ну что ж, остается только сказать, что продолжим в следующей статье уроков Html.

Можете также посмотреть видео «Что такое HTML»:

У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.

Можете посмотреть бесплатные видеоуроки по Html и CSS, а так же можете ознакомиться с другими статьями:

• Учебник Html
  • Что такое язык Html, валидатор W3C и Html тэги
  • Doctype и комментарии в html
  • Спецсимволы (мнемоники) в Html, символ неразрывного пробела
  • Коды цвета в Html и CSS коде (RGB палитра)
  • Как в Html код вставить картинку и html ссылку
  • Img и обтекание картинки текстом
  • Гиперссылки (a, target blank, href, якоря)
  • Html список (UL, OL, DL и LI)
  • Html таблица (Tr, Th, Td, Table)
  • Html формы - теги Form и Input
• Справочник CSS для начинающих
  • CSS - что это такое
  • CSS селекторы
  • Font (Weight, Family, Size, Style)
  • Background в CSS (color, position, image, repeat, attachment)
  • Padding, margin и border
  • Height, width и overflow
  • Float и clear в CSS
  • Position (absolute, relative и fixed)
• Блочная Div верстка сайта в Html и CSS

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Очень обяжете, если воспользуетесь этим блоком кнопок:

Рубрика : Html для чайников

Наверх