Блочная вёрстка


Содержание

Блочная вёрстка

В прошлой теме было рассмотрено создание страницы с двумя колонками. Подобным образом мы можем добавить на страницу и большее количество колонок и сделать более сложную структуру. Например, добавим на веб-страницу второй сайдбар:

Здесь опять же код обоих сайдбаров должен идти до блока с основным содержимым, который обтекает их.

Теперь изменим стили обоих сайдбаров и основного блока:

Опять же у обоих плавающих блоков — сайдбаров нам надо установить ширину и свойство float — у одного значение left , а у другого right .

Блочная верстка с нуля. Урок 2

Приветствую всех читателей блога!

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

Напомню наш макет, который я привел в предыдущем уроке:

Перед тем как начать верстку, давайте разберем теорию:

    присвоим класс для блока —

Класс или идентификатор может иметь любое имя, используя буквы латинского алфавита (вобщем в верстке мы работает только с переключенным языков на английский, русский не используется). Начинать класс или идентификатор с цифр или других символов, кроме букв — нельзя!

Имя класса может сколько угодно раз повторяться на одной странице, а вот имя идентификатора должно быть уникально в пределах одной html страницы. Например,

Блочная верстка: что это и зачем она нужна?

Верстка начинает свой путь с тех времен, когда код писался в HTML, а разметка выполнялась при помощи таблиц. Со временем от этого отошли, а разметку переложили на CSS. Сейчас существует несколько способов верстки. Современными можно считать Flex-box, набор инструментов Bootstrap, а также самые последние Grids, дающие огромные возможности создателям. Одним из переходных вариантов в становлении Web-а является блочная верстка. Ранее использовавшаяся для создания разметки всей страницы, ныне она считается устаревшей, но тем не менее все еще находит широкое применение в частных случаях.

Что представляет собой блочная верстка?

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

В настоящий момент такой тип верстки значительно устарел, а сам тег

Для наглядности блочную верстку можно представить следующим образом:

Div с классом wrapper представляет собой родительский контейнер или, другими словами, обертку. Элементы с классом element — это своеобразные «кирпичики» нашей сложной структуры. Обратите внимание, что разный отступ от края, в сравнении с родительским элементом, используется в коде для наглядности, чтобы легче было определить структуру и иерархию элементов.

Использование таблиц

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

Такой подход, безусловно, является нецелесообразным и даже вредоносным. Он заставляет простые вещи выполнять более сложными и неудобными путями. Сейчас же таблица используется только для отображения соответствующих данных. Другими словами — по прямому ее назначению.

Разделение ролей

Если раньше все построение выполняли на HTML, блочная верстка принесла с собой полное разделение ролей. Сейчас HTML служит только для разметки, логического форматирования и создания каркаса страницы. Стили же полностью вынесены и входят в отдельный файл, подключаемый в документ. Для размещения элементов и создания привлекательного и отзывчивого дизайна служит CSS. Для обращения к блоку используются классы, которым задается имя элемента. Например, для блока заголовка мы назначим класс header. Это также позволяет легче ориентироваться в коде. Сейчас же это отчасти выполняют специализированные теги, появившиеся в HTML5.

Использование блоков

При блочной верстке активно используется тег

Активно использует CSS блочная верстка. При помощи доступных инструментов можно создать любое построение страницы с точностью до пикселя. Такая верстка называется pixel perfect. Она подразумевает идеальное совпадение сайта с макетом. На фото, представленном выше, видно, что и с блочной версткой не все так просто. Первое время без таблиц обойтись было просто невозможно. Они использовались для создания основного построения страниц, а блоки применялись для отдельных элементов. Так было до тех пор, пока не научились задавать блокам высоту.

Достоинства

Блочная верстка сайта имеет следующие преимущества:

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


Дальнейшее развитие

В настоящее время блочная верстка div является устаревшей и находит лишь ограниченное применение, только как частный случай для определенных ситуаций. На смену ей в верстку пришло позиционирование и обтекание. Они имели массу недостатков, но в целом позволяли больше, чем блочная верстка.

