Блочная верстка сайта с нуля. Урок 1
Всем привет!
Существует 2 вида верстки:
- табличная;
- блочная;
Табличная верстка
Табличная верстка применялась раньше, до сих пор можно видеть старые сайты, которые используют теги <table></table>, <tr></tr>, <td></td>. Сейчас ее можно применять только для создания самих таблиц, но не для всей страницы, это давно устаревшая технология, ее полностью заменила блочная верстка. Не скрою, что блочная верстка тяжелее для освоения, но она имеет рад преимуществ над табличной.
Блочная верстка
Как вы уже догадались выше, в этой статье речь пойдет именно от блочной верстке, если предыдущая статья была, как вводная, то сейчас мы будем уже разбираться более конкретно на примере — как сверстать сайт с нуля. Во время своего изучения верстки я был в поисках подробного мануала — как по шагам сверстать даже самую простую html страницу. В этой статье я хочу максимально подробно рассмотреть каждую строчку кода и объяснить принципы работы с html, чтобы любому новичку в этом деле было понятно. Надеюсь, у меня это получится. 🙂
Итак, начнем. Для примера я взял простой прототип, макетом его нельзя назвать, нормальный макет рисуется в psd формате, а у нас он в jpg. Нам главное понять принцип как же верстать сайты с помощью блочной верстки. Чтобы работать с блочной версткой нужно знать не только html, но и css (каскадные таблицы стилей). В ходе цикла статей по верстке сайта, мы как раз с вами и изучим тот набор css стилей, который в дальнейшем вам всегда поможет верстать практически любые каркасы макетов/мокапов, ведь принцип один и тот же.
Итак, вот макет (кликабельно).
Мы видим у него 4 логические части:
- Шапка сайта (далее будем называть header, хедер);
- Левая колонка (далее будем называть left sidebar);
- Правая колонка (далее будем называть content);
- Подвал (далее будем называть footer, футер);
Итак, начнем конечно же с блока хедер. У нас мокап шириной 1000 пикселей (px).
Для начала скажу, что верстка делается с помощью html тегов. Например, <div> — это тег, <strong> — это тоже тег, <html> и это тег. Теги, как правило, пишутся в паре открывающий и закрывающий. Закрывающий отличается лишь тем, что имеет после первой скобки знак «/». Например, <body> — это открывающий тег, </body> — закрывающий. После того, как мы открыли-закрыли тег, внутри уже можно писать какую-то информацию.
В начале работы вам нужно создать новый каталог у вас на диске под названием, например, myfirsthtml и в редакторе кода (я пользуюсь sublime text 3, это самая новая версия на момент написания статьи), создать 2 файла index.html и style.css. Теперь откроем index.html и начнем с разметки нашей страницы, а именно с хедера. Но перед тем как делать хедер, нам нужно сделать стандартную разметку любой html страницы. Сейчас покажу о чем я.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Заголовок страницы</title> </head> <body> <!-- html код страницы --> </body> </html> |
Теперь разберем каждую строку. Комментарии:
Строка №1: здесь указан так называемый доктайп документа, он обязателен, чтобы браузер понимал в каком виде ему нужно интерпретировать веб-страницу. Существует 4 вида доктайпов:
- XHTML 1.0
- XHTML 1.1
- HTML 4.01
- HTML 5
В свою очередь XHTML 1.0 делится на подвиды: строгий синтаксис (Strict) — не допускает никаких вольностей, нельзя применять тег <b>, <strong>; переходный (Transitional) — допускает некоторые вольности в верстке, которые нельзя использовать при строгом; содержащий фреймы (Frameset). XHTML 1.1 не делится ни на какие подвиды, он единственный, разработчики даже пророчили, что он вытеснит постепенно HTML, но если почитать за это детальней, то у HTML развился с 4 версии до 5, а стандарт XHTML, приостановил свое развитие, но тем не менее можно встретить проекты, у которых указан именно этот doctupe.
HTML 4.01 также делится на 3 повида: строгий синтаксис (Strict), переходный (Transitional) и содержащий фреймы (Frameset).
Ну и наконец-то HTML5 для всех типов документов, самый универсальный. В дальнейшем у нас предстоит большое количество статей именно с этим доктайпом. Все свои новые проекты я делаю с применением именно его. Но не будем забегать наперед, сейчас мы разбираем именно HTML 4.01. В данном примере мы используем как раз Transitional (переходный), он очень подходит для новичков.
Строка №2: открытый тег <html> он идет сразу же после указания доктайпа и включает в себя абсолютно весь html-код, вконце документа следует закрывающий тег </html>.
Строка №3: далее идут 2 тега, которые разделают весь документ по смыслу: head и body. Тег <head> служебный, в котором может быть:
- заголовок страницы <title> Заголовок страницы </title>
- описание страницы <meta type=»description» content=»Краткое описание страницы»>
- ключевые слова, разделенные запятой <meta type=»keywords» content=»верстка с нуля, html верстка»>
- и множество другой мета-информации.
После <head> </head> следует тег <body>. Именно в нем мы уже будет верстать наш сайт. Все, что находится в пределах этого тега, будет отображаться непосредственно в браузере.
Вот мы выполнили и разобрали стандартную разметку страницы с применением html4. Этот урок я буду завершать, а как сверстать основные элементы, с применением блочной верстки я расскажу в следующем уроке, который напишу в ближайшие дни. Не забывайте добавляться в группу и подписываться на мой блог, чтобы не пропустить урок №3.
Спасибо за внимание. Жду ваших комментариев 🙂
Если речь идёт только о вёрстке, то выбор фреймворка — это скорее дело вкуса, ведь в каждом из них есть минимальный набор для блочной вёрстки. Когда требуется иконочный шрифт , js-компоненты или другое, выбрать фреймворк становится проще.
Спасибо за ваше комментарий, но для данной записи — это оффтоп камент:) Как вы могли заметить, статья даже не об html5, пока что рассматриваю html4, хотя на данный момент — это уже не актуально. До фреймворка я еще не дошел. Рассматривать фреймворки буду в следующих статьях, использую в своих проектах bootstrap.
Рекомендую подписаться на блог, чтобы не пропустить и следить за обновлениями.