GUIDA ALL’ HTML Creato da SUPREMO_KING
SUPREMO KING
Guida all’Html
1
SUPREMO KING
Guida all’Html
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.
SUPREMO KING
Guida all’Html
2
SUPREMO KING
Guida all’Html
Ecco sotto un esempio di alcuni tags importanti:
<br> <p align=center> testo </p> <p align=left> testo </p> <p align=right> testo </p> <pre> testo </pre>
<div align=center> testo </p> <div align=left> testo </p> <div align=right> testo </p> <blockquote> testo </blockquote>
Il testo va a capo Il testo(in un paragrafo) viene allineato al centro Il testo viene allineato a sinistra Il testo viene allineato a destra Il testo,nella pagina web, viene presentato così come è stato scritto nell’editor, cioè con la stessa formattazione. Il testo(in piu paragrafi)viene allineato al centro Il testo(in piu paragrafi)viene allineato a sinistra Il testo(in piu paragrafi)viene allineato a destra Il testo viene visualizzato in modo piu rientrato rispetto al resto
A differenza degli altri i tags <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 che 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 si visualizza in alto alla finestra,devi inserirlo tra i tag <title>…</title> nel corpo <head>…</head> , ad esempio nel forum GamesTrine il titolo è: GamesTribe trucchi soluzioni recensioni cheat patch demo download rom pokemon anime manga music
SUPREMO KING
Guida all’Html
3
SUPREMO KING
Guida all’Html
Il codice che quindi fa visualizzare questo titolo è il seguente: <HTML> </HEAD>
<title> GamesTribe trucchi soluzioni recensioni cheat patch demo download rom pokemon anime manga music </title> </HEAD> <BODY> ……….. </BODY> </HTML>
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>***
SUPREMO KING
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
Guida all’Html
4
SUPREMO KING
Guida all’Html
***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>
SUPREMO KING
Guida all’Html
5
SUPREMO KING
Guida all’Html
Possiamo anche applicare degli effetti sulle immagini: • Immagine sfocata ai lati e ovale: <IMG style="FILTER: alpha(opacity=100, finishOpacity=0,style=2); WIDTH: NUM PIXELpx; HEIGHT: NUM PIXELpx" src="URL IMMAGINE">
• l'immagine illuminata a sinistra e scura a destra: <IMG style="FILTER: alpha(opacity=100, finishOpacity=0,style=1); WIDTH: NUM PIXELpx; HEIGHT: NUM PIXELpx" src="URL IMMAGINE">
• Immagine illuminata al centro <IMG style="FILTER: alpha(opacity=100, finishOpacity=0,style=3); WIDTH: NUM PIXELpx; HEIGHT: NUM PIXELpx" src="URL IMMAGINE">
• effetto raggi X: <DIV style="FILTER: Xray(); WIDTH: 100px; HEIGHT: 100px"> <IMG height=NUM PIXEL src="URL IMMAGINE" width=NUM PIXEL border=2> </DIV></DIV>
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
SUPREMO KING
Guida all’Html
6
SUPREMO KING
Guida all’Html
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 <tr></tr>,ad esempio per 3 righe scriveremo <table> <tr> </tr> <tr> </tr> <tr> </tr> </table> Guida all’Html
7
SUPREMO KING
Guida all’Html
• Tra i tag <tr>..</tr> inserisci le colonne con i tag <td>…</td>, ad esempio inseriamo 2 colonne per ogni riga,scriveremo
<table> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>
La nostra tabella adesso è completa. È sarà tipo questa:
SUPREMO KING
Guida all’Html
8
SUPREMO KING
Guida all’Html
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 | | | | | ---------------------------------------SUPREMO KING
Guida all’Html
9
SUPREMO KING
Guida all’Html
Fine. Possibili ulteriori aggiornamenti della guida.
SUPREMO KING
Guida all’Html
10
11