Далее появилось построение при помощи строчно-блочных элементов. Это существенно облегчило работу программистов. Этот способ обладает преимуществами обоих типов блоков и позволяет создавать более отзывчивый и адаптивный дизайн. Стоит отметить, что все эти способы так или иначе состояли из элемента div, что и дало название «дивная верстка».

В настоящее время для построения страницы используются Flex-box и bootstrap. Они заметно уменьшают код и позволяют быстрее и проще создавать качественный адаптивный дизайн. Дают возможность перемещать блоки, не ломая всю страницу.

На острие прогресса стоит новая технология — Grids. Она позволяет очень быстро и легко создавать дизайн любой сложности. А блоки, обтекание, позиционирование, как в свое время произошло с таблицами, используются только по прямому назначению.

Блочная верстка

Ранее в книге мы уже несколько раз упоминали о том, что верстка сайтов таблицами канула в Лету, и ее успешно заменила блочная верстка. HTML-таблицы должны использоваться сугубо по прямому назначению (структурирование и отображение данных с распределением по строкам и столбцам), но никак не для создания макета веб-страницы и организации всего ее контента.

Что касается оформления внешнего вида сайта, то в современной веб-разработке HTML-код должен содержать лишь теги и контент в них, а стилевые правила необходимо размещать отдельно от HTML, в файлах CSS. Inline-стили, которые прописываются прямо в веб-документе — это исключение из правил, к которому стоит прибегать лишь по очень уважительным причинам.

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

Блочная верстка с

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

Через различные классы и идентификаторы div-блокам задается соответствующее CSS-оформление. К примеру, чтобы было удобнее писать стили для шапки сайта, можно добавить к блоку класс .header , а для футера — класс .footer .

. Согласитесь, нет смысла использовать вместо него

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

Блочная верстка с HTML5

И, раз уж мы заговорили о семантике в веб-документах, стоит упомянуть и о тегах, появившихся в HTML5. Новые семантические теги были специально созданы для группировки контента конкретного типа.

Например, шапка сайта может помещаться в HTML5-тег , а подвал — в похожий тег . Кроме того, существует еще множество других семантических тегов — , , и т. д. Данными тегами можно заменять обычные теги

Как вы могли догадаться, HTML5-теги дают более точную информацию о том, что в них содержится. Это дает определенные преимущества в плане идентифицирования роли того или иного контента веб-страницы, однако со стороны стилизации ничего не меняется: вы можете точно так же применять CSS-стили к семантическим тегам, как применяете их к простым блокам

Блочная верстка сайта — html и css, и почему начинающим повезло больше, чем тем кто верстает уже давно

Доброго времени суток, уважаемые читатели. Верстка сайта – интересное дело, как только начинаешь в ней разбираться. Проблема заключается лишь в том, чтобы найти по-настоящему хорошие материалы для обучения. На первых порах код может показаться нелепым набором символов, но стоит овладеть тайными знаниями, как они превращаются в довольно простой и понятный алгоритм, а также начинают приносить доход и моральное удовлетворение.

Сегодня поговорим про то, что такое html блочная верстка и css. Магический язык программирования станет менее страшен. Надеюсь, что к концу статьи вы научитесь уже видеть кое-какие элементы кода и сможете принять для себя твердое решение стоит ли вам во все это ввязываться.

Почему вам повезло больше, чем верстальщикам, начавшим работу уже давно

Существует два типа верстки: блочная и табличная. На заре времен верстка строилась в виде таблиц. Сперва создавалась всего одна, большая.

В нее встраивался head – голова, основная часть. Та, в которую входит логотип, какая-то основная информация типа телефонов и так далее.

Далее сайтбар. Это боковая панель. В нее можно запихнуть навигационное меню, ссылки, списки, рекламу.

Далее врисовывалось основное меню для перехода по категориям.

Основная контентная часть. Текст статьи, вводное приветствие или что-то иное.

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

Чуть позже появились новые стандарты. Табличную верстку заменила блочная. Тег «div» — это и есть блочная верстка. Можете посмотреть код любого сайта. Кликните правой кнопкой мыши и выберите «Просмотр кода элемента». Взгляните на мой скриншот. Тут есть блок главной страницы, футера, левой и правой колонки. Все они подписаны.

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


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

Пошаговая инструкция: как делаются сайты

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

