29.3.09

Blogger: А как Ваш блог выглядит в браузере IE8?

25 comments

И вечный бой!
Покой нам только снится...


Всем доброго времени суток! Пожалуйста, не пугайтесь, речь всего лишь пойдет о так называемой войне браузеров. Страшном кошмарном сне настоящих веб-дизанеров, а что до нас - простых блоггеров, по большому счету мы её не касаемся используя в основном уже кем-то созданные шаблоны для наших блогов. И тем не менее...

На ратное поле Войны браузеров вышел новый игрок - Internet Explorer 8 (IE 8). Кайл будучи очень креативным человеком тут же его к себе на ноутбук и устновил, в основном в ознакомительных целях. Очень меня там порадовала опция совместимости с Интернет Эксплорером 7. Т.е. если вы зашли на сайт, а его сайт т.е. перекосило нажимаем кнопочку, глядишь и все выравнивается. Наш сайт "Windows to Russia - The Russian Blog!" почти не перекосило, ну, так чуть-чуть, в одном месте только. И стал Кайл разбираться как сделать, чтобы сайт в IE8 выглядел также как в IE7, т.е. неперекошенным. И дошел Кайл до вот этой простой строчки:
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

А ставить её надо в ПОСЛЕ строчки <head>

А знаете ли вы, что в интернете есть сервис, где можно проверить как ваш блог будет выглядеть на той или иной операционной системе в том или ином браузере и даже в том или этом разрешении?

Я имею в виду, конечно, BrowserShots.

Работать, с сервисом достаточно просто. Вводим адрес блога и ждем... иногда долго, помним, что они страничка с результатами запроса действительна только 30 минут, поэтому пока ждем время от времени нажимаем на кнопочку Extend

Желающие могут посмотреть скриншоты нашей работы с этим сервисом.

В этой статье мы показываем для желающих картинки с помощью javascript'а описанного в статье: Blogger: Расширяемые Посты на JavaScript!.

Из новостей одной строкой: Прокофьевна (Удалили нечаянно блог?) открыла, что Blogger стал более заботливым. Теперь если заглянуть на Панель управления можно заметить, что Blogger предлагает возможность восстановить недавно удаленные блоги.

Правда, мой с такими трудами восстановленный блог "Russian Video from Russia!" они восстановить не предложили (давно же я его так неудачно удалила). А эпопею как мы его удачно восстановили (собственно после этого и пришла идея завести этот блог), можно прочитать здесь: Как восстановить удаленный блог на BLOGSPOT(Blogger)?

На этой оптимистичной ноте, что все меняется к лучшему по крайней мере у нас на Blogger'e я откланиваюсь.

Всем удачи и счастья!
СветаBlogger: кошка.

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

19.3.09

Blogger: Гугл и Яндекс проиндексировали все расширения в сообщении!

29 comments


Здравствуйте! Как вы наверное догадались в нашем маленьком состязании, которое состоялось вчера, Google вышел абсолютным победителем! Он нашел все три слова из трех предложенных!

Напомню еще раз об условиях состязания: В своей прошлой статье (Blogger: Индексирует ли Google спрятанное по кат?) я загадала три слова, которые никогда прежде не использовала в этом блоге и может быть никогда использовать не буду. Прятала я различные слова под кат различными способами и Google нашел и проиндексировал их все! Проверила я это с помощью запросов к Google использовала в запросах слова света кайл и искомое слово. Предъявляю результаты.

1) Слово на этой картинке было спрятано под недружественный JavaScript-кат (Blogger: Расширяемые Посты на JavaScript):
Blogger Experiment: Google found word #1
2) Слово на этой картинке было спрятано под дружественный JavaScript-кат (Blogger: Расширяемые Посты на JavaScript):
Blogger Experiment: Google found word #2
3) Слово на этой картинке было спрятано под кат с переадресацией на страницу поста (Blogger: Улучшенные расширяемые сообщения (Убираем под кат)):
Blogger Experiment: Google found word #3
Выводы и наблюдения:


1) Эксперимент закончился очень удачно. Кстати, Яндекс тоже нашел все три слова, но чтобы это проверить мне пришлось в запросах поменять слово света на слово blogger (все-таки о нем я в основном и пишу).

