HTML elrendezés - Különböző HTML elrendezési elemek példákkal

Bevezetés a HTML elrendezésbe

A weblap tervezése során fontos, hogy a weboldal elemeit elegánsan rendezzük el. A felhasználó számára könnyen navigálhatóaknak és egyszerűeknek kell lenniük. A HTML elrendezés lehetőséget nyújt ezeknek az elemeknek a jól strukturált módon történő elrendezésére. A HTML elrendezés nagyon jó megjelenést mutat a weboldalon, és egyszerűen megkönnyíti a tervezést is. A HTML elrendezés egy egyszerű módszer, amellyel egyszerű webes elemeket tervezhetünk egyszerű HTML HTML-címkék felhasználásával. A HTML különféle elrendezési elemeket kínál, amelyek segítségével megtervezhetjük a weboldal különféle részeit.

HTML elrendezési elemek

Ebben a cikkben különféle HTML elrendezési elemeket fogunk látni példáikkal együtt. Ezen elemek felhasználásával megtervezzük az újsághoz hasonló egyszerű szerkezetet.

1.

Ez az elem a weboldal fejlécének meghatározására szolgál. Ez tartalmazza az oldal címét vagy logót, vagy esetleg egy bevezető tartalmat.

Kód :



EduCba

Header Section





EduCba

Header Section





EduCba

Header Section



Teljesítmény :

2.

Ez az elem hivatkozásokat tartalmaz a menü listához. Ez az elem olyan, mint egy tároló a különböző navigációs hivatkozásokhoz. A linkek egy másik oldalon vagy ugyanazon az oldalon lesznek.

Kód :

Adjunk hozzá egy navigációs elemet közvetlenül az utolsó példa fejlécének alá. Adjon hozzá egy elemet az elemhez és egy részét közvetlenül a fejléc alatt.


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



Teljesítmény :

3.

Ez az elem olyan, mint a weboldal fő része. Bármilyen információt tartalmazhat. Tartalmazhat szöveget, képeket stb.

4.

Ahogy a neve is sugallja, ez az elem olyan tartalmat fog tartalmazni, mint egy bekezdés, valami részletes leírás vagy bármilyen információ. Általában ez lesz a weboldalon található információkat tartalmazó fő rész.

5.

Ez az elem meghatározza azt a tartalmat, amely a fő tartalom oldalán lesz, például szakasz vagy cikk. Ez az információelem nem kötelező, és általában kiegészítő információkat vagy hirdetési tartalmat tartalmaz.

Kód :

Tegyük össze mind a három elemet a navigációs sáv alatt.


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


Néhány szöveg

Cikk rész

Néhány részletes szöveg

Oldalsó rész

Ez tartalmaz statikus részt vagy bármi hasonlót, mint a reklám stb.

Teljesítmény :

6.

Ez az elem a weboldal további részleteinek megjelenítésére szolgál a felhasználó számára. Ez további információkat tartalmazhat, amelyek a felhasználó számára opcionálisak. Ez az elem alapértelmezés szerint szolgáltatást mutat a részletek kattintással történő megjelenítéséhez vagy elrejtéséhez.

7.

Ezt az elemet az elemmel együtt használják. A rejtett és kattintással megjelenő információk ebben a címkében vannak. Ez az elem a részlet elemben lesz.

Kód :

Adjunk hozzá részletelemeket az összefoglaló elemmel együtt a jelenlegi példánkban. Csak adja hozzá az alábbi kódot a tagi oldal, rész és cikk elemek részei után.


Summary: click here to show details


Részletek: Az összefoglaló elemre kattintva a részletek megjelennek a felhasználó számára

részletek (
margin-top: 330 képpont;
szélesség: 100%;
padding-top: 10 képpont;
padding-bottom: 50px;
párnázat-bal: 15 képpont;
háttér szín: # 607d8bdb;
)
részletek p (
betűméret: 18 képpont;
)
összefoglaló (
fehér szín;
betűméret: 22 képpont;
)

1. output : a részletek elemre kattintás nélkül.

Output2: A részletek elemre kattintás után.

8.

Minden weboldal alján egy rész található, amelyet láblécnek hívnak. Ez az elem a lábléc szakasz meghatározására szolgál a weboldal alján. A lábléc rész általában információkat tartalmaz, például szerzői jogokat, évet, elérhetőségeket stb. Általános gyakorlat, ha a lábléc a weboldalakon van, és ez a weboldal alján található.

Kód :

Adjunk láblécet a weboldal alsó részéhez.


Footer Section



Footer Section



Footer Section


© Szerzői jog (év)

Teljesítmény :

Tehát a végleges kód és annak kimenete így néz ki,

Kód:



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


Néhány szöveg

Cikk rész

Néhány részletes szöveg

Oldalsó rész

Ez tartalmaz statikus részt vagy bármi hasonlót, mint a reklám stb.

Összegzés: kattintson ide a részletekért

Részletek: Az összefoglaló elemre kattintva a részletek megjelennek a felhasználó számára

Lábléc szakasz

© Szerzői jog (év)

Teljesítmény :

Következtetés

Tehát a HTML elrendezési elemek nagyon hasznosak a weboldal tervezésekor. Segítik a fejlesztőket a jól strukturált weboldalak megtervezésében. A HTML elrendezési elemek megfelelő használata javítja a weboldalak olvasási élményét. A legfontosabb HTML elrendezési elemeket a legjobban láttuk részletesen.

Ajánlott cikkek

Ez egy útmutató a HTML elrendezéshez. Itt részletesen megvitatjuk a HTML elrendezési elemet a példával, a kódokkal és a kimenetekkel. Megnézheti más kapcsolódó cikkeket is, ha többet szeretne megtudni -

1. Készítsen táblázatokat HTML-ben
2. HTML betűtípus stílusok
3. HTML képcímkék
4. HTML keretek
5. HTML blokkok
6. Állítsa be a háttér színét HTML-ben a Példa segítségével