Более 80% людей просто смотрят на непонятный набор символов, вспоминают школьную программу по математике: логарифмы, дифференциалы – сходят с ума, пугаются и забывают об этой теме: «Пойду лучше китайский выучу, оно-то проще будет».

Вы же уже увидели кое-какой алгоритм и убедились, что в наборе символов есть повторяющиеся элементы. Это отлично и, согласитесь, стало не так страшно.

Давайте теперь посмотрим как происходит сотворение сайта. Сначала дизайнеры работают в Photoshop. У них получается примерно такая вот картинка. Пока это всего лишь фотография, однако, у нее есть свои отличия.

Она изготавливается в особом фотошоповском формате, типа блокнотного txt или вордовского doc. Из psd, так называется этот формат, раскраиваются блоки. Для этого есть специальная кнопка в меню слева.

После того как документ раскроен. Его можно «Экспортировать для web» и в результате на компьютере появляется папка images, которую верстальщик использует для распределения картинок по сайту.

Я сделал этот вариант за минуту, он не правильный. Просто хотелось вам показать примерный результат. Вы можете скачать электронную версию моего psd-макета (скачать) и попробовать сделать свою, правильную версию, посмотрите, какие картинки пригодятся для размещения и как вы их будете вырезать. Заодно попробуете поработать самостоятельно над шаблоном в photoshop.

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

Ваш первый сайт. Верстка займет всего пять минут

Над самой версткой можно работать в программе Notepad++. Сегодня я не буду затрагивать программу Adobe Dreamweaver, т.к. это тема отдельной статьи, но отмечу, что она как раз создана для верстальщиков.

Работы над сайтом обычно не начинаются с создания файла style.css, но думаю что так вам будет интереснее. Это основной документ, в котором описывается как именно будет выглядеть ваш портал. Все просто. Даже английский учить не обязательно.

Background – это цвет фона.

Кликнув два раза в Photoshop по цветовой палитре вы можете узнать и другие цвета.

Вот так будет выглядеть html документ с текстовой составляющей. Уже знакомые меню, тела и контейнеры… тег h2 тоже должен быть вам знаком. Это заголовки. Впишите в них свои слова.

Скачайте эти два документа в одну папку и откройте с помощью Notepad ++, затем отредактируйте цвет и текст, а затем запустите index.html с любого браузера (скачать).

Получится примерно такой вариант.

Поздравляю. Это ваша первая страница в интернете! Вы сделали ее, у вас получилось. Естественно, что вместо цвета можно вставить и картинку, которая была вырезана из фотошопа в документ images. Для этого нужно просто прописать путь. Как вы видите, ничего супер сложного тут нет.

И напоследок… качаем видео уроки

Как я вам уже говорил, самое сложное в верстке – это найти хорошие обучающие материалы. Сам я начинал с книг и только через две недели смог сделать свой первый индекс-файл. Чтобы вы понимали, без таблицы стилей (css) она будет выглядеть вот так.

Согласитесь, вообще не впечатляет. Поэтому я рекомендую вам постигать основы при помощи видео курсов. Внизу я разместил ссылки, кликнув по ним, вы можете скачать бесплатные уроки html и css. Они позволяют быстрее достигнуть хороших результатов. Кроме того, чтение требует значительно большей силы воли, нежели просмотр интересных видео.

  1. Html — уроки для начинающих.
  2. Css — уроки для начинающих.
  3. Бесплатный мини-курс по вёрстке сайта.

Желаю вам успехов в ваших начинаниях. Уверен, что совсем скоро вы начнете не только учиться, но и работать онлайн, а также реализовывать невероятные проекты!

Если вам понравилась эта статья – подписывайтесь на рассылку и получайте больше полезных материалов для совершенствования собственных навыков!

Блочная верстка CSS

Дата публикации: 2020-02-19

От автора: приветствую вас на страницах блога webformyself. Блочная верстка – самый популярный сегодня способ создать шаблон сайта. И таковым он будет оставаться видимо еще долгое время. В связи с этим давайте разбираться, как осуществляется блочная верстка css-свойствами.

Где создаются блоки