2) Не обошлось и без небольшого казуса: При первом сохранении статьи еще с английским названием (зачем я это делаю можно прочитать здесь: Blogger-SEO: Меняем заголовок статьи!) я немножко ошиблась в javascript'е - ну, как же такой гуру должен писать все по памяти lol (не взяла имя переменной в апострофы) и Google налету (не успела я даже сменить заголовок) проиндексировал блог и не увидел там под катами ничего, хотя все слова там были.. но каты действительно не работали - вот он их и не проиндексировал. Заглянул ко мне потом часа через 3 и вот тогда уже я с облегчением увидела, что все слова он нашел.

3) Про "недружественный" JavaScript-кат. Я рада, что Google и Яндекс все внутри проиндексировали. Google-Reader тоже показывает все спрятанные куски, а вот при рассылке по email'у содержимое из-под недружественного JavaScript-ката показано не было так же как и в Яндекс ленте (хотя в исходном коде странице оно было, просто не отображалось), все остальное содержимое было показано целиком.

4) Кат с переадресацией на страницу поста в выдаче Google получил целых две страницы в выдаче: главную страницу блога и страницу самого поста.

На этом мои наблюдения заканчиваются. Если вы что-то еще заметили, буду очень рада если вы с нами поделитесь.

И на последок: Заглавная картинка этой статьи заслуживает отдельного упоминания. Уже несколько лет компания Google проводит весной конкурс "Doodle 4 Google" (Намалюй для Гугла). И вот на этой страничке сверху мы видим рисунок прошлогодней победительницы этого конкурса - 12-летней Grace Moon школьницы из Калифорнии (жалко, что они проводят этот конкурс только для американских детишек). Страничка конкурса находится по адресу: http://www.google.com/doodle4google, а там есть интересное прошлогоднее видео, показывающее как это все у них проходило.

Всем удачи и весеннего настроения!
Света
Blogger: кошка.

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

18.3.09

Blogger: Индексирует ли Google спрятанное по кат?

Здравствуйте! Этот пост является чисто экспериментальным. Мы уже много разговаривали о расширяемых сообщениях:
1) Blogger: Улучшенные расширяемые сообщения (Убираем под кат)!
2) Blogger: Расширяемые Посты на JavaScript!

и даже собираемся этот разговор продолжить.

А вот вчера Алексей aka Бродячий Проповедник ("Путь Бродячего Проповедника")... Кстати, а вы знаете что значит aka? Я вот узнала несколько месяцев назад aka - это английская аббревиатура для also known as, что можно перевести как также известный как. Да, так о Бродячем Проповеднике, вчера он задал в комментарии к предыдущей статье архиважный вопрос: Интересно, а индексирует ли Google, то что мы прячем под катом?

Вопрос интересный и на мой взгляд очень важный, а то так спрячешь что-нибудь, а потом никто никогда этого уже не найдет. Так что проведем эксперимент. А чтобы никто не помешал уважаемому Google'у думать, комментарии для этой статьи я убрала. (Результат эксперимента смотрим здесь.)

Эксперимент:

В этой статье будет использовано 3 способа прятать часть контента (содержимого статьи) под катом. Каждая часть будет содержать свое уникальное слово, по которому мы в дальнейшем решать проиндексировал ли Google этот кусок поста.

1) Недружественный JavaScript-кат. Как вы помните этот JavaScript-кат делает информацию недоступной для людей без поддержки javascript, для RSS-ридера и теперь посмотрим как к ней отнесется Google. Итак, смотрим первое слово - кликаем сюда (кстати, эта псевдоссылка разворачивает и сворачивает спрятанную информацию):


2) Дружественный JavaScript-кат. С ним на самом деле уже все ясно, он дружественный для читателей с выключенным javascript'ом, для RSS-ридера и вчера я установила, что Google индексирует заключенную под такой кат информацию. Но для полноты картины спрячу и здесь чего-нибудь. Кликаем сюда чтобы посмотреть, только Google'у не подсказывайте:

