Internet: il linguaggio HTML (1)
Internet: il linguaggio HTML (1)
HTML ovvero HyperText Markup Language è il linguaggio di formattazione utilizzato per produrre pagine condivisibili sulla rete Internet e risulta semplice per creare ipertesti didattici.
Gli ipertesti consentono la lettura di informazioni testuali, grafiche e sonore in modo non lineare sulla base dell'argomento a cui si è interessati al momento
Un linguaggio di programmazione utilizzabile nei documenti Html è per esempio il linguaggio Java, di non facile applicazione, anche se è allo studio, una versione adatta ai ragazzi “Java for kids”.
E' possibile creare documenti Html utilizzando:
I marcatori racchiudono particolari funzioni e quasi sempre hanno un inizio <marcatore> e una fine </marcatore>.
Il documento deve essere salvato con estensione .htm o .html e lo si può visualizzare con un browser, cioè un programma che permette la visione dei file con estensione html (di solito I.E. di Microsoft o Netscape).
Di seguito sono rappresentati i marcatori principali, anche se i produttori di browser ne propongono sempre dei nuovi per rendere i documenti impaginati e graficamente complessi ( vedi WYSIWYG).
I documenti si compongono di due parti:
Tutti i testi iniziano con: <html> <head>…</head> <body>
E terminano con: </body> </html>
Gli stili di testo
| Tipi di stili | Stili logici | Stili fisici |
| DIMENSIONI
Html possiede un solo tipo di carattere simile al Times New Roman che può avere diverse dimensioni: |
<h1></h1> il più alto
<h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> il più piccolo |
|
| GRASSETTO | <strong></strong> | <b> </b> |
| CORSIVO | <em></em> | <i></i> |
| SOTTOLINEATO | <u></u> | |
| BARRATO | <s></s> | |
| PEDICE | <sub></sub> | |
| APICE | <sup></sup> | |
| CARATTERE COURIER | <code></code> | <tt></tt> |
Alternativa introdotta successivamente e accettata dai browser per variare il carattere si usa come identificatore <font>.
Si può cambiare tipo di carattere e il colore con la seguente linea di comando:
<font face = "Arial, Helvetia” size=+2 color="#ffff00"> e terminare con </font>.
Formattazione del testo
| Tag | Funzione | |
| PARAGRAFO | <p></p> | Testo a capo con aggiunta di spaziatura tra le righe |
| INTERRUZIONE A CAPO | <br> | Testo a capo |
| RIGA ORIZZONTALE DI SEPARAZIONE | <hr> | Crea una riga orizzontale |
| COMMENTO | <!-- commento --> | crea un commento, nel testo sorgente che non è visualizzato dal browser. |
Multimedialità
Si possono inserire:
| immagini | suoni | musica | filmati |
| <img src=”cane.gif”>
oppure <img src="icone/bg.jpg"> |
<embed src="drin.wav"> | <embed src="song.mid"> | <embed src="video.avi">
oppure <img dynsrc="video.avi" > |
Collegamenti ipertestuali marcati
Per creare un collegamento (link) all'interno di un testo occorre inserire un riferimento (ancora o target):
<a name=#inizio>
e poi creare il collegamento (ad. es. a fine pagina):
<a href=”#inizio”> Clikka per tornare all'inizio </a>.
Mentre per creare un collegamento (link) ad un altro documento occorre inserire il riferimento (indirizzo) o URL (Uniform Resource Locator) del testo da collegare:
<a href=”pagina2.htm”>Clicka per andare a pagina 2 </a>.
Creare le tabelle
Utilissime per l'impaginazione è la creazione di tabelle <table> che possono essere visibili <table border= 2> o invisibili <table border=0>
formate da righe (row), colonne (column) e celle (cell).
<tr> crea una riga, </tr> chiude la riga,
<td> crea una cella </td> chiude la cella,
</table> chiude la tabella.
Es. <html>
<body>
<table border=1>
<tr><td>Nome</td><td>Cognome</td></tr>
<tr><td>Indirizzo></td><td>Tel.</td></td> </tr>
</table>
</body>
</html>
Ecco come viene visualizzato
| Nome | Cognome |
| Indirizzo | Tel. |
Lo sfondo delle pagine (background)
Per una impaginazione accattivante, risulta importante la creazione di uno sfondo del documento. Si può utilizzare un'immagine, un colore oppure entrambi.
<body background="sfondo1.gif "> oppure
<body bgcolor="#fff700"> oppure
<body background="sfondo1.gif " bgcolor="#fff700">.
Colori
Di seguito vengono presentati alcuni colori identificati con il numero RGB in notazione esadecimale. I colori partono dal n. esadecimale "#000000" del colore nero fino al "#ffffff" del colore bianco.
| Colore | Numero | Autore o note |
|---|---|---|
| arancio | "#ff8000" | |
| azzurro | "#00ffff" | |
| bianco | "#ffffff" | |
| beige | "#0000ff" | |
| blu | "#004864" | |
| blu | "#00009c" | da utilizzare con testo text="#ffffff" |
| giallo | "#ffff00" | |
| giallo | "#fffff0" | giallino |
| grigio | "#dfdfdf" | è il medesimo colore della toolbar |
| magenta | "#ff00ff" | |
| marrone | "#a52a2a" | |
| nero | "#000000" | da utilizzare con testo text="#ffffff" |
| rosa | "#f7aec4" | |
| rosso | "#ff0000" | |
| salmone | "#fa8072" | |
| verde | "#008080" | |
| verde | "#557766" | Benetton |
| viola | "#ff66cc" |
Glossario
WYSIWYG "What you see is what you get", cioè "otterrai quello che vedi"…ma non sempre è così!!!
Bibliografia
Laura Lemay, HTML 3.2, McGraw-Hill, 1997, Milano, L. 58.000.
Dean Scharf, HTML Guida pratica, Tecniche Nuove, 1995, Milano, L.12.000 Edizione tascabile.
M.Calvo, F.Ciotti,G.Roncaglia, M.A.Zela, Internet '96 Manuale per l'uso della rete, Laterza, 1996, Bari, L.23.000
Home page personale http://www.ptaroni.com/
Author: © prof. P.Taroni
Legalese :
