Struttura di un documento html
HTML è il linguaggio attraverso cui si scrivono i documenti web e il cui standard viene mantenuto dal W3C.
HTML (Hyper Text Markup Language) combina due concetti:
- Ipertesto
- L'ipertesto è un metodo per organizzare e distribuire una collezione di documenti in modo non lineare.
- Linguaggio di markup
- permette di arricchire i documenti con una struttura formale, “marcando” i dati e conferendo loro significato
L'HTML nasce per descrivere la struttura logica dei documenti (intestazioni “h1” “h2”, paragrafi “p”, collegamenti “a”…), lasciando ai browser completa libertà rispetto alla presentazione: struttura logica e layout fisico sono ben separati.
Un documento HTML o XHTML è un file di testo (file ASCII, per esempio “index.html” o “index.htm”) contenente dei “comandi” per:
- la formattazione del testo (intestazioni, paragrafi, …)
- l’inserimento di parti multimediali (immagini, suoni, …)
- la definizione di link ipertestuali
Tag HTML
I tag sono i marcatori che consentono al browser di dare struttura al contenuto del documento html. I tag sono identificati da nomi diversi a seconda della funzione per cui sono programmati.
I “comandi” (tags) hanno una forma sintattica particolare, es:
- <p>contenuto dell'elemento</p>
- <a>contenuto dell'elemento</a>
- <em>contenuto dell'elemento</em>
- <div>contenuto dell'elemento</div>
Ogni elemento è composto da due tag, uno di apertura e uno di chiusura
Il primo tag <nome dell'elemento> dice al browser che in quel punto della pagina inizia la marcatura di qualcosa
che deve essere interpretato in qualche modo. Il secondo tag, quello di chiusura, è caratterizzato dal simbolo "/" e dice
al browser che la rappresentazione dell'elemento termina in quel punto.
Regole per la giusta sintassi
Una giusta sintassi aiuta a creare e rispettare gli standard a vantaggio della costruzione e manutenzione delle pagine.
soprattutto quando si gestisce in gruppo.
Le regole per una giusta sintassi sono:
- i documenti devono essere ben formati
- annidare i tag in modo corretto e non sovvrapposti
- per i nomi di elemento usare le minuscole
- usare sempre i tag di chiusura
- racchiudere gli atributi tra apici ="atributo"
- chiudere gli elementi vuoti con />
Buone pratiche di scrittura del codice
- aderire agli standard
- nomi di file: creare uno standard
- utilizzare il markup semantico
- validare il codice
Commenti
I commenti in html si formano con i caratteri <!-- -->
es:<!-- questo è un commento -->
I commenti sono importanti perché costitutiscono dei promemoria per l'autore e possono aiutare a ricordare il perché si sono
usate certe particolarità di codice, o punti dove terminano marcuture di struttura, o ancora informazioni per altri autori
che possono accedere al documento.
I commenti in html possono essere più lunghi di una riga e non vengono visualizzati dal browser.
Annidamento
L'annidamento è la marcatura di un elemento all'interno di un altro elemento.
Gli elementi di blocco possono annidare altri elementi di blocco ed elementi in linea;
gli elementi inline, possono annidare solo altri elementi inline, anche se la proprietà display in CSS fosse impostata come
display:block;
L'ordine di anidamento è: l'ultimo tag aperto deve essere il primo tag ad essere chiuso.
Se un elemento “a” deve essere posto all’interno di un elemento “b”, allora il tag di chiusura di “a” deve precedere il tag di chiusura di “b”.
L’elemento annidato prende il nome di “figlio” (child), l’elemento contenitore quello di “genitore” (parent).SI dice relazione padre-figlio se l'annidamento è di un livello; relazione antenato discendente, se l'annidamento è di due o più livelli.)
Elementi
Conoscere a quale categoria appartiene un elemento è importante per creare pagine HTML e applicare gli stili CSS in modo corretto.
Tipi di elementi in X/HTML
Gli elementi in X/HTML si distinguono in elementi:
- di blocco
- inline
- rimpiazzati
- non rimpiazzati
La visualizzazione degli elementi di blocco o inline, può essere variata dalla proprietà CSS display.
es:ul li{ diaplay:inline; /*trasforma la visualizzazione delle voci elenco di un elenco non ordinato in elementi in linea*/ }a{ diaplay:block; }/*trasforma la visualizzazione dell'elemento "a" in elemento di blocco*/
La proprietà display varia il modo in cui l'elemento è visualizzato dal browser, ma non cambia la sua natura di elemento inline o block level. Quindi resta sempre valida la regola che un elemento block level può contenere altri elementi di blocco o in linea, e gli elementi inline, possono annidare altri elementi inline ma non di blocco.
Nell'esempio seguente il markup html è corretto.
<p><a href="https://www.perilmondo.org">questo è un link per viaggiatori virtuali</a></p>
Nell'esempio seguente il markup html è sbagliato.
<a href="https://www.perilmondo.org"><p>questo è un link per viaggiatori virtuali</p></a>
Elementi di blocco (block level)
Danno origine ad un'area di contenuto rettangolore (css box model) causano un a capo disponendosi uno di seguito all'altro e
distanziandosi attraverso i margini. Si estendono in larghezza, proprietà css width per occupare tutta l'area dello
schermo e per un'altezza, proprietà css height utile a includere il contenuto.
Alcuni tra questi:
div, p ,h1, h2, h3, h4, h5, h6.
Elementi in linea(inline)
Sono stringhe di testo breve all'interno di un elemento di blocco, non provocano interruzioni di riga e si estendono per la larghezza necessaria.
Alcuni tra questi:
span, strong, em.
- Elementi rimpiazzati
- Il loro contenuto non è all'interno del documento, ma si trova in un file esterno. L'elemento non rimpiazzato serve da "segnaposto" per dire al browser dove collocare il contenuto. Il tipico elemento rimpiazzato è l'elemento <img>.
- Elementi non rimpiazzati
- Gli elementi non rimpiazzti sono tutti quelli il cui contenuto è all'interno della pagina come gli elementi <p>, < ul>, <ol>, elementi di intestazione <h1>...<h6> ecc;
Attributi
L'attributo di un elemento indica una proprietà di quell'elemento. Spesso gli attributi sono opzionali, in altri casi il
comportamento predefinito del browser è quello desiderato, quindi l'attributo non è necessario.
Gli attributi perciò è meglio usarli solo quando servono. Gli atributi si possono indicare in qualsiasi ordine, ma è preferibile
crearsi uno standard nello scrivere il codice così da renderlo più facile da scrivere e mantenere.
È bene scrivere gli attributi in minuscolo e i valori posti tra apici.
es:
<p>Per trovare il tesoro seguire il percorso
<a href="mappa.html" title="mappa del tesoro"
target="_blank">mappa del tesoro</a></p>
I principali atrributi di tutti gli elementi sono:
- class="nome della classe"
- assegna uno o più nomi di classe per la stilizzazione e scripting. Il nome che si attribuisce a class si può ripetere più volte nella stessa pagina con lo stesso elemento o con altri elementii.
- id="identificativo unico"
- ID assegna un nome identificativo unico all'elemento per scopi funzionali, come le divisioni di struttura della pagina (tag div), di stilizzazione e scripting. Il nome dell'attributo id può essere usato una solo volta all'interno della stessa pagina.
- style="foglio di stile inline"
- Usato per attribuire all'elemento stili di presentazione o layout in linea. Si dovrebbe limitarne l'uso per evitare di miscihiare presentazione e contenuto.
- title="testo descrittivo"
- Usato per dare una descrizione all'elemento e compare come tooltip quando il mouse passa sull'elemento. L'attributo title non và confuso con l'elemento title usato per il titolo della pagina ed è posto nell'elemento head.
es:
<p class="nome dell'attributo">contenuto dell'elemento</p>
<div id="nome dell'attributo"<contenuto dell'elemento</div>
<span style="color:#200;"<contenuto in linea>/span>
<a href="mappa.html" title="mappa del tesoro"
target="_blank"></a> (1)
(1)L'attributo target="..." dell'elemeto a con il valore _blank apre la pagina richiesta in una nuova finestra del browser. Non tutti gli autori approvano questa pratica.
Elementi vuoti
Esistono anche elementi vuoti, vale a dire elementi che non hanno contenuto, ma hanno un significato perché includono informazioni o servono a collegare alla pagina altri documenti
Questi elementi non hanno tag di chiusura e si chiudono con il simbolo "/" prima della parentesi di chiusura />.
Tra questi i più utilizzati sono:
- meta
- tag che contengono altri dati
- link
- elemento che collega altre risorse alla pagina come i file css
- br
- elemento che causa un'interruzione di riga e manda a capo il testo
- img
- elemento per inserire immagini nella pagina
- hr
- crea una linea per separare sezioni diverse della pagina. Ha anche valore semantico
es:
<link rel="stylesheet" type="text/css" href="stili.css" />
<meta name="description" content="contenuto del metatag" />
<p>contenuto del paragrafo<br />
resto del contenuto del paragrafo che va a capo;
per via del tag <br /></p>
<img src="percorso file" alt="attributo obbligatorio per
il testo alternativo" title="attributo facoltativo crea un
tooltip quando il mouse passa sull'elemento" /> (2)
(2)Lo spazio prima dello slash di chiusura non è necessario, ma lo si inserisce per retro compatibilità con i browser.
| Struttura e intestazione | Elementi di blocco | Elementi inline | Elementi HTML5 | Elementi rimpiazati |
|---|---|---|---|---|
| doctype, html, body, head, link, meta, style, title, | address, blockquote, dd, div. dl, dt, form, h1,h2,h3,h4,h5,h6, hr, legend, li, menu, ol, p, pre, table, ul, | a, abbr, area, b, br, cite, code, del, dfn, em, i, ins, map, q, span, strong, sub, sup, | article, aside, audio, canvas, figcaption, figure, footer, header, hgroup, nav, ruby, section, | img, input, object |
Struttura di base di una pagina X/HTML
L'esempio che segue è il tipico inizio di una pagina HTML in stile HTML5. Da notare il semplificato doctype, il tag html con l'attributo lang="..." e il più semplice charset="utf-8"; Il metatag relativo al content-type e al charset, può essere scritto come quello definito per l'XHTML 1 dell'esempio n°2
es: n°1
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Tutorial HTML-CSS - Una guida HTML e CSS</title>
<link rel="stylesheet" type="text/css"
href="css/tutorial.css" />
</head>
<body>
<p>struttura di base in stile HTML5</p>
</body>
</html>
Una pagina XHTML 1 avrebbe la struttura di base simile ma un doctype molto più complesso, simile al seguente
es: n°2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1
Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tutorial HTML-CSS - Una guida HTML e CSS</title> <link rel="stylesheet" type="text/css"
href="css/tutorial.css" />
</head>
<body>
<p>struttura di base in stile XHTML</p>
<p>Gli esempi hanno codice che va a capo per motivi funzionali. Quando scrivete il codice scrivetelo di seguito</p>
</body>
</html>
Tutorial X/HTML e CSS - Guida elaborata da: Bianchi Roberto - Spazioprever
