Html parte1

PRIMA PARTEPRIMA PARTE
Da Vinci Sapri 3A-3C AFMDa Vinci Sapri 3A-3C AFM

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

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

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

5
Editor testualiEditor testuali
Sono 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 editorSi chiamano anche editor WYSIWYGWYSIWYG (What You See Is WhatWhat 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

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
ESEMPIOESEMPIO
<BR><BR> (permette di andare a capo)

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>

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

10
CORPO
il corpocorpo contiene le istruzioni (tag) della
vera e propria pagina che sarà visualizzata
nel browser
corpo<BODY><BODY>
</BODY></BODY>

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.

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)
Un altro tag, che come <br>, non richiede la chiusura è il tag:
<HR> (<HR> (Horizontal Rules)
Permette di inserire una linea orizzontale nella pagina

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)

14
<HTML>
<HEAD>
<TITLE>Esempio di pagina con intestazioni e
corsivo</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>dicitura con grandezza H1</H1>
</CENTER>
<I>esempio di corsivo</I><BR>
</BODY>
</HTML>
TITOLI (2)

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)

18
Per centrare il testo nella pagina
è necessario utilizzare il TAG
<CENTER><CENTER> prima del testo che si
desidera centrare e poi il tag di chiusura
</CENTER></CENTER>
dopo la fine del testo
CENTRARE I TESTI

19
LE IMMAGINI
I formati più usati per le immagini sono gif e jpg:
 gifgif(supporta solo 256 colori, permette le trasparenze,(supporta solo 256 colori, permette le trasparenze,
consente le animazioni)consente le animazioni)
 jpgjpg (usato per le foto, non supporta le trasparenze e le(usato per le foto, non supporta le trasparenze e le
animazioni)animazioni)
FIORE.GIF
GATTO.JPG

20
COME INSERIRE LE IMMAGINI
Per inserire le immagini
occorre utilizzare il TAG
<IMG SRC>
<IMG SRC=“AEREO.GIF”>
<IMG SRC=“SIGNORA.JPG”>
<IMG SRC=“GATTO.GIF”>

21
PAGINA DI PROVA IMMAGINI (2)

22
LO SFONDO
Per inserire uno sfondo nella pagina
occorre 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

23
LATO.GIF
LATO2.GIF
PAGINA DI PROVA SFONDO (1)
Inseriamo le seguenti immagini come
sfondo di una pagina web

24
<BODY BACKGROUND=“LATO.GIF”>

25
<HTML>
<HEAD>
<TITLE>IMMAGINE</TITLE>
</HEAD>
<BODY BACKGROUND=“LATO.GIF”>
<IMG SRC=“Tramonto.jpg">
</BODY>
</HTML>

26
<BODY BACKGROUND=“LATO2.GIF”>

27
<BODY BGCOLOR=“LIGHTGREEN”>
SFONDI COLORATI

28
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR=“LIGHTGREEN”>
<IMG SRC=“FIORE.GIF”>
</BODY>
</HTML>
PAGINA DI PROVA SFONDO VERDE

29
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR=“#FF0000”>
<IMG SRC=“FIORE.GIF">
</BODY>
</HTML>
GUIDA AI COLORI IN HTMLGUIDA AI COLORI IN HTML
COLORI
RGB
PAGINA DI PROVA SFONDO ROSSO

30
LINKLINK (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ù
paroleparole o su un’un’immagine.immagine.

31
Per definire un link è necessario racchiudere
le parole interessate tra i TAG <A> e </A>
(Anchor)
LINKLINK (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>

32
LINKLINK (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

33
COLLEGAMENTI IPERTESTUALI (1)COLLEGAMENTI IPERTESTUALI (1)
Questa è la pagina prova.htmlQuesta è la pagina prova.html
Questa è la paginaQuesta è la pagina
maestro.html

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>

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>

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>

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

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

Html parte1

More Related Content

Similar to Html parte1

Html parte1