Сервисы визуализации связей. Теги и облака - в чем связь?: различия между версиями

Материал из SurWiki
Перейти к навигации Перейти к поиску
Строка 2: Строка 2:
 
Статья подготовлена в рамках работы по проекту "[[Современные сетевые сервисы в работе менеджера]]"
 
Статья подготовлена в рамках работы по проекту "[[Современные сетевые сервисы в работе менеджера]]"
  
                                                      ''' ''Теги и облака - в чем связь? '' '''
 
  
  
                                                                  '''  Тег'''
+
==Тег==
  
 
''Тег'' (англ. '''tag''' ''ярлык,этикетка,бирка, метить'') ключевое слово, метка для категоризации чего-либо. Используется для поиска какой-либо информации или для форматирования текста. HTML-теги это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт.
 
''Тег'' (англ. '''tag''' ''ярлык,этикетка,бирка, метить'') ключевое слово, метка для категоризации чего-либо. Используется для поиска какой-либо информации или для форматирования текста. HTML-теги это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт.
Строка 17: Строка 16:
  
 
                                                      
 
                                                      
 +
==Облака тегов==
  
                                '''Облака тегов'''
+
''Облако тегов'' или ''Туча ярлыков'' или ''Облако меток'' или ''Облако ключевых слов'' (англ. '''tag cloud''' - ''облако тегов'') — визуальное [[Файл:Облако_тегов.png‎|200px|thumb|right|]] представление списка ярлыков (или категорий). Частота упоминаний, поисков, ссылок в интернете с определённого сайта неких слов, терминов, имён, отображается в специальной области в виде изображения этих слов в формате гиперссылок. Размер изображения тем больше, чем чаще использовался данный тег.
 +
 
 +
 
 +
==Технология написания веб-текста(тегов и теговых облаков)==
 +
 
 +
Вообще говоря, чтобы написать HTML-файл, достаточно иметь любой текстовый редактор, лишь бы он умел не добавлять в текст свои специальные символы. Самый простой вариант — это редактор Notepad (Блокнот), входящий в стандартную поставку Windows (рис. 1.7). Собственно говоря, это именно то, что нужно, — простейшая программа, сохраняющая написанный текст именно в том виде, в котором он был введен, и ничего лишнего. (Тем, кто не работает под Windows, в качестве замены Блокноту подойдет почти “все что угодно”: Edit — для MS-DOS, vi или jed — для Linux, Kedit — для Linux/KDE и т. д.)
 +
 
 +
 
 +
Однако в очень простых текстовых редакторах типа Блокнота весь HTML-текст приходится писать вручную, а многим хотелось бы какую-то часть работы автоматизировать. Учитывая это желание, разработчики создали специализированные средства, призванные облегчить труд веб-программиста.
 +
 
 +
 
 +
Тем, кто предпочитает набирать код HTML вручную, но кому не хватает функциональности Блокнота и подобных ему программ, можно посоветовать программs c названием TextPad и Arachnophilia(обе программы в свободном доступе). Эти программы по сути весьма похожи на Блокнот, однако разработчики специально предусмотрели некоторые удобства для того, чтобы писать код HTML (а также языков Java, С, C++, Perl и еще некоторых). Это выражается в том, что при написании HTML -документа все теги автоматически подсвечиваются синим цветом, их атрибуты — темно-синим, а значения атрибутов — зеленым (цвета можно настроить по собственному желанию, так же, как и шрифт). Это очень удобно. К примеру, если автор случайно ошибется в имени тега или атрибута, то оно останется черным, и он сразу поймет, что здесь что-то не то. Правда, проверка не является “ интеллектуальной”: программа может спокойно “разрешить” приписать тегу какое-либо свойство, которого у него в принципе быть не может.
 +
 
 +
 
 +
Мы рассмотрели программы, в которых основной упор при создании веб-страниц сделан на написание HTML-коца. вручную. Однако существуют программы, позволяющие редактировать веб-страницы как бы в режиме WYSIWYG.
  
