Шапка html: Теги header и footer, шапка и подвал — Структура HTML-документа — HTML Academy

Верстка адаптивной шапки на Bootstrap

Вы здесь: Главная — CSS — CSS Основы — Верстка адаптивной шапки на Bootstrap

На этом уроке мы сделаем верстку адаптивной шапки сайта (лендинга), используя Bootstrap сетку. Если вы не знаете что это такое, советую почитать статью «Верстка PSD макета по Bootstrap 4 сетке» (часть 1 и часть 2).

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

Для наглядности я установил в браузере расширение Bootstrap Grid, чтобы показать вам на примере шапки сайта, как распределятся 12 колонок сетки между тремя её блоками.

На больших и средних экранах:

• номер телефона занимает 2 колонки (col-lg-2)
• меню с ссылками — 8 колонок (col-lg-8)
• кнопка — 2 колонки (col-lg-2)

У вас уже должен быть в хедере подключен Bootstrap. Дальше создадим всю необходимую HTML структуру, частично используя бутстраповские и свои CSS классы.

Обернем нашу шапку в основной блок с классом header, которому зададим белый цвет шапки и сделаем нижнюю серую границу.

<header>..</header>

.header {
    border-bottom: 1px solid #f5f5f5;
    background-color: #fff;
}

По макету размер шапки сайта (ширина между двумя направляющими) равен 960 пикселей. Для фиксированной ширины контейнера, есть бутстраповский класс

container. В контейнере всегда есть строка row, а в строке — столбцы col. Структура Bootstrap сетки напоминает таблицу. Элементы шапки сайта расположены в одну строку и занимают определенное количество колонок.

<div>
  <div>
    <div>номер телефона</div>
    <div>меню сайта</div>
    <div>кнопка</div>
  </div>
</div>

Внутри первого блока вставляем кликабельный номер телефона (для мобильных телефонов).

<div>
  <div>
    <a href="tel:+7499 3228580">+7 499 322-85-80</a>
  </div>
</div>

Во второй блок вставим навигационные ссылки для меню шапки. Обратите внимания, что я здесь не использую, привычные теги списков <li></li>. Считаю, что для построения одноуровневого меню — это лишний код.

<div>
  <nav>
    <a href="#">Как мы работаем</a>
    <a href="#">Преимущества</a>
    <a href="#">Отзывы</a>
    <a href="#">Тарифы</a>
    <a href="#">Партнеры</a>
    <a href="#">Отзывы</a>
  </nav>
</div>

В третий блок поместим кнопку.

<div>
    <a href="">Перезвоните мне</a>
</div>

Поместим все три блока в кастомный флекс-контейнер header__inner.

<div>..</div>

Это необходимо для выравнивания всех элементов шапки в CSS стилях.

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    max-width: 960px;
    height: 50px;
    margin: 0 auto;
    line-height: 50px;
}

Этот CSS код выравнивает ссылки в меню.

.topnav {
    display: flex;
    align-items: center;
    justify-content: center;
}

Как сделать шапку сайта адаптивной?

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

гамбургер. Можно взять готовую иконку с FontAwesome и вставить в код сразу после кнопки.

<button>
    <i></i>
</button>

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

