Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

RUS | ANG |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы CSS » Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

30.03.2017

15:40

77567

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Всем привет!
Вот и подошли мы к завершению изучения основ CSS.
Сегодня испробуем на практике все знания, которые вы получили, изучая основы CSS. Предлагаю вместе со мной создать простой сайт-визитку с использованием HTML + CSS.
Вот сама схема и план действий:

План:

1). Создание файла «index.html» и «CSS».
2). Вставка в файл «index.html» скелет html (стандартный код).
3). Подключение «index.html»с «style.css».
4). Создание меню.
5). Вставка логотипа.
6). Создание блока для контента.
7). Создание подвала.
8). Создание остальных страниц.

Создание файла «index.html» и «CSS».
Итак, создайте себе отдельную папочку «Мой сайт». Теперь в этой папочке создайте два файла «index.html»и «style.css».
Чтобы создать «index.html»:
на компьютере снизу в левом углу нажмите на кнопку «Пуск».
Далее выберите «Все программы» => «Стандартные» => «Блокнот».

Далее нажмите «Файл» => «Сохранить как»:

Укажите место, куда вы хотите сохранить файл, в нашем случае это папка под названием «Мой сайт».
В поле «Имя файла» напишите «index.html», а не просто «index» (это важно!). Таким способом мы создаем файл с расширением «*.html» для веб-страниц. Далее нажмите на кнопку «Сохранить»:

Чтобы создать «style.css»:
кнопка «Пуск» => «Все программы» => «Стандартные» => «Блокнот»:

В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…»:

Далее укажите место, куда вы хотите сохранить файл, лучше файл разместить вместе с остальными HTML файлами.

В поле «Имя файла» напишите «style.css», а не просто style (это важно!). Таким способом мы создаем файл с расширением «*.css». Далее нажмите на кнопку «Сохранить»:

Вот, что должно получиться у вас в папке «Мой сайт»:

Вставка в файл «index.html» скелет html (стандартный код)
Откройте файл «index.html» через программу «Блокнот» и вставьте вот такой стандартный HTML код:

<html>
<head>
<title>Сайт на StepkinBlog.ru</title>
<meta http-equiv="Content-Type"content="text/html; charset=windows-1251">
</head>
<body>
</body>
</html>

Сохраните файл «index.html».

Подключение «index.html» к «style.css»
Напомню вам, чтобы подключить файл со стилями «style.css» к «index.html» перед тегом </head>,пропишите вот такой код:

<link rel="stylesheet" type="text/css"href="style.css">

Полный пример:

<html>
<head>
<title>Сайт на StepkinBlog.ru</title>
<meta http-equiv="Content-Type"content="text/html; charset=windows-1251">
<link rel="stylesheet"type="text/css"href="style.css">
</head>
<body>
</body>
</html>

Сохраните файл «index.html».
Вот теперь можем создавать сайт.
Начнем с меню.

Создание меню
Через списки HTML создадим меню и, естественно, сразу пропишем для каждого раздела меню ссылку на другую страницу:

<div class="blok-menu">
<ul class="menu">
<li><a href="index.html">О нас</a></li>
<li><a href="rabota.html">Наши работы</a></li>
<li><a href="prais.html">Прайс</a></li>
<li><a href="contakt.html">Контакты</a></li>
</ul>
</div>

Вот полный пример:

<html>
<head>
<title>Сайт на StepkinBlog.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="blok-menu">
<ul class="menu">
<li><a href="index.html">О нас</a></li>
<li><a href="rabota.html">Наши работы</a></li>
<li><a href="prais.html">Прайс</a></li>
<li><a href="contakt.html">Контакты</a></li>
</ul>
</div>
</body>
</html>

В результате ничего особенного вы не увидите:

Теперь в CSS сделаем меню горизонтальным, уберем маркеры, сделаем отступы. Для этого в CSS пропишите:

*
{
margin:0px ;
padding:0px;
}

.menu li
{
float:left;
list-style: none;
margin:10px 25px ;
}

Теперь выровняем меню посредине

.menu
{
margin:0 auto;
display:table;
}

Закрасим меню и добавим тень:

.blok-menu
{
overflow: hidden;
background: #444;
box-shadow: 0px 13px 17px -6px #000000;
}

Осталось поменять размер и цвет в названиях меню:

