• 1. HTML-документы – это структурные документы.
  • 2. Названия элементов можно писать в любом регистре.
  • 3. Названия атрибутов можно писать в любом регистре.
  • 4. Значения атрибутов зависят от регистра, особенно адреса (особенность Unix-операционных систем состоит в различной трактовке символов в разных регистрах, поэтому файлы

picture .gif и picture.GIF различны!).

  • 5. Названия элементов не могут содержать пробелов.
  • 6. Если значения атрибутов содержат пробелы, они должны стоять в кавычках.
  • 7. Дополнительные пробелы, символы табуляции и возврата каретки игнорируются и сжимаются в один пробел.
  • 8. Элементы могут быть вложены друг в друга. При этом должно соблюдаться правило вложенности. Внутри вложенного элемента помимо открывающего тега должен быть и закрывающий. Пересечения некорректны:
Структура документа HTML

9. Незнакомые элементы и атрибуты игнорируются браузерами ("снисхождение к ошибкам").

Большинство документов имеют стандартные элементы, такие как заголовок, параграфы или списки. Используя теги HTML, можно обозначать данные элементы, обеспечивая веб-браузеры минимальной информацией для отображения данных элементов, сохраняя в целом общую структуру и информационную полноту документов. Все, что необходимо чтобы прочитать HTML-документ, – это веб-браузер, который интерпретирует теги HTML и воспроизводит на экране документ в виде, который ему придает автор.

Когда веб-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тег, который встречается в документе, должен быть тегом . Данный тег сообщает веб-браузеру, что документ написан с использованием HTML.

Комментарии в HTML. Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются браузером. Часто в комментарии "прячут" некоторые теги или целые синтаксические конструкции от старых версий браузеров, которые не способны их обработать. Комментарии могут встречаться в документе где угодно и в любом количестве. Необходимо помнить, что комментарии увеличивают объем документа, а следовательно, и время загрузки.

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

Заголовок документа. Большинство веб-браузеров отображают содержимое тега в заголовке окна, содержащего документ, и в файле закладок, если он поддерживается веб-бра- узером. Заголовок, ограниченный тегами и , размещается внутри тегов . Заголовок документа не появляется при отображении самого документа в окне.

Теги тела документа. Теги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.

Тело документа. Тело документа должно находиться между тегами и . Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Уровни заголовков . Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий – 2, и так до цифры 6. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Для большинства случаев текст такого заголовка станет жирным, и после текста будет отбита пустая строка. Важным является то, что эти теги определяют логическую структуру документа, участвуют в индексации поисковыми системами Интернет. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером.

Тег абзаца . В отличие от большинства текстовых процессоров, в HTML-документе игнорируются символы возврата каретки. Браузер разделяет абзацы только при наличии тега . Если не разделить абзацы тегом , то документ будет выглядеть как один большой абзац.

Тег предформатированного текста . Тег Позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тегом . Внутри предварительно сформатированного текста разрешается использовать: перевод строки, символы табуляции (сдвиг на восемь символов вправо), непропорциональный шрифт Courier, устанавливаемый браузером.

Теги списков. Существует три основных вида списков в HTML-документе: нумерованный, маркированный, список описаний.

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

Нумерованные списки. В пронумерованном списке браузер автоматически вставляет номера элементов по порядку. Это означает, что если удалить один или несколько элементов пронумерованного списка, то остальные номера автоматически будут пересчитаны.

