Урок 2. Оформляем html-страницу и форматируем текст.
Содержание урока:
Фон html-страницы и цвет текста.
Сначала пару слов о текстовом редакторе, которым вы пользуетесь. Конечно, вы можете это делать в блокноте, но гораздоо удобнее пользоваться Notepad++ (скачать можно, например, на http://www.softportal.com/get-5406-notepad.html . В нем весь html подсвечивается другим цветом, что облегчает восприятие и поиск ошибок.
теперь вернемся к основной теме. Откройте созданную на прошлом уроке html-страницу в блокноте или в Notepad.
Сейчас в ней написана фраза "Привет всем!", она черного цвета, располагается слева на белом фоне. А если мы хотим, чтобы она была посередине, крупным желтым шрифтом и на синем фоне? Для этого у тегов предусмотрены специальные атрибуты. Проще это объяснить на практике.
Шаг 1. Меняем фон html-страницы и цвет текста
Для этого добавим в наш код, в тег <body> следующие атрибуты - bgcolor="blue" text="yellow". Здесь bgcolor - атрибут, отвечающий за цвет фона страницы, а blue - его значение (в нашем случае - голубой, но можете сделать и красный - red, и зеленый - green, и любой другой). Атрибут text задает цвет текста документа, его значение yellow - желтый.
<html>
<head>
<title> Моя первая страница </title>
</head>
<body bgcolor="blue" text="yellow">
Всем привет!
</body>
</html>
Запустите браузер (как в шаге 3 первого урока), теперь ваша страница выглядит так:
Согласитесь, что синий фон слишком яркий, хорошо бы сделать его побледнее. Для этого давайте немного поговорим о способах задания цвета.
В HTML существуют два способа задания цвета: по имени (им воспользовались мы) и указанием шестнадцатеричного кода цвета.
С именными цветами (их 156) все просто, смотрим в соответствующую таблицу html цветов , выбираем понравившийся и пишем его имя в значение атрибута (например, bgcolor="blue").
Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с символа "#". Не будем вдаваться в подробности как формируется код цвета, укажем лишь на то, что получить его можно, например, в программе Photoshop. О том, как это делать читайте на странице Цвета для web. А пока пользуйтесь теми, которые указаны в примерах.
Итак, поменяем цвет в атрибуте bgcolor на нежно-голубой, а цвет текста - на менее яркий.
<html>
<head>
<title> Моя первая страница </title>
</head>
<body bgcolor="#CCCCFF" text="#666699">
Всем привет!
</body>
</html>
Обновите
html-страницу (Ctrl+F5) и посмотрите на
результат.
Шаг 2. Форматируем текст
Обратите внимание, что атрибуты, указанные в теге <body> распространяют свое действие на весь документ, т.е. весь введенный вами текст будет теперь сиреневого цвета, что не очень удобно. Поэтому лучше убрать атрибут text из тега<body>, тогда цвет текста будет установлен по умолчанию, т.е. черный. А задавать цвет различных частей текста лучше в самом тексте.
Для этого добавим несколько предложений, заключим их в нужные теги, а затем разберемся, что они делают.
<html>
<head>
<title> Моя первая страница </title>
</head>
<body bgcolor="#CCCCFF">
<h1>
<font color="red">
Это заголовок первого уровня
</font>
</h1>
Это простой текст.
<b>Этот выделен полужирным начертанием.</b>
<br>
<i>А этот курсивом.</i>
<h2>
<font color="red">
Это заголовок второго уровня
</font>
</h2>
<font color="#996666" size="5" face="Arial">
Это текст Arial, размер шрифта - 5
</font>
<h3>
<font color="red">
Это заголовок третьего уровня
</font>
</h3>
<font color="green" size="2" face="Verdana">
Этот текст Verdana, размер шрифта - 2
</font>
</body>
</html>
Обновите html-страницу (Ctrl+F5) и посмотрите на результат.
Разберем кодробнее:
Теги <h1> </h1>, <h2> </h2> и т.д. называются заголовками. HTML поддерживает 6 уровней заголовков от h1 до h6. h1 - самый главный и крупный, далее по убыванию значения и шрифта до h6 - самого маленького и по значению, и по размеру шрифта.
Теги <font> </font> управляют шрифтом. Для этого используются атрибуты:
- color - задает цвет текста,
- size - задает размер шрифта (по умолчанию равен 3),
- face - задает гарнитуру шрифта. В принципе, вы можете указывать здесь любой понравившийся вам шрифт, но учтите, что на компьютере пользователя такого шрифта может и не оказаться. Поэтому рекомендуется использовать стандартные: Times New Roman, Arial, Verdana и Tahoma.
Теги <b> </b> делают текст жирным.
Теги <i> </i> отображают текст курсивом.
Тег <br> начинает текст с новой строки. Обратите внимание, этот тег одиночный, т.е. не имеет закрывающего тега.
Использовать эти теги с их атрибутами вы можете в любом месте текста, выделяя, как предложения, так и отдельные слова, и даже буквы.
Главное помнить два правила:
Если есть открывающий тег, то должен быть и закрывающий.
Соблюдайте порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним. Например,
<font><u><i>Так неправильно!</font></u></i>
<font><u><i>Так правильно</i></u></font>
На этом второй урок закончен. Вы научились работать с текстом. На следующем уроке вы научитесь украшать html-страничку картинками и располагать элементы на странице.