Сайт

Шапка для сайта html: Шапка | HTML | CodeBasics

13.06.2023

Содержание

Как изменить шапку сайта (часть 1)

На фриланс-биржах, заказчики часто просят, изменить дизайн какого-нибудь фрагмента сайта, например шапки. Самый простой способ изменить шапку сайта, так это создать её с нуля. Почему я так считаю? Пожалуйста, будут и аргументы.

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

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

Специально для этой статьи, я сделал скриншот одной чудесной шапки, случайно найденной в интернете, у какого-то сайта и буду её улучшать, подробно описывая весь процесс.

Так выглядела шапка до изменений:


У данного творения просматривается явная нехватка места для всех элементов. От такого плотного соседства элементов и отсутствия пустого пространства, глаза собираются в кучу. Надо разрядить пространство, за счёт создания нового ряда для контактной информации.

Что бы я изменил в дизайне?

  1. Шрифт и цвет у логотипа
  2. Размер и цвет остального шрифта
  3. Убрать зеленую полосу
  4. Блок с контактами разместить на верхней панели

После изменений:


Между тегами head в HTML файле:

//прописываем мета тег для адаптивности
<meta name="viewport" content="width=device-width, initial-scale=1">
//подключаем другие шрифты
<link href="https://fonts.googleapis.com/css?family=Forum|Roboto+Slab:400,700" rel="stylesheet">
//подключаем библиотеку Font Awesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
//подключаем внешний файл стилей, сюда будем писать стили
<link rel="stylesheet" href="style. css">
//скачиваем и подключаем файл нормализации стилей
<link rel="stylesheet" href="normalize.css">

Делать верстку мы будем на flexbox.

Первый ряд – панель с контактами (top header).

HTML разметка

В блок-контейнер с классом top-header, поместим три флекс-элемента – абзацы с текстом.

<div>
  <p>Массажный салон для вашего здоровья и красоты</p>
  <p><span>Tel.</span> (+372) 5514704, 58079045</p>
  <p><span>Инфо и запись:</span> ежедневно с 9:00 до 21:00</p>
</div>

CSS стили

/* Общие стили для шапки */
body {
  font-family: 'Forum', cursive;
  color: #777;
  background-color: #fff;
}

Инфоблоки встанут в ряд благодаря display: flex. Свойство space-around равномерно распределяет пустое пространство между инфоблоками. Однопиксельная серая рамка, визуально разграничит верхнюю панель от самой шапки.

/* Флекс контейнер для верхних инфо-блоков */
.top-header {
  display: flex;
  justify-content: space-around;
  padding: 5px;
  font-size: 100%;
  border-bottom: 1px solid #efd0d0;
  position: relative;
}

Выделим некоторые слова зеленым цветом.

/* Зеленый цвет у текста инфо-блоков */
.top-header .green {
  color: #b2db41;
  font-weight: bold;
}

Временно подсветим красной и черной рамками, чтобы было ясно, где флекс-контейнер, а где флекс-элементы.

Второй ряд – шапка (header)

Слева направо, первым идет логотип, а затем навигационное меню.

HTML код

Начинается с открывающего тега header, внутри которого блок с логотипом. Логотип вставляется, как ссылка, ведущая на главную страницу.

<header>
  <div>
    <a href="#">Massaaži<span>Maailm</span></a>
  </div> ...

CSS код

/* Флекс контейнер для шапки */
header {
  display: flex;
  justify-content: space-around;
  padding: 5px;
  border-bottom: 5px solid #b2db41;
}

/* Стили для всех ссылок внутри флекс контейнера */
header a {
  display: block;
  color: #212121;
  padding: 12px;
  text-decoration: none; /* убирает подчеркивание */

  font-size: 100%;
  text-shadow: 0 1px 0 #fff;
  border-radius: 4px;
}

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

/* Ширина дочернего блока под логотип */
.wrap-logo {
  width: 30%;
}

Задавая размеры шрифта в %, мы заботимся о супер больших экранах, ведь пиксели жестко задают размер.

/* Стилизация логотипа */
.wrap-logo #logo {
  font-family: 'Roboto Slab', serif;
  font-size: 200%;
  font-weight: bold;
}

