Rambler's Top100

Создание страницы сайта

В любом месте вашего компьютера создайте папку и дайте ей имя, например site, затем внутри паки site создайте ещё папку и дайте ей имя images. Откройте блокнот Hotepad+++, скопируйте код расположенный в блоке ниже и вставте в блокнот

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Мой первый сайт</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>

 

</body>
</html>

Затем нужно установить кодировку страницы, чтобы она отображалась русским текстом, для этого в меню блокнота, в разделе Кодировки нажимаете Преобразовать в UTF-8 без BOM и сохраняете страницу как index.html в папку site

Далее в меню блокнота Файл/Новый, создайте новую вкладку и сохраните её как style.css, Затем скопируйте код ниже и вставте во вкладку style.css

body, html {
background-color: #e7e7e7;
margin:0px;
padding:0px;
text-align:center;
}


У вас в блокноте будет две вкладки, между которыми можно перемещаться для внесения кода в ту или другую вкладку, а в папке site два файла index.html и style.css

После создания файла style.css, его нужно подключить к странице index.html, для этого в блокноте, перейдите во вкладку index.html, скопируйте и вставте код выделенный зелёным цветом

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Мой первый сайт</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<LINK href="style.css" TYPE="text/css" rel="stylesheet">
</head>
<body>

 

</body>
</html>

Создавать мы будем сайт, как на картинке ниже, сайт будет верстаться из блоков

в блочной вёрстке создаётся общий блок-контейнер, в который будут помещены другие блоки, например блок для шапки сайта, блоки левой и правой колонки сайта, блок центральной части, блок нижней части сайта и так далее, блоков можно создать сколько угодно по принципу вложенности. Чтобы было понятней, представте большую коробку в которую вложены другие коробки поменьше,то же самое и в блочной вёрстке сайта, создаётся один блок-контейнер, внутрь этого блока вкладываются другие блоки.

Для продолжения нажмите кнопку 3

 

 

Rambler's Top100 Яндекс цитирования