GUIDA ALL HTML. Creato da SUPREMO KING

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "GUIDA ALL HTML. Creato da SUPREMO KING"

Dario Giuseppe
8 anni fa
Visualizzazioni

1 GUIDA ALL HTML Creato da SUPREMO_KING 1

2 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

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

3 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

4 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

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

5 ***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

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.

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

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

7 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

.. Esempio di codice: <body bgcolor= #FF0000> In questo caso avremo uno sfondo di colore rosso.

8 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

9 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" " <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 Frame 3 Frame

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.

10 Fine. Possibili ulteriori aggiornamenti della guida. 10

11 11

Documenti analoghi

Comandi principali del linguaggio HTML (Hyper Text Markup Language)

Comandi principali del linguaggio HTML (Hyper Text Markup Language) Caratteristiche di HTML HTML è un linguaggio di formattazione (markup) di documenti ed è il linguaggio base per produrre documenti per