Основы HTML. Теги и атрибуты

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

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

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

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

Тег - это инструкция, которая укажет браузеру, какой блок нарисовать и, возможно, в каком месте и каким стилем его вывести, но второе утверждение принято выносить в CSS.  Тег это служебная инструкция размещенная между символами меньше (<) больше (>). Теги могут быть открывающимися и закрывающимися. Например: <div> - открывающий тег, </div> - закрывающий тег. Открывающий тег указывает на начало какого либо блока, а закрывающий — на завершение этого блока.

Атрибут — это уточнение для браузеров, как поточнее нарисовать тег, атрибуты описываются внутри открывающего тега в виде коллекции имя="значение". Например: <div class="header">.

Есть несколько спецификаций (по другому версий) языка HTML. Различаются они правилами описания тегов и атрибутов, а также, набором поддерживаемых тегов и атрибутов.  На данный момент активнее всего используется HTML версии 4.01 и XHTML 1.0. Активно ведется разработка HTML 5.0 и XHTML 2.0.

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

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

  • <html> — начало документа HTML. Должен находится в начале документа, или сразу после указания DOCTYPE.
  • <head> — заголовок документа, это невидимый элемент в котором помещается служебная информация: заголовок, ссылки на подключение CSS и JavaScript файлов, ключевые слова, описание документа.
  • <title> — заголовок страницы, текст который будет выведен в заголовке браузера.
  • <link> — с помощью данного тега можно подключить CSS файлы.
  • <body> — тело документа. Отсюда начнется отображение (рендеринг) блоков.
  • <div> — прямоугольный блок.
  • <table> — таблица.
  • <tr> — строка в таблице.
  • <td> — ячейка в таблице.
  • <a> — ссылка на другой документ либо веб-сайт.
  • <p> — абзац тектста.
  • <input> — элемент ввода.
  • <span> — небольшой текст.

Полный список тегов и их атрибутов можно найти на сайте HTML Book.

Каждый тег может быть расширен атрибутами. Некоторые теги вообще бессмысленны, если в них не указаны атрибуты. Как, например, тег <a>, если в нем не указать атрибут href, то использование данного тега будет бессмысленно, так как не будет указано, на какой документ (либо вебсайт)  ведет ссылка.

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


Изучение HTML можно освоить на ноутбуках apple. А цены можно узнать на этом сайте.


Категории: Верстка, HTML, CSS  Теги: ,
  1. Трэкбеков пока нет.
  1. Антон
    30 апреля 2010 14:02 | №1

    Да, таких знаний будет вполне достаточно для построения простейшей страницы.

    Начинал знакомиться с html именно с этих тегов, как и у все впринципе. ^_^

  2. 12 августа 2010 11:50 | №2

    Я когда начинал, делал простой сайт, по простым уроком. Все было понятно. Но о дивах и css и речи не могло быть, так как при всем желании не понимал как оно и что оно. Потом со временем дошло :D и после просмотра некоторых видеоуроков. И да, HTML Book во многом и сейчас помогает.

    Я бы еще добавил такие распространенные теги как <b>, <i>.

  3. 15 августа 2010 10:36 | №3

    Обязательно добавлю описание всех распостраненных тегов

  4. Frozik
    17 августа 2010 15:34 | №4

    HTML содержит ограниченный набор тегов, выучить их несложно

    Серёга, да ты оптимист :-)

  5. 17 августа 2010 15:58 | №5

    То есть ты хочешь сказать, что их дофига и выучить сложно? Я с тобой не согласен самих тегов немного, а вот поведение браузеров при их стыковке, тут уже другой вопрос :)

:D :) ^_^ :( :o 8) ;-( :lol: xD :wink: :evil: :p :whistle: :woot: :sleep: =] :sick: :straight: :ninja: :love: :kiss: :angel: :bandit: :alien: