HTML ШАБЛОНЫ САЙТОВ
Современные готовые адаптивные HTML 5 шаблоны.
Откройте для себя мир современных и оригинальных шаблонов сайтов...
АДАПТИВНЫЕ ШАБЛОНЫ шаблоны сайтов
Независимо от устройства, Вам будет удобно пользоваться сайтом.
Изображения будут большими, а текст четким! шаблоны сайтов

Урок 8. Блоки

Страница сверстанная при помощи блочной верстке представляет собой множество блоков. Каждый элемент в дереве элементов это самостоятельный блок.

Блок выглядит в виде прямоугольника:

У блока может быть содержимое, к примеру у элемента p - это текст. Вокруг содержимого можно прописать отступы (padding), они необходимы для внутреннего отступа текста от  границ блока.

Блок всегда обрамляет его граница border (граница блока), она может быть видимой и скрытой.

Еще у блока можно прописать поля (margin), они задают дополнительное пространство между блоками.

Размер блока определяется его содержимым или параметрами width (ширина) и height (высота).

Сейчас, чтоб стало более менее понятно давайте приведем простой пример:

<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body>
    <p>Текст в параграфе.</p>
    <p>Текст в параграфе.</p>
  </body>
</html>   

Сейчас, чтобы увидеть отступы, поля и границы, зададим border (границу):

p{
  border:1px solid red;
}   

Результат:

Давайте зададим тексту внутренний отступ от границы блока (padding):

p{
  border:1px solid red;
  padding:10px;
}   

Результат:

Мы задали отступы внутри блока, теперь давайте зададим дополнительно пространство между блоками (наружный отступ). Поможет нам в этом margin:

p{
  border:1px solid red;
  padding:10px;
  margin:50px;
}   

Результат:

Ну и давайте теперь зададим размеры блоков (width (ширина) и height (высота)):

p{
  border:1px solid red;
  padding:10px;
  margin:50px;
  width:100px;
  height:50px;
}   

Результат:

Думаю Вам уже стало понятно логика блочной верстки сайта. Переходим в следующий урок и более близко знакомимся с margin, padding, border!

 

 

 

 
html ru 240x400
Please enable / Bitte aktiviere JavaScript!
Veuillez activer / Por favor activa el Javascript!

В современном мире порой иметь собственный сайт также важно, как например, наличие номера телефона или адреса электронной почты. К сожалению, не каждый самостоятельно может сделать себе красивый профессиональный сайт, а порой даже и кривой не получается. Заказывать у программистов тоже не идеальный выход, так как не всем это по карману.

Из такой ситуации помогут выйти бесплатные HTML шаблоны сайтов. HTML шаблон сайта – это набор уже готовых статических страниц для сайта определенной тематики. С помощью такого шаблона, создать простой сайт можно буквально за пару часов, при наличии базового знания HTML разметки. В разделе HTML Вы получите эти знания, если потратите еще пару часов на изучения, а если не пожалеете время на раздел CSS, то сможете полностью управлять дизайном HTML шаблонов сайтов и настраивать их полностью под свои нужды.

Еще одним неоспоримым плюсом шаблонов сайтов является, то что их пишут в большинстве случаев профессионалы. Под профессиональным шаблоном сайтом понимается не только красивый и современный дизайн, но и так как написан код. Поисковые системы смотрят, как у Вас написан сайт, SEO оптимизирован код или нет, на основании этого понижают или повышают Ваши позиции в выдаче. Поэтому хороший сайт должен быть не только красивый и современный, что немаловажно, но и грамотно написан в плане кода.

Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.