Шрифт, цвет, размер

Урок 2

Тема: «Работа с текстом»

Рздатка: основные теги, таблица шрифтов, таблица цветов

Повторение.

Назовите основные теги.

Наполняем сайт содержимым

Для того, чтобы наполнить свою страничку содержимым, а точнее текстом, надо вставить его между тегами < BODY> …< /BODY>. Текст можно набирать прямо в программе Блокнот, а можно набрать его в программе Word и затем скопировать и вставить между тегами < BODY> …< /BODY>.

Практика: Откройте файл шаблон и скопируйте текст из файла text.doc в папке урока.

Сохраните полученный файл под именем text.html и откройте его в окне браузере. Ну и где же наш текст любовно разбитый на абзацы? Где оформление? Где выравнивание заголовка по центру?

Выравнивание, начертание

Для того, чтобы разбить текст на абзацы нужно перед началом каждого абзаца поставить тег < p>. Это непарный тег!

Выравнивание текста:

Для выравнивания текста используется атрибут < p align=…>

< align=center> выравнивание по центру;

< align=right> выравнивание по правому краю;

< align=left> выравнивание по левому краю;

< align=justify> выравнивание по ширине.

Для переноса текста на новую строчку в нутрии текущего абзаца используется тег < BR>.

Выделение слов:

< B> …< /B> жирный шрифт;

< I> …< /I> курсивный шрифт;

< U> …< /U> подчеркнутый шрифт;

< STRIKE> …< /STRIKE> перечеркнутый шрифт;

< SUP> …< /SUP> ^{верхний} индекс;

< SUB> …< /SUB> _нижний индекс.

Тег можно вставлять один в другой, но правильно, например:

< B> < I> Правильно < /I> < /B>, а вот так не правильно < B> < I> Неправильно < /B> < /I>.

Для заголовков существуют специальные парные теги от < H1> … < /H1> до < H6> …< /H6>. Самый крупный - < H1>, самый мелкий - < H6>. Применение в документах именно этих тегов крайне желательно, т.к. многие поисковые серверы отыскивают и считывают содержимое именно этих дескриптов, что способствует популяризации и упрощает поиск вашей информации потенциальными пользователями.

Практика: Оформить абзацы в тексте, использовать разное выравнивание и начертание.

Шрифт, цвет, размер

Парный тег < FONT> …< /FONT> определяет все атрибуты шрифта. С его помощью можно указать тип, размер, цвет и некоторые другие свойства.

По умолчанию браузеры используют шрифты Times Roman, но если вы захотите изменить шрифт, то это можно сделать с помощью атрибута < face>, но стоит учитывать, что шрифт, который вы укажете может отсутствовать у пользователя, читающего вашу страничку. Но эту проблему можно решить, указав не один, а несколько похожих шрифтов сразу.

Вот некоторые шрифты:

? Verdana,

? Arial,

? Times New Roman,

? Impact,

? Comic Sans MS,

? Half,

? Arbat.

Чтобы оформить текст одним из этих шрифтов необходимо написать следующий тег:

< FONT FACE=”Tahoma”> текст, для которого настраивается шрифт < /FONT>

Для того, чтобы указать несколько возможных шрифтов, необходимо написать следующий тег:

< FONT FACE=”Tahoma, Arial, Arbat”> текст, для которого настраивается шрифт < /FONT>

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

Практика: изменить начертание шрифтов, каждого абзаца.

По умолчанию размер шрифта = 3 пункта. Но, при желании мы можем уменьшить или увеличить размер с помощью атрибута < SIZE>. Для этого есть два пути: абсолютный и относительный. Абсолютный – это когда мы напрямую указываем размер шрифта, например: font size=5 (буквы будут иметь размер 5 пунктов) Можно указывать размер от 1 до 7. Мало ли кому захочется сделать размер в километр J.

Относительный путь указания размера – это, когда за основу берется те 3 пункта, о которых я говорила выше, например:

? font size=+3 означает 3+3=6 пунктов

? font size=+1 означает 3+1=4 пунктов

? font size=-1 означает 3-1=2 пунктов

Практика: Изменить размеры каждого шрифта.

Для того, чтобы сделать текст цветным используется атрибут < color>. Цвета можно задавать двумя различными способами.

Первый способ: использовать словесное обозначение цвета: blue, black, yellow, red и т.д.

Второй способ: использовать цифровой эквивалент, перед которым ставится знак #, например: голубой цвет blue – #0000ff, а красный цвет red – #ff0000.

Т.о. записываться следующий тег:

< FONT color=red> окрашиваемый текст < /FONT>

Или

< FONT color=#ff0000> окрашиваемый текст < /FONT>.

Оба способа дадут идентичный результат.

Практика: Окрасить абзацы разными цветами.

Вывод: Можно использовать три основных атрибута шрифта: шрифт, размер, цвет, которые указываются через пробелы, например:

< FONT face =”Tahoma” color =#ff0000 size =+3 > --текст-- < /font>