regola carattere

il linguaggio HTML

• editor e browser
• i tag
• la sintassi generale
• i tag vuoti
• i commenti
• la struttura base
• la gerarchia dei tag

esercitazoini

1. base
2. paragrafi
3. paragrafi preformattati
4. formattazione testo
5. caratteri speciali
6. titoli
7. elenchi
8. liste di definizioni
9. immagini
10. attributi per immagini
11. collegamenti
12. collegamenti con immagini
13. tabelle
14. attributi per tabelle
15. colori
16. il primo sito
17. qualche precisazione
18. font
19. CSS
20. fogli di stile in linea
21. altezze
22. fogli di stile incorporati
23. fogli di stile esterni
24. selettori

risorse esterne

• notepad++
• specifiche HTML 4.01
• validatore HTML w3c
• validatore CSS w3c
• strumenti google
• w3schools

Internet è il più grande esperimento di anarchia che abbiamo mai avuto(Eric Schmidt, Ceo di Google)

il linguaggio HTML

L' HyperText Markup Language è un lignuaggio a marcatori per ipertesti

Funziona cioè con dei marcatori e serve per la produzione di documenti ipertestuali.

Non è un linguaggio di programmazione: si usa semplicemente ad inserire i vari elementi in una pagina (titoli, paragrafi, elenchi, tabelle, collegamenti, immagini ecc. ecc.)

Come un programma di videoscrittura, serve a comporre un documento destinato ad essere stampato, con l'HTML, produciamo un documento una pagina destinata al web.

editor e browser

Una pagina HTML si cotruisce inserendo l'apposito codice in un file di testo non formattato (al quale si dà estensione .html invece di .txt).

Per visualizzarla, si apre il file con un browser (tra i più usati figurano Mozilla Firefox, Internet Explorer, Google Chrome, Safari e Opera).

curiosità

Il verbo inglese to browse , si può tradurre in italiano (fonte: wordreference) come:

• mangiucchiare
• guardare in giro
• dare un'occhiata
• sfogliare
• brucare
• curiosare

Si può quindi tradurre browser come sfogliatore di pagine web.

i tag

I marcatori HTML vengono detti tag, essi sono gli elementi che costituiscono la pagina web e si usano aprendoli e chiudendoli, prima e dopo il loro contenuto. Quindi:

1. marcatore di apertura.
2. il suo contenuto.
3. marcatore di chiusura.

Se ad esempio si volesse in grassetto la parola "importante", bisognerebbe aprire il tag del grassetto prima della parola "importante" e chiuderlo subito dopo, così:

la parola <b>importante</b> la si vuole in grassetto.

Risultato:

la parola importante la si vuole in grassetto.

In particolare:

<b>

apre il tag del grassetto (b).

importante

contenuto del tag, ovvero il testo che si vuole in grassetto.

</b>

chiude il tag del grassetto.

Come appena visto il tag preposto al grassetto è <b>; deriva dalla parola inglese bold che in italiano significa grassetto, neretto.

la sintassi generale

Ogni tag va posto tra parentesi angolari (i segni di minore e maggiore) e lo si chiude facendo precedere il suo nome da una barra (/).

La sintassi generale è pertanto la seguente:

<tag> contenuto </tag>

dove:

<tag>

è l'apertura del tag.

contenuto

è il suo contenuto.

</tag>

è la chiusura del tag.

A questa regola generale ci sono due sole eccezioni:

• i tag vuoti
• i commenti

i tag vuoti

Qualche tag non ha contenuto: ad esempio, il tag che consente di inserire un'immagine (tag img), non ha un contenuto. Il browser arriva a quel punto della pagina ed inserisce l'immagine specificata, quindi, non c'è contenuto, pertanto neppure la chiusura del tag.

La sintassi che devono rispettare i tag vuoti è:

<tag vuoto />

i commenti

Per commento si intende una parte del codice della pagina che il browser non interpreta.

Quindi tutti i commenti rimangono "nascosti" al broswer e li si possono leggere soltanto andando a visualizzare il codice della pagina.

I commenti servono ad inserire degli appunti nel codice di una pagina o ad evidenziare dei punti significativi della stessa.

La sintassi che si deve rispettare per commentare il codice è:

<!-- commento -->

Ad esempio:

<!-- questa sezione

contiene il menù laterale -->

la struttura base

Ogni pagina HTML è contenuta nel tag HTML ed è divisa in due sezioni:

• prima l'intestazione (tag HEAD) che contiene i tag per impostazioni generali della pagina
• poi il corpo (tag BODY) che contiene tutti gli elemneti presenti nella pagina.

<html>
	<head>
		<!-- questa sezione è l'intestazione -->
	</head>
	<body>
		<!-- questa invece costituisce
			il corpo della pagina -->
	</body>
</html>

NB:

per una versione corretta della struttura base, si deve far riferimenti all'esercitazione "17 qualche precisazione".

la gerarchia dei tag

Come si nota ogni tag è contenuto in un tag genitore. Il tag radice è html, i suoi due figli sono i tag head e body. Un elemento della pagina (nel corpo) sarà figlio del tag body, il quale è figlio del tag radice html.

I tag sono quindi nidificati: un tag è figlio di un tag genitore, che a sua volta avrà il proprio tag genitore e così via, salendo tutta la struttura gerarchica della pagina sino al tag html.

esercitazioni

Quello che segue è un percorso di esercitazioni per complessità crescente pensato per imparare a realizzare un sito web nel minor tempo possibile.

nº	pagina	codice	nº	pagina	codice
1	base		13	tabelle
2	paragrafi		14	attributi per tabelle
3	paragrafi preformattati		15	colori
4	formattazione testo		16	il primo sito
5	caratteri speciali		17	qualche precisazione
6	titoli		18	font
7	elenchi		19	CSS
8	liste di definizioni		20	fogli di stile in line
9	immagini		21	altezze
10	attributi per immagini		22	fogli di stile incorporati
11	collegamenti		23	fogli di stile esterni
12	collegamenti con immagini		24	selettori