Гипертекстовый язык описывающий структуру документа вид которого на экране определяется браузером
Обновлено: 07.07.2024
HTML - гипертекстовый язык для заполнения информационных Web-серверов. Он описывает структуру документа, вид которого на экране определяется браузером.
Описание на HTML - это текст в формате ASCII и последовательность включенных в него команд (управляющих кодов, называемых также дескрипторами, или тегами). Эти команды расставляются в нужных местах текста, определяя шрифты, переносы, появление графических изображений, ссылки и т.п. В браузерах WWW вставка команд осуществляется нажатием соответствующих клавиш. Так, в Internet Assistant, входящем как дополнение в редактор MS Word, текст и команды набираются в едином процессе.
Собственно команды имеют форму <___>, где вместо ___ записывается имя команды.
Структура текста в WWW имеет вид:
В клиентской области окна при просмотре появится только текст, помещенный между командами <BODY> и </BODY>. Заголовок между командами <TITLE> и </TITLE> выполняет только служебные функции.
Команды форматирования текста (дескрипторы компоновки):
<P> - конец абзаца;
<BR> - перевод строки;
<HR> - перевод строки с печатью горизонтальной линии, разделяющей части текста;
<LISTING> Текст </LISTING> - для представления листингов программ;
<BLOCKQUOTE> Текст </BLOCKQUOTE> - для выделения цитат.
Команды форматирования заголовков (дескрипторы стиля):
<H1> Текст </H1> - текст печатается наиболее крупным шрифтом, используется для заголовков верхнего уровня;
<H2> Текст </H2> - для следующего уровня и т.д. вплоть до команды <H6>;
<PRE> Текст </PRE> - указанный текст представлен заданным при его записи шрифтом.
Команды форматирования символов представлены парными символами B, I, U; текст между открывающей и закрывающей командами будет выделен соответственно полужирно, курсивом, подчеркиванием.
Дескрипторы списка :
Команды форматирования списков <OL> и <UL> используются для выделения пунктов списков соответственно с нумерацией или с пометкой специальным символом (например, *); каждый пункт в списке должен начинаться с команды <LI>. В словарях и глоссариях удобно применять команды <DL> - начало списка, <DT> - перед каждым новым термином словаря и <DD> - перед текстом определения каждого термина.
Дескрипторы связи :
Команда вставки графики
ALIGN - параметр выравнивания, указывает место в окне для расположения рисунка; ALT - задает текст, который выводится на экран вместо рисунка в текстовых браузерах типа Lynx. Сами изображения должны быть в определенном формате (обычно это .jpg или .jpg).
Экран может быть разделен на несколько окон (областей, фреймов) с помощью парного тега <FRAMESET>. В каждом окне помещается содержимое файла (текст, изображение) указанием источника в теге <FRAME>, например
Команда гипертекстовой ссылки
Текст в окне будет выделен цветом или подчеркиванием. Можно ссылаться на определенное место в документе. Тогда
Сама метка в документе имеет вид
Ссылки на фрагменты данного документа можно упростить
Включение рисунка выполняется с помощью дескриптора
Расширение языка HTML - это XML (подмножество языка из стандарта SGML). Другое направление развития HTML - его динамическая версия DHTML.
>SGML (Standard Generalized Markup Language - стандартный обобщенный язык разметки) определяет содержимое и форму документов в виде последовательности объектов данных. Объектные данные могут храниться в различных файлах. Их включение в финальный документ происходит в форматах, задаваемых в специальном файле DTD (Document Type Definition). Шаблоны DTD упрощают хранение и поиск документов в базах данных.
XML (Extensible Markup Language) позволяет использовать в документах типы элементов, создаваемые для конкретных приложений, в нем также используются шаблоны DTD. Для обмена документами на XML между Web-узлами разработан протокол ICE (Information and Content Exchange).
Если Вы не нашли что искали, то рекомендую воспользоваться поиском по сайту:
Тело может содержаться в элементах BODY или FRAMESET . Пробельные символы (пробелы, символы новой строки , символы табуляции и комментарии) могут появляться до или после этого раздела.
Документ начинается с элемента типа документа, или doctype . Он описывает, какой тип HTML будет использован - чтобы клиентское приложение пользователя могло определить, как интерпретировать документ, и решить, следует ли он тем правилам, которым собирался следовать по своему заявлению.
После этого можно видеть открывающий тег элемента html . Это оболочка вокруг всего документа. Закрывающий тег html является последним объектом в любом документе HTML .
Внутри элемента html имеется элемент head . Он содержит информацию о документе ( метаданные ). Внутри head находится элемент title , который определяет заголовок "Simple page" в панели меню .
После элемента head следует элемент body , который является оболочкой, содержащей реальное содержимое страницы - в данном случае только элемент заголовка первого уровня ( h1 ), который содержит текст "Hello world!" .
Элементы часто содержат другие элементы. Тело документа всегда будет содержать множество вложенных друг в друга элементов.
Разделы страницы создают общую структуру документа, и могут содержать подразделы. Они также могут содержать заголовки , параграфы, списки и т.д. Параграфы могут содержать элементы, которые создают ссылки на другие элементы, цитаты, выделения и т.д.
Синтаксис элементов HTML
Базовый элемент в HTML состоит из двух тэгов вокруг блока текста. Существуют элементы, которые не являются оболочкой для текста, и почти в каждом случае элементы могут содержать подэлементы (как html содержит head и body в примере выше).
Элементы могут также иметь атрибуты, которые могут модифицировать поведение элемента и вводить дополнительное значение .
В этом примере элемент div (раздел страницы, способ разбиения документов на логические блоки) имеет добавленный атрибут id , для которого задано значение masthead . Элемент div содержит элемент h1 (заголовок первого, или самого важного уровня), который в свою очередь содержит некоторый текст. Часть этого текста упакована в элемент abbr (который используется для определения расширения сокращений), который имеет атрибут title , значение которого задано как Hypertext Markup Language .
Многие атрибуты в HTML являются общими для всех элементов, но некоторые являются специфическими для данного элемента или элементов. Все они имеют форму:
Значение должно быть помещено в одиночные или двойные кавычки (в некоторых ситуациях кавычки могут отсутствовать, но это не слишком хорошо с точки зрения предсказуемости, понимания).
Элемент внутри другого элемента называют "потомком" этого элемента. В примере выше abbr является потомком h1 , который в свою очередь является потомком div . И наоборот, div является "предком" элемента h1 .
Элементы блочного уровня и строковые элементы
Имеется две основные категории элементов в HTML , которые соответствуют типам контента и структуре, которую представляют эти элементы - элементы блочного уровня и строковые элементы.
Блочный уровень означает более высокий уровень элемента, обычно информирующий о структуре документа. Элементы блочного уровня можно представлять как элементы, которые начинаются с новой строки, отрываясь от того, что было перед этим. Распространенными блочными элементами являются параграфы, пункты списка, заголовки и таблицы.
Строковые элементы содержатся внутри структурных элементов блочного уровня и охватывают только части текста документа, а не целые области. Строковый элемент не приводит к появлению в документе новой строки, т.к. они являются элементами, которые появляются в параграфе текста. Распространенными строковыми элементами являются гипертекстовые ссылки, выделенные слова или фразы и краткие цитаты.
Заголовок
Заголовок HTML -документа является необязательным элементом разметки. Первоначально существование заголовка определялось необходимостью именования окна браузер. Это достигалось за счет элемента разметки TITLE :
Заголовок HTML -документа также предназначен для описания поискового образа документа, необходимого для индексирования документа роботами поисковых систем. Элемент META позволяет хранить списки ключевых слов и описания документа, которые будут использоваться для составления индекса поисковой системы и появляться в качестве описания документа в случае выдачи ссылки на него при поиске по ключевым словам.
Основные теги заголовка - это элементы HTML -разметки, которые наиболее часто встречаются в заголовке HTML -документа, т.е. внутри элемента разметки HEAD :
- TITLE (заглавие документа);
- BASE (база URL );
- ISINDEX (поисковый шаблон);
- META (метаинформация);
- LINK (общие ссылки);
- STYLE (описатели стилей);
- SCRIPT (сценарии).
Элемент разметки HEAD содержит заголовок HTML -документа. Данный элемент разметки не является обязательным. При наличии тега начала элемента разметки желательно использовать и тег конца элемента разметки . По умолчанию элемент HEAD закрывается, если встречается либо тег начала контейнера BODY , либо тег начала контейнера FRAMESET .
Контейнер заголовка служит для размещения информации, относящейся ко всему документу в целом.
Элемент разметки TITLE служит для именования документа в World Wide Web . При выборе текста для содержания контейнера TITLE следует учитывать, что отображается он системным шрифтом , так как является заголовком окна браузера.
Синтаксис контейнера TITLE в общем виде выглядит следующим образом:
Заголовок не является обязательным контейнером документа. Его можно опустить. Роботы многих поисковых систем используют содержание элемента TITLE для создания поискового образа документа. Слова из TITLE попадают в индекс поисковой системы. Из этих соображений элемент TITLE всегда рекомендуется использовать на страницах Веб-узла.
Элемент разметки BASE служит для определения базового URL для гипертекстовых ссылок документа, заданных в неполной (частичной) форме. Кроме того, BASE позволяет определить целевое окно загрузки документа по умолчанию при выборе гипертекстовой ссылки текущего документа. Наиболее часто BASE встречается на страницах узлов, которые имеют "зеркала". Часть документов основного сервера по разным причинам на "зеркальный" сервер не переносится. В этом случае документ с принудительно заданным базовым URL всегда будет ссылаться на основной сервер .
Тег начала контейнера содержит один обязательный атрибут HREF , и может содержать один необязательный атрибут TARGET . Синтаксис контейнера BASE в общем виде выглядит следующим образом:
Элемент разметки ISINDEX используется для указания поискового шаблона и унаследован от ранних версий HTML . В HTML 4.0 этот контейнер не определен.
Элемент разметки META
META содержит управляющую информацию, которую браузер использует для правильного отображения и обработки содержания тела документа , например с помощью атрибута Content-type можно задать перекодировку документа на стороне клиента.
С помощью META также можно задать и другие операторы . Например, запретить кэширование документа. Для запрета кэширования достаточно вставить в заголовок META - тег вида:
Можно запретить хранение документа после пересылки:
Точно так же можно задать время последней модификации ( Last-Modified ) или дату истечения актуальности документа ( Expire ).
META - тег часто используется для описания поискового образа документа.
Собственно, для описания документа используется два META -тега. Один определяет список ключевых слов, а второй - краткое содержание документа. Контейнер TITLE здесь также используется в качестве названия документа.
META - тег используют также программы подготовки документов., размещая в нем свой идентификатор . В общем случае контейнер META выглядит следующим образом:
Элемент разметки LINK
Элемент разметки LINK - это результат давно предпринятой попытки придать HTML академический вид. Согласно теории гипертекстовых систем, все гипертекстовые связи разделяют на два типа: контекстные и общие. Такое деление чисто условное и определяется тем, что контекстную связь можно привязать к определенному месту документа, а общую - отнести только ко всему документу целиком. Гипертекстовая связь задает отношение на множестве информационных узлов.
Контекстная связь определяет отношение на паре узлов. При этом в модели World Wide Web один из узлов является источником, а второй - целью ( target ). Собственно, это и отражено в названии элемента разметки A ( anchor ), который определяет гипертекстовую ссылку (не путать с гипертекстовой связью).
Общие ссылки нельзя привязать по контексту. Например, два информационных узла находятся в отношении следования, т.е. при "линейном" просмотре одна Веб-страница является следующей для другой Веб-страницы. В этом случае речь идет о страницах целиком, а не об отдельных их частях. Такой же общей связью является принадлежность к Веб-узлу, который ассоциируется со своей домашней страницей.
В настоящее время в браузерах не существует единого способа программирования или определения общих гипертекстовых связей.
Существенный сдвиг в этом направлении произошел после реализации поддержки описателей стилей в веб-браузерах. CSS ( Cascade STYLE Sheets , каскадные таблицы стилей) позволяют определять для различных типов гипертекстовых связей вид гипертекстовых ссылок. При этом можно определять различные типы контекстных ссылок. Контейнер LINK позволил загружать внешние описатели стилей:
В данном случае атрибут REL определяет тип гипертекстовой связи, HREF (Нуреrtехt REFerence) указывает адрес документа, идентифицирующего связь , а атрибут TYPE определяет тип содержания этого документа.
В общем случае контейнер LINK имеет следующий вид:
Для разных типов содержания действия по интерпретации элемента разметки будут различными.
Язык гипертекстовой разметки использовался ещё во времена создания первых рукописных книг. Иногда на полях делались сноски, например, «см. такую-то страницу», что и являлось собственно первыми, очень неудобными гипертекстовыми ссылками.
В 60-е годы ХХ века впервые в истории было употреблено понятие «гипертекст» учёным Т. Нильсоном. Его проект «Ксанаду» создавал электронные библиотеки, базы которых должны были храниться на спутнике и управляться с помощью радио и телефонной связи. Использование в работе гипертекстовых ссылок позволяло выполнение перехода с одного документа на другой.
На основе языка разметки документов SGML в начале 90-х г. Тимом Бернерсом-Ли был создан язык разметки гипертекста HTML. Однако он так и остался бы теорией, но М. Андриссен и группа студентов Иллинойского университета разработали первый браузер — Mosaic и запустили его бесплатное распространение. Во Всемирной паутине браузер демонстрировал гипертекстовые странички. С этого момента началось развитие веб-страниц и веб-серверов.
Благодаря своим достоинствам язык html стал использоваться повсеместно, что требовало создание стандартов для его использования, иначе в дальнейшем возникло бы разночтение. Консорциум W3C создал и принял первую спецификацию hypertext markup language. Со временем в язык вносились изменения и возникали следующие спецификации. Сейчас во всём мире принято использовать HTML5.
Что такое веб-документ
Язык html — специально стандартизированный, служащий для разметки документов в интернете.
В обычном понимании это просто текстовый файл. Он содержит в себе набор команд стандартной гипертекстовой разметки, назначение которых — указать браузерам, как правильно отображать содержимое. Примечательно, что для использования документа в интернете, текста собственно может и не быть, а вот структура должна присутствовать обязательно.
Гипертекстовые файлы имеют 2 расширения — .htm или. html, работать с ними можно в обычном блокноте Windows. Но гораздо удобнее использовать специально предназначенные инструменты. Веб-редакторы, которыми можно оформить содержание страницы, бывают:
- Визуальные (принцип WYSIWYG) — WebProject, WYSIWYG Web Builder и т. п.
- Не визуальные (только чистый код) — Notepad, Free HTML Editor и пр.
- Комбинированные — Adobe Dreamweaver, FrontPage, Word и др.
В каких редакторах лучше работать, зависит от личных предпочтений и навыков владения инструментами веб-дизайнера.
Базовые элементы и команды языка html называются тегами (tag). Они являются регистронезависимыми и всегда находится в угловых скобках.
Структура тега выглядит так: <Тег параметр 1 = «значение» параметр 2= «значение">. Параметры также называют атрибутами. Пример: <img src="https://nauka.club/informatika/foto.jpg%C2%BB%20alt="фото в статье">.
Теги делятся на 2 большие группы:
- Одиночные (например, <meta>, <link>).
- Контейнерные или парные.(<p></p>), состоят из открывающего и закрывающего тега и могут вкладываться друг в друга как матрёшка.
Формирование структуры
Любая страница, которую пользователи видят в браузере, имеет чёткую структуру — синтез html-элементов и текста.
Заголовок <head> и тело страницы <body> записываются в парный тег <html>, который сообщает браузеру, какое расширение ему нужно обработать. Согласно стандартам W3C, первым должен стоять тег <!DOCTYPE>. Он описывает тип документа — DTD и даёт браузеру команду как следует обрабатывать текущую страницу, так как не только есть разные версии HTML, но есть и другие технологии, например, XHTML, XML.
Полностью веб-документ будет иметь следующую структуру:
Заголовок и тело страницы
Задаётся контейнерным тегом <head>, его функция заключается в определение названия документа и предоставление служебной информации для браузеров. В его составе обязательно должен присутствовать <title>Название…</title>, этот тег определяет название страницы. Это единственный видимый элемент заголовка. Все остальные теги относятся к служебным и браузерами не отображаются:
- <base> — указывает адрес текущего документа, может изменить целевое окно для всех ссылок в теле документа (<base href http://www.mysite.ru/"">http://www.mysite.ru/" target="_blank">).
- <basefont> — задаёт размер, цвет, шрифт текста (<basefont face="Arial, Helvetica, sans-serif" size="4″ color="blac">).
- <link> — ссылка на внешние файлы стиля (css) (<link rel="stylesheet" href="style.css">).
- <style> — позволяет описывать стиль в заголовке (<style type="text/css"> h1</style>).
- <script> — описание скриптов или указание на сторонний файл, содержащий их (<script type="text/javascript" href http://mysite.ru/myscript.js"> )">http://mysite.ru/myscript.js"></script>).
- <meta> — теги для хранения информации.(<meta name="keywords" content="Ключевые, слова, через, запятую">).
Всё, что расположено в контейнерном теге <body>, отображается в браузере. Это основное содержание страницы — текст, картинки, заголовки. Для улучшения читаемости и визуального восприятия используются разные элементы разметки. Важно соблюдать принцип вложенности и не забывать закрывать парные теги.
Команды оформления содержания
По типу содержимого и характе́рному поведению в структуре документа элементы html делятся на строчные и блочные. При вёрстке они дополняют друг друга. В случае необходимости, с помощью css некоторым блочным элементам можно задать свойство блочно-строчных, присвоив display значение inline-block.
Элементы строки:
- <b>жирный шрифт</b>;
- <strong>логическое выделение написанного</strong>;
- <i>курсив физическая разметка</i>;
- <em>выделение текста курсивом, логическая разметка</em>;
- <big> увеличивает на одну единице текст</big>;
- <small>уменьшает текст на 1 единицу</small>;
- <sup>шрифт в верхнем индексе</sup>;
- <sub>шрифт в нижнем индексе</sub>;
- <a>определяет текстовые ссылки, имеет атрибуты: href=''ссылка'', name=''якорь''</a>;
- <img> для вставки изображений в формате jpeg, png, gif;
- <br> перенос строки.
Строчные элементы используются для форматирования текста. Могут включать в себя только другие строчные теги и данные. Свойство width не применяется, ширина регулируется объёмом содержимого и полей или отступов. Имеют возможность переноситься на другую строку.
Элементы блока:
- <blockquote>цитата</blockquote>;
- <div>блочный контейнер</div>;
- <h1>Заголовки разного уровня в тексте <h1> - <h6>Другой уровень</h6>;
- <p>абзац, новый параграф</p>;
- <pre>вставка предварительно форматированного текста</pre>;
- <hr> линия.
Блочные элементы могут формировать структуру документа, включать в себя другие подобные и строчные. Растягиваются по ширине, всегда начинаются с новой строки.
Таблицы и списки
Очень важно для веб-дизайнера уметь работать с таблицами. С их помощью гораздо легче представить структурированные данные, кроме того, сама вёрстка html-документа может быть табличной.
Таблицы в HTML создаются с помощью контейнерных тегов:
Управлять таблицей можно с помощью атрибутов: border — бордюр, alighn — выравнивание по ширине, valign — по высоте, cellpadding — отступ в ячейках, cellspacing — отступ между ячейками, width — ширина.
В интернет-страницах часто данные представляют в виде списков с помощью специальных тегов. Это не только улучшает восприятие содержимого, но и позволяет систематизировать информацию. Список представляет собой контейнер.
Его поведение в структуре веб-страницы аналогично блочным элементам. <li> - это всегда пункт списка.
Списки бывают трёх типов:
- маркированные <ul><li></li></ul>.;
- нумерованные <ol><li></li></ol>;
- список определения <dl><dt>Термин</dt><dd>определение</dd></dl>.
Файл стилей css
Язык HTML имеет различные способы для форматирования содержания, но все они имеют заметные недостатки. Придётся оформлять все элементы на каждой странице сайта. Если это 1−2 страницы, это терпимо, но если страниц сотни или даже тысячи применяют Cascading Style Sheets — css. Такие стили можно сформировать в отдельном файле, ссылка на который с помощью тега <link rel="stylesheet" href="file.css">, выносится в заголовок документа, между <head> и</head>.
Для успешного использования файла стилей нужно будет назначить элементам свойства класса или присвоить значение id. Например: <div >. Использование css:
В дальнейшем для работы с веб-документами необходимо будет изучить css, нелишними будут и уроки по javascript и php.
Мы даже успели рассмотреть веб формы и фреймы, но вот про сам язык гипертекстовой разметки не поговорили, не разобрались с валидатором 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 сервер целиком (услуга предоставления выделенного сервера), так и его малая часть (виртуальные хостинг или виртуальный выделенный сервер).
В результате этого диалога браузер получает Html код документа, разбирает его, подгружает все необходимые дополнительные элементы оформления страницы (изображения, ccs файлы, скрипты) и пользователь видит на экране страницу сайта.
Html тэги для начинающих и их список в валидаторе
Любой документ будет состоять из двух частей:
- То содержимое, которое мы хотим вывести в том или ином виде на web странице, т.е. то, что мы размечаем средствами языка гипертекстовой разметки
- Html тэги (само средство разметки). Их можно отличить от содержимого страницы по угловым скобкам, в которые они будут обязательно заключены (<тэг>). Иногда их еще называют дескрипторами, но чаще все же употребляется именно термин «теги».
Сами теги опять же можно разделить на два простых вида:
- Открывающий, после которого размещается то содержимое страницы, которое мы хотим отформатировать или структурировать с помощью него. Пример такого тэга может выглядеть так:
<body >. - Закрывающий, который выглядит так же как и открывающий, но сразу после первой угловой скобки в закрывающем тэге прописывается прямой слеш (</body >) перед его названием
Вот наглядный пример закрывающего и открывающего Html тега, который позволяет разметить заключенный в него текст, как заголовок третьего уровня:
Да, еще существуют так называемые одиночные или же, по-другому, пустые тэги, которые попросту не имеют закрывающего элемента и таким образом в них нельзя что-либо заключить для разметки, но зато с помощью них можно будет что-либо вывести на страницу (например, изображение).
В языке разметки ХТМЛ имеется четко ограниченный и заранее составленный набор тегов, которые подробнейшим образом описаны на соответствующей стандарту странице валидатора 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.
Комментарии и отзывы (11)
Раньше думал, что html язык мне никогда не нужен будет. Есть ведь разные программки — написал то, что тебе нужно в обычном формате, скопировал и вставил куда нужно.
Теперь то я понимаю, что не все так как оно кажется. И начал маленькими шажками изучать основы html.
Будешь знать основы, и тогда будешь понимать основное.
Ждем-с продолжения, Дмитрий 🙂
Спасибо, Дмитрий. Вы наделены даром излагать доступно, подробно и последовательно.
Про HTML читала неоднократно. Самым большим откровением для меня сегодня стала русская расшифровка аббревиатуры — язык гипертекстовой разметки. Спасибо ещё раз.
Много раз пытался освоить HTML, но так и не довёл своё намерение до конца. Понимаю ведь, что начало начал и всё такое, а осилить не получается никак. То времени нет, то ещё чего.
Когда только начинала создавать блог и столкнулась с html кодами, они казались страшно непонятными. Но потихоньку вроде каша в голове начинает проясняться.
да ))) у вас дар учителя , Дмитрий ))
С каждой посещенной страницей на этом сайте, понимаю и этот сайт поселится у меня в закладках довольно на долго. Спасибо Дмитрий за Ваши труды!
Дмитрий, Ваш блог — просто находка для начинающих веб-мастеров! Добавила его в закладки. Раньше не знала, какую же версию языка нужно применять при создании сайтов — 4 или 5. Прочитала эту статью и все встало на свои места. Спасибо! А за ссылку на список валидных тегов и разъяснения к нему отдельное спасибо!
Очень понятно и ясненько.
Дмитрий, печально, но пришла сейчас с открытой Вами темы на справочном форуме Гугла. Буду следить за темой.
Занялась, наконец-то, изучением HTML. Мне подсказали, что у Вас можно скачать учебник (чтобы всегда под рукой), а что-то вижу только статьи. Не подскажете?
Читайте также: