HTML — что это такое, зачем нужно знать язык гипертекстовой разметки, HTML теги в валидаторе W3C
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Иногда в публикуемых материалах мне приходится возвращаться к началу, и сейчас я хочу рассмотреть первые шаги в Html.
Ранее мною уже были написаны несколько обзорных статей, рассказывающих про таблицы, а еще про то, как можно вставлять в документ картинки.
Мы даже успели рассмотреть веб формы и фреймы, но вот про сам язык гипертекстовой разметки не поговорили, не разобрались с валидатором W3C, да и, собственно, не дали определение, что такое Html, что означает эта аббревиатура, когда появилась первая версия языка, какая версия актуальна сейчас и что нас ждет в будущем (ХТМЛ 5).
Также сегодня попробуем разобраться с тем, что такое тэги, чем отличаются блочные от строчных, изучим стандартную структуру веб документа (рассмотрим назначение директивы DOCTYPE, а еще основных элементов body и head), ну и если успеем, то коснемся вопроса форматирования кода, узнаем как интерпретируются в языке гипертекстовой разметки пробел, табуляция и перенос строки, для чего может понадобиться неразрывный пробел, как оформляются комментарии в коде и ...
Что такое Html и W3C — история языка
Итак, что же такое ХТМЛ? Аббревиатура эта расшифровывается как HyperText Markup Language и означает язык гипертекстовой разметки (читайте про гипертекст — что это такое). Создал его всем известный основоположник «всемирной паутины WWW» Тим Бернерс-Ли (на основе уже имеющегося к тому времени языка SGML), который и сейчас продолжает участвовать в работе над новыми стандартами интернета в рамках консорциума W3c (его еще часто называют валидатор W3C (validator), но о нем мы поговорим чуть позже).
Собственно говоря, первая версия языка 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, а еще сегодняшнего лидера Гугол Хром и др.). В этот период разработчики браузеров зачастую бежали впереди паровоза (валидатора) и вводили свои собственные стандарты, ибо работа над форматом Html в W3C шла довольно медленно.
Узрев такое дело, консорциум в течении одного 1997 года сделал огромный скачок — язык разметки претерпел сразу два изменения, перейдя от версии 3.2 до версии 4.0, а затем (в 1999) и до той версии, которую мы используем по сей день — Html 4.01. С тех пор, представляете, стандарт не менялся уже около двенадцати лет (всех все устраивало, и разработчиков браузеров и команду валидатора W3C).
Сейчас консорциум с подачи конгломерата разработчиков браузеров ведет активные работы над форматом, но ждать его появления в ближайшем будущем, наверное, не стоит. Хотя некоторые нововведения формата ХТМЛ 5 уже поддерживаются некоторыми браузерами в той или иной степени. Скорее всего, именно так и будет происходить дальше — новый формат будет внедряться по частям, но полной его поддержки всеми браузерами придется ждать довольно долго.
Итак, с помощью ХТМЛ мы создаем web страницы (документы). Множество web страниц, относящихся к одному и тому же доменному имени, называются сайтом. Понятно, что web страницы, входящие в состав сайта, должны где-то физически размещаться и быть доступными любым пользователям в течении 24 часов.
Для этих целей предназначены web сервера, которые, как правило, размещены в специально оборудованных для этого помещениях, и представляют из себя обычные компьютеры, заточенные и оптимизированные под выполнение данной задачи. Web сервера имеют постоянный и широкополосный доступ в интернет для того, чтобы пользователи из любой точки земного шара и в любом количестве могли получить доступ к вашему сайту.
Услуги по предоставлению места для размещения сайтов предлагают так называемые хостеры и, естественно, делают они это за деньги, хотя в природе встречаются и приятные исключения в виде free hosting с поддержкой php и mysql. В зависимости от посещаемости вашего сайта, вам может понадобиться как весь web сервер целиком (услуга предоставления выделенного сервера), так и его малая часть (виртуальные хостинг или виртуальный выделенный сервер).
Любая страница (документ) вашего сайта будет иметь свой собственный уникальный адрес или, другими словами, URL (Uniform Resource Locator). Для того, чтобы пользователь увидел содержимое этой страницы у себя на экране компьютера, его браузер должен будет завязать диалог с сервером путем посылки http запросов и получения http ответов.
В результате этого диалога браузер получает Html код документа, разбирает его, подгружает все необходимые дополнительные элементы оформления страницы (изображения, ccs файлы, скрипты) и пользователь видит на экране страницу сайта.
Что такое Html теги и где посмотреть их список
Любой документ будет состоять из двух частей:
- То содержимое, которое мы хотим вывести в том или ином виде на web странице, т.е. то, что мы размечаем средствами языка гипертекстовой разметки
- Html тэги (само средство разметки). Их можно отличить от содержимого страницы по угловым скобкам, в которые они будут обязательно заключены (<тэг>). Иногда их еще называют дескрипторами, но чаще все же употребляется именно термин «теги».
Править или писать Html теги лучше всего будет в специализированном редакторе, таком, например, как Notepad++ с подсветкой синтаксиса.
Сами теги опять же можно разделить на два простых вида:
- Открывающий, после которого размещается то содержимое страницы, которое мы хотим отформатировать или структурировать с помощью него. Пример такого тэга может выглядеть так:
<body >. - Закрывающий, который выглядит так же как и открывающий, но сразу после первой угловой скобки в закрывающем тэге прописывается прямой слеш (</body >) перед его названием
Вот наглядный пример закрывающего и открывающего Html тега, который позволяет разметить заключенный в него текст, как заголовок третьего уровня:
<h3> Заголовок статьи </h3>
Да, еще существуют так называемые одиночные или же, по-другому, пустые тэги, которые попросту не имеют закрывающего элемента и таким образом в них нельзя что-либо заключить для разметки, но зато с помощью них можно будет что-либо вывести на страницу (например, изображение).
В языке разметки ХТМЛ имеется четко ограниченный и заранее составленный набор тегов, которые подробнейшим образом описаны на соответствующей стандарту странице валидатора W3C. Само собой разумеется, что лучше всего будет пользоваться именно этим списком разрешенных элементов, ибо это первоисточник и не допускает двойственных толкований.
Для этого на странице валидатора W3C со списком стандартов ХТМЛ, которые относятся к различным спецификациям, вам нужно будет перейти по ссылке «HTML 4.01 Specification».
На открывшейся странице нужно перейти на вкладку «elements» из верхнего меню, после чего вы сможете, наконец-то, лицезреть список Html тегов валидных на данный момент по версии спецификации 4.01, разработанной аж в далеком 1999 году (в прошлом веке).
В столбце «Description» списка вы найдете краткое описание интересующего вас тэга, а прочитать подробнейшее описание сможете, щелкнув по его названию. В колонке «Start Tag» (начальный элемент) напротив некоторых из них можете наблюдать проставленную букву «O», означающую, что данный открывающий тег можно использовать опционально, т.е. можно его использовать, а можно и не использовать.
Таких элементов в списке всего четыре, и три из них задают общую структуру всего документа (<html>, <body> и <head> — о них мы отдельно поговорим чуть ниже). В столбце списка под названием «End Tag» (закрывающий элемент) вы тоже можете встретить пометку «O» (опционально).
Что это означает? Дело в том, что стандарт гипертекстовой разметки 4.01 делает нам послабление и (зачем-то) разрешает не писать помеченные буквой «O» закрывающие или открывающие элементы. За нас это сможет сделать браузер, разбирая полученный от сервера Html код.
Т.е. касаемо структуры документа, о которой мы поговорим чуть ниже, браузер сам сможет создать необходимые ему разделы <html>, <body> и <head>, даже если вы забудете это сделать. Кроме этого, вы можете ставить, например, только открывающий тэг параграфа (абзаца) <p>, а закрывающий </p> можно игнорировать, т.к. в любом случае за вас его проставит браузер при разборе кода разметки.
Да, еще одним послаблением валидатора W3C в спецификации 4.01 является то, что тэги можете писать в любом удобном вам регистре (хоть большими буквами, хоть маленькими, а хоть и вперемешку). Т.е. язык ХТМЛ является регистронезависимым.
Это, конечно же, очень здорово, что нам так много позволено, но дело в том, что в следующей версии Html 5, похоже от всех этих двусмысленностей попытаются отказаться. В результате чего придется писать все открывающие и закрывающие элементы, а также сам язык будет регистрозависимым. Поэтому, наверное, имеет смысл уже сейчас не начинать привыкать к этим вольностям и закрывать все тэги, а еще писать их названия в нижнем регистре.
Если вы еще раз посмотрите на список в спецификации W3C 4.01 повнимательнее, то увидите еще, что есть элементы, у которых в столбце «End Tag» (закрывающий) стоит буква «F» (запрещено), а в столбце списка под названием «Empty» (пустой) стоит буква «E» (пустой).
Это как раз и будут упомянутые чуть выше пустые или же одиночные тэги, для которых закрывающий элемент просто-напросто запрещен. Примером одиночного тэга может служить IMG (вставка изображения) или же <hr> (разделительная линия).
На странице валидатора, где приведен список тегов стандарта 4.01, имеется еще один столбец с названием «Depr», где буквами «D» помечены не рекомендованные к использованию элементы. Если посмотрите в списке что это за теги, которые не рекомендуются к применению, то увидите, что они в основном отвечают за оформление содержимого документа (например, FONT или <center>).
Дело в том, что сейчас для визуального оформления Html документов принято использовать CSS (таблицы каскадных стилей), которые имеют гораздо больше возможностей, нежели не рекомендованные к использованию в W3C элементы. Хотя такое к ним отношение в validator вовсе не означает, что про них вы можете забыть.
Эти не рекомендованные тэги можете встретить в ХТМЛ документах интернета, а кроме этого, в случаях, когда нельзя использовать оформление через CSS (все та же почтовая рассылка Subscribe), то эти самые не рекомендованные элементы могут вам очень сильно помочь и пригодиться.
Базовая структура веб страницы (тэги html, body, head)
Язык гипертекстовой разметки предусматривает наличие корневого тэга, внутри которого будет заключен весь текст ХТМЛ документа. Им является <html>. Вообще, описывать структуру веб документа лучше всего, имея перед глазами наглядную схему:
Внутри корневого элемента предусмотрено наличие двух обязательных разделов, формируемых тэгами <head> и <body>:
- Все, что будет отображаться на создаваемой web странице, должно быть размещено внутри открывающего и закрывающего <body>
- Внутри <head> размещается служебная информация, которая может понадобиться браузеру для правильной интерпретации кода документа. Эта служебная информация внутри <head> не будет видна на web странице.
Ну вот, задал слишком большой план в начале статьи, а успел рассказать только о половине из задуманного. Довольно часто у меня так случается. Например, когда писал статью о блочной верстке, то планировал уложиться в одну статью, а в результате получилось четыре. Даже можно сказать, что пять, ибо статья о современной верстке сайтов является их логическим продолжением. Ну что ж, остается только сказать, что продолжим в следующей статье уроков Html.
Зачем вебмастеру знание HTML, CSS и PHP
Либо вы не найдете такого пункта в админке CMS среди множества других настроек (логика авторов движков при размещении некоторых пунктов настройки остается непонятной и, возможно, здесь играет определенную роль сила привычки самого автора), либо разработчики вообще не включат такой пункт в админку системы управления контента. Невозможно реализовать настройки для всего через админку — туда, обычно, выводят только самые необходимые и часто используемые настройки.
Зачастую бывает проще решить проблему не штатными, предусмотренными в админке движка средствами, а напрямую, правя что-то в базе данных или же корректируя содержимое определенных файлов движка через доступ к ним по ФТП.
Да, для этого потребуется потратить время на изучение хотя бы основ языка разметки HTML, понять каким образом влияют каскадные таблицы стилей на внешний вид вебстраниц, а так же разобраться с устройством базы данных, научиться вносить в нее изменения. И, пожалуй, самое сложное — это понять базовые принципы написания кода на языке PHP для того, что бы понимать, что и где можно безболезненно поменять, а что трогать не стоит.
Начну я, конечно, с оформления вебстраниц (собственно, на данный момент я уже это дело закончил и вы можете ознакомиться с результами тут и тут). Как я уже упоминал в одном из предыдущих постов, до недавнего времени все ресурсы состояли из страничек в формате HTML. Причем, там задавалось и наполнение вебсайта (тексты, изображения, таблицы) и его оформление (цвета, фон, отступы).
В современном понимании правильности верстания, наполнение должно осуществляться с помощью тегов языка гипертекстовой разметки, а оформление этого наполнения должно проходить за счет внешних файлов таблиц стилей. Такое разделение позволяет разгрузить страничку вебсайта от лишнего служебного кода.
Дело в том, что поисковые системы очень пристально смотрят на соотношение информационной составляющей кода вебстраницы (текст отображаемый в браузере) и его служебной составляющей (теги, разнообразные скрипты и т.п.). Поэтому, вынося за пределы данной страницы все, что не несет информационной составляющей, а отвечает только за оформление страниц, мы улучшаем отношение поисковиков к нашему проекту (ну, хотя бы в теории).
Плюс к этому список CSS правил, вынесенный в отдельный файл, позволяет унифицировать оформление ресурса. При необходимости всегда можно будет поменять что-то в дизайне не правя код всех вебстраниц, т.к. в этом случае достаточно будет поправить уже существующие или дописать новые стилевые свойства в общей для всех страниц таблице стилей.
C появлением таблиц стилей многие теги языка гипертекстовой разметки и их атрибуты стали считаться устаревшими и не рекомендованными для использования. Вместо них советуют использовать свойства CSS, выполняющие те же действия. Это отнюдь не означает, что HTML теперь уже изучать не надо, просто уменьшилось количество тегов и их атрибутов, которые надо знать и уметь использовать для создании и поддержания в должном состоянии сайта. Я постараюсь рассказать про те теги, которые я сам постоянно использую.
В каком редакторе лучше править или вносить изменения в код
Ничего сложного в этом нет, ведь по сути это даже не язык программирования, а гипертекстовая разметка, нечто похожее на синтаксис в русском языке. Что хотелось бы сразу посоветовать, опираясь на собственный опыт? Пробуйте писать теги самостоятельно в блокноте, типа Notepad++ (читайте мой обзор этого редактора), а не в программах, типа Дримвьювер. Почему?
Да потому, что в этом случае вы набьете руку и запомните написание тегов и атрибутов. Да, в программах типа Дримвьювера удобнее верстать, т.к. вы тут же сможете его посмотреть в браузере, а варианты написания того или иного тега можно выбрать из выпадающего списка.
Но дело в том, что вам в основном придется править уже существующий код в файлах вашего движка и гораздо удобнее будет, если вы будете помнить написание всех тегов и их атрибутов наизусть (благо их не так много). Зачем для исправления одного тэга открывать файл в громоздком Дримвьевере, когда для этих целей вполне достаточно обычного блокнота, ну, или его продвинутого аналога под название Нотепад плюс плюс (ссылка приведена чуть выше).
Хотя, это мое личное мнение (ИМХО) и вам решать, что удобнее. Например, Евгений Попов, по курсам которого я изучал все это дело, судя по всему, приверженец Дримвьевера. Важно в принципе одно – чтобы вы правили код в том редакторе, который способен сохранять все внесенные изменения и который может, при желании, вернуть все как было (взад).
В этом случае, как бы вы не напортачили, все будет поправимо. И, конечно же, очень удобна подсветка синтаксиса языка, на котором вы пишете или редактируете код. Notepad++ — это безусловно мой выбор! О его возможностях я рассказал в приведенной чуть выше статье.
Наверное, рассказывать про разметку и ее оформление по очереди будет не совсем правильно, поэтому попробую говорить об их совместном использовании. Следует понимать, что CSS свойства записываются в один или несколько отдельных файлов, которые довольно легко вы сможете найти в теме оформления используемой для вашего движка.
В то время, как теги вебстраниц в современной CMS не записаны в каком-то одном или нескольких файлах, как было раньше, а генерируется (интерпретируется) из PHP. И именно уже сгенерированный таким образом Html код подсовывается браузеру для того, чтобы он в свою очередь интерпретировал его в удобоваримую для нас форму интернет-странички. Хитро, не правда ли?
Поэтому правка тегов в любой CMS не является такой уж тривиальной задачей, даже если вы полностью освоились с языком гипертекстовой разметки. Ведь тэги вам придется править в PHP файлах и, следовательно, нужно будет знать хотя бы его базовые понятия и синтаксис.
Но не волнуйтесь, для того чтобы править дизайн больших познаний в PHP от вас не потребуется. Тэги там лежат, как бы сказать, на поверхности и не составляет большого труда их идентифицировать и поправить при необходимость.
Комментарии и отзывы (11)
Раньше думал, что html язык мне никогда не нужен будет. Есть ведь разные программки — написал то, что тебе нужно в обычном формате, скопировал и вставил куда нужно.
Теперь то я понимаю, что не все так как оно кажется. И начал маленькими шажками изучать основы html.
Будешь знать основы, и тогда будешь понимать основное.
Ждем-с продолжения, Дмитрий 🙂
Спасибо, Дмитрий. Вы наделены даром излагать доступно, подробно и последовательно.
Про HTML читала неоднократно. Самым большим откровением для меня сегодня стала русская расшифровка аббревиатуры — язык гипертекстовой разметки. Спасибо ещё раз.
Много раз пытался освоить HTML, но так и не довёл своё намерение до конца. Понимаю ведь, что начало начал и всё такое, а осилить не получается никак. То времени нет, то ещё чего...
Когда только начинала создавать блог и столкнулась с html кодами, они казались страшно непонятными. Но потихоньку вроде каша в голове начинает проясняться.
да ))) у вас дар учителя , Дмитрий ))
С каждой посещенной страницей на этом сайте, понимаю и этот сайт поселится у меня в закладках довольно на долго. Спасибо Дмитрий за Ваши труды!
Дмитрий, Ваш блог — просто находка для начинающих веб-мастеров! Добавила его в закладки. Раньше не знала, какую же версию языка нужно применять при создании сайтов — 4 или 5. Прочитала эту статью и все встало на свои места. Спасибо! А за ссылку на список валидных тегов и разъяснения к нему отдельное спасибо!
Очень понятно и ясненько.
Дмитрий, печально, но пришла сейчас с открытой Вами темы на справочном форуме Гугла. Буду следить за темой.
Занялась, наконец-то, изучением HTML. Мне подсказали, что у Вас можно скачать учебник (чтобы всегда под рукой), а что-то вижу только статьи. Не подскажете?
Рубрика Чайник для чайников.
Бредятины и чуши куча
Вася: вы где-то ошибку заметили или неумело троллите?
Ваш комментарий или отзыв