@media screen and (max-width: 960px) {
    .topnav {
        display: none;
    }

    .topnav__btn {
        margin-right: 20px;
    }

    .topnav__icon {
         display: block;
        background: #fff;
        border: none;
        font-size: 25px;
         width: 40px;
        height: 40px;
        cursor: pointer;
        position: absolute;
        top: 6px;
        right: 10px;
    }

Заключение

Умение эффективно пользоваться Bootstrap позволяет верстальщикам, не знающим

JavaScript, взаимодействовать с пользователями. Хотите узнать об этом больше? Переходите на сайт видео-курса по Bootstrap.

• Создано 03.02.2020 10:27:38
• Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья

ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov. ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Введение в HTML — Изучение веб-разработки

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

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

Примечание: если вы работаете на компьютере/планшете/другом устройстве, с отсутствием возможности создания собственных файлов, вы можете испробовать примеры кода (большинство) в онлайн-редакторах кода, таких как JSBin или Thimble.

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

Начало работы с HTML

Охватывает базовые основы HTML, чтобы вы начали изучение — мы опишем элементы, атрибуты и все другие важные термины, о которых вы, возможно, уже слышали, а также где и как они располагаются в языке. Мы также покажем, структуру HTML элемента, как устроена типичная страница HTML, и объясним другие важные языковые особенности. По ходу мы будем играть с HTML так, чтобы вам было интересно!

Что такое заголовок? Метаданные в HTML

Заголовок HTML — это часть документа, которая не отображается в браузере при загрузке страницы. Он содержит информацию, такую как: страница <title>, ссылки на CSS (если вы хотите стилизовать свой HTML при помощи CSS), ссылки на пользовательские значки и метаданные (которые представляют собой данные о HTML, например, кто его написал или важные ключевые слова, которые описывают документ).

Основы редактирования текста в HTML

Основной задачей HTML является придание тексту значения (также известно, как семантика), чтобы браузер знал, как его правильно отображать. В этой статье рассматривается то, как использовать HTML, чтобы разбить блок текста на структуру из заголовков и абзацев, добавить акцент/значение слов, создать списки и многое другое.

Создание гиперссылок

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

Углублённое форматирование текста

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

Структура документа и веб-сайта

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

Отладка HTML

Писать на HTML хорошо, но что, если что-то идёт не так, и вы не можете найти место ошибки в коде? В этой статье вы познакомитесь с некоторыми инструментами, которые могут вам помочь.

Следующие задания проверят ваше понимание основ HTML, описанных в приведённых выше руководствах.

Разметка письма

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

Структурируем страницу

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

Основы интернет-грамотности

Отличный фундаментальный курс Mozilla, который даёт множество тестов, проверяющих знания, о которых мы говорили в модуле Введение в HTML. Учащиеся знакомятся с чтением, письмом и использованием сети в модуле из 6 частей. Откройте для себя основы Интернета через производство и сотрудничество.

Как сделать заголовок в HTML?

Шапка сайта HTML является контейнером для метаданных, который размещается между тегами <html> и <body>. Метаданные – это информация о HTML-документе. Они не выводятся на страницу.

Метаданные определяют заголовок документа, кодировку, стилизацию, а также используются для размещения ссылок и другой информации.

К метаданным относятся следующие теги: <title>, <style>, <meta>, <link>, <script>, и <base>.

Тег <title> отвечает за заголовок документа, и обязателен для всех документов HTML/XHTML.

Элемент <title>:

• Задаёт заголовок вкладки в браузере;
• Задаёт заголовок страницы, добавленной в «Избранное»;
• Выводит заголовок страницы в выдаче поисковой системы.

Пример:

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
Содержимое документа…
</body>

</html>

Посмотреть демо

Перед тем, как сделать шапку сайта HTML, нужно знать, что тег <style> используется для стилизации отдельной веб-страницы:

Пример:

<style>
body {background-color: powderblue;}
h2 {color: red;}
p {color: blue;}
</style>

Посмотреть демо

Элемент <link> предназначен для указания ссылок на внешние файлы CSS.

Пример:

<link rel="stylesheet" href="mystyle.css">

Посмотреть демо

Перед тем, как написать шапку сайта в HTML, помните, что <meta> используется для указания кодировки, описания страницы, перечисления ключевых слов, автора материала и других метаданных.

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

Определяем используемую кодировку:

Вносим описание веб-страницы:

<meta name="description" content="Free Web tutorials">

Указываем ключевые слова для поисковых систем:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

Указываем автора материала:

<meta name="author" content="John Doe">

С помощью шапки сайта и ее HTML кода устанавливаем обновление страницы каждые 30 секунд:

<meta http-equiv="refresh" content="30">

Пример метатегов:

Пример:

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

Посмотреть демо

В HTML5 с помощью тега <meta> можно контролировать область просмотра (viewport) в окне браузера.

Область просмотра – это часть веб-страницы, видимая для пользователей. Она может отличаться в зависимости от используемого устройства – то есть, на мобильных устройствах она будет меньше, чем на ПК:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Этот элемент шапки сайта HTML даёт браузеру инструкции о размерах области просмотра.

Фрагмент width=device-width отвечает за ширину страницы, которая должна соответствовать ширине экрана устройства.

Фрагмент initial-scale=1.0 устанавливает исходный уровень увеличения при загрузке страницы в браузере.

Взгляните на пример веб-страницы без метатега viewport, и той же страницы с указанным тегом viewport.

Совет: если вы читаете статью на смартфоне или планшете, можете перейти по ссылкам, приведённым под картинками:

Пример без метатега viewport
Пример с метатегом viewport

Тег шапки сайта HTML CSS позволяет выполнять код JavaScript на стороне клиента. В примере ниже Javascript выводит «Hello JavaScript!» в HTML-элемент через id=»demo»:

Пример:

<script>
function myFunction {
    document. getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

Посмотреть демо

Элемент определяет базовый URL и цель для всех ссылок на странице:

Пример:

<base href="https://www.w3schools.com/images/" target="_blank">

Посмотреть демо

Согласно стандарту HTML5, теги <html>, <body> и <head> можно опустить.

<!DOCTYPE html>
<title>Page Title</title>

<h2>This is a heading</h2>
<p>This is a paragraph.</p>

Посмотреть демо

Примечание: Мы не рекомендуем опускать теги <html> и <body>. Это может негативно сказаться на работе DOM и XML, а также вызвать ошибки отображения веб-страниц в устаревших браузерах (например, IE9).

• <head> Предоставляет информацию о документе.
• <title> Задаёт заголовок документа.
• <base> Определяет основной адрес и цель для всех ссылок на странице.
• <link> Отвечает за связь между документом и внешними ресурсами.
• <meta> Определяет метаданные документа.
• <script> Позволяет использовать скрипты на стороне клиента.
• <style> Определяет стилизацию документа.

Данная публикация является переводом статьи «HTML Head» , подготовленная редакцией проекта.

Адаптивная шапка HTML/CSS — Stack Overflow на русском

Делаю адаптивную шапку, вроде что-то выходит… Но застрял на одном моменте: при уменьшении ширины экрана, когда край экрана доходит до последней ссылки, то последняя ссылка просто перескакивает вниз:

/* Header */
.header {
    width: 100%;
    position: absolute;
    z-index: 1000;
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Nav */
.nav {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 880px;
    height: 55px;
    font-size: 1.63vw;

    background-color: black;

    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

. nav__link1 {
    float: left;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;

    width: 24.18%;

    text-align: center;
    text-decoration: none;

    height: 55px;
    line-height: 50px;
}

.nav__link2 {
    float: left;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;

    width: 24.17%;

    text-align: center;
    text-decoration: none;

    height: 55px;
    line-height: 50px;
}


.logo__container {
    float: left;
    display: inline-block;
    margin: 50px 0px 0px -11px;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;

    padding: 0px 20px;
    height: 1px;
    line-height: 50px;

    z-index: 1001;
}

.logo {
  position: absolute;
  top: -50px;
  left: -5px;
  height: 75px;
}

.logo img {
  height: 75px;
}

.nav__link3 {
    float: left;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;

    width: 24. 17%;

    text-align: center;
    text-decoration: none;

    height: 55px;
    line-height: 50px;
}

.nav__link4 {
    float: left;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;

    width: 24.18%;

    text-align: center;
    text-decoration: none;

    height: 55px;
    line-height: 50px;
}

<header>
        <div>
            <div>
                <nav>
                    <a href="#">Ппппппп</a>
                    <a href="#">ООО</a>
                    
                    <div>
                        <div>
                            <img src="../logo.png" />
                        </div>
                    </div>
              
                    <a href="#">Ккккк</a>
                    <a href="#">Ррррррр</a>
                </nav>
            </div>
        </div>
    </header>

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

И возможно ли уменьшение не только по ширине, но и по высоте? Если да, то как это реализовать?

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

Шапка Html документа: создаем с нуля своими руками

Здравствуйте, уважаемые читатели! В сегодняшней статье мы вместе с вами создадим шапку html документа, которая в большинстве случаев является стандартной для всех сайтов.

Итак, приступим. В предыдущем уроке я вас просил скачать и установить программу для редактирования текстов: Notepad++. Если вы это сделали, то отлично и мы можем приступать к работе. Если же по каким-то причинам вы этого сделать не смогли, то не отчаивайтесь, свой первый сайт вы сможете создать используя стандартную программу блокнот, которая к счастью есть на любом компьютере. Для этого на рабочем столе щелкните правой кнопкой мыши и в всплывшем меню выберете «Создать» и далее «текстовый документ». Все готово можно приступать к работе!

Шапка HTML документа

Открыв notepad++ или же программу блокнот, вы увидите перед собой чистую страницу. Для того чтобы сделать свой сайт, надо превратить эту пустую страницу, в html документ, который будет правильно читаться и отображаться в браузере. Html документ состоит из большого числа тегов и прикрепленных к ним атрибутов. Все теги мы изучать не будем, так как многие из них с появлением css стали не нужны. Будем разбирать только основные теги и атрибуты,которые присутствуют в любом сайте.

Каждый новый документ имеют схожую шапку-шаблон

Разберем каждую строчку в отдельности. DOCTYPE — можно буквально перевести как, тип документа. Простыми словами первая строчка нашего html шаблона указывает нам на тип документа, показывает браузеру что документ написан на языке html, версий 4.01, под версия Transitional (которая позволяет использовать даже устаревшие, вышедшие из обихода теги). Также в шапке шаблона можно прописать кодировку и язык, к примеру UTF-8. Первая строка является служебной. Более подробную информацию про DOCTYPE можно прочитать введя в браузере, эту строчку: http://htmlbook.ru/html/!doctype

Переходим к разбору тегов. ТЕГ— это элемент конструкций html языка, который указывает браузеру что именно ему следует сделать или отобразить .Каждый тег располагается между двумя угловыми скобками(<>), а между ними прописывается имя и атрибуты (при необходимости). Большинство из них имеют открывающий и закрывающий тег и, соответственно, называются парными, а теги без закрывающего элемента — одинарными. Для закрытия тега необходимо прописать слэш (/) и имя тега. К примеру закрывающим тег <body> будет </body>.

Но не будем забегать вперед и начнем по порядку!

Любой документ html начинается с тега <html> и заканчивается тегом </html>! Это родительский тег, внутри него располагаются все иные теги документа, которые могут, иметь или не иметь, закрывающих тегов.

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

В теге head располагается множество других парных meta тегов, но о них мы поговорим позднее. На нашем примере одинарный тег meta отвечает за выбор кодировки, charset=utf-8. Это универсальная кодировка, которая отображается на всех браузерах.

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

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

Прописав шаблон, в программе notepad++, или же в стандартном блокноте, сохраните ваш документ под именем index.html. К этому файлу в первую очередь обратиться ваш браузер.

Кликнув по сохраненному файлу, вы можете просмотреть вашу страницу в браузере.

Создайте на своем компьютере папку, к примеру «Мой сайт» и сохраняйте в нее всю информацию, так из урока в урок, ее будет становиться все больше и больше.

Итоговый текст, который у нас появился можно скопировать здесь:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Документ без названия

</head>

<body>

</body>

</html>

Итак, на сегодня все. В данном уроке мы рассмотрели шаблон html документа и узнали что теги бывают парными и одинарными, вспомогательными и форматирующими

Урок 10. Верстаем шаблон

Представим, что у нас есть вот такой html шаблон. Он который сверстан табличным методом:

шапка сайта
меню	контент
низ сайта

 Этот HTML шаблон имеет следующий код:

<html>

   <head>
        <title>CSS позиционирование</title>
   </head>

   <body>

     <table  border=»1″
          align=»center» cellspacing=»0″ cellpadding=»10″>

        <tr bgcolor=»darkred»>
            <td colspan=»2″>шапка сайта</td>
        </tr>

        <tr bgcolor=»oldlace»>
            <td >меню</td>
            <td>контент</td>
        </tr>

        <tr bgcolor=»darkred»>
            <td colspan=»2″>низ сайта</td>
        </tr>

    </table>

   </body>

</html>   

 Давайте сверстаем этот HTML шаблон с помощью CSS.

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

 

<html>

   <head>
     <title>CSS позиционирование</title>
     <link rel=»stylesheet» type=»text/css» href=»/style.css»>
   </head>

   <body>
     <div>шапка сайта</div>
     <div>меню</div>
     <div>контент</div>
     <div>низ сайта</div>
   </body>

 </html>    

 

Заходим в таблицу стилей (style.css) и задаем свойства которые уже знаем (ширина, высота и фон каждого блока):

#header{
  background:darkred;
  width:715px;
  height:100px;
}
#menu{
  background:oldlace;
  width:190px;
  height:300px;
}
#content{
  background:oldlace;
  width:525px;
  height:300px;
}
#footer{
  background:darkred;
  width:715px;
  height:30px;
}    

