ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 02.04.2024
Просмотров: 444
Скачиваний: 0
СОДЕРЖАНИЕ
Как списки помогают организовать нам информацию
Как создать список на вашей странице
Объединение нескольких столбцов в одну ячейку
Предварительное форматирование
Где вы сможете найти графику, изображения и рисунки
Как поместить изображение на страницу
Оптимальные размеры изображений
Как браузеры работают с прозрачными изображениями
Создание прозрачных gif-изображений
Создание якоря и присвоение ему якоря
Компоновка ссылок в виде списков
Текст ссылок должен быть понятным
Как работают изображения-карты
Изображения-карты не являются новой технологией
Различия между серверными и клиентскими изображениями-картами
Разбиение изображения на фрагменты
Совершенствования веб-страницы
Развертывание веб-страницы в веб-узел
Верхние и нижние индексы
В последних версиях HTML появилось еще два новых тега - теги нижнего и верхнего индексов. Вряд ли вы будете часто использовать эти теги, но они очень удобны, когда вам нужно отобразить в своей странице такую специфическую информацию как химические формулы (H2O) или математические формулы (a2=b+c2).
Чтобы текст выводился в виде нижнего индекса, его следует пометить между тегами <sub> и </sub>, в виде верхнего - <sup> и </sup>. Например:
Химическая формула воды - H<sub>2</sub>0 |
Используемая нами формула - a<sup>2</sup>=b+c<sup>2</sup> |
Вот что мы получим в результате:
Химическая формула воды - H20 |
Используемая нами формула - a2=b+c2 |
Уроки html'а. Урок # 4.
Теперь я расскажу вам о размерах шрифта. Тег <font> имеет дополнительные возможности для задания размера шрифта основного текста. Вместо определенного номера вы можете задать относительный размер шрифта, например +3 или -1. Браузер прибавляет (или вычитывает) заданное число к номеру шрифта, используемого по умолчанию (размер 3). На пример:
<font size=+3>текст заданный параметром +3</font> <font size=-2>текст заданный параметром -2</font> |
Вот что мы получим в результате:
текст заданный параметром +3 текст заданный параметром -2 |
Поскольку шрифт обычно имеет размер +3, первая строка приведенного кода будет выведена на экран шрифтом 6 (3+3=6), а вторая будет иметь размер 1 (3-2=1).
Часто относительное задание размеров используется для вывода первой буквы фразы более крупным шрифтом, чем остальное предложенное. Этот метод позволяет привлечь внимание к определенному фрагменту веб-страницы.
Ниже даны примеры вывода первого символа более крупным шрифтом, чем остальное предложенное:
<font size=5>П</font>римеры из книги<br> <font size=6>Г</font>лава <font size=6>4</font> |
Вот что мы получим в результате:
Примеры из книги Глава 4 |
Вложенные теги <font>
Вы можете применять вложенные друг в друга теги <font size=...>, но их действие окажется не совсем таким как вы об этом думаете. Скажем, вы хотели чтобы 3 слова были выделены шрифтом последовательно увеличивающегося размера: Крупный, крупнее, крупнейший. Скорее всего вы захотите использовать три вложенных теги <font>:
<font size=+1>Крупный, <font size=+1>Крупнее, <font size=+1>Крупнейший</font></font></font>. |
Вот что мы получим в результате:
Крупный, Крупнее, Крупнейший. |
Естественно предположить, что при этом шрифт первого слова Крупный будет увеличен на один номер; затем слова Крупнее увеличатся еще на один размер, а затем шрифт слова Крупнейший возрастет в совокупности на три номера. Но браузер поймет это иначе.
Теги <font> не являются кумулятивными. Каждый тег <font size=+1> задает увеличение размера до 3+1=4, но это не говорит о том, что последующие теги будут следовать алгоритму 3+1+1=5 -> 3+1+1+1=6.
Чтобы последовательно увеличить размер шрифта, следует записать HTML-код следующим образом:
<font size=+1>Крупный</font>, <font size=+2>Крупнее</font>, <font size=+3>Крупнейший</font>. |
Вот что мы получим в результате:
Крупный, Крупнее, Крупнейший. |
Шрифты различного начертания
Обычно на компьютере установлено около 37 шрифтов. Internet Explorer позволяет задавать начертание (гарнитуру) шрифта, которым текст будет выведен на экран, с помощью нового ключевого слова в теге <font>. Делается это вот так. Воспользуйтесь ключевым словом face="...", и брозуер попытается отобразить текст тем альтернативным шрифтом, который вы указали. Например:
<font face="Arial">Шрифт Arial</font><Br> <font face="Courier New">Шрифт Courier New</font><Br> <font face="Times">Шрифт Times</font><Br> <font face="MS Sans Serif">Шрифт MS Sans Serif</font><Br> |
Вот что мы получим в результате:
Шрифт Arial Шрифт Courier New Шрифт Times Шрифт MS Sans Serif |
Этот фрагмент кода (face="...") сообщает браузеру, что отмеченый тегом <font> текст должен быть отображен шрифтами указанными внутри face="..." [Arial, Courier New, Times, MS Sans Serif].
Тег <font> работает следующим образом. Сначала браузер выясняет, какой шрифт вы задали, - в нашем случае Arial (возьмем за пример первую строку). Затем он проверяет, установлен ли шрифт Arial на персональном компьютере посетителя веб-страницы. Если да, то браузер отображает текст, используя этот шрифт. Если по какой-либо причине не удается найти шрифт Arial, браузер просто выводит текст стандартным шрифтом, как если бы тега <font face="Arial"> вообще не было.
При желании можно задать список шрифтов, которые браузер будет искать перед тем, как прибегнет к шрифту, заданному по умолчанию.
<font face="Arial, Courier New, Times, MS Sans Serif"> |
В этом случае, если браузер не обнаружит шрифт Arial, он будет искать шрифт Courier New; если и Courier New не будет установлен, он пойдет дальше...
Используя этот тег для выделения фрагмента, помните, что такое выделение увидят лишь только те посетители страницы, на чьих компьютерах установлен соответствующий шрифт. И еще, некоторые шрифты имеют разный размер, это видно из таблицы на абзац выше. Это говорит о том, что нерациональное применение разных шрифтов некрасиво отразится на дизайне вашего сайта.
При использовании данного тега важно правильно называть шрифты. Чтобы увидеть список шрифтов, установленных на вашем компьютере, вам нужно выполнить следующие действия: Пуск -> Настройка -> Панель управления -> Шрифты.
Управление цветом шрифта
Возможно менять цвет любого фрагмента отображаемой информации - один из самых замечательных способов придать тексту индивидуальность. Вы можете сделать так, чтобы слово или предложение автоматически отображалось одним из миллионов различных оттенков. Вы также можете выбрать ваш собственный цвет, смешивая различные оттенки красного, зеленого и синего.
Использование ключевого слова color=... тега <font> дает возможность задавать один из нескольких цветов для отображения текста, например:
<font color="red">Красный</font> |
Вот что мы получим в результате:
Красный |
Уроки html'а. Урок # 5.
Другие способы изменения цвета
Менять стандартный цвет страницы можно с помощью ключевого тега <body>. Это ключевое слово также использует цветовую схему, описанную в первом уроке. Подробней об этом можно прочесть в этом же первом уроке.
Отображение специальных символов
Иногда у вас могут возникнуть проблемы при попытке отобразить некоторые символы на веб-странице. Такие символы как &, < >, ®, ©, ™, используются при написании некоторых тегов. Другие символы не содержатся в обычном алфавите. Кроме того, существуют символы, используемые в иностранных языках, но не содержащиеся в английском - например, чтобы правильно отобразить на веб-странице слово français вам понадобится набрать fran (буквы до селиля), набрать ç, и ais (буквы после седиля). Смотрим:
français |
Вот что мы получим в результате:
français |
Таким же образом можно вставлять любые символы. Сейчас я приведу примеры наиболее распространенных.
|
||||||
Символ |
|
HTML-тег |
|
Символ |
|
HTML-тег |
|
||||||
< |
|
< |
|
> |
|
> |
& |
|
& |
|
" |
|
" |
© |
|
© |
|
® |
|
® |
™ |
|
™ |
|
¢ |
|
¢ |
£ |
|
£ |
|
¤ |
|
¤ |
¥ |
|
¥ |
|
§ |
|
§ |
¨ |
|
¨ |
|
ª |
|
ª |
« |
|
« |
|
¬ |
|
¬ |
¯ |
|
¯ |
|
° |
|
° |
± |
|
± |
|
² |
|
² |
³ |
|
³ |
|
´ |
|
´ |
µ |
|
µ |
|
¶ |
|
¶ |
· |
|
· |
|
ç |
|
ç |
¸ |
|
¸ |
|
¹ |
|
¹ |
º |
|
º |
|
» |
|
» |
¼ |
|
¼ |
|
½ |
|
½ |
¾ |
|
¾ |
|
¿ |
|
¿ |
À |
|
À |
|
Á |
|
Á |
 |
|
 |
|
à |
|
à |
Ä |
|
Ä |
|
Å |
|
Å |
Æ |
|
Æ |
|
È |
|
È |
É |
|
É |
|
Ê |
|
Ê |
Ë |
|
Ë |
|
Ì |
|
Ì |
Í |
|
Í |
|
Î |
|
Î |
Ï |
|
Ï |
|
Ð |
|
Ð |
Ñ |
|
Ñ |
|
Ò |
|
Ò |
Ó |
|
Ó |
|
Ô |
|
Ô |
Õ |
|
Õ |
|
Ö |
|
Ö |
× |
|
× |
|
Ø |
|
Ø |
Ù |
|
Ù |
|
Ú |
|
Ú |
Û |
|
Û |
|
Ü |
|
Ü |
Ý |
|
Ý |
|
Þ |
|
Þ |
ß |
|
ß |
|
|
|
|
|