26.9.08

Blogger: Начала HTML - Ссылки!

41 comments

Ссылки и отсылки!С любимыми не расставайтесь!

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

Здесь я перечислю некоторые из них:

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

2) Хорошая система навигации в нашем блоге - разумные метки (ярлыки), поисковое окошко, архив сообщений и т.д.

3) Возможность для читателя легко подписаться на новостную рассылку сайта используя RSS - reader или получение новостей по электронной почте.

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

5) И наконец разумная система ссылок в наших блогах. (А вот это мы сейчас быстренько изучим!)

Чтобы писать красивые ссылки, чтобы отсылать своего читателя к интересной информации, а не "посылать его по адресу" (а то он может и не вернуться) нам придется изучить HTML. Грустно это, конечно, и страшно, но все-равно когда-то приходится начинать -- Любой блогер рано или поздно осознает необходимость в получении хотя бы начальных сведений об HTML. Кстати HTML значит Стандартный Язык Разметки Документов в Интернете (Википедия).

Язык HTML состоит из тегов. Большинство тегов парные, но встречаются и непарные (например для описания картинки).

Вот как выглядит любой парный тег:
открывающий тег:
<несколько символов являющихся названием тега и параметры если они нужны>
закрывающий тег:
</те самые несколько символов являющихся названием тега>

Не пугайтесь, пожалуйста, это совсем не сложно - сейчас как раз на примере ссылок мы и разберемся с тегами:

Ссылки в HTMLе организуются с помощью парного тега a [латинское а, между прочим. Во всех современных языках программирования используются только латинские буквы! Есть у меня в прочем какие-то смутные воспоминания, что на заре развития программирования в СССР были попытки создать "русские" языки программирования (я даже припоминаю, что моя мама программировала на каком-то виде ассемблера, использующим русские буквы), да и я помнится развлекала своего сына написав для него свой "русский" мета-язык программирования - нам очень нравилось играть в такое программирование!]

Итак, к нашим баранам... т.е. ссылкам. Из вышенаписанного ясно, что ссылка должна выглядеть как парный тег: <a параметры если необходимо, а в случае ссылки хотя бы один параметр будет необкодим> здесь между открывающим и закрывающим тегом может быть почти что угодно, но сегодня мы рассмотрим случай текста. И наконец закрывающий тег </a> И не забываем, что а у нас английское!

Теперь немного о параметрах и атрибутах (значениях параметров).
Параметры и их значения записываются в общем случае так:

имя параметра1="значение параметра1" имя параметра2="значение параметра2, другое значение параметра2, и еще одо значение параметра 2 "

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

Итак, тег ссылки а может иметь следующие параметры:

1) href (единственный обязательный параметр) значением этого параметра является url адрес страницы куда мы хотим чтобы наш читатель заглянул, ну просто для расширения его читательского кругозора или убедить нашего дорогого читателя, что не из головы мы всё тут выдумали...

пишем например так href="http://thegelady.blogspot.com/2008/09/blog-post_27.html" (Кстати, это у нас будет ссылка на замечательную статью Челиты, о том как можно с толком потратить парочку миллионов на Мертвом Море, ну а если этих миллионов пока нету, то можно получить в подарок "серебрянное колье" с камешками.)

Статья мне действительно очень понравилась и я решила ей поделиться с читателями. Но я не хочу чтобы мой читатель ушел навсегда сначала к Челите, а потом кто знает - он пойдет к Челите зачитается её веселыми историями, а кнопочку назад нажать после такого развлечения точно забудет. Так что я пошлю моего читателя к Челите немного "хитрым образом" я скажу браузеру открыть Челитину статью в новом окне (или в новой вкладке) и пусть мой читатель наслаждается творчеством Челиты! А вот когда он покинет её сайт - все хорошее когда-нибудь заканчивается ... моя недочитанная статья будет ему немым укором, что как описать ссылки на HTML он еще не усвоил -- ну а что с этим немым укором он сердешный будет делать это мы оставим на его совести ;).

Итак параметр target позволяет нам указать, где открыть ссылку. По-умолчанию ссылки открываются в том же окне, а вот если мы хотим чтобы ссылка открылась в другом окне или в другой вкладке браузера мы назначим параметру target значение _blank и все вместе у нас получится: target="_blank"

И пожалуй последний полезный параметр title что значит заголовок, в качестве атрибута для заголовка, мы можем поставить краткое описание куда и зачем мы отсылам нашего уважаемого читателя, это описание появится всплывающей строчкой при наведении мышкой на ссылку. В нашем случае мы можем написать что-то типа: title="Стоит взглянуть! ;)" Так коротко, потому что ссылка у нас будет поставлена на текст, а вот если бы ссылкой служила картинка - можно было бы и по-подробнее объяснить читателю, куда он идет и зачем!

А теперь я наконец, заканчиваю вас мучить, мой дорогой читатель, и как и обещала отправляю в гости к Челите:

Узнай как можно с толком потратить парочку миллионов на Мертвом Море, ну а если этих миллионов пока нету, получить в подарок "серебрянное колье" с камешками.

Ой-ой-ой! Куда же Вы, дорогой читатель! Я же Вам еще самого главного про ссылки не рассказала! Ушел.... Но он еще вернется и тогда увидит вот это:
<a href="http://thegelady.blogspot.com/2008/09/blog-post_27.html" target="_blank" title="Стоит взглянуть! ;)">Как можно с толком потратить парочку миллионов на Мертвом Море, ну а если этих миллионов пока нету, то можно получить в подарок "серебрянное колье" с камешками.</a>

Это собственно и есть полный HTML код для ссылки, которую вы видели выше.

Понятно?
Спрашивайте, если не совсем или совсем не...

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

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

