Структура страницы HTML-макета с примером

HTML
На чтение 12 мин Просмотров 104 Опубликовано

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

HTML позволяет нам использовать несколько методов создания макетов страниц, включая использование семантических элементов HTML5, а также применение CSS для стилизации и позиционирования элементов на странице.

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

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

Содержание
  1. Элементы макета HTML
  2. Как создать шаблон документа веб-страницы в HTML?
  3. Настройте HTML-макет веб-страницы с помощью CSS
  4. HTML-макет веб-страницы с боковой панелью

Элементы макета HTML

Шаблон — это предопределенный макет веб-страницы, содержащий специальную структуру HTML, которая будет использоваться всеми страницами веб-сайта. HTML5 предоставляет несколько семантических элементов, которые определяют различные разделы веб-страницы, такие как:

  • <header> – определяет раздел заголовка для HTML-документа.
  • <nav> – Определяет набор навигационных ссылок.
  • <section> – Определяет раздел в документе.
  • <article> – определяет независимый, самодостаточный контент.
  • <aside> – определяет содержимое, находящееся отдельно от содержимого (например, боковая панель).
  • <footer> – определяет раздел нижнего колонтитула для HTML-документа.
  • <details> – определяет дополнительные сведения, которые пользователь может открывать и закрывать по своему выбору.
  • <summary> – Определяет заголовок для элемента <details>.

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

Подробнее о семантических элементах можно прочитать в главе «Элементы семантики HTML5».

Как создать шаблон документа веб-страницы в HTML?

Чтобы создать шаблон веб-страницы, нам нужно будет создать 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>&copy; 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>&copy; 2024 Scientech Easy. All rights reserved.</p>
</footer>
</body>
</html>

Вывод:

Пример структуры макета веб-страницы HTML с использованием семантических элементов и стилей CSS.

Этот 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>&copy; 2024 Scientech Easy. All rights reserved.</p>
</footer>
</body>
</html>

Вывод:

Пример структуры HTML-страницы с боковой панелью.

В этом примере кода основная область контента все еще использует макет flexbox. Мы обернули оба раздела в элемент <div> с классом content, который занимает 2/3 доступного пространства. Мы создали боковую панель с использованием семантического элемента <aside>, который занимает 1/3 доступного пространства.

Оцените статью
© 2025 Блог о разработке сайтов на HTML, CSS и Javascript
Adblock
detector