Johdanto HTML-asetteluun

Verkkosivun suunnittelussa on tärkeää, että järjestämme verkkosivuelementit tyylikkäästi. Niiden tulisi olla helppo navigoida käyttäjälle ja yksinkertaisten. HTML-asettelu tarjoaa tavan järjestää nämä elementit hyvin jäsennellyllä tavalla. HTML-asettelu antaa erittäin hyvän ilmeen verkkosivulle ja tarjoaa myös helpon tavan suunnitella. HTML-asettelu on yksinkertainen tapa, jolla voimme suunnitella web-elementtejä yksinkertaisin HTML-tunnistein. HTML tarjoaa erilaisia ​​asetuselementtejä, joiden avulla voimme suunnitella verkkosivun eri osia.

HTML-asetteluelementit

Tässä artikkelissa näemme erilaisia ​​HTML-asetteluelementtejä ja niiden esimerkkejä. Suunnittelemme sanomalehden kaltaisen yksinkertaisen rakenteen käyttämällä näitä elementtejä.

1.

Tätä elementtiä käytetään verkkosivun otsikon määrittelemiseen. Se sisältää sivun otsikon tai jonkin logon tai ehkä johdanto-osan.

Koodi :



EduCba

Header Section



EduCba

Header Section



EduCba

Header Section

Tulos :

2.

Tämä elementti sisältää linkit valikkoluetteloon. Tämä elementti on kuin kontti eri navigointilinkeihin. Linkit ovat eri sivulla tai samalla sivulla.

Koodi :

Lisäämme navigointielementin juuri viimeisen esimerkkimme otsikon alle. Lisää osa elementtiin ja osa juuri otsikkoosan alle.


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

Tulos :

3.

Tämä elementti on kuin verkkosivun pääosa. Se voi sisältää kaikenlaista tietoa. Se voi sisältää tekstiä, kuvia jne.

4.

Kuten nimestä voi päätellä, tämä elementti sisältää sisältöä kuten kappaleen, yksityiskohtaiset kuvaukset jostakin tai kaikenlaista tietoa. Yleensä tämä on pääosa, joka sisältää tietoja verkkosivuilla.

5.

Tämä elementti määrittelee sisällön, joka tulee pääsisällön, kuten osion tai artikkelin, sivulle. Tämä tietoelementti on valinnainen, ja se sisältää yleensä lisätietoja tai mainossisällön.

Koodi :

Lisäämme kaikki nämä kolme elementtiä yhdessä navigointipalkin alle.


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

Jokin teksti



Artikkelin osa


Jotkut yksityiskohtaiset tekstit


Sivupalkin osa


Tämä sisältää staattisen osan tai jotain kuten mainosta jne.

Tulos :

6.

Tätä elementtiä käytetään näyttämään käyttäjälle verkkosivua koskevia lisätietoja. Tämä voi sisältää lisätietoja, jotka ovat käyttäjän valinnaisia. Tämä elementti tarjoaa oletuksena ominaisuuden näyttää tai piilottaa yksityiskohdat napsautettaessa.

7.

Tätä elementtiä käytetään yhdessä elementin kanssa. Piilotettavat tiedot, jotka näytetään napsautettaessa, ovat tässä tunnisteessa. Tämä elementti on yksityiskohdat-elementin sisällä.

Koodi :

Lisääkaamme yksityiskohdat elementteihin yhdessä yhteenvedon kanssa nykyisessä esimerkissämme. Lisää vain koodin alapuolelle tagin sivu-, osio- ja artikkeliosien osat.


Summary: click here to show details

Tiedot: Kun napsautat yhteenvetoelementtiä, yksityiskohdat näytetään käyttäjälle


yksityiskohdat (
marginaalikansi: 330px;
leveys: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
taustaväri: # 607d8bdb;
)
yksityiskohdat p (
fonttikoko: 18px;
)
yhteenveto (
väri valkoinen;
kirjasinkoko: 22 kuvapistettä;
)

Tulos1 : Napsauttamatta yksityiskohtia.

Output2: Kun olet napsauttanut yksityiskohtia.

8.

Jokaisella verkkosivulla on alaosassa yksi osa, jota kutsutaan alatunnisteeksi. Tätä elementtiä käytetään määrittelemään alatunnisteosa verkkosivun alaosassa. Alatunniste-osa sisältää yleensä tietoja, kuten tekijänoikeudet, vuosi, yhteystiedot jne. Tavallinen käytäntö on, että alatunniste on verkkosivuilla ja se on verkkosivun alaosassa.

Koodi :

Lisäämme alatunniste verkkosivumme alaosaan.


Footer Section


Footer Section


Footer Section

© tekijänoikeudet (vuosi)

Tulos :

Joten lopullinen koodi ja sen lähtö näyttää tältä,

Koodi:



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

Jokin teksti



Artikkelin osa


Jotkut yksityiskohtaiset tekstit


Sivupalkin osa


Tämä sisältää staattisen osan tai jotain sellaista, kuten mainosta jne.


Yhteenveto: napsauta tätä nähdäksesi yksityiskohdat

Tiedot: Kun napsautat yhteenvetoelementtiä, yksityiskohdat näytetään käyttäjälle


Alatunniste


© tekijänoikeudet (vuosi)

Tulos :

johtopäätös

Joten HTML-ulkoasuelementit ovat erittäin hyödyllisiä verkkosivun suunnittelussa. Ne auttavat kehittäjiä suunnittelemaan hyvin jäsenneltyjä verkkosivuja. HTML-asetteluelementtien oikea käyttö parantaa verkkosivujen lukukokemusta. Olemme nähneet ennen kaikkea tärkeimmät HTML-asetteluelementit yksityiskohtaisesti.

Suositellut artikkelit

Tämä on opas HTML-asetteluun. Tässä keskustellaan HTML-asetteluelementistä yksityiskohtaisesti esimerkin, koodien ja tuotoksien kanssa. Voit myös käydä läpi muiden aiheeseen liittyvien artikkeleidemme saadaksesi lisätietoja -

  1. Luo taulukot HTML-muodossa
  2. HTML-fonttityylit
  3. HTML-kuvatunnisteet
  4. HTML-kehykset
  5. HTML-esteet
  6. Aseta taustaväri HTML-muodossa esimerkillä

Luokka:

Web-kehitystyökalut