Всего два положения: блокприжимается к левому или правому краю, а также начинает ужиматься по ширине под своё содержимое

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

Таким образом такой способ позиционирования подходит для статей например, где работа идет со строчными элементами

Свойство clear запрещает обтекание элемента другими элементами. Вот его значения:

1. left — запрещено обтекание слева;

2. right — запрещено обтекание справа;

3. both — запрещено обтекание с обеих сторон;

4. none — обтекание разрешено.

Если после флоатного элемента расположен элемент с запрещённым обтеканием, то последний опускается под флоатный.

Свойство clear учит блочные элементы «видеть» зафлоаченные.

 

Эффект выпадания флоатов из родителя был большой проблемой при построении сеток. Ведь сетки на флоатах обычно делаются вот так:

1. Создаём блок-контейнер для колонок.

2. В контейнер добавляем флоатные блоки-колонки.

3. Рассчитываем ширины колонок так, чтобы им хватало места в родителе.

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

Необходимо было найти способ борьбы с выпаданием. Тут и пригодилось свойство clear:both. Стали применять такую структуру:

<div class="container"> - блок-контейнер

<div class="column1">...</div> - колонка, флоат

<div class="column2">...</div> - колонка, флоат

<div class="clearfix"></div> - распоркас clear:both

</div>

Т. е. начали добавлять после зафлоаченных колонок пустой элемент-распорку со свойством clear:both. Этот элемент видел колонки, не давал им пройти через себя, а заодно и растягивал родительский блок по высоте.

Для таких распорок прижилось специальное название класса — clearfix.

2)

.clearfix::after {

content: '';

display: table;

clear: both;

}

И добавление к классу обертке клеарфикс

 

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

С дачи

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

ПЛАТНЫЙ КУРС

ЗНАКОМСТВО HTML5

<header>

<footer>

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

<headerclass=”page-header”>

<footerclass=”page-footer”>

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

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

А раз теги неуникальные, то и стилизовать их лучше с помощью классов

Если вы не хотите использовать классы для шапки и подвала сайта, то м ожете использовать селекторы body > header и body > footer. Эти селекторы не повлияют на хедеры и футеры, вложенные более глубоко.

Другое дело новый тег <main>, который обозначает основное содержание сайта и по спецификации может использоваться на странице только один раз. Для его стилизации никакие классы не нужны.

 

 

Раньше почти все разделы верстались на дивах. Но в HTML5 добавили сразу два новых тега для разметки разделов:

· <section> — смысловой или логический раздел документа;

· <article> — самостоятельный и независимый раздел документа.

Чтобы не было путаницы, разберём где и когда использовать разные контейнеры:

· <div> — контейнер общего назначения, не обязательно смысловой. Дивы используются для разметки мелких блоков, создания сетки и декоративных эффектов.

· <section> — более крупный логический контейнер, объединяющий содержание по смыслу. Например, блок «О компании», список товаров, раздел личной информации в профиле и так далее.

· <article> — самостоятельный, цельный и независимый раздел документа. Этот раздел можно в неизменном виде использовать в различных местах, в том числе и на других сайтах. Примеры: статья, пост в блоге, сообщение на форуме и так далее.

-------------

Логотип вставить на странице

<divclass="logo">

<img src="/assets/course73/logo.svg" width=300 height=300></img>

</div>

 

position: absolute;

top: 10px;

left: 20px;

margin: 0;

- - - - - - - - - - - - -

В HTML5 добавили специальный элемент для навигационных блоков — тег <nav>. Так что теперь меню и блоки ссылок лучше оборачивать не в дивы, а в навы.

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

 

Таким образом, в Сектионы оборачивают даже разделы футера, типа информацию общую в футере – в свой серктион, контакты в свой и тд, например

 

 

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

1. Берут файл шрифта (например,.ttf) и конвертируют в веб-формат в сервисе наподобие Font Squirrel (для кириллических шрифтов надо указать дополнительные параметры конвертации).

2. Затем сконвертированные файлы шрифта размещают у себя на сервере.

3. И подключают шрифт с помощью @font-face.

 

<aside> — это дополнительное содержание, не связанное напрямую с основным. Ещё такие блоки часто называют «сайдбарами» или боковыми панелями.

 

