Lezione: Edit pagina HTML con i principali comandi
Concetti base
Imparare a modificare una pagina HTML moderna significa conoscere i tag essenziali, l’organizzazione semantica e i principali layout utilizzati oggi come Flexbox, Grid e Responsive Design.
Struttura di una pagina HTML
<!DOCTYPE html>: definisce il tipo di documento.<html>: radice del documento.<head>: contiene i metadati (titolo, charset, link CSS, ecc).<body>: contiene il contenuto visualizzato nella pagina.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Titolo Pagina</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stile.css">
</head>
<body>
<!-- Contenuto qui -->
</body>
</html>
Tag principali
<header>: intestazione della pagina o di una sezione.<nav>: contenitore per la navigazione.<main>: contenuto principale unico della pagina.<section>: divisione logica di contenuti correlati.<article>: contenuto indipendente.<aside>: contenuti aggiuntivi o secondari.<footer>: piè di pagina.
Layout moderno: Flexbox
Descrizione: sistema per creare layout flessibili e responsivi.
- Proprietà container:
display: flex;,flex-direction,justify-content,align-items - Proprietà item:
flex-grow,flex-shrink,flex-basis
<div class="contenitore">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
</div>
.contenitore {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
Layout moderno: CSS Grid
Descrizione: sistema per griglie bidimensionali, molto utile per layout complessi.
- Proprietà container:
display: grid;,grid-template-columns,grid-template-rows,gap - Proprietà item:
grid-column,grid-row
<div class="grid-container">
<div>Area 1</div>
<div>Area 2</div>
<div>Area 3</div>
<div>Area 4</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto;
gap: 16px;
}
Responsive Design: Media Queries
Descrizione: permette di adattare il layout agli schermi di diversa larghezza.
@media (max-width: 600px) {
.contenitore, .grid-container {
flex-direction: column;
grid-template-columns: 1fr;
}
}
Scheda rapida sintesi
- Dichiarazione documento:
<!DOCTYPE html> - Struttura base:
<html>,<head>,<body> - Tag semantici:
<header>,<nav>,<main>,<section>,<article>,<aside>,<footer> - Layouts CSS moderni: Flexbox, Grid
- Responsive design con media queries
Comments are closed