Nozioni di base di HTML
In questo articolo, spieghiamo le nozioni di base di HTML.
Questo spiega i tag principali come la dichiarazione DOCTYPE, i tag <html>, <head> e <body>. Descrive anche tag, attributi e caratteri speciali.
YouTube Video
Nozioni di base di HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>All'inizio del file, dichiariamo che questo è un documento HTML5, indicando che segue le regole dell'HTML5.
-
<html>Il tag
<html>è l'elemento più esterno in un documento HTML che racchiude l'intero contenuto. Ogni file HTML contiene solo un tag<html>, e tutti gli altri tag sono annidati all'interno di questo. Illang="en"all'interno del tag<html>di apertura si chiama attributo e informa il browser che il documento è scritto in inglese. Questo aiuta a informare i lettori di schermo e i motori di ricerca della lingua del documento. -
<head>Il tag
<head>definisce i metadati (informazioni) per la pagina. Questo include il titolo della pagina, la codifica dei caratteri e le impostazioni di design responsive. Il design responsivo si riferisce a un metodo sviluppato per permettere a siti web o app di adattarsi e mostrarsi bene su diversi dispositivi e dimensioni di schermo. Questo consente agli utenti di visualizzare comodamente i contenuti su diversi dispositivi come smartphone, tablet e desktop.<meta charset="UTF-8">imposta la codifica dei caratteri del documento su UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">è un'impostazione che ottimizza la visualizzazione per i dispositivi mobili. La pagina si adatta alla larghezza dello schermo del dispositivo.<title>rappresenta il titolo della pagina visualizzato nella scheda del browser. In questo esempio, il titolo 'Nozioni di base sull'HTML' è impostato. -
<body>Il tag
<body>contiene la parte che visualizza il contenuto agli utenti. All'interno di questo tag, vengono scritti testo, immagini, link, ecc. -
<main>Il tag
<main>rappresenta il contenuto principale della pagina. Questo include intestazioni e paragrafi. -
<h1>Il tag
<h1>rappresenta l'intestazione più importante della pagina. È comune utilizzare il tag<main>e il tag<h1>solo una volta in un documento. -
<p>Il tag
<p>rappresenta un paragrafo. -
<!-- Comment -->Puoi scrivere commenti in HTML in questo formato. Poiché l'HTML lato client può essere visualizzato da chiunque, non includere informazioni sensibili come password o chiavi API nei commenti.
HTML ha molti tag, ma presta attenzione ai seguenti punti qui. Un file HTML è composto da una dichiarazione DOCTYPE e da un tag <html>. Il tag <html> contiene un tag <head> e un tag <body>. In HTML, tutti i tag sono contenuti all'interno del tag <html>, esprimendo la struttura del testo attraverso relazioni di genitore, figlio e fratelli, simili a una struttura ad albero. Quando scrivi HTML, concentrati anche sulla struttura del documento.
Tag e Attributi
Successivamente, diamo un'occhiata ai tag e agli attributi HTML.
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->I tag sono racchiusi tra parentesi angolari (<, >) e consistono tipicamente in un paio di tag di apertura e chiusura. Tuttavia, ci sono anche tag singoli, come il tag <meta> e il tag <img>, che non contengono contenuto. I tag singoli non richiedono un tag di chiusura.
I tag possono avere attributi, che forniscono informazioni aggiuntive al tag. Gli attributi sono scritti all'interno del tag di apertura nel formato attributeName="valore".
Qui, <div> si riferisce a un tag e <div>Content</div> a un elemento.
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>Gli attributi comuni in HTML includono id, class e style. L'attributo id viene usato per dare a un elemento un identificatore univoco, e ci può essere solo un elemento con lo stesso id su una pagina. È utile quando si manipolano elementi specifici con JavaScript o CSS. L'attributo class ti consente di raggruppare più elementi con CSS o JavaScript assegnando un nome di classe. Puoi assegnare la stessa classe a più elementi, consentendo di condividere gli stili. L'attributo style specifica gli stili CSS in linea per un elemento. Normalmente, gli stili sono definiti in un foglio di stile esterno o all'interno del tag <style>, ma questo attributo viene usato quando si desidera specificare gli stili direttamente per singoli elementi.
Caratteri speciali nei HTML
Successivamente, esaminiamo i caratteri speciali in HTML.
In HTML, ci sono caratteri speciali usati per visualizzare simboli e caratteri specifici. Questi caratteri speciali sono chiamati entità. I caratteri speciali iniziano con & (e commerciale), seguiti da un nome o numero, e terminano con ; (punto e virgola).
Caratteri speciali rappresentativi in HTML
Ecco alcuni caratteri speciali comuni.
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
Esempi di utilizzo di caratteri speciali in HTML
In particolare, le parentesi angolari (<, >) e le virgolette doppie devono essere usate correttamente in HTML.
Le parentesi angolari (<, >) e le virgolette doppie dovrebbero essere rappresentate come caratteri speciali in HTML, come mostrato qui sotto.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
Versioni di HTML
Diamo un'occhiata alle versioni HTML qui.
Le versioni HTML si sono evolute per definire la struttura e la funzionalità delle pagine web. Ecco le versioni principali:.
-
HTML 1.0 (1993)
La prima versione HTML aveva solo caratteristiche di markup molto basilari. Definiva elementi come collegamenti, intestazioni, paragrafi e liste.
-
HTML 2.0 (1995)
La prima versione standardizzata, con più elementi aggiunti, incluso il supporto per moduli e tabelle.
-
HTML 3.2 (1997)
Sono state aggiunte più caratteristiche di layout, permettendo l'inserimento di elementi di stile e script. Inoltre, il layout con l’elemento
<table>è diventato comune. -
HTML 4.01 (1999)
La separazione tra struttura e presentazione è avanzata, e è stato introdotto il CSS. La creazione di siti conformi agli standard è diventata raccomandata. Inoltre, l'internazionalizzazione e l'accessibilità dei documenti sono state migliorate.
-
HTML5 (2014)
L'ultima versione importante, che introduce il supporto per video e audio, canvas, local storage, geolocalizzazione e altre nuove API. È ottimizzato per i dispositivi mobili, permettendo lo sviluppo di applicazioni web più interattive.
HTML5.2 è una versione di HTML raccomandata nel 2017 ed è una versione migliorata di HTML5. Dalla versione HTML5.2, viene aggiornato continuamente come HTML Living Standard, anziché avere un numero di versione statico.
HTML si è evoluto attraverso queste versioni, sviluppandosi in una tecnologia web più flessibile e potente.
Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.