Уроки верстки

Урок 2 – Верстаем первую страничку

• 13-06-2018 •

На прошлом уроке, мы рассмотрели основы основ, узнали, что сайт состоит из блоков, а блок это соответствующий тэг, которму мы задаем конкретные стили.

Но есть определенные правила, которые следует соблюдать

Из чего состоит страница сайта


<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="UTF-8"> 
		<title> Title of the document </title>  
		<link rel="stylesheet" href="css/style.css"> 
	</head> 
<body> Content of the document...... </body> 
</html>

Каждая страница состоит из выше указаной структуры

!DOCTYPE html – не обязателен, все будет работать и без этого, но желателен для браузера, чтобы он понимал, какой язык разметки используется.

Дальше открывается тэг html , в котором и должно быть все содержимое страницы

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

Все стили пишутся в отдельном файле

Тэг head закрывается и открывается body, тэг, в котором и хранится визуальная часть сайта

Создаем структуру сайта


<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="UTF-8"> 
		<title> Title of the document </title>  
		<link rel="stylesheet" href="css/style.css"> 
	</head> 
<body> 

 <header> 
 	<div class="logo"> 
 	 <img src="img/image.png" alt="image-name"> 
 	</div> 
 
 	<nav> 
 	 <ul> 
 	   <li><a href="">Home</a></li>  
	   <li><a href="">About us</a></li>  
	   <li><a href="">Contacts</a></li>  
 	 </ul> 
 	</nav> 
 </header> 
 
 <section> 
	<h3>Hello world</h3> 
 	<p>Some text</p> 
 </section> 
 
 <footer> 
 	<p>© 2018 All Rights Reserved</p> 
 </footer> 

</body> 
</html>

Что мы добавили:

  • Мы добавили шапку тегом header (не путайте с head), в шапке у нас будет хранится логотип (прописали тегом img) и навигационное меню.
    • nav – это блок для списка ссылок
    • ul – указываем что сейчас будет начинаться список
    • li – строчка из списка
    • a – ссылка
  • Дальше мы содали секцию (section), в которой у нас будет заголовок и текст
  • И в конце у нас будет в подвал (footer), в которой обычно храниться краткая информация о сайте

Мы добавили тэгу div некий класс logo. Дело в том, что сайт может содержать очень много тегов div, и когда мы будем писать стили, как нам указать, к какому div’у прописать стили. Для этого и указываются стили. Название класса может быть любое. Придумываете вы сами.

Если сейчас весь этот код поместить в jsfiddle и запустить, вы увидете не сгруппированный текст, который мало чем похож на сайт. Для этого и нужны стили

Попробуем немного украсить наш сайт:


body{
  margin: 0;
  padding: 0;
  max-width:700px;
  margin:0 auto;
}

header{
  border-bottom: 1px solid #ccc;
  overflow: hidden;
  margin-bottom: 20px;
}

header .logo{
  float:left;
}

header nav{
  float: right;
}

header nav li{
  display: inline-block;
  padding-right: 10px;;
}

section h3{
  font-size: 35px;
}

section p {
  font-size: 20px;
}

footer{
  padding:30px 10px;
  background-color: #efefef;
}


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

Для начало мы указали тэгу body, никаких отступов, максимальная ширина 700 px и выровнить по центру. Все это мы проходили на прошлом уроке.

Шапке мы указали следующее:

  • border-bottom: 1px solid #ccc – Линия снизу шириной в 1 px, сплошная, цвет #ccc
  • overflow: hidden – все что в этом блоке, остается в этом блоке, все что хочет вылезти за его границы, будет удалено.
  • margin-bottom: 20px; – Внешний отступ снизу 20 px

Цвета могут задаваться следующим образом: #ccc или тот же цвет rgb(204, 204, 204)

В каждом браузере есть консоль, в который вы можете просмотреть из чего состоит страница, ее стили, файлы, картинки и прочее. На windows, это кнопка f-12, чтобы выделить какой то определенный блок на сайте, жмите Ctrl + Shift + C. Можете кликнуть в любое место на сайте и вам сразу отобразятся стили и структура.

Это очень полезная фишка, которой вы будете пользоваться постоянно. К примеру вы можете поменять в консоле стиль и он тут же сработает и отобразиться на экране. К примеру вы подбираете цвет, опять же это можно сделать с консоли.

Идем дальше:

header .logo – Это значит, что внутри тэга header тег с классом logo

Тэгу div с классом logo присваеваем float:left;. Это значит что блок будет прижиматься к левому краю, а все рядом стоящие блоки будут его как бы обтекать

Навигационной меню мы задаем float:right; чтобы он прижался к правому краю

Переходим к нашему списку header nav li. Мы указываем что, у каждого элемента из списка, будет отступ справа в 10 px. А также задаем display: inline-block

На данный момент, мы разберем 2 варианта:

  • display: block – блочный элемент, который растягивается на всю ширину, все последующие блоки, будут идти после него снизу
  • display: inline-block – Блок растягивается ровно на столько, на сколько широкие у него внутренности, все последующие inline блоки, будут выстраиваться рядом справа.

Последнее что осталось разобрать из того что вы не знали, это background-color. Но как понятно из называние стиля, это цвет заднего фона.

Если сейчас скопировать весь html и css и вставить в jsfiddle, то вы увидите уже что то похожее на сраничку

В следующем уроке, мы пропробуем добавить некоторую анимацию на сайт с помощью стилей

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