| inserire: | |||||
| un kink | una immaggine | un elenco | una tabella | un testo | codice colori |
|
Guida html inizio |
|
| L'HTML è un linguaggio di
programmazione finalizzato alla creazione di ipertesti: HTML è infatti
l'acronimo di Hyper Text Markup Lenguage.
Tutti i comandi (tags)
html sono racchiusi tra parentesi angolari, ossia tra il simbolo matematico
"<" (minore) e ">" (maggiore). Attenzione non lasicare spazi tra il
comando e le parentesi angolari. Tutti i comandi che inserite nel vostro
documento dovranno essere scritti dentro i due tag <html> e </html>
che indicano l'inizio e la fine del file html. Come avrete capito il simbolo "/" (slash) si usa per indicare la fine di un comando. Un documento scritto in linguaggio HTML è composto da due parti fondamentali; <head></head> e <body></body>. <head> rappresenta la "testa" del documento, all'interno della quale potete indicare il titolo della pagina Web inserito tra i tag <title>qui scirivi titolo sito</title>. <body> è invece il "corpo" del documento, dove potete scrivere tutto cio che volete, ed è questo che sarà visibile dai vostri utenti. Ecco un esempio di documento HTML molto semplice <html> <head> <title>La mia prima pagina personale</title> </head> <body background="sfondo.gif" bgcolor="#FFFFFF" text="#000000" link="#FF0000"> <h1>Benvenuti nel sito di....</h1> <br><br> qui troverete tante informazioni su... </body> </html> Ecco un esempio di documento HTML molto semplice da usare con il nostro editor word <html> <head> <title>La mia prima pagina personale</title> </head> <body background="sfondo.gif" bgcolor="#FFFFFF" text="#000000" link="#FF0000"><!--open code--> <h1>Benvenuti nel sito di....</h1> <br><br> qui troverete tante informazioni su... <!--close code--></body> </html> Avrete notato la sintassi diversa tra i due codici che si differenziano solo per l'aggiunta dei commenti: <!--open code--> e <!--close code--> che vanno inseriti rispettivamente dopo i tag <body> e prima del tag </body> questi due commenti sono indispensabili per l'editor word, quindi quando fate l'upload di pagine html ricordate di inserirli nel codice, mentre se create le pagine direttamente on-line questi saranno inseriti in automatico. Nella tabella sottostante potete trovare spiegato l'uso di tutti i comandi utilizzati nell'esempio |
|
| TAG | Funzione |
| <html> </html> | Indica al browser l'inizio e la fine del vostro documento html. |
| <head> </head> | Può contenere altri tags come <title> e metatags. |
| <title> la mia prima pagina</title> | Imposta il titolo della pagina che verrà visualizzato sulla finestra del browser. |
| <body background=""> | Imposta un'immagine di sfondo. |
| <body bgcolor="#FFFFFF"> | Imposta il colore di sfondo del documento. |
| <body text="#FFFFFF"> | Imposta il colore del testo |
| <body link="#FFFFFF"> | Imposta il colore del link |
| <body vlink="#FFFFFF"> | Imposta il colore del vlink ovvero il colore del link quando viene visitato |
| <body alink="#FFFFFF"> | Imposta il colore del alink ovvero il colore del link quando si passa con il mouse di sopra |
| <h1> | Heading 1 (fino a 6) imposta un tipo di grandezza predefinita per il testo. |
| <br> | A capo |
| </body> | Chiude il "corpo" del documento. |
|
Guida html link |
|||||||||||||||||||||
|
Un link altro non è che del testo o un'immagine, serve se cliccato a
richiamare una pagina html o una immaggine. di seguito vedremo come creare un link che punti :
|
|||||||||||||||||||||
|
|||||||||||||||||||||
| tabella codici | |||||||||||||||||||||
|
|
Guida html tabelle |
|||||||||||||||
|
Le tabelle, sono utilissime per impaginare il nostro sito. Per indicare al browser l'inizio e al fine della tabella bisogna usare i tags <table> e </table>. All'interno di questi tags userete il tag <tr></tr> per definire una riga, ed il tag <td></td> per definire una colonna esempio <tr><td></td></tr> indica una riga ed una colonna; <tr><td></td><td></td><td></td></tr> indica una riga e tre colonne. |
|||||||||||||||
|
<center> <table border="2" cellpadding="0" cellspacing="0" bordercolor="#808080" width="150" bordercolorlight="#C0C0C0" bordercolordark="#808080" height="106"> <tr> <td colspan="2" width="148" align="center" valign="top" height="19"> testo</td> </tr> <tr> <td width="34" align="left" valign="top" height="68">menu<br>link1<br>link2<br>link3</td> <td width="113" align="center" valign="top" height="68">centro</td> </tr> <tr> <td colspan="2" width="148" align="center" valign="top" height="17">fine</td> </tr> </table> </center> |
<table
border="2"> Imposta la grandezza della cornice. Se impostata a 0 i bordi della tabella non saranno visibili. <table cellpadding="3"> <table cellspacing="2"> <table background="sfondo.gif"> <td width="300" height="100"> <td bgcolor="#123456"> <td background="sfondo.gif"> <td valign="top|middle|bottom"> <td align="left|center|right"> |
|||||||||||||
|
Guida html elenchi |
||||
| Questa sezione è utile per inserire un
elenco all'interno di un documento HTML. Distinguiamo due tipi di elenchi: quelli ordinati da quelli non ordinati. La sintassi per implementare una lista ordinata è la seguente:
|
|
Guida html immagini |
|||||||||||||||||||||||||||||||||||||||||||||
| Le immagini hanno un impatto immediato nei
siti web, e quindi sono fondamentali. Inserire un'immagine nel posto giusto può rendere la vostra pagina più accattivante ed invitare i visitatori a leggere il vostro testo.Le immagini sono importanti per la costruzione di un sito con una grafica attuale e tecnologicamente aggiornata. Utilizzando le immagini potrete creare complessi menu o semplici pulsanti in alternativa al solito testo. Le immagini da inserire nel sito possono essere di diversi formati: .bmp, .gif, .jpg Di solito per realizzare delle figure che occupino poco spazio e quindi si carichino in poco tempo, si opta per il formato .jpg. Inserire un'immagine è un lavoro abbastanza semplice: tutto si basa sul tag <img>. Ecco un esempio: <img src="http://www.tuosito.it/cartellaimmagini/figura.gif" width="150" height="100" border="0"> questa carica l'immagine presente nella cartella: cartellaimmagini
|
|||||||||||||||||||||||||||||||||||||||||||||
|
Guida html testo |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Questa sezione è utile per definire la
formattazione del teso all'interno di un documento HTML.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Guida html colori |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
con questa applet java puoi creare tutti i colori che vuoi e copiare il codice Ricorda il codice che trovi qui sopra va sritto con l'aggiunta del cancelletto # esempio per il green il codice sara' : #00FF00 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| tabella colori | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Questi sono i codici identificativi di tutti i colori utilizzabili.
|