Смотрим на наш новый HTML шаблон:

 

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

абсолютное
относительное
плавающая блоковая модель

Для определения позиционирования используется свойство position, имеет четыре значения:

static — блок позиционируется в нормальном потоке. Значение по умолчанию
relative — относительное позиционирование (относительно нормального потока)
absolute — абсолютное позиционирование
fixed — фиксированное позиционирование (фиксируется относительно области просмотра)

В этом уроке мы будем рассматривать абсолютное позиционирование:

При абсолютном позиционирование расположение блока на странице не зависит html-кода (в каком месте html-кода расположен этот блок). Расположение задается указанием, в каком месте экрана отобразить данный блок. В этом нам помогают четыре свойства:

left — указывает на сколько надо сместить блок относительно левого края окна
right — указывает на сколько надо сместить блок относительно правого края окна
top — указывает на сколько надо сместить блок относительно верхнего края окна
bottom — указывает на сколько надо сместить блок относительно нижнего края окна

Вернемся к нашему HTML шаблону. Блоки header, menu и footer расположены там где и должны быть, поэтому пусть позиционируются в нормальном потоке. Блок content нужно расположить в другом месте, поэтому указываем свойство position: absolute и задаем смещение: от левого края окна на ширину блока menu, а от верхнего края окна на высоту блока header.

