Год
Общие сведения о HTML
Аббревиатура HTML знакома даже людям, которые по роду занятий далеки от web-разработки. Она получила известность хотя бы потому, что адреса многих web-страниц в Интернете заканчиваются расширением -.html. HTML (HyperText Markup Language) - дословно: Язык Разметки Гипертекста - создан для описания web-страниц. По сути, этот язык указывает браузеру каким образом отображать информацию, содержащуюся в загружаемом HTML-файле. Новая версия этого языка имеет название XHTML (расширенный язык разметки гипертекста) - она создана с целью сближения языков HTML и XML. HTML — это прежде всего система верстки, которая определяет, как и какие элементы должны располагаться на Web-странице. Вместе с тем, HTML имеет ряд ограничений. Стили частично решают эти проблемы.
Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. CSS представляет собой мощную систему, расширяющую возможности дизайна и верстки web-страниц. При этом стили не заменяют собой HTML, а дополняют его механизмы.
В состав языка HTML входят специальные теги (команды), которые предназначены для создания различных эффектов, применения форматирования (например, курсивное или полужирное начертание), и т. п. Язык HTML не различает большие и малые буквы, так что тэги <HEAD> и <head> эквивалентны. Большинство тэгов спарены: за открывающим тэгом следует соответствующий ему закрывающий тэг. Например: <b>...</b> (тег<b> - жирный шрифт).
Файл, содержащий HTML (XHTML) код, состоит из обычного текста и тегов разметки, которые указывают каким образом отображать сам текст, а также позволяют вставлять в web-страницу разные объекты (рисунки, ролики, элементы управления и т.д.). Для того, чтобы браузеры понимали, что файл содержит HTML-код (текст, размеченный тегами), этот файл должен иметь расширение.htm, или.html.
Если бы не было языка HTML, все использование Интернета свелось бы к безликим текстовым посланиям, не имеющим какого-то форматирования, яркого красочного оформления, мультимедиа, эргономики и дизайна. Однако самой главной функцией языка программирования HTML является возможность связывать web-страницы между собой с помощью гиперссылок. Эти гиперссылки могут находиться, например, на навигационных инструментах web-ресурсов, либо следовать прямо в тексте. Например, если навигационная панель сайта содержит ссылку Услуги, то при щелчке мышью на этой ссылке вы попадете на страницу с описанием услуг либо условий их предоставления. Также удобно использовать гиперссылки непосредственно в тексте. Например, на сайте содержится следующий текст:
Наша компания организована в 2000 году. Сегодня мы рады предложить нашим клиентам широкий ассортимент товаров и услуг, причем на выгодных условиях. Более подробно о сотрудничестве с нами вы можете узнать в нашем отделе сбыта.
В этом тексте жирным курсивом выделены места возможных гиперссылок. При щелчке мышью на ссылке товаров и услуг посетитель перейдет на страницу с описанием предлагаемых компанией соответственно товаров и услуг. По ссылке условиях посетитель перейдет на страницу с описанием условий приобретения товаров и услуг, а ссылка отделе сбыта предназначена для перехода на страницу с информацией об отделе сбыта компании и его контактными данными.
Структура HTML файла.
В первую очередь нам потребуется создать файл с расширением «htm» или «html» и открыть его для редактирования в текстовом редакторе
Файл начинается с тега <html> и заканчивается тегом </html>. Внутри тегов <html></html> обязательно создаются два раздела.
Первый раздел заголовка - начинается с тега <head> и заканчивается тегом </head>. Между этими тегами размещается техническая информация, сообщающая браузеру о настройках страницы, либо содержащая определенные данные. Первый раздел заголовка служит только для формирования общей структуры документа. Он заключает в себе гипертекст, который определяет собственно web-странцу. Это та часть документа, которую разрабатывает автор страницы и которая отображается браузером.
Для примера, можно поместить сюда контейнер, позволяющий поместить текст для отображения в заголовке окна браузера.
Второй раздел - собственно тело HTML-страницы, он начинается с тега <body> и заканчивается тегом </body> - между этими тегами размещается текст, который будет выводиться на экран, а также теги, управляющие разметкой этого текста. Внутри этого раздела размещаются элементы, предназначенные для дизайна Web- страницы. Внутри стартового тега элемента <body> Можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком.
Если сравнить исходные тексты различных web-страниц, то можно легко увидеть сходство их структур. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information progressing. Text and Office systems. Standard Generalized Markup Language (SGML)».
Заголовок файла - раздел <head></head>
Заголовок HTML файла находится внутри тегов <head></head>, расположенных перед тегом <body>. В заголовке находятся теги, сообщающие браузеру информацию о файле, о подключаемых модулях, а также данные о применяемых стилях и коды исполняемых программ. Разберем некоторые теги заголовка.
Тег <meta>. Этот тег служит для передачи служебной информации браузеру (о применяемой кодировке). Сообщать браузеру информацию о кодировке необходимо, чтобы текст на странице отображался правильно независимо от настроек браузера.
Тег <title>. Этот тег выводит название страницы в заголовок окна. Он важен как для оформления, так и для индексации станицы, поскольку поисковые машины используют содержащуюся в этом теге информацию.
Закрывающий тег для этого элемента обязателен. Пример: <title>HTML страничка</title>.
Тег <style>. Внутри пары <style></style> определяются стили, применяемые для оформления страницы. Стили по праву можно назвать краеугольным камнем web-дизайна, именно они отвечают за то, как будет выглядеть информация на станице, как и где будут располагаться элементы и как в целом будет вести себя станица. Для описания стилей используется специальный синтаксис, называемый CSS (каскадные таблицы стилей). В данный момент большинство браузеров используют CSS 2, в ближайшем будущем, вероятно, будет использоваться CSS 3, что значительно расширит возможности применения стилей.
Тег <script>. Пара <script></script> используется для размещения исполняемого кода на языке JavaScript или VBScript внутри HTML-страницы.
Тег <link>. Тег <link>используется без закрывающего тега и позволяет подключать к HTML-файлу внешние файлы. Этот тег удобен для подключения внешних CSS-таблиц, или программ наJavaScript или VBScript. Например, если в нескольких страницах применяются одинаковые стили - не имеет смысла в каждом файле создавать свою CSS-таблицу. Эту таблицу можно создать в отдельном файле, а из HTML-файлов подключать ее с помощью тега <link>. При этом изменения стиля в таком файле, автоматически будут влиять на отображение всех страниц, подключенных к нему, что делает управление сайтом более универсальным.
Помимо этого заголовок может содержать элементы <meta>...</meta>. Открывающий тег <meta> включает пары имя=значение, описывающие свойства документа, например, авторство, список ключевых слов и т.д. Эти данные используются также поисковыми серверами при индексации документов.
Отличительный признак HTML-документа
Одним из принципов языка является многоуровневое вложение элементов. HTML является самым внешним, так как между его стартовым и конечным тегами должна находиться вся Web-страница. В принципе, этот элемент можно рассматривать как формальность. Он имеет атрибуты4 version, lang и dir, которыми в данном случае мало кто пользуется и допускает вложение элементов HEAD, BODY и PLAINTEXT, определяющих общую структуру Web-страницы. Естественно, что конечным тегом заканчиваются все гипертекстовые документы.
Область заголовка Web-страницы. Иными словами, ее первая часть. Так же как и HTML, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir и допускается вложение элементов TITLE, ISINDEX, BASE, NAME, LINK, NEXTID.
Элемент для размещения заголовка Web-страницы. Строка текста, расположенная внутри, отображается не в документе, а в заголовке окна браузера. Эта особенность часто используется для организации поиска в WWW. Поэтому авторы, создающие Web-страницы, должны позаботиться о том, чтобы строка внутри TITLE, не будучи слишком длинной, достаточно отображала назначение документа.
Описание стиля некоторых элементов Web-страницы. В выше приведенном примере назначены шрифты для элементов Н2 и CODE. Естественно, что для каждого элемента существует стилевое оформление по умолчанию, поэтому употребление STYLE не обязательно.
Этот элемент содержит служебную информацию, которая не отображается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент NAME содержит два основных атрибута, первый из которых определяет тип данных, а второй - содержание. Далее приведены несколько примеров meta-данных.
Дата, обозначающая «срок годности»документа:
name=’’Expires’’ content=’’Дата’’
Адрес электронной почты:
name=’’Reply-to’’ content=’’Имя@Адрес’’
Указание приложения, в котором был создан Web-документ:
name=’’Generator’’ content=’’Название HTML-редактора’’
Атрибут name используется приложением-клиентом для получения дополнительной информации о Web-страницах и их упорядочения. Этот атрибут часто заменяют атрибутом http-equiv. Он используется сервером для создания дополнительных полей при выполнении запроса.
Кроме этого, элемент NAME может содержать URL. Шаблон соответствующего атрибута таков:
URL=’’https://адрес’’
Этот элемент заключает в себе гипертекст, который определяет собственно Web-страницу. Эта та часть документа, которую разрабатывает автор страницы и которая отображается браузером. Соответственно, конечный тег этого элемента надо искать в конце HTML-файла. Внутри BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри стартового тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком. Рассмотрим их по порядку.
Один из самых полезных для дизайна - атрибут, определяющий фон страницы. Его появление можно уподобить маленькой революции в WWW, так как одинаковые серые Web-страницы благодаря ему расцвели яркими цветными узорами:
background=’’Путь к файлу фона’’
Более простое оформление фона сводиться к заданию его цвета:
bgcolor=’’#RRGGBB’’
Цвет фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего цветов соответственно.
Оба вышеперечисленных атрибута не являются альтернативными и часто используются совместно.
Поскольку фон страницы может изменяться, необходимо иметь возможность подбирать соответствующий цвет текста. Для этого имеется следующий атрибут:
text=’’#RRGGBB’’
Для задания цвета гиперссылок используется атрибут:
link=’’RRGGBB’’
Также можно задать цвет для использованных гиперссылок:
vlink=’’RRGGBB’’
Гипертекст, расположенный внутри элемента BODY, может иметь произвольную структуру. Ее определяют в первую очередь назначение Web-страницы и фантазия разработчика.
HTML-документ может быть очень большим, и в этом случае пользователю должна быть предоставлена возможность быстро перемещаться к нужному разделу страницы. Для этого можно использовать механизм гиперссылок. Необходимо также в нужных местах текста расставить соответствующие метки.
Элемент для установки базового адреса (URL) для ссылок. Это позволяет опускать их начальную часть. Тогда при указании относительной ссылки можно задать не только имя файла, но и имена папок, в которых он находиться. Иными словами, путь к файлам может быть разбит на две части: абсолютную и относительную. Это полезно в том случае, когда для файлов указанных в документе, есть общий начальный фрагмент пути.
В выражении абсолютной ссылки можно также опустить указание на схему доступа (file://). В этом случае будут учитываться только левая часть абсолютной ссылки до первого левого символа <\>, то есть имя локального диска.
Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML вероятнее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, Вы сможете создавать документы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем.
HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными браузерами, и, возможно, станет основой почти всего имеющего отношение к Web программного обеспечения.
Источники:
А.А. Гладкий - «Веб-Самоделкин. Как самому создать сайт быстро и профессионально»
Эдуард Капчикаев
Шафран Э. - «Создание Web страниц
Матросов А. – «HTML 4.0.»
Гончаров А. - «HTML в примерах»
Комягин А.О. – «Современный самоучитель работы на персональном компьютере»