ГлавнаяДелаем сайт - первые шаги → Урок 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) и посмотрите на результат.



Разберем код подробнее:

Использовать эти теги с их атрибутами вы можете в любом месте текста, выделяя, как предложения, так и отдельные слова, и даже буквы. Главное помнить два правила:

1. Если есть открывающий тег, то должен быть и закрывающий.

2. Соблюдайте порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним. Например,
<font><u><i>Так неправильно!</font></u></i>
<font><u><i>Так правильно</i></u></font>
На этом второй урок закончен. Вы научились работать с текстом. На следующем уроке вы научитесь украшать html-страничку картинками и располагать элементы на странице.



Предыдущий урок Вернуться в раздел Следующий урок 
Скачайте одним архивом книгу по созданию сайтов с нуля!
Выбираешь сервис автоматизации постинга на стену вконтакте? Выбирай planpost.ru - сервис отложенного постинга вконтакте

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


Уроки PHP Код кнопки:


Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.