3) Кат с переадресацией на страницу поста. Пишется на CSS с условием.(Если вы находитесь на странице сообщения ссылку Читать далее вы не увидите, чтобы её увидеть найдите этот пост, например, в рубрике: Расширяемые сообщения).
О чем бы нам с вами еще поговорить... Может быть об Обезьянах. Итак, Google, внимание - если ты, конечно, читаешь эти строки. Наше третье слово: Обезьяна. Только не спрашивайте меня почему обезьяна. И про обезьяну как-то ничего в голову не приходит, вот беда-то... Ну, ладно, будет вам и про обезьяну притча:

Случилось как-то раз большое наводнение, и застигло оно обезьяну и рыбу.

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

С самыми добрыми намерениями обезьяна наклонилась и вынула рыбу из воды. Результат был печален. (Д. Адамс)


Притча была найдена на сайте "Самые разные притчи", можете зайти полюбопытствовать, а я буду ждать результатов эксперимента, о которых доложу вам в ближайшее время!

Всем здоровья и удачи!
СветаBlogger: кошка.

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

17.3.09

Blogger: Расширяемые Посты на JavaScript!

79 comments

Шапка невидимка для BloggerЛюблю искать к статьям подходящие картинки. Вот сегодня узнала, что оказывается "Возможность существования плаща-невидимки сведена к математической теореме."
Шапка невидимка для вашего блога!

Здравствуйте! Сегодня мы продолжим беседу о расширяемых сообщениях в блоге. Мы уже с вами поговорили первом способе реализации "расширяемых сообщений" в предыдущем посте (Blogger: Улучшенные расширяемые сообщения [Убираем под кат]). Пост пользовался заслуженной популярностью, хотя и не у всех сразу все получилось, так что пришлось написать еще один пост о структуре языка HTML (Blogger: Структура языка HTML [приложение к статье о расширяемых сообщениях]) после чего стало гораздо легче.

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

Сегодня я опишу для вас как создать реально расширяемый пост. Т.е. пост который при щелчке по ссылке (псевдоссылке) разворачивался и сворачивался.

Покажу работу псевдоссылки на примере:

Нажмите на эту ссылку - вылетит птичка!

Пример, надеюсь, посмотрели. Мою аналогия про Шапку-Невидимку поняли. А я продолжаю...

Таким же образом можно, на самом деле, реализовывать, что угодно. Вот на своем видеосайте Russian Video from Russia я таким образом прячу видео, когда публикую полнометражные фильмы в Ютюб'овской 10-минутной нарезке (а кусочками, кстати, смотреть удобнее). А еще таким образом можно просто расширяемые посты делать, расширяемые списки и т.д.

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

Метод состоит из трех частей:

1) JavaScript функция описание которой мы вставляем ПЕРЕД </head> в Нtml коде нашего макета.

<script type='text/javascript'>
function displ(nnn) {
if (document.getElementById(nnn).style.display == 'none')
{document.getElementById(nnn).style.display = 'block'}
else {document.getElementById(nnn).style.display = 'none'}
}</script>
Функция displ очень простенькая. На входе имя элемента - ну, вот того самого контейнера (коробочки) про которые я рассказывала в заметке о Структуре языка HTML [приложение к статье о расширяемых сообщениях]. И занимается функция вот чем - если на момент обращения к функции элемент был спрятан, то элемент становится видимым, а если элемент был видимым он прячется.

Вторая и третья части метода описываются в самом сообщении.

При редактировании сообщения переходим из режима Создать в режим Изменить Html.

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

Такая псевдоссылка может выглядеть так:

<a href="javascript:displ('var1603093')" title="Читать ОБЯЗАТЕЛЬНО!">Подробности здесь:</a>
Т.е. смотрите в href мы говорим, что будет выполняться javascript функция с именем displ, а параметр у этой функции будет переменная с именем var1603093 Именем переменной может быть любым сочетанием цифр и латинских букв, начинающееся с буквы и оно должно быть уникально в вашем блоге. Я даю название переменным очень простым образом сначала пишу var а потом к ним приписываю дату статьи и номер скрываемого элемента в статье: 1 для первого элемента статьи, который я хочу спрятать, 2 для следующего элемента, который будет спрятан и т.д.

3) Теперь выделяем кусок нашего поста, который для начала мы хотим скрыть, а потом показать при щелчке по ссылке.

В начале куска вставляем следующий код:
<span id="var1603093" style="display: none;">

а заканчиваем спрятанный кусок разумеется вот этим:
</span>

