Minicorso HTML - Lezione 1
di Paolo Subiaco iw3grx
8 settembre 2001

Indice | Prossima lezione

1 Introduzione

Dopo alcuni anni di gestione del server web gw.ir3ip.ampr.org, dedicato ai radioamatori, mi sono deciso a scrivere questo mini corso circa la stesura di semplici pagine html, sfruttando anche concetti moderni quali i fogli di stile ed il linguaggio di programmazione php per l'inserimento di efficienti contatori.
Perche` questa iniziativa? Perche` attualmente (settembre 2001) il server gw.ir3ip.ampr.org conta piu` di 100 utenti iscritti, dei quali solo 18 si sono creati le proprie pagine web rendendole quindi disponibili a tutti i radioamatori che collegano il server in questione, mentre sarebbe auspicabile che tutti possano crearsi le loro pagine per poter condividere non solo esperienze e progetti, ma anche informazioni e curiosita`.

Spero pertanto con questi documenti di fornire le informazioni necessarie a comporre le prime pagine web, puntando comunque ad un livello qualitativo notevole rispetto a quanto si trova comunemente in giro per internet.


2 Requisiti

Creare pagine web e` sostanzialmente semplice, grazie alla struttura molto intuitiva di questo linguaggio, quindi ritengo che questo corso sia adatto ad ogni genere di persona.
Al contrario di quanto potrebbero suggerirvi amici e riviste, non vi consigliero` di prendere il solito programma visuale per la creazione di pagine web, ma vi insegnero` ad utilizzare il normalissimo editor (ad esempio il notepad, per chi usa Windows, mentre consiglierei kwrite per chi usa sistemi X/KDE).
L'obiettivo e` creare pagine semplici, veloci da caricare, e visualizzabili con ogni tipo di browser: all'URL http://gw.ir3ip.ampr.org/proj.html potrete trovare i manuali di riferimento HTML 4.0, in italiano, ed i manuali sui fogli di stile e sul linguaggio PHP, in inglese. Troverete inoltre un altro manuale sul linguaggio HTML scritto da Dorino I3ZDN.
A questo punto siamo pronti per iniziare la nostra prima pagina: armiamoci di editor ed iniziamo!


3 Struttura base di una pagina HTML

Le pagine HTML sono formate da soli caratteri ASCII: questo significa che non potranno essere usati caratteri accentati o "cornicette".
Si fara` uso di alcuni TAGS, racchiusi fra i caratteri < e >, per definire la struttura della pagina e del testo, ovvero per dare le informazioni al browser su come renderizzare la pagina.
Ogni pagina contiene sempre una struttura di questo tipo:
<html>
<head>
<title>Homepage di Paolo Subiaco - IW3GRX</title>
<meta name="keywords" content="paolo, subiaco, iw3grx, homepage,
  microwave, contest">
<meta name="description" content="Nella mia homepage troverete
  informazioni riguardanti le mie attivita` radioamatoriali come i
  microwave contest">
