1 / 38

Il linguaggio HTML

Il linguaggio HTML. Il linguaggio HTML. Indice degli argomenti. Introduzione Struttura di un documento I tag di intestazione Il corpo di una pagina HTML I collegamenti ipertestuali Gestione del testo Impostare i caratteri Paragrafi e allineamenti

xerxes-hodges
Download Presentation

Il linguaggio HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Il linguaggio HTML

  2. Il linguaggio HTML Indice degli argomenti • Introduzione • Struttura di un documento • I tag di intestazione • Il corpo di una pagina HTML • I collegamenti ipertestuali • Gestione del testo • Impostare i caratteri • Paragrafi e allineamenti • Titoli ed elenchi puntati e numerati • Le immagini in HTML : il tag IMG • Le tabelle in HTML • I FRAME

  3. Introduzione • Hyper Text Markup Language • Linguaggio utilizzato per la creazione delle pagine Web da pubblicare in Internet • Permette la creazione di documenti ipertestuali • Le pagine HTML sono create con editor testuali (es. Blocco Note di Windows) o editor WYSIWYG – What You See Is What You Get - (es. FrontPage) • Vengono poi interpretate e visualizzate da un software chiamato Browser (es. Internet Explorer) • Le pagine Web create sono dei file di testo con estensione .htm o .html • La pagina iniziale di un sito (home page) deve chiamarsi index.htm o default.htm • I comandi utilizzati sono chiamati TAG ed hanno il seguente formato: <Nome del tag> • Alcuni tag sono doppi, ossia devono essere aperti e poi chiusi <Nome del tag> ………….. </Nome del tag>

  4. Introduzione • I siti Web, prima della pubblicazione, vanno creati in locale, cioè sul tuo hard disk. Solo successivamente vengono spediti attraverso programmi appositi. • Per i nomi dei file e per le estensioni degli stessi usa caratteri sempre in minuscolo. • Ricorda che la modifica del tuo sito Web avviene tramite programmi FTP (File Trasfer Protocol) mediante password e UserId. Quindi nessun altro, oltre te, può modificare le pagine. • Per scrivere codice HTML puoi utilizzare qualsiasi editor HTML testuale (HomeSite, HotDog, DreamWeaver ecc.), ma anche solo Blocco Notes di Win95.

  5. Struttura di una pagina INTESTAZIONE Informazioni sulle caratteristiche della pagina <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> CORPO DEL DOCUMENTO Il testo della pagina con immagini e collegamento

  6. I tag di intestazione TITOLO DELLA PAGINA Titolo che apparirà nella barra del titolo In caso di salvataggio dell'URL con "Aggiungi a preferiti" il tag TITLE dà il nome al collegamento. In altre parole, quando si salva l'indirizzo, il browser assegna allo stesso quanto presente all'interno di <TITLE></TITLE>. Il contenuto riportato tra i tag <TITLE></TITLE> è anche utilizzato da alcuni motori di ricerca per indicizzare la pagina e trovare parole chiave. Per questo è bene fornire nel TITLE una descrizione dettagliata ma sintetica della pagina, con tutte le parole chiave che i motori possono indicizzare. <HTML> <HEAD> <TITLE>Titolo della pagina </TITLE> <META NAME=description CONTENT=“breve descrizione della pagina”> <META NAME=keywords CONTENT=“parola1, parola2, ….”> </HEAD> Informazioni sulla pagina

  7. Tag META <HTML> <HEAD> <TITLE>Titolo della pagina </TITLE> <META NAME=“DESCRIPTION” CONTENT=“breve descrizione della pagina”> <META NAME=“KEYWORDS” CONTENT=“parole chiave per i motori di ricerca”> <META NAME=“AUTHOR” CONTENT=“Cognome Nome dell’autore”> <META NAME=“GENERATOR” CONTENT=“editor con cui il documento è stato generato”> <META NAME=“ROBOTS” CONTENT=“noindex”> Per non fare rilevare la nostra pagina ai motori di ricerca <META HTTP-EQUIV="Refresh" CONTENT="5; url=pippo.htm"> Dove CONTENT="5 e' il numero di secondi entro il quale la nuova pagina sara' caricata; mentre url=pippo.htm" e' il file che verra' caricato. </HEAD> Clicca qui per vedere il risultato

  8. Il corpo di una pagina HTML Il colore di sfondo BGCOLOR Permette di impostare il colore di sfondo <BODY BGCOLOR=“#RRGGBB”> oppure <BODY BGCOLOR=NomeColore> ……. </BODY> Esempio Imposta sfondo di colore rosso <BODY BGCOLOR=“#FF0000”> oppure <BODY BGCOLOR=red> ……. </BODY>

  9. Il corpo di una pagina HTML Il colore del testo TEXT Permette di impostare il colore del testo <BODY TEXT=“#RRGGBB”> oppure <BODY TEXT=NomeColore> ……. </BODY> Esempio Imposta test di colore verde <BODY TEXT=“#00FF00”> oppure <BODY TEXT=green> ……. </BODY>

  10. Il corpo di una pagina HTML Immagine di sfondo BACKGROUND Permette di impostare l’immagine di sfondo (.GIF, .JPG) <BODY BACKGROUND=“Percorso e nome del file”> ……. </BODY> Imposta come immagine di sfondo il file sfondo1.gif Esempio <BODY BACKGROUND=“sfondo1.gif”> ……. </BODY>

  11. Gestione del testo Impostare i caratteri <BODY> ……. <B>Buongiorno in grassetto</B> <BR><I>Buongiorno in corsivo</I> <BR> <U>Buongiorno sottolineato</U> <BR> ……. </BODY> Inserisce un ritorno a capo esempio

  12. Gestione del testo Impostare i caratteri <BODY> <H1>Titolo formato H1</H1> <BR> <H2>Titolo formato H2</H2> <BR> <H3>Titolo formato H3</H3> <BR> <H4>Titolo formato H4</H4> <BR> <H5>Titolo formato H5</H5> <BR> <H6>Titolo formato H6</H6> <BR> </BODY> I tag Hn modificano anche l’interlinea del paragrafo al quale appartengono esempio

  13. Gestione del testo Impostare i caratteri <BODY> <FONT FACE=“tipo font" SIZE=n COLOR=colore>Carattere da formattare</FONT> </BODY> Da 1 a 7 Codice esadecimale o descrizione <BODY> <FONT FACE="arial" SIZE=5 COLOR=red>Carattere da formattare</FONT> </BODY> esempio

  14. Gestione del testo Impostare i caratteri <BODY> <SUP>tutto ciò che è scritto qui è visualizzato come apice</SUP> <SUB>tutto ciò che è scritto qui è visualizzato come pedice</SUB> </BODY> <BODY> HTML.it <SUP>&copy;</SUP> è un marchio registrato<br><br> HTML.it <SUB>&copy;</SUB> è un marchio registrato </BODY> esempio

  15. Gestione del testo Impostare i caratteri HTML legge il testo ovviamente da sinistra verso destra e, senza alcun tipo di formattazione, manda a capo alla fine di ogni riga senza soluzione di continuità. Il tag <XMP></XMP> indica la presenza di testo preformattato. <BODY> <XMP> testo da visualizzare esattamente come è scritto </XMP> </BODY> esempio

  16. Il corpo di una pagina HTML I collegamenti ipertestuali (collegamenti esterni) HREF Permette di impostare la pagina html o il sito Internet al quale effettuare il collegamento <BODY> ……. <A HREF=“body-background.htm">collegamento al file body-background.htm</A> <A HREF=“Pagina2.htm">Clicca qui per visitare la pag. 2</A> ……. </BODY> esempio Testo sul quale cliccare per attivare il link

  17. Il corpo di una pagina HTML Colore dei collegamenti LINK Imposta il colore dei link NON ancora VISITATI <BODY LINK=“red”> ……. </BODY> ALINK Imposta il colore dei link GIA` visitati <BODY ALINK=“yellow”> ……. </BODY> Esempio

  18. Il corpo di una pagina HTML Paragrafi Il tag <P> definisce un nuovo paragrafo del testo indicando al browser che lo stesso deve rimanere su una nuova riga ed essere posizionato a destra, a sinistra o al centro. Se non specificato oltre, il tag <P> allinea il testo di default sulla sinistra. <P ALIGN=left>Definisce un paragrafo e allinea sulla sinistra (left).<P ALIGN=right>Definisce un paragrafo e allinea sulla destra (right).<P ALIGN=center>Definisce un paragrafo ed allinea al centro (center). Esempio

  19. Il corpo di una pagina HTML Allineamento del testo Il tag <DIV> </DIV> viene utilizzato per allineare il testo in posizione orizzontale a sinistra, destra e centro della pagina. L'attributo ALIGN è fondamentale a questo scopo. <DIV ALIGN=left> Testo e immagini a sinistra</DIV>Sposta gli elementi contenuti tra i suoi tag sulla sinistra. <DIV ALIGN=right> Testo e immagini a destra</DIV>Sposta gli elementi sulla destra. <DIV ALIGN=center> Testo e immagini centrate</DIV>Sposta gli elementi in posizione centrale. Esempio

  20. Il corpo di una pagina HTML Linee orizzontali <HR align="CENTER" size="2" width="400" color="Red" noshade > Posizione della riga: left, center, right Altezza, in pixel, della riga Lunghezza, in pixel, della riga. Si può esprimere anche in percentuale di spazio disponibile (p.e. width=80%) Colore della riga Se presente elimina l'effetto 3D della linea. Se omesso produce tale effetto. Esempio

  21. Il corpo di una pagina HTML Elenchi numerati (Ordered List) <OL><LI> Prima voce di menu<LI> Seconda voce di menu<LI> Terza voce di menu</OL> Ogni tag <LI> inserisce un ritorno a capo Indicizzazione alfabetica maiuscola <OL TYPE=A Indicizzazione alfabetica minuscola <OL TYPE=a Indicizzazione numeri romani maiuscoli <OL TYPE=I Indicizzazione numeri romani minuscoli <OL TYPE=i Esempio

  22. Il corpo di una pagina HTML Elenchi puntati (Unordered List) <UL><LI> Prima voce di menu<LI> Seconda voce di menu<LI> Terza voce di menu</UL> Ogni tag <LI> inserisce un ritorno a capo Pallini pieni <OL TYPE=disc Cerchi vuoti <OL TYPE=circle quadrati <OL TYPE=square Esempio

  23. Tabelle Il corpo di una pagina HTML <TABLE> e' il TAG che deve aprire e chiudere una tabella. Le dimensioni vengono definite con WIDTH (larghezza) HEIGHT (altezza) e possono essere espresse in pixel o in percentuale della pagina:<TABLE WIDTH=500></TABLE> <TABLE WIDTH=70%> </TABLE> PIXEL Grandezza fissa indipendentemente dalla risoluzione di visualizzazione della pagina IN %ALE Grandezza variabile in funzione della risoluzione di visualizzazione della pagina

  24. Il corpo di una pagina HTML Tabelle <TABLE BORDER=1 WIDTH=300> <TD WIDTH=100> primo campo della tabella </TD> <TD WIDTH=100> secondo campo della tabella </TD> <TD WIDTH=100> terzo campo della tabella </TD </TABLE> Esempio

  25. Il corpo di una pagina HTML Tabelle <TABLE BORDER=1 WIDTH=300> <TR> <TD WIDTH=100>primo campo della tabella</TD> <TD WIDTH=100>secondo campo della tabella</TD> <TD WIDTH=100>terzo campo della tabella</TD </TR> <TR> <TD WIDTH=100>quarto campo della tabella</TD> <TD WIDTH=100>quinto campo della tabella</TD> <TD WIDTH=100>sesto campo della tabella</TD </TR> </TABLE> Esempio

  26. Il corpo di una pagina HTML Tabelle CELLPADDING Distanza dal bordo interno del contenuto della cella <TABLE BORDER=1 WIDTH=300 HEIGHT=400 CELLPADDING=5 CELLSPACING=10> <TR> <TD WIDTH=100>primo campo della tabella</TD> <TD WIDTH=100>secondo campo della tabella</TD> <TD WIDTH=100>terzo campo della tabella</TD </TR> <TR> <TD WIDTH=100>quarto campo della tabella</TD> <TD WIDTH=100>quinto campo della tabella</TD> <TD WIDTH=100>sesto campo della tabella</TD </TR> </TABLE> CELLSPACING Distanza tra una cella e l’altra all’interno della tabella Esempio

  27. Il corpo di una pagina HTML Tabelle VALIGN = Vertical ALIGNment <TABLE BORDER=1 WIDTH=300 HEIGHT=400 CELLPADDING=5 CELLSPACING=10> <TD WIDTH=100 VALIGN=TOP>allineato in alto</TD> <TD WIDTH=100 VALIGN=BOTTOM>allineato in basso</TD> <TD WIDTH=100 VALIGN=MIDDLE>centrato verticalmente</TD </TABLE> Esempio

  28. Il corpo di una pagina HTML Tabelle ALIGN = ALIGNment allineamento orizzontale <TABLE BORDER=1 WIDTH=600 HEIGHT=400 CELLPADDING=5 CELLSPACING=10> <TD WIDTH=200 ALIGN=LEFT>allineato a sinistra</TD> <TD WIDTH=200 ALIGN=RIGHT>allineato a destra</TD> <TD WIDTH=200 ALIGN=CENTER>centrato</TD </TABLE> Esempio

  29. Il corpo di una pagina HTML Tabelle ALIGN = ALIGNment allineamento orizzontale <TABLE BORDER=1 WIDTH=600 HEIGHT=400 CELLPADDING=5 CELLSPACING=10> <TD WIDTH=200 ALIGN=LEFT>allineato a sinistra</TD> <TD WIDTH=200 ALIGN=RIGHT>allineato a destra</TD> <TD WIDTH=200 ALIGN=CENTER>centrato</TD </TABLE> Esempio

  30. Il corpo di una pagina HTML Tabelle Ogni campo può avere diverso sfondo, colore, impostazioni <TABLE BORDER=1 WIDTH=600 HEIGHT=500 CELLPADDING=5 CELLSPACING=10> <TR> <TD WIDTH=200 BGCOLOR="red">prova </TD><TD WIDTH=200 BGCOLOR="yellow">prova </TD><TD WIDTH=200 BGCOLOR="gray">prova </TD></TR> <TR> <TD WIDTH=200 BACKGROUND="sfondo1.jpg">prova </TD><TD WIDTH=200 BACKGROUND="sfondo2.jpg">Prova </TD><TD WIDTH=200 BACKGROUND="sfondo3.jpg">Prova </TD> </TR> </TABLE> Esempio

  31. I FRAME Che cosa sono ? I Frame permettono la suddivisione di una pagina Web in “aree” (righe o colonne) all’interno delle quali è possibile caricare pagine Web differenti. E' possibile adottare contemporaneamente una divisione sia in colonne (cols) che in righe (rows), in modo tale da creare una finestra divisa in piu' frames Frame

  32. Come si costruisce una pagina con FRAME I FRAME • Definire la struttura da dare alla pagina sinistra.htm destra.htm Dimensionamento dei frame 75% 25% • Costruire la pagina HTML con la definizione della struttura Dimensionamento dei frame: si possono definire frame a colonne (cols) o righe (rows). La dimensione può essere espressa in % o in pixel <HTML> <HEAD></HEAD> <FRAMESET COLS = “25%,75%”> <FRAME SRC = “sinistra.htm” NAME = “sx”> <FRAME SRC = “destra.htm” NAME = “dx”> </FRAMESET> </HTML> Nome attribuito al 1^ frame Nome del file html da visualizzare nel 1^ frame definito Esempio

  33. Come si costruisce una pagina con FRAME I FRAME • Costruire le pagine html sinistra.htm e destra.htm che verranno visualizzate nei rispettivi frame. • Esempi sinistra.htm destra.htm <HTML> <HEAD></HEAD> <BODY> Contenuto file <br> <B>sinistra.htm</B><br> nel frame <I><U>sx</U></I> </BODY> </HTML> <HTML> <HEAD></HEAD> <BODY> <CENTER> Contenuto file <br> <B>destra.htm</B><br> nel frame <I><U>dx</U></I> </CENTER> </BODY> </HTML>

  34. Un altro esempio I FRAME alto.htm 20% * (80%) basso.htm <HTML> <HEAD></HEAD> <FRAMESET ROWS = “20%,*”> <FRAME SRC = “alto.htm” NAME = “alto”> <FRAME SRC = “basso.htm” NAME = “basso”> </FRAMESET> </HTML> Vedi Esempio

  35. I FRAME Un esempio piu’ complesso 10% due.htm 20% tre.htm uno.htm quattro.htm * (70%) 25% * (75%) La pagina dovrà essere divisa in 2 colonne. La seconda colonna dovrà poi essere divisa in 3 righe

  36. I FRAME Un esempio più complesso: realizzazione <HTML> <HEAD></HEAD> <FRAMESET COLS = “25%,75%”> <FRAME SRC = “uno.htm” NAME = “uno”> <FRAMESET ROWS = “10%,20%,*”> <FRAME SRC = “due.htm” NAME = “due”> <FRAME SRC = “tre.htm” NAME = “tre”> <FRAME SRC = “quattro.htm” NAME = “quattro”> </FRAMESET> </FRAMESET> </HTML> * * * * * * Vedi Esempio

  37. Gli hyperlink con l’utilizzo di frame I FRAME des.htm sin.htm 25% * (75%) Nel file sin.htm, visualizzato nel frame sx, è presente un collegamento ipertestuale al file dxlink.htm e si desidera che al click del mouse il suo contenuto venga visualizzato nel frame con nome dx. Quindi nel file sinistra.htm sarà presente il seguente collegamento: <A HREF = “dxlink.htm” TARGET = “dx”>link a dxlink.htm</A> Esempio

  38. Esercizio I FRAME Definire una pagina web con i seguenti frame 60% 40% uno (file a.htm) due (file b.htm) 10% tre (file c.htm) quattro (file d.htm) 90% 25% * (75%)

More Related