Esempi di base HTML
In questo capitolo mostreremo alcuni esempi HTML di base.
Non preoccuparti se utilizziamo 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 <html>e finisce con </html>.
La parte visibile del documento HTML è compresa tra <body>e </body>.
Esempio
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first 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 <h1>to .<h6>
<h1>definisce l'intestazione più importante. <h6>definisce l'intestazione meno importante:
Esempio
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Paragrafi HTML
I paragrafi HTML sono definiti con il <p>tag:
Esempio
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Collegamenti HTML
I link HTML sono definiti con il <a>tag:
Esempio
<a href="https://www.w3schools.com">This is a link</a>
La destinazione del collegamento è specificata hrefnell'attributo.
Gli attributi vengono utilizzati per fornire informazioni aggiuntive sugli elementi HTML.
Imparerai di più sugli attributi in un capitolo successivo.
Immagini HTML
Le immagini HTML sono definite con il <img>tag.
Il file di origine ( src), il testo alternativo ( alt),
widthe heightsono forniti come attributi:
Esempio
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Come visualizzare la sorgente HTML?
Hai mai visto una pagina Web e ti sei chiesto "Ehi! Come hanno fatto?"
Visualizza 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 CSS al volo nel pannello Elementi o Stili che si apre.