CodeGym/Corsi/Frontend SELF IT/Modello a blocchi HTML

Modello a blocchi HTML

Disponibile

9.1 Elementi a blocco

Modello a blocchi HTML — è un concetto che descrive la struttura e la visualizzazione degli elementi HTML in un documento. Aiuta gli sviluppatori a capire come gli elementi interagiscono tra di loro e come sono posizionati sulla pagina. Comprendere il modello a blocchi è importante per creare pagine web strutturate ed esteticamente gradevoli.

Il modello a blocchi HTML è composto da due tipi principali di elementi: blocchi e inline. Questi elementi giocano un ruolo chiave nella creazione del layout delle pagine web.

Elementi a blocco

HTML Tag Descrizione
<div> Contenitore principale per raggruppare altri elementi.
<p> Paragrafo di testo.
<h1><h6> Intestazioni di vari livelli.
<ul>, <ol> Liste non numerate e numerate.
<li> Elemento di lista.
<section> Contenitore semantico per una sezione del documento.
<article> Blocco di contenuto indipendente.
<aside> Contenuto correlato al contenuto principale (barra laterale).
<header> Parte introduttiva o di navigazione della pagina o sezione.
<footer> Parte inferiore della pagina o sezione.
<nav> Link di navigazione.
<main> Contenuto principale del documento.

Esempio di elemento a blocco:

HTML
<div>
  <h1>Intestazione</h1>
  <p>Questo è un paragrafo di testo all'interno di un elemento div a blocco.</p>
</div>

9.2 Elementi inline

Elementi inline (inline-level elements) occupano solo la larghezza necessaria per il loro contenuto e non iniziano su una nuova riga. Possono contenere solo elementi inline o testo. Esempi di elementi inline:

HTML Tag Descrizione
<span> Contenitore principale per raggruppare contenuti inline.
<a> Iperlink.
<strong>, <b> Evidenziazione del testo (grassetto).
<em>, <i> Evidenziazione del testo (corsivo).
<img> Inserimento di immagini.
<code> Evidenziazione del codice.
<label> Connessione tra etichetta ed elemento di un form.
<input>, <select>, <textarea> Elementi di form.

Esempio di elemento inline:

HTML
<span>Questo è un paragrafo con <strong>testo in grassetto</strong> e <em>corsivo</em>.</span>

9.3 Componenti del modello a blocchi

Componenti del modello a blocchi

Ogni elemento nel modello a blocchi può essere rappresentato come un blocco rettangolare composto dalle seguenti parti:

  • Contenuto (Content): contenuto interno dell'elemento, ad esempio testo o immagine
  • Padding: spazio tra il contenuto e il bordo dell'elemento
  • Bordo (Border): linea che circonda il padding e il contenuto
  • Margine (Margin): spazio tra il bordo dell'elemento e gli elementi adiacenti

Visualizzazione del modello a blocchi:

CSS
.element {
  width: 200px;           /* Larghezza del contenuto */
  padding: 10px;          /* Padding */
  border: 2px solid red;  /* Bordo */
  margin: 20px;           /* Margine */
}

Esempio HTML con modello a blocchi:

In questo esempio, l'elemento <div> con la classe "box" ha una larghezza di 200px, un padding di 10px, un bordo di 2px e un margine di 20px. Queste proprietà determinano come l'elemento viene visualizzato sulla pagina e interagisce con altri elementi.

CSS
.box {
  width: 200px;
  padding: 10px;
  border: 2px solid red;
  margin: 20px;
}
HTML
<div class="box">
  Questo è un esempio di modello a blocchi.
</div>
1
Compito
Frontend SELF IT,  livello 7lezione 4
Bloccato
Elemento di blocco
Elemento di blocco
1
Compito
Frontend SELF IT,  livello 7lezione 4
Bloccato
Modello a blocchi
Modello a blocchi
Commenti
  • Popolari
  • Nuovi
  • Vecchi
Devi avere effettuato l'accesso per lasciare un commento
Questa pagina non ha ancora commenti