''Облако тегов'' или ''Туча ярлыков'' или ''Облако меток'' или ''Облако ключевых слов'' (англ. '''tag cloud''' - ''облако тегов'') — визуальное [[Файл:Облако_тегов.png‎|200px|thumb|right|]] представление списка ярлыков (или категорий). Частота упоминаний, поисков, ссылок в интернете с определённого сайта неких слов, терминов, имён, отображается в специальной области в виде изображения этих слов в формате гиперссылок. Размер изображения тем больше, чем чаще использовался данный тег.
+
На самом деле обычно из этого ничего хорошего не получается. Это связано с тем, что автор создает не код, а оформление страницы, после чего программа автоматически подбирает для нее код, который соответствует тому, что задумал автор. Обычно на странице оказывается много совершенно лишнего кода. Он может оставаться, например, от отмененных проб, не говоря уже о том, что программа может сама вставлять комментарии, которые только замедляют загрузку страницы.
 +
 
 +
Эффективно управлять оформлением страницы таким способом тоже не удается. Поэтому мы не будем долго задерживаться на веб-редакторах, работающих по прнципу WYSIWYG.
 +
 
 +
Вообще говоря, для редактирования HTML-текста в режиме WYSIWYG можно использовать даже такой текстовый процессор, как Microsoft Word. Начиная с версии MS Word 97 он позволяет набрать некоторый текст, отформатировать его и сохранить в формате HTML.
 +
 
 +
Программы работающие по принципу WYSIWYG: Star Office и Netscape Composer(имеются и другие...).
 +
 
 +
 
 +
==Стандартные теги для редактирования гипертекста и создания веб-дизайна==
 +
[b] текст [/b] Выделяет текст жирным шрифтом
 +
 
 +
[i] текст [/i] Выделяет текст наклонным шрифтом
 +
 
 +
[s] текст [/s] Зачеркивает текст
 +
 
 +
[u] текст [/u] Подчеркивает текст
 +
 
 +
[left] текст [/left] Выравнивает текст по левому краю
 +
 
 +
[center] текст [/center] Выравнивает текст по центру
 +
 
 +
[right] текст [/right] Выравнивает текст по правому краю
 +
 
 +