.menu li a
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
text-decoration: none;
}
.menu li a:hover
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#ccc;
border-bottom:1px dotted #ccc;
}

Итак, вот весь CSS стиль для меню:

*
{
margin:0px ;
padding:0px;
}
.menu li
{
float:left;
list-style: none;
margin:10px 25px ;
}
.blok-menu
{
overflow: hidden;
background: #444;
box-shadow: 0px 13px 17px -6px #000000;
}
.menu
{
margin:0 auto;
display:table;
}
.menu li a
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
text-decoration: none;
}
.menu li a:hover
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#ccc;
border-bottom:1px dotted #ccc;
}

Смотрим на результат:

Вставка логотипа

Для логотипа создайте папку «image». В этой папке будут храниться все изображения сайта-визитки.

Залейте в эту папку «image» ваш логотип, размерами примерно 200 х 200 px.
Дайте название логотипу «logo» и расширении файла «png».
Вот так это будет выглядеть в HTML:

<div class="blok-menu">
<ul class="menu">
<li><a href="index.html">О нас</a></li>
<li><a href="rabota.html">Наши работы</a></li>
<li><a href="prais.html">Прайс</a></li>
<li><a href="contakt.html">Контакты</a></li>
</ul>
</div>
<div class="logo">
<img src="image/logo.png">
</div>

Выровняем лого по центру и закруглить через CSS:

.logo
{
margin:0 auto;
width:200px;
margin-top:30px;
margin-bottom:30px;
}

.logo img
{
-moz-border-radius: 200px; /* Firefox */
-webkit-border-radius: 200px; /* Safari, Google Chrome */
-khtml-border-radius: 200px; /* KHTML */
-o-border-radius: 200px; /* Opera */
-ms-border-radius: 200px; /* IE8 */
-icab-border-radius: 200px; /* Icab */
border-radius: 200px; /* CSS3 */
}

Создание блока для контента
Теперь создадим блок для контента. Добавьте в HTML вот такой код:

<div class="content">
<h2>Заголовок</h2>
<p>Очень много текста</p>
<p>У нас самая крутая фирма.</p>
<p>Опять много текста</p>
</div>

В CSS выровняем блок «content» по центру. Укажем ему ширину, сделаем внутри отступы, выделим блок тенью:

.content
{
width:700px;
margin:0 auto;
padding:20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;
}

Выровняем заголовок по центру, увеличим размер и поменяем цвет:

.content h2
{
font: 30px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-align:center;
}

Теперь изменим размер и цвет текста. Добавим отступ для красной строки:

.content p
{
font: 14px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-indent:20px;
}

Вот весь CSS код для блока «content»:

.content
{
width:700px;
margin:0 auto;
padding:20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;
}

.content h2
{
font: 30px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-align:center;
}

.content p
{
font: 14px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-indent:20px;
}

Создание подвала
Теперь внизу сайта создадим подвал и разместим там копирайт.
В HTML добавьте вот такой код:

<div class="footer">
<p><a href="http://stepkinblog.ru">StepkinBlog.com</a> © 2017</p>
</div>

В CSS выровняем подвал по центру, изменим цвет текста и ссылки, поменяем размер:

.footer
{
width:100%;
text-align:center;
margin-top:20px;
}
.footer p, .footer a
{
font: 14px Verdana, Arial, Helvetica, sans-serif;
color:#444;
}

.footer a
{
text-decoration: none;
border-bottom:1px dotted #444;
}

.footer a:hover
{
text-decoration: none;
border:0px;
}

Вот так выглядит мой абсолютно весь CSS код файла «style.css»:

*
{
margin:0px ;
padding:0px;
}
.menu li
{
float:left;
list-style: none;
margin:10px 25px ;
}
.blok-menu
{
overflow: hidden;
background: #444;
box-shadow: 0px 13px 17px -6px #000000;
}
.menu
{
margin:0 auto;
display:table;
}
.menu li a
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
text-decoration: none;
}
.menu li a:hover
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#ccc;
border-bottom:1px dotted #ccc;
}

.logo
{
margin:0 auto;
width:200px;
margin-top:30px;
margin-bottom:30px;
}

.logo img
{
-moz-border-radius: 200px; /* Firefox */
-webkit-border-radius: 200px; /* Safari, Google Chrome */
-khtml-border-radius: 200px; /* KHTML */
-o-border-radius: 200px; /* Opera */
-ms-border-radius: 200px; /* IE8 */
-icab-border-radius: 200px; /* Icab */
border-radius: 200px; /* CSS3 */
}