Для начала нужно понять, что css не создает блоки – он оформляет их. Сами по себе они формируются в HTML – языке разметки гипертекста. По умолчанию блок по высоте будет занимать место, равное высоте его содержимого. По ширине же он займет все доступное пространство, которое есть в родителе.

Для примера: если ширина родительского контейнера составляет 300 пикселей и в нем создан блок, то он тоже будет занимать такую ширину (только если у родителя не заданы отступы). Все остальные элементы, которые будут создаваться в контейнере, не могут стоять на одной линии с первым блоком и будут перенесены дальше.

Обычный пустой блочный элемент записывается с помощью парного тега — div. Сам по себе он ничего не делает. Например, давайте вспомним, что многие теги имеют определенный смысл: абзац является частью какого-то текста, подзаголовки нужны для улучшения навигации и восприятия и т.д. А вот тег div выступает просто контейнером.

Привычная блочная модель

В своем обычном поведении несколько созданных блоков будут идти сверху вниз друг за другом. Здесь сразу же наблюдается серьезная проблема, не так ли? А как же сделать боковую колонку, как, в конце концов, делают сайты, на которых в одной строке идет 3-5 анонсов новостей, да еще и с картинками? Вот тут нам и приходит на помощь css, с помощью которого расставить элементы на странице можно абсолютно любым образом.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Блочная верстка сайта с помощью css: основные свойства

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

Давайте сначала разберемся с размерами. В css размеры элементам можно записывать с помощью свойств width и height. Зачастую значения задают в пикселях, хотя иногда в процентах или других относительных единицах.

Вот давайте представим, что есть большой родительский контейнер и в нем есть какой-то блочный элемент. Чтобы определить для него свойства через таблицу стилей, нужно как-то к нему обратиться. Если мы запишем так:

Блочная вёрстка сайта или табличная? Что лучше?

О чём пойдёт речь в статье?

Приветствую Вас дорогой читатель!

Сегодня я хочу рассказать Вам чем блочная вёрстка сайта отличается от табличной и провести небольшой анализ чтобы выявить какую вёрстку лучше использовать и почему.

Итак, давайте сначала рассмотрим табличную вёрстку.

Табличная вёрстка

Создаётся на основе таблицы, для ячеек которых прописываются стили и вставляется контент.

Достоинства:

  • блоки не «перескакивают» на другую строку при масштабировании
  • как правило, не возникает проблем с кроссбраузерностью
  • легче в освоении
  • корректно отображается в разных браузерах и на разных устройствах.

Недостатки:

  • менее гибкая
  • большой объём HTML кода
  • при создании адаптивного дизайна с ней крайне трудно и неудобно работать
  • более сложно править (особенно если дело касается переноса какого то блока в другую часть страницы)
  • более сложно править (особенно если дело касается переноса какого то блока в другую часть страницы)

Блочная вёрстка сайта

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

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

Достоинства:

  • очень гибкая в плане задания и изменения стилей для отдельных блоков
  • позволяет легко реализовывать даже самые сложные дизайн-макеты
  • позволяет легче реализовывать адаптивный дизайн (адаптивную вёрстку)
  • при необходимости легко преобразуется в табличную вёрстку (точнее сказать можно сделать так чтобы блоки отдельных элементов рассматривались браузером как ячейки таблицы)
  • загрузка блоков происходит быстрее чем таблиц.


Недостатки:

  • при вёрстке макета из нескольких колонок возможны перескакивания блоков на новую строку при масштабировании браузера
  • значительно сложнее добиться кроссбраузерности
  • сложнее в освоении чем табличная

Сравнение блочной и табличной вёрстки

Давайте сравним код табличной и блочной вёрстки сайта. Для этого возьмём один и тот же макет и реализуем его с использованием табличной и блочной вёрстки.

Div верстка. Как ее использовать, различные варианты исполнения

В интернете очень много материалов по поводу div-ов. Поэтому я решил создать такую статью, которая бы все содержала бы в себе, что касается блочной верстки. Из данной статьи Вы узнаете, как создать Вашу первую страницу, используя блочную верстку. Но основной акцент данной статьи я все-таки хочу сделать на различных проблемах, с которыми сталкиваются обычные пользователи, особенно новички, которые только начинают свое знакомство с Div-ами. Благодаря этой статье мы рассмотрим всевозможные варианты употребления div-ов, узнаем, что можно делать с этими блоками, как их изменять и вообще как ими пользоваться. Под статьей Вы увидите комментарии, оставляйте свои комменты, вопросы, и я обязательно помогу решить Вашу проблему и даже добавлю Вашу проблему в основную статью для остальных пользователей.