и завершается тегом

  • .

    Маркированные списки. Для маркированных списков браузер обычно использует маркеры для элемента списка. Вид маркера, как правило, настраивает пользователь браузера.

    Пронумерованный список начинается стартовым тегом

      и завершается тегом
    . Каждый элемент списка начинается с тега .

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

    Графика внутри HTML-документа. Одна из наиболее привлекательных черт WEB – возможность включения графических и иных типов данных в HTML-документ.

    Существует два способа использования графики в HTML-документах. Первый – внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Делается это при помощи тега . Этот тег точечный, т.е. он не закрывается. Синтаксис тега:

    Обязательный параметр имеет такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру, где находится

    рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день это форматы GIF, JPG, PNG. Они поддерживаются большинством браузеров.

    АLТ="текст"

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

    Большинство браузеров позволяет включать в документ фоновый рисунок, который будет дублироваться как кафельная плитка в ванной и отображаться фоном всего документа. Это второй способ. Некоторые пользователи любят фоновую графику, некоторые нет. Обычно хорошо выглядит в качестве фона для большинства документов ненавязчивый полупрозрачный рисунок (обои).

    Гипертекстовые ссылки являются ключевым компонентом, обусловливающим привлекательность WEB для пользователей. Добавляя гипертекстовые ссылки (далее – ссылки), пользователь делает набор документов связанным и структурированным, что позволяет получать необходимую ему информацию максимально быстро и удобно.

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

    Структура ссылок в HTML-документе. Для того чтобы браузер отобразил ссылку на URL, необходимо поместить текст или картинку внутрь тега гиперссылки. Синтаксис HTML следующий:

    текст-или-картинка-которые-будут-п одсвечены-как-ссылка

    Тег открывает описание ссылки, а тег – закрывает его. Любой текст, находящийся между данными двумя тегами, подсвечивается специальным образом веб-браузером. Обычно этот текст отображается подчеркнутым и выделенным цветом. Изображение обрамляется прямоугольной рамкой. Текст, обозначающий URL, не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте).

    Ссылки на метки внутри документа. Можно делать ссылки на различные участки или разделы одного и того же документа, используя специальные скрытые метки для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя прокрутку экрана. Как только пользователь щелкнет на ссылке, браузер переместит его на указанный раздел документа, а строка, в которой стоит метка данного раздела, будет размещена на первой строке окна браузера (если хватит "длины" документа в окне браузера).

    Что такое HTML

    Всемирная паутина World Wide Web (WWW) соткана из Web-страниц, которые создаются с помощью так называемого языка разметки гипертекста HTML (HyperText Markup Language). Хотя многие говорят о программировании на этом языке, HTML вовсе не является языком программирования в традиционном понимании. HTML - язык разметки документа. При разработке HTML-документа выполняется разметка текстового документа точно так же, как это делает редактор при помощи красного карандаша. Эти пометки служат для указания формы представления информации, содержащейся в документе.

    Специальные программы просмотра HTML-документов, которые часто называют браузерами, служат для интерпретации файлов, размеченных по правилам языка HTML, форматирования их в виде Web-страниц и отображении их содержимого на экране компьютера пользователя. Существует большое количество программ-браузеров, разработанных различными компаниями, однако, на сегодняшний день из всего разнообразия программ явно выделяются две программы-лидера - Netscape Communicator и Microsoft Internet Explorer.

    Программа Netscape Navigator разработана компанией Netscape Communications Corporation. Как и у многих программных продуктов, существует ряд версий этой программы. Последней версией программы Netscape Communicator на момент написания книги являлась версия 4.7. Программа Internet Explorer разработана компанией Microsoft. Последняя версия этой программы - 5.0.

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

    встречались сообщения о войне между браузерами за пользователей. Сейчас эти два браузера сравнимы по популярности. Росту популярности браузера Microsoft способствует включение браузера в состав операционной системы Windows 98, однако, в конечном счете, выбор браузера остается за пользователем.

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

    Чтобы понять, что собой представляет язык разметки, вспомним старые добрые времена, когда многие работали с текстовыми редакторами типа WordStar. В них для выделения какой-либо фразы, например, полужирным шрифтом, в ее начале и в конце ставились специальные отметки (/B и /b ):

    /B Этот текст будет выведен полужирным шрифтом/b

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

    HTML работает точно так же. Если есть необходимость выделить текст на экране полужирным шрифтом, то это можно сделать аналогично:

    Этот текст будет выведен полужирным шрифтом

    Символы включают полужирное начертание, а символы выключают его. Такие символы, которые управляют отображением текста и при этом сами не отображаются на экране, в языке HTML принято называть тэгами (от английского слова tag - ярлык, признак).

    Все теги языка HTML выделяются символами-ограничителями (< и >), между которыми записывается идентификатор (имя) тега (в нашем примере это в), и, возможно, его параметры. Единственным исключением из этого правила являются теги комментария с более сложными ограничителями (). Названия тэгов, а также их параметров можно записывать на любом регистре. Для единообразия в данной книге большинство тегов записывается прописными буквами.

    Большинство тегов HTML используется попарно, т. е. для определенного тэга, назовем его открывающим, в документе имеется соответствующий закрывающий тэг. По правилам HTML закрывающий тег записывается так же, как и открывающий, но с символом / (прямой слэш) перед именем тэга. Единственным принципиальным различием парных тегов является то, что закрывающие теги не используют параметры.

    Тэги, которые нуждаются в соответствующих завершающих тэгах, будем называть тэгами-контейнерами. Все, что записано между соответствующим открывающим и закрывающим тэгом, будем называть содержимым тэга-контейнера. Иногда завершающий тег можно опускать. Например, для тэга, описывающего данные для ячейки таблицы , соответствующий закрывающий тег можно всегда опускать. Окончание данных для ячейки таблицы будет распознано по появлению очередного тега или тега окончания строки таблицы .

    Есть ряд тэгов, для которых завершающие теги опускаются большинством авторов документов. Примером может служить тег элемента списка

  • или тег абзаца

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

    Ряд тегов в принципе не нуждается в завершающих тэгах. Примерами могут служить тег вставки изображений , принудительного перевода строки
    , указания базового шрифта и др. Часто из самого предназначения тега можно догадаться, нуждается ли он в завершающем.

    Существуют общие правила интерпретации тегов браузерами. В отличие от языков программирования, в которых ошибочные операторы приводят к выдаче соответствующих сообщений на этапе компиляции программы и требуют правки, в HTML не принято реагировать на неверную запись тэгов. Неверно записанный тег или его параметр должен просто игнорироваться браузером. Это общее правило для всех браузеров, под действие которого подпадают не только ошибочно записанные тэги, но и тэги, не распознаваемые данной версией браузера. Примером могут служить тэги, предложенные и реализованные для отдельного браузера и неизвестные для другого. Например, тэг-контейнер , который служит для предоставления альтернативной информации браузерам, не обеспечивающим поддержку фреймовых структур, такими браузерами не будет распознан. Браузер же, поддерживающий фреймы, встретив тег , пропустит всю заключенную в нем информацию. А браузер, не знакомый с фреймами, естественно, не поймет и тег . Однако, согласно приведенному правилу, этот тег будет просто пропущен, зато вся последующая информация будет отображена.

    Тэги могут записываться с параметрами или атрибутами (от англ., attribute). В этой книге будем чаще всего использовать термин параметр. Наборы допустимых параметров индивидуальны для каждого тэга. Общие правила записи параметров заключаются в следующем. После имени тега могут следовать параметры, которые отделяются друг от друга пробелами. Порядок следования параметров тега произволен. Многие параметры требуют указания их значений, однако некоторые параметры не имеют значений или могут записываться без них, принимая значения по умолчанию. Если параметр требует значения, то оно указывается после названия параметра через знак равенства. Значение параметра может записываться в кавычках, так и без них. Единственным случаем, в котором без кавычек не обойтись, является случай, когда в значении параметра имеются пробелы. В значениях параметров (в отличие от названий тегов и самих параметров) иногда важен регистр записи. Приведем пример записи тега с параметрами:

    Здесь для тега

    задано два параметра. Первый параметр BORDER указан без значения. Второй параметр ALIGN имеет значение left.

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

    Все тэги, которые допустимо использовать в разделе документа HTML, могут иметь параметры CLASS, ID, LANG, LANGUAGE, STYLE и TITLE. Использование этих параметров полезно, прежде всего, при стилевом оформлении документов, речь о котором пойдет во второй части книги.

    Параметры CLASS, ID, STYLE поддерживаются Internet Explorer, начиная с версии 3.0, и Netscape, начиная с версии 4.0. Эти параметры нужны при использовании стилей.

    Параметры LANG, LANGUAGE, TITLE - поддерживаются только Internet Explorer, начиная с версии 4.0. Эти параметры указывают, соответственно, используемый язык (например, для России: LANG=ru), язык записи скриптов (например, LANGUAGE=JavaScript), а также текст подсказки, выдаваемой при наведении указателя мыши на данный элемент (TITLE).

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

    Завершая общий обзор HTML, отметим, что простейшие HTML-документы представляют собой обычные текстовые файлы, для просмотра и редактирования которых можно воспользоваться любым текстовым редактором. Эти файлы обычно имеют расширение НТМ или HTML.

    Спецификации HTML

    Язык HTML приобрел популярность в середине 90-х годов, благодаря экспоненциальному росту сети Интернет. К этому времени назрела необходимость стандартизации языка, поскольку различные компании, разрабатывавшие программное обеспечение для доступа в Интернет, предлагали свои

    варианты инструкций HTML, число которых все возрастало и возрастало. Настала пора прийти к какому-то единому соглашению в части применения тегов языка HTML.

    Работу по созданию спецификации HTML взяла на себя организация, называемая World Wide Web Consortium (сокращенно - W3C). В ее задачу входило составление спецификации, отражающей современный уровень развития возможностей языка с учетом разнообразных предложений компаний-разработчиков браузеров. Так, в ноябре 1995 г. появилась спецификация HTML 2.0, призванная формализовать сложившуюся к концу 1994 г. практику использования HTML.

    Схема утверждения спецификаций состоит в следующем. Консорциум W3C выпускает проект спецификации, после обсуждения которого выпускается так называемый черновой, рабочий (draft) вариант спецификации и предлагает его к обсуждению на определенный период. После периода обсуждения рабочий вариант спецификации может стать рекомендацией, т. е. официально признанным вариантом спецификации HTML.

    Вскоре после спецификации 2.0 была выпущена рабочая версия спецификации 3.0, срок окончания периода обсуждения которой истек в сентябре 1995 г. Эта спецификация так и не была принята в качестве официальной рекомендации. В нее планировалось включить большое разнообразие тегов и возможностей, специфичных для отдельных браузеров, однако Консорциум W3C не нашел возможности разработать хорошую спецификацию для такого большого числа инструкций.

    После долгих размышлений в мае 1996 г. был выпущен проект HTML 3.2. Проект основывался на части тэгов, имеющихся в версии 3.0, которые показывали стабильность в работе. В сентябре 1996 г. после нескольких месяцев обсуждения версия 3.2 стала предлагаемой спецификацией, а в январе 1997 г. - официальной рекомендацией.

    Июль 1997 года ознаменовался выходом предлагаемой спецификации HTML 4.0, которая в декабре 1997 г. стала официальной рекомендацией. На сегодняшний день это последняя из принятых спецификаций.

    В приводимом здесь кратком обзоре истории развития языка HTML вряд ли стоит детально описывать особенности различных спецификаций, тем более, что в реальной жизни разработчики далеко не всегда следуют рекомендациям Консорциума. Отметим лишь некоторые идеи, заложенные в основу последней спецификации.

    В спецификации HTML 4.0 ключевой идеей стало отделение описания структуры документа от описания его представления на экране монитора. Опыт показывает, что разделение структуры и представления документа уменьшает затраты на поддержку широкого спектра платформ, сред и т. п., а также облегчает внесение исправлений в документы. В соответствии с этой идеей следует шире пользоваться методами описания представления

    документа с помощью таблиц стилей, вместо того, чтобы задавать конкретные данные о форме представления вперемешку с содержанием документа. Для реализации этой идеи в спецификации HTML 4.0 ряд тэгов, используемых для непосредственного задания формы представления HTML-элементов, отменены. К отмененным по этой причине тэгам относятся , , , , , . Среди других отмененных тегов отметим , , , . Вместо отмененных тегов предлагаются альтернативные варианты реализации соответствующих возможностей, на что мы обращаем особое внимание в этой книге.

    Понятие отмененного (deprecate) тега состоит в следующем. Если в данной спецификации языка тег назван отмененным, то это означает, что браузеры должны пока продолжать поддержку таких тэгов, но их использование не рекомендуется. В следующих спецификациях эти тэги, возможно, будут переведены в разряд устаревших (obsolete). Устаревшие теги могут более не поддерживаться браузерами. В спецификации HTML 4.0 устаревшими названы всего три тэга: , И . Информацию о том, какие из тегов включены в спецификацию, можно получить из таблицы, приводимой в приложении П1 .

    Официальные сведения о спецификации HTML всегда можно получить с Web-сайта Консорциума W3C по адресу http://www.w3.org/TR/ . Спецификация 4.0 находится по адресу http://www.w3.org/TR/REC-htmI40-971218 .

    Заметим, что по логике вещей официальная спецификация должна играть роль руководящей и направляющей силы, обеспечивая одинаковую форму представления информации различными браузерами. Это идеальный вариант, к которому следует стремиться. На деле все обстоит не так хорошо. Постоянно появляются новые идеи, реализуемые компаниями-разработчиками в своих браузерах и пропагандируемые ими. Удачные идеи приживаются, а затем подхватываются другими разработчиками. Часть возможностей так и остается специфическими особенностями отдельного браузера. Удачные разработки в итоге попадают в спецификацию и становятся общепринятыми. Таким образом, процесс усовершенствования возможностей браузеров и уточнения спецификации идет непрерывно, оказывая взаимное влияние друг на друга.

    Структура документа

    Первым тэгом, с которого следует начинать описание документов HTML, является тег . Он должен всегда начинать описание документа, а завершать описание документа должен тег . Эти теги обозначают, что находящиеся между ними строки представляют единый HTML-документ. Сам по себе документ является обыкновенным текстовым ASCII-файлом. Без этих тегов браузер или другая программа просмотра, возможно, будет не в состоянии идентифицировать формат документа и правильно его интерпретировать.

    Чаще всего тег используется без параметров. В предыдущих версиях использовался параметр VERSION, отмененный спецификацией HTML 4.0 . На смену этому параметру пришел тег .

    Большинство современных браузеров могут опознать документ и не содержащий тегов и , все же их употребление крайне желательно.

    Между парой тегов и располагается сам документ. Документ может состоять из двух разделов - раздела заголовка (начинающийся тэгом ) и раздела содержательной части документа (начинающийся тэгом ). Для документов, описывающих фреймовые структуры, вместо раздела BODY используется раздел FRAMESET (с тэгом ). Далее будут рассмотрены правила составления разделов документа HEAD и BODY. Построение документов, содержащих фреймы, рассматривается в главе 5.

    Раздел документа HEAD

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

    Раздел заголовка открывается тэгом . Обычно этот тег следует сразу же за тэгом . Закрывающий тег показывает конец этого раздела. Между упомянутыми тэгами располагаются остальные теги раздела заголовка.

    Название документа

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

    Примечание

    Обязательность названия документа, вообще говоря, носит характер настоятельной рекомендации. Документ без тега также будет отображаться браузерами. При этом различные браузеры в качестве заголовка окна будут выдавать различную информацию. Так ранние версии браузера Netscape выдавали строчку "No title". Другие браузеры либо не показывают ничего, либо отображают адрес загруженного файла, повторяя информацию панели Location браузера.

    Название документа записывается между тэгами и и представляет собой строку текста. В принципе, название может иметь неограниченную длину и содержать любые символы, кроме некоторых зарезервированных. На практике следует ограничиться одной строкой, имея в виду, что название появляется в заголовке окна браузера. Также следует помнить о том, что останется от названия документа при минимизации окна браузера. Можно рекомендовать ограничивать длину названия документа 60 символами. Увидеть, как отображается название в окне браузера, можно на любом рисунке в данной книге, где приводится пример отображения какого-либо документа.

    По умолчанию текст, содержащийся в названии документа, используется при создании закладки (bookmark) для документа. Поэтому, для большей информативности, избегайте безликих названий (Home Page, Index и т. д.). Подобные слова, используемые в качестве названия закладки, обычно совершенно бесполезны. Название документа должно кратко характеризовать его содержание. Заметим, что при отображении на экране документов с фреймовой структурой, когда в каждый из фреймов загружается отдельный документ, имеющий свое название, на экране будет видно только название главного документа. Тем не менее, задавать название отдельных документов, предназначенных для загрузки во фреймы, также настоятельно рекомендуется. Более подробно этот вопрос рассматривается в главе 5.

    Важность названия документа определяет следующий факт. Поскольку тег располагается практически в самом начале HTML-файла, то после начала загрузки документа первым делом отображается именно оно. Далее выполняется загрузка основного содержания документа, при этом браузер начинает форматирование документа в окне. Этот процесс, вообще говоря, в зависимости от содержания и структуры документа, а также скорости соединения, может затянуться. В течение достаточно продолжительного времени пользователь будет созерцать пустой экран, единственной информативной строчкой которого будет являться название документа. Весьма часто (при обрыве соединения или, если пользователь не желает дожидаться окончания загрузки документа) вся информация о документе на этом и заканчивается.

    Связь с другими документами

    Часто HTML-документы связаны между собой, то есть имеют ссылки друг на друга. Ссылки могут быть как абсолютные, так и относительные. И те и другие имеют недостатки. Абсолютные ссылки могут быть слишком громоздкими и переставать работать, если перемещен младший по иерархии документ. Относительные ссылки легче вводить и обновлять, но и эта связь обрывается, если перемещен старший по иерархии документ. Оба вида связей могут нарушиться при переносе документа с одного компьютера на другой.

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

    К счастью, разработчики HTML предусмотрели эту проблему и добавили два тэга, и , которые включаются в заголовок для того, чтобы связь между документами не нарушалась.

    Тэг

    Тэг служит для указания полного базового URL-адреса документа. С его помощью относительная ссылка продолжает работать, если документ переносится в другой каталог или даже на другой компьютер. Тег работает аналогично команде path MS-DOS, что позволяет программе просмотра определить ссылку на искомый документ, даже если она находится в старшем по иерархии документе, расположенном на другом компьютере.

    Тэг имеет один обязательный параметр HREF, после которого указывается полный URL-адрес документа. Ниже показан пример использования тега .

    Указание базового адреса

    Тэг указывает браузеру, где искать файл. В случае, если пользователь работает с локальной копией файла и его машина не отключена от сети, изображение пиктограммы News будет найдено и показано в окне браузера.

    Тэг

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

    Тэг указывает на связь документа, содержащего данный тег и другого документа или объекта. Он состоит из URL-адреса и параметров, конкретизирующих отношения документов. Заголовок документа может содержать любое количество тегов . Табл. 1.1 описывает параметры тега и их функции.

    Таблица 1.1. Параметры тега

    Приведем примеры тега с параметрами:

    Первая строка указывает на связь с файлом оглавления документа (toc.html - table of contents) с прямым отношением contents. Вторая строка описывает связь с URL-адресом автора документа (с обратным отношением made).

    Между документами может существовать множество различных отношений. Примеры других значений параметра REL:bookmark, copyright, glossary, help, home, index, toc, next, previous. Параметр REV может также принимать значения: author, editor, publisher, owner.

    Тэг

    Разработка новых спецификаций языка разметки гипертекста занимает немалый срок, и за это время компании, производящие браузеры, успевают выпустить несколько версий своих продуктов. Поэтому в раздел заголовка может быть добавлен еще один тег , позволяющий авторам документа определять информацию, не имеющую отношения к HTML.

    Эта информация используется браузером для действий, которые не предусмотрены текущей спецификацией HTML. Тег не потребуется вам для создания первых HTML-документов, но он вам наверняка понадобится, когда ваши страницы станут более сложными.

    Пример:

    Браузеры Netscape Navigator и Internet Explorer поймут эту запись как инструкцию ожидать 60 секунд, а затем загрузить новый документ. Такая инструкция часто используется при изменении местоположения документов. Небольшой документ с приведенной строкой может быть оставлен на старом месторасположении документа для автоматической ссылки на его новое месторасположение.

    Следующая строка:

    инструктирует браузер перезагружать страницу каждые 60 секунд. Это может быть полезно, если данные на странице часто обновляются, например, в случае отслеживания котировок акций.

    Стало весьма популярным применение элемента для решения некоторых типичных задач. В качестве примера можно привести указание ключевых слов, используемых поисковыми системами. Этот способ позволяет включать в индекс документа дополнительные слова, которые могут явно не входить в его содержание. Для этого в тэге в качестве значения параметра NAME указывается имя некоторого свойства. А при помощи параметра CONTENT указывается значение данного свойства, например:

    Спецификация HTML не определяет каких-либо конкретных имен свойств, записываемых в тэге . Однако есть несколько часто применяемых свойств, например, description, keywords, author, robots и др.:

    Приведенные теги вполне могли бы быть указаны, например, для электронного варианта данной книги.

    Тэг может иметь параметры, указанные в табл. 1.2.

    Таблица 1.2. Параметры тега

    Еще одно важное предназначение тега - это указание кодировки текста. Так, для текста на русском языке в кодировке Windows нужно записать следующую строчку:

    Другие элементы заголовка

    В разделе заголовка документа могут присутствовать еще два тега - и . Их назначение связано с использованием таблиц стилей в документе и записью скриптов. Эти вопросы подробно рассматриваются во второй части книги.

    Раздел документа BODY

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

    Раздел документа BODY должен начинаться тэгом и завершаться тэгом , между которыми располагается все содержимое данного раздела. Строго говоря, наличие этих тегов не является обязательным, поскольку браузеры могут определить начало содержательной части документа по контексту. Однако их употребление рекомендуется.

    Тэг имеет ряд параметров, ни один из которых не является обязательным. Перечень параметров приведен в табл. 1.3.

    Таблица 1.3. Перечень параметров тега

    Параметр

    Назначение

    ALINK

    BACKGROUND

    Указывает на URL-адрес изображения, которое используется в качестве фонового

    BOTTOMMARGIN

    Устанавливает границу нижнего поля документа в пикселах

    BGCOLOR

    Определяет цвет фона документа

    BGPROPERTIES

    Если установлено значение FIXED, фоновое изображение не прокручивается

    LEFTMARGIN

    Устанавливает границу левого поля документа в пикселах

    LINK

    Определяет цвет еще не просмотренной ссылки

    RIGHTMARGIN

    Устанавливает границу правого поля документа в пикселах

    SCROLL

    Устанавливает наличие или отсутствие полос прокрутки окна браузера

    TEXT

    Определяет цвет текста

    TOPMARGIN

    Устанавливает границу верхнего поля документа в пикселах

    VLINK

    Определяет цвет уже просмотренной ссылки

    Использование параметров BACKGROUND и BGCOLOR, определяющих фон документа, подробно рассмотрено в .

    Параметр BGPROPERTIES, принимающий единственное значение FIXED, поддерживается только браузером Microsoft Internet Explorer.

    Параметры BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN и TOPMARGIN, задающие расстояния в пикселах между краями текста и соответствующими краями окна, а также параметр SCROLL, распознаются только браузером Microsoft Internet Explorer, начиная с версии 4.0.

    Параметры ALINK, LINK, TEXT и VLINK определяют цвета ссылок и текста документа.

    В языке HTML цвета определяются цифрами в шестнадцатеричном коде. Цветовая система базируется на трех основных цветах - красном, зеленом и синем - и обозначается RGB. Для каждого цвета задается шестнадцатеричное значение в пределах от 00 до FF, что соответствует диапазону 0-255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #. Например, число #800080 обозначает фиолетовый цвет. Чтобы не запоминать совокупности цифр, вместо них можно пользоваться названиями цветов, которые приводятся в приложении П2 . Ранние версии браузеров распознавали только названия 16 стандартных цветов, отмеченных в приложении звездочками. Современные версии браузеров распознают все 140 названий цветов.

    Форматирование текста

    В данном разделе будут рассмотрены возможности форматирования отдельных символов текста документа.

    Тэги уровня блока и последовательные тэги

    Некоторые HTML-тэги, которые могут появляться в разделе BODY, называют тэгами уровня блока (block level), в то время как другие последовательными (inline) тэгами или, называя по-другому, тэгами уровня текста (text level), хотя такое разделение тегов по уровням в известной степени условно.

    Различие уровней HTML-тэгов заключается в следующем: теги уровня блока могут содержать последовательные теги и другие теги уровня блока, тогда как последовательные теги содержат только данные и другие последовательные тэги. Блоковые теги описывают более крупные структуры документов, по сравнению с последовательными тэгами.

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

    Логическое и физическое форматирование

    Для форматирования текста HTML-документов предусмотрена целая группа тэгов, которую можно условно разделить на теги логического и физического форматирования.

    Тэги логического форматирования обозначают (своими именами) структурные типы своих текстовых фрагментов, такие, например, как программный код (тэг ), цитата (тэг ), аббревиатура (тэг ) и т. д. (см. описания этих и других подобных тегов в следующем разделе). С помощью тегов и можно, например, отметить отдельные фрагменты как выделенные, или сильно выделенные. Заметим, что речь идет о структурной разметке, которая не влияет на конкретное экранное представление фрагмента браузером. Поэтому такая разметка и называется логической. Фрагменты с логическим форматированием браузеры отображают на экране определенным образом, заданным по умолчанию. Вид отображения никак не связан со структурным типом фрагмента (т. е. именем тега логического форматирования), но может быть легко переопределен.

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

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

    Тем не менее, на настоящий момент может свободно использоваться и физическое форматирование. В спецификации HTML 4.0 некоторые теги физического форматирования не рекомендуются для применения, однако, пока они все еще поддерживаются всеми браузерами. Заметим, что некоторые теги логического форматирования, призванные заменить отдельные теги физического форматирования, распознаются не всеми браузерами, что делает их применение крайне неудобным. Примером может служить логический тег , который рекомендуется использовать вместо физического тега .

    Рассматриваемые ниже теги относятся к тэгам уровня текста, т. е. призваны, в основном, размечать небольшие группы символов. Некоторые теги могут задавать разметку и на уровне блока.

    Тэги логического форматирования текста

    Тэг

    Тэг отмечает свой текст как аббревиатуру (ABBReviation). Несмотря на то, что этот тег включен в спецификацию HTML 4.0, он до настоящего времени не поддерживается ни одним браузером.

    Тэг

    Тэг . Так же, как и тег , используется для отметки аббревиатур. Этим тэгом рекомендуется отмечать так называемые акронимы, т. е. произносимые слова, состоящие из аббревиатур. Тег возможно в будущем станет использоваться для невизуального отображения элементов, например при речевом синтезе.

    Данный тег удобно использовать в сочетании с параметром TITLE, в качестве значения которого можно указать полную форму записи аббревиатуры. Тогда визуальные браузеры при наведении курсора на текст, размеченный тэгом , будут выдавать полное наименование в виде появляющейся подсказки.

    Заметим, что тег распознается только браузером Microsoft Internet Explorer. Пример:

    СПбГИТМО - один из ведущих технических вузов Санкт-Петербурга

    Тэг

    Тэг используется для отметки цитат или названий книг и статей, ссылок на другие источники и т. д. Браузерами такой текст обычно выводится курсивом. Пример:

    Невское время является одной из наиболее популярных городских газет Санкт-Петербурга

    Тэг

    Тэг отмечает свой текст как небольшой фрагмент программного кода. Как правило, отображается моноширинным шрифтом. Этот тег не следует путать с тэгом Являющимся элементом уровня блока, который следует использовать для отметки больших фрагментов (листингов) кода.

    Например:

    Пример простейшего оператора языка программирования C:

    puts("Hello, World!");

    Есть еще одно различие в использовании тегов и В коде программ часто бывает важно наличие нескольких идущих подряд пробелов. Их отображение будет сохранено только при использовании тега .

    Тэг

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

    Тэг имеет два необязательных параметра: CITE и DATETIME. Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего причины удаления данного фрагмента.

    Параметр DATETIME указывает дату удаления в формате: YYYY-MM-DDThh:mm:ssTZD, определяющем год, месяц, число, часы, минуты и секунды удаления, а также часовой пояс (Time Zone). Например:

    Последней принятой спецификацией языка разметки HTML является версия 3.2 4.0

    Текст, помеченный тэгом обычно отображается перечеркнутым текстом. В спецификации HTML 4.0 этому тэгу отдается предпочтение перед тэгом физического форматирования или , обозначающих перечеркнутый текст. Однако тег

    Тэг

    Тэг отмечает свой текстовый фрагмент как определение (DeFinitioN). Например, этим тэгом можно отметить какой-либо термин, когда он встречается в тексте в первый раз. Пример:

    Internet Explorer - это популярный Web-браузер

    Тэг поддерживается только браузером Microsoft Internet Explorer. Отображается по умолчанию курсивом.

    Тэг

    Тэг отмечает свой текст как вставку (INSertion). Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии. Тег может использоваться как элемент уровня текста и как элемент уровня блока.

    Тэг имеет два необязательных параметра: CITE и DATETIME. Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего подробности внесенных дополнений.

    Параметр DATETIME указывает дату вставки в формате: YYYY-MM-DDThh:mm:ssTZD, определяющем год, месяц, число, часы, минуты и секунды вставки, а также часовой пояс (Time Zone).

    Текст, помеченный тэгом , обычно отображается подчеркнутым текстом. Тег в настоящее время распознается только браузером Microsoft Internet Explorer.

    Тэг

    Тэг (EMphasis - выделение, подчеркивание) используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст курсивом. Пример:

    Пример выделения отдельных слов текста

    .

    Тэг

    Тэг отмечает текст как вводимый пользователем с клавиатуры. Обычно отображается моноширинным шрифтом, например:

    Чтобы запустить текстовый редактор, напечатайте: notepad

    Применение данного тега предпочтительнее применения тега физического форматирования .

    Тэг

    Тэг отмечает короткие цитаты в строке текста. В отличие от тега уровня блока при отображении не выполняется отделение размеченного текста пустыми строками. Обычно отображается курсивом. Тег (в отличие от ) в настоящее время распознается только браузером Microsoft Internet Explorer.

    Тэг имеет параметр CITE, в качестве значения которого можно указать источник цитаты.

    Тэг

    Тэг отмечает текст как образец (SAMPle). Обычное использование этого тега - отметка текста, выдаваемого программами (sample output). Используется также для выделения нескольких символов моноширинным шрифтом.

    Применение данного тега предпочтительнее применения тега физического форматирования . Например:

    В результате работы программы будет напечатано: Hello, World! .

    Тэг

    Тэг , как правило, используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст полужирным шрифтом. Пример:

    Санкт-Петербург расположен в самой восточной оконечности Финского залива в устье реки Невы< /STRONG>

    Применение данного тега предпочтительнее применения тега физического форматирования . Тегом обычно размечают более важные фрагменты текста, чем те, что размечены тэгом .

    Тэг

    Тэг отмечает имена переменных программ. Обычно такой текст отображается курсивом. Пример:

    Задайте значение переменной N

    Отображение некоторых из примеров, приведенных при описании тегов логического форматирования текста, показано на рис. 1.1. На рисунке видно, как при наведении указателя мыши на текст, отмеченный тэгом , выдается подсказка.

    Рис. 1.1. Примеры форматирования текста

    Вы, наверное, обратили внимание на то, что некоторые элементы дают одинаковый результат. Более того, часть элементов может никак не изменять представление фрагмента текста на экране. Может возникнуть законный вопрос: для чего создано такое разнообразие элементов форматирования?

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

    Тэги физического форматирования текста

    Приведем описание тегов физического форматирования. Часть из них не рекомендуется к использованию спецификацией HTML 4.0 по приведенным выше причинам. Некоторые теги отменены (deprecate) спецификацией HTML 4.0, однако они продолжают поддерживаться браузерами.

    Тэг

    Тэг отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо тега использовать тег логического форматирования . Например:

    Это полужирный шрифт.

    Рис. 1.2. Примеры физического форматирования текста (браузером Netscape)

    Тэг

    Тэг отображает текст курсивом. Для большинства случаев вместо этого тега рекомендуется использовать теги , , или , поскольку последние лучше отражают назначение выделяемого текста. Например:

    Выделение курсивом

    Тэг

    Тэг отображает текст моноширинным шрифтом. Для большинства случаев вместо этого тега лучше использовать теги , или . Пример:

    Это моноширинный шрифт .

    Тэг

    Тэг отображает текст подчеркнутым. Отмененный тэг. Вместо него рекомендуется использовать теги или . Например:

    Пример подчеркивания текста .

    Тэги и

    Тэги и отображают текст, перечеркнутый горизонтальной линией. Отмененный тэг. Вместо него следует использовать тег . Например:

    Пример зачеркнутого текста .

    В настоящее время тег поддерживается не всеми браузерами, поэтому пока рекомендуется использовать в сочетании с тэгом . А именно, внутрь тэга-контейнера можно вложить пару тегов

    ... .

    Тэг

    Тэг выводит текст шрифтом большего (чем непомеченная часть текста) размера. Вместо данного элемента лучше использовать или теги заголовков, например,

    Шрифт большего размера .

    Тэг

    Тэг выводит текст шрифтом меньшего размера. Поскольку в HTML нет тэга, противоположного по действию тэгу , то для этих целей можно применять тег . Большинство браузеров поддерживают вложенные теги , однако использовать такой подход не рекомендуется. Например:

    Шрифт меньшего размера .

    Тэг

    Тэг сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например:

    Пример шрифта для нижнего индекса .

    Тэг

    Тэг сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например:

    Пример шрифта для верхнего индекса .

    Тэг

    Тэг отображает мигающий текст. Этот тег не входит в спецификацию HTML и поддерживается только браузером Netscape. Опытные разработчики крайне редко прибегают к использованию этого тэга, поскольку наличие на странице мигающих символов раздражает многих пользователей.

    Тэг

    Тэг-контейнер является аналогом тега уровня блока . Может использоваться в тех случаях, когда требуется отметить фрагмент текста для задания его свойств, и при этом не удается использовать никакой другой структурный тег форматирования.

    Браузер Microsoft Internet Explorer дополнительно разрешает использование следующих параметров тэга: DIR, DATAFLD, DATAFORMATAS, DATASRC. Описание параметров можно найти во второй части книги.

    Рис. 1.3. Использование вложенных тегов форматирования текста

    Тэги форматирования могут быть вложенными друг в друга. При этом нужно внимательно следить, чтобы один контейнер находился целиком в другом контейнере. На рис. 1.3 показан пример использования вложения элемента курсива в элемент полужирного шрифта. Использован следующий фрагмент HTML-кода:

    Это полужирный шрифт.

    Это курсив.

    А здесь текст полужирный и курсивный

    Тэг

    Тэг указывает параметры шрифта. Он относится к тэгам физического форматирования уровня текста.

    Назначение параметров шрифта непосредственно в тексте документа нарушает основную идею разделения содержательной части документа и описания формы представления документа. Поэтому в спецификации HTML 4.0 данный тэг, а также тег отнесены к отмененным. Их дальнейшее применение не рекомендуется.

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

    Тэг относится к последовательным элементам, поэтому не может включать в себя элементы уровня блока, например,

    Или

    .

    Для тега могут задаваться следующие параметры: FACE, SIZE и COLOR. Заметим, что браузер Netscape допускает также использование двух дополнительных параметров: POINT-SIZE и WEIGHT, описание которых опускаем.

      FACE

      Параметр FACE служит для указания типа шрифта, которым программа просмотра пользователя будет выводить текст (если такой шрифт имеется на компьютере). Значением данного параметра служит название шрифта, которое должно в точности совпадать с названием шрифта, имеющего у пользователя. Если такого шрифта не будет найдено, то данное указание будет проигнорировано и будет использован шрифт, установленный по умолчанию.

      Можно указать как один, так и несколько названий шрифтов, разделяя их запятыми. Это весьма полезное свойство, так как в разных системах могут быть почти идентичные шрифты, называющиеся по-разному. Другим важным качеством является задание предпочтения использования шрифтов. Список шрифтов просматривается слева направо. Если на компьютере пользователя нет шрифта, указанного в списке первым, то делается попытка найти следующий шрифт и т. д.

      Приведем пример использования параметра FACE:

      Назначение шрифтов


      Пример задания названия шрифта.

      На рис. 1.4 показано отображение примера браузером Netscape. В примере в качестве предпочитаемого указывается шрифт Verdana, при его отсутствии будет использован шрифт Arial и т. д.

    Рис. 1.4. Отображение примера браузером Netscape

      SIZE

      Этот параметр служит для указания размеров шрифта в условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой программы просмотра. Принято считать, что размер "нормального" шрифта соответствует значению 3.

    Настройки размеров шрифта, используемых по умолчанию, а также величины абсолютного изменения размеров шрифта, зависят от браузеров. На рис. 1.5 показано окно настройки браузера Netscape, в котором задаются шрифты, используемые по умолчанию.

    Размер шрифта указывается как абсолютной величиной (SIZE=2), так и относительной (SIZE=+1). Последний способ часто используется в сочетании с заданием базового размера шрифта с помощью тега .

    Примечание

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

    Приведем пример, в котором использованы различные способы назначения размеров шрифтов. Отображение примера показано на рис. 1.6.


    Рис. 1.5. Окно настройки параметров шрифтов браузера Netscape


    Рис. 1.6. Назначение размеров шрифтов

    Назначение размеров шрифтов

    Шрифт размера 1

    Шрифт размера 2

    Шрифт размера 3

    Шрифт размера 4

    Шрифт размера 5

    Шрифт размера 6

    Шрифт размера 7

      COLOR

      Этот параметр устанавливает цвет шрифта, который может задаваться с помощью стандартных имен или в формате #RRGGBB. Приведем пример документа с разноцветным текстом.

      Выбор цвета шрифта

      Текст зеленого цвета

      Текст красного цвета

    Тэг

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

    Примечание

    Тэг может появляться также и в разделе документа.

    Заметим, что для тега не существует закрывающего тэга.

    В качестве параметров могут использоваться точно такие же параметры, что и для тега , а именно: FACE, SIZE и COLOR. Назначение и правила записи параметров аналогичны.

    Примечание

    Браузер Netscape не допускает применение параметра FACE тега .

    Приведем пример использования тега .

    Назначение размеров шрифтов

    Текст, записанный шрифтом по умолчанию.

    Шрифт размера 2.

    Шрифт размера 4.

    Текст внутри ячейки таблицы

    Текст после таблицы

    В приведенном примере дважды переопределяется размер шрифта, используемого по умолчанию. Изначально он равен 3 (по умолчанию). Затем устанавливается равным 2, далее - 4. Обратите внимание на отображение данного примера (рис. 1.7). Видно, что для таблиц назначение тега не действует. Это характерно для многих браузеров, хотя формально нарушает идею применения тэга.


    Рис. 1.7. Отображение примера С ТЭГОМ (браузером Netscape)

    Форматирование HTML-документа

    Разделение на абзацы

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

    Одним из первых правил составления практически любых документов является разбиение его текста на отдельные абзацы, выражающие законченную мысль. HTML-документы не являются исключением из этого правила. При создании документов с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа перевода строки. Большинство редакторов реализует это при нажатии клавиши . В HTML-документах символы перевода строки не приводят к образованию нового абзаца.

    Язык HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Поскольку символы перевода строки оригинального документа игнорируются, то текст, отлично смотревшийся в окне редактора автора документа, может превратиться в сплошной неудобочитаемый текст в окне программы просмотра.

    Избежать этой неприятности позволяет применение специального тега разделения на абзацы

    Перед началом каждого абзаца текста следует поместить тег

    Закрывающий тег

    не обязателен. Браузеры обычно отделяют абзацы друг от друга пустой строкой.

    Примечание

    Браузеры обычно интерпретируют несколько стоящих подряд тегов абзаца

    Как один. То же самое относится и к тэгу перевода строки
    . Поэтому создать несколько пустых строк при помощи этих тегов не удается.

    Тэг

    Может задаваться с параметром горизонтального выравнивания ALIGN. Возможные значения параметра приведены в табл. 1.4. По умолчанию выполняется выравнивание по левому краю.

    Таблица 1.4. Значения параметра ALIGN

    Значение параметра ALIGN

    Действие

    LEFT

    Выравнивание текста по левой границе окна браузера

    CENTER

    Выравнивание по центру окна браузера

    RIGHT

    Выравнивание по правой границе окна браузера

    JUSTIFY

    Выравнивание по ширине (по двум сторонам)

    Заметим, что выравнивание по ширине (ALIGN = JUSTIFY) долгое время не поддерживалось браузерами. Во многих описаниях языка HTML для значений параметра выравнивания указывается только три варианта (LEFT, CENTER и RIGHT). В настоящее время все популярные браузеры умеют выполнять выравнивание по ширине. Некоторые проблемы создания документов с выравниванием по ширине рассмотрены также в главе 8.

    Примечание

    Отсутствие выравнивания по ширине в настоящее время кажется удивительным. Этот режим применяется очень часто для печатных изданий. Достаточно взять в руки любую газету или внимательно присмотреться к абзацам данной книги - все они выровнены по ширине. Однако для HTML-документов до последнего времени выравнивание по ширине не допускалось. Всего лишь пару лет назад ни один браузер не имел такого режима. Так, читатели, до сих пор использующие браузер Netscape версии 3.x, не смогут увидеть ровные строчки в документе. Можно попытаться предугадать, какие же еще возможности появятся в будущем у браузеров, сравнив возможности мощных текстовых редакторов и современных браузеров. Примером не реализованных пока возможностей может являться автоматическая расстановка переносов и пр.

    Перевод строки

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

    Приведем пример использования принудительного перевода строки (рис. 1.8):

    Использование принудительного перевода строки

    Над омраченным Петроградом

    Дышал ноябрь осенним хладом.

    Плеская шумною волной

    В края своей ограды стройной,

    Нева металась, как больной

    В своей постеле беспокойной.

    А.С.Пушкин. Медный всадник


    Рис. 1.8. Тег
    можно использовать для принудительного перевода строки

    В отличие от тега абзаца

    При использовании тега
    не будет образована пустая строка.

    Использование тега
    требует осторожности - возможна ситуация, когда браузер уже сделал перевод строки за одно-два слова до того, как встретил ваш тег
    . Это бывает в случае, если ширина окна программы просмотра читателя меньше, чем тот же параметр программы, с помощью которой вы тестировали ваш документ. При этом может получиться, что в строке посреди абзаца останется только одно слово, нарушая тем самым красоту компоновки документа.

    Примечание

    При использовании тега
    для разбивки текста, обтекающего изображения или таблицы, можно задавать параметр CLEAR, прекращающий обтекание текста. Об этом можно прочитать в главах 3 и 4.

    Тэги u

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

    Примечание

    Для обеспечения неразрывности текста, располагаемого в ячейках таблиц, существует специальный параметр NOWRAP тега . Об этом можно узнать в главе 4.

    Размечая текст с помощью тега неразрывной строки можно получить очень длинные строки. Чтобы этого избежать, можно указать браузеру читателя место возможного перевода строки, что будет выполнено только при необходимости (так называемый "мягкий" перевод строки). Это можно осуществить, поставив в нужном месте текста тег (Word BReak), который так же, как и тег
    , не нуждается в закрывающем тэге.

    Примечание

    Тэг вообще не поддерживается браузером Netscape. Браузер Microsoft Internet Explorer распознает этот тег только в тексте, размеченном тэгами .

    Заголовки внутри HTML-документа

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

    Для разметки заголовков используются теги , , , , и . Эти теги требуют соответствующего закрывающего тэга. Заголовок с номером 1 является самым крупным (заголовок верхнего уровня), а с номером 6 - самым мелким. Теги заголовка являются элементами уровня блока, поэтому с помощью них нельзя размечать отдельные слова текста для увеличения их размера. При использовании тегов заголовков осуществляется вставка пустой строки до и после заголовка, поэтому тегов абзаца или перевода строки здесь не требуется.

    Тэги заголовков могут задаваться с параметром горизонтального выравнивания ALIGN. Возможные значения параметра совпадают с параметрами выравнивания тега абзаца

    (см. табл. 1.4).

    Пример использования заголовков разного уровня с различным выравниванием (рис. 1.9):

    Примеры заголовков

    Заголовок размера 1

    Заголовок размера 2

    Заголовок размера 3

    Заголовок размера 4

    Заголовок размера 5

    Заголовок размера 6

    Основной текст документа


    Рис. 1.9. Отображение заголовков различного размера

    Горизонтальные линии

    Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Сейчас часто используют рельефную, вдавленную линию, чтобы обозначить "объемность" документа.

    Тэг позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра. Этот тег не является контейнером, поэтому не требует закрывающего тэга. До и после линии автоматически вставляется пустая строка. Параметры тега представлены в табл. 1.5.

    Таблица 1.5. Параметры тега

    Пример:

    В этом примере задается горизонтальная линия, которая занимает половину ширину окна просмотра и располагается посередине окна. Заметим, что параметры выравнивания имеют смысл только тогда, когда линия занимает не всю ширину окна.

    Примечание

    Браузер Netscape не позволяет использовать параметр COLOR тега .

    Использование предварительно отформатированного текста

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

    Текст, размеченный тэгом Будет отображаться в таком виде, как он выглядит в обычном текстовом редакторе. Для отображения всегда будет использоваться моноширинный шрифт. При этом вы сможете в большей степени контролировать вывод документа программой просмотра, правда, за счет некоторой потери в гибкости.

    Одним из вариантов использования этого тега являются таблицы, построенные без применения специальных тегов разметки таблиц. Другим важным

    применением является вывод на экран больших блоков программного кода (Java, C++ и т. п.), не позволяющий браузеру переформатировать их.

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

    Примечание

    Тэг Имеет необязательный параметр WIDTH, назначение которого - указывать браузеру максимальную длину строки преформатированного текста. В зависимости от этого значения браузер мог бы подобрать нужный шрифт и/или отступ для оптимального отображения преформатированного текста. В качестве значения по умолчанию предлагалось использовать 80. Другими рекомендованными значениями являются 40 и 132. Заметим, что читателям, имеющим значительный опыт работы со средствами вычислительной техники, эти числа говорят о многом. На деле же современные браузеры игнорируют значение параметра WIDTH.

    Существуют еще несколько тэгов, решающих близкую по смыслу задачу. К ним относятся теги , И .Все три упомянутых тега в спецификации HTML 4.0 отмечены как устаревшие. Это означает, что в будущих версиях браузеры прекратят их поддержку. Вместо этих тегов рекомендуется использовать тег .

    Тэг

    Тэг-контейнер является элементом уровня блока, служащим для выделения фрагмента документа. Целью этого выделения является управление параметрами данного фрагмента, которое обычно выполняется с помощью назначения стилей. Приведем пример:

    (Фрагмент документа)

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

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

    Тэг

    Тэг-контейнер предназначен для горизонтального выравнивания всех элементов посередине окна просмотра браузера. Он имеет уровень блока и его полезно использовать для центрирования таких элементов, как, например, таблиц, так как они не могут быть центрированы назначением

    ALIGN=CENTER тега

    .

    По существу тег является краткой формой следующей записи: . Дальнейшее использование тега по причинам, отмеченным в предыдущем разделе, также нежелательно.

    Включение комментариев в документ

    В HTML-документ можно включать комментарии, которые не будут видны читателю. Они могут состоять из произвольного числа строк и должны начинаться тэгом . Все, что заключено внутри этих тэгов, при просмотре страницы не будет отображаться на экране.

    По возможности поясняйте свой код, где это необходимо.

    Используйте комментарии, чтобы пояснить свой код: что он делает, за что отвечает, и почему используется выбранное решение.

    (Этот пункт не обязателен, потому что нет смысла ожидать, что код всегда будет хорошо задокументирован. Полезность комментирования зависит от сложности проекта и может различаться для HTML и CSS кода.)

    Задачи Отмечайте задачи для списка дел с помощью TODO .

    Отмечайте задачи с помощью ключевого слова TODO . не используйте другие часто встречающиеся форматы, такие как @@ .

    Заключайте контакты (имя пользователя или список адресатов) в круглые скобки: TODO(контакт) .

    Описывайте задачу после двоеточия, например: TODO: Задача .

    Рекомендуется: {# TODO(Ivan Ivanov): Разобраться с центровкой #} Тест
    Рекомендуется:

    • Огурцы
    • Помидоры

    Правила оформления HTMLТип документа Используйте HTML5.

    (Рекомендуется использовать HTML с типом контента text/html . Не используйте XHTML, так как application/xhtml+xml (англ.) , хуже поддерживается браузерами и ограничивает возможность оптимизации.)

    Валидность HTML По возможности используйте валидный HTML.

    Используйте валидный HTML код, кроме случаев, когда использование не позволяет достичь размера файла, необходимого для нужного уровня производительности.

    W3C HTML validator (англ.) чтобы проверить валидность кода.

    Валидность - это важное и при этом измеряемое качество кода. Написание валидного HTML способствует изучению технических требований и ограничений и обеспечивает правильное использование HTML.

    Не рекомендуется: Проверка Просто проверка
    Рекомендуется: Проверка Просто проверка.

    Семантика Используйте HTML так, как это было задумано.

    Используйте элементы (Иногда неверно называемые “тегами”) по назначению: заголовки для заголовков, p для абзацев, a для ссылок и т.д.

    Это облегчает чтение, редактирование и поддержку кода.

    Альтернатива для мультимедиа Всегда указывайте альтернативное содержимое для мультимедиа.

    Постарайтесь указать альтернативное содержимое для мультимедиа: например для картинок, видео или анимаций, заданных с помощью canvas . Для картинок это осмысленный альтернативный текст (alt ), а для видео и аудио расшифровки текста и подписи если это возможно.

    Альтернативное содержимое может помочь людям с с ограниченными возможностями. Например человеку со слабым зрением сложно понять, что на картинке если для нее не задан @alt . Другим людям может быть тяжело понять о чем говорится в видео или аудио записи.

    (Если для картинки alt избыточен, или она используется только в декоративных целях в местах, где нельзя использовать CSS, используйте пустой альтернативный текст alt="" )

    Разделение ответственности Разделяйте структуру, оформление и поведение.

    Держите структуру (разметка), оформление (стили) и поведение (скрипты) раздельно и постарайтесь свести взаимодействие между ними к минимуму.

    Убедитесь, что документы и шаблоны содержат только HTML, и что HTML служит только для задания структуры документа. Весь код, отвечающий за оформление, перенесите в файлы стилей, а код отвечающий за поведение - в скрипты.

    Старайтесь сократить их пересечения к минимуму, включая в шаблоны минимальное количество файлов стилей и скриптов.

    Отделение структуры от представления и поведения помогает облегчить поддержку кода. Изменение шаблонов и HTML-документов всегда занимает больше времени чем изменение файлов стилей или скриптов.

    Не рекомендуется: HTML sucks HTML Отстой

    Я об этом и раньше где-то читал, но теперь точно все ясно: HTML - полная фигня!!1 Не могу поверить, что для того чтобы изменить оформление, нужно каждый раз все переделывать заново.
    Рекомендуется: My first CSS-only redesign Мой новый CSS дизайн

    Я читал об этом и раньше, но наконец-то сделал сам: Использую принцип разделения ответственности и не пихаю оформление в HTML

    Как круто!

    Ссылки-мнемоники Не используйте ссылки-мнемоники.

    Единственное исключение из этого правила - служебные символы HTML (например < и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).

    Необязательные теги Не используйте необязательные теги. (не обязательно)

    Для уменьшения размера файлов и лучшей читаемости кода можно опускать необязательные теги. В спецификации HTML5 (англ.) есть список необязательных тегов.

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

    Не рекомендуется: Тратим байты - тратим деньги.
    Рекомендуется: Байты-деньги!

    Так-то

    Атрибут "type" Не указывайте атрибут type при подключении стилей и скриптов в документ.

    Не используйте атрибут type при подключении стилей (кроме вариантов когда используется что-то кроме CSS) и скриптов (кроме вариантов когда это не JavaScript).

    Указывать атрибут type в данном случае не обязательно потому что HTML5 использует text/css (англ.) и text/javascript (англ.) по умолчанию. Это будет работать даже в старых браузерах.

    Не рекомендуется:
    Рекомендуется:
    Не рекомендуется:
    Рекомендуется:

    Правила форматирования HTMLФорматирование Выделяйте новую строку для каждого блочного, табличного или списочного элемента и ставьте отступы для каждого дочернего элемента.

    Независимо от стилей заданных для элемента (CSS позволяет изменить поведение элемента с помощью свойства display ), переносите каждый блочный или табличный элемент на новую строку.

    Также ставьте отступы для всех элементов вложенных в блочный или табличный элемент.

    (Если у вас возникнут сложности из-за пробельных символов между списочными элементами, допускается поместить все li элементы в одну строку. Линту [утилита для проверки качества кода прим. пер.] рекомендуется в данном случае выдавать предупреждение вместо ошибки.


    Рекомендуется:
    • Маша
    • Глаша
    • Чебураша

    Рекомендуется:
    Прибыль Налоги
    $ 5.00 $ 4.50

    Правила оформления CSSВалидность CSS По возможности используйте валидный CSS-код.

    Кроме случаев, где необходим браузеро-зависимый код, или ошибок валидатора, используйте валидный CSS код.

    Используйте такие инструменты как W3C CSS Валидатор (англ.) для проверки своего кода.

    Валидность - это важное и при этом измеряемое качество кода. Написание валидного CSS помогает избавиться от избыточного кода и обеспечивает правильное использование таблиц стилей…

    Идентификаторы и названия классов Используйте шаблонные или имеющие смысл имена классов и идентификаторы.

    Вместо использования шифров, или описания внешнего вида элемента, попробуйте в имени класса или идентификатора выразить смысл его создания, или дайте ему шаблонное имя…

    Шаблонные имена - это просто вариант названия для элементов, у которых нет специального предназначения или которые не отличаются от своих братьев и сестер. Обычно они необходимы в качестве “Помощников.”

    Использование функциональных или шаблонных имен уменьшает необходимость ненужных изменений в документа или шаблонах.

    Не рекомендуется: /* Не рекомендуется: не имеет смысла */ #yee-1901 {} /* Не рекомендуется: описание внешнего вида */ .button-green {} .clear {}
    Рекомендуется: /* Рекомендуется: точно и по делу */ #gallery {} #login {} .video {} /* Рекомендуется: шаблонное имя */ .aux {} .alt {}

    Названия идентификаторов и классов Для идентификаторов и классов используйте настолько длинные имена, насколько нужно, но настолько короткие, насколько возможно.

    Попробуйте сформулировать, что именно должен делать данный элемент, при этом будьте кратки насколько возможно.

    Такое использование классов и идентификаторов вносит свой вклад в облегчение понимания и увеличение эффективности кода.

    Селекторы типа Избегайте использование имен классов или идентификаторов с селекторами типа (тега) элемента.

    Кроме случаев когда это не обходимо (например с классами-помощниками), не используйте названия элементов с именами классов или идентификаторами.

    Сокращенные формы записи свойств Используйте сокращенные формы записи свойств, где возможно.

    CSS предлагает множество различных сокращенных (англ.) форм записи (например font ), которые рекомендуется использовать везде где это возможно, даже если задается только одно из значений.

    Использование сокращенной записи свойств полезно для большей эффективности и лучшего понимания кода.

    Не рекомендуется: /* Не рекомендуется */ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;
    Рекомендуется: /* Рекомендуется */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;

    0 и единицы измерения Не указывайте единицы измерения для нулевых значений

    Не указывайте единицы измерения для нулевых значений если на это нет причины.

    0 в целой части дроби Не ставьте “0” в целой части дробных чисел.

    Не ставьте 0 в целой части в значениях между -1 и 1.

    Кавычки в ссылках Не используйте кавычки в ссылках

    Не используйте кавычки ("" , "" ) с url() .

    Шестнадцатеричные названия цветов Используйте трехсимвольную шестнадцатеричную запись где это возможно.

    Трехсимвольная шестнадцатиричная запись для цветов короче и занимает меньше места.

    Префиксы Предваряйте селекторы уникальными для текущего приложения префиксами. (не обязательно)

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

    Использование пространств имен позволяет предотвратить конфликты имен и может облегчить обслуживание сайта. Например при поиске и замене.

    Разделители в классах и идентификаторах Разделяйте слова в идентификаторах и именах классов с помощью дефиса.

    Не используйте ничего, кроме дефиса, для соединения слов и сокращений в селекторах, чтобы повысить удобство чтения и легкость понимания кода.

    Не рекомендуется: /* Не рекомендуется: слова “demo” и “image” не разделены */ .demoimage {} /* Не рекомендуется: используется подчеркивание вместо дефиса */ .error_status {}
    Рекомендуется: /* Рекомендуется */ #video-id {} .ads-sample {}

    Хаки Избегайте использования информации о версии браузеров, или CSS “хаков”- сперва попробуйте другие способы.

    Кажется заманчивым бороться с различиями в работе разных браузеров с помощью CSS-фильтров, хаков или прочих обходных путей. Все эти подходы могут быть рассмотрены лишь в качестве последнего средства, если вы хотите получить эффективную и легко поддерживаемую кодовую базу. Проще говоря, допущение хаков и определения браузера повредит проекту в долгосрочной перспективе, так как это означает, что проект идет по пути наименьшего сопротивления. Что облегчает использование хаков и позволяет использовать их все чаще и чаще, что в результате приведет к слишком частому их использованию.

    Правила форматирования CSSУпорядочивание объявлений Сортируйте объявления по алфавиту.

    Задавайте объявления в алфавитном порядке, чтобы получить согласованный код, с которым легко работать.

    При сортировке игнорируйте браузерные префиксы. При этом, если для одного свойства используются несколько браузерных префиксов, они также должны быть отсортированы (например -moz должен быть перед --webkit )

    Отступы в блоках. Всегда ставьте отступы для содержимого блоков.

    Всегда ставьте отступы для любого блочного содержимого (англ.) , Например для правил внутри правил или объявлений, чтобы отобразить иерархию и облегчить понимание кода.

    После объявлений Ставьте точку с запятой после каждого объявления.

    После каждого объявления ставьте точку с запятой для согласованности кода и облегчения добавления новых свойств.

    После названий свойств Используйте пробелы после двоеточий в объявлениях.

    Всегда используйте один пробел после двоеточия (но не до) в объявлениях, для порядка в коде.

    Отделение селектора и объявления Отделяйте селекторы и объявления переносом строки.

    Начинайте каждый селектор или объявление с новой строки.

    Разделение правил Разделяйте правила переносом строки.

    Всегда ставьте перенос строки между правилами.

    Мета правила CSSГруппировка правил Группируйте правила и обозначайте группы комментарием. (не обязательно)

    По возможности объединяйте правила в группы. Обозначайте группы комментариями и разделяйте переносом строки.

    ЗаключениеБудьте последовательны

    Если вы редактируете код, потратьте несколько минут, чтобы разобраться в том, как он написан. Если математические операторы обособлены пробелами, делайте то же самое. Если комментарии окружены скобочками или черточками, сделайте то же со своими комментариями.

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

    Мы предлагаем единые правила оформления позволяющие писать код в одном стиле, но стиль кода, уже используемый в проекте, также важен.

    Если ваш код будет сильно отличаться от существующего, это может сбить читающего с ритма и затруднить чтение. Постарайтесь этого избежать.

    Примечание от переводчика Хочется еще отметить, что Google ориентируется в первую очередь на большие высоконагруженные проекты, где каждый байт дорог, поэтому стоит учитывать, что если они рекомендуют начинать каждый селектор с новой строки, или использовать пробелы вместо табов, то это в первую очередь подразумевает, что код будет обязательно минифицирован и сжат до использования на сайте.

    Спасибо всем кто дочитал до этого места.

    Теги: Добавить метки

    Введение в HTML

    В этой главе:

    Каждый раз, открывая браузер, вы попадаете на веб-сайт, который может состоять из одной или множества веб-страниц с различной информацией. Основной технологией создания таких веб-страниц является язык HTML .

    Как браузер получает веб-страницы?

    Для общего понимания давайте рассмотрим небольшую теорию о том, как браузер получает веб-страницы и что такое веб-сервер. Чтобы получить веб-страницу, нужно создать файл, написанный на языке HTML, и поместить его на веб-сервер. После того как вы поместили созданный файл на веб-сервер, любой браузер сможет через интернет отыскать вашу веб-страницу. Веб-сервер - это обычный компьютер с доступом в интернет, который непрерывно работает и ожидает запросов от браузеров. Любой сервер хранит веб-страницы, картинки, аудиофайлы и файлы других типов. Когда сервер получает запрос от браузера на какой-нибудь ресурс (изображения, веб-страницы и др.), он находит этот ресурс (если может определить местоположение ресурса) и отправляет его браузеру.

    Вы уже знаете, как работает браузер: вы бродите по различным сайтам в интернете, кликая по ссылкам для перехода на различные страницы. Такой клик служит поводом для того, чтобы ваш браузер сделал запрос на HTML-страницу веб-серверу, получил ответ на свой запрос и отобразил эту страницу в своем окне.

    Но каким образом браузер узнает о том, как именно отображать страницу? Вот здесь начинает работать язык HTML. Он говорит браузеру все о содержании и структуре страницы. Если вы выполните свою работу хорошо (код будет написан корректно и без ошибок), то ваши страницы будут одинаково отображаться во всех браузерах.

    Примечание: Браузер (от англ. Web browser - Веб-обозреватель) - программное обеспечение, используемое для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети - интернета), их обработки, вывода в окне браузера и перехода от одной страницы к другой. К наиболее популярным браузерам относятся: Internet Explorer , Mozilla Firefox , Google Chrome , Safari , Opera .

    Обратите внимание: во время обучения вам не придется выкладывать никакие страницы на веб-сервер, все прекрасно будет работать и на вашем локальном компьютере.

    Перед тем как продолжить, давайте рассмотрим, для чего нужен HTML-редактор, что из себя представляет HTML-документ и как его создавать.

    Зачем нужен HTML-редактор?

    Редактировать HTML-документы можно и в обычном текстовом документе, но удобнее это делать, конечно же, в специальных HTML-редакторах. HTML-редактор - это один из основных инструментов для создания и редактирования веб-страниц и сайта в целом. Основное преимущество редакторов перед обычным блокнотом состоит в том, что они осуществляют подсветку кода, что в свою очередь позволяет проще и быстрее редактировать необходимый код.

    Существует множество платных и бесплатных HTML-редакторов, к наиболее часто используемым платным относятся Dreamweaver , Visual Studio и PHPStorm . В качестве бесплатных редакторов можно использовать notepad++ и geany .

    Что из себя представляет HTML-документ?

    HTML-документ - это обычный текстовой файл c расширением .html , который содержит HTML-код. Далее будет описана информация для тех, кто не знает, как сохранять файлы с нужным расширением.

    Windows:
    Для того, чтобы сделать из текстового файла HTML-документ, вам надо всего-навсего сохранить файл под другим расширением, сделать это можно двумя способами:

  • В открытом редакторе (или в обычном текстовом документе) нажимаем файл → выбираем сохранить как → внизу в текстовом поле имя файла: напишем к примеру так: mypage.html → жмем сохранить . Всё, HTML-документ создан.
  • Кликаем правой кнопкой мыши (ПКМ ) на текстовом файле → выбираем переименовать и меняем расширение с .txt на .html . Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: нажимаем Пуск → открываем Панель управления → выбираем Параметры папок → вкладка Вид → прокручиваем в самый низ и убираем галочку на Скрывать расширения для зарегистрированных типов файлов .

    • Открыть файл, сохраненный с расширением.html, для просмотра в браузере можно двумя способами:

  • Кликнуть по нему два раза левой кнопкой мыши, в этом случае веб-страница откроется в том браузере, который выбран по умолчанию.
  • Кликнуть по нему ПКМ → наводим курсор на открыть с помощью... → выбираем нужный вам браузер.

    • При получении HTML-документа браузер будет отображать его в виде веб-страницы (веб-страницей является то, что отображается в окне браузера), при этом вы не увидите в окне своего браузера отображения написанных вами тегов, потому что они будут интерпретированы для отображения содержимого страницы в нужном вам виде.

    Заголовок Мой первый заголовок

    Мой первый абзац

    Результат данного кода в окне браузера:


    Чтобы отредактировать код HTML-документа, нажмите на него ПКМ → наводим курсор на открыть с помощью... → выбираем нужный вам редактор, если в списке нет нужного редактора, жмем Выбрать программу... и выбираем нужный редактор. Некоторые редакторы (для примера возьмем notepad++ ) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверху Edit with Notepad++ (редактировать с помощью notepad++).

    Что такое HTML?

    HTML - это язык для описания структуры веб-страниц. Cтраницы, созданные с его помощью, могут быть просмотрены только при помощи специальных программ (браузеров), установленных на компьютерах пользователей.

    • Аббревиатура HTML расшифровывается как H yper T ext M arkup L anguage (язык разметки гипертекста).
    • Запомните, он не является языком программирования, это язык разметки.
    • HTML использует теги разметки, чтобы описать структуру веб-страницы.
    Что такое теги?

    HTML теги - это ключевые слова или символы, заключенные в угловые скобки, например ,

    , и т.д. Теги бывают двух видов: парные и одиночные (их также называют пустыми). Парные теги состоят из открывающего и закрывающего тега, например: . Символ "/" после угловой скобки указывает на то, что тег закрывающий. Одиночные теги состоят только из открывающего тега, например:
    . Теги не чувствительны к регистру, поэтому могут быть написаны как прописными, так и строчными буквами:

    Означает то же самое, что и

    По стандарту HTML5 теги могут быть написаны в любом регистре.

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

    Так выглядит страница, в которой используются теги для разметки:

    Летнее меню Напитки в нашем кафе Мультифрукт - 100р.

    Фруктовый напиток, содержащий апельсиновый и ананасовый соки.

    Молочный коктель - 150р.

    Сливочное мороженое, перемешанное с мякотью фруктов.


    То же самое, но без использования тегов:

    Напитки в нашем кафе Мультифрукт - 100р. Фруктовый напиток, содержащий апельсиновый и ананасовый соки. Молочный коктель - 150р. Сливочное мороженое, перемешанное с мякотью фруктов.

    Вы узнаете какая должна присутствовать минимальная структура html документа. Подробно и с примерами разберем каждый необходимый ее элемент. Также поговорим о том, как правильно создавать файлы и страницы сайта.

    Структура HTML документа

    Давайте разберем структуру html документа чтобы понимать, как все работает. Вы узнаете, какой каркас должен присутствовать на странице чтобы она считалась валидной (правильной ).

    Чтобы создать любую веб-страницу, в ней должен присутствовать минимальный набор тегов. Они расположены в примере ниже.

    Как создать сайт в интернете

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


    Визуальный пример html страницы Тег DOCTYPE

    Тег DOCTYPE всегда идет в самом начале веб-страницы. Он необходим для указания типа текущего документа. А также помимо этого браузер понимает какая версия html используется.

    В последней версии 5 он имеет такой вид:

    Тег HTML

    Является контейнером, который заключает в себя все содержимое веб-страницы. Открывающие и закрывающие элементы в документе не обязательны. Однако хороший стиль требует их использования.

    Как правило, открывающий тег html идет вторым после определения документа при помощи doctype . Закрывающий всегда идет на странице последним.

    Этот тег сообщает браузеру, где наш html документ начинается и где заканчивается. Поэтому все остальные элементы (кроме doctype ) должны быть вложены внутри этого контейнера.

    Тег head

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

    Содержимое head не отображается напрямую на веб-странице, кроме тега title . Он отвечает за заголовок страницы.

    В общем, в этом элементе хранится вся техническая информация о странице. Например, тип кодировки html страницы. Он будет говорить браузеру, как ему лучше декодировать документ. Также сюда мы можем и различные скрипты.

    Тег title

    У head есть один обязательный компонент. Это тег title. Он отвечает за то, как будет выглядеть html заголовок страницы. То, что вы напишите сюда, будет отображаться во вкладке браузера.

    Отнеситесь к этому серьезно!

    В данном элементе рекомендую использовать название не более 60 символов с пробелами. Это нужно чтобы оно не обрезалось в поисковой выдаче. И обязательно вписываем сюда осмысленные слова. То есть конкретно пишем, о чем будет страница.

    Профессиональное создание сайта в интернете с примерами

    Конечно же, при этом нужно вставлять ключевые слова и делать свое название более привлекательным. Иначе вы просто рискуете потерять трафик с поиска.

    Тег meta

    Еще один элемент, это тег meta. Он не парный и особой ценности не представляет. Однако наиболее важными элементами являются его атрибуты.

    Таким образом, с помощью параметров и атрибутов, тег может хранить важную информацию о вашей странице.

    Давайте к элементу я пропишу параметр charset и в нем укажу предпочтительную кодировку документа.

    Профессиональное создание сайта в интернете с примерами

    Обратите внимание, как указывается параметр. Его вставляем внутри тега и перед правой закрывающей скобкой. Далее ставим знак равно и в кавычках указываем кодировку документа.

    Обязательно ее указывайте в своих документах. Иначе на вашем сайте вместо текста появятся некрасивые иероглифы (кракозябры ).

    Тег body

    Чуть ниже идет тег body. Это основное тело документа. Внутри него находится тот контент, который виден пользователю. Это может быть текст, картинки, ссылки, видео и так далее.

    Обратите внимание, что body всегда идет ниже тега head . То есть сначала идет техническая информация о странице и только потом основной контент для пользователя. Но никак не наоборот!

    Внутри body обязательно должен присутствовать тег h1. Это заголовок материала. То есть, как будет называться ваша статья. Рекомендую название делать не более 55 символов с пробелами.

    Синтаксис html

    Немного стоит упомянуть и про синтаксис html. Сразу старайтесь располагать теги в таком удобном виде, как на примере выше. Конечно же, можно расположить их и в хаотичном порядке.

    Профессиональное создание сайта в интернете с примерами

    Здесь размещается содержание документа, которое видно всем пользователям.

    Браузеру будет все равно.

    Он по-любому отобразит страницу правильно. Но вам самим будет очень неудобно редактировать html код страницы. Поэтому рекомендую не лепить и делать аккуратно.

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

    Название документа Название материала

    Основной текст

    То есть тег head должен идти отступом в одну табуляцию относительно тега html . Body идет на уровне с head поскольку он тоже вложен в контейнер html .

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

    Исключение лишь могут составлять head и body . Они используются всего лишь один раз на странице. Поэтому чтобы не уходить далеко вправо при большой вложенности, эти элементы можно делать без отступов.

    Название документа

    Основной текст

    При большой вложенности этот метод поможет сэкономить место и не потеряться в структуре html.

    Как вы знаете, теги можно вкладывать друг в друга. Например, текст и картинка находятся в разных тегах. Однако при этом они имеют общий родительский элемент.

    Если тег открывается, то он должен быть закрыт. Если он пустой и без зарывающей части, то в такой тег ничего вложить нельзя.

    Важно четко соблюдать порядок!

    Если в какой-то тег вкладывается другой, то сначала идет открывающая часть одного тега. Затем открывающая часть другого и так далее. Только потом их нужно закрывать. Но делать это нужно уже в обратном порядке. То есть сначала закрываем второй тег и только в конце доходим до первого.

    Правильный пример:

    Здесь размещается содержание документа, которое видно всем пользователям.

    Неправильный пример:

    Здесь размещается содержание документа, которое видно всем пользователям.

    Кроме того, в один тег могут быть вложены несколько элементов. Но принцип тут тот же самый. Сначала мы открываем его. Затем вкладываем туда несколько тегов и потом закрываем.

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

    Сам комментарий может быть, как однострочным, так и многострочным.

    Название документа

    Основной текст

    Прописывается он между конструкциями .

    Как создать файл html

    Возможно, некоторые из вас не знают, как создать файл html. Для этой задачи есть много специальных программ:

    • Brackets
    • Блокнот
    • Notepad++
    • Sublime Text
    • Atom и другие

    Если у вас Windows, то Блокнот будет уже доступен по умолчанию. Но им не удобно пользоваться. Рекомендую для начала использовать бесплатный редактор html страниц Notepad++. В нем есть много возможностей для удобной работы с кодом.

    Когда запустите редактор, то перед вами уже будет новый пустой файл. Пропишите в нем тот скелет html страницы (каркас ), который мы выше разбирали. Он должен всегда присутствовать.

    Профессиональное создание сайта в интернете с примерами Как создать сайт в интернете

    Здесь размещается содержание документа, которое видно всем пользователям.

    Текст можете изменить под себя. В общем, это будет самая простая html страница.

    HTML кодировка

    При создании страниц всегда прописывайте кодировку в meta теге. Это служебный тег, который вставляют в head .

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

    Сейчас у нас он играет роль указателя кодировки. Здесь есть специальная запись. Она говорит браузеру о том, что данный документ создан в кодировке utf-8 .

    Для чего вообще нужна кодировка?

    Не секрет, что во всем мире пишут и разговаривают на разных языках. Если мы создаем страницу и пишем на русском языке, то в Германии будут создавать и писать уже на немецком. В других странах уже свой язык.

    Раньше при создании html страницы нужно было указывать кодировку, что мы пишем на русском языке. Немцам нужно было указывать, что они пишут на немецком и так далее.

    Когда мы заходим на страницу, браузер уже понимает, на каком языке написан сайт. Также он понимает какой язык для текста используется. Соответственно, он пытается отобразить этот текстовый контент в зависимости от заданной кодировки.

    К сожалению, это не всегда получалось.

    Если бы мы заходили на китайские сайты, то у нас вместо их символов могли высвечиваться черные квадраты или знаки вопросов. То есть браузер просто не понимал, что это за символы.


    Неправильно задана html кодировка

    Как решение этой проблемы была создана универсальная кодировка utf-8.

    Когда она стала уже стандартом, отпала необходимость указывать конкретную кодировку для определенного языка. Достаточно было указать универсальную utf-8 и у вас сайт отображался бы нормально во всех браузерах.

    При этом упрощается еще работа и с базой данных. Поэтому здесь имейте в виду, что кодировку мы всегда будем указывать в utf-8. Но тут нужно обратить свое внимание еще на одну вещь.

    Сохраняем html utf-8

    Чтобы все работало и браузер отображал страницу, желательно сохранить сам html документ в utf-8. В этом программа Notepad ++ нам очень хорошо помогает.

    Здесь есть пункт «Кодировки». Если у вас сейчас кодировка не стоит (как у меня на нижнем рисунке ), то щелкните по пункту «Преобразовать в UTF-8 без BOM».

    В этом случае ваш html файл будет преобразован в кодировку utf-8. Сохраните изменения.

    В правом нижнем углу вы найдете надпись «Dos\Windows ANSI as UTF-8». Это значит, что документ создан в режиме utf-8 и отображение будет нормальным.

    И сразу такой совет!

    Зайдите в «Опции» —> «Настройки». Здесь есть вкладка «Новый документ». Сразу поставьте галочку на «UTF-8 без метки BOM». Так у вас все новые документы будут сразу создаваться в этой кодировке.

    Как сохранить html страницу

    Имя файла может быть любое. Но по умолчанию и особенно если это главная страница сайта, то сохраняйте ее как index.html .

    Когда набираем адрес сайта без указания конкретной страницы, это значит, что мы запрашиваем страницу index.html. То есть, когда мы обращаемся к серверу, он развернет именно индексную страницу.

    Если же мы указываем какую-то конкретную страницу, то в итоге она и будет выводиться. Но если адрес не указан, то будет возвращена индексная страница. Поэтому по умолчанию мы называем страницу index.html.

    И как вы уже должны заметить, расширение файла должно быть html . То есть в типе файла выбираем «Hyper Text Markup Language» и нажимаем «Сохранить».

    Как открыть html файл

    Как открыть html файл чтобы посмотреть наглядное отображение страницы. Для этого используем любой браузер: Google Chrome, Opera, Edge, Mozilla Firefox, Safari и другие.

    Не зря мы сохраняем файлы с расширением html. Ведь только этот тип документа воспроизводят браузеры. А сам язык HTML — это стандарт разметки страницы для последующего воспроизведения браузерами.

    В общем, кликаем по файлу правой кнопкой мыши.

    В меню наводим на «Открыть с помощью» и выбираем нужный вариант браузера. Если они не отобразятся, то кликаем на «Выбрать другое приложение». Там уже среди списка выбираем нужную программу для чтения html страниц.

    Если же вам нужно отредактировать код, то выбираем подходящие редактор. Рекомендую использовать Notepad++.

    Как посмотреть html код страницы

    Еще хочу вам рассказать, как можно посмотреть html код страницы прямо в браузере. Это очень полезно на практике. Например, узнать, какую структуру html кода использует тот или иной сайт.

    Посмотреть код очень просто. Достаточно нажать сочетание клавиш Ctrl + U . В новой вкладке вам откроется исходный код страницы сайта.


    Исходный код сайта

    Еще можно в адресной строке прямо перед адресом страницы прописать:

    Еще в браузерах есть встроенный инструмент веб-разработчика. Доступ к нему в меню у каждой программы будет разным. Однако клавишей F12 этот инструмент откроется в любом браузере.


    Инструмент разработчика в браузере

    Во вкладке «Elements» слева будет html код, а справа . Удобен такой инструмент тем, что в нем можно править код и сразу посмотреть результат. Также при редактировании могут высвечиваться подсказки. Это тоже полезно.