Примеры тегов в html. Что такое теги HTML и какие виды тегов существуют

Человек не может жить одними словами,
в каком бы количестве он их ни проглатывал.
Эдлай Стивенсон.

В ообще-то, язык HTML не является языком программирования. Это язык разметки гипертекста (HyperText Markup Language). Т. е. называть его «языком HTML» не верно.

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

О ни отображают только отформатированный текст и скрывают теги HTML , которые применялись для форматирования. Чтобы тебе было понятней, о чем я говорю, щелкни правой кнопкой мыши по этой странице и в открывшемся меню выбери пункт «Исходный код» или что-то подобное. Перед тобой откроется эта страница в своём настоящем виде.


С оздавать код HTML можно как в обычных , так и использовать специальные программы, так называемые . Визуальные редакторы отличаются от текстовых тем, что заточены под набор кода HTML, CSS, JavaScript, PHP и др., т. е. под web-программирование. Кроме того, они позволяют сразу же просмотреть плоды своих трудов во встроенном браузере и подсвечивают некоторые ошибки в набранном коде.

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

Я поступаю так: набираю код в Dreamweaver, затем сохраняю и нажимаю кнопку «Просмотр в браузере» (список браузеров в этом меню ты редактируешь сам), после возвращаюсь в Dreamweaver и продолжаю редактирование. Здесь . Это то, что касается инструментов, теперь перейдём непосредственно к тегам HTML.

Н ачнём со строения html-страницы, вернее с её основных тегов.

Обязательные теги HTML-страницы

К обязательным (основным) тегам HTML, которые используются в каждом html-документе, относятся следующие:

Примечание. Для того, чтобы браузер выводил код HTML как текст (не интерпретировал его в код), после каждой открывающей угловой скобки «» я оставляю пробел. Ты, когда будешь набирать код, пробелы НЕ ОСТАВЛЯЙ .

К ак видишь, все теги парные (есть открывающий тег и закрывающий), в HTML почти все теги такие. Отличаются открывающий тег от закрывающего тем, что перед закрывающим стоит косая черта «/ ». Такие теги ещё называют контейнерными , потому что между ними можно вставить другие теги, т.е. поместить в контейнер. Ты и сам можешь видеть, что между тегами и находятся другие теги.

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

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

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

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

О сновное содержимое html-документа располагается между тегами и . Здесь находится всё, что мы видим, когда открываем html-страницу: текст, графика, меню, кнопочки и т. д. Это основное «тело» страницы.

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

То фон всей страницы будет красным.

З десь тег - это, собственно, тег; bgcolor - его атрибут; "#FF0000" - значение атрибута (у тега может быть несколько атрибутов).

Примечание. Все атрибуты тега и их значения указываются в открывающем теге (тот, который без косой черты), но ни в коем случае не в закрывающем.

И так, мы разобрались с основными тегами html-документа. Теперь настало время более подробно изучить остальные. Здесь я хочу сделать небольшое отступление.

Как я предлагаю изучать HTML

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

Т . е. сначала рассматриваются теги заголовка html-документа (, а потом теги «тела» ().

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

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

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

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


Основные html теги — это та база, на которой строится практически любой сайт/блог. Из этой статьи Вы узнаете именно те 20% тегов, которые Вам будут необходимы всегда.

Как в любом языке, да и в здесь действует правило парето 20/80 (20% дел имеет 80% важности для достижения нужного результата), что означает — достаточно знать всего 20% кодов, чтобы уверенно достигать своих целей в сайтостроении.

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

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

Итак приступим. Писать коды лучше в блокноте, который входит в стандартные программы операционной системы Windows или в бесплатной программе «Notepad + +».

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

HTML теги для создания каркаса сайта

Теги бывают парные и не парные. Парные открываются и закрываются, т.е в закрывающихся присутствует обратный слеш «/».

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