Этот урок рекомендуется тем, кто только начинает осваивать премудрости создания сайтов. В нем даны основные понятия о HTML и CSS . Пошагово выполняя инструкции данного урока, вы уже через несколько минут сверстаете шаблон для своего сайта.
Шаблон вебсайта мы будем делать с помощью блочной верстки , использую тег - «DIV ».
Шаг 1 - Разметка веб страницы с помощью тегов HTML
Прежде всего необходимо разметить нашу веб страницу используя HTML теги. Только после этого можно переходить к оформлению сайта с помощью каскадных таблиц стиля CSS.
HTML - это язык разметки гипертекста . С его помощью создается структура веб страницы. Для этих целей используются теги HTML. Они заключаются в скобки "<" и ">".
Теги, как правило следуют в паре - открывающий и закрывающий. Последний отличается тем, что имеет после первой скобки знак "/". (Например:
). С помощью тегов вы определяете, что будет располагаться на вашей веб странице.Каскадные таблицы стилей CSS применяются позже. Они необходимы для того, чтобы разместить содержимое тегов в определенных местах страницы, а также придать этому содержимому желаемый вид.
Простейшие теги веб страницы это:
Впоследствии, именно между тегами вы будете размещать другие теги для разметки элементов веб страницы.
Важным тегом для структурирования страницы является тег Внутри данного тега вы сможете разместить другие HTML теги, которые вам потребуются для создания содержимого вашего сайта (ссылки, текст, изображения и тд.). Все эти элементы впоследствии обретут свой стиль с помощью каскадных таблиц стиля CSS. Теперь, используя графический редактор (Photoshop например) нарисуем блоки нашей веб страницы: Код HTML этой страницы будет выглядеть, как показано ниже. Это пример использования тега div
:
Как видите, каждому тегу div
мы дали определенный селектор ID
. То есть каждому отдельному блоку нашей страницы мы дали свое название. Это необходимо для того, чтобы позже, задавая стиль блокам в файле CSS, мы могли отличать один блок от другого. Существует два вида селекторов
. ID
- используется для уникальных блоков, таких, которые больше нигде на странице не повторяются. В то время как селектор CLASS
- применятся для обозначения повторяющихся блоков. Также, мы заключили все блоки внутрь блока "container
". Это сделано для того, чтобы впоследствии можно было поместить нашу страницу целиком так, как мы хотим. Шаг 2 - прикрепление таблицы стилей CSS
Как уже было сказано, CSS таблица стилей определяет дизайн элементов веб страницы. Вы можете разместить ее как внутри своего html документа, так и прикрепить внешний файл. В этом уроке мы будем использовать последний вариант. Если вы уже открыли свою веб страницу в браузере, то ничего там не обнаружили. Это потому, что вы не наполнили свои блоки ни каким-либо содержимым, ни придали им какой-либо формы и цвета. Контент для блоков вы можете добавить между соответствующими тегами. А вот форму, расположение цвет и другие внешние проявления блоков мы зададим с помощью файла CSS. Но для начала вы должны создать его. Назовем его style.css и разместим в той же папке, что и документ html. После этого в html файле, между тегами необходимо добавить следующую строчку:
Таким образом мы связываем эти два файла вместе. Теперь при отображении веб страницы браузер будет использовать соответствующий файл стилей. Шаг 3 - задаем стиль
Синтаксис CSS состоит из селектора, свойства и значения. Селектор - это тег, для которого вы хотите определить внешний вид придавая ему разнообразные свойства. Свойство задается с помощью различных атрибутов, которые в свою очередь могут принимать разные значения. Для записи селекторов, кроме тега body
, используются знаки "#
" либо ".
". они следуют перед именем селектора. Первый применяется, чтобы указать на селектор
ID
, второй, соответственно на селктор
CLASS
. Селектор может иметь любое количество свойств. Которые заключаются в фигурные скобки "{}
". #selector {
property:value;
property:value;
property:value;
}
.selector {
property:value;
property:value;
property:value;
}
У нас имеются следующие селекторы:
body Свойства и возможные значения CSS:
Фон
(background
) может быть задан изображением или цветом, либо и тем и другим одновременно. Чтобы отобразилось изображение, необходимо прописать путь к нему. Если фон задан цветом, то используется шестнадцатеричная система (#ffffff для белого цвета и тд.). Свойство color используется для определения цвета текста. font-size
- размер текста, задается в различных системах измерения, здесь мы будем использовать пиксели. margin
- определяет местоположение блока. За точку отсчета при этом может выступать как окно браузера, так и границы других элементов веб страницы. Так как мы хотим разместить свою страницы посредине окна браузера, то запишем такие значения для данного свойства: 0px auto 0px auto. Запись может выглядеть проще 0px auto. Отсчет в случае задания данных значений идет по часовой стрелке: верх - право- низ - лево. Поскольку верх - низ, право - лево у нас совпадают, то дублировать их нет потребности. width
- ширина блока. height
- высота. float
- свойство, которое позволяет нам позиционировать элементы селектора, главным образом по левую или по правую сторону. Теперь добавим код в наш файл стилей style.css (ведь вы его уже создали, да?): body { #container { #header { #navigation { #menu { #content { #footer { Примечание
На момент написания статьи не все браузеры корректно отображали созданную веб страницу. Для устранения этого недостатка можно использовать дополнительный блок, который следует разместить сразу за блоком content
. Вот его код HTML:
#clear { А между тегами head
записать, какую кодировку необходимо использовать браузеру, если вы вдруг попробуете добавить русский текст в свои блоки:
Финальный код HTML:
body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}
#header {
background: #838283;
height: 200px;
width: 900px;
}
#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}
#menu {
background: #333333;
float: left;
width: 200px;
height: 600px;
}
#content {
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}
#clear {
clear:both;
}
#footer {
background: #838283;
height: 180px;
width: 900px;
}
Надеемся, данный урок позволил вам понять основы работы с HTML и CSS
. Вот как это выглядит в браузере: От автора:
приветствую вас на страницах блога webformyself. Блочная верстка – самый популярный сегодня способ создать шаблон сайта. И таковым он будет оставаться видимо еще долгое время. В связи с этим давайте разбираться, как осуществляется блочная верстка css-свойствами.
Для начала нужно понять, что css не создает блоки – он оформляет их. Сами по себе они формируются в HTML – языке разметки гипертекста. По умолчанию блок по высоте будет занимать место, равное высоте его содержимого. По ширине же он займет все доступное пространство, которое есть в родителе. Для примера: если ширина родительского контейнера составляет 300 пикселей и в нем создан блок, то он тоже будет занимать такую ширину (только если у родителя не заданы отступы). Все остальные элементы, которые будут создаваться в контейнере, не могут стоять на одной линии с первым блоком и будут перенесены дальше. Обычный пустой блочный элемент записывается с помощью парного тега — div. Сам по себе он ничего не делает. Например, давайте вспомним, что многие теги имеют определенный смысл: абзац является частью какого-то текста, подзаголовки нужны для улучшения навигации и восприятия и т.д. А вот тег div выступает просто контейнером. В своем обычном поведении несколько созданных блоков будут идти сверху вниз друг за другом. Здесь сразу же наблюдается серьезная проблема, не так ли? А как же сделать боковую колонку, как, в конце концов, делают сайты, на которых в одной строке идет 3-5 анонсов новостей, да еще и с картинками? Вот тут нам и приходит на помощь css, с помощью которого расставить элементы на странице можно абсолютно любым образом. Как мы убедились выше, по умолчанию блоки очень упрямые. Не подпускают к себе других, да еще и занимают всю ширину. Конечно же, это нужно иногда исправлять, потому что структура многих сайтов требует этого. Давайте сначала разберемся с размерами. В css размеры элементам можно записывать с помощью свойств width и height. Зачастую значения задают в пикселях, хотя иногда в процентах или других относительных единицах. Вот давайте представим, что есть большой родительский контейнер и в нем есть какой-то блочный элемент. Чтобы определить для него свойства через таблицу стилей, нужно как-то к нему обратиться. Если мы запишем так: div{
width: 250px;
} div
{
width
:
250px
;
То абсолютно все блоки получат такую ширину, что нам явно не нужно. Значит, нужно добавить к блоку стилевой класс или идентификатор. Они добавляются с помощью атрибутов class и id, а значением выступает произвольное имя, но начинаться оно должно с английской буквы. Разрешается использовать также цифры, дефис и знак нижнего подчеркивания. Обычно самые важные элементы на странице получают идентификатор (шапка, контент, подвал), а менее важные (пункты меню, заголовки и т.д.) стилевые классы. Я бы даже сказал, что дело не в важности, а в том, уникальный ли это элемент. Понятно, что двух шапок на сайте в принципе быть не может (я имею ввиду главную шапку вверху сайта), а вот пунктов меню может быть сколько угодно. Самое главное, это запомнить – идентификатор задается одному элементу, один раз и больше не может записываться ни для какого другого элемента. Это уникальная метка. Стилевой класс можно записывать хоть сотне элементов, а одному блоку можно через пробел задать сколько угодно классов. Вот так: И как вы думаете, что теперь с ним произойдет, когда мы запишем такие свойства? Width{
width: 250px;
}
.height{
height: 250px;
}
.border{
border: 10px solid green;
} Width
{
width
:
250px
;
Height
{
height
:
250px
;
Border
{
border
:
10px
solid
green
;
К блоку применятся все эти правила и теперь какому бы элементу вы не задали, например, класс border, он получит толстую зеленую рамку в 10 пикселей. Далее я коротко расскажу о двух важных свойствах, которые позволят блокам располагаться в одну линию. Сразу пример: есть контейнер шириной 1000 пикселей. Ваша задача – впихнуть в него 3 блока шириной по 300 пикселей, чтобы они располагались на одной горизонтальной линии. Как это сделать? Есть два способа. Во-первых, каждому блоку нужно задать класс. Вообще некоторые разработчики добавляют блочным элементам общие классы: <
div
class
=
"block1 inline"
>
<
/
div
>
<
div
class
=
"block2 inline"
>
<
/
div
>
<
div
class
=
"block3 inline"
>
<
/
div
>
Таким образом, каждый элемент может быть оформлен по-своему, но все они могут получить одинаковые указания, потому что все содержат класс inline. А в нем мы можем записать так: Inline{
display: inline-block;
} Inline
{
display
:
inline
-
block
;
Либо так: Inline{
float: left;
} Inline
{
float
:
left
;
Первое свойство преобразовывает элементы в строчно-блочные. Они не теряют своих свойств, но могут располагаться в линию, если им хватает ширины в родителе. Второе свойство прижимает каждый элемент к левому краю родительского контейнера. Но поскольку второй и третий элементы не могут прижаться к самому краю, они встанут за первым и тоже образуют линию. Как делается в css блочная верстка резинового сайта? Такой шаблон имеет большое преимущество перед фиксированным, потому что может меняться в зависимости от ширины окна. Делается он в основном по такому принципу: общий элемент контейнер получает фиксированную ширину, а уже в нем помещаются структурные части, которым размер пишется в процентах. Несмотря на то, что термин «слой» достаточно устойчиво используется при разработке
сайта, расшифровке этого понятия в литературе по сайтостроению практически не
уделяется внимание. В дальнейшем я буду активно использовать термин «слой»,
поэтому вначале необходимо определить, что же под ним подразумевается. Первоначально слои ввела компания Netscape, включив в свой браузер поддержку
тега Однако необходимость в указанных возможностях уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан
и одобрен в рабочем проекте консорциума «CSS Positioning (CSS-P)». Основная
нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента,
в том числе менять значения динамически через JavaScript. К сожалению, объектные
модели браузеров для доступа к элементам различались, поэтому приходилось писать
достаточно сложный код, который бы учитывал эти особенности. В настоящее время разработчики популярных браузеров стали придерживаться спецификаций
HTML и CSS, что сильно облегчило жизнь создателям сайтов, поскольку это снизило
время на отладку сайта в разных браузерах. Тем не менее, различия в подходах
у браузеров существуют и при их возникновении разработчики придерживаются следующих
форм работы. Хак
— это набор приемов, когда определённому браузеру
«подсовывают» код, который понимается только этим браузером, а остальными игнорируется. Несмотря на то, что хаки работают, использовать их следует ограниченно или
вообще обходиться без них. Дело в том, что хаки снижают универсальность кода и
для модификации параметров одного элемента приходится вносить изменения одновременно
в разных местах. Есть и другой, перспективный путь — придерживаться спецификации CSS. Несмотря
на то, что браузеры не в полной мере сами её поддерживают, они прогрессируют
именно в направлении полной поддержки различных спецификаций
(HTML, CSS, DOM). Таким образом, получается, что будущие версии браузеров будут
унифицированы и один и тот же сайт станут отображать корректно. Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями.
Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются
стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную
путаницу, если вместо «таблица» или «абзац» мы бы говорили «слой». Поэтому
договоримся относить этот термин только к тегам В HTML4 и XHTML слой — это элемент веб-страницы, созданный с помощью
тега Таким образом, выражение «блочная вёрстка» или вёрстка с помощью слоёв заключается в конструктивном использовании
тегов Код HTML должен содержать только теги разметки и теги логического форматирования,
а любое оформление выносится за пределы кода в стили. Такой подход позволяет
независимо управлять видом элементов страницы и её содержимым. Благодаря этому
над сайтом может работать несколько человек, при этом каждый выполняет свою
функцию самостоятельно от других. Дизайнер, верстальщик и программист работают
над своими задачами автономно, снижая время на разработку сайта. При блочной вёрстке существенное значение уделяется универсальному тегу
Благодаря этому тегу HTML-код распадается на ряд чётких наглядных блоков, код при этом получается более компактным, чем при табличной вёрстке, к тому
же поисковые системы его лучше индексируют. При блочной вёрстке, конечно же, используются таблицы, но только в тех случаях,
когда они нужны, например, для наглядного отображения чисел и других табличных
данных. Вариант, когда от таблиц предлагается отказаться вообще, является нецелесообразным
и, более того, вредным. Подведу итоги. В HTML4 и XHTML слой это базовый элемент вёрстки веб-страниц, при которой активно применяются
стили и придерживаются спецификаций HTML и CSS. При таком подходе важная роль
уделяется тегу В HTML5 добавлено несколько новых тегов разметки для обозначения разных типовых блоков страницы. К примеру,
container
header
navigation
menu
content
footer
font-family
- это свойство определяет семейство шрифтов, которыми будет отображаться текст. Как правило задается сразу три типа шрифтов. Поэтому, если браузер не смог отобразить первый, ему есть из чего выбирать (Trebuchet MS, Arial, Times New Roman).
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}
background: #838283;
height: 200px;
width: 900px;
}
background: #a2a2a2;
width: 900px;
height: 20px;
}
background: #333333;
float: left;
width: 200px;
height: 600px;
}
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}
background: #838283;
height: 180px;
width: 900px;
}
clear:both;
}
Где создаются блоки
Привычная блочная модель
Блочная верстка сайта с помощью css: основные свойства
Несколько блоков на одной линии
Относительные размеры
Разделение содержимого и оформления
Активное применение тега
Таблицы применяются только для представления табличных данных
