Introduktion til HTML-layout

Når vi designer en webside, er det vigtigt, at vi arrangerer websideelementerne på en elegant måde. De skal være lette at navigere efter brugeren og enkle. HTML-layout giver en måde at arrangere disse elementer på en godt struktureret måde. HTML-layout giver et meget godt udseende til websiden og giver en nem måde at designe også. HTML-layout er en enkel måde, hvorpå vi kan designe webelementer ved hjælp af enkle standard HTML-tags. HTML tilbyder forskellige layoutelementer ved hjælp af hvilke vi kan designe forskellige dele af websiden.

HTML-layoutelementer

I denne artikel vil vi se forskellige HTML-layoutelementer sammen med deres eksempler. Vi vil designe en simpel struktur, der ligner avisen ved hjælp af disse elementer.

1.

Dette element bruges til at definere overskriften på websiden. Det indeholder titlen på siden eller et eller andet logo eller måske et indledende indhold.

Kode :



EduCba

Header Section



EduCba

Header Section



EduCba

Header Section

Output :

2.

Dette element vil indeholde links til menulisten. Dette element er som en container til forskellige navigationslink. Linksne er på en anden side eller den samme side.

Kode :

Lad os tilføje et navigationselement lige under overskriften fra vores sidste eksempel. Tilføj en del i elementet og del lige under overskriftsoverskriften.


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

Output :

3.

Dette element er som hovedsektionen af ​​websiden. Det kan indeholde enhver form for information. Det kan indeholde tekst, billeder osv.

4.

Som navnet antyder, vil dette element indeholde indhold som et afsnit, enhver detaljeret beskrivelse af noget eller nogen form for information. Generelt vil dette være hoveddelen med information på en webside.

5.

Dette element definerer det indhold, der vil være ved siden af ​​hovedindholdet som sektion eller artikel. Dette informationselement er valgfrit og vil normalt indeholde yderligere oplysninger eller annonceindhold.

Kode :

Lad os tilføje alle disse tre elementer sammen under navigationslinjen.


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

Lidt tekst



Artikel Del


Noget detaljeret tekst


Sidepanel Del


Dette vil indeholde statisk del eller noget lignende reklame osv.

Output :

6.

Dette element bruges til at vise ekstra detaljer om websiden til brugeren. Dette kan indeholde yderligere oplysninger, der er valgfri for brugeren. Dette element indeholder som standard en funktion til at vise eller skjule detaljer ved at klikke på.

7.

Dette element bruges sammen med elementet. Oplysningerne, der skal skjules og vises ved klik, findes i dette tag. Dette element vil være inde i detaljerelementet.

Kode :

Lad os tilføje detaljeringselementer sammen med resumeelementet i vores eksisterende eksempel. Bare tilføj nedenstående kode efter vores side, sektion og artikelelementdele i tag.


Summary: click here to show details

Detaljer: Når du klikker på resumeelementet, vises detaljerne til brugeren


detaljer (
margin-top: 330px;
bredde: 100%;
polstring: 10px;
polstring-bund: 50px;
polstring til venstre: 15px;
baggrund-farve: # 607d8bdb;
)
detaljer p (
skriftstørrelse: 18px;
)
Resumé (
farve: hvid;
skriftstørrelse: 22px;
)

Output1 : Uden at klikke på detaljeringselementet.

Output2: Efter at have klikket på detaljeringselementet.

8.

For hver webside er der et afsnit i den nederste del af det, der er kendt som sidefod. Dette element bruges til at definere sidefodssektionen i bunden af ​​websiden. Sidefodsdelen vil normalt indeholde oplysninger som ophavsret, år, kontaktoplysninger osv. Det er en standard praksis at have en sidefod på websiderne, og det vil være i den nederste del af en webside.

Kode :

Lad os tilføje sidefod på vores webside i den nederste del.


Footer Section


Footer Section


Footer Section

© Copyright (År)

Output :

Så vores endelige kode og dens output vil se sådan ud,

Kode:



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

Lidt tekst



Artikel Del


Noget detaljeret tekst


Sidepanel Del


Dette vil indeholde statisk del eller noget lignende reklame osv.


Resume: Klik her for at vise detaljer

Detaljer: Når du klikker på resumeelementet, vises detaljerne til brugeren


Sidefodsdel


© Copyright (År)

Output :

Konklusion

Så HTML-layoutelementer er meget nyttige, når du designer websiden. De hjælper udviklere med at designe velstrukturerede websider. Brug af HTML-layoutelementer korrekt forbedrer læseoplevelsen på websider. Vi har set mest af alle de vigtigste HTML-layoutelementer i detaljer.

Anbefalede artikler

Dette er en guide til HTML-layout. Her diskuterer vi HTML Layout Element med eksemplet, koder og output i detaljer. Du kan også gennemgå vores andre relaterede artikler for at lære mere -

  1. Opret tabeller i HTML
  2. HTML-skrifttyper
  3. HTML-billedmærker
  4. HTML-rammer
  5. HTML-blokke
  6. Indstil en baggrundsfarve i HTML med eksempel

Kategori:

Webudviklingsværktøjer