Sei sulla pagina 1di 11

GUIDA ALL HTML

Creato da SUPREMO_KING

SUPREMO KING

Guida allHtml

SUPREMO KING

Guida allHtml

PREMESSE
Lhtml il linguaggio fondamentale attraverso il quale possibile creare delle semplici pagine web. Lhtml 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 lunico obiettivo di renderlo accessibile anche a coloro che non hanno alcuna intenzione di studiare libri di guide, al fine di capirci qualcosa. Lultima 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

lhtml e salvate con lestensione .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 allHtml

SUPREMO KING

Guida allHtml

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 nelleditor, 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 visualizzaSono 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 :

cisum agnam emina nomekop mor daolnwod omed hctap taehc inoisnecer inoizulos ihccurt ebirTsemaG
SUPREMO KING Guida allHtml

SUPREMO KING

Guida allHtml

Il codice che quindi fa visualizzare questo titolo il seguente:


<HTML> </HEAD>

</HEAD> <BODY> .. </BODY> </HTML>

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

SUPREMO KING

cisum agnam emina nomekop mor daolnwod omed hctap taehc inoisnecer inoizulos ihccurt ebirTsemaG

<title>

</title>

FORMATO CARATTERI

Guida allHtml

SUPREMO KING

Guida allHtml

***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,anchesso molto semplice e cio: <img src= link dellimmagine> Possiamo anche inserire unimmagine alla quale associamo un link esterno(cio ciccando sullimmagine veniamo indirizzati in unaltra pagina web ad esempio questo utile per i pulsanti),in tal caso il tag questo: <a href="indirizzo del collegamento"><img src="link dellimmagine"></a>

SUPREMO KING

Guida allHtml

<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:

> " E NI G A M M I L R U " = crs " x pL E XI P M U N : T H G I E H ; x p L E X I P M U N : H T D I W ; ) 3 = el y t s, 0 = y ti c a p O h si nif , 0 0 1 = y ti c a p o ( a h p l a : R E T L I F " = el y t s G M I <

> " E NI G A M M I L R U " = crs " x pL E XI P M U N : T H G I E H ; x p L E X I P M U N : H T D I W ; ) 1 = el y t s, 0 = y ti c a p O h si nif , 0 0 1 = y ti c a p o ( a h p l a : R E T L I F " = el y t s G M I <

> " E NI G A M M I L R U " = crs " x pL E XI P M U N : T H G I E H ; x p L E X I P M U N : H T D I W ; ) 2 = el y t s, 0 = y ti c a p O h si nif , 0 0 1 = y ti c a p o ( a h p l a : R E T L I F " = el y t s G M I <

COLORI E anche possibile cambiare i colori di un testo o di una singola lettera sfruttando il tag:

> VI D/ < > VI D / < > 2 = r e d r o b L E XI P M U N = ht d i w " E NI G A M M I L R U " = cr s L E XI P M U N = t h g i e h G M I < > " x p 0 0 1 : T H G I E H ; x p 0 0 1 : H T D I W ; ) ( y a r X : R E T L I F " = el y t s V I D <

SUPREMO KING

http://img.forumfree.net/html/codicecolore.htm

SUPREMO KING

C ne sono molti altri che potete benissimo reperire in Internet,facendo una semplice ricerca con Google.

l'immagine illuminata a sinistra e scura a destra:

Immagine sfocata ai lati e ovale:

effetto raggi X:

Immagine illuminata al centro

Possiamo anche applicare degli effetti sulle immagini:

Guida allHtml

Guida allHtml

SUPREMO KING

Guida allHtml

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 allHtml

SUPREMO KING

Guida allHtml

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 allHtml

SUPREMO KING

Guida allHtml

FRAME Gli iframe sono molto utili, infatti permettono di inserire una pagina web in unaltra,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 allHtml

SUPREMO KING

Guida allHtml

Fine. Possibili ulteriori aggiornamenti della guida.

SUPREMO KING

Guida allHtml

10

11