HTML. giovedì 22 settembre 11

Transcript

1 HTML Webmaster con strumenti Open Source

2 AGENDA HTML/XHTML Introduzione Html Struttura di una pagina Html Fogli di stile (CSS)

3 HTML/XHTML L'organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML (il W3C: World Wide Web Consortium) ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0); e - da un certo punto in poi - l'html si è evoluto in XHTML (si tratta dell'html riformulato come linguaggio XML). Anche se abbiamo detto che l'html si è evoluto in XHTML ci sono delle ottime ragioni per incominciare a studiare l'html e non l'xhtml: di fatto l'html verrà utilizzato ancora per diversi anni come linguaggio principe delle pagine web L'HTML è più immediato e consente di incominciare subito a produrre documenti web chi conosce l'xhtml non può non conoscere l'html. La conoscenza dell'html è infatti il prerequisito essenziale di ogni webmaster. Comunque le differenze tra i due linguaggi non sono così marcate e passare dall'uno all'altro non dovrebbe richiedere molta fatica.

4 INTRODUZIONE HTML è la forma abbreviata di HyperText Markup Language L'ipertesto è semplicemente un testo che funziona come un link. Markup Language è una maniera di scrivere informazioni sul layout dei documenti. In pratica un documento in HTML è soltanto un file che contiene solamente testo e nient'altro. Quando un browser apre un file HTML, sarà lo stesso browser a cercare codici HTML nel testo e ad usarli per modificare il layout, inserire immagini, o creare link per altre pagine. Essendo dei semplici file di testo, i documenti HTML possono essere scritti anche col più semplice text editor Molti preferiscono però usare uno speciale HTML editor - possibilmente in grado di evidenziare il risultato visivo piuttosto che i codici - un cosiddetto WYSIWYG ("What You See Is What You Get"). Alcuni dei più diffusi HTML editor, come Frontpage o Dreamweaver danno la possibilità di creare pagine più o meno nello stesso momento in cui si scrivono documenti in Word o qualsiasi altro text editor.

5 TOOLS Editor di Testo Notepad / Block Notes Notepad++ TextEdit IDE NetBeans / Eclipse Dreamweaver

6 FONDAMENTI DI HTML TAGS In pratica, un computer vede una "A" soltanto come una "A" - senza differenze tra grassetto, corsivo, maiuscolo o minuscolo. Per dire al browser che una "A" deve essere in grassetto dobbiamo aggiungere una sigla davanti alla A. Questo tipo di sigla si chiama Tag. Tutti i tag HTML sono racchiusi in < e >. Esempio: un testo come appare sullo schermo. Questo è un esempio di testo in grassetto. Questo è un esempio di testo in grassetto HTML: lo stesso testo in HTML: Questo è un esempio di testo in <b>grassetto</b> Come puoi vedere, il tag iniziale <b> indica che tutto quello che segue dovrà essere scritto in grassetto. Il corrispondente tag finale </b> indica che il browser non dovrà più scrivere in grassetto.

7 TAG (I) formattazione del testo <h1>,<strong>,<italic>,<bold>,<cite>,<pre>,<blink>,<font>, collegamenti del testo ed immagini <a>,<img> paragrafi <p>,<hr>,<br>, liste <ul>,<li>

8 TAG (II) <TAG attributi>contenuto</tag> <P align="right">testo</p> <TAG attributo_1="valore1" attributo_2="valore2">contenuto</tag> <IMG widht="20" height="20" src="miaimmagine.gif" alt="alt">

9 TAG (III) Annidamento e indentazione <TAG1 attributi> contenuto 1 <TAG2> contenuto 2 </TAG2> </TAG1> Potremmo quindi avere ad esempio: <P align="right"> testo 1 <P align="left"> testo 2 </P> </P>

10 STRUTTURA DELLA PAGINA Normalmente le pagine web consistono in una "testa", in inglese head e un "corpo", detto anche body. L'head viene usata per testo e tag che non vengono mostrati direttamente sulla pagina. Il body viene usato per testo e tag che sono visibili direttamente sulla pagina. In pratica, tutte le pagine web hanno un tag <html> all'inizio e alla fine, che indicano al browser l'inizio e la fine del documento. Il codice più semplice - quello che userai per ogni pagina che farai, è questo:

11 STRUTTURA SEMPLICE DI UN FILE HTML <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN > <html> <head> iso <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>la mia prima pagina web</title> <meta name="keywords" content="cucina,cooking,cucinare,ricette" /> <meta name="description" content="sito personale di cucina" /> <meta name= generator" content= Editor Testuale"> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> </body> </html>

12 HTML VS XHTML Gli elementi devono essere correttamente annidati I nomi di elementi e attributi devono essere in minuscolo Gli elementi non vuoti devono essere chiusi

13 I valori degli attributi devono essere posti tra virgolette Gli elementi vuoti devono terminare con /> Uso di id e name

14 ALTRI META TAG Per caricare la stessa pagina (refresh): <META HTTP-EQUIV="refresh" CONTENT= x"> Entro x secondi il documento sarà ricaricato Per fare il forward verso una nuova pagina: <META HTTP-EQUIV="refresh" CONTENT= x;url=y"> Entro x secondi sarà caricata la pagina y

15 HTML LINKS I link sono la parte più importante del world wide web. Sono i link che tengono insieme la rete. Ci sono tre tipi di link che puoi avere nel tuo sito: Link che si agganciano alla pagina corrente (Interni). Link per altre pagine dello stesso sito (Locali). Link per pagine al di fuori del sito (Globali). E' possibile creare testi e immagini funzionanti come link. Questa sezione tratterà i link più "tradizionali": Testi e Immagini.

16 COME FARE UN LINK I tag usati per generare i link sono <a> e </a>. Il tag <a> indica dove il link ha inizio, mentre </a> ne indica la fine. Tutto quello che è contenuto tra questi due tag si comporterà come un link. La meta del link viene specificata aggiungendo al tag <a>usando l'attributo href=" L'esempio qui sotto ti mostra come far diventare la parola Clicca <a href= >qui</a> per andare su yahoo

17 ESEMPIO Errori più comuni: <a href="file:///c percorsonomefile.html">testo</a> Come mai non vedo l immagine del mio PDF in anteprima? Come mai non vedo la mia presentazione che gira in automatico!? alcuni siti la hanno! Esempio pratico: links.html

18 COMMENTI  e ci permette di "commentare" i vari punti della pagina. Ad esempio:

19 FONT <p> <font color="green" size= 10 > <i>titolo 1</i> </font> </p> noi andremo verso un <p class="formattatitoli"> titolo 1 </p> P.S. l uso di <font> è deprecato dal W3C

20 COLORE DI SFONDO <body bgcolor="blue"> <body bgcolor="#0000ff"> web safe color "palette sicura" dei 256 colori che sicuramente l utente è in grado di visualizzare.

21 ma solo 5 min...

22 ...DOPO 5 MIN

23 IMMAGINE SFONDO Per inserire un immagine come sfondo è sufficiente utilizzare la seguente sintassi: <body background="imgsfondo.gif"> È anche possibile combinare i due attributi, in modo che mentre l immagine di sfondo viene caricata, venga comunque visualizzata una colorazione della pagina: <body bgcolor="#0000ff" background="imgsfondo.gifgif">

24 MARGINI <body leftmargin="0" topmargin="0"> Tuttavia è bene sapere che i browser nel corso degli anni hanno introdotto dei tag e degli attributi "proprietari", con lo scopo di ottenere determinati effetti di visualizzazione, o indicare in qualche modo particolare il contenuto. Netscape/Firefox: <body marginleft="0" margintop="0"> Internet Explorer: <body leftmargin="0" topmargin="0"> Se avrete a che fare con pagine web di altri webmaster vi capiterà spesso di incontrare questo genere di sintassi: <body leftmargin="0" topmargin="0" marginleft="0" margintop= 0 >

25 TABELLE <table> <tr> <td> Esempio: tabelle.html Esempio: tabform.html

26 IMMAGINI GIF (Graphic Interchange Format): le immagini GIF hanno una tavolozza che non supera i 256 colori, per questo vengono utilizzate spesso per grafici o icone. È possibile ottimizzare il peso questo tipo di file riducendo ancora il numero di colori. Oltre a questo GIF ci consente di impostare trasparenze nelle immagini e di creare piccoli banner, questo formato consente infatti di rappresentare anche semplici animazioni (GIF animate) JPG (o JPEG) È l'acronimo del gruppo di ricerca che ha ideato questo formato (il Joint Photographic Experts Group), idoneo per le immagini di qualità fotografica PNG (Portable Network Graphic). Il PNG è un tipo di immagine introdotto più recentemente, elaborato dal W3C per risolvere i problemi di copyright del formato GIF (che è invece proprietario); tuttavia oggi il PNG è letto oramai da tutti i browser e offre alcune caratteristiche che gli altri formati non hanno (come il supporto al canale alfa, caratteristica questa non ancora perfettamente supportata da ogni browser). PNG permette sia di rappresentare immagini di qualità fotografica (PNG24), sia di ottimizzare colori in modo simile a GIF (PNG8-256 colori)

27 IMMAGINI (II) <img src=" alt= testo > <img src="logo.gif" width="224" height="69" /> <img src="logo.gif" width="224" height="69" hspace="20"> <img src="logo.gif" width="224" height="69" vspace="20">

28 IMMAGINI (III) Esempio: immagini.html <img src="image.jpg" align="bottom"> I valori di ALIGN ammessi sono: Bottom: il lato inferiore dell'immagine appare allineato alla base della riga di testo (valore predefinito); Middle: il punto mediano dell'altezza dell'immagine si allinea alla base della riga di testo; il testo si spezza e prosegue sotto l'immagine; Left: l'immagine si posiziona sul lato sinistro della pagina e il testo scorre intorno a lei sul lato destro; Right: l'immagine si posiziona sul lato destro della pagina e il testo scorre intorno a lei sul lato sinistro.

29 PUNTI ELENCO <OL> <LI>elemento 1 <LI>... <LI>elemento n </OL> Esempio: liste.html Il tag di apertura <OL> supporta l'attributo type il quale risulta molto utile se bisogna interrompere la lista e poi riprenderla procedendo con la numerazione. L'attributo type="valore" accetta 5 diversi valori corrispondenti a cinque diverse numerazioni: 1: numerazione araba (quella predefinita ossia di default) i: numerazione romana (lettere minuscole) I: numerazione romana (lettere maiuscole) a: numerazione letterale (lettere minuscole) A: numerazione letterale (lettere maiuscole)

30 DIV Il blocco di testo va a capo, ma - a differenza del paragrafo - non lascia spazi prima e dopo la sua apertura. <div style="color:#00ff00"> <div style="color:#00ff00"> <h3>intestazione</h3> <p>paragrafo</p> </div>

31 DIV (II) <div style="border:1px solid black; margin:15px; padding:5px; width:300px; float:right; text-align:center; color:#0080c0; fontsize:10px; font-style:italic; font-weight:bold;"> ciao ciao ciao ciao </div>

32 CSS Esempi...

33 ALLA PROSSIMA!!!!!