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, но и по другим:
- http://... – создает ссылку на www-документ;
- ftp://... – создает ссылку на ftp-сайт или расположенный на нем файл;
- mailto:... – запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком &";
Дополнительные примеры
Открытие ссылки в новом окне браузера
Этот пример показывает, как открыть ссылку на другую страницу в новом окне,
чтобы посетителю не нужно было покидать ваш 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
Поэтому, если вы имеете какой-либо нестандартный шрифт и хотите его использовать, вам придется: а) доставить этот файл пользователю, что, учитывая вес файла в 1
50–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