теги html Как создать свой сайт > Основы HTML > Руководство по HTML > Основные теги HTML

Основные теги HTML

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

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

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

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


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

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

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

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

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

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

< HTML >

< HEAD>< /HEAD>

< BODY>< /BODY>

< /HTML >

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

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

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

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

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

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

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

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

< BODY bgcolor="#FF0000">< /BODY>

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

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

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

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

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

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

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

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

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

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

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

К содержанию     Дальше

⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

Полезные ссылки:

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

Ещё материалы по этой теме:

заработок в интернете заработать в интернете деньги смена алгоритма яндекс покупка ссылок навсегда html теги текст
основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!