.content
{
width:700px;
margin:0 auto;
padding:20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;
}

.content h2
{
font: 30px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-align:center;
}

.content p
{
font: 14px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-indent:20px;
}

.footer
{
width:100%;
text-align:center;
margin-top:20px;
}
.footer p, .footer a
{
font: 14px Verdana, Arial, Helvetica, sans-serif;
color:#444;
}

.footer a
{
text-decoration: none;
border-bottom:1px dotted #444;
}

.footer a:hover
{
text-decoration: none;
border:0px;
}

Создание остальных страниц
Вот и готова первая страница. Весь HTML код файла «index.html»:

<html>
<head>
<title>Сайт на StepkinBlog.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="blok-menu">
<ul class="menu">
<li><a href="index.html">О нас</a></li>
<li><a href="rabota.html">Наши работы</a></li>
<li><a href="prais.html">Прайс</a></li>
<li><a href="contakt.html">Контакты</a></li>
</ul>
</div>
<div class="logo">
<img src="image/logo.png" >
</div>
<div class="content">
<h2>Заголовок</h2>
<p>Очень много текста</p>
<p>У нас самая крутая фирма.</p>
<p>Опять много текста</p>
</div>
<div class="footer">
<p><a href="http://stepkinblog.ru">StepkinBlog.com</a> © 2017</p>
</div>
</body>
</html>

Она же нам послужит как шаблонная страница.
После того, как вы сохранили «index.html», создайте файлы:

rabota.html – для страницы «Наши работы»
prais.html – для страницы «Прайс»
contakt.html – для страницы «Контакты»

И во все эти файлы вставьте такой же код, какой в файле «index.html», меняя только текст в <title> и текст с заголовками в блоке «content».
Смотрим результат!

[ смотреть результат ]

А те, кто пришел сюда случайно по запросу «создать сайт визитку бесплатно», могут скачать результат, который получился в процессе сегодняшней практики:

[ скачать сайт визитку бесплатно ]

Поздравляю всех, кто изучал мои курсы от самого начала до сегодня, с окончанием изучения основ CSS!!!!!

Урааааааа !!! Вы перешли на еще одну ступеньку выше в сайтостроении.
Если вам интересны мои уроки, то оставайтесь на моем блоге stepkinBLOG.RU, я и далее буду продолжать писать уроки для начинающих по другим темам, таким как «php»,«javascript» и«WordPress».
Удачи!

Случайные записи:

Последние записи рубрики:

18 ответа(ов) на статью: “Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу”

Алексей says:

15.07.2017 в 14:13
ты хоть сам смотрел со своим кодировкой что получилось windows-1251? эта кодировка толком не работает щас оптимально использовать utf-8

Ответить
Степка ответил(а) на комментарий:
15 июля, 2017 at 22:02
никто не спорит, что лучше использовать кодировку utf-8, но для начинающих пойдет windows-1251.
"ты хоть сам смотрел со своим кодировкой что получилось windows-1251?" - да, немного с кодировкой не получилось, но это не из-за windows-1251 а за того, что в файла ".htaccess" прописан код:

AddDefaultCharset UTF-8

это значит принудительная кодировка. То есть, даже если у меня будет прописано windows-1251, то все равно принудительно будет UTF-8. Вот и весь нюанс почему не работает windows-1251 )))).
Вы наверное такого не знали?
Спасибо что сказали, исправил.

Ответить
Алексей ответил(а) на комментарий:
16 июля, 2017 at 01:09

с вами можно связаться как не будь ?
Паклавля says:

24.12.2017 в 09:48

В статье:

*
{
margin:0px ;
padding:0px;
}
_________
Знаком * заменяется тэг body?

Ответить
Паклавля ответил(а) на комментарий:
24 декабря, 2017 at 13:53

И вот тут:

box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;

сразу после того как в тексте появляются буквы "rgba" всё теряет смысл, не помешали бы объяснения)

Ответить
Степка ответил(а) на комментарий:
26 декабря, 2017 at 22:48

Вы читали урок:
Как задать цвет в CSS. Основы CSS для начинающих. Урок №8
А вот тут я про тень рассказываю.
ну и тут посмотрите:
Коды цвета в CSS - / R G B / HTML. Основы CSS для начинающих. Урок №7
Не ленитесь пробежаться по блогу, тут на все Ваши вопросы будут ответы.

