Цвет ссылок. Код html ссылка на сайт


Ссылки. Гиперссылки в html. Учебник html

Глава 5

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

Лирическое отступление:Как-то в армии подходит ко мне начальник штаба и отдаёт приказ, цитирую: Принеси мне вот тот документ, правда я не знаю где он и какой!! Что стоишь? Бегом давай!! Опаздываю я!!!

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

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

  1. Открываем блокнот.
  2. Пишем код на html языке. к примеру страничку с рядом фотографий.
  3. Сохраняем его как html страничку в ту же рабочею папку, где уже есть созданный нами первый документ. Давайте, что б не путаться назовем его primer.html, да и первый тоже пожалуй переименуйте в index.html

Теперь я знаю, что у Вас два html документа index.html и primer.html и что теперь у Вас есть минимальный набор для дальнейшего обучения.

Знакомимся тег <a> (от anchor- якорь), в него можно заключить текст или рисунок, которые станут ссылкой на те или иные документы. Атрибут тега <a> href задаёт имя и путь к документу на который указывает ссылка.

Всё вместе пишется так:

<a href="primer.html">Здесь мои фотки!!</a>

Как Вы наверное поняли primer.html это имя нашего второго html документа, а надпись "Здесь мои фотки!!" это кусочек текста из файла index.html.

По аналогии с рисунками тег <img> путь ссылки к открываемому документу прописывается теми же способами:

<a href=" stranica/primer.html">Здесь мои фотки!!</a> - Такая запись подразумевает, что в директории, где расположен наш первый html документ есть папка stranica в которой расположен файл primer.html<a href="../primer.html">Здесь мои фотки!!</a> - А это значит, что файл primer.html размещен на уровень выше от документа<a href="http://www.site.ru/primer.html">Здесь мои фотки!!</a> - документ расположен на сайте www.site.ru..

Ну что давайте попробуем? Ниже приведен пример сразу двух документов в которых прописаны ссылки указывающие друг на друга.

Пример:

Файл index.html:

<html><head><title>Делаем ссылкой кусочек текста</title></head><body><div align="center"><br><br><br><b>Скажи мне, милый ребёнок: в каком ухе у меня жужжит?</b><br><br><br>В <a href="primer.html">правом</a> или <a href="primer.html">левом</a>?</div></body></html>

Файл primer.html:

<html><head><title>Перешли по ссылке сюда</title></head><body><br><br><br><br><div align="center"><font size="+2">А вот и не угадал! У меня жужжит в обоих ухах.</font></div><br><br><br><div align="center"><a href=" index.html">Ну я так не играю...</a></div></body></html>

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

link - цвет ссылки.alink - цвет нажатой, активной ссылки.vlink - цвет посещенной ссылки.

Пишется так:

<body link="#008000" alink="#ff0000" vlink="#ffff00">

Продолжая говорить о цвете текстовой ссылки стоит упомянуть, что при необходимости можно принудительно выделять цветом как всю ссылку, так и отдельные её части (фразы слова буквы) знакомым тегом <font> </font> и его атрибутом color. Впрочем, это касается не только цвета так же отдельно можно задать размер, стиль и шрифт текста. Но помните, что манипуляции с цветом нужно проводить внутри тега <a>вот здесь</a> а не за бортом, иначе цвет ссылки будет либо по умолчанию, либо так как прописано в теге <body>

Пример:

Файл index.html:

<html><head><title>Радуга</title></head><body link="#008000" alink="#ff0000" vlink="#ffff00"><center><h4>Посмотрите на фразу которая поможет Вам запомнить места цветов в радуге</h4><br><a href="primer2.html"><font size="+1" color=#ff0000>Р</font><font size="+2" color=#ff8c40>А</font><font size="+3" color=#ffff00>Д</font><font size="+3" color=#008000>У</font><font size="+2" color=#0000ff>Г</font><font size="+1" color=#800080>А</font></a></center></body></html>

Файл primer.html:

<html><head><title>Радуга</title></head><body link="#008000" alink="#ff0000" vlink="#ffff00"><center><font size="+3"><font color=#ff0000>Каждый</font><font color=#ff8c40>охотник</font><font color=#ffff00>желает</font><font color=#008000>знать</font><font color=#40caff>где</font><font color=#0000ff>сидит</font><font color=#800080>фазан</font></font><br><br><br><a href="index.html">вернуться на главную</a> </center></body></html>

Такие вот дела…

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

Вот так:

<a href="primer3.html"><img src="knopa.gif"></a>

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

Пишется так:

<a href="primer3.html" target="_blank">открыть в новом окне</a>

Пример:

Файл index.html:

<html><head><title>кнопка</title></head><body><center><h2> Не в коем случае не нажимайте на эту кнопку!!!</h2><br><a href="primer3.html" title="Не нажимать!!!" target="_blank"><img src="graphics/knopa.gif" border="0" alt="Не нажимать!!!" ></a></center></body></html>

Файл primer.html:

<html><head><title>итог..</title></head><body><div align="center"><font size="+3">Ракеты ушли... Америки больше нет...</font></div></body></html>

Я надеюсь, Вы не додумались нажать большую красную кнопку? Ох уж этот русский менталитет.. :)

Что ещё можно почерпнуть из этого примера?

Во-первых. Мы применили уже знакомые атрибуты описания title="Не нажимать!!!" для тега <a> и одновременно alt="Не нажимать!!!" для тега <img> если Вы помните, эти атрибуты позволяют сделать нам всплывающие подсказки. Но зачем я их продублировал? Один для ссылки, а другой для рисунка, если сам по себе рисунок является ссылкой?.. долгая история, когда ни будь напишу статью: "Спецификации HTML, браузеры и головная боль.." - а сейчас скажу лишь то, что разные браузеры не всегда воспринимают те или иные теги и их атрибуты. А описание для ссылки картинки нам просто таки необходимо! Помните, я рассказывал, что есть люди, умышленно отключающие загрузку рисунков?- это для них.

Во-вторых. В примере использован атрибут тега <img> border="0" - рамка рисунка. 0 - это значит выключить рамку, так как она портит весь вид страницы в данном примере, но бывают случаи когда рамки рисунка вполне актуальны и так сказать вписываются в страницу. Здесь нужно помнить, что когда рисунок является ссылкой, его рамка окрашивается в цвета ссылки: link - цвет ссылки, alink - цвет нажатой, активной ссылки, vlink - цвет посещенной ссылки тега <body>.

Я тут Вас чуть-чуть с толку сбил, вроде бы договаривались вместе писать полноценный сайт, а я тут какие то мелкие примерчики выкладываю.. Не волнуйтесь! В конце главы покажу готовый сайт про Карлсона целиком. А сейчас думаю так будет удобнее Вам читать, и мне писать.. : Да и подразумеваю что Вы уже самостоятельно можете вставлять теги в нужные места.

Напишите мне письмо.. - строчка из того примера..

Для того что бы сделать текст или рисунок ссылкой на e-mail - почтовый ящик его нужно заключить в тег <a>, но не простой, а с использованием mailto

Пишем так:

<a href="mailto:[email protected]"> Напишите мне письмо.. </a>

Эта непривычная запись будет говорить что, кликнув по тексту ссылке "Напишите мне письмо.." посетитель сайта попадет в свою почтовую программу, которая выдаст ему бланк для отправки письма, где в строчке Кому: уже будет указан нужный нам почтовый ящик [email protected]

Пример:

<html><head><title>e-mail</title></head><body><center><h3><a href="mailto:[email protected]"> Напишите мне письмо.. </a></h3></center></body></html>

Помимо этого в почтовом бланке можно заранее прописать следующие вещи:

?subject= - Тема пиcьма&Body= - Текст сообщения&cc= [email protected],[email protected] - Копии письма&bcc= [email protected],[email protected] - Скрытые копии письма

Адреса ящиков для копий и скрытых копий письма пишутся через запятую.

Пример:

<html><head><title>e-mail</title></head><body><center><h3><a href="mailto:[email protected]?subject=А у вас молоко убежало.. &Body=Текст письма &[email protected] &[email protected]">Напишите мне письмо.. </a></h3></center></body></html>