Логотип смотрится свежее, если его сделать двухцветным.

/* Зеленый цвет у части логотипа */
.wrap-logo span {
  color: #b2db41;
}

Продолжение следует.

  • Создано 08.04.2019 10:20:30
  • Михаил Русаков

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

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

com/rusakovmy.

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

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

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

HTML :: Подробнее о структуре html-документа

  • Основные элементы разметки html-документа
  • «Шапка» сайта, тег <header>
  • Основное содержимое страницы, тег <main>
  • «Подвал» сайта, тег <footer>
  • Боковая панель сайта, тег <aside>
  • Создание блоков навигации, тег <nav>
  • Создание тематических разделов, тег <section>
  • Выделение раздела для новости или статьи, тег <article>

Основные элементы разметки html-документа

Как мы уже знаем, любой html-документ содержит заголовок документа «head», предназначенный для хранения служебной информации, и тело документа «body», в котором располагается информация, предназначенная для вывода на экран пользователя. Однако с развитием языка HTML он все больше стал отвечать за логическую разметку документа, что привело к появлению ряда новых тегов и сформированных ими элементов: «header», <main>, «footer», «aside», «nav», «section», «article» (см. пример. №1). Все они находятся в теле документа и по необходимости делят его на логические блоки, которые соответствующим образом воспринимаются поисковыми машинами. Отметим, что своих атрибутов, за исключением глобальных, данные элементы не имеют, а браузеры по умолчанию отображают их, как блочные элементы.

HTML htmlCodes

<!-- Указываем тип документа -->
<!DOCTYPE html>
<!-- Начало документа --> 
<html>
<!-- Раздел служебной информации -->
<head>
	<!--  Соощаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Задаем базовый адрес текущего документа -->
	<base href="http://fruits.comm/">
	<!-- Заголовок страницы -->
	<title>Все о яблоках</title>
	<!-- Подключаем таблицу стилей CSS -->
	<link href="css/styles.
 
 css" rel="stylesheet">
	<!-- Подключаем внешний js-скрипт -->
	<script src="javascript/scripts.js"></script>
</head>
<!-- Тело документа -->
<body>
		
<!-- -------------- Шапка сайта ----------------------- -->
<header>
	
	<!-- Имя сайта делаем заголовком верхнего уровня -->
	<h2>fruits.comm</h2>
	
	<!-- Другое содержимое шапки сайта  -->
	Логотип, поисковая панель и др. информация		
	
	<!--  Панель навигации по сайту  -->
	<nav> 
		<!-- Ссылки на страницы сайта -->
		<a href="apples.html">Яблоки</a>
		<a href="oranges.html">Апельсины</a>
	</nav>
	
</header> 
		
<!-- -------- Боковая панель -------------------- -->
<aside>
	
	<div>
		Например, 1-й блок для сопутствующей рекламы.
	</div>
	
	<div>
		Например, 2-й блок для сопутствующей рекламы.
	</div>
	
</aside>
<!-- ----------- Уникальный контент страницы -------------- -->
<main>
	
	<!-- Делаем разметку для статьи о яблоках -->		
	<article>
		
		<!-- Собственная шапка -->
		<header>
			<!-- Задаем собственный заголовок 2-го уровня -->
			<h3>Красные или зеленые яблоки?</h3>
			
			<!-- Внутренняя навигация по статье -->
			<nav>
				<ul>
					<li><a href="#red_apples">О красных сортах яблок</a></li>
					<li><a href="#green_apples">О зеленых сортах яблок</a></li>
				</ul>
			</nav>
		</header>
		
		<!-- ----------- 1-й раздел статьи ---------- -->
		<section>
			<!-- Задаем собственный заголовок 3-го уровня -->
			<h4>О красных сортах яблок</h4>
			<p>
				Не для кого не секрет, что красные сорта яблок.
 
 
 ..
			</p>
		</section>
		
		<!-- ---------- 2-й раздел статьи ----------- -->
		<section>
			<!-- Задаем собственный заголовок 3-го уровня -->
			<h4>О зеленых сортах яблок</h4>
			<p>
				Зеленые сорта яблок...
			</p>
		</section>
				
		<!-- ---------- «Подвал» всей статьи ----------------------- -->
		<footer>
			
			<p>
				Дата публикации: <time datetime="2015-05-15 19:00">15 мая</time>
     		</p>
			
			<!-- Информация об авторе -->
			<address>
				Автор: Иванов Иван Иванович<br>
				Тел. +375-444-44-44 (до 23-00)
			</address> 
		</footer>
	</article>
	
	<!-- ... и другие статьи, например, о пирогах с яблоками -->
	
