Поделиться
Л2-001710.docx
1. Форматирование текста 2
2.
Текстовые гиперссылки
3. Ссылка на адрес электронной почты
После того, как мы узнали о том, как задавать размер шрифта, настало время поговорить о том, как определить стиль шрифта. На этом уроке вы узнаете, как выделить текст курсивом, подчеркнуть, перечеркнуть, сделать полужирным, как делать верхний и нижний индексы.
Сначала рассмотрим курсив и полужирный текст:
<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
Как видите, все просто. Можете их сами поставить в тексте, где хочется. Например:
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body text=blue bgcolor=yellow>
<div align=center>
<h2>Привет, это моя
первая страница.</h2>
<font color=red><b>Добро
пожаловать!</b></font>
</div>
<p align=justify>
<font color=green>Спасибо Вам, уважаемый посетитель, за то, что Вы нашли время и возможность зайти на мою страницу в Internet. Здесь Вы сможете узнать о моих увлечениях, моей биографии, моей семье, друзьях и работе. Также в скором будущем Вы увидите здесь мои фотографии. <font size=+1 color=green><i> Приятного просмотра.</i> </font> </font>
</p>
</body>
</html>
К одному фрагменту текста может применяться сразу несколько тэгов:
<b><i> Текст </i></b>
Однако создатели языка HTML предостерегают программистов от злоупотребления этими тэгами, поскольку не все браузеры умеют их правильно распознавать. Именно поэтому рекомендуется использование аналогичных тэгов:
<strong> Полужирный текст </strong>
<em> Наклонный текст (курсив) </em>
Подчеркнутый текст вводится при помощи тэга <u>:
<u> Подчеркнутый текст </u>
Тэги <strike> и <s> представляют текст перечеркнутым шрифтом, можете использовать какой вам угодно из них, принципиальной разницы между ними нет:
<strike>
Перечеркнутый </strike>
<s>
Перечеркнутый </s>
Тэг <big> представляется крупным шрифтом, а <small> малым шрифтом относительно основного текста:
<small> Малый </small>
Нормальный текст
<big> Большой </big>
Тэги sup и sub - определяют верхний и нижний индексы. Sup - верхний, sub - нижний. Где они могут пригодиться? Ну, например, при написании какой-нибудь формулы, например воды – H2O.
Верхний индекс <sup> sup </sup>
Нижний индекс <sub> sub </sub>
Мы уже с вами ознакомились с атрибутами size и color для тэга <font>. На этом уроке, мы завершим наше знакомство с тэгом <font>, изучив атрибут face. С помощью face мы можем задать тип шрифта.
Попробуйте ввести следующую конструкцию в ваш документ для части текста, чтобы задать шрифт Arial:
<font face="arial"> текст (шрифт Arial)</font>
<html>
…
…Также в скором будущем Вы увидите здесь мои фотографии. <font face=”Arial” size=”+2” color=green><i> Приятного просмотра.</i> </font> </font>
…
</html>
Какие же типы шрифтов являются стандартными, и по идее должны находиться на компьютере каждого пользователя – это: Times, Times New Roman, Arial, Helvetica, Courier, Verdana, Tahoma, Cosmic Sans MS, Garamond.
Вы можете безбоязненно использовать любой из них.
В атрибуте face можно указать сразу несколько типов шрифтов:
<font face="arial, verdana, courier"> текст (шрифт Arial) </font>
В этом случае если у посетителя не окажется на компьютере шрифта Arial, то текст будет отображен шрифтом Verdana. Если и Verdana нет на компьютере вашего посетителя, то текст будет отображен шрифтом Courier. Т.е. в атрибуте face мы можем задать список разделенных запятыми названий шрифтов, которые браузер вашего посетителя должен попытаться найти у него на компьютере и отобразить в порядке приоритета.
Обычно WEB-странички состоят из нескольких документов. Один из них главный (index.html) - он открывается первым и должен обязательно лежать на вашем сайте в интернете. Остальные документы вы можете называть как угодно (photos.html, about_me.html, friends.html или gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных.
При помощи ссылок мы связываем эти документы. Так с главной страницы по ссылкам мы можем перейти на страницу с фотографиями, с этой страницы мы можем перейти обратно на главную страницу.
Ссылкой на эти другие документы (части нашей странички) может быть текст (фраза, слово), а может быть и картинка.
Для начала создадим новый документ (в нашем примере about_me.html) в той же директории (папке), где находится ваш главный документ index.html. Содержание документа выдумайте сами, у вас для этого уже достаточно знаний.
Пусть about_me.html - документ с фотографиями. Тогда можно сделать ссылку на about_me.html:
<a href=" about_me.html">Обо мне</a>
Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст).
(1) - <a href=" about_me.html">Обо мне</a>
(2) - <a href="family/about_me.html">Обо мне</a>
(3) - <a href="http://www.homepage.ru/about_me.html">Обо мне</a>
В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на about_me.html, в случае (2) документ лежит в поддиректории /family, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.
Первые два примера (1) и (2) – называют относительными путями. (3) – абсолютный, т.е. указанный полностью, включая имя сайта (в нашем случае - http://www.homepage.ru/). Абсолютный путь мы используем, когда ссылаемся на чужие странички, относительный мы используем, когда ссылаемся на документы внутри нашего сайта.
Для всех ссылок в нашем документе мы можем прописать цвета: link - цвет просто ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки.
<body text=blue bgcolor=black link="#CC0000"
alink="#DD7777" vlink="#AAAAAA">
Посмотрите, как в данном примере заданы цвета. Это шестнадцатеричные коды. Например, код #000000 соответствует цвету black.
А цвету white соответствует код #ffffff.
Как и цвет для всего текста в документе, цвета ссылок мы прописываем в <body>. В нашем примере цвета для просто ссылки, активной и посещенной – разные, но они могут быть одинаковыми.
Итак, пропишем цвета для ссылки и саму ссылку в нашем документе:
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body text=blue bgcolor=yellow link=darkblue alink=”#DD7777” vlink=”#AAAAAA”>
<div align=center>
<h3>Привет, это моя первая страница.</h3>
<font color=red><b>Добро
пожаловать!</b></font>
</div>
<p align=justify>
<font color=green>Спасибо Вам, уважаемый посетитель, за то, что Вы нашли время и возможность зайти на мою страницу в Internet. Здесь Вы сможете узнать <a href=”about_me.html”>о моих увлечениях, моей биографии</a>, моей семье, друзьях и работе. Также в скором будущем Вы увидите здесь мои фотографии. <font face=Arial size=+1 color=gray><i> Приятного просмотра.</i> </font> </font>
</p>
</body>
</html>
Как вы помните, мы можем задать различные цвета для разных блоков текста в нашем документе (<font color="…"></font>). Для текстовых ссылок мы тоже можем задать разный цвет – это делается при помощи тэга <font> и его атрибута color:
<a href="about_me.html"><font color="#CC0000">о моих увлечениях, моей биографии</font></a>
Обратите внимание, <font color="…"></font> - прописывается внутри тэга <a></a>, если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.
А как сделать гиперссылку на почтовый ящик электронной почты (e-mail)? Ссылка на ваш почтовый ящик прописывается немного иначе, чем ссылка на другой документ (страницу, сайт):
<a href="mailto:pochta@mail.ru"> pochta@mail.ru </a>
Теперь если ваш ненаглядный посетитель нажмет такую ссылку, то его почтовая программа выдаст ему бланк нового письма с заполненным полем адреса электронной почты.
Домашнее задание: продолжите создание вашего сайта. Создайте в нем гиперссылки, на другие страницы.
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