Степка ответил(а) на комментарий:
26 декабря, 2017 at 22:40

Звёздочка (*) в CSS — это универсальный селектор, оформление которого применяется к каждому элементу HTML.

Ответить
Паклавля says:

04.01.2018 в 04:02

Не ленитесь пробежаться по блогу>>> Я прочитал и записал большую часть написанного, не приятно что вы приписываете мне лень

Ответить
Василий says:

08.06.2019 в 21:21
Подскажи пожалуйста почему если прописать просто
```
.menu
{
margin:0 auto;
}
```
то он не выравнивает по центру а если добавить display:table; то выравнивает
```
.menu
{
margin:0 auto;
display:table;
}
```
исходя из урока: Блоки в CSS. Основы CSS для начинающих. Урок №13
Чтобы выровнять блок по центру, пропишите для правила «margin» значение «0 auto»:
Он вроде должен и так выравнивать блок по центру
Что то вот этот момент я не понял

Ответить
Степка ответил(а) на комментарий:
11 июня, 2019 at 16:33

Василий, а тег UL относиться к блоку? НЕТ, не относиться,
margin:0 auto; работает только для блоков вот и дописал display:table;

Ответить
Полина says:

25.06.2019 в 16:16

Здравствуйте! Большое спасибо за урок! Только вот возникла одна проблема: ни в одном браузере не отображается сам блок и тени. Виден только текст. Не подскажите, что с этим делать? Заранее спасибо)

Ответить
Степка ответил(а) на комментарий:
28 января, 2020 at 17:48

мне бы код посмотреть

Ответить
Salvaged says:

14.09.2019 в 21:13

Чувак, мне кажется, или у тебя опечатка в CSS?
У тебя там ".blok-menu" или может я чего не догоняю?

Ответить
Salvaged ответил(а) на комментарий:
14 сентября, 2019 at 21:20

Я просто не хочу как бы "Гнать" мало-ли, так и должно быть хД просто хочу узнать в курсе ты или нет

Ответить

Степка ответил(а) на комментарий:
28 января, 2020 at 17:36

....можно давать названия какие угодно, "blok-menu", "blokmenu", "b-menu", "menuuuuuuuuu". Это не опечатка. Главное чтобы в CSS и HTML было одинаково

Ответить
Salvaged says:

14.09.2019 в 21:33

И последний вопрос, как у тебя получилась такая волшебная картинка? http://stepkinblog.ru/wp-content/uploads/2017/03/sozdanie-sajta-s-nulya-na-html-css-1-1.png
Что прям лого видно. Я просто вижу в коде только
- а это же заголовок адресный, не? у меня крч не вышло, может из-за того что я работаю напрямую через php компилятор и cmd? xDD
file:///C:/Users/SpringTrap/Desktop/Безымянный.jpg

Ответить
VOVAN1337 says:

16.01.2020 в 11:42

Почему так сложно?

Ответить
Bustanov Xudaykul Abriyevich says:

08.04.2021 в 08:30

Я проделал все что было дано в этой Вашей статье. Могулы дальше продолжить работу? Я создал пустые файлы • rabota.html – для страницы «Наши работы» • prais.html – для страницы «Прайс»
• contakt.html – для страницы «Контакты». И так как мне дальше продолжить? Точно такие статью-практических работ сможете прислать мне по электронной почти или где я могу прочитать продолжение этой работы? Помогите, лучше подскажите адрес продолжение эту работу. А то я запутаюсь. Ваши материалы шаг за шагом работает. Спасибо большое! Жду ответа.

Ответить

StepkinBlog.ru

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Случайные записи:

Последние записи рубрики:

18 ответа(ов) на статью: “Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу”

Добавить комментарий

Подписаться на обновления:

Разные темы:

Реклама на блоге:

Последние записи на блоге:

Мои цели на
2019 год:

Облако меток:

Статистика:

StepkinBlog.ru

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Случайные записи:

Последние записи рубрики:

18 ответа(ов) на статью: “Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу”

Добавить комментарий

Подписаться на обновления:

Разные темы:

Реклама на блоге:

Последние записи на блоге:

Мои цели на 2019 год:

Облако меток:

Статистика:

Мои цели на
2019 год: