Страшный-нестрашный HTML код

Внимание! Данная статья является моей авторской. Я долго ее разжевывала для того, чтобы было понятно, поэтому, если вы хотите разместить ее где-то, то активная ссылка на нее является ОБЯЗАТЕЛЬНОЙ.

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

Многие из нас, привыкшие к форумам , решившие завести блог впервые сталкиваются с тем, что привычный на форуме код там не работает. В блогах тоже есть кнопочки для вставки изображений и ссылок, но не всегда понятно где они находятся. А код многих пугает, т.к. совершенно непонятно, что это за буковки и знаки. Для того чтобы новички не боялись, я решила написать обзорную статью, которую буду постепенно дополнять. Чтобы все понимали, что такое HTML код и «с чем его едят».

Итак, начну издалека. Хочу вам сказать, что сайты, такие красивые, подмигиваеющие нам баннерами и пестрящие картинками, на самом деле изначально выглядят примерно вот так:

А когда мы открываем сайт то видим вот эту билеберду в таком виде

Почему же так происходит? Дело в том, что сайты изначально и пишутся вот этими закорючками, которые называются HTML - Hypertext Markup Language или говоря по русски язык гипертекстовой разметки. Бывают сайты программируемые. Там применяется язык программирования – в основном это PHP. В PHP все еще более запущено чем в HTML и его мы рассматривать не будем.

Почему же мы видим не закорючки, а красивые сайты? А потому что мы смотрим на них через программы интерпретаторы. Тоесть вот эти все Microsoft Internet Explorer, Mozilla Firefox, Opera и т.д. как раз и являются такими интерпретаторами, грамотно называемыми браузер (от англ. Browser – обозреватель).

А теперь давайте разберемся, каким макаром браузер это все безобразие интерпретирует.

Давайте вспомним Microsoft Word – текстовый редактор, которым мы в той или иной степени все пользуемся. Когда мы набираем текст в Ворде, то он изначально набирается одинаковым шрифтом, никак не выделяясь. Для того, чтобы выделить какое-то слово или предложение, мы выделяем нужное и жмем на кнопочки Ж, К и т.д. В результате получаем текст полужирным начератнием, курсивом, другим цветом и т.д.

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

По сути, HTML является набором команд для браузера. Называются они – тэги. Пишутся все теги вот в таких скобках <>. Тэги в основном, за небольшим исключением парные – открывающий и закрывающий тэг. Открывающий тэг пишется просто в таких скобках <>. Закрывающему еще добавляют слеш </тэг > .

Как это выглядит. Для того чтобы браузер сделал текст полужирным, мы выделяем нужный отрывок тэгами <b>полужирный текст</b>. Первый тег b без слеша открывающий, второй со слешем – закрывающий.
Получаем полужирный

Чтобы сделать текст курсивом - применяем тег <i>текст курсивом</i>

Получаем текст курсивом

Тэги, позволяющие выводить текст подчеркнутым <u>подчеркнуть</u>
Получаем подчеркнуть

Тэги, позволяющие выводить текст перечеркнутым <s>зачеркнуть</s>
Получаем зачеркнуть

Тэги, позволяющие выводить текст шрифтом больше базового <big>увеличить</big>
Получаем увеличить

Тэги, позволяющие выводить текст шрифтом меньше базового <small>уменьшить</small>
Получаем уменьшить

Тэги, позволяющие выводить текст как нижний индекс (со смещением вниз от базовой линии). <sub>нижний индекс</sub>
Получаем _{нижний индекс}

Тэги, позволяющие выводить текст как верхний индекс (со смещением вверх от базовой линии). <sup>верхний индекс</sup>
Получаем ^{верхний индекс}

Соблюдаем иерархию

Бывает так, что нам нужно выделить текст одновременно и курсивом и полужирным начертанием. Для этого применяем сразу два тэга - тэг b и тэг i. И в этом случае важно знать о иерархии написания тэгов. В общем иерархия напоминает матрешку.

Тэги должны быть полностью вложенными друг в друга

Как это выглядит
<тэг1> ... <тэг2> ... </тэг2> ... </тэг1>

Тоесть чтобы сделать текст полужирным курсивом нужно его выделить тэгами вот так: <b><i>полужирный курсив</i></b>
Получаем полужирный курсив

Абзац

Если мы пишем много текста, будет грамотно разделить его на абзацы.

Тэг p создает абзац в документе.
<p>этот текст будет выделен в отдельный абзац</p>

Продолжение следует…