Внимание! Данная статья является моей авторской. Поэтому, если вы хотите разместить ее где-то, то активная ссылка на нее является ОБЯЗАТЕЛЬНОЙ.
Кроме того я буду писать продолжение, так, что заглядывайте. Многие из нас имеют блоги, кто-то решает завести блог впервые и вот там-то мы все и сталкиваемся с тем, что привычный на форуме код там не работает. В блогах тоже есть кнопочки для вставки изображений и ссылок, но не всегда понятно где они находятся. А код многих пугает, т.к. совершенно непонятно, что это за буковки и знаки. Для того чтобы не бояться я решила написать обзорную статью, которую буду постепенно дополнять. Чтобы все мы понимали, что такое HTML код и «с чем его едят».
Итак, начну издалека. Хочу вам сказать, что сайты, такие красивые, подмигиваеющие нам баннерами и пестрящие картинками, на самом деле изначально выглядят примерно вот так:
А когда мы открываем сайт то видим вот эту билеберду в таком виде
Почему же так происходит? Дело в том, что сайты изначально и пишутся вот этими закорючками, которые называются HTML - Hypertext Markup Language или говоря по русски язык гипертекстовой разметки. Бывают сайты программируемые. Там применяется язык программирования – в основном это PHP. В PHP все еще более запущено чем в HTML и его мы рассматривать не будем.
Почему же мы видим не закорючки, а красивые сайты? А потому что мы смотрим на них через программы интерпретаторы. Тоесть вот эти все Microsoft Internet Explorer, Mozilla Firefox, Opera и т.д. как раз и являются такими интерпретаторами, грамотно называемыми браузер (от англ. Browser – обозреватель).
А теперь давайте разберемся, каким макаром браузер это все безобразие интерпретирует.
Давайте вспомним Microsoft Word – текстовый редактор, которым мы в той или иной степени все пользуемся. Когда мы набираем текст в Ворде, то он изначально набирается одинаковым шрифтом, никак не выделяясь. Для того, чтобы выделить какое-то слово или предложение, мы выделяем нужное и жмем на кнопочки Ж, К и т.д. В результате получаем текст полужирным начератнием, курсивом, другим цветом и т.д.
В случае с браузером все несколько сложнее. Кнопочек у него нет. И чтобы он понял, что текст нужно сделать полужирным или курсивом или другим цветом и т.д. – браузеру в письменной форме нужно отдать соответственную команду.
По сути, HTML является набором команд для браузера. Называются они – тэги. Пишутся все теги вот в таких скобках <>. Тэги в основном, за небольшим исключением парные – открывающий и закрывающий тэг. Открывающий тэг пишется просто в таких кавычках. Закрывающему еще добавляют слеш
Как это выглядит. Для того чтобы браузер сделал текст полужирным, мы выделяем нужный отрывок тэгами
Code
<b>полужирный текст</b>
получаем полужирный текст.
Первый тег b без слеша открывающий, второй со слешем – закрывающий. Чтобы сделать текст курсивом - применяем тег
Code
<i>текст курсивом</i>
Получаем текст курсивом Тэг, позволяющий выводить текст подчеркнутым
Получаем подчеркнутый тект Тэг, позволяющий выводить текст перечеркнутым
Получаем зачеркнутый тект Тэг, позволяющий выводить текст шрифтом больше базового
Получаем увеличенный текст Тэг, позволяющий выводить текст шрифтом меньше базового
Code
<small>уменьшить</small>
Получаем уменьшенный текст Тэг, позволяющий выводить текст как нижний индекс (со смещением вниз от базовой линии).
Code
<sub>нижний индекс</sub>
Получаем нижний индекс Тэг, позволяющий выводить текст как верхний индекс (со смещением вверх от базовой линии).
Code
<sup>верхний индекс</sup>
Получаем верхний индекс Соблюдаем иерархию
Бывает так, что нам нужно выделить текст одновременно и курсивом и полужирным начертанием. Для этого применяем сразу два тэга - тэг b и тэг i. И в этом случае важно знать о иерархии написания тэгов. В общем иерархия напоминает матрешку.
Тэги должны быть полностью вложенными друг в друга
Как это выглядит
Code
<тэг1> ... <тэг2> ... </тэг2> ...</тэг1>
Тоесть чтобы сделать текст полужирным курсивом нужно его выделить тэгами вот так:
Code
<b><i>полужирный курсив</i></b>
Получаем полужирный курсив Абзац
Если мы пишем много текста, будет грамотно разделить его на абзацы.
Тэг p создает абзац в документе.
<p>этот текст будет выделен в отдельный абзац</p>
