Отличие блочной верстки от табличной. Html разметка страницы. Позиционируемые плавающие блоки. Не каждое изображение
Достоинства табличной верстки:
1.Удобство и простота работы с ячейками таблицы, используемыми в качестве элементов структуры электронного издания. С помощью таблицы можно достаточно просто создавать несложные структуры. В случае необходимости задания более сложной структуры мы потратим немного больше времени. Но при масштабировании окна браузера колонки сохранят свой исходный вид, а также взаимное расположение. К тому же, независимо от наполнения соседних ячеек, по высоте они останутся одинаковыми.
2.Использование табличной верстки хорошо подходит для создания так называемого «резинового» макета, в котором ширина зависит от ширины окна браузера.
3.В ячейках таблицы мы можем одновременно выравнивать по горизонтали и вертикали.
4.Меньше всего зависит от выбранного пользователем браузера.
Недостатки табличной верстки:
1.Для отображения страницы надо дождаться, пока браузер загрузит всю таблицу.
2.Более громоздкий и менее понятный код при создании таблиц, т.к. сложная иерархическая структура вложенных тегов.
3.Отсутствует разделение оформления и содержимого.
4.Плохая индексация. Раздробленность информации затрудняет правильное индексирование страницы поисковыми системами.
5.Отсутствие полосы прокрутки (при фреймовой верстве можно прокручивать части).
6.Верстка не соответствует стандартам html и css (таблицы должны быть только для табличных данных).
Достоинства блочной верстки:
1.Сильно уменьшен код html-страниц за счет использования элементов div.
2.Есть возможность нестандартного вложения блоков друг в друга – можно размещать элементы как хотим.
3.Блоки отображаются по мере своей загрузки, что ускоряет работу с электронными изданиями.
4.Лучшая индексация поисковыми системами.
5.Есть возможность расположения нескольких слоев друг над другом, что помогает улучшить индексацию.
6.Возможность использования полосы прокрутки отдельных блоков.
7.С точки зрения моды – данная верстка сейчас самая популярнаяJ
Недостатки блочной верстки:
1.При низком разрешении экрана у монитора пользователя блоки могут поменять свое взаимное расположение.
2.В разных браузерах (старых версий) верстка может выглядеть по-разному.
3.Эта верстка самая сложная.
Блочная фиксированная разметка с помощью CSS.
Существует четыре различных метода позиционирования.
Статическое позиционирование
HTML элементы позиционируются статически по умолчанию. Статически позиционированный элемент всегда располагается в соответствии со стандартным потоком элементов на странице.
Статически расположенные элементы не подвергаются воздействию свойств top, bottom, left, и right.
Фиксированное Позиционирование
Элемент с фиксированным положением позиционирован относительно окна браузера.
Он не будет двигаться, даже если окно прокручивается:
Пример:
Замечание: IE7 и IE8 поддерживают значение fixed только если указан тип документа!DOCTYPE.
Фиксированно расположенные элементы удаляются из нормального потока. Документ и другие элементы ведут себя так, будто фиксированно расположенный элемент не существует.
Зафиксированные элементы могут перекрывать другие элементы.
Абсолютное Позиционирование
:
Пример:
position:absolute;
Блочная гибкая разметка с помощью CSS.
CSS свойства позиционирования позволяют вам позиционировать элемент. Также они могут расположить элемент позади другого, и указать, что должно произойти, когда содержимое элемента слишком большое.
Элементы могут располагаться, используя свойства top (сверху), bottom (снизу), left (слева), и right (справа). Однако, эти свойства не будут работать, пока не установлено свойство position.
Относительное позиционирование
Пример:
position:relative;
Пример:
position:relative;
Относительно позиционированные элементы часто используются в качестве контейнеров для абсолютно позиционированных элементов.
Применение абсолютного позиционирования на странице. Правило z-index.
Абсолютное Позиционирование
Абсолютно позиционированный элемент располагается относительно первого родительского элемента, который позиционирован иначе, чем статически. Если такого элемента не найдено, за родительский элемент принимается :
Пример
position:absolute;
Абсолютно позиционированные элементы удаляются из стандартного потока элементов. Документ и другие элементы ведут себя так, будто абсолютно позиционированный элемент не существует.
Абсолютно расположенные элементы могут перекрывать другие элементы.
Свойство z-index указывает вертикальный порядок для элемента.
position:absolute;
Элемент с большим вертикальным порядком всегда отображается впереди элемента с меньшим вертикальным порядком.
Замечание: z-index работает только для позиционированных элементов (position:absolute, position:relative или position:fixed).
Свойство z-index поддерживается всеми основными браузерами.
Замечание: Значение "inherit" не поддерживается в IE7 и более ранних версиях. IE8 требует объявления!DOCTYPE. IE9 поддерживает "inherit".
Значения Свойства:
Auto: устанавливает вертикальный порядок такой же, как у родительского элемента. Используется по умолчанию
Число: устанавливает значение вертикального порядка элемента. Отрицательные значения допустимы
Inherit: указывает, что вертикальный порядок должен наследоваться от родительского элемента
Применение относительного позиционирования. Создание эффектов объема и тени.
Относительное Позиционирование
Относительно позиционированный элемент располагается относительно по отношению к его обычной позиции.
Пример
position:relative;
Примерh2.pos_top
position:relative;
CSS3 Тень Контейнера
В CSS3, свойство box-shadow используется для добавления тени к контейнерам:
Пример
Добавление тени контейнера к элементу div:
box-shadow: 10px 10px 5px #888888;
Webkit-box-shadow: 10px 10px 5px #888888; /* Safari */}
CSS3 Граница-Изображение
Посредством CSS3 свойства border-image вы можете использовать изображение для создания границы:
Свойство border-image позволяет вам указать границу-изображение.
Пример
Использование изображения для создания границы вокруг элемента div:
border-image:url(border.png) 30 30 round;
Moz-border-image:url(border.png) 30 30 round; /* Firefox */
Webkit-border-image:url(border.png) 30 30 round; /* Safari и Chrome */
O-border-image:url(border.png) 30 30 round; /* Opera */}
Новые Свойства:
border-image: Стенографическое свойство для установки всех свойств группы border-image-* 3
border-radius: Стенографическое свойство для установки всех четырех свойств border-*-radius 3
box-shadow: Присоединяет один или более эффектов отбрасывания тени к контейнеру
В этой статье речь будет идти о видах верстки. Сразу хочу отметить что при создании веб страницы совсем не обязательно выбрать один вид верстки и использовать только его. Элементы одного вида можно (иногда даже нужно) использовать в других видах верстки. Главное делать это правильно.
Верстка таблицами
С начала 90 годов используется табличная верстка и до сих пор множество веб - программистов используют ее в своих проектах. Табличная верстка предполагает построение страницы с помощью html тега
view image | |
Index.html | Main.css |
| /*clear browser predefined values*/ Padding: 0; Font-size: 100%; Font-weight: normal; background: #C2C2C2; /*defining margin-left: auto; and margin-right: auto; we place tha body content to the center of the screen*/ margin-left: auto; margin-right: auto; background: #FFF; text-align: center; background: #F2F2F2; border: 1px solid #FD8000; border-left: 5px solid #FD8000; background: #F2F2F2; border: 1px solid #FD8000; margin: 1px; margin-left: 205px; #bottom-lsidebar margin-right: 2px; background: #FD8000; |
Абсолютное позиционирование
Абсолютное позиционирование , как я уже говорил, используется не так часто, как плавающие слои, однако тоже заслуживает внимания. Иногда бывает так, что прием плавающих слоев оказывается неприемлимым по каким то причинам, и поэтому все что нам остается в такой ситуации – это абсолютное позиционирование. Однако чаще всего абсолютное позиционирование используется для месного позиционирования – указания размещения одного элемента относительно положения другого. Так или иначе знать о данном приеме нужно обязательно.
В основе данного приема лежит использование свойства position , которое может принимать следующие значения: position: absolute, relative, fixed, static . Значение absolute – задает позицию элемента в координатах экрана, или родительского элемента, как будет показано ниже. relative – определяет позицию относительно места по умолчанию. При указании смещения с использованием данного значения, на странице остается «дырка», поэтому как правило, использовать его таким образом не стоит, как можно – чуть попозже. fixed – Указывает позицию на экране, вне зависимости от скрола, то есть сколько бы вы не прокручивали скрол бар – элемент все равно останется на своей позиции. Значение static - нормальное позиционирование, если для элеметна не указан тип позиционирования, данное значение применяется по умлочанию.
После того как задано свойство position для элемента, имеет смысл указать свойства определяющие координаты элемента: top, bottom, left и right . Так, указав для какого либо элемента position: absolute , можно задать его положение с помощью вышеперечисленных свойств относительно той или иной границы окна браузера. Однако, если мы говорим об каком либо элементе который, скажем, находится внутри слоя, то абсолютное позиционирование такого элемента осуществляется относительно границ этого самого слоя.
Что бы пояснить сказанное, рассмотрим простой пример. Допустим у нас имеется заголовок а внутри заголовка задана картинка. Тогда ее положение относительно этого самого заголовка можно задать так:
h1 { position: relative; }
position: absolute;
То есть используя для заголовка свойство position: relative;
, мы как бы говорим осуществлять позиционирование «относительно меня», ну а свойство position: absolute;
осуществляет позиционирование относительно границ родительского элемента. Как и для предыдущего приема, я предоставлю пример, что бы было понятно, что и как следует использовать.
view image | |
Index.html | Main.css |
| html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { padding: 0; Font-size: 100%; Font-weight: normal; background: #c2c2c2 ; margin-left: auto; margin-right: auto; background: #FFF ; /*common panels of the sites*/ background: #F2F2F2; border: 1px solid #FD8000; border-top: 20px solid #FD8000; margin-top: -20px; font-weight: bold; text-transform: capitalize; position: relative; position: absolute; left: 205px; position: absolute; position: absolute; position: absolute; |
И что дальше?
Вот собственно наверное и все по разметке. Дальнейшие нюансы использования CSS для данной задачи уже будут специфичны для вашего проекта, браузера и требований. Разумеется о многом я не рассказал и сейчас. Не предостерег вас по поводу специфики разметки страницы для IE 6.0 (о, да, по этому впрору отделную книгу писать). Там много чего, даже из того, о чем я говорил, не будет работать или будет работать не так как хотелось бы вам. А для того что бы заработало, нужно пользоваться магическими заклинаниями вроде * html или zoom: 1; Ничего не рассказал о том, как боротся с возникающими проблемами при разметке, когда панели ползут непонятно куда и зачем (а это поверте, случится, и причем не раз, и не только с вамиJ). Не рассказал про свойство z-index , это очень важно, особенно в случае с абсолютным позиционированим, когда содержимое одного элемента перекрывает содержимое другого. Не рассказал про такое чудесное свойство overflow , которое помогает бороться с содержимым панелей, которому не сидится внутри и так и хочется выпрыгнуть за пределы своего слоя. И еще много-много-много чего, о чем я промолчал. Не потому что я глупый, просто немного ленивыйJ
Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.
Наблюдая за сайтами в галерее HTML5 сайтов и отвечая на вопросы пользователей, я видел множество сайтов с HTML5 разметкой. В этой статье я покажу некоторые ошибки и плохие практики разметки, которые я часто встречал, и объясню, как избежать их.
Не используйте тег в качестве обёртки для оформления
Одна из наиболее общих проблем, замеченных мною, - банальная замена"ов на структурные элементы HTML5, особенно на "ы. Т.е. когда то, что в XHTML или HTML4 выглядит так:
My super duper page
Переписывают так:
Это просто неправильно: не обёртка. Этот элемент означает семантический блок Вашего контента, использующийся для построения «структуры документа» (document outline), и должен содержать заголовок. Если Вам нужен элемент для обёртки, попробуйте обойтись (Kroc Camen может предложить кое-что). Если это не решает проблему необходимости дополнительных обёрток, используйте старые добрые
"ы. С приходом HTML5
"ы не умерли, и именно они отлично подходят в этом случае.
Принимая во внимание все вышесказанное, было бы хорошо разметить пример выше с использованием HTML5 так:
My super duper page
Если Вы не уверены, какой элемент использовать, то я советую Вам воспользоваться нашей блок-схемой выбора элемента (прим. переводчика: см. в самом низу записи ).
Используйте и только при необходимости
Нет смысла писать код, если в этом нет необходимости, правда? Увы, но я часто наблюдаю, как и там, где они не нужны. Вы можете почитать об элементах и подробнее, я же коротко обозначу ключевые моменты:- Элемент представляет группу вводных или навигационных средств и обычно содержит заголовок секции
- Элемент группирует набор элементов
-
, представляя заголовок секции в случае, если он состоит из нескольких уровней (подзаголовки, альтернативные заголовки и т.д.)
Избыток элементов
Я уверен, Вы прекрасно знаете, что элемент можно использовать несколько раз в документе. Поэтому часто встречается такое:My best blog post
Если Ваш содержит только один заголовочный элемент, то он не нужен. В данном случае элемент уже гарантирует, что заголовок будет включен в «структуру документа» (document outline), и раз не содержит нескольких элементов (согласно определению), его можно безопасно удалить. Достаточно просто этого:
My best blog post
Неправильное использование
И снова о заголовках: я часто вижу некорректное использование элемента. Не следует использовать вместе с, если:- Присутствует только один заголовок
- хорош сам по себе (т.е., без).
My best blog post
В этом случае просто уберите hgroup.
My best blog post
Второй случай - это еще один пример использования элемента без необходимости.
My company
Established 1893
Если единственный ребёнок "а это, зачем нужен? Если у Вас нет дополнительных элементов в "е (т.е. сестринских по отношению к), просто уберите.
My company
Established 1893
Не обрамляйте все ссылки в
В HTML5 было введено 30 новых элементов, чтобы дать нам возможность создавать структурированную и осмысленную разметку. Но не следует злоупотреблять новыми семантическими элементами. К сожалению, это как раз то, что происходит с. Спецификация описывает так:Элемент nav представляет секцию страницы, связывающую её с другими страницами или частями текущей (секцию с навигационными ссылками).WHATWG HTML specПримечание: Не все группы ссылок следует помещать в элемент nav. Его следует использовать для основной навигации . Часто в футерах размещают небольшой список ссылок на различные страницы сайта (Главная, Помощь, соглашение об использовании, etc ). В этом случае одного footer"а должно быть достаточно. Хотя ничто не мешает использовать nav, в этом нет необходимости.
Ключевая фраза - «основная навигация». Можно долго спорить о том, что понимать под основной, но для меня это:
- Первичная навигация
- Поиск по сайту
- Вторичная навигация (спорно)
- Внутристраничная навигация (внутри длинной статьи, например)
- Переключатели страниц
- Социальные ссылки (хотя возможны исключения в случаях, когда социальные ссылки являются основной навигацией. Например, сайты вроде about.me или flavours.me)
- Теги поста
- Категории поста
- Третичная навигация
- Объемные футеры
- “Не используйте, если Вы считаете, что с заголовком x > тоже подойдёт” - Hixie в IRC
- Возможно стоит добавить «Перейти к» для удобства?
Общие ошибки в использовании элемента
Ах, . Разобраться с правильным использованием этого элемента, как и его собрата, непросто. Давайте взглянем на некоторые общие ошибки, касающиеся этого элемента.Не каждое изображение
Ранее, я советовал не писать больше кода, чем необходимо. Здесь похожая ситуация. Я встречал сайты, где каждая картинка была обрамлена в. Не нужно использовать больше разметки только для того, чтобы использовать больше разметки. Вы просто создаете себе больше работы, но никак не улучшаете описание своего контента.Спецификация описывает как «автономный контент, возможно, с заголовком и обычно являющийся самостоятельным элементом потока». Вот она, вся красота - элемент можно спокойно переместить из основного содержимого, например, в сайдбар.
Вышеупомянутая блок-схема выбора элемента поможет Вам справиться с.
Если изображение несет только презентационную нагрузку, и на него нигде в документе не ссылаются, это определенно не. Иначе, задайте себе вопрос: «Необходимо ли это изображение в текущем контексте для понимания?». Если нет, это, видимо, не (возможно,). Если да, спросите себя, «Могу ли я переместить это в приложение?». Если ответ на оба вопроса Да, то, возможно, подойдёт.
Ваш логотип - не
Тоже самое касается и логотипа. Часто я вижу такое применение:My company name
Тут нечего добавить. Это просто неверно. Можно долго спорить о том, должен ли логотип быть в, но мы сейчас не об этом. Настоящая ошибка - злоупотребление элементом. следует использовать только когда Вы ссылаетесь на него в документе. Вряд ли Вы где-нибудь будете ссылаться на свой логотип. Достаточно этого:My company name
может быть не только изображением
Другой частый случай недопонимания элемента заключается в предположении, что его можно применять только для картинок. Но это не так. В может быть заключено видео, аудио, графики (в SVG, например), цитата, таблица, блок кода, стихотворение или любая комбинация перечисленного. Не ограничивайте себя в использовании одними картинками. Наша задача как приверженцев веб-стандартов - описать контент нашей разметки.
Не так давно я писал об элементе подробнее. Советую почитать, если Вы хотите разобраться получше или освежить воспоминания.
Не используйте ненужный атрибут type
Это, возможно, наиболее общая проблема, встречаемая в HTML5 галерее. Хотя это и не ошибка, я считаю, что лучше избегать этого.В HTML5 нет необходимости указывать атрибут type для элементов
Вместо этого Вы можете просто написать:
Помимо прочего, Вы также можете сократить количество кода, расходующегося на указание кодировки. Глава Марка Пилгрима о семантике в книге Dive into HTML5 описывает все такие практики.
Некорректное использование атрибутов форм
Вы, должно быть, уже в курсе, что в HTML5 введено множество новых атрибутов форм. Мы рассмотрим их в ближайшее время, сейчас же я коротко расскажу, как делать не стоит.Логические атрибуты
Существуют логические атрибуты также и для мультимедиа элементов и некоторых других. Описываемые мною правила применимы и для них.Некоторые из новых атрибутов форм являются логическими, т.е. их наличие в разметке определяет поведение элементов. В том числе это:
- autofocus
- autocomplete
- required
Я редко встречаю их, но в случае с required я видел такое:
В конечном счете, это ничем плохим не грозит. Клиентский HTML парсер встретит атрибут required в разметке и применит соответствующие правила. Но что если сделать по-другому и написать required=«false»?
Парсер по-прежнему увидит атрибут required и применит соответствующее поведение, несмотря на то, что Вы указали ему не делать этого. Очевидно, это не то, чего Вы хотели.
Логическое значение возможно применить тремя способами: (Второе и третье характерны для XHTML)
- required
- required=""
- required=«required=»
Применительно к нашему примеру выше, мы могли бы написать так (в HTML):
Теги: Добавить метки
Для начала давайте определимся, что такое разметка? Как следует из самого термина, разметка - это расстановка меток, в нашем случае в коде хтмл документа, т.е. веб-страницы. В качестве меток здесь выступают теги , что позволяют определить границы действия разметки или создать элемент хтмл документа. Всё ещё непонятно? Тогда читайте дальше, и всё станет на свои места.
Основы разметки хтмал или что такое тег
Тег представляет собой конструкцию, начинающуюся знаком меньше () . Большинство тегов состоят из открывающегося и закрывающегося тегов. Отличие между ними состоит в том, что в открывающемся теге вы можете (если нужно) указать ряд дополнительных его свойств, используя так называемые атрибуты , а в начале названия закрывающегося тега указывается символ сэлш (/) , например:
Текст параграфа, выровненный по правому краю.
.В данном случае блочный тег p создаёт параграф, а атрибут align выравнивание содержимого параграфа по правому (right) краю.
Следует отметить, что в хтмл, теги бывают двух видов: блочными и строковыми. Блочные теги создают блочный элемент, зачастую имеющий отступы и ниже следующие элементы идут уже «с новой строки ». Строчные теги предназначены для разметки фрагмента кода и не создают переноса строки.
Как говорится: в любом правиле есть исключения - это же верно и для тегов. Существуют теги, которые не имеют закрывающего тега и предназначены они для создания меток и элементов хтмл документа, например:
В данном случае строковый тег img вставляет на веб-страницу элемент в виде картинки, адрес которой прописывается в атрибуте src . Значением атрибута alt является альтернативный текст, который выводится в том случае, если картинка не доступна, а атрибут border задает толщину рамки вокруг картинки.
Чтобы Вам было легче запомнить всё выше изложенное, приведу небольшую и наглядную шпаргалку, которую Вы можете использовать для изучения HTML:
Краткий справочник по хтмл тегам
И так, мы уже познакомились с двумя тегами, так что их я опущу. Ниже я приведу ещё ряд тегом разметки хтмл документа и некоторые их атрибуты. Для начала этого будет более чем достаточно, но если вас интересует полный перечень хтмл тегов и их атрибутов, рекомендую заглянуть на сайт htmlbook.ru, а также добавить его в закладки как наиболее полный и удобный справочник по ХТМЛ и ЦСС. Продолжим?
Как сделать ссылку? Для этого вам нужно использовать строковый тег A , который размечает содержащийся в нём текст как ссылку - активный элемент веб-страницы при клике на который пользователь может перейти на другую веб-страницу, адрес которой указан в атрибуте href .
Как выделить текст жирным? Для этого вам нужно использовать строковый тег B , который устанавливает для содержащегося в нём текста жирное начертание шрифта.
Как сделать текст курсивом? Для этого вам нужно использовать строковый тег I , который устанавливает для содержащегося в нём текста курсивное начертание шрифта.
Как подчеркнуть текст? Для этого вам нужно использовать строковой тег U , который добавляет подчеркивание для содержащегося в нём текста.
Как зачеркнуть текст? Для этого вам нужно использовать строковой тег S , который отображает текст как перечеркнутый.
Как выделить код в тексте? Для этого вам нужно использовать строковой тег CODE , который обычно отображается браузером моноширинным шрифтом, например Courier New .
Как оформить код в тексте? Для этого вам нужно использовать блочный тег PRE , который определяет блок программного кода, обычно отображается браузером моноширинным шрифтом. В отличие от строкового тега CODE , тег PRE сохраняет пробелы и переносы строк.
Как сделать текст больше? Для этого вам нужно использовать строковой тег BIG , который увеличивает размер шрифта на единицу по сравнению с обычным текстом.
Как сделать текст меньше? Для этого вам нужно использовать строковой тег SMALL , который уменьшает размер шрифта на единицу по сравнению с обычным текстом.
Как задать шрифт, цвет и размер шрифта в тексте? Для этого вам нужно использовать строковой тег FONT . Атрибут face здесь задаёт гарнитуру (название) шрифта, color - цвет шрифта, а size - его размер в условных единицах (от -7 до 7) .
Как сделать заголовок? Для этого вам нужно использовать блочные H теги, которые задают заголовки разного уровня, от 1 (самого большого) до 6 (самого маленького) , что позволяет задать структуру опубликованной на веб-странице информации. Заголовки отличаются друг от друга размером шрифта и отступы, а также выделены жирным начертанием.
Как сделать подстрочный шрифт? Для этого вам нужно использовать строковой тег SUB , который отображает шрифт в виде нижнего индекса, т.е. текст будет располагаться ниже базовой линии остальных символов строки и уменьшенного размера.
Как сделать надстрочный шрифт? Для этого вам нужно использовать строковой тег SUP , который отображает шрифт в виде верхнего индекса, т.е. текст будет располагаться выше базовой линии остальных символов строки и уменьшенного размера.
Как вставить цитату в текст? Для этого вам нужно использовать строчный тег Q , который используется для выделения в тексте цитат, которые автоматически отображаются браузером в кавычках.
Как оформить цитату в тексте? Для этого вам нужно использовать блочный тег BLOCKQUOTE , который предназначен для выделения длинных цитат в хтмл документе. Обычно такой текст отображается с отступами в 40 пикселей слева и справа, а также отбивкой сверху и снизу.
Как сделать перенос строки в тексте? Для этого вам нужно использовать блочный тег BR , который устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца p , использование тега br не добавляет пустой отступ перед строкой.
Как сделать слой в хтмл? Для этого вам нужно использовать блочный тег DIV , который создаёт слой без отступов.
Как сделать разделитель в тексте? Для этого вам нужно использовать блочный тег HR , который рисует разделительную горизонтальную линию. Атрибут color задаёт цвет линии, size - размер, а noshade - отключает трехмерный эффект.
Как сделать список? В хтмл существует два основных вида списков: нумерованный (OL) и маркированный (UL) . В данном случае приведен хтмл код маркированного списка, заданного блочным тегом UL . По умолчанию, в качестве маркера окружность (закрашенный кружочек) , которая отображается в начале первой строки элемента списка, заданного тегом LI .
Безусловно, в своей статье я привел лишь основные хтмл теги, которые могут понадобиться вам при разметке веб-страницы. В большинстве случаев, для ХТМЛ разметки, это более чем достаточно. Единственное, что я опустил, но, что, безусловно, важно при разметке веб-страниц, это работа с таблицами. Их нужно изучать отдельно, т.к. там слишком много нюансов, а статья получилось и без того достаточно большой. На этом у меня всё. Спасибо за внимание. Удачи!
HTML (HyperText Markup Language) не является языком программирования, он является языком форматирования, т.е. придания внешнего вида web -странице, при ее присмотре в браузере. Для разметки документа используются теги . Теги заключаются в угловые скобки, и, за редким исключением, являются парными, т.е. существует открывающий и закрывающий тег. Например, чтобы отметить начало нового абзаца в документе ставится тег
(от paragraph ). Тогда в конце абзаца обязательно должен ставиться закрывающий тег .
При расстановке тегов соблюдается правило: закрываются теги в порядке обратном их появлению. Например, если слово в тексте должно быть выделено жирностью (тег от bold ) и одновременно курсивом (тег от italic ), то это может быть сделано одним из следующих способов: слово , или слово .
Ниже приводится текст некоторого html -документа и результат его отображения в браузере:
Доброе время суток, уважаемый посетитель! h1>
Надеюсь, вы попали как раз туда, куда хотели.
Здесь вы найдете стихи , песни и сценарии для организации любых праздников.
Он к "пятерочкам"
привык -
Русский пять и пение.
Мне всегда его дневник
Портит настроение.
Рис. 74. Отображение приведенной в примере html -страницы в окне браузера. |
В приведенном примере использованы следующие теги:
… - указывает на то, что заключенный между этими тегами текст должен восприниматься как html .
… - тело html -документа. Параметр bgcolor (background color) задает цвет фона, text – цвет текста. Цвета задаются в шестнадцатеричной системе счисления по модели RGB . Например, #ffffff означает, R =#ff , G =#ff , B =#ff , т.е. по максимуму каждого из трех цветов. Мы знаем, что смешение трех основных цветов в системе RGB в равных долях с максимальной интенсивностью дает чистый белый цвет.
… - заголовок первого уровня, задает определенное для данного стиля форматирование: размер шрифта, отступы до и после заголовка, выравнивание и т.п.
… - абзац текста.
- непарный тег img (от image ), управляющий вставкой в гипертекстовый документ графических иллюстраций. В данном случае, вставляется графический файл с именем pic 1.gif , находящийся в том же каталоге, что и данный html -документ. Если вы обратите внимание на URL -документа, отображенный на рисунке в строке “адрес”, то сможете определить, что данный документ был сохранен под именем “index .html ” в папке “Мои документы ” на диске C . Параметр align управляет выравниванием иллюстрации относительно текста html -страницы. В данном случае значение параметра = “left ” , задает выравнивание по левому краю и разрешает обтекание текстом.
… - тег вставки гиперссылки. При активации данной ссылки в окне браузера загрузится уже другой документ, который в данном случае также должен быть сохранен в той же папке и должен именоваться verse .html .
… - выделение цветом. В данном случае цвет будет красным (R =#ff , G =#00, B =#00).
… - выделение жирностью.
- непарный тег –
принудительный разрыв строки (break)
внутри текущего абзаца.
Существуют свои теги и для форматирования таблиц, и для организации списков. Освоить язык гипертекстовой разметки достаточно просто, и достаточно просто, при желании, создать и опубликовать в сети Интернет собственный web -сайт.
Последние Статьи
Приветствую дорогие читатели, в этом выпуске речь пойдет о разновидностях верстки. Все вы, наверное, слышали о блочной верстке и табличной
, сегодня я бы хотел поговорить об этих двух разных подходах к верстке сайта. В предыдущей статье я описывал, как защитить электронный , немного раньше мы рассматривали конкретный пример магазина на современном компоненте virtuemart для бесплатной CMS joomla.
Эта статья будет полезна начинающим вебразработчикам, которые только становятся на тернистый путь "сайтостроителей" и хотят самостоятельно делать сайты
. Вебразработчики со стажем тоже смогут что-то почерпнуть для себя, в частности в статье сравниваются достоинства и недостатки табличной и блочной верстки
.
Пожалуй, нужно начать с того, что такое верстка сайта? Верстальщик получает от дизайнера макет будущего сайта, как правило, макеты предоставляются в формате photoshop. Макет это по сути рисунок, только более детализированный, в нем отдельные элементы (меню, шапка сайты...) разнесены по слоям, это получается естественным путем когда дизайнер рисует макет, кроме того это очень удобно, можно легко скопировать рисунок с нужно слоя, посмотреть параметры шрифта и т.д. Так вот суть верстки в трансформации макета в html документ и составления набора CSS правил.
Следует отметить, что верстка это процесс творческий, не такой конечно как отрисовка макета в фотошоп но, тем не менее, доля творчества в этом есть особенно на начальном этапе, далее с ростом опыта процесс верстки можно механизировать. Качество верстки оценивается по тому, насколько сверстанный сайт отличается от макета.
Виды верстки
Как заявлено в названии верстка бывает блочная или табличная . В блочной верстке элементы сайта структурируются с помощью блоков (div ), в табличной верстке обходятся таблицами (table ).Табличная верстка
Табличная верстка использовалась на заре сайтостроения, она была популярна среди начинающих вебразработчиков. Следует заметить, что многие вебмастера и сейчас достаточно эффективно обходятся версткой таблицами, как говориться - дело мастера боится. Лично я предпочитаю блочную верстку табличной верстке, но мы сейчас не о вкусах. В основу идеи положено представление сайта в виде таблицы. Как известно подавляющее большинство сайтов имеют типовую структуру, которую можно детализировать под конкретную задачу. Рассмотрим для примера типовой вариант сайта
который содержит шапку, область контента, правый сайдбар и футер, такова не хитрая структура моего блога. Реализуем данную структуру таблицей
шапка | |
контент | сайдбар |
футер |
таблице следует задавать конкретную фиксированную ширину, если макет имеет фиксированную ширину или 100%, если макет резиновый, в этом случае таблица будет растягиваться по ширине экрана в зависимости от разрешения монитора.
Достоинства и недостатки табличной верстки:
- Проста в понимании, не требует более глубоких знаний HTML и CSS (+ )
- Интуитивно понятна при построении, минимум CSS правил (+ )
- Трудно разбираться в HTML коде при более сложной структуре сайта (- )
- Пока вся таблица не загрузиться она не будет показана на экране (- )
- Сложный дизайн с перекрытием элементов не реализуем (- )
- Много лишнего кода (- )
Остановимся поподробнее на 4-ом пункте. Дело в том, что HTML таблицы устроены таким образом, что браузер не может знать заранее как рисовать таблицу с ее содержимым, пока оно незагружено, до тех пор, пока последний рисунок, находящийся в таблице не будет загружен, таблица не будет показана на экране браузера, что может стать причиной ухода пользователей с сайта не дождавшись отображения страницы, поскольку посетитель не видит ничего на экране некоторое время. Создается впечатление будто сайт тормозит, на самом деле браузер ждет пока все элементы таблицы будут загружены.
блочная верстка
Блочная верстка базируется на том, что блочные элементы HTML, как правило, располагаются по вертикали, сверху вниз друг за другом в том порядке, в котором они встречаются в HTML коде. Кроме этого блокам можно задавать свойство плавучести (float:left | right | none | inherit ). Если блоку указать свойство float:left , то он будет выровнен по левому краю, а все остальные блоки будут игнорировать его, как будто этого блока нет, за исключение текста, остальные блоки, которым задано это же свойство будут обтекать его справа, на сколько это позволяет ширина экрана или элемента внутри которого они находятся. Следует заметить, что любой элемент можно сделать блочным, заданием ему свойства display:block , изначально только элементы div по умолчанию считаются блочными элементами, для не блочных элементов (span, p ) свойство float игнорируется и такие элементы располагаются как обычно последовательно сверху вниз. Чтобы свойство float не игнорировалось необходимо задать элементы свойство display:block .float:right выровнит блок по правому краю, а все остальные блоки будут игнорировать его, либо обтекать, если им задано это же свойство и если в коде идут подряд два или несколько блоков с указанным свойством, то первым вправо встанет тот блок, который идет первым в коде, остальные обтекают его слева.
Свойство float:none отменяет эффект плавучести для блока, но это не значит что блок будет располагаться как обычно сверху вниз, если выше расположен блок с эффектом плавучести, то нижний блок будет игнорировать верхний и встанет под него, чтобы этого не было нужно задать этому блоку свойство clear:both . Ух, сложно да? Это только, кажется, на первый взгляд, на самом деле все логично и просто, надо только потренироваться.
float:inherit - задает свойство плавучести, такое же, как у родительского блока (блока в который вложен данный дочерний блок).
Нужны конкретные примеры, чувствую не убедительно, получается. Давайте создадим простой пример, для начала основу, красный блок с шириной 400 пикс. высотой 350 пикс. и выровним его посередине экрана.
теперь нужно добавить в этот блок еще пару блоков, зеленый и серый с высотой и шириной 100 пикс, у серого блока высота 120 пикс.
Видно, что блоки располагаются в общем потоке снизу вверх, в том порядке, в котором они встречаются в коде, сначала зеленый затем серый в конце голубой. Давайте зеленому блоку зададим свойство float:left , чтобы серый и голубой блоки игнорировали его.
как видно серый блок проигнорировал зеленый блок и встал под него, зеленый блок, как бы сам по себе, голубой блок выстроился за серым. Зададим обтекание всем блокам.
Видно, что блоки выстроились один за другим в том порядке, в котором они идут в коде. Давайте попробуем расположить два блока друг за другом, а третий как обычно ниже. Для этого нужно убрать у третьего блока свойство float:left , но этого недостаточно, так как он залезет под первые два блока, в чем мы убедились раньше. Чтобы этого не произошло нужно задать третьему блоку свойство clear:both ;
Вот такая структура получилась, при задании ширины блокам учитывался тот факт, что рамка 1 пикс. увеличивает размеры блока, поэтому размер хедера задан 398 пикс. а не 400 пикс.
Достоинства и недостатки блочной верстки:
- Меньший вес страницы за счет меньшего кода (+ )
- Реализация сложного дизайна с перекрывающимися блоками (+ )
- Трудно освоить, табличная верстка проще (- )
- Чаще приходится решать вопросы кроссбраузерности. блоки могут перекрываться при изменении разрешения экрана, масштабировании (- )
Лично я начинал с табличной верстки сейчас пользуюсь блочной, освоил ее достаточно давно, это было легко, хотя она и имеет ряд недостатков мне привычнее и проще пользоваться именно блочной версткой.
На этом все дорогие читатели, заходите по-чаще.
- Привет всем! Раньше я уже писал статью о том, как подключить ide жесткий диск к материнской...
- Что значит архивировать в инстаграме Как заархивировать публикацию в инстаграме