Как создать сайт? Урок №1
Доброго времени суток! Эта статья будет рассчитана на новичков, которые только начинают познавать огромный мир вёрстки. Сегодня мы постараемся разобраться с основами html и css, выучить самые основные теги и построить простой сайт, поехали!
Для начала нужно разобраться, что же мы будем делать. Я решил взять самый простой шаблон сайта, с использование html и css:
Что бы создать любой сайт, нужно создать для него каркас, блоки, в которых будет находиться информация, изначально, сайты всегда делятся на 3 таких блока:
- header
- body
- footer
Начинать мы будем с шапки, для начала давайте напишем html код:
<!DOCTYPE html> <!--Версия html-->
<html> <!--начало сайта-->
<head> <!--Голова сайта-->
<title>WCSST 9</title> <!--Название сайта-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <!--Кодировка сайта-->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <!--подключение стилей-->
<link rel="shortcut icon" type="image/x-icon" href="css/images/favicon.ico" /> <!--подключение иконки-->
</head> <!--Конец головы-->
<body> <!--Начало видимой части сайта-->
<div id="header"> <!--Открываем блок для css-->
<div class="shell"> <!--Открываем блок для css-->
<div id="logo-holder"> <!--Открываем блок для css-->
<h1 id="logo"><a href="http://Grand-sait.ru/blog">Блог Ивана Шевцова</a></h1> <!--Первая видимая строчка сайта-->
<p id="quote">Создай свой сайт сам!</p> <!--Вторая строчка сайта-->
</div>
<div id="navigation"> <!--Открываем блок для css-->
<ul> <!-- Начало Меню-->
<li><a href="#" class="active"><span>Главная</span></a></li> <!--Меню-->
<li><a href="#"><span>О нас</span></a></li><!--Меню-->
<li><a href="#"><span>Вкладка</span></a></li><!--Меню-->
<li><a href="#"><span>Вкладка</span></a></li><!--Меню-->
<li><a href="#"><span>Вкладка</span></a></li><!--Меню-->
<li><a href="#"><span>Вкладка</span></a></li><!--Меню-->
<li><a href="#"><span>Вкладка</span></a></li><!--Меню-->
</ul> <!-- Конец Меню-->
</div> <!-- конец блока-->
<div class="cl"></div> <!-- Пустой блок для разделения сайта-->
</div><!-- конец блока-->
</div><!-- конец блока-->
<div id="featured-content"> <!--Открываем блок для css-->
<div class="shell"> <!--Открываем блок для css-->
<h2>Первый сайт</h2>
<p>Создание своего сайта с помощью блога Ивана Шевцова.</p></div></div>
Теперь наш сайт выглядит так:
Чистый html, проще не куда, теперь нужно красиво оформить наш сайт, поэтому создаём style.css:
* {
margin:0;
padding:0;
outline:0;
}
/*Начало любого css документа*/
body {
font-size:11px; /*Размер шрифта на сайта*/
line-height:16px;
font-family:Georgia, serif; /*Выбор шрифта*/
color:#4c4c4c; /*Цвет*/
background:#fff url(images/body-bg.gif) repeat-x 0 0; /*Фон*/
}
a {
color:#0252aa; /*Цвет ссылок */
text-decoration:none; /* Изначально, если есть тег "а",
текст становится синим и подчёркивается, сейчас мы это убрали*/
cursor:pointer; /*Выбор курсора */
}
a:hover {
color:#000; /*Что происходит с ссылок, при нажатии (меняет цвет)*/
}
a img {
border:0; /*Для ссылок картинок*/
}
input, textarea, select {
font-family:Arial, Helvetica, sans-serif; /*Выбор шрифты для тегов input, textarea, select*/
font-size:12px;/*Размер шрифта*/
border:0; /*без линий*/
}
textarea {
overflow:hidden;
}
.cl {
display:block;
height:0;
font-size:0;
line-height:0;
text-indent:-4000px; /*если в этом блоке будет текст, он улетит на -4000пикселей*/
clear:both;
}
.notext {
font-size:0;
line-height:0;
text-indent:-4000px; /*если в этом блоке будет текст, он улетит на -4000пикселей*/
}
.left, .alignleft {
float:left;
display:inline;
}
.right, .alignright {
float:right;
display:inline;
}
.shell {
width:980px;
margin:0 auto;
}
#header {
padding:24px 0 41px 0;
border-bottom:1px solid #cbcbcb;
}
#logo-holder {
float:left;
display:inline;
padding:4px 0 0 11px;
}
#logo-holder h1#logo {
}
#logo-holder h1#logo a {
font-size:22px;
font-weight:normal;
color:#000;
line-height:21px;
font-style:italic;
}
#logo-holder p#quote {
font-size:10px;
color:#000;
line-height:12px;
padding-left:3px;
letter-spacing:0.12em;
}
#navigation {
float:right;
display:inline;
}
#navigation ul {
list-style:none outside none;
}
#navigation ul li {
float:left;
display:inline;
padding-right:7px;
}
#navigation ul li a, #navigation ul li a span {
float:left;
display:inline;
height:34px;
font-weight:bold;
font-style:italic;
font-size:12px;
color:#4c4c4c;
line-height:33px;
padding-left:15px;
}
#navigation ul li a span {
padding:0 15px 0 0;
}
#navigation ul li a:hover, #navigation ul li a.active, #navigation ul li a:hover span, #navigation ul li a.active span {
background:url(images/nav-hover.gif) no-repeat 0 0;
color:#a6a6a6;
}
#navigation ul li a:hover span, #navigation ul li a.active span {
background-position:right 0;
}
#featured-content {
padding:11px 0 18px 0;
border-bottom:1px solid #d9d9d9;
}
#featured-content h2 {
font-size:60px;
font-style:italic;
line-height:60px;
color:#fff;
padding-bottom:9px;
}
#featured-content p {
font-size:22px;
color:#7b7b7b;
line-height:25px;
font-style:italic;
}
Так то лучше, посмотрим на наш сайт сейчас:
Теперь сайт выглядит намного лучше, согласитесь же, переходим к body и footer!
<div id="main">
<div class="shell">
<div class="col">
<div class="post">
<h3>Who Are We?</h3>
<p>Текст.</p>
</div>
</div>
<div class="col">
<div class="post">
<h3>What We Do ?</h3>
<p>Текст</p>
</div>
</div>
<div class="col col-last">
<div class="post">
<h3>Latest Project</h3>
<p>Текст.</p>
</div>
</div>
<div class="cl"> </div>
<div id="main-content">
<div class="post">
<h3>Some Title</h3>
<p>Текст.</p>
</div>
</div>
<div id="sidebar">
<div class="post">
<h3>Some Title</h3>
<p>Текст</p>
</div>
</div>
<div class="cl"> </div>
</div>
</div>
<div class="footer">
<div class="shell">
<p class="lf">Copyright © 2017 <a href="#">SiteName</a> - All Rights Reserved</p>
<p class="rf"><a href="http://www.grand-sait.ru" target="_blank">Создание сайтов</a></p>
<div style="clear:both;"></div>
</div>
</div>
<!-- END PAGE SOURCE -->
</body>
</html>
Сразу же добавляем и css файл:
#main {
padding:43px 0 40px 0;
}
#main .shell {
width:952px;
padding-left:28px;
}
.col {
float:left;
display:inline;
width:290px;
margin-right:28px;
padding-bottom:41px;
}
.col-last {
margin:0;
}
#main-content {
float:left;
display:inline;
width:607px;
margin-right:28px;
}
#sidebar {
float:left;
display:inline;
width:290px;
}
.post {
}
.post h3 {
color:#000;
font-size:22px;
font-style:italic;
line-height:22px;
}
.post p {
padding-top:10px;
}
.post p a {
color:#4c4c4c;
text-decoration:underline;
}
.post p a:hover {
color:#ff0000;
text-decoration:none;
}
.footer {
font-family:Verdana, sans-serif;
font-size:9px;
padding:10px 0;
border-top:1px solid #d0d0d0;
}
.footer, .footer a {
color:#7f7f7f;
text-decoration:none;
}
.footer p {
margin:0;
padding:0;
line-height:normal;
}
.footer .lf {
float:left;
}
.footer .rf {
float:right;
}
Теперь написан весь код, осталось посмотреть, что же у нас получилось:
Вот и всё, наш html сайт готов, мы сделали это! Для кого-то — это просто, для кого-то сложно, но это только основы, дальше будет сложнее!
