HTML #1 Titoli, Paragrafi, Liste, Immagini, Ritorni a capo

Obiettivo: Realizzare una pagina HTML che preveda l’utilizzo dei tag principali per inserire Titoli, Paragrafi, Liste, Immagini e Ritorni a capo.

La pagina HTML

HTML, acronimo di HyperText Markup Language, è il linguaggio di markup standard utilizzato per la creazione e la strutturazione di pagine web. È uno dei componenti fondamentali del World Wide Web ed è essenziale per la visualizzazione di contenuti su Internet. HTML si basa su un sistema di marcatura che utilizza una serie di tag per definire la struttura e il significato del contenuto all’interno di una pagina web. Questi tag forniscono istruzioni al browser su come presentare e organizzare il contenuto, consentendo agli sviluppatori di creare pagine web complesse e interattive.
I tag HTML sono elementi fondamentali del linguaggio di markup. Ogni tag è racchiuso tra parentesi angolari < > e può contenere attributi che forniscono informazioni aggiuntive sul tag stesso. Gli attributi forniscono informazioni aggiuntive sui tag e sui loro comportamenti. Ad esempio, l’attributo src dell’elemento specifica l’URL dell’immagine da visualizzare.

I Principali Tag

  • Il tag <h1> in HTML viene utilizzato per definire il titolo principale di una pagina web. È il titolo di livello più alto e di solito viene visualizzato con una dimensione del carattere più grande rispetto agli altri elementi del testo sulla pagina.
  • Il tag <h2> in HTML viene utilizzato per definire un titolo di secondo livello all’interno di una pagina web. È utilizzato per indicare una sezione o un sotto-titolo all’interno di un contesto più ampio rispetto al tag <h1>
  • Il tag <h3> in HTML viene utilizzato per definire un titolo di terzo livello all’interno di una pagina web. Viene utilizzato per indicare una sezione o un sotto-sottotitolo all’interno di un contesto più specifico rispetto al tag <h2>
  • Il tag <p> in HTML viene utilizzato per definire un paragrafo di testo all’interno di una pagina web. Questo tag è essenziale per organizzare e strutturare il contenuto testuale in paragrafi separati.
  • Il tag <ol> in HTML viene utilizzato per creare una lista ordinata di elementi, mentre il tag <li> (list item) viene utilizzato all’interno del tag <ol> per definire ciascun elemento della lista.
  • Il tag <ul> in HTML viene utilizzato per creare una lista non ordinata di elementi, mentre il tag <li> (list item) viene utilizzato all’interno del tag <ul> per definire ciascun elemento della lista.
  • Il tag <br> in HTML viene utilizzato per inserire un’interruzione di linea, cioè una nuova riga, all’interno di un documento HTML. Questo tag non ha un tag di chiusura (<br>) poiché è un tag vuoto, il che significa che non contiene contenuti o testo.
  • Il tag <img> in HTML viene utilizzato per inserire un’immagine all’interno di una pagina web. Questo tag è un elemento vuoto, il che significa che non ha un tag di chiusura e non contiene alcun contenuto. Questo tag prevede una serie di attributi quali: l’attributo src specifica l’URL o il percorso del file dell’immagine da visualizzare, l’attributo alt fornisce un testo alternativo che viene mostrato se l’immagine non può essere visualizzata, l’attributo width che fornisce indicazioni in merito alla grandezza dell’immagine, l’attributo height che fornisce indicazioni in merito alla altezza dell’immagine.
    .

Il codice

Viene in seguito riportato il codice di una ipotetica pagina web statica.



Figura: Esempio della pagina creata

Esercizio:

Realizzare il sito di una semplice ricetta che preveda la seguente struttura

  • Titolo
  • Immagine
  • Descrizione della ricetta
  • Lista degli ingredienti
  • Procedimento