Закладки или якоря - это особый вид ссылок. Данные ссылки, как правило, не ведут к какому либо документу, а предназначены для навигации внутри страницы.

Предположим на странице в удобном месте находится некое содержание или меню.. по принципу:

Глава1Глава2Глава3

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

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

Вот так:

<а name="glava1">Глава1 </а><а name="glava2">Глава2 </а><а name="glava3">Глава3 </а>

Имя можно присвоить любое необязательно glava1

А теперь собственно прописываем на них ссылки в нашем меню, содержании.

Вот так:

<a href="#glava1"> Глава1</a><a href="#glava2"> Глава3</a><a href="#glava3"> Глава3</a>

Замете перед каждым именем ставим знак решётки #.

Ладно, думаю, на примере будет понятнее:

<html><head><title>Закладки</title></head><body><h3>А. С. ПУШКИН</h3><a href="#skazka1">Сказка о попе и работнике его Балде</a><br><a href="#skazka2">Сказка о рыбаке и рыбке</a><br><a href="#skazka3">Сказка о царе Cалтане</a><h4><a name="skazka1">Сказка о попе и работнике его Балде</a></h4><pre>Жил-был поп,Толоконный лоб.... ... ...</pre><h4><a name="skazka2">Сказка о рыбаке и рыбке</a></h4><pre>Жил старик со своею старухойУ самого синего моря.... ... ...</pre><h4><a name="skazka3">Сказка о царе Cалтане</a></h4><pre>Три девицы под окномПряли поздно вечерком.... ... ...</pre></body></html>

Хотя, как я уже говорил, закладки используют для навигации внутри страницы, на них всё же можно ссылаться с других страниц или сайтов

<a href="primer.html#glava1"> идем к главе1 с другой страницы сайта</a><a href="http://www.site.ru/ primer.html#glava2"> разместив такую ссылку на любом другом сайте мы согласно указанному пути сначала попадаем на наш сайт www.site.ru надём там документ primer.html и сразу начинам читать главу2</a>

Ну а теперь, как и обещал, выкладываю "большой" пример он тоже состоит из двух отдельных страниц:

Файл index.html:

<html><head><title>Мой первый сайт </title></head><body text="#484800" bgcolor="#ffffff" background="graphics/fon.jpg"><center><table cellpadding="5" cellspacing="2" border="1"><tr><td colspan="3" bgcolor="#b2ff80"><center><img src="graphics/privet.jpg" alt="Привет мир!!!"></center></td></tr><tr><td bgcolor="#ffa0cf"><center><b><a href=" index.html">Обо мне!!!</a></b></center></td><td bgcolor="#c0e4ff"><center><b><a href=" myfoto.html">Здесь мои фотки!!</a></b></center></td><td bgcolor="#c0e4ff"><center><b><a href="mailto:[email protected]">Напишите мне письмо..</a></b></center></td></tr><tr><td colspan="3" valign="top" bgcolor="#b2ff80"><img src="graphics/foto.jpg" align="left" hspace="10" alt="Это моя фотка!!!"><p align="justify">&nbsp;&nbsp;&nbsp;Разрешите представиться Карлсон! … … …</p></td></tr></table></center></body></html>

Файл myfoto.html:

<html><head><title>Мой первый сайт </title></head><body text="#484800" bgcolor="#ffffff" background="graphics/fon.jpg"><center><table cellpadding="5" cellspacing="2" border="1"><tr><td colspan="3" bgcolor="#b2ff80"><center><img src="graphics/privet.jpg" alt="Привет мир!!!"></center></td></tr><tr><td bgcolor="#c0e4ff"><center><b><a href=" index.html">Обо мне!!!</a></b></center></td><td bgcolor="#ffa0cf"><center><b><a href=" myfoto.html">Здесь мои фотки!!</a></b></center></td><td bgcolor="#c0e4ff"><center><b><a href="mailto:[email protected]">Напишите мне письмо..</a></b></center></td></tr><tr><td colspan="3" valign="top" bgcolor="#b2ff80"><img src="graphics/foto1.jpg" align="middle" vspace="10" hspace="10" alt="Это моя фотка!!!">это я <br><img src="graphics/foto2.jpg" align="middle" vspace="10" hspace="10" alt="Это моя фотка!!!">и это я <br><img src="graphics/foto3.jpg" align="middle" vspace="10" hspace="10" alt="Это моя фотка!!!">снова я</td></tr></table></center></body></html>

