1.3.09

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

13 comments

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


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

Капуста пришла мне в голову только в качестве ассоциации с темой о которой я сегодня хочу побеседовать. А говорить мы сегодня с вами будем о структуре языка разметки страниц 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.

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


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

13 комментариев:

  1. Света,спасибо Вам большое за Ваш блог!

    ОтветитьУдалить
  2. Наденька, вам спасибо!

    Появятся вопросы - спрашивайте!

    Удачи!
    Света

    ОтветитьУдалить
  3. Спасибо, Аида! :)))

    Мы с Кайлом стараемся!
    Света

    ОтветитьУдалить
  4. Очень интересное объяснение. Особенно понравилось идея объяснить с "коробочками". Как то все стало просто (как минимум представить) для ребенка.

    ОтветитьУдалить
  5. Спасибо, Русик (младший)!

    Ваша похвала особенно ценна для меня!!! :)))

    Заходите еще!
    Света

    ОтветитьУдалить
  6. Здавствуйте ещё раз,такой вопросик,если я поменю адрес блога мои подпищики будутполучать уведомления?+будут ли они перенаправлятся со стаорогоадреса на новый?

    ОтветитьУдалить
  7. Здравствуйте, Лёня (bar-b-q)!

    У меня сразу несколько вопросов:
    "если я поменю адрес блога" - купите доменное имя или возьмете другой адрес на Blogspot'е?

    "подпищики" - а через какой сервис они подписаны?

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

    В общем, все зависит. Кстати, можно обсудить это и на Russian Blogger Help Group - там народ умный собрался!

    Удачи во всем!
    Света

    ОтветитьУдалить
  8. Все прочитала, но не разобралась.Только про коробочки поняла :)

    ОтветитьУдалить
  9. А тут про коробочки - это самое главное, Сладкоежка! ;)))

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

    У вас в блоге все и так замечательно без расширяемых постов, но если возникнут вопросы - спрашивайте!

    Удачи во всем,
    Света

    ОтветитьУдалить
  10. Здравствуйте Светлана, извините если я напишу не в той теме. У меня такой вопрос можно ли сделать номерацию страниц-т.е. 12345...... И по поводу фавикона я отправил 2 сообщения во втором говорилось что было сделано не правильно с моей стороны....

    ОтветитьУдалить
  11. Можно, Fusesound!

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

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

    Удачи во всем!
    Света

    ОтветитьУдалить
  12. Спасибо за материал. Поясните, пожалуйста вот этот момент:"Вся статья бывает заключена внутри одного парного тега. Это бывает, например, когда вы написали статью, а потом к ней всей применили выравнивание по ширине, например:"

    Я так делаю. Это неправильно? Что это действие нарушает в структуре и как исправить? Я только-только начинаю вникать в html. Благодарю заранее.

    ОтветитьУдалить

Популярные сообщения