Функции и графики. Структура HTML-документа: основные теги, пример Тег для краткого описания html

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

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

Список тегов HTML

Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.

Тег Краткое описание
Комментарий.
Определяет тип документа.
Ссылка, гиперссылка, якорь.
Определяет текст как аббревиатуру.
Контактная информация автора или владельца документа.
Определяет область на карте-изображении
Статья
Контент в стороне (содержимое не является основным на странице по смыслу)
Позволяет вставить воспроизводимый аудио файл.
Полужирный текст.
Задает базовый URL или аттрибут target для относительных ссылок в документе.
Область, где написание текста может имееть другое направления.
Устанавливает направление написания текста. В отличии от направление указывается физическое направление
Цитата.
Указывает область body документа.

Перенос строки.
Кликабельная кнопка
Используется для рисовании графики с помощью скриптов
Подпись таблицы.
Сноска на название материала.
Используется для вставки компьютерного кода в текстовом виде.
Задает характеристики колонок в таблице.
Определяет группу из одной или более колонок таблицы для форматирования.
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле
Определяет описание термина из тега в списке терминов
Текст, который удален в новой версии документа.
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть
Указывает, что содержимое является термином.
Определяет диалоговое окно или интерактивный элемент
Блочный элемент - один из основных элементов верстки.
Определяет список определений
Название термина в списке определений
выделенный по смыслу текст (обычно, текст выделенный курсивом).
Контейнер для внешнего приложения
Группа связанных элементов в форме
Заголовок для элемента
Определяет автономную группу из нескольких элементов (например картинка с подписью)
Нижний колонтитул
Определяет форму пользовательского ввода
- Заголовки HTML разного уровня: , , , , , .
Указывает область head документа.
Блок заголовка
Горизонтальная линия - тематический разделитель.
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом.
Выделяет текст курсивом.
Определяет встроенный фрейм
Изображение, картинка.
Поле для ввода
Текст, который был добавлен в новой версии документа.
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом.
Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода.
Заголовок элементов
  • Элемент списка
    Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS)
    Основной контент
    Контейнер для . Определяет пользовательскую карту на изображении
    Выделенный текст (обычно с помощью подсветки фона).
    Контейнер для списка пунктов меню
    Определяет элементы, которые пользователь может вызвать из контекстного меню
    Используется для определения мета-данных документа.
    Измеритель значений в заданном диапазоне
    Контейнер для навигационных элементов
    Альтернативный контент для пользователей, отключивших скрипты
    Определяет встроенный объект
    Определяет нумерованный список
    Определяет группу связанных вариантов в выпадающем списке. Дает название группу
    Параметр (вариант выбора) в выпадающем списке
    Результат вычислений

    Абзац.
    Задает параметры для встроенных объектов
    Контейнер для нескольких изображений
    Предварительно отформатированный текст.
    Индикатор выполнения (прогресса)
    Цитата в тексте.
    Альтернативный текст, если браузер не поддерживает тег .
    Аннотация к содержимому тега .
    Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов).
    Перечеркнутый текст.
    Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом).
    Определяет скрипт или подключение скрипта из внешнего ресурса.
    Раздел
    Определяет выпадающий список
    Текст шрифтом меньшего размера.
    Определяет ресурс для тегов , и .
    Строчный элемент.
    Текст, выделенный по значению. Обычно отображается полужирным.
    Определяет контейнер для определения стилей документа
    Отображает текст в виде нижнего индекса.
    Заголовок внутри тега
    Отображает текст в виде верхнего индекса.
    Определяет таблицу.
    Определяет область контента в таблице.
    Ячейка в таблице .
    Многострочное поле для ввода
    Определяет группу строк в нижней части таблицы - нижний колонтитул. Подробнее
    Место, где допускается перенос строки.
    Устаревшие теги HTML

    Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.

    Тег Краткое описание
    Акроним. Используйте тег вместо него.
    Встроенный апплет. Используйте или вместо него.
    Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него
    Текст большего размера. Используйте вместо него
    Отцентрованный текст. Используйте вместо него
    Список директорий. Используйте
      вместо него
    Определяет цвет, размер и семейство шрифта. Используйте вместо него
    Фрейм внутри . Используйте вместо него
    Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько элементов
    Альтернативный текст, если фреймы не поддерживаются
    Перечеркнутый текст. Используйте или вместо него
    Моноширный текст. Используйте вместо него
    Подчеркнутый текст. Используйте вместо него

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

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

    Функции мета-тегов

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

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

    Мета-теги можно разделить на две основные группы — это NAME и HTTP-EQUIV . Группа NAME отвечает за текстовую информацию о веб-документе, его авторе, а также - формирует рекомендации для поисковых роботов. Мета-теги, относящиеся к группе HTTP-EQUIV фактически эквивалентны гипертекстовым заголовкам, они формируют заголовок веб-страницы и определяют его обработку, а также управляют действиями браузеров и используются для формирования информации, выдаваемой обычными заголовками.

    Элемент meta принимает следующие атрибуты: content, http-equiv, name, charset и scheme.

    АтрибутОписание
    Name Имя метатега, также косвенно устанавливает его предназначение. Примеры: include, keywords, description, author, revised, generator и др.
    content Устанавливает значение атрибута, заданного с помощью name или http-equiv.
    scheme (устарел) Указывает полезную информацию о схеме или название самой схемы, которая должна быть использована для интерпретации значения свойства (то есть значения атрибута «content»). Не применяется в HTML5.
    charset Новый атрибут, показывает кодировку документа в HTML5. Пример:
    http-equiv Формирует заголовок страницы и определяет его обработку. Как правило, управляет действиями браузеров и используется для формирования информации, выдаваемой обычными заголовками. Например HTTP-EQUIV может использоваться для управления кэшированием, обновлением страницы, автоматической загрузки другой страницы.
    Группа значений атрибута NAME «keywords» (ключевые слова)

    Keywords поисковые системы используют для того, чтобы определить релевантность страницы тому или иному запросу. При формировании данного значения необходимо использовать только те слова, которые обязательно встречаются в самом документе. Использование тех слов, которых нет на странице, не рекомендуется. Ключевые слова нужно добавлять по одному, через запятую, в единственном числе. Рекомендованное количество слов в «keywords» - не более десяти. Кроме того, выявлено, что разбивка этого значения на несколько строк влияет на оценку ссылки поисковыми машинами. Некоторые поисковые системы не индексируют сайты, в которых в значении «keywords» повторяется одно и то же слово для увеличения позиции в списке результатов.

    Если раньше «keywords» имел определённую роль в ранжировании сайта, то в последнее время поисковые системы относятся к нему нейтрально.

    HTML-код с «keywords» :

    keywords Основное содержимое страницы

    «description» (описание страницы)

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

    Таким образом, правильный description обязательно должен содержать ключевое слово, коротко и точно описывать то, о чём данная веб-страница. «Description» вместе с «title» образуют очень важную пару значений, от которых зависит то, перейдёт пользователь из поисковой выдачи на веб-страницу или нет! Поэтому «description» и «title» нужно прописывать для каждой веб-страницы!

    HTML-код с «description» :

    description Основное содержимое страницы

    «Author» и «Copyright»

    Эти значения, как правило, не используются одновременно. Функция author и copyright - идентификация автора или принадлежности контента на странице. «Author» содержит имя автора веб-страницы, но в случае, если веб-сайт принадлежит какой-либо организации, целесообразнее использовать значение «Copyright».

    HTML-код с «author» :

    Примеры применения метатегов Основное содержимое страницы

    «Robots»

    Robots - формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.

    У «robots» могут быть следующие значения:

    • index - страница должна быть проиндексирована;
    • noindex - страница не индексируется;
    • follow - гиперссылки на странице учитываются;
    • nofollow - гиперссылки на странице не учитываются
    • all - включает значения index и follow, включен по умолчанию;
    • none - включает значения noindex и nofollow.

    HTML-код с «robots» :

    Примеры применения метатегов Основное содержимое страницы

    Группа значений атрибута HTTP-EQUIV «Content-Type»

    Content-Type определяет тип документа и его кодировку.

    HTML-код с «Content-Type» :

    Примеры применения метатегов Основное содержимое страницы

    В HTML5 указание кодировки упрощено:

    «refresh»

    Refresh - задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме того, может использоваться автоматическая загрузка другой html-страницы с заданным адресом (url).

    HTML-код с «refresh» :

    Основное содержимое страницы

    Браузер поймет эту запись, как через 5 секунд загрузить новую страницу, указанную в параметре URL, в данном случае это переход на сайт сайт. Значение «refresh» позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content .

    Обратите внимание, что кавычки в указании URL-адреса перед http не ставятся.
    «Content-Language» Content-Language указывает язык документа. Может использоваться поисковыми машинами при индексировании страниц. Комбинация поля Accept-Language (посылаемого браузером) с содержимым Content-language может быть условием выбора сервером того или иного языка.

    HTML-код с «content-language» :

    Язык документа Основное содержимое страницы

    В HTML5 указание языка упрощено:

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

    Пример HTML: Попробуй сам Заголовок страницы Основное содержимое страницы Задачи Итоговое задание

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

    Пришло время повторить изученное и выполнить четыре несложных задания:

    Ключевые слова
    • Реши сам »

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

    Ключевые слова

    Ключевые слова

    Метатеги (англ. meta tags) - предназначены для предоставления структурированных метаданных о веб-странице.

    Давайте согласимся иметь разногласия.
    Роберт Льюис Стивенсон.

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

    К ак я уже говорил в , мета-теги располагаются в заголовке html-страницы, между тегами и, и никак не отображаются браузером (за исключением содержимого тега «title»). Тем не менее, мета-теги для сайта играют очень важную роль. Их добавление и оптимизация могут существенно помочь сайту в его жизни.

    Р екомендую использовать только те метатеги, которые реально нужны для работы сайта. Не загромождай область «head» лишними инструкциями, т.к. любая ошибка здесь может привести к печальным последствиям. Если знать, что делаешь, то мета-теги будут только на пользу, если же сваливать сюда всё подряд, то можно получить трудно диагностируемые проблемы.


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

    С одержимое этого же мета-тега отображается и в заголовке окна :

    В HTML мета-тег «title» добавляется следующим образом:

    Содержимое мета-тега «title»

    Основное содержимое страницы

    К роме того, как я уже сказал ранее, ключевые слова , которые ты добавишь в мета-тег «title», крайне положительно воспримутся поисковиками. Поэтому, заполняя этот тег, постарайся включить в него правильные ключевые слова. О них, кстати, и пойдёт речь дальше.

    § 2. Мета-тег «keywords» (ключевые слова)

    С начала вкратце о том, а что, собственно, такое эти самые «ключевые слова».

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

    Н апример, для этой странице ключевыми словами будут «мета-теги», «мета-тег title», «мета-тег keywords» и т.д.

    Б олее подробно о ключевых словах, в частности, и об оптимизации сайта, вообще, мы поговорим в .

    Ч тобы облегчить работу поисковым системам, используется мета-тег «keywords». В нём вебмастер прописывает ключевые слова для страницы. HTML-код мета-тега «keywords» выглядит следующим образом:

    Перечень ключевых слов">
    Содержимое мета-тега «title»

    Основное содержимое страницы

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

    § 3. Мета-тег «description» (описание страницы)

    С ледующим важным мета-тегом является тег «description», в котором должно содержаться краткое описание страницы. Именно «краткое» и именно «описание страницы». Достаточно добавить одно-два небольших предложения, в которых указать о чём и для кого эта страница.

    В ажной особенностью мета-тега «description» является то обстоятельство, что в случае его правильного заполнения поисковые системы именно на его основе формируют сниппет страницы в выдаче (краткое описание под ссылкой на страницу):

    Е сли поисковикам не нравится то, как заполнен мета-тег «description», то сниппет формируется из кусочков фраз (надёрганных со всей страницы), которые релевантны запросу.

    Т аким образом, правильный мета-тег «description» обязательно содержит ключевое слово (фразу) и коротко и точно описывает то, о чём и для кого страница. «Description» вместе с «title» образуют пару очень важных мета-тегов, от которых зависит то, перейдёт пользователь из поисковой выдачи на сайт или нет! Поэтому его, как и «title», нужно прописывать для каждой страницы!

    H TML-код для создания мета-тега «description» будет следующим:

    Содержимое мета-тега «description»">
    Содержимое мета-тега «title»

    Основное содержимое страницы

    Т еперь перейдём к описанию основных технических мета-тегов из группы «HTTP-EQUIV» (HTTP-эквиваленты).

    § 4. Технические мета-теги

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

    • content-type - тип документа и его кодировка. Этот мета-тег нужен для правильного отображения символов браузером.
      Кодировок существует много. Большинство из них тебе даже никогда не встретится. Не говоря уже про то, что ты будешь их использовать сам. Современные браузеры определяют тип кодировки атоматически, но для большей уверенности можно указать его и самостоятельно. Если ты создаёшь html-документ в операционной системе Windows, языком которой является русский, то кодировка будет «windows-1251», а код для вставки мета-тега такой:

      Содержимое мета-тега «title»

      Основное содержимое страницы

    • content-language - указание языка документа. Значение этого необязательного мета-тега используется как поисковыми роботами, так и web-серверами. Код для вставки:

      Содержимое мета-тега «title»

      Основное содержимое страницы

    • refresh - время (в секундах), через которое произойдет автоматическая перезагрузка документа или переход на другую html-страницу с заданным адресом (url). Например, чтобы производить атоматическую перезагрузку документа каждые 30 секунд, нужно вставить этот мета-тег так:

      Содержимое мета-тега «title»

      Основное содержимое страницы

      А, чтобы, спустя 5 секунд, перейти на страницу по адресу http://www.сайт/, нужно записать так:

      Содержимое мета-тега «title»

      Основное содержимое страницы

    • robots - мета-тег, который отвечает за настройки индексирования страницы. У мета-тега «robots» могут быть следующие значения:
      • index - страница индексируется;
      • noindex - страница не индексируется;
      • follow - гиперссылки на странице учитываются;
      • nofollow - гиперссылки на странице не учитываются
      • all - заменяет «index» и «follow», т.е. страница индексируется и гиперссылки на ней учитываются (действует по умолчанию);
      • none - заменяет «noindex» и «nofollow», т.е. страница не индексируется и гиперссылки на ней не учитываются.

      Код для вставки мета-тега «robots»:

      Содержимое мета-тега «title»

      Основное содержимое страницы

    • author и copyright - мета-теги, которые позволяют указать авторство и владельца контента на странице. HTML-код для вставки:

      Содержимое мета-тега «title»

      Основное содержимое страницы

    § 5. Заключение

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

    Заголовок страницы

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

    Н а этом раздел моего сайта окончательно закончен и дальше речь пойдёт о том, с чего начать раскрутку и продвижение своего сайта в Интернете. Там же парочка моих советов из личного опыта по оптимизации страниц сайта. Жми на «Дальше».

    Используются для предоставления информации (метаданных) о веб-странице, метаданные не отображаются на веб-странице, а дают либо какие-то указания браузеру, либо предоставляют дополнительную информацию для поисковых систем:

    Не является мета тегом, но должен присутствовать на каждой веб-странице

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

    Примечание: теги должны располагаться в элементе .

    Кодировка

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

    Для указания кодировки используется тег с атрибутом charset, который рекомендуется располагать в качестве первого элемента внутри :

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

    keywords (ключевые слова)

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

    Самый простой способ подобрать нужные ключевые слова для текущей страницы - это определить по каким словам вы сами стали бы искать материал, представленный на ней? Вот это и будут нужные ключевые слова. Пример:

    Ключевые слова указываются через запятую или пробел и могут быть написаны в любом регистре. Рекомендуется указывать не более 10-15 ключевых слов или словосочетаний.

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

    description (краткое описание)

    Значение description используется для краткого описания содержимого, расположенного на текущей странице. Рекомендуемая максимальная длина такого описания не должна превышать 180 символов:

    Краткое описание страницы может быть использовано поисковыми система на странице с результатами поиска под названием страницы и URL-адреса:

    Также краткое описание используется на сайтах некоторых соцсетей, при добавлении ссылки:


    При составлении краткого описания следует учитывать следующие моменты:

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

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

    Тег

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

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


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

    • Длина заголовка не должна превышать 70 символов, включая пробелы.
    • Самые важные ключевые слова нужно располагать первыми в заголовке, т.е. поисковые системы будут определять ценность ключевых слов по их очередности в заголовке: первое будет считаться наиболее важным, последнее - наименее.
    • Для разделения ключевых слов или фраз лучше использовать вертикальную черту "|". Знаки пунктуации, подчеркивания и другие символы разделители желательно не использовать или использовать в тех случаях, когда ключевое слово или фразу без них написать нельзя.
    • Старайтесь исключить из заголовка разные частицы речи (например: и, если, но, потом и т.д.).
    • Можно включить в заголовок название сайта или фирмы, если название является частью ключей фразы, или если это бренд, видя который, пользователи будут заходить именно на ваш сайт.
    • Не дублируйте текст тега , заголовок должен быть уникальным для каждой страницы сайта.
    • Заголовок должен быть актуален для страницы, он должен описывать то, что в данный момент представлено на странице, например его можно написать так:
    Тема страницы|Ключевые слова|Название компании или сайта Ключевые слова|О нас|Название компании или сайта

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

    Основы HTML

    Перед вами краткое руководство по написанию HTML. Многие до сих пор пишут HTML,А используя средства похожие на Notepad или SimpleText. Данное руководство поможет вам получить начальное представление о HTML. Даже если вы не планировали редактировать HTML напрямую, а использовать HTML-редактор, такой как Netscape Composer или FrontPage, данное руководство поможет вам использовать эти средства лучше, а также делать ваши HTML-документы понятными для большинства браузеров. Почувствовав выгоды, которые дает вам знание основ написания HTML, вы, возможно, захотите освоить материал, размещенный в раздел Продвинутый HTML.

    Хороший способ научиться - это посмотреть, как другие люди пишут коды своих HTML-страниц. Для этого выберите в браузере пункт "View" ("Вид"), а затем "Source" ("В виде HTML").

    Данная страница научит вас как:

    • добавлять заголовки и параграфы
    • выделять текст курсивом
    • изменять цвет и размер текста
    • вставлять рисунки
    • создавать ссылки на другие страницы
    • использовать различные виды списков

    Если вы ищете что-то еще, попробуйте Продвинутый HTML

    Добавление заголовков и параграфов

    Если вы пользовались Microsoft Word, вам должно быть хорошо знакомо использование стилей для выделения заголовков по степени важности. В HTML заголовки по степени важности делятся на шесть уровней. Н1 - самый важный, Н2 - чуть менее важен, и, наконец, Н6 - наименее значимый.

    Пример того, как добавить важный заголовок:

    Важный заголовок

    Результат:

    Важный заголовок

    и чуть менее важный:

    Чуть менее важный

    Результат:

    Чуть менее важный

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

    И заканчиваться тэгом

    . Например:

    Это первый параграф.

    А это второй параграф.

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

    Вы можете выделить одно или больше слов, используя тэг , пример:

    Это действительно интересный пункт!

    Результат:

    Это действительно интересный пункт!

    Изменение цвета и размера текста

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

    В этом предложении есть слово , выделенное желтым цветом.

    Результат:

    В этом предложении есть слово выделенное желтым цветом.

    Атрибут size служит для указания размера шрифта в условных единицах от 1 до 7. Принято считать, что размер "нормального" шрифта соответствует числу 3. Размер может быть указан как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2):

    Советы ветеринарного врача

    Результат:

    Советы ветеринарного врача

    Вставка рисунков

    Использование рисунков делает ваши страницы более интересными. Вставить рисунок позволяет тэг . Предположим, что файл рисунка "peter.jpeg", шириной 200 пикселов и высотой 150, лежит в той же папке что и HTML файл.


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

    В WWW используется два формата графических файлов GIF и JPEG. Формат GIF используется, когда требуется прозрачное изображение или анимация, а также для:

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

    Формат JPEG больше подходит в следующих случаях:

    • сканированные изображения
    • графика со сложным сочетанием цветов и оттенков
    • любое изображение с палитрой более чем 256 цветов
    Создание ссылок на другие страницы

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

    Списки

    HTML предлагает три вида списков. Первый вид называется маркированным (неупорядоченным ) списком. Маркированный список открывается тэгом

      , а каждый его пункт начинается стандартным тэгом
    • , пример:

      • первый пункт списка
      • второй пункт списка
      • третий пункт списка

      Результат:

      • первый пункт списка
      • второй пункт списка
      • третий пункт списка

      Второй вид - нумерованный (упорядоченный) список. Он использует тэги и

    • . Пример:

    • первый пункт списка
    • второй пункт списка
    • третий пункт списка
    • Результат:

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

      первый термин его определение второй термин его определение третий термин его определение

      Результат:

      Первый термин его определение второй термин его определение третий термин его определение

      Списки могут быть вложенными, один в другой. Пример:

    • первый пункт списка
    • второй пункт списка
      • первый пункт вложенного списка
      • второй пункт вложенного списка
    • третий пункт списка
    • Результат:

    • первый пункт списка
    • второй пункт списка
      • первый пункт вложенного списка
      • второй пункт вложенного списка
    • третий пункт списка
    • Определение цветов в HTML

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

      FFF
      FFF
      CCC
      CCC
      999
      999
      666
      666
      333
      333
      000
      000
      FFC
      C00
      FF9
      900
      FF6
      600
      FF3
      300
      99C
      C00
      CC9
      900
      FFC
      C33
      FFC
      C66
      FF9
      966
      FF6
      633
      CC3
      300
      CC0
      033
      CCF
      F00
      CCF
      F33
      333
      300
      666
      600
      999
      900
      CCC
      C00
      FFF
      F00
      CC9
      933
      CC6
      633
      330
      000
      660
      000
      990
      000
      CC0
      000
      FF0
      000
      FF3
      366
      FF0
      033
      99F
      F00
      CCF
      F66
      99C
      C33
      666
      633
      999
      933
      CCC
      C33
      FFF
      F33
      996
      600
      993
      300
      663
      333
      993
      333
      CC3
      333
      FF3
      333
      CC3
      366
      FF6
      699
      FF0
      066
      66F
      F00
      99F
      F66
      66C
      C33
      669
      900
      999
      966
      CCC
      C66
      FFF
      F66
      996
      633
      663
      300
      996
      666
      CC6
      666
      FF6
      666
      990
      033
      CC3
      399
      FF6
      6CC
      FF0
      099
      33F
      F00
      66F
      F33
      339
      900
      66C
      C00
      99F
      F33
      CCC
      C99
      FFF
      F99
      CC9
      966
      CC6
      600
      CC9
      999
      FF9
      999
      FF3
      399
      CC0
      066
      990
      066
      FF3
      3CC
      FF0
      0CC
      00C
      C00
      33C
      C00
      336
      600
      669
      933
      99C
      C66
      CCF
      F99
      FFF
      FCC
      FFC
      C99
      FF9
      933
      FFC
      CCC
      FF9
      9CC
      CC6
      699
      993
      366
      660
      033
      CC0
      099
      330
      033
      33C
      C33
      66C
      C66
      00F
      F00
      33F
      F33
      66F
      F66
      99F
      F99
      CCF
      FCC
      CC9
      9CC
      996
      699
      993
      399
      990
      099
      663
      366
      660
      066
      006
      600
      336
      633
      009
      900
      339
      933
      669
      966
      99C
      C99
      FFC
      CFF
      FF9
      9FF
      FF6
      6FF
      FF3
      3FF
      FF0
      0FF
      CC6
      6CC
      CC3
      3CC
      003
      300
      00C
      C33
      006
      633
      339
      966
      66C
      C99
      99F
      FCC
      CCF
      FFF
      339
      9FF
      99C
      CFF
      CCC
      CFF
      CC9
      9FF
      996
      6CC
      663
      399
      330
      066
      990
      0CC
      CC0
      0CC
      00F
      F33
      33F
      F66
      009
      933
      00C
      C66
      33F
      F99
      99F
      FFF
      99C
      CCC
      006
      6CC
      669
      9CC
      999
      9FF
      999
      9CC
      993
      3FF
      660
      0CC
      660
      099
      CC3
      3FF
      CC0
      0FF
      00F
      F66
      66F
      F99
      33C
      C66
      009
      966
      66F
      FFF
      66C
      CCC
      669
      999
      003
      366
      336
      699
      666
      6FF
      666
      6CC
      666
      699
      330
      099
      993
      3CC
      CC6
      6FF
      990
      0FF
      00F
      F99
      66F
      FCC
      33C
      C99
      33F
      FFF
      33C
      CCC
      339
      999
      336
      666
      006
      699
      003
      399
      333
      3FF
      333
      3CC
      333
      399
      333
      366
      663
      3CC
      996
      6FF
      660
      0FF
      00F
      FCC
      33F
      FCC
      00F
      FFF
      00C
      CCC
      009
      999
      006
      666
      003
      333
      339
      9CC
      336
      6CC
      000
      0FF
      000
      0CC
      000
      099
      000
      066
      000
      033
      663
      3FF
      330
      0FF
      00C
      C99
      009
      9CC
      33C
      CFF
      66C
      CFF
      669
      9FF
      336
      6FF
      003
      3CC
      330
      0CC
      00C
      CFF
      009
      9FF
      006
      6FF
      003
      3FF

      Для простоты в HTML определены 16 стандартных цветов, которые вместе с их шестнадцатиричными кодами приведены ниже.

      black = "#000000" green = "#008000"
      silver = "#C0C0C0" lime = "#00FF00"
      gray = "#808080" olive = "#808000"
      white = "#FFFFFF" yellow = "#FFFF00"
      maroon = "#800000" navy = "#000080"
      red = "#FF0000" blue = "#0000FF"
      purple = "#800080" teal = "#008080"
      fuchsia = "#FF00FF" aqua = "#00FFFF"
      Статьи по теме: