Elemente și Tehnici de Layout HTML
Site-urile web afișează adesea conținut în mai multe coloane, precum o revistă sau un ziar.
Elemente de Layout HTML
HTML are mai multe elemente semantice care marchează părțile unei pagini: <header> (un antet pentru un document sau o secțiune), <nav> (un set de linkuri de navigare), <section> (o secțiune), <article> (conținut independent și de sine stătător), <aside> (conținut din lateral, precum o bară laterală), <footer> (un subsol), <details> (detalii suplimentare pe care utilizatorul le poate deschide și închide), și <summary> (un titlu pentru <details>). Poți citi mai multe în capitolul HTML Semantics.
Tehnici de Layout HTML
Există patru moduri comune de a crea aspecte cu mai multe coloane, fiecare cu avantaje și dezavantaje: framework-uri CSS, proprietatea CSS float, CSS flexbox și CSS grid.
Framework-uri CSS
Pentru a construi rapid un aspect, poți folosi un framework CSS precum Bootstrap.
Layout CSS cu Float
Poți construi aspecte întregi cu proprietatea CSS float. Float este ușor de învățat; trebuie doar să știi cum funcționează float și clear. Dezavantaj: elementele plutitoare sunt legate de fluxul documentului, ceea ce poate reduce flexibilitatea.
Exemplu
Un aspect cu mai multe coloane construit cu float.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.nav {
float: left;
width: 30%;
background: #ccc;
padding: 20px;
}
.main {
float: left;
width: 70%;
padding: 20px;
}
.footer {
clear: both;
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Orașe</h1>
</div>
<div class="nav">
<ul>
<li><a href="#">Londra</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</div>
<div class="main">
<h1>Londra</h1>
<p>Londra este capitala Angliei. Este cel mai populat oraș din Regatul Unit, cu o zonă metropolitană de peste 13 milioane de locuitori.</p>
<p>Situată pe râul Tamisa, Londra a fost o așezare importantă timp de două milenii, istoria sa datând de la fondarea de către romani, care au numit-o Londinium.</p>
</div>
<div class="footer">
<p>Subsol</p>
</div>
</body>
</html>
Layout CSS cu Flexbox
Flexbox face ca elementele să se comporte previzibil atunci când aspectul trebuie să se adapteze la dimensiuni și dispozitive diferite.
Exemplu
Același aspect construit cu flexbox.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.row {
display: flex;
}
.nav {
flex: 30%;
background: #ccc;
padding: 20px;
}
.main {
flex: 70%;
padding: 20px;
}
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Orașe</h1>
</div>
<div class="row">
<div class="nav">
<ul>
<li><a href="#">Londra</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</div>
<div class="main">
<h1>Londra</h1>
<p>Londra este capitala Angliei. Este cel mai populat oraș din Regatul Unit, cu o zonă metropolitană de peste 13 milioane de locuitori.</p>
<p>Situată pe râul Tamisa, Londra a fost o așezare importantă timp de două milenii, istoria sa datând de la fondarea de către romani, care au numit-o Londinium.</p>
</div>
</div>
<div class="footer">
<p>Subsol</p>
</div>
</body>
</html>
Layout CSS cu Grid
Modulul de aspect CSS Grid oferă un sistem de tip grilă din rânduri și coloane, facilitând proiectarea paginilor fără float-uri sau poziționare. Poți afla mai multe în capitolul CSS Grid.