Div — верстка, это что такое?

Раньше, в эпоху становления интернета сайты верстались с помощью таблиц, что было достаточно неэффективно, и на смену этому устаревшему способу пришел новый — блочная верстка, используя Div-ы. Как видно, даже названия методов верстки сайтов отражают те теги, которые используются в создании сайта. Раньше это был тег сейчас тег

Если взглянуть практически на любой современный сайт, то можно отметить их некоторое сходство, а именно присутствие на этих сайтах определнных зон: меню (menu), контент (content), шапка (header), низ сайт (footer). Такие зоны есть практически у любого сайта. А выглядят они все примерно так, как показано ниже.

На рисунке разными цветами я указал разными цветами зоны моего сайта. Красным — шапку, зеленым — меню, синим — контент, черным — низ сайта. В середине конента также я добавил блок названия статьи, и собственно блок самой статьи (текста). Вот таким образом выглядит процентов 70 сайтов в интернете, может быть только блоки меняются местами, но суть остается такой же.

Преимущества блочной div верстки

Преимущества дивной верстки следующие:

  • меньше кода, а значит меньше «мусорных» тегов на странице
  • возможность более гибкой разметки, т.к. каждый div не привязан ни к чему (в отличие от ячейки таблицы)
  • возможность поменять местами блоки в коде не характерным способом (например, сначала идет контент, а потом идет шапка, хотя визуально сначала идет шапка, а потом контент)
  • гораздо больше возможностей для разных JavaScript’ов
  • современный вариант (табличная верстка более не применяется)

