03 – Esempi di base HTML

In questo capitolo mostrerò alcuni esempi HTML di base.
Non preoccuparti se utilizzerò tag che non hai ancora imparato.

Documenti HTML

Tutti i documenti HTML devono iniziare con una dichiarazione del tipo di documento: <!DOCTYPE html>.
Il documento HTML stesso inizia con <html> e termina con </html>.
La parte visibile del documento HTML è compresa tra <body> e </body>.

Esempio

<!DOCTYPE html>
<html>
<body>

<h1>Il mio primo Titolo "Heading"</h1>
<p>Il mio primo paragrafo "paragraph".</p>

</body>
</html> 

La dichiarazione <!DOCTYPE>

La <!DOCTYPE> dichiarazione rappresenta il tipo di documento e aiuta i browser a visualizzare correttamente le pagine web.

Deve apparire solo una volta, nella parte superiore della pagina (prima di qualsiasi tag HTML).

La <!DOCTYPE> dichiarazione non fa distinzione tra maiuscole e minuscole.

La <!DOCTYPE> dichiarazione per HTML5 è:

<!DOCTYPE html>

Intestazioni HTML

Le intestazioni HTML sono definite con i tag da <h1> a <h6>.

<h1> definisce l’intestazione più importante. <h6> definisce l’intestazione meno importante:

Esempio

<h1>Questo è un Titolo "heading" 1</h1>
<h2>Questo è un Titolo "heading" 2</h2>
<h3>Questo è un Titolo "heading" 3</h3> 
<h4>Questo è un Titolo "heading" 4</h4>
<h5>Questo è un Titolo "heading" 5</h5>
<h6>Questo è un Titolo "heading" 6</h5>

Paragrafi HTML

I paragrafi HTML sono definiti con il <p> tag:

Esempio

<p>Queto è un paragrafo "paragraph".</p>
<p>Queto è un altro paragrafo "paragraph".</p>
<p>Queto è un altro paragrafo "paragraph".</p>  

Collegamenti HTML

I collegamenti HTML sono definiti con il <a> tag:

Esempio

<a href="https://www.google.com">Questo è un link</a> 

La destinazione del collegamento è specificata nell’attributo href
Gli attributi vengono utilizzati per fornire informazioni aggiuntive sugli elementi HTML.
Imparerai di più sugli attributi nei capitolo dedicato.


Immagini HTML

Le immagini HTML sono definite con il <img> tag.
Il file sorgente (src), il testo alternativo (alt), width ‘larghezza’ e height 'altezza' sono forniti come attributi:

Esempio

<img src="image.jpg" alt="image.com" width="100" height="140"> 

Come visualizzare la sorgente HTML

Hai mai visto una pagina Web e ti sei chiesto “Ehi! Come hanno fatto per crearla?”


Visualizza il codice sorgente HTML:

Fai clic con il pulsante destro del mouse su una pagina HTML e seleziona “Visualizza sorgente pagina” (in Chrome) o “Visualizza sorgente” (in Edge) o simili in altri browser.
Si aprirà una finestra contenente il codice sorgente HTML della pagina.


Ispeziona un elemento HTML:

Fai clic con il pulsante destro del mouse su un elemento (o su un’area vuota) e scegli “Ispeziona” o “Ispeziona elemento” per vedere di cosa sono composti gli elementi (vedrai sia l’HTML che il CSS).
Puoi anche modificare l’HTML o il CSS al volo nel pannello Elementi o Stili che si apre.

Pubblicato da Luca Bocaletto

Sviluppatore, Creatore, Musicista, Artista, Radiantista, Scacchista.