Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
1
Introduzione al linguaggio HTML
Liceo scientifico-tecnologico “M. Grigoletti” Laboratorio multimediale Introduzione al linguaggio HTML
2
Scambio di informazioni tramite Internet
Tramite Intenet è possibile accedere e scambiare informazioni (file di testo, audio, video, …) presenti su computer disseminati in tutto il mondo Università di Napoli Partecipano al progetto l’Università di Napoli l’Università di Pisa il Politecnico di Milano ipertesto (ipermedia) Università di Pisa Politecnico di Milano Le informazioni disponibili su un computer sono organizzate come pagine, contenenti link ad altre pagine, in generale memorizzate su altri computer di Internet Le pagine possono contenere anche immagini, tracce sonore, filmati,…
3
Come sono scritte le pagine?
Una pagina web è scritta utilizzando il linguaggio HTML HTML = HyperText Markup Language linguaggio per la formattazione di documenti utilizza un insieme di simboli (markup tag) per indicare in che modo un testo deve essere formattato e visualizzato Inventato da Tim Berners Lee (CERN) Versione attuale: HTML 4.0
4
Come sono visualizzate le pagine?
Utilizzando un programma browser o navigator (es.: Netscape, Explorer, …) un browser recupera la pagina corrispondente ad un certo indirizzo (es: interpreta il testo e lo formatta visualizza la pagina sullo schermo in generale un browser è in grado di richiamare software per trasferire file, visualizzare filmati, ascoltare musica, …
5
Un primo esempio di documento HTML
<HEAD> <TITLE>Esempio 1</TITLE> </HEAD> <BODY> <H1>Primi passi in HTML</H1> <P>Sto scrivendo la mia prima pagina web.<BR> E’ molto semplice, ma per iniziare va bene.</P> <P>Imparerò a realizzare pagine più complesse.</P> </BODY> </HTML> esempio1.htm Documento HTML: un testo in cui compaiono dei tag del linguaggio HTML Tag o markup: una stringa di caratteri racchiusa tra < >; fornisce al browser indicazioni su struttura e formattazione del testo Un documento HTML è scritto, mediante un editor, in un file con estensione .html o .htm
6
I primi tag <HTML> </HTML> - indicano al browser che il file contiene un documento HTML <HEAD> </HEAD> - delimitano la parte del documento HTML che contiene il titolo <TITLE> </TITLE> - delimitano il titolo del documento HTML il titolo è una sorta di identificativo del documento (compare nelle liste di bookmark, è ustato dai motori di ricerca, …) è visualizzato nella barra superiore della finestra del browser e non all’interno della finestra stessa
7
NOTA: in HTML non si fa distinzione tra maiuscole e minuscole
I primi tag (cont.) <BODY> </BODY> - delimitano il contenuto del documento (ciò che è mostrato all’interno della finestra del browser) <H1> </H1> - delimitano un heading (ad es. un titolo), cioè un testo che deve essere mostrato usando caratteri più grandi e/o in grassetto esistono vari livelli di heading (H1, H2, …, H6 – grandezza decrescente) <P> </P> - delimitano un paragrafo un browser ignora qualsiasi indentazione o linea bianca nel testo; senza <P> </P> il documento diventa un unico paragrafo, senza andate a capo, etc. il tag </P> può essere omesso <BR> - genera una interruzione di linea NOTA: in HTML non si fa distinzione tra maiuscole e minuscole
8
Il testo <FONT FACE=verdana SIZE=2>Prova testo.</FONT>
Per default il testo è scritto in Times New Romans <FONT> </FONT> - permette di cambiare il tipo di carattere <FONT FACE=verdana SIZE=2>Prova testo.</FONT> <FONT FACE=“comic sans ms, arial” SIZE=2>Prova testo.</FONT> <FONT FACE=“comic sans ms, arial” SIZE=2 COLOR=blue> Prova testo.</FONT> SIZE varia tra 1 e 7
9
Formattazione dei caratteri
<I> </I> - corsivo <B> </B> - grassetto <TT> </TT> - typewriter <U> </U> - sottolineato <Small> </Small> - riduce le dimensioni del carattere <BIG> </BIG> - aumenta le dimensioni del carattere
10
Struttura di un documento HTML
Un documento HTML consta di due parti fondamentali: intestazione: contiene informazioni necessarie al browser per una corretta interpretazione del documento, ma non visualizzate nella finestra del browser (delimitata da <HEAD> </HEAD>) corpo : contiene tutti gli elementi che devono essere visualizzati dal browser (testo, immagini, applet Java, …) (delimitato da <BODY> </BODY>)
11
Doctype e meta tag esempio2.htm
<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//IT"> <HTML> <HEAD> <META name="keywords" content="HTML, realizzazione pagine Web"> <META name="description" content="La mia prima pagina web"> <META name="generator" content="Blocco note di Win2000"> <META name="author" content="Mario Rossi"> <TITLE>Esempio 2</TITLE> </HEAD> <BODY> <H1>Primi passi in HTML</H1> <P>Sto scrivendo la mia prima pagina web.<BR> E’ molto semplice, ma per iniziare va bene.</P> <P>Imparerò a realizzare pagine più complesse.</P> </BODY> </HTML> esempio2.htm
12
Doctype e meta tag (cont.)
<DOCTYPE …> - fornisce informazioni al server web che ospita la pagina; è opzionale, se c'è è il primo elemento del documento HTML PUBLIC – il documento è pubblico IETF - il tipo HTML pubblico è gestito dalla Internet Engineering Task Force DTD HTML versione di HTML supportata: 4.0 IT - lingua del documento: italiano <META name="xxx" content="yyy"> - fornisce informazioni sul documento, utilizzate, ad esempio, dai motori di ricerca; va scritta all'interno dell'intestazione del documento xxx indica quale tipo di informazione è fornito da yyy (parole chiave, descrizione del documento, editor usato per scriverlo, autore, …)
13
Corpo: tag e attributi esempio3a.htm esempio3b.htm ……………
<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//IT"> <HTML> <HEAD> …………… </HEAD> <BODY BGCOLOR="yellow" TEXT="blue"> <DIV ALIGN="center"><H1>Primi passi in HTML</H1></DIV> <P>Sto scrivendo la mia prima pagina web.<BR> E’ molto semplice, ma per iniziare va bene.</P> <P ALIGN="RIGHT">Imparerò a realizzare pagine più complesse.</P> <HR COLOR="#000000" SIZE="6" WIDTH="50%"> </BODY> </HTML> <BODY BACKGROUND="sfondo2.gif" TEXT="blue"> <CENTER><H1>Primi passi in HTML</H1></CENTER> esempio3a.htm esempio3b.htm
14
Corpo: tag e attributi (cont.)
Il tag <BODY> può avere attributi che definiscono impostazioni generali per la visualizzazione del documento. Esempio: BGCOLOR="yellow" - imposta il giallo come colore di sfondo E' possibile sostituire al nome in inglese un valore esadecimale BGCOLOR="#FFFF00" (yellow ="#FFFF00") TEXT="blue" - imposta il blu come colore del testo BACKGROUND="sfondo2.gif" - imposta come sfondo l'immagine sfondo.gif
15
Corpo: tag e attributi (cont.)
Analogamente: <DIV ALIGN="xxx">, <P ALIGN="xxx"> - indicano che il testo o il paragrafo delimitato deve avere l'allineamento specificato (xxx = left, right, center) <HR …> - produce una linea orizzontale; la linea può essere modificata definendo i suoi attributi (COLOR, SIZE, WIDTH, …) <CENTER> è equivalente a <DIV ALIGN="center">
16
Formattazione dei caratteri
…………… <CENTER><H1>Un altro passo con HTML</H1></CENTER> <H2>Formattazione dei caratteri</H2> <P> <I>Questa frase è visualizzata in corsivo.</I> <BR> <B>Questa, invece, in grassetto.</B> <TT>E questa?</TT> <P ALIGN="center"> <FONT FACE="Arial, Courier" SIZE="4" COLOR="#FF0000"> Ho scelto font, grandezza, colore</FONT> esempio4.htm
17
Elenchi esempio5.htm …………… <H2>Elenco numerato</H2>
<OL> <LI> prima voce <LI> seconda voce <LI> terza voce </OL> <H2>Elenco non numerato</H2> <UL> <LI> prima voce <LI> seconda voce <LI> terza voce </UL> esempio5.htm
18
Elenchi (cont.) <OL> </OL> - delimita un elenco numerato
<UL> </UL> - delimita un elenco non numerato <LI> - individua una voce di un elenco (numerato o non numerato) Il tipo di numerazione o di punto elenco può essere definito con l'attributo TYPE="x" Elenco numerato: x = A, a, I, i Elenco non numerato: x = disc, circle, square esempio6.htm
19
Elenchi (cont.) esempio7.htm
…………… <DL> <DT> intestazione: <DD> contiene informazioni necessarie al browser per una corretta interpretazione del documento, ma non visualizzate nella finestra del browser <DT> corpo: <DD> contiene tutti gli elementi che devono essere visualizzati dal browser (testo, immagini, applet Java, …) </DL> esempio7.htm <DL> </DL> - delimita un elenco di definizioni <DT> - specifica il "termine da definire" <DD> - specifica la definizione
20
Inserimento di immagini
…………… <P> Bla bla bla bla <IMG SRC="faraglioni.jpg"> Una nota immagine di Capri: i faraglioni. Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla. <IMG SRC="faraglioni.jpg" ALT="Capri: i faraglioni" WIDTH=150 HEIGHT=200 BORDER=2 VSPACE=20 HSPACE=20 ALIGN=right> ……………… esempio8.htm
21
Inserimento di immagini (cont.)
<IMG SRC="faraglioni.gif"> - inserisce l'immagine faraglioni.gif Alcuni attributi di IMG: ALT – commento all'immagine, didascalia WIDTH, HEIGHT – larghezza e altezza del'immagine (pt) BORDER – spessore del contorno dell'immagine VSPACE, HSPACE – distanza del testo dall'immagine (verticale, orizzontale) ALIGN – posizione dell'immagine rispetto al testo (top, middle, bottom, left, right) I browser riconoscono numerosi formati grafici. Tra i più diffusi: GIF e JPEG
22
Link …………… <A HREF=" di Matematica, Seconda Università di Napoli</A> ……………… "Clicca" su<A HREF="esempio8.htm">Esempio 8</A> "Clicca" <A per inviare un messaggio esempio9a.htm <A HREF="ancora"> </A> - inserisce un collegamento (hyperlink o ancoraggio) ad ancora Possibili valori di ancora: un indirizzo http un file locale un indirizzo di (preceduto dalla stringa mailto:)
23
Link (cont.) ……………… <A HREF="#sez2">Vai alla sezione 2</A> <A NAME="sez2"><H1>Sezione2</H1> <P> Bla bla bla bla esempio9b.htm E' possibile inserire un link ad un punto della medesima pagina (link interno): il link <A HREF="#ancora"> rimanda al punto della pagina contrassegnato da <A NAME="ancora">
24
Link e colori E' possibile modificare i colori di default dei link:
<BODY BGCOLOR="FFFFDF" TEXT="003399" LINK="red" ALINK="green" VLINK="brown"> ……………… <A HREF=" di Matematica, Seconda Università di Napoli</A> "Clicca" su<A HREF="esempio8.htm">Esempio 8</A> "Clicca" <A per inviare un messaggio esempio9c.htm E' possibile modificare i colori di default dei link: LINK – colore di un link non ancora visitato ALINK – colore di in link attivo VLINK – colore di un link visitato
25
Tabelle <TABLE> </TABLE> - delimita una tabella
………… <TABLE BORDER=1> <TR> <TD>riga 1, col 1</TD> <TD>riga 1, col 2</TD> </TR> <TR> <TD>riga 2, col 1</TD> <TD>riga 2, col 2</TD> </TR> </TABLE> <TABLE> </TABLE> - delimita una tabella BORDER – definisce il bordo esterno (BORDER=0 – nessun bordo) <TR> </TR> - delimita una riga <TD> </TD> - delimita un campo esempio10.htm
26
Tabelle: alcuni attributi
………… <TABLE BORDER=5 WIDTH=500 HEIGHT=200 CELLSPACING=5 CELLPADDING=5> <TR HEIGHT=110> <TD WIDTH=200 VALIGN=top ALIGN=right>riga 1, col. 1</TD> <TD WIDTH=200 VALIGN=bottom ALIGN=left>riga 1, col. 2</TD> </TR> <TR> <TD WIDTH=200 VALIGN=middle ALIGN=center>riga 2, col. 1</TD> <TD WIDTH=200 VALIGN=middle ALIGN=center>riga 2, col. 2</TD> </TABLE> esempio10a.htm <TABLE> WIDTH, HEIGHT – larghezza, altezza complessiva (pt o % della pagina) CELLSPACING, CELLPADDING – distanza tra i campi (pt) <TR> HEIGHT –altezza riga (pt o %) <TD> WIDTH – larghezza (pt o %) VALIGN, ALIGN – posizione del testo in direzione vertic. e orizz.
27
Frame esempio11.htm frame1.htm frame2.htm …………
<FRAMESET COLS="20%,*"> <FRAME NAME="sx" SRC="frame1.htm"> <FRAME NAME="dx" SRC="frame2.htm"> </FRAMESET> esempio11.htm ………… <CENTER><B>Questo è il frame denominato <I>sx</I>, in cui è caricato il file <I>frame1.htm</I></B></CENTER> frame1.htm ………… <CENTER><B>Questo è il frame denominato <I>dx</I>, in cui è caricato il file <I>frame2.htm</I></B></CENTER> frame2.htm
28
Frame (cont.) Per creare una pagina divisa in frame sono necessari più file HTML: un file per ogni frame (frame1.htm, frame2.htm) un file principale, che gestisce i precedenti (esempio11.htm) File principale: <FRAMESET> </FRAMESET> - racchiude il codice che richiama e gestisce i frame ROWS – numero di frame orizzontali e loro grandezza (pt o %; * = spazio rimanente) COLS – numero di frame verticali e loro grandezza (pt o %; * = spazio rimanente) <FRAME> </FRAME> - individua il frame NAME – nome del frame SRC – file da caricare nel frame I file da caricare nei frame sono usuali file HTML
29
Frame: alcuni esempi ………… ………… <frameset rows="100,*">
<frame name="alto" src="alto.htm"> <frameset cols="150,*"> <frame name="sx" src="sx.htm"> <frame name="dx" src="dx.htm"> </frameset> </frameset> ………… ………… <frameset cols="120,*"> <frame name="sx" src="frame1.htm"> <frameset rows="20%,60%,20%"> <frame name="alto" src="alto.htm"> <frame name="centr" src="centr.htm"> <frame name="basso" src="basso.htm"> </frameset> </frameset>
30
Frame: alcuni attributi
<FRAMESET … BORDER=0> – elimina il bordo del frame <FRAME … NORESIZE> – impedisce il ridimensionamento del frame da parte del visitatore della pagina web <FRAME … SCROLLING="yes" ("no", "auto") > – rende le barre di scorrimento dei frame sempre visibili (mai visibili, visibili solo se servono) <FRAME MARGINHEIGHT=x > – specifica la distanza, x, del contenuto del frame dai margini superiore e inferiore del farme stesso <FRAME MARGINWIDTH=y > – specifica la distanza, y, del contenuto del frame dai margini laterali del frame stesso
31
Frame e link esempio12.htm framedx.htm
………… <FRAMESET COLS="20%,*"> <FRAME NAME="sx" SRC="framesx.htm"> <FRAME NAME="dx" SRC="framedx.htm"> </FRAMESET> <A HREF="newpage.htm">"Clicca" qui</A> per caricare una nuova pagina in questo frame. <BR> <A HREF="newpage.htm" TARGET="sx">"Clicca" qui</A> per caricare una nuova pagina nell'altro frame. framedx.htm esempio12.htm <A HREF="newpage.htm"> </A> - carica newpage.htm nello stesso frame <A HREF="newpage.htm" TARGET="nome"> </A> - carica newpage.htm nel frame denominato dx
32
Editor HTML Editor HTML =
un programma per la creazione e la gestione di pagine web, dotato di una interfaccia "user-friendly" che rende più agevole o "nasconde" l'inserimento di comandi HTML Alcuni esempi 1st Page 2000 (Envsoft) Front Page (Microsoft) Dreamweaver (Macromedia)
33
Alcuni riferimenti http://www.html.it
HTMLPrimer.html
Presentazioni simili
