WWW (World Wide Web)!& ( # %% (*0 #,% )0#1( &#"#2

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "WWW (World Wide Web)!& ( # %% (*0 #,% )0#1( &#"#2"

Federica Casagrande
8 anni fa
Visualizzazioni

2 ! "#$"

3 %% $"$&&"'& $%%& $'&( )

4 *+&, ) && *+ ( -./

5 WWW (World Wide Web)!& ( # (&%#(!(&&( %% (*0 #,% )0#1( &#"#2

6 Siti Web pagine Web: documenti pronti per essere registrati su un server Internet residenza delle pagine Web su un server (Internet provider): sottocartella (directory) di un sito già esistente, oppure nuovo sito URL (Uniform Resource Locator) (indirizzo Internet) :....

provider): sottocartella (directory) di un sito già esistente,

7 Attrezzi hw e sw per le pagine Web PC, modem, periferiche multimediali editor di testo oppure Web editor (Dreamweaver, prodotti Open source, esportazione da prodotti Office) browser programma di grafica per trattare immagini e fotografie (GIF, JPG, PNG). programma per FTP (File Transfer Protocol): upload, download

prodotti Office) browser programma di grafica per trattare immagini e

8 Il linguaggio HTML (HyperText Markup Language) Linguaggio per scrivere pagine Web non si tratta di un linguaggio di programmazione, ma piuttosto di un linguaggio di formazione della pagina. Testo + codici (Tag) il browser interpreta i codici contenuti nel testo HTML e li trasforma in comandi per la costruzione della pagina in forma grafica I testi scritti in HTML hanno l'estensione.html o.htm nel nome del file.

Testo + codici (Tag) il browser interpreta i codici contenuti nel testo HTML e li trasforma in comandi

9 Per vedere il codice HTML Tag = codici distribuiti all interno del testo e racchiusi tra una coppia di segni < >. Questi sono i codici che consentono al browser la formazione della pagina in formato grafico. Dal menu Visualizza del browser scegliere HTML

Questi sono i codici che consentono al browser la formazione

10 Organizzazione ipertestuale ipertesto: un insieme di documenti che può essere consultato in modo non sequenziale passaggio da un documento all altro attraverso collegamenti (link) sui quali fare clic con il mouse (parole o immagini) link ad altri siti Internet utilizzando gli indirizzi (URL) navigazione nella rete (netsurfing)

collegamenti (link) sui quali fare clic con il mouse (parole o immagini) link ad

11 Struttura del documento HTML <HTML> <HEAD> informazioni sulle caratteristiche della pagina </HEAD> <BODY> il il testo della pagina con i i paragrafi e i i link </BODY> </HTML>

12 Tag HTML Struttura generale di un tag HTML <codice>. </codice> Per esempio: <B>. </B> inizio e fine delle parole evidenziate in grassetto

13 Titolo e caratteri della pagina <TITLE>...</TITLE> titolo della pagina <Hn>...</Hn> dimensione dei caratteri n da 1 a 6 (1 = grande, 6 = piccolo) <I>...</I> ; <B>...</B> ; <U>...</U> evidenziazioni in corsivo, neretto, sottolineato <CENTER>. </CENTER> riga o paragrafo centrato

14 Tag singoli <P> paragrafo <BR> ritorno a capo <HR> linea orizzontale

