GUIDA BASE PER L’HTML Indice: Pagina 1 GUIDA BASE PER L’HTML Indice: Pagina 2: cosa è l’html e impostazione di base di una pagina html Pagina 3: tag <head></head>tag <title></title> Pagina 4: tag <body></body> Pagina 5: tag <font></font> Pagina 6: Paragrafi, allineamento e blocchi Pagina 7: inserire una immagine Pagina 8: tag <table></table> Pagina 9: tag <a></a> Progetto e realizzazione di Gabriele Branchi
COSA è L’HTML Pagina 2 L’html (hypertext markup language) è un tipo di scrittura basato sull’apertura e la chiusura dei tag html che permette di creare una pagina web. Per i principianti è consigliato l’uso del notepad di Windows per creare il codice delle pagine html. L’impostazione di base di una pagina html è questa: <html> <head> <title></title> </head> <body> </body> </html> È importante quando si chiude un tag mettere il simbolo / prima della parola per segnare la fine del comando.
Il tag <head></head> e il tag <title></title> Pagina 3 Il tag <head></head> e il tag <title></title> Nel tag <head></head> viene inserito il titolo della pagina perciò se voglio che una pagina si chiami «testo» il tag dovrà essere di questo tipo: <html> <head>testo</head> </html> Nel tag <title></title> viene inserito il nome del documento perciò se voglio creare un documento con nome «testo» il tag dovrà essere di questo tipo: <title>testo</title>
il tag <body></body> Pagina 4 il tag <body></body> nel tag <body></body> vengono inseriti tutte gli elementi visualizzati a video: bgcolor - colore di sfondo; background - immagine di sfondo; topmargin - margine superiore; leftmargin - margine sinistro; bottommargin - margine inferiore; rightmargin - margine destro; marginwidth - larghezza margini; marginheight - altezza margini; Esempio: ES: <body topmargin=1 bgcolor=#ffffff></body> In questo caso il margine superiore della nostra pagina avrà ampiezza 1 e il colore di sfondo sarà bianco (#ffffff). Se non si ha a disposizione la tabella dei colori per html piuttosto che scrivere bgcolor=#ffffff basterà scrivere color=white.
Il tag <font></font> Pagina 5 Il tag <font></font> Il tag <font></font> è utilizzato per definire tipo, grandezza e colore del testo racchiuso in esso. Ad esempio, attraverso la riga di codice: <font face=verdana size=2 color=#000000>testo</font> stabilisco che la parola 'testo', contenuta nei tag <font></font>, sia di tipo Verdana (attributo face), di grandezza 2 (attributo size) e di colore nero (attributo color).
Allineamento del testo Pagina 6 Allineamento del testo Per allineare il testo occorre utilizzare gli appositi tag <p>testo</p>. Per allineare il testo occorre utilizzare l'attributo align. <p align=center>testo allineato al centro</p> - Il testo sarà allineato al centro della pagina; <p align=left>testo allineato a sinistra</p> - Il testo sarà allineato sul lato sinistro della pagina; <p align=right>testo allineato a destra</p> - Il testo sarà allineato sul lato destro della pagina <p align=justify>testo giustificato</p> - Il testo sarà giustificato e si adatterà alla pagina e ai margini.
Pagina 7 Inserire una immagine Per inserire un'immagine in HTML, viene usato il tag <img> insieme all'attributo src: <img src="immagine"> (se l'immagine non si trova nella stessa cartella, occorre definire il path). Come per il tag <br>, anche il tag <img> è di sola apertura (non prevede un tag di chiusura).
Il tag <table></table> Pagina 8 Il tag <table></table> Per inserire una tabella si utilizzano i tag <table></table>. Al loro interno vanno ancora i tag <tr></tr> che marcano una riga; nidificati tra questi, a loro volta, vanno i tag <td></td> che delineano invece le colonne (celle). All'interno di questi ultimi andranno gli elementi racchiusi nella tabella. Il codice sorgente avrà così la seguente struttura: <table width=100 height=100 align=center bgcolor=#ffffff cellspacing=0 cellpadding=0> <tr> <td width=50 height=50 valign=top bgcolor=#000000>testo, immagini, altri elementi</td> </tr> </table> Cioè una tabella larga 100 (width), alta 100 (height) allineata al centro, di colore bianco, distanza zero tra ogni cella (cellspacing) e spessore del margine zero (cellpadding). Nei tag <td></td> le colonne sono alte 50 e larghe 50 con colore di sfondo nero.
E il tag <a></a> Pagina 9 E il tag <a></a> Il tag utilizzato per inserire un collegamento ipertestuale è <a></a>. Al tag <a> bisogna associare l'attributo href. All'interno dei tag <a></a> andrà il testo o l'immagine, a cui vogliamo assegnare il collegamento. Esempio: <a href="http://www.google.it”><font face=times size=5 color=black>GOOGLE</font></a> Con questo comando abbiamo deciso che cliccando sulla parola «GOOGLE» si aprirà la pagina iniziale di google. La scritta GOOGLE è scritta in times new roman con grandezza 5 di colore nero.