#header{
  background:darkred;
  width:715px;
  height:100px;
}
#menu{
  background:oldlace;
  width:190px;
  height:300px;
}
#content{
  background:oldlace;
  width:525px;
  height:300px;
  position:absolute;
  left:190px;
  top:100px;
}
#footer{
  background:darkred;
  width:715px;
  height:30px;
}    

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

По умолчанию для элемента body определены поля, которые мы не учли. Чтобы выровнять блок в нашем HTML шаблоне, достаточно задать для body собственные значения margin:0px:

body{
  margin:0px;
}

Проверяем:

Главное, что необходимо запомнить: при абсолютном позиционировании смещения происходит относительно «родительского» элемента. В нашем примере родительским элементом для div-ов было окно браузера, но может бывает и по-другому.

Представьте, мы решили добавить блок новостей и разместить его в блоке контента:

В html-страницу в div мы добавим div:

 

<html>

   <head>
     <title>css potision</title>
     <link rel=»stylesheet» type=»text/css» href=»/style.css»>
   </head>

   <body>
     <div>шапка сайта</div>
     <div>меню</div>
     <div>
       контент
       <div>блок новостей</div>
     </div>
     <div>низ сайта</div>
   </body>

 </html>    

 

В таблице стилей смещение будем указывать относительно блока content:

