Урок 3. Практика
Оценка 4.7

Урок 3. Практика

Оценка 4.7
docx
17.11.2021
Урок 3. Практика
Л2-001710.docx

1. Форматирование текста 2

Урок 3.
Практика
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 rel="nofollow" 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>

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

Домашнее задание: продолжите создание вашего сайта. Создайте в нем гиперссылки, на другие страницы.



 

Форматирование текста 2 2. Текстовые гиперссылки 3

Форматирование текста 2 2. Текстовые гиперссылки 3

Однако создатели языка HTML предостерегают программистов от злоупотребления этими тэгами, поскольку не все браузеры умеют их правильно распознавать

Однако создатели языка HTML предостерегают программистов от злоупотребления этими тэгами, поскольку не все браузеры умеют их правильно распознавать

Times, Times New Roman, Arial,

Times, Times New Roman, Arial,

Обо мне </a> В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на about _ me

Обо мне </a> В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на about _ me

Добро пожаловать !</b></font> </div> <p align=justify> < font color = green >Спасибо

Добро пожаловать !</b></font> </div> <p align=justify> < font color = green >Спасибо
Скачать файл