</main>
<!-- ---------- «Подвал» сайта ----------------------- -->
<footer>
	<!-- Информация о владельце -->
	<address>Петр Романовский, Минск, 2016-2099.</address> 
</footer>
	
</body>
</html>

Пример №1. Использование элементов структурной разметки

«Шапка» сайта, тег <header>

Элемент «header» формируется парным тегом <header> (от англ. header – шапка, верхний колонтитул) и устанавливает шапку веб-страницы или раздела. Если он выступает в роли шапки сайта, то в нем обычно располагаются имя сайта, логотип, меню, поисковая панель или дополнительная информация (см. пример №1). Кроме того, он может формировать заголовки разделов (секций) html-страницы. Внутри данного элемента запрещается располагать элемент «main» или другой элемент «header». При этом сам элемент «header» запрещается вкладывать внутрь элементов «footer» и «address».

Основное содержимое страницы, тег <main>

Элемент «main» формируется парным тегом <main> (от англ. main – главный, основной) и предназначен для выделения основного содержимого веб-страницы (см. пример №1). На странице разрешается использовать только один элемент «main», внутри которого нужно размещать уникальную информацию текущей страницы, а не повторяющиеся разделы вроде поисковой или навигационной панели сайта. Кроме того, запрещается располагать элемент внутри элементов «header», «footer», «section», «article», «nav» или «aside».

«Подвал» сайта, тег <footer>

Для размещения сведений об авторских правах, контактной информации, даты последнего обновления документа или раздела, дополнительной навигации и прочей информации, относящейся к служебной информации всего сайта или раздела, а не к основному контенту страницы или раздела, используется элемент «footer», который формируется соответствующим парным тегом <footer> (от англ. footer – нижний колонтитул, подвал). На жаргоне веб-разработчиков элемент «footer» называют «подвалом» сайта или раздела (см. пример №1).

Боковая панель сайта.

Тег <aside>

Элемент «aside» формируется парным тегом <aside> (от англ. aside – в стороне) и устанавливает боковую панель («сайдбар») веб-страницы. Боковая панель предназначается для размещения сопутствующей, дополнительной информации, которую можно удалить без ущерба для понимания основного содержимого всей страницы или раздела, но в тоже время косвенно связанной с этим содержимым (см. пример №1). Например, боковая панель может содержать блок категорий, рубрик или ссылок по данной теме, блок ссылок на архив или может содержать рекламу, тематически связанную с содержимым страницы или раздела, или даже полноценную статью. Главное, повторимся, что удаление содержимого боковой панели не должно наносить вред пониманию основного содержимого, но вместе с тем, должно быть связано с основным содержимым. При этом не рекомендуется, хотя и допускается, использовать элемент «aside» в качестве боковой панели навигации по сайту, поскольку для этих целей существует специальный элемент «nav», который описывается в следующем пункте.

Создание блоков навигации, тег <nav>

Элемент «nav» формируется парным тегом <nav> (от англ. navigation – навигация) и применяется для создания блока навигации, ссылки которого могут указывать как на разделы самого сайта, так и на внешние ресурсы (см. пример №1). Самих блоков может быть несколько и расположены они могут быть в любом месте тела документа, за исключением элемента «address». При этом рекомендуется использовать его именно в качестве основного меню, чтобы пользователи могли с его помощью свободно перемещаться по разделам сайта. Также элемент «nav» хорошо подходит для навигации по очень большой (длинной) статье, пусть даже и расположенной на одной странице, но содержащей много разделов и заголовков различных уровней.

Создание тематических разделов, тег <section>

