Как создать сайт? Урок №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">&nbsp;</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">&nbsp;</div>
</div>
</div>
<div class="footer">
<div class="shell">
<p class="lf">Copyright &copy; 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 сайт готов, мы сделали это! Для кого-то - это просто, для кого-то сложно, но это только основы, дальше будет сложнее! 


Отправить сообщение об ошибке
Сделай мир чуть умней, поделись статьёй :)

Опубликовал Apelsin2017 - 16 января 2017, 01:54 - 3 просмотра


Похожие записи: Bootstrap 3. Часть 2Bootstrap 3 - что это?Создание мобильной версии для сайта


Комментарии




  • smilesadblumblushbyecraycrazybiggrindancedance2goodmoskingscratchshokshoutwackowinkyesbeeedntknwfriendsbadgamergamer2irefulmdameetingneaofftopicrofl



 

                      
Сделать заказ

Создание сайтов на разных языках или платформах на заказ за несколько дней.




Заказать!




Внимание!

Дорогие читатели, если вы увидели ошибку или опечатку, помогите нам ее исправить! Для этого мы запустили на сайте удобную клавишу для исправления ляпов. Выделите ошибку и нажмите одновременно клавиши «Ctrl» и «Enter». Мы узнаем о неточности и как можно скорее исправим.




Подпишись на еженедельную рассылку!

* indicates required



Рекомендую

Я перепробовал несколько хостингов, некоторые были часто недоступны, на других почти всегда были технические работы, но вот, мне наконец попал под руки этот замечательный хостинг, где цены начинаются от 11 рублей, почти никогда нет каких-то работ, что не может ни радовать. Представляю вашему вниманию: LITE.HOST



Сайт размещен на хостинге LITE.HOST стоимость от 53 рубля в месяц

Вход на сайт


Avatar