Фон страницы html (9 Урок)

A5.ru: конструктор сайтов

A5.ru: создать собственный сайт без лишних затрат и усилий!

Автор: MilovanovV
Категория: HTML сайты » Создать сайт в блокноте
27-09-2013, 15:17

Первые несколько уроков курса «Как создать сайт в блокноте», были подготовительными. На этих уроках, Мы с Вами рассмотрели основные инструменты и приложения, которые нам потребуются при создании сайта в блокноте.

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

Создайте на жестком диске Вашего компьютера папку для файлов, где Вы будете хранить файлы сайта. Зададим имя для папки проекта – Mysite.

Теперь создадим в этой папке индексный файл сайта - index.html, как это сделать, мы с Вами изучали в 5 уроке.

Запустим программу блокнота Notepad++, после того, затем, откроем блокнотом созданный файл index.html, и скопируем в него обязательные html теги, которые формируют структуру html страницы, (это мы проходили в 6 уроке):

<!DOCTYPEhtml PUBLIC "-//W3C//DTD html 4.1Final//EN">
<html>
<head>
<title> Как создать сайт вблокноте</title>
<metahttp-equiv="Content-Type"content="text/html;charset=windows-1251">
</head>
<body>
 
</body>
</html>

Отредактируете содержимое тега title, в соответствии с темой страницы Вашего сайта. Я назову главную страницу сайта «Как создать сайт в блокноте».

Теперь сохраните файл index.html, для этого, в блокноте выберете в меню «Файл» -> «Сохранить» или кликните в панели инструментов блокнота на соответствующий значок.

Итак, мы с Вами начали создавать главную страницу сайта, для проверки нашей работы, мы будем открывать нашу страницу браузером и смотреть на изменения.

Я буду использовать для тестирования браузер Internet Explorer. После создания сайта, мы с Вами обязательно проверим, как наш сайт открывается самыми популярными браузерами, используемыми в Интернет. Ну а пока, для тестирования страницы сайта, ограничимся одним браузером.

Итак, откроем файл index.html браузером. Обратите внимание на то, что имя вашей страницы, то есть содержимое тега title отображается в верхней панели браузера.

Что касается содержимого страницы, то окно браузера ничего не отобразит, страница пустая.

Так оно и есть на самом деле, ведь мы с Вами пока что страницу ни чем не заполнили.

Здесь хочется отметить, что при создании сайт через блокнот, у нас будет примерно такая схема работы:

- Определение задачи
- Подбор подходящих тегов для решения задачи в HTML справочнике
- Добавление тега в код страницы и тестирование результата.

Итак, ставим задачу данного урока – задать с помощью html фон страницы.

Открываем HTML справочник «Влад Мержевич. Теги HTML», который Вы скачали в 7 уроке.

Здесь рассуждаем так: мы будем задавать цвет фона сразу для всей html страницы, при этом мы знаем, что тег bodyпредназначен для размещения в нем кода содержимого веб страницы, соответственно нам нужно открыть в справочнике информацию по тегу body и посмотреть параметры для данного тега.

Открываем в справочнике закладку «Теги по алфавиту», находим букву B и кликаем на знак + слева от буквы B, чтобы открыть все теги, начинающиеся на данную букву.

Ищем название тега BODY и кликаем в него в справочнике, в результате, в правой части справочника откроется информация по данному тегу.

Читаем описание тега и в параметрах ищем нужную нам информацию.

Нам интересны два параметра тега BODY: background и bgcolor. С помощью тега background, можно задать фон страницы html, с использованием рисунка.

Используя тег bgcolor, можно задать цвет фона страницы html кодом цвета. Для того, чтобы найти html коды цветов, сделайте запрос в любой поисковой системе такого содержания: «Таблица HTML кодов цветов».

Итак, мы в html справочнике нашли два параметра тега BODY, с помощью которых мы сможем изменять фон html страницы.

На странице описания любого тега, в html справочнике, Вы всегда можете найти примеры использования параметров html тегов и синтаксис записи тега и параметров.

Например, для того, чтобы задать цвет фона html страницы с помощью параметра bgcolor тега BODY, необходимо тег BODY отредактировать следующим образом:

<body bgcolor="#f0f0f0">

где "#f0f0f0" – значение параметра bgcolor, заданное шестизначным html кодом цвета.

Обратите внимание, значение параметра тега, добавляется в скобках, а перед началом шестизначного кода цвета добавляется знак решетки - #.

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

После изменений, сохраните блокнотом файл index.html.

Ну а теперь давайте посмотрим, как изменилась наша страница после изменений. Для этого откроем файл index.html браузером. Как видите, фон страницы принял тот цвет, который вы задали значением параметра bgcolor тега BODY.

Перейти к Уроку 10: HTML таблица

Перейти к Уроку 8: Макет (каркас) html сайта

Автор: Виктор Милованов

Оставить комментарий