41 комментарий:

  1. Ваша статья о Page Rank не отображается в вашем блоге.
    Отображается только в RSS-ленте...
    И спасибо за подсказку про Page Rank - я и не заметила обновления, а ведь мне дали 3/10 в двух из трех моих блогов....

    ОтветитьУдалить
  2. ПОЗДРАВЛЯЮ, Прокофьевна! :)))

    А что до моей статьи -- я её уже который день дописываю, а в RSS она появилась, потому что я в ней JavaScript отлаживала -- нажала Enter и вместо выполнения JavaScript опубликовался черновик (самое начало статьи). Я, конечно, "статью" сразу потерла и даже проверила RSS на FeedBurner (нигде ни каких следов)... а вот похоже в ATOMe она зацепилась.

    Ну, ничего - мне наука отлаживать JavaScript в каком-нибудь "черновиковом блоге", где мы обычно обкатываем новые темлейты.

    А статью полностью я допишу и опубликую сегодня. ОБЕЩАЮ!

    Света

    ОтветитьУдалить
  3. Света, огромнейшее спасибо за доступное объяснение! У меня все получилось. Ваш блог внесла в свой список "избранное" как очень и очень нужный!

    ОтветитьУдалить
  4. Валентина (zotova), спасибо за комментарий и за доверие!

    Я буду стараться и дальше!

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

    ОтветитьУдалить
  5. Спасибо за подробные объяснения понятные "чайнику" )

    А не могли бы вы еще рассказать как делать сокрытие текста? (то что на Ли.ру делается с помощью тега [more=] И частенько принимает вид "Читать дальше" ?
    Спасибо.

    ОтветитьУдалить
  6. Спасибо большое за данную статью.

    Приятно было видеть как все работает.
    Полезнейшая информация. Спасибо еще раз.

    ОтветитьУдалить
  7. Вам спасибо, Игорь Арт!

    Теперь будете у себя организовывать красивые и функциональные ссылки! ;)

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

    ОтветитьУдалить
  8. Здравствуйте!
    Не получается у меня ссылки сделать,и все!
    Все делаю,как Вы объяснили.

    ОтветитьУдалить
  9. Elli, здравствуйте!

    А Вы пишите прямо мне на почту, как вы делаете ссылки, наверное, я смогу поправить.

    И еще одно дополнение, ссылки мы всегда вставляем в режиме Изменить Html.

    А еще ссылки можно вставлять используя Blogger'овский редактор. Вот здесь можно посмотреть: Все о редакторе Blogger(а)!

    Удачи и пишите, если что-нибудь не получится. Адрес тот же svetlana0777@mail.ru

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

    ОтветитьУдалить
  10. Очень толковые и меткие уроки! Ни какой "воды". Спасибо Вам!

    ОтветитьУдалить
  11. Уважаемая Света! С параметр target="_blank" с ссылками работает. А вот как заставить открываться в новом окне скрипт наподобие этого: http://whos.amung.us/

    ОтветитьУдалить
  12. Здравствуйте, Ноам!

    Спасибо большое за ваши комментарии! Исправлять чужой JavaScript я бы в данном случае не стала, а можно кликнуть на NonJavaScript и получить Html-код, который работает ни чем не хуже, а состоит всего лишь из картинки, которую они превратили в ссылку, а что поставить в ссылку, чтобы она открывалась в новом окне вы уже знаете. А не будет получаться - пишите!

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

    ОтветитьУдалить
  13. Спасибо за ответ. NonJavaScript да, можно открыть в новом окне. Но дело в том, что статистику посещения не хочется обнулять. Вот и спросил про скрипт.

    ОтветитьУдалить
  14. А вы сделайте так Ноам:
    1) Скопируйте к себе в блокнот ваш старый скрипт. Что-то типа:
    <script type="text/javascript" src="http://widgets.amung.us/classic.js"></script><script type="text/javascript">WAU_classic('nds5wzo073c1')</script>

    2) Теперь скопируйте в гаджет NonJavaScript:

    <a href="http://whos.amung.us/stats/lz3a65z5mur6/"><img src="http://whos.amung.us/widget/lz3a65z5mur6.png" width="81" height="29" border="0" title="Click to see how many people are online" /></a>

    3) Теперь меняем везде в NonJavaScript'е lz3a65z5mur6 на nds5wzo073c1 У вас, конечно, символы будут другие, но принцип понятен.

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

    ОтветитьУдалить
  15. Ну Светлана, ну Голова!!! Спасибо огромное за совет! Всё получилось.

    ОтветитьУдалить
  16. Светлана, а как сделать, чтобы в ссылке было осмысленное название поста, допустим не href="http://thegelady.blogspot.com/2008/09/blog-post_27.html, а href="http://thegelady.blogspot.com/zhenskaya-moda.html

    *Название поста на русском языке.

    ОтветитьУдалить
  17. Светлана, спасибо за хорошие и внятные объяснения. Я прочитал много Help`a в инете, в том числе и для чайников. Из всей информации, которые я нахожу, мне понятно может быть 1%. А сегодня я понял, что женщины объясняют лучше всех.

    ОтветитьУдалить
  18. Вячеслав, здравствуйте!

    Об осмысленных названиях ссылок на посты в Blogger'е я писала здесь: http://blogger4you.blogspot.com/2008/09/blogger-seo-menyaem-zagolovok-posta.html

    Будут вопросы - спрашивайте.
    Удачи во всем!
    Света

    ОтветитьУдалить
  19. У женщин терпения больше, наверное, Doyalhari das :).

    Спасибо за добрые слова и приходите еще!

    С наилучшими пожеланиями,
    Света

    ОтветитьУдалить
  20. Привет, Светлана! Всё сделала, спасибо.. вроде получилось! На твой блог тоже ссылка стоит, только она спрятана под названием поста... я иногда так часто делаю, только не знаю хорошо это или плохо? в плане разкрутки... удачи от Волчицы!

    ОтветитьУдалить
  21. Я видела, Волчица, как ты тренируешься - хорошо получилось!

    > только не знаю хорошо это или плохо? в плане разкрутки... - а я тоже не знаю ;)

    Удачи тебе!
    Света

    ОтветитьУдалить
  22. Светлана, спасибо за такое необходимое объяснение! По себе знаю, что если "пошлют по адресу", то крайне редко возвращаюсь к истокам.))) Скажите, а теги target="_blank" каждый раз надо вручную прописывать или это как-то можно автоматизировать, чтобы было по умолчанию для всех ссылок в блоге?

    ОтветитьУдалить
  23. Diana, есть способ, но насколько он хороший я не уверена....

    После тега <head>

    пишем строчку <base target='_blank'/>

    тогда ВСЕ ссылки будут открываться в новом окне/вкладке.

    Это реально работает, а вы попробуйте понравится или уже покажется черезчур ;)

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

    ОтветитьУдалить
  24. Светлана, спасибо за совет!!! Шикарно работает! Только Вы правы - получается перебор с открывшимися вкладками.))) Лучше вручную прописывать как Вы рекомендовали.

    ОтветитьУдалить
  25. Здравствуйте, Diana!

    > Только Вы правы - получается перебор с открывшимися вкладками.))) -- Ага, а если учесть что в IE там не то что новые вкладки открываются, а целые окна... то действительно - уж лучше вручную ;)

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

    ОтветитьУдалить
  26. СВЕТЛАНА, спасибо за Ваши советы! Учусь у Вас каждый день. Плоды трудов можете посмотреть здесь http://tmrgsvn.blogspot.com/ и прошу Вашего совета, модно ли изменить ширину колонок?

    ОтветитьУдалить
  27. Света, здравствуйте! Попробовала выполнить Ваш урок и пыталась исправить старую ссылку\чтобы она открывалась в новом окне\.Как будто делаю все как Вы написали. Ссылка не получается. Перепробовала много вариантов-тщетно . Мне пишут что ссылка не правильная или такой страницы нет. Если Вам не трудно посмотрите пожалуйста что я не так делаю? http://myblogfortyna.blogspot.com/2010/08/blog-post_20.html

    ОтветитьУдалить
  28. Не знаю, Забава... Зашла в ваш пост, а там все ссылки работают, правда открываются в том же самом окне. Вы наверное все уже вернули назад?

    Света

    ОтветитьУдалить
  29. Света, спасибо что нашли время для бестолковой двоечницы. Я действительно вернула ссылку назад. Сегодня еще раз все попробую и доложу о результатах.

    ОтветитьУдалить
  30. Добрый вечер, Света!
    Ну вот я опять попробовала результат отрицательный .Сейчас уже ссылку не исправляла специально оставила как получилось
    http://myblogfortyna.blogspot.com/2010/08/blog-post_20.html
    Хотела сделать по Вашему уроку что бы ссылка открывалась в другом окне....

    ОтветитьУдалить
  31. Забава, здравствуйте!

    Увидела ваш "кривой" линк - там сидит просто ужас какой-то...

    Давайте попробуем так:
    1) Вы делаете обыкновенную ссылку - как вы всегда делали;
    2) Потом нажимаете "Изменить Html" и находите Html-код этой ссылки а там после
    <a
    и перед
    href="http://...

    вставляете то самое target="_blank"

    T.e. у вас получится

    <a target="_blank" href="http://...

    Еще раз не получится - еще раз спрашивайте!

    Удачи!
    Света

    ОтветитьУдалить
  32. Света!!!!Огромное спасибо !!!У меня получилось, я поняла свою ошибку. Я еще не дошла до урока где объясняется как вставлять что то на боковую панель по этому просто давала ссылку на Ваш блог в своих заметках.Еще раз сердечное спасибо за Ваше внимание! Ускакала переделывать все ссылки, для закрепления знания так сказать :))

    ОтветитьУдалить
  33. Здравствуйте! объяснено доступно, делаю как-будто правильно, но в просмотре в сообщении ссылка не активна и написана просто текстом.Хотя ставила пробовала на др. сайтах все активируется. Подскажите почему так.

    ОтветитьУдалить
  34. Здравствуйте, мамаДаника!

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

    Сейчас в Blogger'е есть возможность очень легко вставить ссылку. В редакторе теперь есть просто кнопка Ссылка.

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

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

    ОтветитьУдалить
  35. Доброе утро! извините но это опять я посмотрите посты моих попыток. при наведении указателя не высвечиваетя (Посмотри).А в предыдущем вообще не жилает работать. Я вообще полный навичек-чайник.Подскажите в чем ошибка

    ОтветитьУдалить
  36. здравствуйте, у меня достаточно тупой и примитивный вопрос. Я создала свой блог и хочу участвовать здесь же в конкурсах. Условие конкурса - при помощи линк сделать ссылку на сообщение с конкурсной работой, а не на весь блог. У меня это не получается( И второй вопрос: как вставить ссылку на свою боковую панель и картинку с сайта, а также как сделать, чтобы нажимая на картинку можно было перейти в блог хозяина. Воть такая я неумеха(( Заранее спасибо

    ОтветитьУдалить
  37. подскажите почему, когда прописываю теги с открытием ссылки в новом окне, в новом окне не открывается? может это потому что ссылка на статью в моем же блоге? спасибо

    ОтветитьУдалить
  38. Помогите мне пожалуйста как спрятать архив блога чтоб он не появлялся на страницах блога и еще один вопрос как создать заглавление меню

    ОтветитьУдалить
  39. Оп ! Извиняюсь ) Заменил на ваш скрипт и всё заработало ! Спасибо вам большое и добра !

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

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