HTML - Урок 2. Работа с текстом
Итак, кое-что мы уже знаем. И сегодня поработаем с текстом в формате HTML. По-моему, самое время наполнить наши странички содержимым. Я думаю, вы уже решили о чем будете писать? Если нет, возьмите какой-нибудь небольшой текст, с заголовками и, открыв наш любимый shablon.html, вставьте его между тегами и . Можете даже набрать этот текст в Word. Обычно я так и делаю. Порою текст приходится неоднократно править, что-то добавлять, исправлять ошибки и неточности. А потом, уже окончательный вариант копирую, и вставляю в Блокнот.
Я решила для примера вставить текст из одной газеты. Правда, автор там не был подписан, так что прошу прощения за плагиат. Но эта история очень мне нравится. Надеюсь, понравится и вам…
Вот как я набрала в Word:
Вот так вот получилось. А теперь я это скопирую и помещу в Блокнот между тегами и , вот так:
И сохраним этот файл, скажем под именем "istoriya_lubvi.html", затем откроем этот файл в окне браузера и что же мы увидим? А увидим мы примерно следующее:
Вот так получается без тегов форматирования!
Ну и где же, спрашивается, наш текст, разбитый на абзацы? Где выделенный и помещенный в центр заголовок? Где наш особенный шрифт? Почему наш текст слился в окне браузера, подобно манной каше? Да, к сожалению - наши браузеры не распознают все то, что мы сейчас вставили в Блокнот.
Но сейчас мы это поправим! А на помощь к нам придут теги форматирования! Итак:
- Теги форматирования -
Итак, чтобы нам разбить текст на абзацы, всего-навсего нужно поставить перед каждым абзацем тег P . Хочу вас обрадовать, что этот тег может и не иметь закрывающего собрата с косой чертой.
А чтобы выделить отдельные слова, нужно эти слова заключить в контейнер с тегами, каждый тег отвечает за один параметр. Так, например, тег B отвечает за жирный текст,
I - за наклонный, и, кроме того существуют специальные теги для заголовков. Всего для заголовков существует 6 уровней: от H1 до H6. Самый крупный - H1, самый мелкий - H6. Не забывайте только, что у всех этих тегов существуют парные теги, то есть после того слова, который вы хотите выделить нужно не забыть поставить закрывающийся тег с косой чертой. Контейнеры можно вставлять один в другой, только вставлять нужно правильно, как маленькую матрешку - в большую. Например, будет правильно написать:
а вот так неправильно:
Для того, чтобы наши заголовки, либо отдельный текст разместить по центру, необходимо добавить атрибут выравнивания align
:
Теперь откроем наш файл “istoriya_lubvi.html” и внесем необходимые изменения:
Сохраним наш документ под именем “istoriya_lubvi2.html“, и посмотрим, что же у нас вышло:
Вот кажется то, что и нужно! А теперь попробуем еще некоторые теги:
- Шрифты -
Тег FONT определяет все атрибуты шрифта. С его помощью мы можем указать тип, размер, цвет и некоторые другие свойства.
По умолчанию браузеры используют шрифт Times Roman, но если вы захотите изменить шрифт, это несложно сделать с помощью атрибута face, но нужно иметь ввиду, что тот шрифт, какой вы укажете, может отсутствовать у пользователя, читающего вашу страничку, может не оказаться такого шрифта в системе, и он увидит тогда ваш текст в той кодировке, которая у него установлена по умолчанию. Но эту проблему можно решить другим способом: указать браузеру не один, а несколько похожих шрифтов.
Вот некоторые шрифты: Verdana, Arial, Helvetica, Courier, Times New Roman, Impact, Comic Sans MS, Half и многие-многие другие. Мы можем написать один и тот же текст разными способами:
СТИХОТВОРЕНИЕ
СТИХОТВОРЕНИЕ
СТИХОТВОРЕНИЕ
СТИХОТВОРЕНИЕ
СТИХОТВОРЕНИЕ
И в окне браузера вы заметите, что на самом деле, СТИХОТВОРЕНИЕ написано будет по-разному.
Вы можете перечислить несколько шрифтов, и тогда у пользователя может быть какой-то из перечисленных и найдется! Поэтому вы можете написать:
И будьте уверены, браузер пользователя сначала поищет у себя шрифт Verdana, и если такого шрифта не обнаружит, побежит искать Arial. Если и такого шрифта не отыщется, попробует последний шанс - Helvetica. Если же и этого шрифта не окажется, то тогда поставит тот шрифт, который у пользователя установлен по умолчанию. И на этом успокоится.
- Размер шрифта -
По умолчанию размер шрифта равняется 3 пунктам. Но, при желании мы можем увеличить или уменьшить его размер с помощью атрибута size. Для этого есть два пути. Абсолютный и относительный. Абсолютный, это когда мы прямым текстом говорим, сколько пунктов должен иметь наш текст. Так, например, выражение “FONT size=5” говорит о том, что наши буквы должны иметь размер 5 пунктов. Ни больше ни меньше! Так попытайтесь угадать, какой размер должен иметь текст “FONT size=2“? Совершенно правильно! Два пункта! А сколько “FONT size=20“? Думаете 20? Ничего подобного. Всему есть предел! Вот и тут тоже предел от 1 до 7.
Как и говорила, есть еще один путь - относительный. Это если за основу взять те три пункта, которые приняты по умолчанию. И прибавляя, либо отнимая число пунктов, можно увеличивать или уменьшать наши пунктики. А вот и примеры:
Может я вас немного запутала, но, приноровившись, вы будете щелкать эти задачки как орешки.
- А теперь расскрасим наш текст! -
Для этого существует атрибут color. Вот с этим колером мы сейчас и поработаем. Вообще, цвета можно задавать двумя разными способами. Первый - можно использовать словесное обозначение цвета: blue, black, yellow, green, white и т.д. А можно - и их цифровое обозначение, только не забывайте перед цифровым эквивалентом ставить “решетку”! Так, цвет “blue” имеет свое числовое значение “#0000ff”, цвет “red” - значение “#FF0000″ и так далее. То есть если мы напишем:
Обе эти записи будут идентичны. И в окне браузера слово “СТИХОТВОРЕНИЕ” будет красным.
Приведу таблицу некоторых цветов:
| цвет | 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 |
Поэкспериментируйте с разными тегами - попробуйте сделать заголовки разных размеров, текст пишите разными шрифтами, да попробуйте повыделять текст жирным или наклонным, а, может даже и жирным и наклонным одновременно. А если текст будет разноцветный, то будет значительно веселее.
В следующем уроке мы познакомимся с фоном для нашей странички и начнем изучать таблицы. А может, это будет два разных урока. Я пока еще не решила.
Posted in
June 5th, 2008 at 05:17
Я круче нигде не видел.
June 5th, 2008 at 05:51
Клёво!