Wiki-учебник по веб-технологиям: HTML/ФорматированиеТекстаHTML ...

Главная | |
1 2

Форматирование Текста


<html>
<body>
<p>
Если необходимо чтобы к тексту было применено какое-либо форматирование, например, выделение <b>полужирным</b> или <i>курсивом</i>, необходимо использовать соответствующие теги форматирования.
При этом форматируемый текст помещается между тегами.
</p>
</body>
</html>

Гиперссылки


Гипертекстовые ссылки необходимы для соединения с другими документами в Web. Для их записи используется тег <a>, который называют «якорь» (аnchor).

<a href="page1.htm">
Этот текст</a> является ссылкой на страницу на
этом Web-сайте.
Изображение в качестве ссылки


Этот пример показывает, как использовать в качестве ссылки изображение.

<a href="http://www.intuit.ru/">
<img border="0" src="logo.gif" width="285" height="52">
</a>


Описание тега гипертекстовой ссылки

С помощью атрибута url можно задавать ссылки не только по протоколу HTTP, но и по другим:

Дополнительные примеры

Открытие ссылки в новом окне браузера

Этот пример показывает, как открыть ссылку на другую страницу в новом окне,
чтобы посетителю не нужно было покидать ваш Web-сайт.

<a href="lastpage.htm" target="_blank">Последняя страница</a>


Создание ссылки mailto

Этот пример показывает, как написать письмо на указанный ящик

<a href="mailto:help@intuit.ru&cc=orders@intuit.ru&bcc=admin@intuit.ru?subject=Тестовый%20запрос!">отправить запрос</a>

Шрифты


Шрифт – это таблицы замены кода видимым изображением.

То есть, собсно шрифтом. Каждая клавиша вашей клавиатуры дает определенный код, распознаваемый ОС (операционной системой, в большинстве случаев это Windows или Linux/Unix).

Таким образом, выбрав определенный шрифт, система заменяет полученный с клавиатуры код на сопоставленное в таблице символов шрифта изображение буквы или значка. Каждый шрифт – это файл. Файл, содержащий изображения букв, цифр и символов, назначаемых на каждую кнопку. Установить шрифт – означает включить в систему файл с дополнительными таблицами сопоставления. В системах MS Windows обычно используется несколько шрифтов, поставляемых вместе с системой – это:

Arial
Courier New
Comic Sans
Times New Roman
Verdana
Tahoma


Каждый из этих шрифтов уместен в своем дизайне и стиле. Наиболее распространен – Ариал. Все эти шрифты есть у 90% всех посетителей вашей будущей странички. Каждый шрифт – это самостоятельный файл в папке Windows/fonts/ *.ttf

Поэтому, если вы имеете какой-либо нестандартный шрифт и хотите его использовать, вам придется: а) доставить этот файл пользователю, что, учитывая вес файла в 150–300 кб, не пятисекундная задача, либо б) ограничиться имеющимися, заменив остальное лишь графикой, то есть, картинками (советую соблюдать меру ;0)
Как в HTML придать шрифту тот или иной вид?

Тег, назначающий шрифт – <font>содержимое тега – то, на что повлияют параметры тега</font>

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

Итак:
размер шрифта – <font size="число от 1 до 7">

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

Если правильно подобрать размеры, смотрится вполне приятно.

Кроме прочего, мы можем выбрать и сам шрифт, используемый для отображения текста. Делается это тегом face="название шрифта" (пример: face="Comic Sans MS")

Эти два тега – размер и вид шрифта, – можно расположить в любой последовательности в теге <font> – что 

<font size="1" face="Comic Sans MS">текст</font>

что 

<font face="Comic Sans MS" size="1">текст</font>

Главное тут следить, чтобы задаваемые параметры (в даном случае это имя шрифта и его размер) были выделены кавычками и находились внутри тега <font> межу font и >

Теперь, для лучшего понимания таких терминов, как «контейнер», «вложеный тег» и «наследование», рассмотрим ниже следующий пример:

<font face="Название шрифта" size="1">  
<i> 
< font size="4">Заголовок </font> 
    
   текст, текст, текст, текст, текст, текст, текст
</i> 
 
< font size="4">Заголовок </font> 


текст, текст, текст, текст, текст, текст, текст
</font>


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

Затем задана наклонность шрифта тегом <i></i> Контейнер этого тега включает в себя и заголовок (размер 4) и текст.

Так же в работе с текстом помогает и тег, обозначающий абзацы – это <p></p> – все, помещенное в них, отделяется сверху и снизу пробелом и может иметь собственные параметры абзаца,, прописываемые прямо в теге – <p align="center">текст</p>.

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

Шрифт так же может быть наклонный, выделеннный, и жирный наклонный.

Достигается это тегами

<i>текст</i>
<b>текст</b>
и их сочетанием – <b><i> текст </i></b>

Сочетание вида м – <b><i> текст</b></i> в большинстве броузеров вызовет ошибку, в результате которой ваша страничка может криво отобразиться или не отобразиться вообще: зависит от устойчивости броузера. Мозилла, например, проглотит и поймет это правильно, а вот большинство других – «заорут». Поэтому советую писать правильно.

Собственно, вот полный список таких тегов и, заодно, как это выглядит в броузере:
<b>жирный шрифт</b>
<strong>жирный шрифт</strong> – (аналог <b></b>)
<i>наклонный шрифт</i> – (курсив)
<em>наклонный шрифт</em> – (аналог <i></i>)
<u>подчёркнутый шрифт</u>
<s>перечёркнутый шрифт</s>
<strike>перечёркнутый шрифт</strike> (аналог <s></s>)
<big>текст отображается больше, чем основной шрифт</big>
<small>текст отображается меньше, чем основной шрифт</small>
<sub>нижний индекс</sub> и <sup>верхний индекс</sup>

<code>текст отображается как код или формула (чаще всего как шрифт Courier)</code>
<tt>текст отображается моноширинным шрифтом (чаще всего шрифт Courier)</tt>
<kbd>текст отображается моноширинным жирным шрифтом</kbd>
<var>отображение переменных (как правило – курсив)</var>
<cite>отображение цитат (как правило – курсив)</cite>
<address>так обозначается адрес (как правило, курсив) </address>
<blockquote>
Эта фича смещает весь абзац (заключенный в нее текст) на энный отступ слева – нужно для упрощения дизигна, чтоб не равнять таблицами или пробелами. Иногда очень облегчает жизнь :0)
</blockquote>

Попробуйте использовать и такое:

<blockquote><blockquote>

текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст..
</blockquote></blockquote>

И собственно, тег <br> – эта фича закрытия не требует.
Для тех, кто в танке: </br> не пишем!
Это просто переход к следующей строке, чтобы, например, писать стихи в столбик:
Тщетны надежды и усилья,
гранит науки покусать,
не те уж зубы, руки, крылья,
ну что ж... тогда хоть полизать... ;0)

Кроме прочего, стоило бы упомянуть такие теги, как <H1></H>, но, будучи вставлены в текст, «по умолчанию» они непоправимо изуродуют дизайн. Посему про них я напишу после рассмотрения CSS, ибо без серьезной «доводки» при помощи стилей теги эти неудобоваримы и бесполезны.

1 2