Article – самостоятельная часть, в нем может быть свой Сектион,, Хедер, футер, Асайд

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

Собственная иерархия заголовков у <article> — это очень удобная вещь, так как нам не нужно больше задумываться об окружении поста и подстраивать уровень заголовков в посте под это окружение, как часто приходится делать сейчас.

 

В свою очередь, в Серктион мы можем кинуть Артикал.

 

 

Один из новых тегов — это <figure>.

Вспомните в книжках или учебниках изображения-выноски с подписями. Вот это и есть аналог <figure>. Цельный и независимый блок содержания. Внутри этого тега размещают демонстрационный материал: изображения, схемы, куски кода и так далее.

Обычно каждый такой материал сопровождает разъясняющий комментарий или «легенда». Для обозначения этого комментария и предназначен ещё один новый тег — <figcaption>, который размещается первым или последним элементом внутри <figure>. Пример:

<figure>

схема,

график,

диаграмма

и так далее

<figcaption>Легенда</figcaption>

</figure>

 

 

В HTML с самого начала было очень просто вставлять изображения, но очень сложно видео и аудио. В HTML5 эту проблему попытались решить, добавив специальные теги.

Для вставки видео предназначен тег <video>. Его основные атрибуты:

width и height	задают ширину и высоту видео
controls	пустой атрибут, при наличии которого отображается панель управления видео (типа скрол и полоса перемотки. В случае с рекламой просто запускают видео автоматически и убирают панель Контролс)
preload	задаёт режим предзагрузки видео, имеет 3 возможных значения: · none — не загружать ничего; · metadata — загрузить служебную мета-информацию (длительность, первый кадр и т.д.); · auto — можно загрузить всё видео. значение по умолчанию зависит от браузера
src	задаёт адрес видеофайла
autoplay	пустой атрибут, при наличии которого воспроизведение видео начинается автоматически
poster	задаёт адрес картинки-обложки, которая отображается, когда видео еще не загрузилось или не воспроизводится

 

 

У тега <video> есть атрибут src, в котором можно указать адрес видеофайла, но мы почему-то его не использовали.

Всё дело в том, что в текущий момент существует несколько форматов видео, каждый из которых хорошо поддерживается лишь некоторыми браузерами. Вот три самых распространённых формата и их поддержка:

· MPEG-4/H.264

· OGG/Theora

· WebM

Поэтому мы должны в видео указывать адреса файлов во всех этих форматах (и конвертировать исходное видео в эти форматы, конечно). Делаетсяэтоспомощьютегов <source>:

<video controls><source src="video.mp4" type="video/mp4"><source src="video.ogv" type="video/ogg"><source src="video.webm" type="video/webm"></video>

В атрибуте src указывается адрес видеофайла, а в атрибуте type его тип (также там могут указываться и кодеки). Браузер из списка видеофайлов выбирает первый, который может проиграть и загружает его.

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

 

 

Работа с аудио в HTML5 очень похожа на работу с видео, только у тега для аудио чуть меньше параметров.

Для вставки звука предназначен тег <audio>. Его основные атрибуты:

controls	пустой атрибут, при наличии которого отображается панель управления проигрывателем
preload	задаёт режим предзагрузки аудио, имеет 3 возможных значения: · none — не загружать ничего; · metadata — загрузить служебную мета-информацию; · auto — можно загрузить весь файл. значение по умолчанию зависит от браузера
src	задаёт адрес аудиофайла
autoplay	пустой атрибут, при наличии которого воспроизведение звука начинается автоматически

У звуковых файлов с поддержкой форматов дела обстоят лучше, чем у видео.

Для охвата большинства современных браузеров, достаточно использовать всего два формата:

· MP3

· OGG

И снова мы не можем указать только один файл в атрибуте src у тега <audio>. Мы должны так же, как и в случае с видео, перечислить адреса звуковых файлов в разных форматах с помощью тегов <source>:

<audio controls>

<source src="sound.mp3" type="audio/mpeg">

<source src="sound.oga" type="audio/ogg">

</audio>

Теги <source> в аудио работают так же, как и в видео.

 

 

Итого:

<body>

<header class="page-header">

< div class="logo"><img src="/assets/course73/logo.svg" width="90" height="90"></div>

< nav class="main-menu">

<ul>

<li><a href="#home">Главная</a></li>

<li><a href="#blog">Посты</a></li>

<li><a href="#me">Обомне</a></li>

</ul>

</nav>

</header>

<main>

< article class="blog-entry">

< section class="idea">

<h1>Размышления о жизни</h1>

<p>Существует много вещей, которые безразличны собакам, но кошки от них без ума.</p>

<p>К примеру, любимое место кота — это клавиатура компьютера. Собака не будет постоянно спать на клавиатуре.</p>

</section>

< aside class="video-preview">

<img src="/assets/course73/preview.jpg" alt="Видеопревью">

</aside>

</article>

< section class="photos">

<figure class="slides">

<img src="/assets/course73/keks-1.jpg" alt="keks-1">

<img src="/assets/course73/keks-2.jpg" alt="keks-2">

<img src="/assets/course73/keks-3.jpg" alt="keks-3">

<img src="/assets/course73/keks-4.jpg" alt="keks-4">

<img src="/assets/course73/keks-5.jpg" alt="keks-5">

 

</figure>

</section>

</main>

<footer class="page-footer">

< section class="info">

<img src="/assets/course73/keks.jpg" width="50" alt="keks">

Кекс, [email protected]

</section>

< section class="copyright">

© 2008—2014 Cat Energy

</section>

</footer>

</body>

 

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

HTML5 ФОРМЫ

В HTML-формах есть специальная кнопка, которая сбрасывает введённые значения и возвращает изначально установленные. Это поле ввода с типом reset.

Пример использования:

<input type="reset" value="Сбросить">

Обратите внимание, что кнопка не обнуляет значения, а возвращает те, которые были установлены в полях формы по умолчанию.

 

- - - - - - - -

Помимо кнопок отправки формы или сброса введенных значений, существуют и «просто кнопки». При щелчке на такую кнопку никаких действий не происходит, а все необходимые действия обычно задаются при помощи JavaScript.

Пример записи:

<input type="button" value="Кнопка">

 

 

В качестве кнопки отправки формы можно использовать изображение.

Для этого у тега input нужно указать тип image.

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

src	адрес изображения
alt	альтернативный текст, отображаемый в том случае, если изображение не загружено

Кнопка-изображение работает аналогично кнопке submit, но на сервер дополнительно передаются координаты точки, по которой был произведен щелчок.

<input type=”image” src=”///” alt=”ccc” />

 

 

Помимо тега <input> для добавления кнопок можно использовать тег <button>. Он расширяет возможности создания кнопок.

Внутри тега <button> можно размещать любые HTML-элементы, в том числе изображения. Например:

<button>Календарь<img src="/assets/course74/calend.png" alt=""></button>

В данном случае кнопка будет выглядеть примерно вот так:

Если в атрибуте type тега <button> указать значение submit или reset, то кнопка будет отправлять данные на сервер или сбрасывать введенные значения.

По умолчанию значение атрибута type – submit.

То есть внутри формы кнопка <button> по нажатию отправит форму на сервер.

Значениями атрибута type также могут быть button и reset.

Кнопка button со значением type="reset" аналогично input type="reset" сбрасывает значения полей формы к изначальным.

А вот значение type="button" избавит кнопку от всей изначальной фунциональности. То есть кнопка просто будет выглядеть как кнопка, но ничего по умолчанию не делать. Это удобно, если вы хотите сами добавить кнопке дополнительное действие с помощью JavaScript.

<button type="submit">Войти <img src="/assets/course74/enter-light.png" alt=""></button>

Чтобы указать, что поле обязательно для заполнения, нужно добавить ему пустой атрибут required:

<input type="text" required>

При попытке отправить форму с незаполнеными обязательными полями браузер выведет всплывающее предупреждение, которое в Chrome и Firefox выглядит вот так:

 

В форму заказа важно включить поле даты доставки. А для выбора даты из календаря существует новый тип поля ввода — date. При клике на данное поле в форме всплывает календарик.

Пример записи:

<input type="date">

В Chrome это выглядит так:

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

Используем поле выбора времени в нашей форме:

<input type="time">

В Chrome это выглядит так:

 

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

Пример использования:

<inputtype="text" list="browsers" name="browser"> <datalist id="browsers"><option value="Firefox"><option value="Chrome"><option value="Safari"></datalist>

В Chrome это выглядит так: