Как сделать сайт в html цветным

Главная → Делаем сайт - первые шаги → Урок 2. Оформляем 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 - желтый.

Всем привет! Запустите браузер (как в шаге 3 первого урока), теперь ваша страница выглядит так:

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

В HTML существуют два способа задания цвета: по имени (им воспользовались мы) и указанием шестнадцатеричного кода цвета.

С именными цветами (их 156) все просто, смотрим в соответствующую таблицу html цветов, выбираем понравившийся и пишем его имя в значение атрибута (например, bgcolor="blue").

Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с как сделать сайт в html цветным символа "#". Не будем вдаваться в подробности как формируется код цвета, укажем лишь на то, что получить его можно, например, в программе Photoshop. О том, как это делать читайте на странице Цвета для web. А пока пользуйтесь теми, которые указаны в примерах.

Итак, поменяем цвет в атрибуте bgcolor на нежно-голубой, а цвет текста - на менее яркий.

Всем привет! Обновите html-страницу (Ctrl+F5) и посмотрите на результат.

Шаг 2. Форматируем текст

Обратите внимание, что атрибуты, указанные в теге <body> распространяют свое действие на весь документ, т.е. весь введенный вами текст будет теперь сиреневого цвета, что не очень удобно. Поэтому лучше убрать атрибут text из тега <body>, тогда цвет текста будет установлен по умолчанию, т.е. черный. А задавать цвет различных частей текста лучше в самом тексте.

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

Это простой текст. Этот выделен полужирным начертанием.
А этот курсивом. Это текст Arial, размер шрифта - 5

Это заголовок третьего уровня

Этот текст Verdana, размер шрифта - 2 Обновите html-страницу (Ctrl+F5) и посмотрите на результат.

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

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

2. Соблюдайте порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним. Например,

Так неправильно! Так правильно На этом второй урок закончен. Вы научились работать с текстом. На следующем уроке вы научитесь украшать html-страничку картинками и располагать элементы на странице.

Предыдущий урок Вернуться в раздел Следующий урок 

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

Уроки PHPУроки PHPУроки PHPУроки PHPУроки PHPУроки PHP

Код кнопки:
<a href="http://site-do.ru"><img src="http://site-do.ru/images/sitedo1.gif" alt="Как создать свой сайт"></a>
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.



Источник: http://www.site-do.ru/doSite/lesson2.php


Закрыть ... [X]

HTML цвет текста - Изменить цвет текста, HTML - фон, text color Как сделать что бы ps3 видел ntfs



Как сделать сайт в html цветным Как сделать фон в HTML -странице. Основы HTML для. StepkinBlog
Как сделать сайт в html цветным Как сделать сайт в блокноте html и css-технологиями
Как сделать сайт в html цветным Как установить цвет страницы HTML Шаблоны сайтов
Как сделать сайт в html цветным Оформляем html-страницу и форматируем текст
Как сделать сайт в html цветным Как задать цвет фона в HTML
Как сделать сайт в html цветным Как сделать фон в HTML?
Как сделать сайт в html цветным 25 способов сделать интерьер маленькой комнаты комфортным
Как сделать сайт в html цветным Samodelki. org - Самодельная пальма из
ВО! ПОДАРОК магазин креативных подарков в Выжимной подшипник сцепления Лада Калина - замена и выбор Как заменить моторное масло на скутере - Скутеры Как плести чокер? - elHow Как сделать сахарное стекло