GUIDA ALL HTML Creato da SUPREMO_KING 1
PREMESSE L html è il linguaggio fondamentale attraverso il quale è possibile creare delle semplici pagine web. L html non è un linguaggio di programmazione ma un linguaggio di markup in quanto descrive i meccanismi di rappresentazione (strutturali, semantici o presentazionali) del testo. Col passare degli anni si è cercato di migliorare questo linguaggio con l unico obiettivo di renderlo accessibile anche a coloro che non hanno alcuna intenzione di studiare libri di guide, al fine di capirci qualcosa. L ultima versione (del 1999) è la 4.02,ed è questa che ovviamente cercherò di spiegarvi come meglio potrò. SI COMINCIA! Prima di tutto è importante sapere che questo linguaggio non necessita di un particolare programma per `funzionare` :basta un semplice editor di testo. Apriamo pertanto un editor di testo,ad esempio quello che ci offre Windows (il blocco note). Digitiamo i seguenti tag [vedi sotto],separati ciascuno da un Invio: <HTML><HEAD></HEAD><BODY></BODY></HTML> Tra <BODY> e </BODY> scrivete: Ciao,questo è il mio primo esempio con l html e salvate con l estensione.htm Ciccate sul file salvato e si aprirà una pagina web (ovviamente in modalità non in linea) con dentro ciò che avete scritto tra i tag body.. Avete così creato la vostra prima pagina web TAG I tags sono degli indicatori che servono per dire al browser come un elemento testuale o grafico deve apparire nella pagina web. Tutto il codice html si costruisce attraversi i tags. Essi si indicano racchiusi tra <..>. Esempio: <body> </body> oppure <i> </i> ecc. 2
Ecco sotto un esempio di alcuni tags importanti: <br> Il testo va a capo <p align=center> testo </p> Il testo(in un paragrafo) viene allineato al centro <p align=left> testo </p> Il testo viene allineato a sinistra <p align=right> testo </p> Il testo viene allineato a destra <pre> testo </pre> Il testo,nella pagina web, viene presentato così come è stato scritto nell editor, cioè con la stessa formattazione. <div align=center> testo </p> Il testo(in piu paragrafi)viene allineato al centro <div align=left> testo </p> Il testo(in piu paragrafi)viene allineato a sinistra <div align=right> testo </p> Il testo(in piu paragrafi)viene allineato a destra <blockquote> testo </blockquote> Il testo viene visualizzato in modo piu rientrato rispetto al resto A differenza degli altri i tags demo download rom pokemon anime manga GamesTribe music trucchi soluzioni recensioni cheat patch <HTML></HEAD></HEAD> testo <BODY></BODY></HTML> Sono I tag obbligatori che costituiscono il corpo della pagina,senza di essi la pagina non si visualizza Sono tutto sommato la cornice serve a dire al browser che quella è una pagina web,se infatti li togliessimo si visualizzerebbe il codice è non la pagina. TITOLO Il titolo di una pagina,cioè quello che visualizza in alto alla finestra,devi inserirlo tra i tag <title> </title> nel corpo <head> </head>, ad esempio nel forum GamesTrine il titolo è: 3
pokemon anime manga trucchi music soluzioni recensioni cheat patch demo download rom Il codice che quindi fa visualizzare questo titolo è il seguente: </title> </HEAD> <BODY>.. </BODY> </HTML> <HTML> </HEAD> <title> GamesTribe FORMATO CARATTERI I caratteri della scrittura sono molto importanti e ce se sono vari,tutti molto semplici da ricordare (anche in questo caso ricorro ad una tabella esemplificativa): <b> </b> <i> </i> <u> </u> <sup> </sup> <sub> </sub> <strike> </strike> <dfn> </dfn> <cite> </cite> <code> </code> <small> </small> <font size= (1 10) > </font> <font face="nome font."> </font> <marquee> </marquee>*** Testo in Grasseto Testo in corsivo Testo sottolineato Formato Apice Formato Pedice Testo Barrato Definizione Citazione Codice Testo piccolo Dimensione Testo Tipo di font Testo scorrevole 4
***Per essere piu precisi, se vogliamo definire grandezza e carattere usiamo questo codice: <font color=#ff0000 size= 5 face="courier"> < marquee loop =-1> </marquee>< /font> Il marquee non rende scorrevole solo le scritte, ma anche le immagini: unica limitazione sono le gif animate. LINK Per inserire link ad altre pagine basta usare questo tag: <a href= link della pagina >nome link</a> ---- Per inserire un collegamento ipertestuale a un punto preciso di un documento,occorre 1. aprire il documento a cui ci si vuole collegare, scegliere il punto in cui la pagina deve essere aperta, e inserire un segnalibro attraverso la seguente linea di codice: <a name="nome che vuoi dare al segnalibro">parola a cui effettuare il link </a> 2. ritornare al documento da cui ci si vuole collegare e scrivere, al punto giusto la seguente linea di codice: <a href="nomefile.htm#nome segnalibro> parola < /a > IMMAGINI Per inserire delle immagini nella nostra pagina web,dobbiamo servirci di un tag,anch esso molto semplice e cioè: <img src= link dell immagine > Possiamo anche inserire un immagine alla quale associamo un link esterno(cioè ciccando sull immagine veniamo indirizzati in un altra pagina web ad esempio questo è utile per i pulsanti ),in tal caso il tag è questo: <a href="indirizzo del collegamento"><img src="link dell immagine"></a> 5
HEIGHT: <IMG style="filter: alpha(opacity=100, finishopacity=0,style=2); WIDTH: NUM PIXELpx; HEIGHT: NUM PIXELpx" src="url IMMAGINE"> Possiamo anche applicare degli effetti sulle immagini: Immagine sfocata ai lati e ovale: HEIGHT: <IMG <IMG style="filter: style="filter: NUM NUM PIXELpx" PIXELpx" alpha(opacity=100, alpha(opacity=100, src="url src="url IMMAGINE"> IMMAGINE"> finishopacity=0,style=1); finishopacity=0,style=3); WIDTH: WIDTH: NUM NUM PIXELpx; PIXELpx; l'immagine illuminata a sinistra e scura a destra: <IMG </DIV></DIV> <DIV style="filter: height=num PIXEL Xray(); src="url WIDTH: IMMAGINE" 100px; HEIGHT: width=num 100px"> PIXEL border=2> Immagine illuminata centro effetto raggi X: C è ne sono molti altri che potete benissimo reperire in Internet,facendo una semplice ricerca con Google. COLORI E anche possibile cambiare i colori di un testo o di una singola lettera sfruttando il tag: <font color= # > testo da colorare </font> Al posto dei puntini bisogna inserire il codice standard del colore tutti i codici li trovate a questa pagina web: http://img.forumfree.net/html/codicecolore.htm 6
ad esempio,al colore rosso corrisponde il codice #FF0000 Quindi se voglio colorare il testo Ciao in rosso devo scrivere: <font color= #FF0000>Ciao </font> Cosi vale anche per intere frasi o paragrafi. SFONDO COLORATO Se si vuole uno sfondo colorato, basta inserire nel tag <body> l'opzione bgcolor="#... Esempio di codice: <body bgcolor= #FF0000> In questo caso avremo uno sfondo di colore rosso. TABELLE Per creare una tabella in linguaggio HTML,occorre seguire dei passaggi Dichiara la tabella con i Tag: <table> </table> Inserisci tra questi tag le righe che occorrono con i tag,ad esempio per 3 righe scriveremo <table> </table> 7
Tra i tag.. inserisci le colonne con i tag, ad esempio inseriamo 2 colonne per ogni riga,scriveremo <table> </table> La nostra tabella adesso è completa. È sarà tipo questa: 8
FRAME Gli iframe sono molto utili, infatti permettono di inserire una pagina web in un altra,mediante degli scroller che ne limitano le dimensioni. Ecco il codice per inserirlo: <frame src="url" attributi> </iframe> Un esempio di Iframes reperito dal web: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/tr/rec-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>Un semplice documento frameset</title> </HEAD> <FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src="contenuti_del_frame1.html"> <FRAME src="contenuti_del_frame2.gif"> </FRAMESET> <FRAME src="contenuti_del_frame3.html"> <NOFRAMES> <P>Questo documento frameset contiene: <UL> <LI><A href="contenuti_del_frame1.html">del contenuto opportuno</a> <LI><IMG src="contenuti_del_frame2.gif" alt="un'immagine opportuna"> <LI><A href="contenuti_del_frame3.html">dell'altro contenuto opportuno</a> </UL> </NOFRAMES> </FRAMESET> </HTML> che potrebbe creare una configurazione di frame simile a questa: --------------------------------------- Frame 1 --------- Frame 3 Frame 2 ---------------------------------------- 9
Fine. Possibili ulteriori aggiornamenti della guida. 10
11