Структура html-документа
Содержание:
- Суть блочной вёрстки
- CSS-фреймворки
- Элемент
- На практике
- Добавление и стилизация изображения профиля
- Резюме
- Первый день новой жизни
- Принципы блочной вёрстки
- Главный заголовок
- Обзор семантики
- Динамические страницы и что для них нужно
- Здесь текст заголовка html
- Здесь текст заголовка первого уровня html
- Новые элементы макета в HTML5
- Способы создания
- желательно использовать не чаще, чем раз в 3-4 абзаца текста(или раз в 9-12 предложений). За более частое использование поисковики также могут занизить позиции сайта.
- Добавление заголовка и подзаголовка на страницу сайта
- Какой из способов выбрать?
- The декларация
Суть блочной вёрстки
В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.
Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.
Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или как минимум в контейнере <style> секции <head>.
CSS-фреймворки
Если вы немного ленивы
Если у вас нет времени возиться с кодом при CSS верстке, можно использовать один из CSS-фреймворков. В нашем примере мы используем Bootstrap. Для этого нужно скачать его и подключить в HTML-файле.
Bootstrap содержит сетку, которая состоит из 12 равных по размеру столбцов. HTML-элементы упорядочиваются так, чтобы охватывать различное количество столбцов. Таким образом, создаются пользовательские макеты. Каждая часть контента выравнивается относительно этой сетки через указанное количество столбцов, на которые они растягиваются.
Вот пример:
<div class="row">
<div class="col-md-6">
<!--some content-->
</div>
<div class="col-md-6">
<!--some more content-->
</div>
</div>
В этом примере мы создали строку. После этого поместили в нее два равных по размеру столбца. Каждый из них охватывает шесть из двенадцати доступных столбцов.
Далее мы создаем раздел «Скоро в прокате«. Он будет содержать четыре постера фильмов. Путем несложных математических вычислений определяем, что каждый из них будет охватывать по три столбца.
HTML-код:
<div id="coming-soon">
<h2>Coming Soon:</h2>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="images/soon_01.jpg">
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/soon_02.jpg">
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/soon_03.jpg">
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/soon_04.jpg">
</div>
</div>
</div>
</div>
Я также добавил класс thumbnail, чтобы сделать постеры красивее. Он также содержится в Bootstrap.
И вот, что я получил:
PSDCSS
Элемент
С помощью элемента <meta> можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора html-документа и прочие свойства метаданных. Элемент <head> может содержать несколько элементов <meta>, потому что в зависимости от используемых атрибутов они несут различную информацию.
Кодировка HTML-страницы
Кодировку HTML-страницы нужно указывать для того, чтобы веб-браузер мог правильно отображать текст на странице. Если явно не указать кодировку, тогда браузер при отображении страницы будет определять ее автоматически. Если кодировка при этом будет определена не верно, то вместо текста будут отображаться иероглифы.
Самая распространённая современная кодировка — utf-8.
Указать браузеру пользователя какая кодировка используется на данной странице:
Метаэлементы и поисковые системы
Некоторые поисковые системы во время индексации страницы обращаются к метаэлементам.
Например метаэлементы ниже определяют описание для HTML-документа и ключевые слова (данная информация может использоваться поисковыми системами при отображении документа в поисковой выдаче):
Описание содержимого страницы и ключевые слова:
Для элемента <meta> доступны атрибуты charset, content, http-equiv, name, а также глобальные атрибуты.
Атрибут
Значение / описание
charset
Указывает кодировку символов для текущего HTML-документа:
content
Определяет возвращаемое значение для свойства. Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом или .
http-equiv
Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: — указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей. — указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка «url=адрес_страницы».
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:
name
Обеспечивает дополнительное описание тега. Если этот атрибут опущен, он считается эквивалентным атрибуту . Не должен использоваться в случае, если для элемента уже заданы атрибуты , или . — указывает название веб-приложения, используемого на странице. — используется для указания имени автора веб-страницы:
— является описанием страницы, оно чаще всего используется поисковыми системами для определения, чему та посвящена, например:
— указывает один из пакетов программного обеспечения, используемого для создания документа, например:
— содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:
— предотвращает кэширование страницы браузером, например:
— может быть использован для указания того, когда у страницы должен истечь срок актуальности (и она
должна быть удалена из кэша), например:
— показывает, должны ли поисковые системы включать данную страницу в результаты поиска. Например, значение устанавливает, что поисковые системы могут включать данную страницу в результаты поиска, но не должны показывать страницы, на которые ведут ссылки с нее:
— позволяет разработчикам управлять размером исходной области просмотра на различных устройствах:
width=device-width — указывает браузеру задать ширину области просмотра равную ширине экрана устройства какой бы она ни была;initial-scale=1.0 — устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.
На практике
Пришло время превратить одностраничный сайт Styles Conference в полномасштабный сайт с несколькими страницами, все они будут связаны вместе с помощью гиперссылок.
-
Мы начнём с превращения текста «Styles Conference» внутри <h1> в нашем элементе <header> в ссылку на страницу index.html. Поскольку мы уже на странице index.html это может показаться немного странным, что справедливо, но так как заголовок повторяется на других страницах, обратная ссылка на главную страницу будет иметь смысл.
-
Чтобы перемещаться по всем другим страницам мы собираемся добавить меню навигации с помощью элемента <nav> внутрь элемента <header>. Мы создадим страницы Спикеры, Расписание, Место проведения и Регистрация; чтобы переходить с нашей главной страницы, соответственно, должны сделать ссылки для всех них.
-
Давайте также для удобства добавим это же навигационное меню из элемента <header> в элемент <footer>.
-
Внутри элемента <section>, который описывает нашу конференцию, чуть ниже заголовка мы должны также включить ссылку для регистрации на конференцию. Размещение ссылки ниже абзаца будет работать отлично.
-
Мы не должны забыть добавить ссылки на другие страницы во все разделы с тизерами. Внутри каждого раздела, давайте обернём оба элемента <h3> и <h5> ссылкой, ведущей на соответствующую страницу.
Мы должны убедиться, что делаем это для каждого раздела соответственно.
-
Теперь нам нужно создать несколько новых страниц. Давайте сделаем файлы speakers.html, schedule.html, venue.html и register.html. Эти файлы должны располагаться в той же папке, что и файл index.html и поскольку мы держим их в той же папке, все наши ссылки должны работать, как и ожидалось.
Чтобы гарантировать, что все наши страницы выглядят одинаково, убедитесь, что все эти новые файлы содержат такую же структуру документа что и файл index.html.
Официально мы больше не работаем с одной страницы, а работаем в действительности с полноценным сайтом.
Рис. 2.03. Наша страница после всех добавленных разных ссылок и навигации
Демонстрация и исходный код
Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.
Просмотр сайта Styles Conference или Скачать исходный код
Добавление и стилизация изображения профиля
Теперь давайте добавим в раздел заголовка аватарку – небольшое изображение профиля. Выберите фото профиля, которое вы хотите разместить на своем сайте. Если у вас нет фотографии, вы можете использовать любое изображение (например, наш логотип) или создать аватар на Getavataaars.com.
После того как вы выбрали изображение, сохраните его в папке images как small-profile.jpeg.
Теперь добавьте изображение профиля на веб-страницу с помощью тега <img> и атрибута src, который задает путь к файлу изображения вашего профиля. Добавьте следующий выделенный фрагмент кода в файл index.html между комментарием <!– Header content –> и строкой <h1>My First Site<h1>:
Сохраните файл и загрузите его в браузере. Теперь ваша веб-страница должна содержать заголовок, подзаголовок, картинку профиля:
Обратите внимание, сейчас аватарка не стилизована, она имеет свои стандартные параметры, но это легко изменить. Чтобы придать изображению другую форму, определить его размер и границу, добавьте следующий набор правил в свой файл styles.css:. Прежде чем двигаться дальше, давайте подробно рассмотрим каждую добавленную строку кода:
Прежде чем двигаться дальше, давайте подробно рассмотрим каждую добавленную строку кода:
- /*Top header profile image*/ – CSS-комментарий для маркировки кода.
- .profile-small ссылается на имя класса, который мы определяем с помощью набора правил. Этот класс будет применен к изображению профиля на следующем шаге.
- Объявление height:150px; устанавливает высоту изображения в 150 пикселей и автоматически регулирует ширину, чтобы сохранить пропорции изображения.
- border-radius: 50%; закругляет края изображения.
- border: 10px solid #FEDE00; добавляет изображению сплошную границу шириной 10 пикселей и устанавливает заданный цвет (здесь его выражает цветовой код HTML #FEDE00).
Сохраните файл и вернитесь к файлу index.html, чтобы добавить класс profile-small в тег <img>:
Сохраните файл и перезагрузите его в своем браузере. Изображение вашего профиля изменится: теперь оно будет иметь высоту 150 пикселей и желтую рамку со скругленными углами:
Резюме
Семантика, как указано в этом уроке, играет важную роль для обеспечения HTML структурой и смыслом. Двигаясь вперед, мы периодически будем вводить новые элементы, каждый из которых содержит собственное смысловое значение. Смысл всех этих элементов в том, чтобы придать большее значение нашему содержимому.
Ещё раз, в этом уроке мы рассмотрели следующее:
- Что такое семантика и почему она важна.
- Элементы <div> и <span> и разница между блочными и строчными элементами.
- Какие текстовые элементы лучше представляют содержимое страницы.
- Структурные элементы HTML5 и как определить структуру и организацию нашего содержимого и страницы.
- Как использовать гиперссылки для навигации между страницами или сайтами.
Надеюсь, вы начинаете чувствовать себя довольно уверенно с HTML. Осталось немного, что нам ещё следует изучить, но основа уже на месте. Далее мы глубже взглянем на CSS.
Первый день новой жизни
В этой статье мы используем четыре различных способа верстки сайта:
Таблицы. Вам даже не нужно использовать отдельный файл стилей
И, что более важно, они не ломаются.
Float. Мы говорим о свойстве CSS
Это довольно распространенный способ создания макета веб-страницы. И в этом случае нам необходимо будет использовать отдельную таблицу стилей. Файл HTML используется, только чтобы определить контент веб-страницы. Если вы хотите выровнять контент, то должны использовать файл CSS.
CSS-фреймворки. Они работают так же, как JavaScript-фреймворки. Подключите исходный файл в заголовке (например, ), и он готов к работе! Вам не нужно задавать значения свойств самостоятельно. Для этого используются классы, которые разработчики фреймворка приготовили для вас.
Флексбокс. Флексбокс — это короткое название CSS Flexible Box Layout Module. Это более новая по сравнению со свойством float технология. Основной принцип флексбокс — предоставить контейнеру возможность изменять ширину, высоту и порядок содержащихся в нем элементов. Если вы хотите наилучшим образом заполнить все свободное пространство, нужно использовать для верстки div флексбокс. Например, для охвата всех типов устройств и размеров экрана. Плавающий контейнер будет расширять содержащиеся в нем элементы, чтобы заполнить весь экран.
Теперь пора попробовать каждый из них.
Принципы блочной вёрстки
Первый — конечно же, повсеместное использование тега <div>, который можно назвать базовым элементом блочной структуры, но об этом было сказано уже достаточно много.
Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.
Третий принцип — таблицы нужно использовать не везде, а по необходимости, при этом полностью отказываться от них так же странно, как и применять не к месту.
Главный заголовок
В примере выше, мы применили следующие свойства:
— Color задает цвет (cc3333 — код красного оттенка);
— text-align определяет горизонтальное выравнивание(center — по центру);
— margin задает 4 цифры( 10px 10px 10px 10px) определяющие отступ в пикселях сверху, справа, снизу и слева соответственно.
Опасности применения тегов h
Важно: Делать заголовок страницы с помощью тега h в коде html нужно очень аккуратно, потому что их избыток может привести к наложению санкций на ваш сайт со стороны поисковых систем Яндекс, Гугл и др., что приведет к занижению позиций в результатах поиска. Но в то же время, грамотное использование тегов h может, наоборот, улучшить позиции
Обзор семантики
Так что такое семантика? Семантика в HTML является практикой предоставления смысла и структуры содержимого на странице с помощью соответствующего элемента. Семантический код описывает значение содержимого на странице, независимо от его стиля или внешнего вида. Есть несколько преимуществ от применения семантических элементов — чтобы компьютеры, экранные ридеры, поисковые системы и другие устройства адекватно читали и понимали содержимое веб-страницы. Кроме того, семантический HTML проще для управления и работы с ним, так как ясно показывает, для чего служит каждый фрагмент контента.
Двигаясь вперед и представив новые элементы, мы поговорим о том, что эти элементы на самом деле означают и тип контента, который они представляют лучше. Прежде, чем мы это сделаем давайте рассмотрим два элемента — <div> и <span>, которые на деле не несут никакого семантического смысла. Они существуют только в целях стилизации.
Динамические страницы и что для них нужно
Помимо статических есть ещё динамические страницы. Таких сейчас в Интернете большинство. Информация в них подгружается из внешних источников, например базы данных или других файлов. Содержимое и форматирование таких страниц может меняться в зависимости от действий пользователя. Для правки динамических сайтов не обязательно вмешиваться в их код – достаточно изменить контент в специально для него предназначенном файле или базе данных, которая, к слову, представляет собой тоже файл, только определённым образом структурированный.
Для создания динамических сайтов только HTML и CSS недостаточно. Тут используются ещё и языки программирования, а также базы данных и языки запросов к ним. Чаще всего современные динамические сайты используют в своей работе HTML, CSS, PHP, JavaScript, SQL. Первые две аббревиатуры вам уже знакомы не понаслышке, SQL применяется для доступа к базам данных, JavaScript — клиентский язык, команды которого обрабатываются браузером и зачастую используются, чтобы показывать вам всякую красоту вроде шторок или плавно открывающихся фотографий, а вот PHP — это серверный язык программирования, который работает, в том числе, с содержимым сайта и делает его динамическим, с ним мы сегодня и соприкоснёмся.
Здесь текст заголовка html
Уровни заголовка html тега H
Уровни заголовка html тега H может колебаться от 1 до 6:
В зависимости от цифрового значения заголовок html тега H имеет соответствующий вес на странице!
Чем меньше цифровое значение, тем больше вес!
Заголовок h1, обозначение, тег, пример
Поскольку заголовок h1 имеет очень важное значение, то ему и посвятим чуть больше внимания!
Заголовок h1 — является главным визуальным заголовком страницы(повторяю, не путать с другим заголовком ). Заголовок h1 — должен стоять выше всех на странице и желательно выделяться на общем фоне страницы! Обозначение тега h1 Заголовок h1 имеет свой собственный двойной тег, который имеет буквенное обозначение h и цифровое 1
Здесь текст заголовка первого уровня html
Что писать в заголовке h1
Основное требование к H1 — это соответствие содержимому страницы
Заголовок должен включать ключевое слово и привлекать внимание + быть интересен пользователю
Какой размер по умолчанию заголовка h1
Для того, чтобы узнать,какой размер заголовка первого уровня по умолчанию, нам нужно на странице, без стилей написать заголовок h1 и открыв исследовать элемент посмотреть справа в стилях. как видим, размер заголовка h1 равен 2em — что в свою очередь означает два размера шрифта на странице(если размер не оговорен отдельно в стилях.)
Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему! 
Какой длины делать заголовок h1
Практически весь web говорит об оптимальной длине заголовка h1 в 60 знаков! Поэтому, желательно придерживаться этого количества! Если вы не укладываетесь, в количество занков 60, то можно и больше. Но в любом случае, как говорят, что количество знаков отображаемых в поисковике примерно 60 знаков и считается, что будет индексироваться именно те слова, что вошли в эти 60.
Сколько можно делать заголовков h1
Если смотреть на двух главных поисковиков, то они позволяют использование нескольких h1 заголовков, с условием, что они не нарушают иерархию!
Я склоняюсь к мнению многих, что лучше использовать 1 заголовок h1!
Заголовок h2, обозначение, тег, пример
Заголовок второго уровня должен стоять ниже заголовка второго уровня! Как и заголовок первого уровня заголовок h2 имеет свой тег:
Здесь заголовок второго уровня html
Второе отличие от заголовка первого уровня неограниченное количество заголовков h2 при соблюдении иерархии.
Использование заголовков h2
Используют заголовки h2 для разделения текста по подтемам на странице! Где-то прочитал, что количество текста между заголовками h2 должно составлять 800 знаков.
Заголовки h3,h4,h5
Все стальные заголовки исполняют правила для заголовка h2, кроме того, что вес заголовка уменьшается!
Если требуется использовать данные заголовки h3,h4,h5 — для разделения большой подтемы в h2 используют теги section
Новые элементы макета в HTML5
Спецификация HTML5 предоставляет новые семантические теги, описывающие содержащийся в них контент. Так как современные сайты включают в свои страницы боковые панели, заголовки и секции, в спецификацию HTML5 были включены новые теги, предназначенные для деления страницы на логические области. Семантическая разметка предназначена для описания контента. Семантическая разметка упрощает понимание смысла и контекста информации, размещенной на странице — как для поисковиков, так и для разработчиков. Теперь программы экранного доступа могут позволить пользователям проигнорировать заголовки и нижние колонтитулы и сразу перейти к основному контенту. Кроме того, поисковые машины могут придать большее значение содержимому элементов <article>, чем содержимому <header> или <footer>.
Новые элементы разметки в HTML5
Элемент
Значение / описание
<header>
Определение заголовка страницы или раздела.
<nav>
Определение области навигации страницы или раздела.
<section>
Определение логической области страницы или группировка контента.
<article>
Определение статьи (логически завершенного блока контента).
<aside>
Определение вторичного или связанного контента.
<footer>
Определение завершителя страницы или раздела.
<details>
Определяет дополнительные детали.
<summary>
Определяет заголовок для элемента <details>.
<div><div><header><nav><article>
Ниже приведена визуализация макета с использованием тегов HTML5 для раметки страницы:
<body>
<div id=»page»>
<header>
<nav>
<section>
<footer>
Пример: Макет на основе элементов HTML5
- Результат
- HTML-код
- Попробуй сам »
Главное меню
|
Основной контент… |
| Copyright 2017 wm-school.ru |
HTML Фреймы
HTML JavaScript
Способы создания
Это дизайн моего сайта:
Таблицы
Для создания шапки сайта я использовал свойство position: relative. Давайте попробуем сделать это с нуля, используя табличную верстку.
Вот мой HTML-код:
<table height="230px" background="images/header1.jpg">
<tr>
<td colspan="3"></td>
<td colspan="3" style="font-size: 4em; font-weight: bold" valign="bottom">Cinematron</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="4" style="font-size: 1.3em; font-weight: bold;" valign="top">All the stuff you need to know about the movies</td>
</tr>
<tr>
<td width="400px"></td>
<td width="70px"><a href="#">HOME</a></td>
<td width="120px"><a href="#">PREMIERES</a></td>
<td width="120px"><a href="#">BOX-OFFICE</a></td>
<td width="80px"><a href="#">PHOTOS</a></td>
<td ><input type="search" placeholder="search"></td>
</tr>
</table>
И вот, что я получил:
table, td {
border-collapse: collapse;
border: 1px solid red;
}
И вы увидите, что макет стал выглядеть так:
Теперь плохая новость. Еще раз посмотрите на HTML-код. Это простая таблица, но представьте, как она будет выглядеть с десятками ячеек. Вот какой исходный код у меня:
<div id="header">
<h2>Cinematron</h2>
<p>All the stuff you need to know about the movies</p>
<ul id="menu">
<li>home</li>
<li>premieres</li>
<li>box-office</li>
<li>photos</li>
<li><input type="search" placeholder="search"></li>
</ul>
</div>
И файл CSS:
#header {
height: 230px;
background-image: url(../images/header1.jpg);
background-repeat: no-repeat;
font-family: 'Shift', sans-serif;
}
#header h2 {
font-size: 4em;
position: relative;
top: 30px;
left: 550px;
display: inline;
}
#header p {
font-size: 1.3em;
font-weight: bold;
position: relative;
top: 50px;
left: 60px;
display: inline
}
#menu {
position: relative;
top: 100px;
left: 340px;
display: inline-block;
}
#menu li{
font-weight: bold;
display: inline;
text-transform: uppercase;
margin-right: 14px;
}
#menu input {
font-size: 0.7em;
text-transform: lowercase;
text-align: right;
position: relative;
top: -4px;
}
В этом случае вам нужно использовать блочную верстку сайта с помощью CSS. Применив что-то наподобие этого:
div {
position: relative;
top: 100px;
left: 100px;
}
Вы указываете переместить <div> на 100 пикселей вниз и на 100 пикселей вправо по отношению к его исходной позиции. С помощью этих свойств легко перемещать текст на странице. Можно перемещать его из одного угла в другой, чтобы определить, какое положение является наилучшим. Это лучше, чем таблица.
Float
Свойство float широко применяется при блочной верстке сайта. Мы будем использовать это свойство для вывода основной области размещения контента. Небольшой пример поможет вам лучше понять, как это работает:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="green"></div>
<div id="red"></div>
<div id="blue"></div>
</body>
</html>
В нем есть три разноцветных элемента <div>. Зеленый для основных статей, красный для новостных статей и синий для подвала.
А вот файл CSS:
#green {
width: 200px;
height: 200px;
border: 1px solid green;
float: left;
margin: 5px;
}
#red {
width: 100px;
height: 200px;
border: 1px solid red;
margin: 5px;
float: left;
}
#blue {
width: 310px;
height: 100px;
border: 1px solid blue;
margin: 5px;
clear: both;
}
И вот, что у нас получилось:
floatfloat: leftfloat: right
Следующий плавающей элемент будет смещаться, пока не встретит первый, и так далее. Следующий за плавающим элемент будет обтекать его как вода! Но если вы не хотите спускать все свои объекты «на воду«, можно использовать свойство clear. Оно определяет, какие стороны элемента не должны обтекать плавающие элементы.
Вот как выглядит часть моего макета для основного контента:
<div id="main-content">
<div class="article">
<h2>First article header</h2>
<img src="images/star_wars.jpg">
<p>First article body<a href="#">Read more</a></p>
</div>
<div class="article">
<h2>Second article header</h2>
<img src="images/Interstellar.jpg">
<p>Second article body<a href="#">Read more</a></p>
</div>
</div>
<div id="news">
<div class="news-article">
<h3>First news article header</h3>
<p>First news article body</p>
</div>
<div class="news-article">
<h3>Second news article header</h3>
<p>Second news article body</p>
</div>
</div>
Теперь давайте сделаем ее плавающей:
#main-content {
width: 780px;
float: left;
}
#news {
margin-left: 20px;
float: left;
width: 180px;
}
Мы добавили несколько стилей и получили что-то вроде этого:
float: left
желательно использовать не чаще, чем раз в 3-4 абзаца текста(или раз в 9-12 предложений). За более частое использование поисковики также могут занизить позиции сайта.
Интервалы указаны примерно, допускается отклонение при условии сохранения пропорции для всего текста. Допустим, на странице 3 тега в такой последовательности:
. 5 абзацев текста.
. 3 абзаца текста.
То есть между первым тегом
и третьим
Как вы уже поняли интервал в 3-4 абзаца текста(или раз в 9-12 предложений) должен быть соблюден между любыми тегами (
Если заголовки нужны чаще, чем безопасная концентрация
Если смысловые части вашего текста короткие и для их разделения требуется более частое использование заголовков и подзаголовков, то используйте другие теги вместо , а именно (строчный элемент) или
На одной странице можно использовать любые теги, поэтому вы можете сделать основные заголовки с помощью , а для второстепенных использовать
Добавление заголовка и подзаголовка на страницу сайта
Начнем работу над нашим сайтом. Сегодня мы добавим заголовок «My First Site», подзаголовок «I DID EVERYTHING MYSELF!» и маленькую аватарку. Все эти элементы помещаются в контейнер <div>, который оформляется при помощи класса CSS.
Итак, нам нужно создать класс для контейнера <div>, а затем поместить содержимое – текст и изображения – в контейнер <div>, для которого предназначен новый класс.
Чтобы добавить заголовок и подзаголовок на свой сайт, откройте файл index.html поместите следующий выделенный фрагмент кода между открывающим и закрывающим тегами <body>. Замените нашу информацию своей собственной, если хотите:
Вы добавили заголовок My First Site и присвоили ему тег заголовка <h1>, поскольку это – самый важный заголовок этой веб-страницы. Вы также добавили подзаголовок I DID EVERYTHING MYSELF! и присвоили ему тег <h5>, так как это менее важный заголовок.
Обратите внимание, непосредственно перед заголовком мы также добавили комментарий . Комментарии позволяют оставлять пояснительные примечания к коду и не отображаются браузером (посетители сайта не увидят комментарии, если они не будут просматривать исходный код веб-страницы)
В HTML комментарии записываются между тегами , как показано выше. Не забудьте закрыть свой комментарий (–>), иначе весь ваш контент будет закомментирован.
Какой из способов выбрать?
Таблицы. В валидной верстке страниц таблицы не применяются. Они делают код грязным. Таблицы не так удобны в использовании, как может казаться. Если вы все еще не решили для себя, нужно ли использовать таблицы для макета страницы, то посмотрите на этот сайт.
Но они могут быть полезны, если речь идет о верстке электронных писем. Насчитывается не так уж много браузеров, которые люди используют в наше время, зато почтовых агентов просто огромное количество. Стационарные, онлайн и мобильные приложения используют различные движки отображения. HTML-таблицы выглядят одинаково во всех из них. Вот почему это отличный вариант для верстки электронных писем.
Float. Свойство float является наилучшим выбором, если у вас не слишком высокие требования. Это простой способ сделать ваш сайт более привлекательным. Его применение для изображений является, как по мне, признаком хорошего тона. Только нужно помнить, как работают свойства float и clear. Этого достаточно для начала.
Говоря о его недостатках, мы должны признать, что плавающие элементы привязаны к потоку документа, а это может существенно уменьшить его гибкость.
CSS-фреймворки. Если нужно создать макет быстро, используйте фреймворки. На сегодняшний день их много. Среди них выберите тот, который вам больше подходит.
Флексбокс. Придется потратить некоторое время, чтобы узнать, как он работает. Думаю, вы уже поняли, насколько удобны флексбоксы для управления отдельными элементами.
Но, как я уже сказал, это относительно новая функция CSS. Поэтому нужно учитывать ее поддержку браузерами. Вот подборка ошибок, которые мне удалось найти, и возможные пути их решения.
Надеюсь, теперь вы знаете, что такое верстка сайта. До новых встреч!
Данная публикация является переводом статьи «4 Different HTML-CSS Layout Techniques to Create a Site» , подготовленная редакцией проекта.
The декларация
HTML документ должен содержать объявление <!DOCTYPE> на самой первой строчке. Объявление <!DOCTYPE> это — инструкция для веб-браузера о том, на какой версии HTML написана страница. Это непарный тег, то есть у него нет закрывающего тега. Текущая версия HTML 5 использует следующую декларацию:
<!DOCTYPE html>
Cуществует несколько видов DOCTYPE. Есть строгие виды (strict), которые работают на основе только определенных тегов, есть переходные (transitional), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset).
В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML. Есть 3 разных типа doctype в версии HTML 4.01.
HTML 4.01 Strict
Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также в strict не допускается использование frameset (фреймов).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
Этот DTD тоже содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. В отличие от HTML 4.01 Transitional, но он допускает использование frameset (фреймов).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
В версии HTML5 есть только один doctype и определяется он следующим образом:
<!DOCTYPE html>
Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.
По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки), поэтому там нет тех данных, которые указывались до этого, а следовательно — в нем присутствует только короткая команда. И дальше уже идет сам документ.
При отсутствии тега <!DOCTYPE> разные Web-браузеры мо
гут по-разному отображать веб-страницу.
Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head> ) и содержательной части (между тегами <body> и </body> ).