15 I colori RGB (Red( Red,, Green, Blue) 3!/-44 & #//))& 5-44#/#/ ))//// /#/#/ ////// 6-44#-44#-44 )))))) 1-44#--7#87- ))*9 &&!# # (' #: Per esempio: <BODY BGCOLOR= #FFFFFF > colore di sfondo (bianco)

16 Scrivere una pagina Web Aprire Blocco Note in Accessori, scrivere il testo con i tag Dal menu File, Salva con nome Salva come: Tutti i file assegnare il nome Prova.htm <html> <head> <title>la mia home page</title> </head> <body bgcolor="#ffffff"> <H1>Benvenuto nel mio sito</h1> Dalla <b>home page</b> puoi visitare le altre pagine<br> in modo anche non sequenziale <p>segui i <i>link</i><br> <hr> </body> </html>

htm <html> <head> <title>la mia home page</title> </head> <body bgcolor="#ffffff"> <H1>Benvenuto nel

17 Visualizzazione nel browser Aprire il file htm dal browser (non in linea): doppio clic sull icona del file

18 Modifica della pagina Dal menu Visualizza oppure dal menu di scelta rapida, che si apre facendo clic con il pulsante destro del mouse in un punto qualsiasi della pagina: scegliere HTML. Si apre il programma Blocco Note per visualizzare il testo con i simboli e codici HTML; modificare il testo. Salvare la pagina modificata (menu File, Salva) Nel browser fare clic sull icona Aggiorna nella barra degli strumenti: la pagina viene visualizzata nella versione modificata.

Si apre il programma Blocco Note per visualizzare il testo con i simboli e codici HTML; modificare il testo.

19 Esportazione dai prodotti Office Salva come HTML Conversione automatica dei documenti Office in testi HTML: da Word, PowerPoint, Excel, Access.

20 I link <A HREF ="nomefile"> parola </A> per esempio: <A HREF = fai clic qui per accedere al sito dell Università</A> Nella pagina Web la frase tra <A>. </A> compare in colore e sottolineata

it"> fai clic qui per accedere al sito dell

21 Caratteri speciali Stringhe particolari che all atto dell interpretazione da parte del browser vengono tradotte con i caratteri desiderati; ad esempio: < < > > & & Per le lettere accentate si usa: è è È È (con il punto e virgola finale)

22 Esempio di link

23 Esempio di link àncora Questa sintassi viene utilizzata per spostarsi all interno dello stesso documento, facendo riferimento alle sue sezioni.

24 Esempio di link àncora (tra pagine diverse) Sintassi da inserire nel primo documento dove viene richiamata la sezione del secondo documento.

25 Esempio di link àncora (tra pagine diverse) Mentre nella sezione a cui si fa riferimento nel secondo documento il tag HTML da utilizzare sarà

26 Le immagini <IMG SRC= nomeimmagine parametri> Per esempio: ;&(<=&.>(= <= (&= Le immagini come link <A HREF= oviaggi.it> <IMG SRC= mare.jpg" alt= catalogo mare > </A>

27 Le immagini La sintassi per l inserimento delle immagini è: <IMG SRC= nomeimmagine parametri> È possibile, nella zona indicata con parametri nella sintassi del tag, specificare una delle opzioni per l allineamento con il parametro ALIGN: ALIGN = TOP (allineamento vicino al bordo sup. dell immagine) ALIGN = MIDDLE (allineamento al centro dell immagine) ALIGN = BOTTOM (allineamento vicino al bordo inf. dell immagine)

28 Le immagini C% & %% C&&(D D %%. &! <IMG SRC= immagine.gif ALT= Descrizione alternativa >

29 Le immagini E(& F %%% ( C & 0 (%% C %%. &! <IMG SRC= immagine.gif ALT= Descrizione alternativa width= 150 height= 93 >

30 Liste Lista puntata ;EB ;B5& ;B, ;B ;EB Lista numerata ;2B ;B5& ;B, ;B ;2B

31 Tabelle <TABLE WIDTH="100%" BORDER="1"> <TR> <TD>a1</TD> <TD>b1</TD> <TD>c1</TD> </TR> <TR> <TD>a2</TD> <TD>b2</TD> <TD>c2</TD> </TR> </TABLE>

32 Link tra le pagine Index.html (home page) Index.html (home page) ;<G(-.&HB ;B pagina2.htm ;<G0.& HB &(;B pagina2.htm &(

33 & & D& #& # % (. & &, (!!"#$%!&"#$

34 * (! "*$*"2&& <INPUT TYPE= text NAME= nome SIZE= 100 MAXLENGHT= 30 VALUE= >

35 "*$*"2 & <INPUT TYPE= password NAME= pwd SIZE= 10 MAXLENGHT= 10 >

36 5*$*"2 & <TEXTAREA NAME= richiesta ROWS= 3 COLS= 10 >scrivi il tuo commento </TEXTAREA>

37 "**I2*,E <FORM> Cosa ti piace fare nel tempo libero<br> <INPUT TYPE= checkbox NAME= CB1 VALUE= 1 checked>leggere<br> <INPUT TYPE= checkbox NAME= CB2 VALUE= 2 >Cantare <BR> <INPUT TYPE= checkbox NAME= CB3 VALUE= 3 >Sport <BR> <INPUT TYPE= checkbox NAME= CB4 VALUE= 4 >Danza <BR> </FORM>

38 "**I2*"12 % <FORM> Classe di appartenenza<br> <input type="radio" name="cb1" value="iiib" checked> IIIB<br> <input type="radio" name="cb1" value="ivb" > IVB<br> <input type="radio" name="cb1" value="vb" > VB<br> </form>

39 "*2,6 C <form> <select name="regione"> <option value="1" >Nord</option> <option value="2" >Centro</option> <option value="3" >Sud</option> </select> </form>

40 622**5J5*$ & <FORM> <h1>bottone per inviare i dati:</h1> <br> <br> <input type="submit" name="b1"value="invia"> <input type="reset" name="b2" value="annulla"> </FORM>

Documenti analoghi

Introduzione al linguaggio HTML. A. Lorenzi - Università di Bergamo - Facoltà di Economia 1

Introduzione al linguaggio HTML A. Lorenzi - Università di Bergamo - Facoltà di Economia 1 Richiami introduttivi (1) sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno