HTML — язык разметки, который используется в большинстве веб-страниц. Браузер интерпретирует его значения (теги) и отображает текст и элементы так, как их представляли разработчики. Без стандартизированного языка страницы сайта превращались бы в мешанину из букв, картинок и форм, которой невозможно нормально пользоваться.
Несмотря на то, что сейчас можно создавать отличные сайты на конструкторах в визуальном режиме, использование языка HTML остаётся важным навыком разработчика. Даже если вы не пишете шаблон с нуля, может возникнуть необходимость отредактировать его или вставить виджет стороннего сервиса — через HTML-код.
HTML позволяет форматировать страницы, придавая им необходимый вид. Если такой задачи нет, то знание тегов поможет отредактировать код встраиваемого виджета. Понимая структуру HTML, вы, например, можете быстро изменить размер видео или виджета и другие особенности его отображения.
Базовые теги
— тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.
— показывает браузеру тип документа, сообщает его версию и язык.
— корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.
— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, или .
— тег для оформления метаданных документа, используемых браузером для обработки страницы, а поисковиками — для индексации.
— тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег имеет несколько атрибутов, позволяющих управлять цветами.
— цвет фона документа в формате RGB.
— цвет гиперссылок, по которым уже переходили.
— цвет гиперссылок при нажатии.
— метатег, который задаёт название страницы, отображаемое на вкладке браузера.
— определяет содержимое блока с вводной информацией сайта или группой ссылок.
Форматирование текста
. . — теги заголовков, от самого большого к самому маленькому.
— жирный текст без придания важности выделенному фрагменту.
— расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.
— выделение текста курсивом без придания важности.
— подчёркивание без дополнительного акцентирования внимания.
— расставление акцентов путём выделения фрагментов текста курсивом.
— выделение частей текста жёлтым маркером.
— имитация текста, набранного на печатной машинке.
— отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.
— подстрочное начертание символов.
— надстрочное начертание символов.
— добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.
— вывод неформатированного текста с сохранением пробелов и особенностей переносов.
— контейнер для абзаца.
— переносит текст на другую строку без создания абзаца.
— отступы с обеих сторон для оформления цитаты или врезки.
— контейнер для размещения термина и его определения.
— добавление определения понятия
— выделение термина курсивом. Последующий текст должен раскрывать понятие.
— указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.
— список с цифрами.
— список со значками.
— добавление гиперссылки в текст. Имеет обязательный атрибут href, в котором указывается ссылка или якорь. Внутри контейнера помещается текст, при нажатии на который происходит переход на другую страницу или другое место на этой же странице.
— выделение фрагмента кода с помощью шрифта monospace.
Встраивание элементов
— вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:
— выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.
— позволяет настроить в пикселях толщину рамки вокруг изображения.
— контейнер для расположения элемента без , который даёт браузеру возможность самостоятельно выбрать подходящую картинку.
— вставка звукового контента.
— вставка видео (поддерживается Ogg, WebM и MP4).
— указывает местоположение файла для , и
— контейнер, через который встраиваются мультимедийные файлы. Для передачи параметров применяется тег .
— размещает на странице горизонтальную линию. Имеет несколько атрибутов.
— устанавливает высоту линии.
— устанавливает ширину линии.
— убирает тень у линии.
— определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на внешний источник.
— ограничивает фрагмент документа, в котором скрипт не выполняется.
Работа с таблицами
— размещает таблицу. Все остальные теги для форматирования таблиц должны находиться внутри это контейнера.
— отмечает тело таблицы.
— создаёт одну ячейку.
— указывает на заголовок ячейки.
— показывает нижний колонтитул.
— позволяет указать ширину и другие параметры одной или нескольких колонок.
Создание форм и кнопок
— создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.
— создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.
— формирует меню с поддержкой скроллинга.
— создаёт ниспадающее меню.
— описывает каждый отдельный пункт меню.
— формирует поля для добавления пользовательских данных.
— выводит результаты вычислений, сделанных с помощью скрипта.
— оформляет пометку для поля, созданного тегом .
— создаёт большие поля для ввода текста.
15 самых популярных HTML-тегов
Чтобы сверстать простой сайт, необязательно знать все HTML-теги. Для начала можно изучить самые популярные — их достаточно для создания примитивной страницы с текстом, ссылками, картинками, подключёнными стилями и скриптами.
Мы будем рассматривать популярность тегов, опираясь на исследование Николая Шабалина — автора профессиональных курсов HTML Academy. Он проанализировал структуру 55 тысяч сайтов и посмотрел, из чего они состоят: какие теги встречаются часто, а какие — редко.
Теги , и
На каждой веб-странице есть три обязательных тега, они формируют структуру документа и содержат информацию для браузеров и поисковых систем.
— контейнер для содержимого страницы.
содержит служебную информацию. Здесь подключаются стили, указывается заголовок страницы, подключаются метатеги.
содержит контент — всё, что отображается в браузере.
Тег
8 270 734 упоминаний.
Тег — самый популярный. Он используется как контейнер для HTML-элементов. В него можно добавить заголовок, абзацы текста, списки, формы или что-то ещё, а потом стилизовать.
О нас
Мы очень любим котов и веб-разработку.
Тег не имеет семантического значения, то есть не передаёт никакой информации о своём содержании. Он нужен для визуального форматирования и разметки.
Обращу внимание на отрыв от других тегов. Он потому популярный, что им можно описать бессмысленные сущности, коих больше, чем осмысленных. Также не для всех осмысленных сущностей есть теги. Например, используется для создания сетки. Для сеток нет тегов, только стили: гриды, флексы, флоаты и прочее.
Некоторые разработчики создают на смысловые блоки, например, шапку, подвал или меню. Так можно делать, но это плохая практика. Лучше использовать специальные семантические теги: , , , , и . Они дают больше информации о содержимом и делают код более читабельным.
Тег
2 918 931 упоминание.
Обычная сылка Ссылка с заглушкой
Если в атрибут добавить протокол mailto: , ссылка откроет почтовый клиент пользователя и создаст электронное письмо. Например, когда пользователь кликнет по ссылке из примера ниже, откроется клиент с автоматически заполненным полем получателя — keks@example.com.
Тег
2 047 701 упоминание.
Тег — несемантический, как и . Он используется для стилизации отдельных слов и фраз в блоке текста. Например, вы можете использовать тег, чтобы изменить цвет слова в абзаце, применить другой шрифт или начертание.
В этом параграфе часть слов написана красным цветом.
280 978 и 1 463 187 упоминаний.
создаёт неупорядоченный список, то есть элементы в нём не пронумерованы, а помечены маркером. Внутри тега с помощью
добавляются элементы списка.
С помощью таких списков разработчики создают навигацию, каталог с карточками товаров, пагинацию, раздел с отзывами и прочее. То есть блоки, которые содержат несколько однородных и равноправных элементов.
Тег
872 383 упоминаний.
Тег
создаёт абзацы — отделяет одну часть текста от другой. Например, все абзацы на этой странице размечены тегом
Если вы верстаете личный блог, сайт-визитку или целый интернет-магазин, не забудьте правильно разметить текст. Неважно, для каких целей вы создаёте продукт и сколько в нём будет текста — в любом случае абзацы важны.
В письменной речи принято в одном абзаце раскрывать одну идею. Но в HTML абзац — не смысловая, а скорее структурная единица. Он лишь явно выделяет параграфы. Притом в тег можно вкладывать не только текст, но и, например, картинки.
Тег
834 669 упоминаний.
Тег добавляет графики, иллюстрации и фотографии. Обычно его используют, когда на страницу нужно вставить контентное изображение — то есть которое доносит до пользователей полезную информацию. Например, показывает продукт или покупателей. Фоны и декоративные элементы чаще добавляют с помощью CSS или тега .
У есть четыре обязательных атрибута:
alt — альтернативный текст, описывающий изображение. Нужен на случай, если картинка не загрузится.
src — адрес, по которому находится изображение.
width — ширина изображения.
height — высота изображения.
Тег
801 902 упоминания.
Тег переносит текст на другую строку, не начиная нового абзаца.
Санкт-Петербург, набережная реки Карповки, 5.
Распространённая ошибка разработчиков-новичков — использовать для деления текста на абзацы. Тег не подходит для таких задач — для абзацев есть
.
Тег
765 856 упоминаний.
Тег подключает на страницу JavaScript. ставится в конце документа, перед закрывающим тегом
. Если сделать наоборот и подключить JS в начале, страница будет отрисовываться медленнее.
У тега есть обязательный атрибут src , в котором указывается путь до файла.
Тег
542 306 упоминаний.
Тег подключает CSS-файлы. В отличие от , он ставится в начале документа, в теге .
У два обязательных атрибута:
rel со значением stylesheet означает, что файл содержит таблицу стилей.
href указывает адрес файла.
Тег
538 580 упоминаний.
Тег содержит метаданные — информацию, которая может влиять на страницу. Атрибут charset указывает кодировку страницы, чтобы браузер правильно отобразил текст. Самая распространённая современная кодировка — utf-8.
С помощью атрибута name=»keywords» можно подсказать поисковым системам ключевые слова, по которым пользователи должны находить сайт. Атрибут name=»description» указывает описание сайта, которое будет видно, например, в поисковике.
Тег
390 689 упоминаний.
Тег форматирует текст — делает его курсивным.
Дизайнер решил выделить текст курсивом
Часто тег используется для иконок: . Именно поэтому он так часто встречается в исследовании. Однако такое использование тега — грубая ошибка, потому что он предназначен для работы с текстом
Кстати, есть ещё один тег для выделения курсивом, не такой популярный — . Разработчики используют его, чтобы поставить акцент на слове или фразе.
Тебе не стоило дразнить Кекса. Он обиделся
Что ещё надо знать
Как мы говорили в начале статьи, этих тегов хватит для создания простой страницы. Но чтобы верстать хорошо, придётся изучить семантические теги. То есть не создавать всю разметку на , а размечать элементы правильно. Например, для шапки сайта использовать , для подвала — , для навигации — , а для крупных смысловых разделов — .
Есть и другие теги — вы найдёте их в спецификации HTML.
Потренировать навыки вёрстки можно на курсе «Старт в программировании». Два первых раздела — бесплатные.
Материалы по теме
Шаблон простого сайта
Как ставить пустые ссылки
Как подключить стили на страницу
Как правильно написать alt-текст
Как использовать ссылки mailto: и tel:
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Язык разметки HT ML
1. Язык разметки гипертекста HTML. История, развитие и перспективы HTML.
HTML (от англ. HypertextMarkupLanguage — « язык разметки гипертекста») — это стандартный язык разметки документов во Всемирной паутине. Практически все веб-страницы создаются при помощи языка HTML или его последователя — XHTML.
Формально, HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.
И HTML и XML произошли от SGML. HTML это некоторое приложение SGML, а XML это подмножество SGML, разработанное для упрощения процесса машинного разбора документа. Другими приложениями SGML является SGML Docbook (документирование), и «Z Format » ( типографика и документирование).
Язык HTML позволяет размечать в тексте:
Смысловую роль текстового блока (например: логическое ударение, заголовок (от первого до шестого уровня), параграф, пункт списка и др.), который обрабатывается браузером в соответствии со смыслом (например, в голосовых браузерах — изменение интонации, в графических — выделением курсивом, и т. п.) или настройками пользователя.
Гипертекстовые ссылки, которые значительно упрощают чтение множества связанных документов, ибо позволяют запросить документ с адресом, указанным в коде ссылки, простым щелчком мыши.
Гарнитуру, кегль, начертание, цвет шрифта для визуального вывода.
Специальные символы (выходящие за рамки ASCII символы пунктуации, математические символы, греческие и готические буквы, стрелки и т. п.)
Формы для введения пользователем данных, которые позднее подвергаются обработке. Формы и другую информацию можно обрабатывать с помощью специальных серверных программ (например, на языках PHP или Perl ).
Открытие мультимедийных файлов, выводимых как непосредственно браузером (например, изображения в форматах JPEG, GIF или PNG; аудиофайлы MIDI и др.), так и внешними приложениями, « встраиваевыми » в окно браузера ( Flash-анимация, Java-апплеты и прочее).
2. Структура HTML-документа, основные теги. Конструкции SGML, используемые в HTML.
Первым тегом с которого следует начинать описание HTML -документа, является тег html > html >. Эти теги обозначают что находящиеся между ними строки представляют единый HTML -документ. Сам по себе документ представляется обыкновенным ASCII -файлом. Без этих тегов браузер или другая программа просмотра, возможно будет не в состоянии идентифицировать формат документа и правильно его интерпретировать. Чаще всего тег < html >используется без параметров (в версии HTML 4.0).
В стандарте HTML 4.01 перед тегом < html >необходимо указывать специальный тег DOCTYPE. Браузеры используют doctype для того, чтобы оценить как рассматривать разметку документа text / html . Этот метод основан на определении объявления типа документа (или его отсутствия) в начале HTML документа. Он бывает нескольких видов:
· Строгий (Strict ): не содержит элементов, помеченных как «устаревшие» или «не одобряемые» ( deprecated ). Пример : < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
· Переходный (Transitional ): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML. Пример : < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
· С фреймами (Frameset ): аналогичен переходному, но содержит также теги для создания наборов фреймов. Пример : < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Раздел документа HEAD
Раздел документа HEAD определяет его заголовок и не является обязательным тегом, однако хорошо составленный заголовок может быть весьма полезен. Задачей заголовка является предоставление необходимой информации для программы, интерпретирующей документ. Теги, находящиеся внутри раздела HEAD (кроме названия документа, описываемого с помощью тега < title >) не отображаются на экране.
Раздел заголовка открывается тегом < head >и закрывается тегом . Между упомянутыми тегами располагаются остальные теги раздела заголовка.
Тег-контейнер < title >является единственным обязательным тегом заголовка и служит для того, чтобы дать документу название. Оно обычно отображается в заголовке окна браузера. По умолчанию текст названия документа используется при создании закладки для документа.
Тег < base >служит для указания полного базового URL-адреса документа. С его помощью относительная ссылка продолжает работать, если документ переносится в другой каталог или даже на другой компьютер. Тег имеет один обязательный атрибут href , после которого указывается полный URL -адрес документа ( < base href =” www . myhost . ru / docs ”>).
Тег < link >указывает на связь документа, содержащего данный тег и другого документа или объекта. Заголовок документа может содержать любое количество тегов < link >. Например:
Атрибут rel определяет отношение между текущим и другим документом (в данном примере это документ таблицы стилей). Атрибут type указывает тип и параметры присоединенной таблицы стилей. Атрибут media конкретизирует способ отображения страницы (те какая таблица стилей будет применяться), в данном случае страница выводится для печати. Href – отвечает за ссылку на присоединяемый файл. Также используются некоторые другие атрибуты.
Тег < meta >определяет метатеги , которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег , все они размещаются в контейнере < HEAD >. Как правило, параметры любого метатега сводятся к парам « имя=значение » , которые определяются аргументами content , name или http — equiv .
· content – Устанавливает значение параметра, заданного с помощью name или http — equiv .
· http — equiv – Предназначен для конвертирования метатега в заголовок HTTP.
· name – Имя метатега , также косвенно устанавливает его предназначение.
Приведем несколько примеров использования тега < meta >:
В разделе заголовка документа могут присутствовать еще два тега – style > и script > . Их назначение связанно с использованием таблиц стилей в документе и записью скриптов .
Раздел документа BODY
Элемент < BODY >предназначен для хранения содержания веб-странице ( контента ), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера BODY . К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.
Тег < BODY >также применяется для определения цветов ссылок и текста на веб-странице . Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY . Тем не менее, большинство параметров до сих пор поддерживается разными браузерами.
Часто тег < BODY >используется для размещения обработчика событий, например, onLoad , которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.
Основные теги HTML
Ниже, в таблице перечислены наиболее часто используемые теги HTML .
Таблица №2: Основные теги HTML
Описание действия тега
Тег < A >является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег < A >устанавливает ссылку или якорь. Где indent – идентификатор
Тег < IMG >предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный параметр src , который определяет адрес файла с изображением.
Определяет текстовый параграф. Тег < P >является блочным элементом, перед ним всегда добавляется пустая строка, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком.
Тег < LI >определяет отдельный элемент списка. Внешний тег < UL >или < OL >устанавливает тип списка — маркированный или нумерованный.
Элемент < DIV >является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора. Как и при использовании других блочных элементов, содержимое тега < DIV >всегда начинается с новой строки. После него, также, добавляется перенос строки.
Заголовок 1 уровня
Заголовок 6 уровня
HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег < H 1>представляет собой наиболее важный заголовок первого уровня, а тег < H 6>служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги < H 1>: < H 6>относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Видом заголовком легко можно управлять с помощью стилей.
Тег < MAP >служит контейнером для элементов < AREA >, которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Цель использования тега < MAP >— в связывании тега < IMG >с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в теге < IMG >, задаваемого параметром usemap , так и в теге < MAP >, устанавливаемого атрибутом name .
Тег < SPAN >предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как < TABLE >, < P >или < DIV >, с помощью тега < SPAN >можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри параграфа (тега < P >) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег < SPAN >и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора.
Тег < BR >устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа , использование тега BR не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью параметра clear тега < BR >можно сделать так, чтобы следующая строка начиналась ниже элемента.
Тег < IFRAME >создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы. Тег < IFRAME >является контейнером, содержание которого игнорируется браузерами, не поддерживающих данный тег. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между элементами .
3. Основные типы данных HTML (информация о символах, цветах, длинах, URI, типах содержимого и т.д.).
Значения атрибутов в языке HTML могут иметь различные типы данных. Основными типами данных являются следующие .
Основные типы SGML
В определении типа документа определяется синтаксис содержимого элемента HTML и значений атрибутов с использованием меток SGML . Вот обобщенная информация о ключах:
CDATA — это последовательность символов из набора символов документа, она может включать character entities (сущности). Агенты пользователей (браузеры) должны интерпретировать значения атрибутов следующим образом:
· Заменять сущности на символы ,
· Игнорировать перевод строки,
· Заменять каждый возврат каретки или табуляцию на один пробел.
Агенты пользователей могут игнорировать пробелы в начале и в конце значений атрибута CDATA (например, » text » интерпретируется как » text «). Авторы не должны объявлять значения атрибутов с пробелами в начала или в конце.
Метки ID и NAME Значения атрибутов типа ID и NAME должны начинаться с латинской буквы и состоять только из латинских букв, цифр, дефисов, подчеркиваний, двоеточий и точек. Эти значения зависят от регистра. Они отличаются тем, что NAME может содержать специальные символы, а ID не может.
Значения типа IDREF и IDREFS указывают на идентификаторы, т. е. на значения атрибута id других элементов. Значение типа IDREF — это единственный идентификатор, а значение типа IDREFS — это список идентификаторов, разделенных пробелами. IDREF и IDREFS зависят от регистра.
Метки NUMBER должны содержать по крайней мере одну цифру ([0-9]).
Текстовые строки, URI, цвета, длины
Ряд атрибутов принимают текст, который предназначается для чтения людьми. Это текстовые стороки .
Значения атрибутов типа URI — это унифицированные идентификаторы ресурсов (полные или относительные), синтаксис которых должен соответствовать синтаксису URI .
Значение атрибута типа » color » относится к определениям цветов. Значение цвета может быть шестнадцатеричным числом системы RGB (которому предшествует знак диеза #) или одним из шестнадцати стандартных названий цветов. Названия цветов учитывают регистр.
К примеру, значения «#800080″ и » Purple » оба означают пурпурный цвет.
HTML определяет три типа значений длины для атрибутов:
· Пиксели – это целое, представляющее число пикселей (на экране, на бумаге). Таким образом, значение «50» означает пятьдесят пикселей.
· Длина – доля вертикального или горизонтального расстояния в процентах. Таким образом, значение «50%» означает половину доступного пространства.
· Кратный размер – это либо целое число, задающее количество пикселей, либо доля в процентах от размера по горизонтали или вертикали, либо относительный размер вида , где – целое число. При распределении пространства обозреватель сначала выделяет место для размеров, заданных в числах и процентах, а затем разделяет оставшееся пространство между элементами с относительными размерами. Элементу размером 3 будет выделено пространство в три раза большее, чем элементу размером 1. Значение * эквивалентно 1* и часто означает «заполнить оставшееся пространство».
Примеры типов содержимого включают » text / html «, » image / png «, » image / gif «, » video / mpeg «, » audio / basic «, » text / tcl «, » text / javascript » и » text / vbscript «.
Авторы могут использовать распознаваемые типы ссылок, указанные в таблице вместе с условными интерпретациями. Символы пробелов в типах ссылок не допускаются.
Агенты пользователей, поисковые машины и т.д. могут интерпретировать эти типы ссылок несколькими способами. Например, агенты пользователя могут предоставлять доступ к связанным документам с помощью навигационной панели.
Авторы могут определить дополнительные типы ссылок, не описанные в этой спецификации. При этом они должны использовать профиль для указания соглашений, используемых для определения типов ссылок.
Таблица №6: Типы ссылок
Обозначает альтернативные версии документа, в котором находится ссылка. Вместе с атрибутом lang означает переведенную версию документа. Вместе с атрибутом media означает версию, созданную для другого носителя.
Обозначает внешнюю таблицу стилей. Подробнее см . раздел о внешних таблицах стилей. Используется вместе с типом ссылки » Alternate » для таблиц стилей, выбираемых пользователем.
Обозначает первый документ в наборе. Этот тип ссылки сообщает поисковым машинам о том, какой документ автор считает началом набора.
Обозначает следующий документ в линейной последовательности документов. Агенты пользователей могут предварительно загружать документ » next » для сокращения времени загрузки.
Обозначает предыдущий документ в упорядоченной серии документов. Некоторые агенты пользователей также поддерживают синоним » Previous «.
Обозначает документ, служащий содержанием. Некоторые агенты пользователей также поддерживают синоним ToC (из » Table of Contents «).
Обозначает документ — глоссарий терминов, относящихся к текущему документу.
Обозначает замечание об авторском праве для текущего документа.
Обозначает документ, являющийся главой в наборе документов.
Обозначает документ, являющийся разделом в наборе документов.
Обозначает документ, являющийся подразделом в наборе документов.
Обозначает документ, являющийся приложением в наборе документов.
Обозначает документ, содержащий справку (более подробная информация, ссылки на другие информационные ресурсы и т.д.)
Обозначает закладку. Закладка — это ссылка на ключевую точку в расширенном документе. Атрибут title может использоваться, например, для пометки закладки. Необходимо учесть, что в каждом документе можно определить несколько закладок.
Обозначает альтернативные версии документа, в котором находится ссылка. Вместе с атрибутом lang означает переведенную версию документа. Вместе с атрибутом media означает версию, созданную для другого носителя.
Ниже в таблице приведен список распознаваемых дескрипторов носителей, те устройств, с помощью которых, пользователь просматривает страницу. Это значения атрибута media
Таблица №7: Типы дескрипторов
Описание дескриптора
Предназначен для экранов компьютеров, не разделенных на страницы.
Предназначен для носителя с фиксированной сеткой для символов, таких как телетайпы, терминалы или переносные устройства с ограниченными возможностями отображения.
Предназначен для устройств типа телевизора (низкое разрешение, цвета, ограниченные возможности прокрутки).
Предназначен для страничных, непрозрачных материалов и документов, просматриваемых на экране в режиме предварительного просмотра печати.
Предназначен для тактильных устройств с алфавитом Бройля.
Предназначен для синтезаторов речи.
Для всех устройств.
4. Стиль в документах HTML. Внешние таблицы стилей. Каскады таблиц стилей.
CSS (Cascading Style Sheets — каскадныетаблицыстилей ) — технология оформления веб — страниц , элемент концепции DHTML. Таблицы (точнее — списки) CSS служат для оформления преимущественно HTML- и XHTML-документов, но иногда используются и для других документов, структурированных с помощью XML (например, в браузере « Mozilla » для оформления элементов графического интерфейса, XUL).
Спецификации CSS
Данная рекомендация W 3 C принята 17 декабря 1996, откорректирована 11 января 1999. Среди наиболее важных возможностей, предоставляемых этой рекомендацией, были:
· Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
· Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
· Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (т.е. межстрочные отступы)
· Выравнивание для текста, изображений, таблиц и других элементов.
· Свойства блоков, такие как высоту, ширину, внутренние ( padding ) и внешние ( margin ) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear .
Данная рекомендация W 3 C принята 12 мая 1998. Построена на CSS 1 с сохранением обратной совместимости.
Добавление к функциональности:
· Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной верстки
· Типы носителей. Позволяет устанавливать разные стили для разных носителей (например, монитор, принтер, КПК)
· Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например, для слепых посетителей сайта)
· Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати
· Расширенный механизм селекторов
· Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента
Рабочая версия W 3 C от 6 ноября 2006. Построена на CSS 2, содержит исправления ошибок.
Основные принципы CSS
Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.
Каскадные таблицы стилей [ 5] позволяют хранить цвет, размеры текста и другие параметры в стилях. Стилем называется набор правил форматирования, который применяется к элементу документа, чтобы быстро изменить его внешний вид.
Стили позволяют одним действием применить сразу всю группу атрибутов форматирования. С их помощью можно, например, изменить вид всех заголовков. Вместо форматирования заголовка в три приема, когда сначала задается его размер, затем шрифт » Arial » и, наконец, выравнивание по центру, то же самое можно сделать одновременно, применив стиль к тегу < H 1>. Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры стиля во всех документах, где он используется, и вид текста поменяется автоматически.
Другое преимущество CSS состоит в том, что стили предлагают намного больше возможностей для форматирования, нежели простой HTML. Кроме того, стили могут храниться во внешнем файле, браузер кэширует такие документы, поэтому загрузка сайта будет происходить чуть быстрее.
CSS представляют собой мощную систему для разработчиков сайтов, расширяя их возможности по дизайну и верстке веб-страниц . В научной среде, откуда пошла родом технология WWW, люди были больше заняты содержанием документов, чем их оформлением, однако для большинства людей представление сайта, то, как он выглядит, играет более важную роль. Ограничения HTML породили множество техник создания веб-страниц , таких как:
· использование различных расширений HTML;
· применение изображений вместо текста;
· использование рисунков для контроля пустого пространства, так называемые распорки;
· использование таблиц для верстки веб-страниц ;
· написание программных скриптов вместо использования HTML.
Эти техники значительно увеличивают сложность разработки веб-страниц , предлагают ограниченную гибкость в их создании и управлении, а также создают трудности для людей ими не владеющими.
Стили решают эти проблемы, в то же время заменяя лишь ограниченную область механизмов представления HTML.
Синтаксис CSS.
Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно. Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.
Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений.
Схематически это можно показать так:
Подключение стиля к станице
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрены способы подключения CSS.
· При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css , а для связывания документа с этим файлом применяется тег < link >. Данный тег помещается в контейнер
· При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы . По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера
· Внутренний стиль – является по существу расширением для одиночного тега используемого на веб-странице . Для определения стиля используется параметр тега style , а его атрибуты указываются с помощью языка таблицы стилей
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей.
5. Фреймы.
Вводя тег < frame >, дизайнер HTML -станицы разделяет экран браузера на части. В результате пользователь, рассматривающий страницу сайта, может изучать одну часть страницы не зависимо от остальной части. Браузер, распознающий фреймы, загружает разные страницы в разные секции (фреймы) экрана.
Тег frameset > обрамляет текст, описывающий компоновку фреймов. Здесь размещается информация о числе фреймов, их размерах и ориентации (горизонтальной или вертикальной). У тега < frameset >только два возможных атрибута: row , задающий число строк, и cols задающий число столбцов. Между тегами < frameset >не требуется указания тега < body >, но его можно поместить между тегами < noframe >в конце фреймовой структуры. Между тегами < frameset >не должно быть никаких тегов или атрибутов, которые обычно используются между тегами < body >. Единственными тегами, которые могут находиться между ними, являются теги < frame >, < frameset >и < noframe >.
Приведем пример использования фреймов.
6. Формы.
Формы предназначены для обмена данными между пользователем и сервером.
Для указания браузеру где начинается и заканчивается форма, используется тег < form >. Между открывающим и закрывающим тегами < form >и можно помещать любые необходимые теги HTML. Это позволяет добавить элементы формы в ячейки таблицы для их форматирования, а также использовать изображения. Документ HTML может содержать несколько форм, но они не должны быть вложены одна в другую.
Любая форма содержит несколько параметров:
· Элементы формы, которые представляют собой стандартные поля для ввода информации.
· Кнопку отправки данных формы на сервер.
· Адрес программы на веб-сервере , которая будет обрабатывать содержимое данных формы.
Чтобы указать браузеру куда и как отправлять данные формы используется два параметра:
· action — адрес CGI-программы, которая принимает данные формы.
· method — метод пересылки данных, содержащихся в форме, от браузера к веб-серверу . Может принимать два значения: GET и POST.
Элементы формы представляют собой стандартные элементы управления, используемых для заполнения значений, которые затем передаются веб-сереверу .
К стандартным элементам формы относятся: текстовые поля (многострочное текстовое поле и поле пароля), кнопки (для отправки введенной в форму информации серверу и для очистки формы), флажки, переключатели, поле со списком и кнопки-изображения.
Привидем пример простой HTML -формы.
7. Скрипты .
Скриптовыйязык ( scriptinglanguage , также называют язык сценариев) — язык программирования, разработанный для записи «сценариев», последовательностей операций, которые пользователь может выполнять на компьютере. Простые скриптовые языки раньше часто называли языками пакетной обработки ( batch languages или job control languages ). Сценарии обычно интерпретируются, а не компилируются.
В прикладной программе, сценарий ( скрипт ) — это программа, которая автоматизирует некоторую задачу, которую без сценария пользователь делал бы вручную, используя интерфейс программы.
В веб-программировании скриптом называют программу, которая загружается вместе с текстом документа на компьютер пользователя и выполняется программой-браузером. С помощью скриптов реализуются самые разнообразные функции веб-сайтов . Например, с помощью сценария можно организовать проверку отправляемых пользователем на сервер данных (к примеру, через форму). Если информация не верна (вместо численных данных посланы текстовые и тп ), то пользователь увидит предупреждение, выданное скриптом . Данная функция снимает нагрузку с сервера.
Также с помощью сценариев создается оформление сайтов, придание им большей интерактивности. Например, раскрывающиеся меню, динамически меняющие размер картинки и тд .
Тег < script >предназначен для описания скриптов , может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.
< script >может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты , которые должны выполняться в первую очередь, обычно помещают в заголовок документа.
Параметр Language устанавливает язык программирования на котором написан скрипт ( language =»JavaScript |JScript|VBS |VBScript « ).
· JavaScript – язык программирования JavaScript . К этому параметру часто еще присоединяют номер версии, например — JavaScript1.3.
· JScript – разновидность языка JavaScript разработанная компанией Microsoft . Смена названия продиктована тем, что имя JavaScript уже было зарегистрировано, при этом различия между языками состоят не только в названии, но и в подходах.
· VBS,VBScript – язык программирования VBScript основанный на Visual Basic . Является детищем Microsoft и поддерживается преимущественно браузером Internet Explorer .
Наиболее распространенным языком программирования скриптов является JavaScript .
Приведем пример HTML -страницы, с встроенным скриптом .
