HTML, il linguaggio delle pagine web
Un ipertesto è un insieme di documenti messi in relazione tra loro per mezzo di parole chiave. La caratteristica principale di un ipertesto è che la lettura può svolgersi in maniera non lineare: qualsiasi documento della rete può essere "il successivo", in base alla scelta del lettore di quale parola chiave usare come collegamento.
Le pagine web non sono altro che degli ipertesti informatici, dove il computer ha automatizzato il passaggio da un documento all’altro. Fisicamente, sono dei semplici file di testo, con estensione HTM o HTML (il perché della versione corta dovete chiederlo a Microsoft, dato che il suo DOS accettava estensioni di massimo 3 caratteri), all’interno dei quali si trova codice HTML.
L’HTML (HyperText Markup Language, ovvero "linguaggio a marcatori per ipertesti") è un linguaggio di formattazione (e NON di programmazione) di pubblico dominio, che consiste nell’inserimento nel testo di marcatori, detti tag, che descrivono caratteristiche come la funzione, il colore, le dimensioni, la posizione relativa all’interno della pagina; la sintassi dell’HTML è stabilita dal World Wide Web Consortium (W3C). Dato che l’HTML è stato concepito per definire il contenuto logico e non l’aspetto finale del documento, non esiste alcuna garanzia che uno stesso documento venga visualizzato in egual modo su due dispositivi; e questa è una cosa da tenere bene a mente, dato che troppo spesso la si dimentica fino a quando si nota una pagina assurdamente caotica aperta in un computer che non avevamo preso in considerazione nei test...
Elementi sintattici
Il componente principale della sintassi dell’HTML è l’elemento; ogni elemento è racchiuso all’interno di marcature dette tag, costituite da una sequenza di caratteri racchiusa tra i segni minore e maggiore (per esempio, <br>, che serve ad indicare un ritorno a capo). Quando il tag deve essere applicato a una sezione di testo o di codice, l’ambito di applicazione deve essere delimitato fra un tag di apertura ed uno di chiusura (chiusura esplicita), che coincide col tag di apertura preceduto da una barra (/) dopo la parentesi angolare aperta (per esempio: <b>testo</b>, dove "testo" verrà visualizzato in grassetto all’interno del browser). Alcuni tag presentano un’applicazione puntuale, come per esempio il già citato <br> o <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.
Struttura di una pagina web
Un documento HTML comincia con l’indicazione della definizione del tipo di documento (Document Type Definition o DTD), che dice al browser quali specifiche HTML vengono utilizzate per il documento.
Dopo il DTD, il documento HTML presenta una struttura ad albero annidato, composta da sezioni che al loro interno contengono a loro volta sottosezioni più piccole, tutte delimitate da tag, ma inserite nell’ordine di preferenza, purché non vadano ad incrociarsi (come nei casi in cui l’apertura di una seconda sezione precede la chiusura di quella precedente).
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 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 come il titolo della pagina;
- 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.
La struttura sufficientemente basica di una pagina HTML5 è quindi:
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
Tag base di una pagina web
I tag che più facilmente e/o frequentemente vengono usati nella sezione BODY sono:
- Titolo (h1-h6)
- Paragrafo (p)
- Grassetto (b)
- Corsivo (i)
- Link (a) (parametri: href, target, title, id)
- Immagine (img) (parametri: src, width, height, alt, title)
- Interruzione di linea (br)
Ad essi si aggiungono quelli per le liste:
- Lista ordinata (ol) (parametri: start, type(1|a|A|i|I), reversed)
- Lista non ordinata (ul)
- Singolo elemento della lista (li)
...e quelli principali per le tabelle:
- Tabella (table)
- Riga della tabella (tr)
- Cella di intestazione della tabella (th)
- Cella normale (td)
Con questi elementi, si può creare già la gran parte delle pagine disponibili nel web, come vedremo nella prossima lezione.
Pagine che potrebbero interessarti
Lascia un tuo commento
Informazioni
inserita il 17/06/2013
visualizzata 2784 volte
commentata 0 volte
totale pagine: 542
totale visite: 1482878
Cerca nel blog
Cerca tra i contenuti pubblicati nel blog:
Categorie
Cerca tra le categorie presenti nel blog:
Pagine più recenti
- Memories (to the Moon and back)
- Nandu 2020 - ultimo tango a Buenos Aires
- Nandu 2020 - profondo sud
- Nandu 2020 - Natale con i tuoi, oppure con chi vuoi
- Nandu 2020 - tanti condor, ma niente puma, sotto le Torri
Pagine più lette
- Memories (to the Moon and back)
- Cremazione, alcuni dubbi risolti...
- Se saprai starmi vicino
- La patrino kiu nur oferas simplajn brakumadojn
- Nandu 2020 - ultimo tango a Buenos Aires
Pagine più commentate
- Lei verrà... io ne ho già sete (25)
- GoT3 - The rains of Castamere (15)
- Game of Thrones - inizio terza stagione (12)
- Benedetto papa, ti sei dimesso? (11)
- Spedire un fax senza fax si può... basta internet (10)
- Cremazione, alcuni dubbi risolti... (10)
Ultimi commenti
- nadia nardi su Esame accompagnatore turistico: nozioni tecnica valutaria e doganale
- massielena su Nandu 2020 - ultimo tango a Buenos Aires
- anna broll su Nandu 2020 - ultimo tango a Buenos Aires
- Daniele su Nandu 2020 - ultimo tango a Buenos Aires
- Anna Schiatti su Nandu 2020 - ultimo tango a Buenos Aires