Html, l’HyperText Markup Language
In informatica l’HyperText Markup Language (HTML; traduzione letterale: linguaggio a marcatori per ipertesti) è un linguaggio di markup. Nato per la formattazione e impaginazione di documenti ipertestuali disponibili nel web 1.0, oggi è utilizzato principalmente per il disaccoppiamento della struttura logica di una pagina web (definita appunto dal markup) e la sua rappresentazione, gestita tramite gli stili CSS per adattarsi alle nuove esigenze di comunicazione e pubblicazione all’interno di Internet.
Nei documenti contenenti questo linguaggio di pubblico dominio, la cui sintassi è stabilita dal World Wide Web Consortium (W3C), un tratto di testo può essere contrassegnato inserendo delle etichette, tag, che ne descrivono la funzione, il colore, il link, o altre caratteristiche.
I tag
L’HTML non è propriamente un linguaggio di programmazione, in quanto non prevede alcuna definizione di variabili, strutture dati, funzioni, strutture di controllo, ma piuttosto è solamente un linguaggio di markup che descrive le modalità di impaginazione, formattazione o visualizzazione grafica o layout del contenuto, testuale e non, di una pagina web attraverso tag di formattazione.
Ogni tag (ad esempio <h1> o <p>) specifica un diverso ruolo dei contenuti che esso contrassegna (quindi il tag <h1> definirà un’importanza maggiore del tag <p>). La formattazione consiste nell’inserimento nel testo di marcatori o etichette, detti tag, che descrivono caratteristiche come la funzione, il colore, le dimensioni, la posizione relativa all’interno della pagina. I browser che leggono il codice mostrano all’utente formattazioni predefinite per ogni tag che incontrano (così ad esempio i contenuti marcati con il tag <h1> avranno carattere 18pt e i contenuti marcati da <p> avranno carattere 12pt). Tuttavia questa formattazione è completamente sotto il controllo dell’utente, che può modificarla nelle Impostazioni del suo browser.
Alcuni tag presentano un’applicazione puntuale, come per esempio il tag <img> che serve per inserire un’immagine in un determinato punto della pagina, e in quanto tali non richiedono il tag di chiusura; in questo caso si parla di tag a chiusura implicita.
Quando un documento ipertestuale scritto in HTML è memorizzato in un file la sua estensione è tipicamente .html o .htm.
La struttura
Un documento HTML comincia con l’indicazione della definizione del tipo di documento (Document Type Definition o DTD), la quale segnala al browser l’URL delle specifiche HTML utilizzate per il documento, indicando quindi, implicitamente, quali elementi, attributi ed entità si possono utilizzare e a quale versione di HTML si fa riferimento. Di fatto, questa informazione serve al browser per identificare le regole di interpretazione e visualizzazione appropriate per lo specifico documento.
Questa definizione deve pertanto precedere tutti i tag relativi al documento stesso.
Dopo il DTD, il documento HTML presenta una struttura ad albero annidato, composta da sezioni delimitate da tag opportuni che al loro interno contengono a loro volta sottosezioni più piccole, sempre delimitate da tag.
La struttura più esterna è quella che delimita l’intero documento, eccetto la DTD, ed è compresa tra i tag <html> e </html>.
All’interno dei tag <html> lo standard prevede sempre la definizione di due sezioni ben distinte e disposte in sequenza ordinata:
- la sezione di intestazione o header, delimitata tra i tag <head> e </head>, che contiene informazioni di controllo normalmente non visualizzate dal browser, con l’eccezione di alcuni elementi
- la sezione del corpo o body, delimitata tra i tag <body> e </body>, che contiene la parte informativa vera e propria, ossia il testo, le immagini e i collegamenti che costituiscono la parte visualizzata dal browser.
Al di sotto di questa suddivisione generale, lo standard non prevede particolari obblighi per quanto riguarda l’ordine e il posizionamento delle ulteriori sottosezioni all’interno dell’header o del body, a parte l’indicazione del rispetto dei corretti annidamenti (le sottosezioni non si devono sovrapporre, ossia ogni sottosezione deve essere chiusa prima di iniziare la sottosezione successiva), lasciando così completa libertà allo sviluppatore o al progettista per quanto riguarda la strutturazione e l’organizzazione successive.
Un piccolo esempio
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Titolo del sito web | Home page</title>
<link rel="icon" type="image/png" href="http:favicon.ico" />
<link href="http:css/foglio_di_stile.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/file_con_javascript.js"></script>
<meta name="keywords" content="parole chiave per la ricerca" />
<meta name="description" content="breve descrizione del sito" />
<meta name="author" content="Autore del sito" />
</head>
<body>
<div>
<div>
<img src="picture/immagine_header.jpg" alt="descrizione dell'immagine inserita nella parte alta del sito contenente eventualmente il logo" />
</div>
<div>
<div>
<div>
<a href="index.php" title="link alla home page">home</a>
<a href="contatti.php" title="link ai contatti">contatti</a>
<a href="chi_siamo.php" title="link alla pagina chi siamo">chi siamo</a>
</div>
</div>
<div>
<div>
<h1>Titolo della pagina scritto con il tag per il titolo principale</h1>
</div>
<div>
<p>Qui c'è il testo della pagina scritto all'interno del tag per il paragrafo</p>
</div>
</div>
<div>
<a href="http://www.google.com/" title="link a google che si apre in una nuova finestra" target="_blank">
<img src="http:picture/logo_google.gif" alt="logo google" />
</a>
</div>
</div>
<div>
Dettagli della pagina tra cui il nome della società, la partita iva, il codice fiscale, il capitale sociale ed eventuale link al webmaster
</div>
</div>
</body>
</html>Qui troverete il nostro corso dedicato all’HTML & CSS.
Ricordatevi sempre che lo sviluppo è una forma d’arte.
I nostri corsi : https://itamde.com/it/corsi-online-digitali
▼ SEGUICI SU ▼
» Facebook: https://www.facebook.com/itamde
» Instagram: https://www.instagram.com/itamdestudio
» X (Twitter): https://x.com/itamdestudio
» ISCRIVITI SUBITO AL NOSTRO CANALE: https://www.youtube.com/channel/UCZ4dhshzpVbbRPVuL9TNH4Q
0 commenti