Пошаговая инструкция создания сайта на html коде / Видимая часть сайта

Видимая часть сайта

Элемент <body>

Информация, находящаяся между открывающим и закрывающим тегами элемента <body>, отображается на экране компьютера в окне браузера.

<body> <!-- ...Видимая часть страницы сайта... --> </body>

Многим элементам HTML, в том числе и элементу <body>, можно задавать разные параметры - атрибуты, то есть приписывать им определенные значения, например, ширину, длину, цвет, размер и многое другое. Этим и займемся.

Цвет фона сайта, атрибут bgcolor

Цвет фона сайта задается с помощью атрибута bgcolor:

bgcolor="цвет фона" <!-- Цвет фона -->

Сам цвет можно прописать словом, например, red, green, blue. Но в основном пользуются цифровым кодом состоящим из знака решетки и набора цифр:

bgcolor="#цифровой код" <!-- Цвет фона -->

Чтобы задать цвет фона, нужно эту конструкцию поставить в открывающий тег элемента <body>:

<body bgcolor="#цифровой код">

Коды цветов я беру из палитры графического редактора Фотошоп, их там больше всего.

Код цвета выделен внизу палитры голубым цветом, где находится палитра указано слева красным цветом:

Для работы над сайтом будет более чем достаточно бесплатной версии этой программы.

На моем сайте так же есть таблица с большим количеством цветов, их названий и кодов - "Названия и коды цветов HTML".

Выбираем цвет, вставляем его код вместо надписи "цветовой код". Я возьму код фона моего сайта:

<body bgcolor="#f3eeea">

Смотрим, что получилось на экране (для этого не забудьте обновить страницу сайта):

Фоновый рисунок, атрибут background

Вместо цвета, можно задать фоновый рисунок с помощью атрибута background:

background="фоновый рисунок"

Для этого нужно выбрать рисунок, положить его в папку "images", о необходимости создания которой говорится в конце статьи "Локальный хостинг", и вместо надписи "фоновый рисунок" указать к нему путь:

background="название папки/название файла" <!-- Фоновый рисунок -->

Для примера я взяла вот такую картинку с названием "fon.jpg":

Прописываем путь к рисунку:

<body background="images/fon.jpg">

Смотрим, что получилось на экране (обновляем страницу сайта):

Теперь у нашего сайта есть фон.

Какой фон будет у вашего сайта - цвет или рисунок, зависит от вашего желания.

Элементу <body> можно задавать и многие другие атрибуты, но на данный момент я пока больше ничего не использовала.


В файл index.html добавилась запись фона:

Дальше будем работать внутри пары тегов элемента <body>.

Следующий шаг - Страница сайта