HTML-макет относится к расположению и структуре элементов на веб-странице. Он определяет общую структуру и визуальное представление веб-страницы. Он включает в себя различные элементы HTML, такие как заголовки, абзацы, изображения, навигационные меню и другой контент, чтобы определить различные разделы веб-страницы.
HTML позволяет нам использовать несколько методов создания макетов страниц, включая использование семантических элементов HTML5, а также применение CSS для стилизации и позиционирования элементов на странице.
HTML5 — это последняя версия HTML, которая вводит несколько новых элементов, таких как заголовок, навигация, основной и нижний колонтитулы, чтобы лучше определить различные разделы веб-страницы. Они известны как структурные элементы, поскольку определяют общую структуру веб-страницы.
Эти новые элементы также считаются семантическими элементами HTML5, поскольку они предоставляют значение для содержимого тегов. Например, <header> является семантическим элементом, поскольку он определяет содержимое, которое отображается в верхней части веб-страницы. Название и назначение тега <header> отражают его значение.
Элементы макета HTML
Шаблон — это предопределенный макет веб-страницы, содержащий специальную структуру HTML, которая будет использоваться всеми страницами веб-сайта. HTML5 предоставляет несколько семантических элементов, которые определяют различные разделы веб-страницы, такие как:
- <header> – определяет раздел заголовка для HTML-документа.
- <nav> – Определяет набор навигационных ссылок.
- <section> – Определяет раздел в документе.
- <article> – определяет независимый, самодостаточный контент.
- <aside> – определяет содержимое, находящееся отдельно от содержимого (например, боковая панель).
- <footer> – определяет раздел нижнего колонтитула для HTML-документа.
- <details> – определяет дополнительные сведения, которые пользователь может открывать и закрывать по своему выбору.
- <summary> – Определяет заголовок для элемента <details>.
Эти семантические элементы помогают определить четкую структуру HTML-документов, делая их более понятными как для веб-разработчиков, так и для поисковых систем.
Подробнее о семантических элементах можно прочитать в главе «Элементы семантики HTML5».
Как создать шаблон документа веб-страницы в HTML?
Чтобы создать шаблон веб-страницы, нам нужно будет создать HTML-документ с семантическими элементами HTML, которые будут определять структуру макета веб-страницы. Простой и базовый макет веб-страницы в HTML показан на рисунке ниже.
Структура HTML-кода:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Webpage Layout</title>
<meta charset="utf-8">
</head>
<body>
<header>
<!--Place the header content here, such as company name or logo.-->
</header>
<nav>
<!--Place webpage links in this section.-->
</nav>
<main>
<!--Place the main content of the webpage in this area.-->
</main>
<footer>
<!--Place the footer information within section-->
</footer>
</body>
</html>
Пример 1:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML Webpage Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>Scientech Easy</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Us</h2>
<p>Scientech Easy is the best learning platform designed to cater to both beginners and professionals. Our primary goal is to provide a unique learning experience that's not only informative but also engaging and enjoyable. We make tons of efforts to make the learning process easy and fun with real-time examples, practical scenarios, and various programs based on concepts.</p>
</section>
<section>
<h2>Our Services</h2>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Software Training</li>
<li>SEO</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 Scientech Easy. All rights reserved.</p>
</footer>
</body>
</html>
Настройте HTML-макет веб-страницы с помощью CSS
Давайте настроим приведенный выше пример кода с помощью правил стиля CSS, который определяет простую компоновку веб-страницы HTML.
Пример 2:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Basic HTML Webpage Layout</title>
<!-- Meta tag for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* CSS styles for the webpage layout */body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
main {
padding: 20px;
}
section {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}
</style>
</head>
<body>
<!-- Header section -->
<header>
<h1>Scientech Easy</h1>
<!-- Navigation section -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Us</h2>
<p>Scientech Easy is the best learning platform designed to cater to both beginners and professionals. Our primary goal is to provide a unique learning experience that's not only informative but also engaging and enjoyable. We make tons of efforts to make the learning process easy and fun with real-time examples, practical scenarios, and various programs based on concepts.</p>
</section>
<section>
<h2>Our Services</h2>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Software Training</li>
<li>SEO</li>
</ul>
</section>
</main>
<!-- Footer section -->
<footer>
<p>© 2024 Scientech Easy. All rights reserved.</p>
</footer>
</body>
</html>
Вывод:
Этот HTML-код представляет собой базовый макет веб-страницы с заголовком, панелью навигации, областью основного контента и нижним колонтитулом. Давайте разберемся с объяснением каждой части структуры кода:
(1) <!DOCTYPE html>
: это объявление указывает на использование версии HTML, в данном случае HTML5.
(2) <html lang="en">
: это начальный тег HTML с атрибутом lang, который представляет корневой элемент документа HTML, содержащий все остальные элементы HTML.
(3) <head>
: это начальный тег заголовка, который содержит метаинформацию о документе HTML, такую как заголовок страницы и любые внешние ресурсы, такие как таблицы стилей или скрипты.
(4) <title>
: этот элемент внутри раздела head задает заголовок веб-страницы, который отображается в строке заголовка или на вкладке браузера.
(5) <meta name="viewport" content="width=device-width, initial-scale=1">
: Метатег задает свойства области просмотра для адаптивного дизайна веб-страницы, обеспечивая правильное масштабирование на разных устройствах.
(6) <style>
: это начальный тег стиля, который содержит правила CSS (каскадные таблицы стилей) для стилизации элементов HTML-документа.
(7) <body>
: это начальный тег body, который охватывает основное содержимое веб-страницы, включая заголовки, абзацы, изображения, ссылки и т. д.
(8) <header>
: Это тег заголовка, который определяет область заголовка веб-страницы. Обычно он содержит название сайта, логотип и основные навигационные ссылки.
(9) <nav>
: Это навигационный элемент, который структурно определяет область навигации веб-страницы. Он в основном содержит панель навигации или меню веб-страницы.
(10) <ul>
и <li>
: эти элементы используются для создания неупорядоченного списка навигационных ссылок.
(11) <main>
: Это начальный основной тег, который структурно определяет основную область контента веб-страницы, где отображается основной контент. Здесь основная область контента использует макет flexbox.
(12) <section>
: этот элемент определяет раздел в области основного контента, обычно используемый для группировки связанного контента.
(13) <footer>
: это начальный тег нижнего колонтитула, который представляет собой раздел нижнего колонтитула веб-страницы, содержащий информацию об авторских правах, контактные данные или другую соответствующую информацию.
В этом примере HTML-кода мы создали простой макет веб-страницы с семантическими элементами HTML5, такими как <header>, <nav>, <main>, <section>,<footer>, а также некоторыми правилами стилей CSS для улучшения визуального представления веб-страницы.
HTML-макет веб-страницы с боковой панелью
Давайте рассмотрим пример, в котором мы добавим боковую панель в приведенный выше макет структуры страницы.
Пример 2:
<!DOCTYPE html>
<html>
<head>
<title>Example of Basic HTML Webpage Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
main {
display: flex; /* Use flexbox for layout */ padding: 20px;
}
.content {
flex: 2; /* 2/3 of the main content area */}
.sidebar {
flex: 1; /* 1/3 of the main content area */background-color: #f9f9f9;
padding: 20px;
margin-left: 20px;
}
section {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Scientech Easy</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
</header>
<main>
<div class="content">
<section>
<h2>About Us</h2>
<p>Scientech Easy is the best learning platform designed to cater to both beginners and professionals.</p>
</section>
<section>
<h2>Our Services</h2>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Software Training</li>
<li>SEO</li>
</ul>
</section>
</div>
<aside class="sidebar">
<h2>Latest Updates</h2>
<ul>
<li>New Course Launched</li>
<li>Upcoming Webinar</li>
<li>Technical Blog Post</li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 Scientech Easy. All rights reserved.</p>
</footer>
</body>
</html>
Вывод:
В этом примере кода основная область контента все еще использует макет flexbox. Мы обернули оба раздела в элемент <div> с классом content, который занимает 2/3 доступного пространства. Мы создали боковую панель с использованием семантического элемента <aside>, который занимает 1/3 доступного пространства.