Introduzione al linguaggio HTML tag head tag body link testo immagini elenchi tabelle INDICE Bibliografia: Arena - Borchia Linguaggi del Web – Petrini Editore http://www.html.it
Note introduttive HTML è l'acronimo di Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti") e non è un linguaggio di programmazione. Si tratta invece di un linguaggio di marcatura (o di ‘formazione pagina'), che permette di indicare come disporre gli elementi all'interno di una pagina: le indicazioni vengono date attraverso degli appositi marcatori, detti "tag". Ciò significa che l'HTML non ha meccanismi che consentono di prendere delle decisioni, e non è in grado di compiere delle iterazioni ("ripeti questa cosa, finché non succede questo"), né ha altri costrutti propri della programmazione.
L’editor HTML L’editor più comune è un qualsiasi editor di testo, ad esempio “Blocco note”. Dopo aver creato il codice Html, salvare il file (o rinominarlo) utilizzando come estensione .htm oppure .html. Esistono in commercio editor visuali del tipo WYSWIG (What you See is What You Get), cioè programmi che permettono di inserire graficamente, come se lavoraste in word, gli elementi delle pagine (ad esempio FrontPage o DreamWeawer). Gli editor visuali di tipo WYSWIG hanno vantaggi a livello di produttività, ma non permettono la flessibilità e pienezza di controllo che si ottiene con la scrittura del codice.
I TAG I tag vanno inseriti tra parentesi uncinate (<TAG>), la chiusura del tag viene indicata con una "/" (è il simbolo comunemente detto "slash". Quindi: </TAG>). Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma: <TAG attributi>contenuto</TAG>
I tag: <html> <head> >body> Testa del documento <head> </head> Corpo del documento <body> </body> </html>
<HEAD> La sezione Head non verrà visualizzata all’utente, tranne il tag <Title> che contiene il titolo della pagina: <html> <head> <title>pagina web di prova </title> </head> </html>
I tag: <html> <head> >body> Testa del documento <head> </head> Corpo del documento <body> </body> </html>
Body Questo tag introduce il browser nella sezione della pagina corrispondente alle informazioni mostrate a video. All’interno di questo marcatore, è possibile (a volte indispensabile) inserire una serie di attributi, con i rispettivi valori, per istruire il browser su come visualizzare alcuni particolari della pagina. Le istruzioni principali riguardano il colore o l’immagine di sfondo, il colore del testo, il colore dei link.... ed altro
<!-- questo è un commento --> I commenti Un’altra strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei "commenti" nei punti più significativi: si tratta di indicazioni significative per il webmaster, ma invisibili al browser. Inserendo i commenti in punti specifici del documento ci permette di mantenere l’orientamento anche in file molto complessi e lunghi. La sintassi è la seguente: <!-- questo è un commento -->
Tag utilizzati per i caratteri della pagina <I> Testo Corsivo </I> evidenziazione in corsivo <U> Testo Sottolineato</U> testo sottolineato <B> Testo Grassetto</B> evidenziazione in grassetto <CENTER> Testo centrato</CENTER> testo o paragrafo centrato <Hn> Dimensione carattere </Hn> dimensione dei caratteri - n da 1 a 6. n=1 grande n=6 piccolo
Esempio grandezza caratteri <html> <head> <title> <b> esempio grandezza caratteri</b> </title> </head> <body> <H1> prova testo H1 </h1> <H2> prova testo H2 </h2> <h3> prova testo H3 </h3> <h4> prova TESTO h4 </H4> <H5> prova testo H5 </h5> <h6> prova testo H6 </h6> </BODY> </HTML>
Tag singoli <BR> ritorno a capo <HR> linea orizzontale
Lo standard HTLM 4.0 specifica la possibilità di indicare i colori fondamentali anche con una stringa di testo. esempio: body bgcolor=orange colore parola chiave notazione esadecimale arancione orange #FFA500 blu blue #0000FF bianco white #FFFFFF giallo yellow #FFFF00 grigio gray #808080 marrone brown #A52A2A nero black #000000 rosso red #FF0000 verde green #008000 viola violet #EE82EE
Principali Attributi del tag body text=“#FFFFFF” Link=“#0000FF” vlink=“#FFFFFF” alink=“#0000FF” topmargin=“2” leftmargin=“2” rightmargin=“3” Bottommargin=“5” bgcolor=“#000000” Background=“nomefile.gif” colore del testo; colore del link; colore del link visitato; colore del link attivo; margine vuoto superiore espresso in pixel; margine vuoto sinistro espresso in pixel; margine vuoto destro espresso in pixel; margine vuoto inferiore espresso in pixel; colore di sfondo; immagine di sfondo;
Attributo Background Background annulla l’impostazione di bgcolor, ma si inseriscono entrambi poiché, se l’immagine di sfondo non venisse caricata, comunque verrebbe fissato un colore compatibile con il resto della grafica. Background può usufruire di un ulteriore attributo utile a bloccare l’immagine selezionata per lo sfondo, durante lo scorrimento della pagina; l’istruzione bgproperties=“fixed” <body background=“immagine.gif” bgproperties=“fixed”>
Testo <p>paragrafo </p> Esempio: Il paragrafo è l’unità di base entro cui suddividere un testo. Il tag <P> lascia una riga vuota prima della sua apertura e dopo la sua chiusura. <div>Blocco di Testo</div> Esempio: <div>blocco 1</div> <div>blocco 2</div> blocco 1 blocco 2 Il blocco di testo va a capo, ma a differenza del paragrafo non lascia spazi prima e dopo la sua apertura.
Allineamento testo Tipo di allineamento Sintassi codice HTML Testo allineato a sinistra <p align="left"> testo</p> <p align="left">Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita</p> Testo allineato a destra <p align="right"> <p align="right">Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita</p> Testo giustificato <p align="justify"> <p aling=“center”> Testo</p> <p align="justify">Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita</p>
Il tag <a> con attributo “href=“ I link Le ancore dette più comunemente link sono fondamentalmente il cuore della pagina, grazie a questi collegamenti è possibile spostarsi da una pagina all’altra, da un sito all’altro, da un server all’altro. Il tag <a> con attributo “href=“ Esempi: <a href=http://www.altervista.com>Altavista il motore di ricerca</a> Altavista il motore di ricerca <a href=http://www.altervista.com>Altavista il motore di ricerca target=_blank</a> L’attributo target serve per fare caricare la pagina linkata nella stessa finestra (_top) oppure in una nuova finestra (_blank) Come riferimenti inoltre, è possibile usare valori come: <a href=mailto:........> effettua una spedizione all’indirizzo specificato esempio: <A HREF="mailto:myprof@mail.it"> <a href=”nome_file.zip”> .... Permette di creare un collegamento di download di file ad esempio .exe, .zip, .mp3
Esempio <html> <head> <title>Il sito della 5°C</Title> </head> <body bgcolor=#ffffff” topmargin=“2” bottommargin=“5” leftmargin=“3” rightmargin=“3” link=“0000ff” vlink=“fuchsia”> <p>benvenuti</p> <a href=http://gifanimate.html.it>GUIDA HTML</a> </body> </html>
Caratteri speciali &nbps; “no breaking space” <p>Spazio normale</p> Spazio normale <p>Spazio&nbps; doppio</p> Spazio doppio <p>Spazio&nbps;&nbps triplo</p> Spazio triplo " “ < < > > € € è è & & £ £
Scegliere il font del testo Per scegliere il tipo di carattere con cui un font deve essere visualizzato è sufficiente usare la sintassi: <font face="Arial">testo in Arial</font> E’ bene tener conto di due accorgimenti: scegliere caratteri "sicuri" , che siano cioè senz’altro presenti sul pc dell’utente; non indicare un solo carattere, ma una serie di caratteri che gradualmente si allontanano dal risultato che vorremmo ottenere, ma non di molto, fino ad indicare la famiglia a cui il nostra carattere appartiene. In questo modo il browser dell’utente cercherà di trovare nella propria cartella dei fonts il primo carattere indicato, se non lo trova passerà al secondo, e solo come ultima spiaggia sceglierà si utilizzare il carattere predefinito (il famigerato "Times") <font face="Verdana, Arial, Helvetica, sans-serif"> Verdana e caratteri simili</font><br>
Colore e dimensione del testo Adesso che abbiamo scelto il carattere con cui scrivere il nostro testo possiamo scegliere il colore, con la sintassi: <font color="blue">testo blu</font> ovvero: <font color="#0000FF">testo blu</font> testo blu Le dimensioni del testo si attribuisco mediante l’attributo "size" del tag font. <font size="1">testo di grandezza 1</font><br> Riassumendo il tag font può assumere il seguente formato: <p align=“center”><font size=“4” color=“#FF0000” face=“Comic Sans MS”>Benvenuti sul mio sito</font></p>
Le immagini Le regole da rispettare nell’uso di immagini per il web: non inserire immagini troppo grosse e pesanti; Non inserirne troppe nella stessa pagina; Usare formati compressi, ovvero .jpg, .gif e png Esempio: <p align=“center”><img src=“pubblicita.jpg” alt=“testo alternativo” widht=“120” height=“60” border=0></p> Per inserire le immagini il tag è <img> Gli attributi principali del tag <img> sono: <src> -> indica la posizione esatta dell’immagine (source) <alt> -> rappresenta un testo alternativo <widht> -> indica la dimensione dell’immagine in larghezza in pixel <height> -> indica la dimensione dell’immagine in altezza in pixel <align> -> indica la posizione dell’immagine nella pagina rispetto al testo I valori sono: left, right, center, top, bottom, middle Border -> per inserire una cornice all’immagine assegnando lo spessore del bordo in pixel; il valore 0 indica assenza del bordo
Esempio <HTML> <HEAD> <TITLE> La mia prima pagina con gif animata HTM</TITLE> </HEAD> < Body text=red bgcolor="#0bccee" > <IMG SRC="ca106.gif" align=left> <bR> <IMG SRC="ca106.gif" align=right> <bR><br> <hr> <Center> <H1> Prova immagine <u>Gif animata</u></H1><br> </center> <p align ="justify"> È importante assegnare sempre un colore alla pagina anche quando lo sfondo della pagina è bianco (al massimo assegnare bgcolor="#FFFFFF"). Infatti, come impostazione predefinita, il browser assegna alla pagina il colore di sfondo che l’utente ha impostato nella finestra del sistema operativo:<font color = blue size=3> quindi se l’utente ha impostato uno sfondo nero e voi non avete assegnato nessun colore di sfondo alla pagina</font>, la vostra pagina sarà nera.</p> <p align="left">testo a sinistra</p> <p align="right">testo a destra</p> <p align="center">Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita</p> ciao <A HREF="prova2.htm"> <img align="right" SRC="goccia.jpg" width="50" height="50"> </A> </body> </html>
Gli elenchi - Liste non ordinate <ul> <li> <html> <body> <ul type=“square”> <li>5T </li> <li>4T </li> <li>3T </li> <li>3I </li> </ul> </body> </html> 5T 4T 3T 3I Per realizzare l’elenco occorre aver inserito il seguente codice HTML type=“square” è l’attributo che permette di scegliere il punto elenco come nell’esempio Type=“circle” (pallino nero) è il simbolo di default
Gli elenchi - Liste ordinate <ol> <li> <html> <body> <ol type=“1”> <li>Gennaio </li> <li>Febbraio </li> <li>Marzo </li> <li>Aprile</li> <li>Maggio </li> </ol> </body> </html> Gennaio Febbraio Marzo Aprile Maggio Per realizzare l’elenco occorre aver inserito il seguente codice HTML type=“1” (numeri arabi ) è il simbolo di default type="a“ alfabeto minuscolo type=“A“ alfabeto maiuscolo type=“i“ numeri romani minuscoli type=“I“ numeri romani maiscoli
Esempio di elenchi annidati Combinando tra loro i due tipi di marcatori per gli elenchi è possibile costruirne versioni annidate <ul> <li>primo della 1a lista </li> <li>secondo della 1a lista </li> <ol type =“a”> <li>primo della 2a lista </li> <li>secondo della 2a lista </li> </ol> <li>terzo della 1a lista </li> </ul> Esempio: primo della 1a lista secondo della 1a lista primo della 2a lista secondo della 2a lista terzo della 1a lista
Le Tabelle Tag per creare una tabella <table> che si chiude con </table> Esempio: Contenuto della Tabella <table border=“2” width=“400”> <tr> <td>Contenuto della Tabella</td> </tr> </table> <table> apre la tabella Due attributi del tag table: border=“2” indicare lo spessore del bordo ; se =0 tabella senza bordo width=“400” indica lo spazio occupato dalla tabella in orizzontale <tr>“table row”: indica l’apertura di una riga <td>“table data”: indica una cella all’interno di una riga
Le Tabelle Esempio di tabella con più righe Prima riga <table border=“2” width=“400”> <tr> <td>Prima riga</td> </tr> <td>Seconda riga</td> <td>Terza riga</td> </table> Seconda riga Terza riga
Le Tabelle Esempio di tabella con più colonne Prima cella Seconda cella Terza cella <table border=“2” width=“100%”> <tr> <td width=“15%”>Prima cella</td> <td width=“35%”>Seconda cella</td> <td width=“50%”>Terza cella</td> </tr> </table> Come si nota in questo esempio si può inserire la dimensione in termini percentuali
Le Tabelle Esempio di tabella con più righe e colonne <table border=“2” width=“100%”> <tr> <td>Snx alta</td> <td>Mezzo alta</td> <td>Dx alta</td> </tr> <tr height=“80”> <td>Snx bassa</td> <td>Mezzo bassa</td> <td>Dx bassa</td> </table> Snx alta Mezzo alto Dx alta Snx bassa Mezza bassa Dx bassa Esempio Piramide
Le Tabelle Attributo rowspan applicabile alla cella e quindi inserito nel tag <td> Si utilizza per raggruppare più righe di una cella <table border=“2” width=“100%”> <tr> <td rowspan=“2”>Cella che occupa 2 Righe</td> <td>DX alta</td> </tr> <td>Dx bassa</td> </table> Cella che occupa due righe Dx alta Dx bassa
Le Tabelle Attributo Colspan applicabile alla cella e quindi inserito nel tag <td> Si utilizza per raggruppare più colonne di una cella <table border=“2” width=“100%”> <tr> <td >Snx alta</td> <td>DX alta</td> </tr> <td colspan=“2”>cella che occupa 2 colonne</td> </table> Snx alta Dx alta Cella che occupa due colonne
Riga di intestazione tabella Il marcatore <th> indica table header, ovvero intestazione di tabella. Permette di definire una prima riga automaticamente centrata e in grassetto. Esempio: <table border="2"> <th colspan=3>Cella Testata</th> <tr> <td>prima cella</td> <td>seconda cella</td> <td>terza cella</td> </tr> </table> Cella Testata Prima cella Seconda cella Terza cella
Esercizi Realizzare la seguente tabella inserendo contenuti sia di testo che immagine utilizzando il tag <th> per la testata Pagina web con vari elementi
Frame 20% 80% <html> <frameset cols=“20%,80%”> <frame src=“indice.htm” name=sinistra”> <frame src=“einstein.htm” name=destra> </frameset> </html>
Frame <html> <frameset rows=“20%,80%”> <frame src=“indice.htm” name=sinistra”> <frame src=“einstein.htm” name=destra> </frameset> </html>
Frame <frameset cols="30%,70%"> <Frame name="menu" src="elenco.htm"> <frameset rows="65%,45%"> <Frame name="principale" src="tabella.htm"> <Frame name="prova" Src="prova2.htm"> </frameset>
Ipertesto Progettazione Documentazione Descrizione Breve Strutture Html Link Note descrittive Home Frame (due elementi: Indice descrizione Hobby Autore ...... Argomento trattato dalla pagina Contenuto in home (elenco puntato) ....... .......... Tabella & Immagine Dati personali: Data di nascita – età – residenza – indirizzo e-mail .... ........