Blogger: Структура языка HTML (приложение к статье о расширяемых сообщениях).

Сто одежек и все без застежек...

Здравствуйте! Сегодня мы с вами будем говорить не о капусте, которая богата витаминами и хорошо хранится, вкусна приготовленная сотнями разных способов и т.д.

Капуста пришла мне в голову только в качестве ассоциации с темой о которой я сегодня хочу побеседовать. А говорить мы сегодня с вами будем о структуре языка разметки страниц HTML.

Это небольшое разъяснение структуры языка Html оказалось совершенно необходимым приложением к статье Blogger: Улучшенные расширяемые сообщения (Убираем под кат), потому что у многих читателей возникли проблемы как правильно поставить теги начала и конца "спрятанной области" поста.

Я получила массу вопросов на тему, почему у меня не работает. Любовь (Путь к себе), просто пообещала меня замучить если я не скажу где почитать как во всем этом (а всем этим оказался Html) разобраться. Так что не желая быть замученной, я написала эту статью.

Когда я думаю о языке Html, у меня всегда возникает перед глазами образ коробочек, ну, даже не совсем коробочек, а таких коробок из под шляп вложенных друг в друга. Готовую картинку с коробками я не нашла, пришлось Кайлу нарисовать вот такой вид сверху всего этого набора коробок и коробочек. Да, а еще я забыла попросить Кайла разместить в этих коробках несколько игрушек: машинку, например, или куколку... (Придется нам напрячь воображение и их представить самостоятельно). А вот это собственно наши коробки:

Давайте я поясню что есть что на картинке... Каждая коробочка - это область нашего Html-документа, наделенная определенными свойствами (например, свойство области быть ссылкой, или быть выровненным по левому краю абзацем, или быть областью с буквами синего цвета и т.д.). Эти области, как и коробочки пересекаться не могут. Одна область может только ЦЕЛИКОМ попадать внутрь другой. Что до не нарисованных игрушек - это были бы так называемые одиночные теги их на самом деле очень немного: картинки, разрыв линии - это пожалуй и все что вы сможете встретить в Html-коде вашей статьи.

Теперь несколько формальных слов:

1) Язык Html состоит из элементов разметки, которые называются тегами.
2) Теги заключаются в угловые скобки < >
3) Имя_тега это одна или больше латинских букв.
4) Теги бывают как правило парные (для описания коробочек со свойствами), но иногда одиночными.
5) Парные теги состоят из двух частей открывающего тега и закрывающего.
Открывающий тег выглядит так: <имя_тега атрибуты>
а соответствующий закрывающий будет выглядеть так: </имя_тега>
6) Одиночный тег будет записан вот так <имя_тега атрибуты /> (Специалистам: слэш перед закрывающей угловой скобкой в одиночном теге не обязателен, он не является требованием языка HTML, а его требует развитие языка XML, который используется в Blogger).

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

div (парный) - определение блока в документе
span (парный) - определение области в документе
p (парный) - параграф
center (парный) - выровнять блок по центру
b (парный) - выделенный полужирным шрифтом
strong (парный) - выделенный (как правило полужирным шрифтом)
a (парный) - ссылка
img (одиночный) - рисунок
br (одиночный) - признак новой строки
object (парный) - может появится если вы вставляете видео в вашу статью
embed (парный) - может появится если вы вставляете видео в вашу статью
parm (одиночный) - может появится если вы вставляете видео в вашу статью

Не забываем нашу модель с коробочками: две коробочки могут быть рядом друг с другом или вложены одна в другую.

На этой иллюстрации наглядно видно как могут размещаться по отношению друг к другу открывающие и закрывающие теги из примера с коробочками:

Парные открывающий - закрывающий тег на рисунке линии одного цвета.

Я надеюсь, что идея со взаимным расположением парных тегов в Html-коде должна быть ясна.

Теперь, двигаясь дальше, нам надо в Html-код статьи вставить теги описывающие "спрятанную" область. Спрятанную область мы описываем вот таким парным тегом span : <span class="fulltext"> и </span>

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

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

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

Точками мы покажем, что между этими парными тегами в статье что-то находится: буквы какие-нибудь или одиночные теги.

А фигурными скобками { } мы будем обозначать: начало и конец спрятанной/спрятанных областей.

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

1) Самый простой случай - никакого форматирования в статье не наблюдается - не улыбайтесь - это не так уж редко.

Вот как задача выглядит на схеме:

...............{.........................

а вот и решение:

...............{.........................}

2) Вся статья бывает заключена внутри одного парного тега. Это бывает, например, когда вы написали статью, а потом к ней всей применили выравнивание по ширине, например:

Вот как задача выглядит на схеме:

[...............{.........................]

а вот и решение:

[...............{.........................}]{}

В общем все остальные случаи можно свести к этим двум, но мы порассматриваем несколько схемок еще:

3) В статье много парных тегов форматирования, тут и параграфы и выделение цветом и выравнивание:

Вот как задача выглядит на схеме:

.......[...[........]]......[.{....].......[...[....]....]....[[[.....]....].....].............

а вот и решение:

.......[...[........]]......[.{....}]{.......[...[....]....]....[[[.....]....].....].............}

4) Давайте рассмотрим тоже самое форматирование, но предположим, что еще и вся статья была заключена в какой-то парный тег.

Вот как задача выглядит на схеме:

[.......[...[........]]......[.{....].......[...[....]....]....[[[.....]....].....].............]

а вот и решение:

[.......[...[........]]......[.{....}]{.......[...[....]....]....[[[.....]....].....].............}]{}

5) А если схема статьи выглядит так:

[.....[.......[.....[........{......]]........]..[....[.................]...........]...............]

Что будем делать? ;)

Задание на дом. Исключительно для тех кто хочет разобраться со структурой Html и применять у себя в блоге на Blogspot новый улучшенный алгоритм создания расширяемых статей или убирания части статьи под кат:

1) Прочитайте статью не торопясь столько раз сколько вам потребуется чтобы понять хотя бы половину.
2) Войдите в редактирование своей статьи, перейдите в режим Изменить Html и посмотрите:
а) какие теги используются в Html-коде вашей статьи. На атрибуты внимание не обращаем: т.е. смотрим на имя_тега и игнорируем всё последующее до закрывающей угловой скобки >
б) какие из тегов парные, а какие одиночные.
в) попробуйте проследить как парные теги вкладываются друг в друга, можно даже нарисовать схемку вашей статьи.
г) возможно, вы заметили два тега открывающий и закрывающий идут подряд и между ними ничего нет... Странно? Да, нет - бывает. Их (эту пару) можно безболезненно удалить.
3) Кто уже пользуется улучшенным алгоритмом "Читать далее..." вставьте в вашу статью теги для определения спрятанной области: <span class="fulltext">, </span> возможно у вас получится несколько спрятанных областей.
4) Если есть желание решите задачку 5 и напишите в комментарии ваше решение.
5) Чтобы расширить свои познания в Html и познакомится с другими тегами, которые вы сможете использовать в дальнейшем, рекомендую заглянуть вот сюда: htmlbook для тех кто делает сайты.
6) А если вы еще не читали здесь: Blogger: Начала HTML - Ссылки! мы подробнейшим образом рассматривали наверное самый важный тег в Html - a.

Всем здоровья и удачи!
Ешьте побольше капусты - там много витаминов!

Света
Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...