Небольшие пояснения: Кусок нашей статьи заключаем внутри блочного элемента span предназначенного для выделения фрагмента документа с целью изменения его (этого фрагмента свойств). Вот мы его свойства и меняем - делаем фрагмент изначально невидимым и присваиваем ему имя (в данном случае var1603093).

Постойте, не торопитесь еще копировать... Послушайте - почитайте еще немного мои лирические отступления. Код я этот написала довольно давно, когда только стала изучать javascript. И всем он был хорош и замечателен... вот только одна мысль мне не давала покоя, что увидят люди, которые по тем или иным причинам отключили у себя в браузере javascript. А ничего они не увидят! И что же делать - считать если отключили javascript, то сами виноваты... Не хорошо - хотя все люди которые используют подобный метод, похоже так и считаю (т.е. я ни разу еще не видела код, который бы позволял людям с отключенным javascript прочесть весь текст). Последние две недели я особенно плотно работала над этой проблемой (обещала же написать этот пост, а публиковать несовершеннй код я не могла). И, наконец, пару дней назад нашла совершенно очевидный результат. Описания span в пункте 3) мы будем прятать внутри javascript'а. Тогда если у человека включен javascript у него в статье будут стоять соответствующий span и часть статьи будет изначально спрятана, а появляться будет по клику по псевдоссылке, а если человек выключил javascript тогда описание элемента span со свойством display:none не появится в его статье и стало быть он увидит наш пост со всеми деталями.

Возможно, некоторым покажутся мои рассуждения никому не нужной филантропией, но я позволю с этим поспорить. Люди занимающиеся поисковой оптимизацией знают, что поисковые роботы любят сайты сделанные для людей! И если пригласить поисковый робот на страничку в которой часть текста изначально скрыта под грифом display:none т.е. не показывать, то он (поисковый робот ваш спрятанный фрагмент и индексировать не будет), а если описание span display:none поместить внутрь javascript, то он проигнорирует этот span, зато нормально проиндексирует изначально спрятанный кусок.

Т.е. в результате небольшого усилия мы получили код: дружественный для читателя, для поисковых роботов и для RSS-ридера. Наконец, Алиса ("Кошка у камелька"), я поняла слова о недружественности убирания под кат для RSS-ридоров. Этот способ получился дружественным! ;)

Теперь показываю весь код для пункта 2) Действительно, если у читателя отключен javascript и от него мы ничего прятать не будем, хорошо бы спрятать нашу псевдоссылку (Но у меня не получилось, так что оставляем как есть... и ничего страшного если читатель у видит фразу что "Подробности ниже"). Так что код остался без изменения:

<a href="javascript:displ('var1603093')" title="Читать ОБЯЗАТЕЛЬНО!">Подробности ниже:</a>
и весь код для пункта 3)

Этот код мы ставим перед началом спрятанного фрагмента:
<script type="text/javascript"> document.write('<span id="var1603093" style="display: none;">');</script>
А этот код мы ставим в конце спрятанного фрагмента:
<script> document.write('</span>');</script>
Ну, вот этот код вы уже можете использовать, только не забывайте менять переменные. Имя переменной в псевдоссылке должно быть уникально и совпадать с именем id в span, которым она управляет.

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


Бороться с этим просто: Ставим галочку на "Не показывать ошибки HTML для тела этого сообщения".

И напоследок кликаем сюда.
Blogger: кошка.

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

8.3.09

Blogger: Где взять и как вставить музыку в блог.

74 comments

Поздравляем с 8 Марта!

Здоровья, Счастья, Любви и Удачи ВСЕМ! Милым Дамам потому что это наш праздник и Верным Рыцарям потому что от них в нашей жизни зависит так много...

Здесь мы приготовили небольшой подарок для всех наших читателей! Загляните - не пожалеете!!!

[1.06.2013 Внимание код аудиоплейера для блогов изменен! Пожалуйста, измените его и в ваших блогах...]
Сегодня я отвечу на вопрос о том как я вставляю аудио в свой блог. В блоге IvanaXP (Я блоггер!) мы это уже обсуждали, в статье "Простой mp3 плеер для блога" он рассказал о маленьком симпатичном плейере основанном на javascript.