#news{
  background:yellow;
  width:150px;
  height:280px;
  position:absolute;
  left:365px;
  top:10px;
}   

Ширина блока content 525px, а ширина news — 150px. Следовательно, смещение от левого края равно (525-150) 375px, но, чтобы блок не прилипал к правому краю, мы уменьшили смещение до 365px. Аналогично рассчитываем смещение от верхнего края.

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

 

Верстка адаптивной шапки header сайта с нуля. Введение.

Приветствую. Это небольшое вводное видео к курсу по верстке и оформлению шапок (header) для сайтов. Наверняка, вы могли не раз видеть на самых разных сайтов вот такие (см. видео) подобные шапки сайта.

Как правило, это какой-то заголовок, какой-то подзаголовок и какая-то картинка, либо какое-то фоновое изображение.

Вот такие шапки сайта мы с вами будем верстать в этом курсе.

Я хотел показать и поделиться с вами некоторыми простыми техниками, которые я при этом использую. Минимум кода, максимум результата и посмотрим, что у нас получиться.

И чему мы с вами будем конкретно учиться?

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

Как подобрать фоновое изображение и адаптировать его для вставки на сайт? Каких размеров должно быть это изображение и.т.д.

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

Как сделать эффект прокрутки фонового изображения?

Как можно улучшить читаемость текста на фоновом изображении?

Я буду показывать эти техники на примере графического редактора Adobe Photoshop. В других редакторах все делается аналогично. 

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

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

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

Главное понять идею и суть и в дальнейшем вы сможете легко верстать подобные блоки.

Если этот курс интересен, жмите на кнопку «Далее» или «Содержание» и встретимся в следующих уроках.

Тег заголовка HTML

Пример

Заголовок для

:

<статья>
<заголовок>

Заголовок здесь

Автор: Джон Doe

Дополнительная информация здесь

Набор Lorem Ipsum dolor amet ….

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

---

Определение и использование

Элемент

представляет собой контейнер для вводного содержания или набор навигационных ссылок.

Элемент

обычно содержит:

• один или несколько элементов заголовка (

  —

  )

• логотип или значок
• информация об авторстве

Примечание: У вас может быть несколько элементов

в одном HTML-документ.Однако

нельзя поместить в