Фух.. ну вроде всё.. Думаю, на этом примере с Карлсоном мы распрощаемся, разросся он через чур.. да и как сайт с точки зрения построения имеет законченный вид...

Он улетел - но обещал вернуться!.. :)

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

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

  • Одна из Ваших страничек на сайте обязательно должна называться index.html. Именно файл с таким названием на Вашем сайте будет искать программа робот, когда человек введет имя Вашего сайта. Так как страница index.html будет открываться первой, делайте её главной. Остальные страницы можете называть, как угодно… больше никаких нюансов с именами нет.

  • Про регистр.. Прописывая путь и имена документов помните, что, к примеру: Page.html, page.html и PAGE.html это имена разных документов! Это же касается имен закладок и рисунков. Всегда учитывайте регистр при написании кода, есть большая вероятность, что такие имена не будут распознаны тем или иным браузером. Возьмите за правило все писать и обзывать маленькими латинскими буквами, тогда риск человеческого фактора и капризов программ сведется к нулю.

  • Правило трех кликов..

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

www.webremeslo.ru

Структура HTML-кода | htmlbook.ru

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

Пример 4.1. Исходный код веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Пример веб-страницы</title> </head> <body> <h2>Заголовок</h2> <!-- Комментарий --> <p>Первый абзац.</p> <p>Второй абзац.</p> </body> </html>

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.

Рис. 4.1

Рис. 4.1. Результат выполнения примера

Далее разберем отдельные строки нашего кода.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.

Табл. 4.1. Допустимые DTD DOCTYPE Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html> В этой версии HTML только один доктайп.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее.

Например, в строгом HTML и XHTML непременно требуется наличие тега <title>, а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.

В дальнейшем будем применять преимущественно строгий <!DOCTYPE>, кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.

Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.

<html>

Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).

<head>

Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title>.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

<title>Пример веб-страницы</title>

Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).

Вид заголовка в браузере

Рис. 4.2. Вид заголовка в браузере

Тег <title> является обязательным и должен непременно присутствовать в коде документа.

</head>

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

<body>

Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.

<h2>Заголовок</h2>

HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h2> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h2>...<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

<!-- Комментарий -->

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

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

<p>Первый абзац.</p>

Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

<p>Второй абзац.</p>

Тег <p> является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 4.1.

</body>

Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.

</html>

Последним элементом в коде всегда идет закрывающий тег </html>.

htmlbook.ru

Помощь html

Все теги ставятся в блог copy-paste‘ом(В режиме «HTML», а не «Визуальный редактор»)

Оформление текста (рекомендую спец. страничку Tекст):

Перечёркнутый текст: ТЕКСТ <s> ваш текст </s> Подчёркнутый текст: ТЕКСТ <u> ваш текст </u> Полужирный текст: ТЕКСТ <b> ваш текст </b> Полужирный крупный: ТЕКСТ <big> ваш текст </big> Курсивный текст: ТЕКСТ <i> ваш текст </i> Маленький текст: текст <small> ваш текст </small> Неразрывный пробел: &nbsp; Центрирование:

текст (картинка) по центру <center>ваш текст (картинка) </center>Выравнивание текста по правому краю поста: <div align=right> ваш текст </div>Выравнивание текста по всей ширине поста: <div align=justify> ваш текст </div> Отступ (для цитат и определений, текст отделен пустой строкой и отступ слева 8 пробелов): <blockquote> текст </blockquote> Бегущая строка (рекомендую Бегущая строка):бегущая, как олень, строка <marquee> ваша бегущая строка</marquee> Вместо текста можно вставить картинку: Код этой картинки:<marquee><img src="АДРЕС КАРТИНКИ В СЕТИ"></marquee>

Сноска вверху: ТЕКСТсноска <sup>ваша сноска</sup>

Сноска внизу: ТЕКСТсноска <sub>ваша сноска</sub>

Линия:

ее код: <hr>Ударение: Cтавим после нужной буквы:&#769;«Закрепитель» (фиксирует текст так, как и расположите его в поле поста): Я Пешу Лесинкой!!!

<pre>ваш текст</pre>

РАЗМЕР ШРИФТА:

Уменьшить текст: текст — 2 <font size="-2"> уменьшенный текст </font> Увеличить текст на 1 пункт: текст <font size="+1"> увеличить текст на 1 пункт </font>

Увеличить текст на 2 пункта: текст

<font size="+2"> увеличить текст на 2 пункта </font>

Увеличить текст на 3 пункта: текст

<font size="+3"> увеличить текст на 3 пункта </font>

Увеличить текст на 4 пункта: текст

<font size="+4"> увеличить текст на 4 пункта </font>

ЦВЕТ ШРИФТА:

КРАСНЫЙ: красный текст <font color="red"> красный текст </font> ЖЕЛТЫЙ: желтый текст <font color="yellow"> желтый текст </font> ФИОЛЕТОВЫЙ: фиолетовый текст <font color="purple"> фиолетовый текст </font> ЗЕЛЕНЫЙ: зеленый текст <font color="lime"> зеленый текст </font> СИНИЙ: синий текст <font color="navy"> синий текст </font> ФУКСИЯ: фуксия текст <font color="fuchsia"> фуксия текст </font>

Таблица «базовых» цветов (вводим «Имя» или «Код»):

ИмяКодИмяКодИмяКодИмяКод
aqua#00FFFF green#008000 navy#000080 silver#C0C0C0
black#000000 gray#808080 olive#808000 teal#008080
blue#0000FF lime#00FF00 purple#800080 white#FFFFFF
fuchsia#FF00FF maroon#800000red#FF0000 yellow#FFFF00

