html parte1
TRANSCRIPT
![Page 1: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/1.jpg)
PRIMA PARTEPRIMA PARTE
Da Vinci Sapri 3^ADa Vinci Sapri 3^A
![Page 2: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/2.jpg)
2
HTML definizione
HTML (Hypertext Markup Language) e un
linguaggio che consente di creare i documenti
per il Web
Un documento HTML (pagina web) viene
salvato con estensione .html.html o .htm .htm
![Page 3: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/3.jpg)
3
HTML permette di indicare come disporre gli
elementi (testo, immagini, link, etc.)
all'interno di una pagina web: le indicazioni
vengono date attraverso degli appositi simboli,
detti “tag” o “marcatori”
HTML linguaggio di marcatura
![Page 4: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/4.jpg)
4
I TAG dell’HTML vengono riconosciuti ed interpretati dai browser Web (Crome, Internet Explorer, Firefox) e visualizzati come pagine Web
Il mercato mette a disposizione vari software per la creazione di pagine HTML: gli editor HTML.
Ci sono due tipi di editor HTML
![Page 5: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/5.jpg)
5
Editor testualiEditor testualiSono editor che propongono modifiche dirette sul codice HTML puro. (Blocco NoteBlocco Note di Windows si può usare come editor testuale per documenti HTML)
Editor visuali (WYSIWYG)Editor visuali (WYSIWYG)
Si chiamano anche editor Si chiamano anche editor WYSIWYGWYSIWYG (What You See Is What What You See Is What
You GetYou Get) perché visualizzano gli oggetti e il testo così come appaiono nella pagina web e generano automaticamente il codice HTML
![Page 6: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/6.jpg)
6
![Page 7: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/7.jpg)
7
I TAG I tag html iniziano con il simbolo << e terminano con > > essi servono per indicare come deve essere strutturata la pagina web.
I tag si suddividono in 2 categorie: TAG con simbolo di chiusura ESEMPIOESEMPIO <H1> </H1> <H1> </H1> (inserisce un titolo nella pagina)
TAG senza simbolo di chiusura ESEMPIO ESEMPIO <BR> <BR> (permette di andare a capo)
![Page 8: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/8.jpg)
8
STRUTTURA DI UNA PAGINASTRUTTURA DI UNA PAGINA
<HTML><HTML>
</HTML></HTML>
testa
corpo
<HEAD><HEAD><TITLE></<TITLE></
TITLE>TITLE></HEAD></HEAD>
<BODY><BODY></BODY></BODY>
![Page 9: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/9.jpg)
9
TESTA
La testa contiene informazioni principali relative al documento come ad esempio il titolo che è contenuto tra il TAG <TITLE> </TITLE><TITLE> </TITLE>
<HEAD><HEAD><TITLE></<TITLE></
TITLE>TITLE></HEAD></HEAD>
testa
![Page 10: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/10.jpg)
10
CORPO
il corpocorpo contiene le istruzioni (tag) della vera e propria pagina che sarà visualizzata nel browser
corpo <BODY><BODY></BODY></BODY>
![Page 11: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/11.jpg)
11
Per formattare il paragrafo esistono due tipi di TAG:
<BR><BR> (Break) che consente di interrompere una riga e di farla continuare alla riga successiva;
<P> </P><P> </P> (Paragraph)che permette di predisporre un nuovo paragrafo lasciando una linea vuota
NB: richiede il TAG di chiusura
FORMATTAZIONE DEL TESTO (1)
NB: Non richiede il TAG di chiusura.
![Page 12: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/12.jpg)
12
Per formattare il paragrafo esistono altri due tipi di TAG:
<B></B><B></B> (Bold) che visualizza in grassetto tutto ciò che è compreso tra i due TAG;
<I></I><I></I> (Italic) che visualizza con lo stile “italico” il testo definito.
Entrambi i TAG richiedono un TAG di chiusura.
FORMATTAZIONE DEL TESTO (2)
![Page 13: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/13.jpg)
13
I TITOLI (1)
Per strutturare un paragrafo con più titoli di diversa grandezza si utilizzano i TAG
Tutti i TAG richiedono il comando di fine TAG
<H1> (il più grande)<H1> (il più grande)<H2><H2><H3><H3><H4><H4><H5><H5><H6> (il più piccolo) <H6> (il più piccolo)
![Page 14: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/14.jpg)
14
<HTML> <HEAD> <TITLE>Esempio di pagina con intestazioni e corsivo</TITLE> </HEAD> <BODY> <CENTER> <H1>dicitura con grandezza H1</H1> <H3>dicitura con grandezza H3</H3> <H4>dicitura con grandezza H4</H4> <H5>dicitura con grandezza H5</H5> </CENTER> <I>esempio di corsivo</I><BR> </BODY></HTML>
TITOLI (2)
![Page 15: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/15.jpg)
15
TITOLI (3)
![Page 16: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/16.jpg)
16
<HTML><HEAD> <TITLE>Esempio di testo con aggiunta di colori e stili</TITLE></HEAD> <BODY> <FONT SIZE="6" COLOR=“red” FACE=“arial”> Si possono usare:<BR>caratteri in <I>italico</I><BR> e caratteri in <B>neretto</B><BR></FONT><p> <FONT SIZE="4" COLOR="blue” FACE=“ARIAL”> Si possono usare:<BR> caratteri sottolineati <U>grassetto</U> </FONT></P> </BODY></HTML>
FORMATTAZIONE TESTO (1)
![Page 17: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/17.jpg)
17
FORMATTAZIONE TESTO (2)
![Page 18: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/18.jpg)
18
Per centrare il testo nella pagina è necessario utilizzare la TAG
<CENTER><CENTER> subito dopo il BODY, e la fine TAG </CENTER></CENTER> dopo la chiusura del titolo
CENTRARE I TESTI
![Page 19: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/19.jpg)
19
LE IMMAGINII formati più usati per le immagini sono: gifgif e jpg jpg (le immagini in formato (le immagini in formato gifgif possono essere anche animate) possono essere anche animate)
FIORE.GIF GATTO.JPG
![Page 20: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/20.jpg)
20
COME INSERIRE LE IMMAGINI
Per inserire le immaginioccorre utilizzare il TAG <IMG SRC>
<IMG SRC=“AEREO.GIF”>
<IMG SRC=“SIGNORA.JPG”>
<IMG SRC=“GATTO.GIF”>
![Page 21: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/21.jpg)
21
PAGINA DI PROVA IMMAGINI (2)
![Page 22: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/22.jpg)
22
LO SFONDOPer inserire uno sfondo nella paginaoccorre utilizzare i seguenti tag:
<BODY BGCOLOR=“GREEN”>Per inserire uno sfondo colorato uniforme (in questo esempio di colore verde)
<BODY BACKGROUND=“MARE.GIF”>Per inserire un’immagine di sfondo
![Page 23: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/23.jpg)
23
LATO.GIF
LATO2.GIF
PAGINA DI PROVA SFONDO (1)
Inseriamo le seguenti immagini come sfondo di una pagina web
![Page 24: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/24.jpg)
24
PAGINA DI PROVA SFONDO (2)
<BODY BACKGROUND=“LATO.GIF”>
![Page 25: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/25.jpg)
25
<HTML> <HEAD> <TITLE>IMMAGINE</TITLE> </HEAD> <BODY BACKGROUND=“LATO.GIF”> <IMG SRC=“Tramonto.jpg"> <P> </BODY></HTML>
PAGINA DI PROVA SFONDO (4)
![Page 26: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/26.jpg)
26
PAGINA DI PROVA SFONDO (3)
<BODY BACKGROUND=“LATO2.GIF”>
![Page 27: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/27.jpg)
27
<BODY BGCOLOR=“LIGHTGREEN”>
SFONDI COLORATI
![Page 28: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/28.jpg)
28
<HTML> <HEAD> <TITLE>IMMAGINE</TITLE> </HEAD> <BODY BGCOLOR=“LIGHTGREEN”> <IMG SRC=“FIORE.GIF”> <P> </BODY></HTML>
PAGINA DI PROVA SFONDO VERDE
![Page 29: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/29.jpg)
29
<HTML> <HEAD> <TITLE>IMMAGINE</TITLE> </HEAD> <BODY BGCOLOR=“#FF0000”> <IMG SRC=“FIORE.GIF"> <P> </BODY></HTML>
GUIDA AI COLORI IN HTML
COLORI
RGB
PAGINA DI PROVA SFONDO ROSSO
![Page 30: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/30.jpg)
30
LINK LINK (1)(1)
Il link è il concetto cardine su cui si basa un documento ipertestuale, in quanto consente di realizzare le connessioniconnessioni tra le diverse pagine (e anche di collegarsi ad un sito web esterno) .
Si possono predisporre link su una o più parole parole o su un’un’immagine. immagine.
![Page 31: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/31.jpg)
31
Per definire un link è necessario racchiudere le parole interessate tra i TAG <A> e </A> (Anchor)
LINK LINK (2)(2)
Per collegarsi ad un sito web occorre utilizzare i TAG <A> e <HREF> con la seguente modalità:
< A HREF=“http://www.iissapri.it”> La mia scuola</A>< A HREF=“http://www.iissapri.it”> La mia scuola</A>
![Page 32: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/32.jpg)
32
LINK LINK (3)(3)
Analogamente per collegarsi ad un’altra pagina occorre utilizzare i TAG: <A> e <HREF> con la seguente modalità:
< A HREF=“pagina.htm”> testo </A>< A HREF=“pagina.htm”> testo </A>
Vediamo un esempioVediamo un esempio
![Page 33: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/33.jpg)
33
COLLEGAMENTI IPERTESTUALI (1)COLLEGAMENTI IPERTESTUALI (1)
Questa è la pagina prova.htmlQuesta è la pagina prova.html
Questa è la pagina Questa è la pagina maestro.htmlmaestro.html
![Page 34: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/34.jpg)
34
Questa è la pagina prova.htmlQuesta è la pagina prova.html
<HTML><HEAD><TITLE>Esempio di COLLEGAMENTOIPERTESTUALE</TITLE></HEAD><BODY> <CENTER> <FONT SIZE="4" COLOR="GREEN"> CLICCA L'IMMAGINE PER RICHIAMARE LA PAGINA CON IL MAESTRO <P> <A HREF="MAESTRO.HTML"> <IMG SRC="ICONA.GIF"></A> </P></BODY></HTML>
COLLEGAMENTI IPERTESTUALI (2)COLLEGAMENTI IPERTESTUALI (2)
![Page 35: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/35.jpg)
35
Questa è la pagina maestro.htmlQuesta è la pagina maestro.html
<HTML><HEAD> <TITLE>Esempio di COLLEGAMENTO IPERTESTUALE</TITLE></HEAD> <BODY> <CENTER> <FONT SIZE="4" COLOR="GREEN"> <IMG SRC="TEACHER.GIF"> <P> <A HREF="PROVA.HTML"> CLICCA QUA PER TORNARE INDIETRO </A> </P> </BODY></HTML>
COLLEGAMENTI IPERTESTUALI (3)COLLEGAMENTI IPERTESTUALI (3)
![Page 36: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/36.jpg)
36
Per creare un collegamento interno alla pagina si procede in due fasi distinte:
creazione dell’ancora a cui puntare <A NAME=“primo"> Paragrafo 1 </A><A NAME=“primo"> Paragrafo 1 </A>
creazione del collegamento all’ancora appena creata e riferimento attraverso il cancelletto <A HREF="#primo"> Vai al paragrafo 1 </A><A HREF="#primo"> Vai al paragrafo 1 </A>
COLLEGAMENTI IPERTESTUALI (4)COLLEGAMENTI IPERTESTUALI (4)
![Page 37: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/37.jpg)
Il tag iframe (inline frame) <iframe .... ><iframe .... ></iframe> </iframe> crea una cornice (frame) all'interno di una pagina web, in questa cornice è possibile visualizzare una qualsiasi altra pagina web oppure un filmato.
37
![Page 38: Html parte1](https://reader035.vdocumenti.com/reader035/viewer/2022062220/558d3e8cd8b42abb4f8b45b2/html5/thumbnails/38.jpg)
I parametri sono: la larghezza e l'altezza del video (width, heightwidth, height)), la sorgente (srcsrc), cioè il link relativo al video da incorporare, il bordo laterale (frameborder frameborder ) che ) che può essere 0 oppure 1 e la possibilità di abilitare la modalità fullscreen (allowfullscreenallowfullscreen))
<iframe width="420" height="315" <iframe width="420" height="315" src="http://www.youtube.com/embed/VDv0A6R0OAQ" src="http://www.youtube.com/embed/VDv0A6R0OAQ" frameborder="0" allowfullscreen></iframe>frameborder="0" allowfullscreen></iframe>
38