[url=http://ссылка] текст [/url] Вставка ссылки в новость
 +
 
 +
[leech=http://ссылка] текст [/leech] Полностью аналогичен тегу URL, за исключением того что производит шифрование ссылки
 +
 
 +
[email=ссылка] текст [/email] Вставка e-mail адреса в новость
 +
 
 +
[img]ссылка[/img] Вставка картинки новость
 +
 
 +
[img]ссылка[/img] Вставка картинки новость и выравнивание ее по указанному параметру
 +
 
 +
[img=|свой текст для alt]ссылка[/img] Вставка картинки новость и выравнивание ее по указанному параметру, а также назначение картинке собственного описания
 +
 
 +
<!--colorstart:--><span style="color:"><!--/colorstart--> текст [/color] Изменение цвета текста на указанный
 +
 
 +
[quote] текст [/quote] Цитата
 +
 
 +
[hide] текст [/hide] Скрывает текст от не зарегистрированного посетителя
 +
 
 +
{pagebreak} Разрыв страницы
 +
 
 +
[page=номер страницы] текст [/page] Вставка ссылки на указанный номер страницы внутри новости
 +
 
 +
[thumb] ссылка [/thumb] Вставка уменьшенной копии картинки новость, с ссылкой на увеличенную картинку
 +
 
 +
[thumb]Вставка уменьшенной копии картинки новость, с ссылкой на увеличенную картинку и выравнивание ее по указанному параметру
 +
 
 +
[thumb=выравнивание|свой текст для alt] ссылка[/thumb] Вставка уменьшенной копии картинки новость, с ссылкой на увеличенную картинку и выравнивание ее по указанному параметру, а также назначение картинке собственного описания
 +
 
 +
[video=http://test.ru/video.avi] Позволяет установит проигрывание видеофайла в новости
 +
 
 +
[video=http://test.ru/video.avi|http://test.ru/sample.jpg] Позволяет установит проигрывание видеофайла в новости, а также картинку предосмотра для перед началом проигрывания.
 +
 
 +
[audio=http://test.ru/music.mp3] Позволяет установит проигрывание MP3 в новости
 +
 
 +
[font= ] текст [/font] Написание текста определенным шрифтом
 +
 
 +
[size=0] текст [/size] Написание текста определенным размером шрифта
 +
 
 +
[spоiler] текст [/spoiler] Скрывает указанный в теге текст и показывает его при клике на него
 +
 
 +
[spоiler=Заголовок] текст [/spoiler] Выводит собственный заголовок по щелчку на который будет показан скрытый текст
 +
 
 +
[youtubе=ссылка на страницу с видео] предназначен для публикации видео на сайте с таких видеохранилищ как youtube.com и rutube.ru. В данном теге вы просто указываете URL страницы видеохранилища где размещено видео, скрипт автоматически распознает тип видеохранилища и вставит нужный HTML код для просмотра видео.
 +
 
 +
[flash=ширина,высота] Путь к ролику [/flash] предназначенный для вставки флеш роликов в формате swf.

Версия 10:36, 25 апреля 2011

Статья подготовлена в рамках работы по проекту "Современные сетевые сервисы в работе менеджера"


Тег

Тег (англ. tag ярлык,этикетка,бирка, метить) ключевое слово, метка для категоризации чего-либо. Используется для поиска какой-либо информации или для форматирования текста. HTML-теги это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт.

Все тэги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком sign ">".

Код теги.jpg

Обычно имеются два тэга - открывающий: и закрывающий: . Различие в том, что в закрывающем имеется слэш "/".

Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга.


Облака тегов

Облако тегов или Туча ярлыков или Облако меток или Облако ключевых слов (англ. tag cloud - облако тегов) — визуальное

Облако тегов.png

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


Технология написания веб-текста(тегов и теговых облаков)

Вообще говоря, чтобы написать HTML-файл, достаточно иметь любой текстовый редактор, лишь бы он умел не добавлять в текст свои специальные символы. Самый простой вариант — это редактор Notepad (Блокнот), входящий в стандартную поставку Windows (рис. 1.7). Собственно говоря, это именно то, что нужно, — простейшая программа, сохраняющая написанный текст именно в том виде, в котором он был введен, и ничего лишнего. (Тем, кто не работает под Windows, в качестве замены Блокноту подойдет почти “все что угодно”: Edit — для MS-DOS, vi или jed — для Linux, Kedit — для Linux/KDE и т. д.)


Однако в очень простых текстовых редакторах типа Блокнота весь HTML-текст приходится писать вручную, а многим хотелось бы какую-то часть работы автоматизировать. Учитывая это желание, разработчики создали специализированные средства, призванные облегчить труд веб-программиста.


Тем, кто предпочитает набирать код HTML вручную, но кому не хватает функциональности Блокнота и подобных ему программ, можно посоветовать программs c названием TextPad и Arachnophilia(обе программы в свободном доступе). Эти программы по сути весьма похожи на Блокнот, однако разработчики специально предусмотрели некоторые удобства для того, чтобы писать код HTML (а также языков Java, С, C++, Perl и еще некоторых). Это выражается в том, что при написании HTML -документа все теги автоматически подсвечиваются синим цветом, их атрибуты — темно-синим, а значения атрибутов — зеленым (цвета можно настроить по собственному желанию, так же, как и шрифт). Это очень удобно. К примеру, если автор случайно ошибется в имени тега или атрибута, то оно останется черным, и он сразу поймет, что здесь что-то не то. Правда, проверка не является “ интеллектуальной”: программа может спокойно “разрешить” приписать тегу какое-либо свойство, которого у него в принципе быть не может.


Мы рассмотрели программы, в которых основной упор при создании веб-страниц сделан на написание HTML-коца. вручную. Однако существуют программы, позволяющие редактировать веб-страницы как бы в режиме WYSIWYG.

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

Эффективно управлять оформлением страницы таким способом тоже не удается. Поэтому мы не будем долго задерживаться на веб-редакторах, работающих по прнципу WYSIWYG.

Вообще говоря, для редактирования HTML-текста в режиме WYSIWYG можно использовать даже такой текстовый процессор, как Microsoft Word. Начиная с версии MS Word 97 он позволяет набрать некоторый текст, отформатировать его и сохранить в формате HTML.

Программы работающие по принципу WYSIWYG: Star Office и Netscape Composer(имеются и другие...).


Стандартные теги для редактирования гипертекста и создания веб-дизайна

[b] текст [/b] Выделяет текст жирным шрифтом

[i] текст [/i] Выделяет текст наклонным шрифтом

[s] текст [/s] Зачеркивает текст

[u] текст [/u] Подчеркивает текст

[left] текст [/left] Выравнивает текст по левому краю

[center] текст [/center] Выравнивает текст по центру

[right] текст [/right] Выравнивает текст по правому краю

[url=http://ссылка] текст [/url] Вставка ссылки в новость

[leech=http://ссылка] текст [/leech] Полностью аналогичен тегу URL, за исключением того что производит шифрование ссылки

[email=ссылка] текст [/email] Вставка e-mail адреса в новость

[img]ссылка[/img] Вставка картинки новость

[img]ссылка[/img] Вставка картинки новость и выравнивание ее по указанному параметру

[img=|свой текст для alt]ссылка[/img] Вставка картинки новость и выравнивание ее по указанному параметру, а также назначение картинке собственного описания

текст [/color] Изменение цвета текста на указанный

[quote] текст [/quote] Цитата

[hide] текст [/hide] Скрывает текст от не зарегистрированного посетителя

{pagebreak} Разрыв страницы

[page=номер страницы] текст [/page] Вставка ссылки на указанный номер страницы внутри новости

[thumb] ссылка [/thumb] Вставка уменьшенной копии картинки новость, с ссылкой на увеличенную картинку

[thumb]Вставка уменьшенной копии картинки новость, с ссылкой на увеличенную картинку и выравнивание ее по указанному параметру

[thumb=выравнивание|свой текст для alt] ссылка[/thumb] Вставка уменьшенной копии картинки новость, с ссылкой на увеличенную картинку и выравнивание ее по указанному параметру, а также назначение картинке собственного описания

[video=http://test.ru/video.avi] Позволяет установит проигрывание видеофайла в новости

[video=http://test.ru/video.avi%7Chttp://test.ru/sample.jpg] Позволяет установит проигрывание видеофайла в новости, а также картинку предосмотра для перед началом проигрывания.

[audio=http://test.ru/music.mp3] Позволяет установит проигрывание MP3 в новости

[font= ] текст [/font] Написание текста определенным шрифтом

[size=0] текст [/size] Написание текста определенным размером шрифта

[spоiler] текст [/spoiler] Скрывает указанный в теге текст и показывает его при клике на него

[spоiler=Заголовок] текст [/spoiler] Выводит собственный заголовок по щелчку на который будет показан скрытый текст

[youtubе=ссылка на страницу с видео] предназначен для публикации видео на сайте с таких видеохранилищ как youtube.com и rutube.ru. В данном теге вы просто указываете URL страницы видеохранилища где размещено видео, скрипт автоматически распознает тип видеохранилища и вставит нужный HTML код для просмотра видео.

[flash=ширина,высота] Путь к ролику [/flash] предназначенный для вставки флеш роликов в формате swf.