Я же традиционно пользуюсь вот таким flash-плейером который храню по адресу: http://blogger4you.ru/blogger4you/audio/player.swf а на сайте или в блоге, куда я хочу вставить музыку я вставляю вот такой код:
<object id="audioplayer1" data="http://blogger4you.ru/blogger4you/audio/player.swf" wmode="transparent" type="application/x-shockwave-flash" width="180" height="16"> <param value="http://blogger4you.ru/blogger4you/audio/player.swf" name="movie"> <param value="playerID=1&amp;bg=0x67452E&amp;leftbg=0xB3B3B3&amp;lefticon=0xoooooo&amp;rightbg=0x67452E&amp;rightbghover=0x999999&amp;rightcon=0xoooooo&amp;righticonhover=0xffffff&amp;text=0x666666&amp;slider=0x8CA4C0&amp;track=0x8CA4C0&amp;border=0x666666&amp;loader=0x9FFFB8&amp;loop=no&amp;autostart=no&amp;soundFile=http://ЭТО ССЫЛКА НА MP3-ФАЙЛ КОТОРЫЙ МЫ ХОТИМ ПРОИГРЫВАТЬ&amp;" name="FlashVars"> <param value="high" name="quality"> <param value="false" name="menu"> <param value="transparent" name="wmode"> </object>
Понятно, что в этот код надо вставить ссылку на mp3-файл. Какие еще параметры можно поменять: Ширину (width) и высоту (heigth) - Внимание! их можно менять только сохраняя пропорции. И разумеется все цвета. Цвета здесь записаны в виде 0xNNNNNN где NNNNNN - это шестнацатеричная запись цвета (О цветах и кодах для них мы говорили, когда готовили краски для раскраски). Очень важные параметры: loop=no и autostart=no, говорят сами за себя.
И напоследок в качестве еще одного подарка, я расскажу где можно найти музыку в интернете. Я использую поисковую систему http://tagoo.ru/ или http://poiskm.com/. (Для экспертов: взять ссылку на понравившуюся вам найденную музыку - это дело техники. Я выделяю фрагмент страницы с плейером, который играет понравившуюся мне музыку, прошу браузер показать мне исходный текст выделенного кода и в нем ищу ссылку на mp3).
Всем и особенно Милым Дамам - Здоровья, Радости и Счастья! Света и Кайл Комментарии и вопросы более чем приветствуются, нужна помощь - поможем! Читать дальше...

1.3.09

Blogger: Как опубликовать презентацию (pps/ppt) в интернете?

42 comments

Честита Баба Марта!

Поздравляю Всех с Наступление Весны!
Здоровья, Счастья и Любви!


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

Когда я думаю о весне, сердце радостно сжимается в предвкушении радости и света. Каждая весна это рождении чего-то нового, необычного:



Возможно, многие из вас видели, а некоторые даже умеют создавать эти невероятно красивые презентации использую продукт Microsoft Office PowerPoint. Многие пользователи интернета пересылают друг другу по email эти pps или ppt файлы. И вот по заданию Челиты, которая сейчас начала новый блог: Мир прекрасен , посмотри..., и у которой в запасе всегда невероятное количество слайд-шоу(презентаций), которые она всегда щедро рассылает своим друзьям (эта презентация, кстати, тоже из её коллекции), а теперь еще начала публиковать в новом блоге, я провела всестороннее исследование вопроса, как можно размещать презентации в блоге... и вчера, наконец, обнаружила идеальный вариант! Это сервис, на котором презентации можно закачивать, хранить и включать в свои посты. Сервис расположен по адресу: http://www.slideboom.com сервис на английском, но все очень понятно. Покажу в стиле комикса:

1) Регистрируемся так:



дожидаемся email и подтверждаем регистрацию.

2) Закачиваем презентацию. Два обязательных поля Title/Название и Topic/Рубрика. Нажимаем Submit:



3) Любуемся и берем Embeded code, чтобы опубликовать в блоге:



Условия использование очень демократичные, каждый из нас бесплатно может закачать до 100 презентаций! Подробности, что можно получить за 99$ в год читаем здесь: Slideboom (ProAccaunt).

Надеюсь, это статья кому-нибудь поможет - значит красоты в интернете станет больше!

Всем удачи и радости!
Света

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

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.

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


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

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