<style>
body {margin:1.5em;background-color:#e8ffff; text-align:justify}
</style>
</head>

<body>
<h1 align="center">Paolo Subiaco - IW3GRX</h1>

<h3>Chi sono</h3>
Sono Paolo Subiaco, nato a Conegliano nel 1973,
e vivo a <a href="paese.html">Col San Martino</a>,
un paese di 3500 abitanti sito in provincia di Treviso,
50km a nord di Venezia.<br>
....

<h3>Le mie passioni</h3>
......

</body>
</html>
I testi sono riportati in corsivo, al fine di distinguerli dai tags html.
Come potete osservare, la pagina html e` racchiusa fra i tags <html> e </html>, dentro i quasi si possono similmente individuare i blocchi head e body.
Nel primo blocco sono definiti Il corpo della pagina inizia con una testata (dall'inglese heading), allineato in centro, in cui e' specificato il titolo visibile della pagina.
Vi sono 6 tipi di intitolazioni, definite dai tags h1, h2, h3, h4, h5, h6 in cui h1 e` la piu' grande, h6 e` la piu` piccola.
Dopo il titolo centrale della pagina, vi e' una seconda intitolazione (h3), piu` piccola, per suddividere la nostra pagina in sezioni. Non avendo specificato il tipo di allineamento, questa seconda testata verra` allineata a sinistra.
Nel testo, poi, si fa uso del tag <br> (break) per segnare il ritorno a capo, e il tag <a href="nomefile.html">nome del link</a> per la creazione del link alla pagina nomefile.html.
Adesso siete quindi pronti a selezionare, con il mouse, il sorgente della nostra pagina per poi incollarla in un nuovo file, che chiameremo index.html e che potremo poi aprire con qualsiasi browser (netscape, internet explorer, konqueror, eccetera).
Il testo sara` visualizzato piu' o meno cosi:

Paolo Subiaco - IW3GRX

Chi sono

Sono Paolo Subiaco, nato a Conegliano nel 1973, e vivo a Col San Martino, un paese di 3500 abitanti sito in provincia di Treviso, 50km a nord di Venezia.
....

Le mie passioni

......



4 Tags per la definizione del tipo di carattere

Da quanto sopra esposto si evince che, delimitando una o piu' parole cone dei tags html, e' possibile definire il modo con cui tale testo verra` visualizzato.
Vediamo ora come puo' essere formattato il testo, in modo molto schematico.
<b>bold, grassetto</b>
<i>italic, corsivo</i>
<u>underlined, sottolineato</u>
<em>emphasized, enfatizzato</em>
<tt>teletype, caratteri a spaziatura fissa</tt>
<big>big, carattere enorme</big>
<strong>strong, carattere impressivo</strong>
<small>small, carattere ridotto</small>
bold, grassetto
italic, corsivo
underlined, sottolineato
emphasized, enfatizzato
teletype, caratteri a spaziatura fissa
big, carattere enorme
strong, carattere impressivo
small, carattere ridotto

I tags possono anche essere annidati per generare caratteri compositi, ovvero posso definire un carattere grande corsivo mediante la combinazione dei tags <big> e <i>, come segue:
Quello che seguira' verra' scritto in <big><i>caratteri grandi ed in corsivo</big></i>: attenzione al corretto annidamento dei tags!<br>
In questa riga invece vorrei <b><u>focalizzare l'attenzione sul carattere bold sottolineato,</u></b> utilizzabile per mettere in evidenza del testo.
Quello che seguira' verra' scritto in caratteri grandi ed in corsivo: attenzione al corretto annidamento dei tags!
In questa riga invece vorrei focalizzare l'attenzione sul carattere bold sottolineato, utilizzabile per mettere in evidenza del testo.



5 Caratteri non-ASCII

Come anticipato nell'introduzione, le pagine html devono contenere solo caratteri ascii: non si possono quindi utilizzare i caratteri accentati, altrimenti questi non verranno correttamente visualizzati nella maggior parte dei browser, specie considerando che a seconda della nazionalita' la rappresentazione dello stesso carattere non ascii puo' cambiare.
Allora gli accenti dovranno essere generati con opportune sequenze di escape, cosiccome altri caratteri sotto riportati.
&agrave;à
&aacute;á
&egrave;è
&eacute;é
&igrave;ì
&iacute;í
&ograve;ò
&oacute;ó
&ugrave;ù
&uacute;´
&amp;&
&lt;<
&nbsp; (carattere spazio)
&copy;©
&euro;€
&pound;£
&larr;←
&rarr;→
Ve ne sono molte altre sequenze, che non riporto... alcune di queste magari non verranno neanche correttamente riprodotte dal vostro browser, in quanto vecchio o non conforme con le specifiche HTML 4.0.

Bisogna comunque tener presente che il carattere spazio ed il ritorno carrello hanno, in HTML, solo la funzione di suddividere le parole, ed il risultato non cambia inserendo piu' spazi o piu' caratteri di ritorno carrello.
Si puo' utilizzare la sequenza &nbsp; per creare uno spazio particolare fra due parole, il quale non ha il significato di suddividerle: questo risulta utile per fare in modo che il browser non le spezzi (mandando a capo la seconda parola). Inoltre risulta a volte utile per inserire uno o piu' spazi, ad esempio
parola1&nbsp;&nbsp;&nbsp;parola2parola1   parola2
Si notino i 3 spazi che separano parola1 da parola2. Tuttavia non bisogna mai usare gli spazi per identare del testo come solitamente si fa con i programmi di videoscrittura, in quanto il risultato potrebbe essere molto diverso a seconda della larghezza della finestra del browser dei visitatori.
Per identare del testo, meglio utilizzare le tabelle o altri sistemi che vedremo nelle prossime lezioni.

Si e` inoltre detto che il carattere per andare a capo (tasto INVIO o ENTER) funziona solo da separatore; per specificare che il testo seguente dovra' apparire in una nuova riga, bisognera' specificare il tag <br>.

Indice | Prossima lezione