Для того, чтобы можно было разбить веб-страницу на тематические разделы, в HTML был введен еще один элемент разметки «section». Формируется он соответствующим парным тегом <section> (от англ. section – секция, раздел). Данные тематические разделы подразумевают, как правило, наличие собственных заголовков. В качестве тематических разделов могут выступать, например, пункты данного параграфа, главы содержимого страницы или блоки с кратким описанием разделов сайта на домашней странице (см. пример №1). Отметим, что данный элемент должен применяться для явного разделения страницы на разделы, чтобы они различались по содержанию и смыслу. Разрешается использовать одни элементы «section» внутри других.

Выделение раздела для новости или статьи, тег <article>

Элемент «article» выделяет независимый фрагмент веб-страницы, который можно отнести к статье, новости, сообщению на форуме или записи комментария. При этом содержимое элемента должно быть связано с общим содержимым страницы, но также иметь и свой собственный смысл. Формируется элемент при помощи соответствующего парного тега <article> (от англ. article – статья). В данных элементах может присутствовать собственный заголовок одного из уровней h2-h6, а также собственные локальные элементы «header», «footer», «section», «nav» или «aside» (см. пример №1). Более того, разрешается использовать одни элементы «article» внутри других.

Быстрый переход к другим страницам

  • Группировка элементов формы, теги <fieldset> и <legend>
  • Основные элементы разметки html-документа
  • Понятие файловой структуры сайта
  • Вернуться к оглавлению учебника

[HTML] — Как добавить логотип в шапку с помощью HTML и CSS

Узнайте, как создать заголовок с логотипом с помощью HTML и CSS с помощью этого примера кода.

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 2 месяца назад в HTML by Antonia

 
 напишите мне код с html и css для добавления логотипа в шапку

HTML CSS логотип заголовок дизайн

Дополнительные вопросы по кодированию в HTML

👩‍💻 Технический вопрос

Спросил 4 дня назад в HTML by Francesca

 
 Как установить атрибут ID в html-файле?

HTML Идентификационный атрибут уникальное имя

👩‍💻 Технический вопрос

Спросил 6 дней назад в HTML Рикке В.

 
 как выглядит кнопка?

HTML CSS кнопка внешний вид

👩‍💻 Технический вопрос

Спросил 6 дней назад в HTML by Katusiime

 
 как подчеркнуть заголовок

заголовок подчеркнуть доступность элементы дизайна

👩‍💻 Технический вопрос

Спросил 14 дней назад в HTML Эсме

 
 для чего нужен тег элемента "a"?

HTML якорь связь ресурс

👩‍💻 Технический вопрос

Спросил 14 дней назад в HTML Тейлор

 
 как сделать разрыв строки в html?

HTML Разрыв строки

пункт

👩‍💻 Технический вопрос

Спросил 14 дней назад в HTML Тейлор

 
 как я могу закрепить что-то в верхней части моей веб-страницы с помощью html и css?

HTML CSS свойство позиции зафиксированный заголовок

👩‍💻 Технический вопрос

Спросил 14 дней назад в HTML от Leticia

 
 как добавить текст в речь в HTML

HTML текст в речь API веб-речи JavaScript

👩‍💻 Технический вопрос

Спросил 14 дней назад в HTML Тейлор

 
 Как добавить цвет фона на всю веб-страницу с помощью html?

HTML фоновый цвет веб-страница атрибут стиля

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 15 дней назад в HTML by Refilwe

 
 для уменьшения размера изображения

HTML изображение размер снижаться CSS JavaScript

👩‍💻 Технический вопрос

Спросил 15 дней назад в HTML Рикке В.

 
 HTML-структура

HTML состав элемент метаданные заголовок тело тег

👩‍💻 Технический вопрос

Спросил 15 дней назад в HTML от Josephine

 
 почему мой текст состоит из 2 строк вместо 1?

HTML CSS текст контейнер ширина

👩‍💻 Технический вопрос

Спросил 15 дней назад в HTML by Roumina

 
 сделать текст жирным в html

HTML смелый форматирование текст

👩‍💻 Технический вопрос

Спросил 16 дней назад в HTML от Roumina

 
 как удалить точки в списке в HTML

HTML списки CSS пули стиль

👩‍💻 Технический вопрос

Спросил 16 дней назад в HTML от Настасья

 
 как создать кнопку

HTML кнопка атрибуты CSS JavaScript

👩‍💻 Технический вопрос

Спросил 16 дней назад в HTML Мария Милагрос

 
 Как заменить в HTML значение времени, которое я написал в Java

HTML JavaScript Дата заменять внутреннийHTML

👩‍💻 Технический вопрос

Спросил 16 дней назад в HTML by Eltina

 
 открыть ссылку на новой странице при нажатии

HTML связь цель новая страница

👩‍💻 Технический вопрос

Спросил 17 дней назад в HTML Лидия

 
 как использовать идентификатор

HTML ИДЕНТИФИКАТОР CSS JavaScript

👩‍💻 Технический вопрос

Спросил 17 дней назад в HTML Натина

 
 что такое упорядоченный список

HTML упорядоченный список нумерация ли тег ол тег

👩‍💻 Технический вопрос

Спросил 17 дней назад в HTML Румина

 
 как подчеркнуть текст

HTML подчеркнуть CSS текстовое украшение

👩‍💻 Технический вопрос

Спросил 18 дней назад в HTML Вера

 
 

                    <форма>
                        
                        
                    
                


хочу поместить отправку в текст

HTML форма представлять на рассмотрение CSS флексбокс

👩‍💻 Технический вопрос

Спросил 18 дней назад в HTML от Emer

 
 что делают  и 
?

HTML див охватывать группировка в соответствии блочный уровень

👩‍💻 Технический вопрос

Спросил 19 дней назад в HTML Румина

 
 разница между ul и ol в html

HTML ул ол список разница

👩‍💻 Технический вопрос

Спросил 20 дней назад в HTML Сара

 
 Разница между классом и идентификатором?

класс ИДЕНТИФИКАТОР стиль элементы атрибуты

👩‍💻 Технический вопрос

Спросил 20 дней назад в HTML Аймен

 
 как добавить кнопку в html

HTML кнопка по щелчку событие

👩‍💻 Технический вопрос

Спросил 21 день назад в HTML от Emer

 
 что делает html

HTML часовая метка разрыв строки

👩‍💻 Технический вопрос

Спросил 22 дня назад в HTML Эмер

 
 как использовать

HTML ярлык смелый текст

👩‍💻 Технический вопрос

Спросил 22 дня назад в HTML by Emer

 
 как выделить шрифт жирным шрифтом?

HTML CSS шрифт полужирный

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML автор Alessandra

 
 как сделать элемент сильным?

HTML тег сильный тег гиперссылка

👩‍💻 Технический вопрос

Спросил 24 дня назад в HTML Элизабет

 
 В чем разница между неупорядоченным списком и упорядоченным списком?

HTML неупорядоченный список заказанный список

👩‍💻 Технический вопрос

Спросил 24 дня назад в HTML Мари

 
 что такое 
 в html

HTML тег div контейнер обертка структура веб-страницы

👩‍💻 Технический вопрос

Спросил 25 дней назад в HTML от Faezeh

 
  встроенный элемент?

HTML маленький элемент встроенный элемент

👩‍💻 Технический вопрос

Спросил 25 дней назад в HTML от Фаэзех

 
 как я могу поместить текст в html без пробелов и без перехода на следующую строку?

HTML текст неразрывный пробел разрывы строк

👩‍💻 Технический вопрос

Спросил 25 дней назад в HTML Ванесса

 
 привет! что такое html-элемент «hr»?

HTML час тематическая пауза горизонтальная линейка

👩‍💻 Технический вопрос

Спросил 25 дней назад в HTML от Chelsey

 
 как сделать, чтобы выпадающий список появлялся при наведении курсора на что-то в строке меню

выпадающий список парить строка меню КСС

👩‍💻 Технический вопрос

Спросил 25 дней назад в HTML от Kristina

 
 как сделать страницу на 2 языках?

HTML CSS JavaScript двуязычный сайт

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML by Carina

 
 Как сделать текст жирным

HTML смелый сильный текст

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML Вера

 
 с использованием

HTML горизонтальное правило веб-страница графический разделитель

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML Вера

 
 для чего нужен промежуток?

HTML тег span встроенные элементы стили макет

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML Кортни