Да! Кстати… а как же открыть нам свой файл в блокноте, если он по двойному щелчку сразу открывается в окне браузера? Привожу два различных способа.
✓ Открыть опять Блокнот — для особо забывчивых: Пуск | Все программы | Стандартные | Блокнот. Хотя давно пора выставить его значок на рабочий стол… Открыли? Ну, и оттуда Файл | Открыть… достать наш родной, единственный и неповторимый shablon.html. Получилось? Ну и славненько…
✓ Если у вас этот файл уже открыт браузером, щелкните правой кнопкой мыши по экрану и в появившемся меню выберите Просмотр HTML-кода (или Просмотр кода страницы — в зависимости от браузера) — результат будет тот же. Наш файл сам откроется в Блокноте!
Итак, хватит болтовни, посмотрим что у нас там осталось с прошлого раза (листинг П1.2).
Вы уже выучили наизусть этот наш шаблон как "Отче наш"? Нет? Странно… мы им будем пользоваться постоянно. Хотя, скажу вам по секрету, можно писать эти теги и строчными буквами, браузеру на это начхать. Точно так же откроет он и содержимое такого файла (листинг П1.3).
Ну, а теперь запомнили? Еще повторить?
Ладно… в общем, объясняю: я буду писать буквы всех тегов прописными (заглавными) буквами исключительно из-за того, чтобы вам легче было отличать изменяемую часть от постоянной. Договорились? А вы можете писать как хотите. Как удобней.
Добавляем в шаблон текст
Итак, изменим содержимое нашего шаблона, вставив туда немного текста (листинг П1.4).
Ну и сохраним этот файл, например, под именем, соответствующим номеру листинга: listing_1.4.html. Открываем файл и видим следующую картину (рис. П1.9).
Рис. П1.9. Файл listing_1.4.html в окне браузера
Итак, в верхней строке браузера у нас отобразилось название странички: Моя Первая Страничка, а в самом окне — текст, который мы ввели между тегами <BODY> и </BODY>.
Ну вот, уже кое-что становится понятно. А раз так — идем дальше!
Форматируем содержимое странички
Для того чтобы текст на наших страничках смотрелся красиво, его необходимо отформатировать. Для этого есть несколько тегов, вот ими сейчас и займемся.
Заголовки
Обычно в каждом тексте имеются заголовки разных уровней. Самый крупный заголовок называется заголовком 1-го уровня, самый маленький — 6-го. Тегами заголовков служат парные теги <Hn> и </Hn>, где n — номер уровня заголовка. Вернемся к нашему шаблону shablon.html и внесем в него некоторые изменения (листинг П1.5).
В браузере же это будет выглядеть так, как показано на рис. П1.10.
Рис. П1.10. Заголовки
Текст
В типографике существует множество шрифтов, однако в веб-дизайне для набора текстов веб-страниц используется ограниченное их количество.
Как правило, это:
✓ Georgia;
✓ Times New Roman;
✓ Arial;
✓ Verdana;
✓ Comic Sans MS.
Шрифты подразделяются на шрифты с засечками (типа Georgia, Times New Roman), шрифты без засечек (типа Arial, Verdana) и фантазийные (типа Comic Sans MS).
Чтобы отделить один абзац текста от другого, следует применять тег <P>. А если при этом нужно выровнять текст абзаца к левой или правой стороне страницы, то делается это с помощью атрибута (служебного слова) align так:
✓ <P align=left> — если нужно выровнять абзац к левой стороне;
✓ <P align=right> — если нужно выровнять абзац к правой стороне.
Наберем отрывок из рассказа Валентина Катаева "Поединок" с заголовком и разбивкой на абзацы, под текстом напишем фамилию автора, сдвинув ее вправо. Сохраним этот файл под именем, скажем, poedinok.html (листинг П1.6).
Рис. П1.11. Файл poedinok.html в браузере
А теперь откроем этот файл в браузере (рис. П1.11).
Если текст нужно начать не с нового абзаца, а просто со следующей строки (например, в стихотворениях), то вместо тега <P> ставят тег <BR> (листинг П1.7).
Рис. П1.12. Принудительный перевод строчек с помощью тега <BR>
В браузере получится следующая картина (рис. П1.12).
Для выделения текста жирным шрифтом нам пригодятся теги <B> или <STRONG>. Имейте в виду, что оба они имеют пару — закрывающий тег (с косой чертой).
А вот чтобы сделать текст наклонным, существует тег <I>, который также имеет парный закрывающий тег </I>.
Для подчеркивания текста служит тег <U>, для зачеркивания — тег <STRIKE>. Они также имеют закрывающие теги </U> и </STRIKE> соответственно.
А можно ли сделать текст, к примеру, одновременно и жирным, и наклонным? Конечно можно, для этого надо применить к тексту оба тега — нужно только следить, чтобы они были правильно вложены, например, так:
<STRONG><I>Этот текст и жирный и наклонный</I></STRONG>
А вот так неправильно:
<STRONG><I>Этот текст и жирный и наклонный</STRONG></I>
Поясню это на примере (листинг П1.8).
Сохраните этот файл под любым именем, например variant.html, и затем откройте его в браузере. Получим следующее (рис. П1.13).
Рис. П1.13. Варианты текста
Для того чтобы изменить цвет текста, существует тег <FONT> с атрибутом COLOR, также имеющий свою пару — закрывающий тег </FONT>. Цвет может быть задан как просто названием цвета, так и числовым его значением — главное, не забывать перед числовым значением ставить знак решетки: #.
Например:
✓ <FONT color="red">Это красный цвет</FONT>
✓ <FONT color=#FF0000>Это тоже красный цвет</font>
В табл. П1.1 приведены числовые значения самых распространенных цветов.
Можно также изменять и размер шрифта, достаточно добавить к нему тег <FONT> с атрибутом SIZE.
Таблица П1.1. Числовые значения цветов
А атрибутом face можно задать гарнитуру шрифта. Тег <FONT> также имеет свою закрывающую пару: </FONT>.
К сожалению, из-за строгого ограничения на объем книги, я не могу, как бы ни хотелось, рассказать здесь обо всем, хотя бы понемногу. Но самое необходимое, все же, стараюсь объяснить. Попробую показать на примере варианты применения гарнитур, размеров и цветов шрифта (листинг П1.9).
В браузере это будет выглядеть так (рис. П1.14). Цвета шрифтов вы здесь, конечно, не увидите, но можете поверить мне на слово или воспроизвести все это самостоятельно на своем компьютере.
Рис. П1.14. Гарнитура, размер и цвет шрифта
Вставляем картинки
Чтобы вставить на страничку картинку, нужно применить тег <IMG>. Этот тег имеет свой атрибут src, который указывает путь к картинке. Если наша картинка под названием, например, foto.jpg лежит в той же папке, что и HTML-файл, можно написать просто: <img src="foto.jpg">. Если же картинка лежит в другой папке, скажем, в папке image, тогда и путь к картинке будет такой: <img src="image/foto.jpg">. Почему-то у многих новичков возникают страшные проблемы по прописыванию пути к картинке, хотя в этом ничего сложного нет.
Хорошо бы, кроме адреса картинки, явно указать ее размеры с помощью атрибутов width (ширина) и height (высота). Их значения можно узнать, например, в программе Adobe Photoshop. Применение этих атрибутов поможет браузеру корректно показать картинку на веб-странице.
Рекомендуется также в атрибуте alt открытым текстом пояснить, что же такое нарисовано на этой картинке. Дело в том, что поисковые системы не могут с помощью своих роботов разобрать, что там изображено, и подробное описание тут совсем не помешает. Кроме того, среди пользователей Интернета немало слабовидящих, а то и совсем незрячих людей, которые «читают» веб-странички с помощью специальных звуковых программ. Так что старайтесь сразу дать о своих картинках как можно больше информации.
Ну, и, чтобы картинки имели немного свободного пространства вокруг себя и не прилипали к тексту, который их окружает, укажите расстояние от картинки до ближайшего текста по горизонтали (атрибут hspace) и вертикали (атрибут vspace) в пикселах. Для тех, кто еще не знает, пиксел — это наименьший элемент изображения на экране монитора (попросту, точка).
Картинки можно располагать как по центру (атрибут center), так и по правому (атрибут right) или левому (атрибут left) краю. Это прописывается тегом <ALIGN> с соответствующими атрибутами: center, right или left. Надо также отметить, что расположение по левому краю принято по умолчанию.