Начинаем кодить, используя Div (тег

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

Давайте создадим простенький шаблон страницы, используя div-ы. Учтите, данный код надо выставить после и перед

Создание сайта. Блочная верстка сайта | Урок 1

Авторский цикл статей, посвященный основам блочной верстки сайтов. Это первое, с чего стоит начать изучение темы создания сайта. Уроки будут полезны тем, кто хочет изучить основы HTML и CSS не только в теории, но на практике.

По ходу изучения темы мы создадим сайт, обычный сайт, без особых наворотов, но вполне симпатичный.

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

Что такое блочная верстка?

Что такое блочная верстка сайта и с чем ее едят?

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

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

Блочная верстка — совсем другая песня. Здесь все элементы страницы расположены в специальных блоках, которые называются div. По своей сути они чем-то похожи на те же таблицы. Коробка — она и в Африке коробка. Но блоки гораздо удобнее, проще и функциональнее.

Блок в верстке сайта — это обычная прямоугольная область, которая обладает рядом свойств, таких как: рамка, поля и отступы. Содержимое блока может быть чем угодно — кусок текста, картинка, список, форма для заполнения, меню навигации и т.п.

Рамка (border) — это контур блока, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля (padding) — отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.


Отступы (margin) — это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

Блоки, как и таблицы, всегда располагаются на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально в одну линию, то в их свойствах задаётся такой параметр как «обтекание» (float). Но об этом чуть позже.

Блочная верстка сайта. Тэги

Тэг — это особая конструкция языка HTML. Различают открывающий и закрывающий тэги. Не путайте их с хэштэгами из соцсетей, или метками (тегами) на сайтах, это разные вещи!

В самом простом случае тэг — это как деталь детского конструктора, которая имеет своё строгое предназначение: планка — значит планка, колесо — значит колесо и ничто иное. К примеру тэг абзаца:

всегда обозначается буквой p и никак иначе. Это его имя.

Тэги всегда заключены в угловые скобки. Как видно из примера, есть открывающий и закрывающий тэг. У закрывающего тэга перед именем добавлен «слэш» — косая черта, наклоненная вправо /.

Не все тэги имеют закрывающую пару. Например тэг изображения img его не имеет вовсе. Но чтобы соответствовать современным стандартам и требованиям спецификации XHTML, ему все-таки добавляют перед закрывающей угловой скобкой пробел со слэшем. Выглядит это примерно так:

Тэг div

Тэг div — это основа блочной верстки. Это те самые кубики, из которых и строится весь сайт. Этот тэг нейтральный. В отличие от стандартных HTML-тэгов, которые строго привязаны к своему содержимому (p — к абзацам, a — к ссылкам, img — к изображениям), тэг div может вмещать что угодно и сколько угодно всего этого добра. Считайте его эдакой большой коробкой, куда свалены все игрушки.

Тэг div используют для задания функциональных областей на странице. Например, таких как: «шапка» (header), блок навигации, блок основного содержимого, «футер» (footer) или подвал по-нашему.

У тэга div, как и у любого другого, имеются свои собственные атрибуты.

Атрибут — описательная характеристика тэга. То есть, что он может делать и каким образом. Например, возьмём тэг изображения:

В данном случае src, width, height, alt являются атрибутами тэга. В кавычках (и это тоже обязательное требование современных стандартов) даны значения атрибутов.

Расшифровать такую запись несложно. Тэг указывает, что в данном месте страницы нужно прилепить изображение risunok.jpg из папки images. Ширина рисунка 200 пикселей, высота 50 пикселей. И до кучи добавлен альтернативный текст, который поясняет, что изображено на рисунке.

Кстати, альтернативный текст — это не блажь, а тоже необходимое требование. Не все пользователи сети обладают хорошим зрением. Кто-то пользуется программой распознавания и чтения текста. А кто-то просто выключает показ картинок в браузере. Вот для них и существуют альтернативные подписи к рисункам.

Если же их нет смысла подписывать (например маркер списка или стрелка какая-нибудь), то у атрибута alt оставляют пустое место между кавычками.

Атрибуты тэга div

Атрибутов у тега div всего два:

id — атрибут, позволяющий придать тегу уникальное значение, то есть такое, которое на странице используется только один раз. Например, header или footer.

Таким образом мы сможем задать далее в листе стилей для тэга div с атрибутом id и значением header (шапка) одни настройки, а для подвала footer совсем другие. И браузер верно распознает, что вот этот кусок текста относится к «шапке» и будет набран, например, крупным и красным шрифтом, а вот этот к «подвалу» и будет набран мелким и серым шрифтом. И никакой путаницы!

class — атрибут, позволяющий одно и то же значение придать нескольким элементам. Например, всем изображениям на странице добавить рамку одинаковой толщины и цвета. Так как изображений несколько, то атрибут id уже нельзя использовать, поэтому мы применяем class.

На первый раз, думаю, достаточно. Если что-то непонятно по блочной верстке сайтов, спрашивайте в комментариях.

Блочная верстка сайта

Если вы читали статью «Основные этапы создания сайта», то помните, что верстка сайта происходит после этапа создания макета. Иными словами, у вас должны быть готовы картинки всех ключевых страниц сайта.

Будем считать, что они сделаны и посмотрим на примере, как из картинки сделать html-страницу, причем страницу сверстаем с помощью блоков. Именно этим блочная верстка сайта и отличается от табличной, в основе которой лежит таблица.

Итак, мы имеем вот такую картинку (макет подготовлен в программе Photoshop).

Создадим папку, назовем ее, например, restaurant. В нее создадим и положим две страницы: index.html и style.css, а также папку images, куда будем складывать картинки. Все ссылки в примерах будут иметь относительные адреса, исходя из данной структуры.

Теперь посмотрим на наш макет. Для начала выключим весь текст. Конечно, в Photoshop можно нарисовать очень красивое название сайта, но с точки зрения дальнейшей оптимизации страниц сайта для его продвижения, лучше, чтобы название сайта являлось текстом, а не картинкой.

Теперь разделим нашу картинку на блоки. Это можно сделать по-разному, например, так:

Именно такие картинки, с такими названиями мы и сложим в папку images. Обратите внимание, картинка reklama_bg будет фоном, поэтому ее можно сохранить в виде тонкой полоски, так же можно поступить и с картинкой footer. Еще нам понадобится картинка с фоном всей страницы, вот такая:

Илон Маск рекомендует:  Бесплатный движок форума, какой лучший
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL