Введение в макет HTML

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

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

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

1.

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

Код :



EduCba

Header Section



EduCba

Header Section



EduCba

Header Section

Выход :

2.

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

Код :

Давайте добавим элемент навигации чуть ниже заголовка из нашего последнего примера. Добавьте деталь в элемент, а деталь чуть ниже заголовка.


li(
display: inline-flex;
padding: 25px
)
ul(
text-align: center;
)


Navigation Link1
Navigation Link2
Navigation Link3


    li(
    display: inline-flex;
    padding: 25px
    )
    ul(
    text-align: center;
    )


    Navigation Link1
    Navigation Link2
    Navigation Link3

  • li(
    display: inline-flex;
    padding: 25px
    )
    ul(
    text-align: center;
    )


    Navigation Link1
    Navigation Link2
    Navigation Link3


    • li(
    display: inline-flex;
    padding: 25px
    )
    ul(
    text-align: center;
    )


    Navigation Link1
    Navigation Link2
    Navigation Link3

  • li(
    display: inline-flex;
    padding: 25px
    )
    ul(
    text-align: center;
    )


    Navigation Link1
    Navigation Link2
    Navigation Link3


    • li(
    display: inline-flex;
    padding: 25px
    )
    ul(
    text-align: center;
    )


    Navigation Link1
    Navigation Link2
    Navigation Link3

  • li(
    display: inline-flex;
    padding: 25px
    )
    ul(
    text-align: center;
    )


    Navigation Link1
    Navigation Link2
    Navigation Link3


    • li(
    display: inline-flex;
    padding: 25px
    )
    ul(
    text-align: center;
    )


    Navigation Link1
    Navigation Link2
    Navigation Link3


li(
display: inline-flex;
padding: 25px
)
ul(
text-align: center;
)


Navigation Link1
Navigation Link2
Navigation Link3

Выход :

3.

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

4.

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

5.

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

Код :

Давайте добавим все эти три элемента вместе под панелью навигации.


li ( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8b70;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8b99;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #9c27b0;
)
ul(
text-align: center;
)


Section Part


li ( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8b70;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8b99;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #9c27b0;
)
ul(
text-align: center;
)


Section Part


li ( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8b70;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8b99;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #9c27b0;
)
ul(
text-align: center;
)


Section Part

Некоторый текст



Часть статьи


Некоторый подробный текст


Часть боковой панели


Это будет содержать статическую часть или что-то вроде рекламы и т. Д.

Выход :

6.

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

7.

Этот элемент используется вместе с элементом. Информация, которая должна быть скрыта и будет отображаться при нажатии, будет в этом теге. Этот элемент будет внутри элемента details.

Код :

Давайте добавим элементы details вместе с элементом summary в нашем существующем примере. Просто добавьте приведенный ниже код после нашей части, секции и элемента article в теге.


Summary: click here to show details

Детали: После нажатия на элемент сводки, детали будут показаны пользователю


Детали (
margin-top: 330px;
ширина: 100%;
padding-top: 10px;
нижний слой: 50 пикселей;
отступ слева: 15 пикселей;
цвет фона: # 607d8bdb;
)
детали р (
размер шрифта: 18 пикселей;
)
резюме (
цвет белый;
размер шрифта: 22 пикселя;
)

Выход 1 : без нажатия на элемент подробностей.

Выход 2: После нажатия на элемент подробностей.

8.

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

Код :

Давайте добавим нижний колонтитул на нашей веб-странице в нижней части.


Footer Section


Footer Section


Footer Section

© Авторское право (год)

Выход :

Таким образом, наш конечный код и его вывод будут выглядеть так,

Код:



EduCba
li( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8bc7;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8bde;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #fff;
)
ul(
text-align: center;
)
details (
margin-top: 330px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
background-color: #607d8bdb;
)
details p (
font-size: 18px;
)
summary (
color: white;
font-size: 22px;
)


Header Section

Navigation Link1
Navigation Link2
Navigation Link3


Section Part



EduCba
li( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8bc7;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8bde;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #fff;
)
ul(
text-align: center;
)
details (
margin-top: 330px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
background-color: #607d8bdb;
)
details p (
font-size: 18px;
)
summary (
color: white;
font-size: 22px;
)


Header Section

Navigation Link1
Navigation Link2
Navigation Link3


Section Part



EduCba
li( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8bc7;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8bde;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #fff;
)
ul(
text-align: center;
)
details (
margin-top: 330px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
background-color: #607d8bdb;
)
details p (
font-size: 18px;
)
summary (
color: white;
font-size: 22px;
)


Header Section

Navigation Link1
Navigation Link2
Navigation Link3


Section Part


    EduCba
    li( display: inline-flex;
    padding: 25px
    )
    section(
    background-color: #607D8B;
    width: 79%;
    position: absolute;
    height: 150px;
    )
    article(
    width: 79%;
    background-color: #607d8bc7;
    position: absolute;
    top: 368px;
    height: 150px;
    )
    aside(
    background-color: #607d8bde;
    width: 20%;
    position: absolute;
    left: 80%;
    height: 300px;
    )
    h2, p (
    text-align: center;
    color: #fff;
    )
    ul(
    text-align: center;
    )
    details (
    margin-top: 330px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 50px;
    padding-left: 15px;
    background-color: #607d8bdb;
    )
    details p (
    font-size: 18px;
    )
    summary (
    color: white;
    font-size: 22px;
    )


    Header Section

    Navigation Link1
    Navigation Link2
    Navigation Link3


    Section Part


  • EduCba
    li( display: inline-flex;
    padding: 25px
    )
    section(
    background-color: #607D8B;
    width: 79%;
    position: absolute;
    height: 150px;
    )
    article(
    width: 79%;
    background-color: #607d8bc7;
    position: absolute;
    top: 368px;
    height: 150px;
    )
    aside(
    background-color: #607d8bde;
    width: 20%;
    position: absolute;
    left: 80%;
    height: 300px;
    )
    h2, p (
    text-align: center;
    color: #fff;
    )
    ul(
    text-align: center;
    )
    details (
    margin-top: 330px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 50px;
    padding-left: 15px;
    background-color: #607d8bdb;
    )
    details p (
    font-size: 18px;
    )
    summary (
    color: white;
    font-size: 22px;
    )


    Header Section

    Navigation Link1
    Navigation Link2
    Navigation Link3


    Section Part


    • EduCba
    li( display: inline-flex;
    padding: 25px
    )
    section(
    background-color: #607D8B;
    width: 79%;
    position: absolute;
    height: 150px;
    )
    article(
    width: 79%;
    background-color: #607d8bc7;
    position: absolute;
    top: 368px;
    height: 150px;
    )
    aside(
    background-color: #607d8bde;
    width: 20%;
    position: absolute;
    left: 80%;
    height: 300px;
    )
    h2, p (
    text-align: center;
    color: #fff;
    )
    ul(
    text-align: center;
    )
    details (
    margin-top: 330px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 50px;
    padding-left: 15px;
    background-color: #607d8bdb;
    )
    details p (
    font-size: 18px;
    )
    summary (
    color: white;
    font-size: 22px;
    )


    Header Section

    Navigation Link1
    Navigation Link2
    Navigation Link3


    Section Part


  • EduCba
    li( display: inline-flex;
    padding: 25px
    )
    section(
    background-color: #607D8B;
    width: 79%;
    position: absolute;
    height: 150px;
    )
    article(
    width: 79%;
    background-color: #607d8bc7;
    position: absolute;
    top: 368px;
    height: 150px;
    )
    aside(
    background-color: #607d8bde;
    width: 20%;
    position: absolute;
    left: 80%;
    height: 300px;
    )
    h2, p (
    text-align: center;
    color: #fff;
    )
    ul(
    text-align: center;
    )
    details (
    margin-top: 330px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 50px;
    padding-left: 15px;
    background-color: #607d8bdb;
    )
    details p (
    font-size: 18px;
    )
    summary (
    color: white;
    font-size: 22px;
    )


    Header Section

    Navigation Link1
    Navigation Link2
    Navigation Link3


    Section Part


    • EduCba
    li( display: inline-flex;
    padding: 25px
    )
    section(
    background-color: #607D8B;
    width: 79%;
    position: absolute;
    height: 150px;
    )
    article(
    width: 79%;
    background-color: #607d8bc7;
    position: absolute;
    top: 368px;
    height: 150px;
    )
    aside(
    background-color: #607d8bde;
    width: 20%;
    position: absolute;
    left: 80%;
    height: 300px;
    )
    h2, p (
    text-align: center;
    color: #fff;
    )
    ul(
    text-align: center;
    )
    details (
    margin-top: 330px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 50px;
    padding-left: 15px;
    background-color: #607d8bdb;
    )
    details p (
    font-size: 18px;
    )
    summary (
    color: white;
    font-size: 22px;
    )


    Header Section

    Navigation Link1
    Navigation Link2
    Navigation Link3


    Section Part


  • EduCba
    li( display: inline-flex;
    padding: 25px
    )
    section(
    background-color: #607D8B;
    width: 79%;
    position: absolute;
    height: 150px;
    )
    article(
    width: 79%;
    background-color: #607d8bc7;
    position: absolute;
    top: 368px;
    height: 150px;
    )
    aside(
    background-color: #607d8bde;
    width: 20%;
    position: absolute;
    left: 80%;
    height: 300px;
    )
    h2, p (
    text-align: center;
    color: #fff;
    )
    ul(
    text-align: center;
    )
    details (
    margin-top: 330px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 50px;
    padding-left: 15px;
    background-color: #607d8bdb;
    )
    details p (
    font-size: 18px;
    )
    summary (
    color: white;
    font-size: 22px;
    )


    Header Section

    Navigation Link1
    Navigation Link2
    Navigation Link3


    Section Part


    • EduCba
    li( display: inline-flex;
    padding: 25px
    )
    section(
    background-color: #607D8B;
    width: 79%;
    position: absolute;
    height: 150px;
    )
    article(
    width: 79%;
    background-color: #607d8bc7;
    position: absolute;
    top: 368px;
    height: 150px;
    )
    aside(
    background-color: #607d8bde;
    width: 20%;
    position: absolute;
    left: 80%;
    height: 300px;
    )
    h2, p (
    text-align: center;
    color: #fff;
    )
    ul(
    text-align: center;
    )
    details (
    margin-top: 330px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 50px;
    padding-left: 15px;
    background-color: #607d8bdb;
    )
    details p (
    font-size: 18px;
    )
    summary (
    color: white;
    font-size: 22px;
    )


    Header Section

    Navigation Link1
    Navigation Link2
    Navigation Link3


    Section Part


EduCba
li( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8bc7;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8bde;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #fff;
)
ul(
text-align: center;
)
details (
margin-top: 330px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
background-color: #607d8bdb;
)
details p (
font-size: 18px;
)
summary (
color: white;
font-size: 22px;
)


Header Section

Navigation Link1
Navigation Link2
Navigation Link3


Section Part



EduCba
li( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8bc7;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8bde;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #fff;
)
ul(
text-align: center;
)
details (
margin-top: 330px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
background-color: #607d8bdb;
)
details p (
font-size: 18px;
)
summary (
color: white;
font-size: 22px;
)


Header Section

Navigation Link1
Navigation Link2
Navigation Link3


Section Part



EduCba
li( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8bc7;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8bde;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #fff;
)
ul(
text-align: center;
)
details (
margin-top: 330px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
background-color: #607d8bdb;
)
details p (
font-size: 18px;
)
summary (
color: white;
font-size: 22px;
)


Header Section

Navigation Link1
Navigation Link2
Navigation Link3


Section Part

Некоторый текст



Часть статьи


Некоторый подробный текст


Часть боковой панели


Это будет содержать статическую часть или что-то вроде рекламы и т. Д.


Резюме: нажмите здесь, чтобы показать детали

Детали: После нажатия на элемент сводки, детали будут показаны пользователю


Раздел нижнего колонтитула


© Авторское право (год)

Выход :

Вывод

Так что элементы макета HTML очень полезны при разработке веб-страницы. Они помогают разработчикам создавать хорошо структурированные веб-страницы. Правильное использование элементов макета HTML улучшает качество чтения веб-страниц. Больше всего мы рассмотрели основные элементы макета HTML.

Рекомендуемые статьи

Это руководство по макету HTML. Здесь мы обсудим HTML Layout Element с примером, кодами и выводами подробно. Вы также можете просмотреть другие наши статьи, чтобы узнать больше -

  1. Создать таблицы в HTML
  2. Стили HTML-шрифтов
  3. HTML-теги изображений
  4. HTML-фреймы
  5. HTML блоки
  6. Установить цвет фона в HTML с примером

Категория:

Инструменты веб-разработки