HTML — Урок 2. Работа с текстом

Фев 21 • HTML-уроки • 1189 Views • Комментарии к записи HTML — Урок 2. Работа с текстом отключены

Итак, кое-что мы уже знаем. И сегодня поработаем с текстом в формате HTML. По-моему, самое время наполнить наши странички содержимым. Я думаю, вы уже решили о чем будете писать? Если нет, возьмите какой-нибудь небольшой текст, с заголовками и, открыв наш любимый shablon.html, вставьте его между тегами и . Можете даже набрать этот текст в Word. Обычно я так и делаю. Порою текст приходится неоднократно править, что-то добавлять, исправлять ошибки и неточности. А потом, уже окончательный вариант копирую, и вставляю в Блокнот.

HTML - Урок 2. Работа с текстом
Я решила для примера вставить текст из одной газеты. Правда, автор там не был подписан, так что прошу прощения за плагиат. Но эта история очень мне нравится. Надеюсь, понравится и вам…

Вот как я набрала в Word:

HTML - Урок 2. Работа с текстом
Вот так вот получилось. А теперь я это скопирую и помещу в Блокнот между тегами и , вот так:

HTML - Урок 2. Работа с текстом
И сохраним этот файл, скажем под именем «istoriya_lubvi.html«, затем откроем этот файл в окне браузера и что же мы увидим? А увидим мы примерно следующее:

HTML - Урок 2. Работа с текстом
Вот так получается без тегов форматирования!

Ну и где же, спрашивается, наш текст, разбитый на абзацы? Где выделенный и помещенный в центр заголовок? Где наш особенный шрифт? Почему наш текст слился в окне браузера, подобно манной каше? Да, к сожалению — наши браузеры не распознают все то, что мы сейчас вставили в Блокнот.

Но сейчас мы это поправим! А на помощь к нам придут теги форматирования! Итак:

— Теги форматирования —

Итак, чтобы нам разбить текст на абзацы, всего-навсего нужно поставить перед каждым абзацем тег P . Хочу вас обрадовать, что этот тег может и не иметь закрывающего собрата с косой чертой.

А чтобы выделить отдельные слова, нужно эти слова заключить в контейнер с тегами, каждый тег отвечает за один параметр. Так, например, тег B отвечает за жирный текст,
I
за наклонный, и, кроме того существуют специальные теги для заголовков. Всего для заголовков существует 6 уровней: от H1 до H6. Самый крупный — H1, самый мелкий — H6. Не забывайте только, что у всех этих тегов существуют парные теги, то есть после того слова, который вы хотите выделить нужно не забыть поставить закрывающийся тег с косой чертой. Контейнеры можно вставлять один в другой, только вставлять нужно правильно, как маленькую матрешку — в большую. Например, будет правильно написать:

HTML - Урок 2. Работа с текстом
а вот так неправильно:
HTML - Урок 2. Работа с текстом

Для того, чтобы наши заголовки, либо отдельный текст разместить по центру, необходимо добавить атрибут выравнивания alignHTML - Урок 2. Работа с текстом:

Теперь откроем наш файл “istoriya_lubvi.html” и внесем необходимые изменения:

HTML - Урок 2. Работа с текстом

Сохраним наш документ под именем “istoriya_lubvi2.html“, и посмотрим, что же у нас вышло:

HTML - Урок 2. Работа с текстом

Вот кажется то, что и нужно! А теперь попробуем еще некоторые теги:

HTML - Урок 2. Работа с текстом

— Шрифты —

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

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

Вот некоторые шрифты: Verdana, Arial, Helvetica, Courier, Times New Roman, Impact, Comic Sans MS, Half и многие-многие другие. Мы можем написать один и тот же текст разными способами:

HTML - Урок 2. Работа с текстом

СТИХОТВОРЕНИЕ

СТИХОТВОРЕНИЕ

СТИХОТВОРЕНИЕ

СТИХОТВОРЕНИЕ

СТИХОТВОРЕНИЕ

И в окне браузера вы заметите, что на самом деле, СТИХОТВОРЕНИЕ написано будет по-разному.

Вы можете перечислить несколько шрифтов, и тогда у пользователя может быть какой-то из перечисленных и найдется! Поэтому вы можете написать:

HTML - Урок 2. Работа с текстом

И будьте уверены, браузер пользователя сначала поищет у себя шрифт Verdana, и если такого шрифта не обнаружит, побежит искать Arial. Если и такого шрифта не отыщется, попробует последний шанс — Helvetica. Если же и этого шрифта не окажется, то тогда поставит тот шрифт, который у пользователя установлен по умолчанию. И на этом успокоится.

— Размер шрифта —

По умолчанию размер шрифта равняется 3 пунктам. Но, при желании мы можем увеличить или уменьшить его размер с помощью атрибута size. Для этого есть два пути. Абсолютный и относительный. Абсолютный, это когда мы прямым текстом говорим, сколько пунктов должен иметь наш текст. Так, например, выражение “FONT size=5” говорит о том, что наши буквы должны иметь размер 5 пунктов. Ни больше ни меньше! Так попытайтесь угадать, какой размер должен иметь текст “FONT size=2“? Совершенно правильно! Два пункта! А сколько “FONT size=20“? Думаете 20? Ничего подобного. Всему есть предел! Вот и тут тоже предел от 1 до 7.

Как и говорила, есть еще один путь — относительный. Это если за основу взять те три пункта, которые приняты по умолчанию. И прибавляя, либо отнимая число пунктов, можно увеличивать или уменьшать наши пунктики. А вот и примеры:

HTML - Урок 2. Работа с текстом

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

— А теперь расскрасим наш текст! —

Для этого существует атрибут color. Вот с этим колером мы сейчас и поработаем. Вообще, цвета можно задавать двумя разными способами. Первый — можно использовать словесное обозначение цвета: blue, black, yellow, green, white и т.д. А можно — и их цифровое обозначение, только не забывайте перед цифровым эквивалентом ставить “решетку”! Так, цвет “blue” имеет свое числовое значение “#0000ff”, цвет “red” — значение “#FF0000″ и так далее. То есть если мы напишем:

HTML - Урок 2. Работа с текстом

Обе эти записи будут идентичны. И в окне браузера слово “СТИХОТВОРЕНИЕ” будет красным.

Приведу таблицу некоторых цветов:

цвет color код
aква Aqua 00FFFF
Черный black 000000
Синий blue 0000FF
Фуксия fuchsia FF00FF
Серый gray 808080
Зеленый green 008000
Известь< td> lime 00FF00
Темно-бордовый maroon 800000
Темно-синий navy 000080
Оливковый olive 808000
фиолетовый purple 800080
Красный red FF0000
Серебряный silver C0C0C0
Чирок teal 008080
Белый white FFFFFF
желтый yellow FFFF00

Поэкспериментируйте с разными тегами — попробуйте сделать заголовки разных размеров, текст пишите разными шрифтами, да попробуйте повыделять текст жирным или наклонным, а, может даже и жирным и наклонным одновременно. А если текст будет разноцветный, то будет значительно веселее.

В следующем уроке мы познакомимся с фоном для нашей странички и начнем изучать таблицы. А может, это будет два разных урока. Я пока еще не решила.

Related Posts

Comments are closed.

« »