Выбери цвет и скопируй его код:Код для вставки виджета себе здесь

  • Другие ссылки: Таблица безопасных цветов
  • ВИД ШРИФТА:

    Шрифт этого текста «Monotype Corsiva» <font face="Monotype Corsiva"> текст </font> Все вышеперечисленные атрибуты тега font можно объединять в одном теге:Шрифт этого текста «Monotype Corsiva»код этого текста:<font face="Monotype Corsiva" size="+2" color="fuchsia"> текст </font>

    Оформление ссылок(рекомендую спец. страницу Ссылки):

    Как вставить ссылку на веб-страницу:<a href="АДРЕС СТРАНИЦЫ"> ВАШ ТЕКСТ</a>Как сделать, чтобы картинка была ссылкой на веб-страницу:<a href="АДРЕС СТРАНИЦЫ"><img src="АДРЕС КАРТИНКИ"></a>Как вставить ссылку на веб-страницу, чтоб она открылась в новом окне:<a href="АДРЕС СТРАНИЦЫ" target="_blank">ВАШ ТЕКСТ</a>

    Спец. теги ЖЖ:

    Элементарный жж-кат (с “Read more”):<lj-cut> ТЕКСТ </lj-cut>Друзья, для тегов ЖЖ я завел отдельную страницу:htmlka.com/livejournalНа нее также можно зайти, кликнув на Livejournal вверху справа в сайдбаре.

    Публикация картинок

    Раздел о публикации картинок перемещен на страницу: htmlka.com/picturesОна же в сайдбаре вверху сбоку в разделе Страницы: Изображения.

    Окошечко для вставки кода, типа: ВАШ КОД получаем так:<textarea rows="2" cols="60"> ВАШ КОД </textarea>где rows и cols определяют площадь окна

    Такое красивое окошечко с кодом:

    <textarea>ВАШ КОД</textarea>

    Получаем таким образом:

    <textarea>КОДЫ </textarea>

    Кнопка-ссылка на веб-страничкуНапример, на эту:

    <form action="http://htmlka.com" target="_blank" method="get"><input type="submit" value="htmlka"></form>

    Некоторые спецсимволы:

    Спецсимвол Вид в браузере
    &lt; <
    &gt; >
    &amp; &
    &quot; "
    &reg; ®
    &trade;
    &copy; ©
    &hearts;
    &times; ×
    &asymp;
    &bull;
    &deg; °(градус)
    много символов

    Если вы видите это: ★, ☠, ☭ — есть смысл посмотреть «Прочие» спецсимволы HTML, пока редко включаемые в официальные таблицы спецсимволов.

    Он-лайн аудио-плеерыВставить файл mp3 в блог:— читайте Вставка Медиа-файлов

    Разное

    • Поиск упоминаний о себе в блогах• Счетчики статистики• Советы по работе с html• Хитрости в ЖЖ и не только

    Кнопка на этот сайт: Помощь блогерукод для вставки этой кнопки себе: <a href=http://htmlka.com/ target=_blank><img src=/800/600/http/htmlka.com/wp-content/uploads/2009/07/butto.png border=0 alt="htmlka.com — помощь блогеру" title="htmlka.com — помощь блогеру" /></a>↑ В НАЧАЛО СТРАНИЦЫ ↑
  • htmlka.com

    Цвет ссылок | htmlbook.ru

    С помощью HTML можно задавать цвета всех ссылок на странице, а также изменять цвета для отдельных ссылок.

    Задание цвета всех ссылок на странице

    Цвета ссылок задаются в качестве атрибутов тега <body>. Атрибуты являются необязательными и если они не указаны используются значения по умолчанию.

    link — определяет цвет ссылок на веб-странице (цвет по умолчанию синий, #0000FF).

    alink — цвет активной ссылки. Цвет ссылки меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный, #FF0000.

    vlink — цвет уже посещенных ссылок. Цвет по умолчанию фиолетовый, #800080.

    В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #rrggbb, где r, g и b обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ # (пример 1).

    Пример 1. Задание цветов ссылок

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Цвет ссылок</title> </head> <body link="red" vlink="#cecece" alink="#ff0000" bgcolor="black"> <p><a href="content.html">Содержание сайта</a></p> </body> </html>

    Цвет не обязательно задавать в шестнадцатеричном формате, можно использовать и ключевые слова. В данном примере цвет фона веб-страницы установлен черным, а цвет ссылок — красным.

    Для изменения цвета ссылок удобнее использовать CSS. Чтобы установить цвет для всех ссылок на веб-странице применяются следующие псевдоклассы, которые добавляются к селектору A.

    visited — Стиль для посещенной ссылки.

    active — Стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

    hover — Стиль для ссылки при наведении на нее мышью.

    В примере 2 показано, как изменить цвет ссылок на веб-странице с помощью стилей. Для этого воспользуемся стилевым свойством color, оно задает цвет определенного текста, в данном случае, ссылок.

    Пример 2. Цвет ссылок, заданных через стили

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Использование стилей</title> <style type="text/css"> BODY { background: black; /* Цвет фона веб-страницы */ } A { color: red; /* Цвет ссылок */ } A:visited { color: #cecece; /* Цвет посещенных ссылок */ } A:active { color: #ffff00; /* Цвет активных ссылок */ } </style> </head> <body> <p><a href="content.html">Содержание сайта</a></p> </body> </html>

    Задание цвета отдельных ссылок на странице

    Вышеописанный способ задания цветов работает для всех ссылок веб-страницы. Однако, иногда возникает необходимость одновременно использовать разные цвета. Светлые, например, для темных областей веб-страницы, а темные цвета — соответственно для светлых. Для этого также можно воспользоваться стилями.

    Для изменения цвета ссылки следует использовать атрибут в теге <a>, где #rrggbb — цвет в шестнадцатеричном представлении. Можно, также, использовать названия цветов или указывать цвет в формате: rgb (132, 33, 65). В скобках указаны десятичные значения красного, зеленого и синего цвета (пример 3).

    Пример 3. Изменение цвета ссылки с помощью стилей

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Цвет ссылок</title> </head> <body link="#ffcc00" vlink="#cecece" alink="#ff0000" bgcolor="black"> <p><a href="content.html">Содержание сайта</a></p> <p><a href="1.html">Интернет-маркетинг</a></p> <p><a href="2.html">Юзабилити</a></p> </body> </html>

    В данном примере приведены три разных способа задания цвета с помощью стилей.

    htmlbook.ru