- •Цветовая гамма в html.
- •Заголовки
- •Набор текста
- •Разделители
- •Верхние и нижние индексы
- •Шрифты различного начертания
- •Типы списков
- •Нумерованный список
- •Списки определений
- •Списки в списках
- •Объединение нескольких столбцов в одну ячейку
- •Включение списка в таблицу
- •Выравнивание текста в таблице
- •Цвета в таблице
- •Предварительное форматирование
- •Отображение изображения на странице
- •Оптимальные размеры изображений
- •Альтернативный текст
- •Выравнивание изображений
- •Задание размера изображения
- •Пиктограммы
- •Линии и полосы
- •Фон страниц
- •Создание ссылкина местные веб-страницы
- •Ссылки на любое место в www
- •Создание якоря
- •Ссылка на якорь
- •Компоновка ссылок в виде списков
- •Задание к лабораторной работе № 6:
Шрифты различного начертания
Обычно на компьютере установлено около 37 шрифтов. Internet Explorer позволяет задавать начертание (гарнитуру) шрифта, которым текст будет выведен на экран, с помощью параметра тэга <font> «face». Воспользуйтесь ключевым словом 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> |
Вот что получится в результате:
Красный |
Другие способы изменения цвета
Менять стандартный цвет страницы можно с помощью ключевого тэга <body>.
Отображение специальных символов
Иногда возникает необходимость отображать специальные символы на странице. Такие символы как &, < >, ®, ©, ™, используются при написании некоторых тэгов. Другие символы не содержатся в обычном алфавите. Кроме того, существуют символы, используемые в иностранных языках, но не содержащиеся в английском - например, чтобы правильно отобразить на веб-странице слово franзais вам понадобится набрать fran, набрать ç, и ais. Смотрим:
français |
Вот что получится в результате:
franзais |
Таким же образом можно вставлять любые символы.
|
||||||
Символ |
|
HTML-тэг |
|
Символ |
|
HTML-тэг |
|
||||||
< |
|
< |
|
> |
|
> |
& |
|
& |
|
" |
|
" |
© |
|
© |
|
® |
|
® |
™ |
|
™ |
|
ў |
|
¢ |
Ј |
|
£ |
|
¤ |
|
¤ |
Ґ |
|
¥ |
|
§ |
|
§ |
Ё |
|
¨ |
|
Є |
|
ª |
« |
|
« |
|
¬ |
|
¬ |
Ї |
|
¯ |
|
° |
|
° |
± |
|
± |
|
І |
|
² |
і |
|
³ |
|
ґ |
|
´ |
µ |
|
µ |
|
¶ |
|
¶ |
· |
|
· |
|
з |
|
ç |
ё |
|
¸ |
|
№ |
|
¹ |
є |
|
º |
|
» |
|
» |
ј |
|
¼ |
|
Ѕ |
|
½ |
ѕ |
|
¾ |
|
ї |
|
¿ |
А |
|
À |
|
Б |
|
Á |
В |
|
 |
|
Г |
|
à |
Д |
|
Ä |
|
Е |
|
Å |
Ж |
|
Æ |
|
И |
|
È |
Й |
|
É |
|
К |
|
Ê |
Л |
|
Ë |
|
М |
|
Ì |
Н |
|
Í |
|
О |
|
Î |
П |
|
Ï |
|
Р |
|
Ð |
С |
|
Ñ |
|
Т |
|
Ò |
У |
|
Ó |
|
Ф |
|
Ô |
Х |
|
Õ |
|
Ц |
|
Ö |
Ч |
|
× |
|
Ш |
|
Ø |
Щ |
|
Ù |
|
Ъ |
|
Ú |
Ы |
|
Û |
|
Ь |
|
Ü |
Э |
|
Ý |
|
Ю |
|
Þ |
Я |
|
ß |
|
|
|
|
|
||||||
В приведенном выше списке отображено только часть существующих специальных символов.
Задание к лабораторной работе №2.
Добавить текстовую информацию на свою страницу о своих увлечениях, интересах, о том, как проводите свободное время.
Отформатировать занесенный вами текст, используя тэги стилевого оформления текста, а так же при помощи тэга <font> и специальных символов.
Урок HTML № 3.
Списки и таблицы
Сегодня списки можно увидеть почти на каждой веб-странице. Существует несколько форматов списков, позволяющих выделить определенные фрагменты информации в стандартном тексте. Пункты списка отступают от полей, отделены от остальных абзацев текста и, кроме того, часто маркированы или нумерованы.
При правильном использовании списки делают большие объемы информации легко читаемыми и хорошо заметными. Списки могут быть вложены друг в друга, образуя сложную структуру. Вы можете, например, использовать список для перечисления ваших интересов или для организации ссылок.
Таблицы содержат информацию, расположенную по строкам и столбцам, и играют большую роль в организации веб-страницы. Они отображаются практически всеми веб-браузерами.
Таблицы очень удобны для представления большого количества связанной между собой информации в формате, который легко воспринимается и хорошо располагается на странице. Все, что можно организовать в столбцы, стоит представить в виде таблицы. Компании часто используют таблицы для представления информации о товарах и ценах.
Каким образом списки помогают отформатировать текст, смотрим ниже:
|
Несмотря на то что я учусь, у меня остается довольно много свободного времени. У меня есть целый ряд интересов. Я работаю с программным обеспечением компании Microsoft. Кроме использования п/о компании Microsoft я использую программу Far Manager для обработки HTML-данных. Одно из моих любимых занятий - бродить по интернету, выискивая полезные ресурсы. Еще мне нравиться слушать музыку группы Prodigy и песни исландской певицы Bjцrk. |
|
Этот абзац был слишком длинным. Кроме того, информация в нем повторялась и была плохо организована. Ниже приведен отрывок HTML-кода, показывающий, как можно его привести в порядок с помощью списков.
Мои интересы: <ul> <li> Програмное обеспечение от Microsoft и Far Manager <li> Обозрение WWW <li> Слушаю Prodigy и Bjцrk </ul> |
Вот что получится в результате:
Мои интересы: Програмное обеспечение от Microsoft и Far Manager Обозрение WWW Слушаю Prodigy и Bjork |
В итоге проведенного форматирования информации, текст стал более наглядный и читабельный.