La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Laboratorio Alfabetizzazione Informatica 2: HTML.

Presentazioni simili


Presentazione sul tema: "Laboratorio Alfabetizzazione Informatica 2: HTML."— Transcript della presentazione:

1 Laboratorio Alfabetizzazione Informatica 2: HTML

2 Guida

3 HTML e un linguaggio per la costruzione di ipertesti. E costituito da un insieme di comandi che permettono di definire la struttura e laspetto di un ipertesto, di inserire oggetti (immagini, tabelle, moduli) e di creare link ipertestuali interni al documento oppure ad altri documenti.

4 HTML HyperText Markup Language Linguaggio base per produrre documenti per World Wide Web (WWW o WEB) Documenti WEB pagine ipermediali/ipertestuali (collegati da link) che contengono: testo immagini suoni legami ipertestuali a -altre pagine -programmi -immagini, suoni,... Pagine localizzate su server WWW e visualizzate da un client WWW

5 HTML HyperText Markup Language Normale testo lettura sequenziale Link permettono, a chi naviga lipertesto, di accedere alle sue componenti in un ordine non rigido, seguendo un percorso a piacere tra quelli possibili al suo interno.

6 HTML HyperText Markup Language Anche se i documenti che si trovano sul Web hanno una natura ipertestuale, luso di questo termine non e necessariamente collegato allaccessibilita di un documento sul Web. Un ipertesto puo infatti essere memorizzato su un supporto (un disco fisso, un floppy) a cui si accede localmente.

7 HTML HyperText Markup Language Un documento HTML e costituito da un semplice testo, che in quanto tale puo essere visualizzato attraverso qualsiasi editor di testo. Per vedere il documento HTML come ipertesto e necessaria invece unapplicazione (browser) che interpreta i comandi contenuti nel testo producendo la visualizzazione definita rispetto a questi comandi.

8 HTML HyperText Markup Language L'HTML è il linguaggio con cui potete indicare come i vari elementi vanno disposti in una pagina Web. Un documento html è un file di testo con indicazioni sul colore, sulla posizione delle immagini, su come formattare il testo ecc. Il BROWSER è il programma che si usa quando si naviga nel Web (es. Netscape Navigator, Microsoft Internet Explorer, NCSA Mosaic, Sun HotJava, FIREFOX) e serve principalmente a :

9 HTML HyperText Markup Language scaricare i files che si trovano su un computer remoto (il server) e che fanno riferimento a un certo indirizzo legge i documenti scritti in html e visualizza la pagina seguendo le indicazioni scritte nel codice HTML Alla base di HTML esiste una standardizzazione che garantisce che ad ogni comando (testuale) corrisponda una certa visualizzazione da parte del browser, qualunque esso sia (Netscape o Explorer).

10 HTML HyperText Markup Language Le pagine WWW sono trasferite attraverso la rete Internet usando un protocollo particolare HTTP (HyperText Transfer Protocol) costruito al di sopra di TCP/IP (Transfer Control Protocol / Internet Protocol ) Localizzate mediante un ben preciso sistema di indirizzamento: URL (Uniform Resource Locator) Ogni indirizzo è formato da: Protocollo Indirizzo Pathname della pagina

11 HTML HyperText Markup Language TCP/IP: TCP (Transmission Control Protocol): si incarica di suddividere le informazioni in pacchetti e di garantire la trasmissione dei dati. IP (Internet Protocol): instrada i pacchetti nella rete e sceglie il percorso più breve per arrivare a destinazione. La garanzia sulleffettivo arrivo dei pacchetti è però affidata al TCP. Ogni macchina dispone di un proprio indirizzo Ip che la identifica in modo univoco sulla rete. L' indirizzo Ip si compone di 4 cifre, separate ciascuna da un punto. Ogni cifra varia da 0 a 255 (es ).

12 HTML HyperText Markup Language Internet: rete geografica mondiale che collega le reti di diversi paesi Milioni di nodi collegati Organizzata a domini: un dominio per ogni nazione sottoreti e sottodomini per ogni nazione

13 HTML HyperText Markup Language Ogni sottorete e sottodominio ha un nome =>indirizzamento gerarchico ES: di.unito.it:dominio Dip. di Informatica (di) nel dominio Univ. di Torino (unito) nel dominio Italia (it)

14 HTML HyperText Markup Language Funzione di naming realizzata in modo distribuito: DNS (Domain Name Service) Ogni dominio è responsabile degli indirizzi fisici dei nodi nel dominio o delle macchine server dei sottodomini

15 HTML HyperText Markup Language ES: devo contattare rigel.doc.ic.ac.uk dalla mia macchina orion.di.unito.it La richiesta viene passata da orion verso l'alto al server di che la riconosce come non locale al server unito che la riconosce come non locale al server it che la passa al server uk uk localizza l'indirizzo di ac e passa la richiesta ac localizza l'indirizzo di ic e passa la richiesta ic localizza doc e passa la richiesta doc restituisce l'indirizzo di rigel che ritorna indietro

16 HTML HyperText Markup Language Internet fornisce vari servizi Trasferimento dati: (protocollo FTP) Posta elettronica: (protocollo MAILTO) Collegamento Remoto: (protocollo TELNET) Liste di discussione: News Basi di dati in rete (ES:Hytelnet Strumento di ricerca che consente di sfogliare ipertesti che elencano siti, in particolare università e biblioteche, via Telnet Melvyl Catalogo biblioteche Università California) Network Information Retrieval (motori di ricerca es. Google o Yahoo) Navigazione in rete testuale: Gopher (Metodo per accedere a dati ed informazioni sparse per la rete Internet, presentate all'utente sotto forma di menu. ) Navigazione in rete ipertestuale: WWW

17 HTML Caratteristiche HTML è un linguaggio di formattazione di documenti Un documento HTML è un file di testo (file ASCII) contenente dei comandi per formattazione inserimento parti multimediali link ipertestuali I comandi (TAGS) hanno una forma sintattica particolare informazioni I comandi (tags) hanno nomi mnemonici

18 HTML Caratteristiche Vediamo il linguaggio di qualche pagina web – Tasto destro mouse HTML – VISUALIZZA HTML In questo modo visualizziamo il FILE HTML SORGENTE

19 HTML Caratteristiche Per creare un file HTML e possibile usare due strumenti: Un editor di testo (WordPad,Blocco note); Un applicazione per la preparazione di documenti HTML (Frontpage, Netscape Composer, Pagemill) del tipo WYSIWYG (what you see is what you get);

20 HTML Caratteristiche nel primo caso occorre conoscere HTML e scrivere i comandi tramite leditor di testo nel secondo caso la conoscenza di HTML non e necessaria, in quanto lapplicazione permette allutente di comporre il documento a partire dallaspetto risultante: i comandi vengono aggiunti man mano dalleditor a seconda degli elementi (testo, grafica, ecc) inseriti dallutente.

21 HTML Caratteristiche Il file HTML creato tramite leditor deve essere salvato come documento testuale con estensione html; in caso contrario, il documento verrebbe visualizzato come testo e non come documento HTML. Salvare con estensione.html Salva come: Tutti i file Codifica:Ansi

22 HTML Caratteristiche Mentre si edita un documento HTML attraverso leditor, e possibile contemporaneamente visualizzarlo con il browser (in quanto questultimo si limita a leggere il documento). Ogni volta che si fanno delle modifiche al documento, tuttavia, e necessario aggiornarne la visualizzazione nel browser tramite il pulsante Aggiorna di Explorer

23 HTML Caratteristiche I comandi HTML sono denominati TAG; devono sempre essere scritti allinterno di parentesi uncinate ( ). I tag – tranne alcune eccezioni – devono essere aperti e chiusi, e la loro influenza si esercita sul testo contenuto al loro interno (tra lapertura e la chiusura del tag, che avviene facendo precedere il comando dal carattere /) Gli spazi bianchi e gli a capo vengono ignorati dai browser

24 HTML Caratteristiche Non e permesso inserire alcun elemento di formattazione nel testo HTML (corsivo, grassetto, ecc.), se non tramite i comandi HTML appositi!.

25 HTML Caratteristiche I tag possono contenere dei parametri, associati a un valore. I parametri (scelti tra un insieme predefinito) sono scritti di seguito al nome del comando, allinterno delle parentesi Ogni parametro e seguito dal segno di uguale e dal valore assegnatogli (tra virgolette). testo che comparira scritto in rosso

26 HTML Caratteristiche STRUTTURA DEL DOCUMENTO Un documento HTML e interamente contenuto allinterno del tag HTML e si compone di due parti essenziali: Head (intestazione) Body (corpo del documento)

27 HTML Linguaggio descrizione delle caratteristiche del documento documento vero e proprio Apriamo Blocco note e proviamo!!!!

28 HTML Linguaggio HEAD la parte fondamentale è il titolo del documento che verrà visualizzato come titolo nella finestra del browser Scienze della Comunicazione

29 HTML Linguaggio Head può contenere anche alcune informazioni generali (tipo di editor usato, contenuto del documento, ecc.). ATTN: poiché il titolo viene usato anche per costruire gli indici automatici usati dai motori di ricerca è importante che esso sia significativo

30 HTML Linguaggio BODY Contiene il documento (pagina) vero e proprio che verrà visualizzato nella finestra del browser Il testo può essere inserito liberamente nella parte BODY e verrà visualizzato secondo le direttive di formattazione. corpo della pagina

31 HTML Linguaggio Allinterno del comando BODY e possibile inserire: – Testo (e la relativa formattazione) – Liste – Tabelle - Immagini – Collegamenti – Moduli

32 HTML Linguaggio HEADERS titolo1... titolo6 permettono di indicare quali parti di testo vengono usate come titoli H1,..., H6 sono usati anche per controllare le dimensioni dei caratteri: H1 corrisponde a caratteri grandi,..., H6 a caratteri piccoli

33 HTML Linguaggio COMANDI PER ANDARE A CAPO a capo a capo e inizio nuovo paragrafo (salta una linea) OSS: HTML non è sensibile ai caratteri maiuscoli e minuscoli nei comandi (non è Case Sensitive) HTML non è sensibile ai blank e alle linee vuote Alcuni comandi non vengono chiusi (empty tag) in quanto non si applicano a uno specifico contenuto: tra questi, ad esempio, il tag che corrisponde all a capo.

34 HTML Linguaggio ATTRIBUTI DI BODY Il comando BODY ha degli attributi che permettono di:

35 HTML Linguaggio Il colore può essere specificato con nome in inglese codice esadecimale # (rosso verde blu vengono combinati numericamente per formare tutti i colori) OSS: di default si ha sfondo grigio, testo nero, link da visitare blu, link visitati rossi

36 HTML Linguaggio Tabella colori in esadecimale I colori in HTML si specificano utilizzando il sistema RGB (Red, Green, Blu), scrivendoli in esadecimale preceduti da #. Miscelando questi valori è possibile ottenere una scala cromatica. LINK A TABELLA ESADECIMALE INTERATTIVA:

37 HTML Linguaggio Soltanto 216 colori sono quelli che vengono considerati "sicuri o web safe. Sono colori che si vedono nello stesso modo, indipendentemente dal browser in cui appaiono. Gli unici 216 colori che si vedono sempre e comunque allo stesso modo, sono quelli composti da coppie di: 00, 33, 66, 99, CC e FF. Es: # è web safe #99006F non è web safe

38 HTML Linguaggio DIMENSIONI CARATTERI e Dimensioni dei caratteri da 1 (piccolo) a 7 (grande) testo a dimensione 3... si ritorna a basefont dim+1 del precedente... si ritorna al precedente

39 HTML Linguaggio Il comando FONT ha in realtà tre parametri size per cambiare la dimensione color per cambiare il colore face per cambiare il font OSS: l'ultimo parametro funziona solo su alcuni browser Questo testo viene visualizzato in rosso, ha dimensione 5 e font Courier... Si ritorna a colore, dimensione, font precedenti

40 HTML Linguaggio Per inserire la formattazione (a capo, corsivo, grassetto, centratura del testo, ecc.) si utilizzano i comandi appositi: inserire la formattazione nel testo HTML con leditor NON raggiungerebbe questo effetto, anzi produrrebbe una visualizzazione scorretta del documento. La formattazione del testo inserita nel documento HTML, invisibile tramite leditor, verrebbe interpretata dal browser come parte del documento e conseguentemente visualizzata.

41 HTML Linguaggio ALLINEAMENTO Il comando ha un parametro align per l'allineamento del testo nel paragrafo testo allineato a sinistra testo allineato a destra testo allineato al centro OSS: la centratura del testo si può ottenere anche con il comando testo da centrare

42 HTML Linguaggio FORMATO Esistono vari modi per cambiare il formato dei caratteri Stili fisici (poco consigliati) Stili Logici 1. STILI FISICI testo testo in grassetto testo testo in corsivo testo testo typewriter testo testo barrato testo testo sottolineato

43 HTML Linguaggio 2.STILI LOGICI testo {emphasized (di solito corsivo)} testo {per titoli libri (di solito in corsivo)} testo {per codice di computer (font con caratteri a grandezza fissa)} testo {bold}

44 HTML Linguaggio INDICI E PEDICI a 1 produce a 1 b 2 produce b 2 Alla fine di un documento si può usare il comando che consente di firmare la pagina!

45 HTML Linguaggio TABELLA DEI PRINCIPALI COMANDI DI FORMATTAZIONE DEL TESTO: … Corsivo … Grassetto …, … Titolo (varie dim.)

Allineamento delparagrafo A capo del carattere

46 HTML Linguaggio Liste di elementi Può essere utile poter costruire liste di elementi come quella seguente: HTML fornisce vari comandi per creare le liste 1.LISTE NON NUMERATE 2.LISTE NUMERATE 3.LISTE DI DEFINIZIONE

47 1) Liste non numerate: unordered list elemento della lista (list item) chiude la lista non numerata Il menu prevede due primi penne allarrabbiata lasagne al forno

48 1) Liste non numerate: unordered list ha l'opzione type N.B. Il type di default è disc

49 2) Liste numerate: ordered list apre la lista numerata elemento della lista (list item) chiude la lista numerata Il menu prevede due primi penne allarrabbiata lasagne al forno

50 2) Liste numerate: ordered list Opzioni type=1,A,a,I,i start=numero Il menu prevede due primi penne allarrabbiata lasagne al forno N.B. Il type di default è 1

51 3) Liste di definizioni apre la lista di definizione termine da definire (definition term) definizione (definition description) chiude la lista di definizione

52 3) Liste di definizioni ES: Alcune definizioni: HTML ling. per scrivere pagine WWW Internet rete mondiale di calcolatori Produce Alcune definizioni: HTML ling. per scrivere pagine WWW Internet rete mondiale di calcolatori

53 ANNIDAMENTO DEI COMANDI I comandi di HTML possano essere annidati, cioe inscatolati uno nellaltro. Allinterno del comando BODY, che racchiude lintero documento, sono contenuti altri comandi: liste, formattazione del testo, ecc. Annidando i comandi si possono ottenere effetti sofisticati: – unimmagine allinterno di un link crea un link associato allimmagine – i punti di una lista possono contenere testo formattato o un link.

54 ANNIDAMENTO DEI COMANDI Si possono annidare liste, non necessariamente dello stesso tipo. Menu: Dolci Budino Crostata Frutta

55 HTML Linguaggio Testo preformattato È possibile dare disposizioni affinché una parte di testo non venga formattata questo testo sarà lasciato come scritto

56 HTML Linguaggio Citazioni lunghe (STILE LOGICO) Usato per racchiudere, all'interno di un testo, lunghe citazioni provenienti da altre pagine, ma anche da libri, articoli di giornale, etc. Il testo è rientrato a destra, non in corsivo. citazione N.B: è per citazioni brevi. Il testo è in corsivo.

57 HTML Linguaggio Linee orizzontali Per separare parti di testo si può usare il comando che produce Questo comando ha tre opzioni



58 HTML Linguaggio Testo scorrevole testo che scorre N.B. Per laccessibilità è meglio evitare testo in movimento

59 HTML Linguaggio Commenti Può essere utile mettere dei commenti al codice nel documento che non sono visualizzati dal browser.

60 HTML Linguaggio Come limmagine di sfondo, anche le immagini che fanno parte nel documento HTML non si trovano dentro il documento, ma sono in un file a parte: è buona norma creare una cartella IMG per tutte le immagini Il comando per inserire le immagini e IMG (un tag vuoto):

61 IMMAGINI Osservazioni: Se il nome non e corretto (lestensione è errata, ad esempio) oppure il file indicato non e nella cartella in cui si trova limmagine, limmagine non puo essere visualizzata! i browsers supportano formati quali GIF, JPEG, BITMAP

62 IMMAGINI Il comando IMG ha vari attributi altezza dellimmagine

63 IMMAGINI align=left | right più allineamenti particolari con il testo alt=texttesto alternativo all'immagine border=numero larghezza in pixel del bordo hspace=numero spazio in pixel a destra e sinistra dell'immagine vspace=numero spazio in pixel sopra e sotto l'immagine >

64 IMMAGINI I percorsi dei file (pathname) Percorsi assoluti: Per creare un collegamento assoluto è sufficiente fare riferimento allurl nella barra degli indirizzi. Si usano per lo più, quando si ha la necessità di fare riferimento a risorse situate in siti esterni. Es:

65 IMMAGINI Percorsi relativi: Per accedere a documenti situati allinterno del vostro sito (quindi del computer su cui state lavorando in locale) Se il file si trova nella stessa directory basta il nome del file

66 IMMAGINI Se il file si trova in una directory diversa occorre indicare cartella/nome file I blank nei nomi dei file si indicano con %20 (meglio rinominare senza spazi!)

67 IMMAGINI Align: Left Right Center bottom allinea la prima riga di testo sulla sinistra nella parte bassa dell'immagine (è così di default). middle allinea la prima riga di testo sulla sinistra al centro dell'immagine. top allinea la prima riga di testo sulla sinistra nel lato superiore dell'immagine.

68 IMMAGINI Per centrare limmagine usate il tag :

69 Come organizzare le cartelle del sito Creare una cartella con il nome del vostro sito (ad es. sul desktop) Es: SITO_Daniela Dentro SITO_Daniela mettere tutti i file html che compongono le pagine del vostro sito Creare dentro SITO_Daniela la cartella che conterrà tutte le immagini Es: IMG o IMMAGINI Creare dentro SITO_Daniela la cartella che conterrà tutti i suoni o i video (se ne avete) Es:SUONI e/o VIDEO

70 Come salvare unimmagine dal web Per SALVARE UNIMMAGINE da Internet: 1. Tasto destro sullimmagine 2.Salva immagine con nome (non copia e incolla!!!!!!!!!!) 3. Se necessario rinominarla senza spazi 4. Salvarla nella cartella delle immagini del vostro sito (es. IMG) N.B. Lestensione da dare nel codice html è jpg e non jpeg!!!

71 LINK I collegamenti (link) sono lelemento ipertestuale per eccellenza Il testo corrispondente a un link (hot words) viene evidenziato e cliccandovi sopra si accede a un altro documento, che viene aperto nella finestra del browser al posto di quello corrente Passando sopra al link con il mouse, la freccia si trasforma in una manina.

72 LINK Il comando per creare un link e A (anchor), associato al parametro href (in inglese, sta per riferimento ipertestuale): documento collegato testo Testo, IMMAGINE, Bottone che apparira attivo

73 LINK Come abbiamo visto precedentemente, il link cambia colore dopo essere stato visitato (cliccato), attraverso i tag del Body link="colore link da visitare" vlink="colore link visitati"

74 LINK Link ad una pagina web tramite del testo cliccabile Laboratori di HTML Link a programma per spedire mail tramite testo cliccabile spedisci una mail a Console

75 LINK Link ad una pagina web tramite immagine cliccabile Link ad un file nel nostro pc tramite testo cliccabile collegamento al file pippo

76 LINK LE ANCORE Particolari tipi di link che consentono di saltare in un punto preciso dello STESSO documento. Formate da 2 elementi: 1.Il punto del documento a cui saltare (ANCORA) 2.Il testo che, se cliccato, porta al punto definito dallancora (LINK)

77 LINK 1.LANCORA. Occorre darle un nome con: Sezione 3: le immagini 2.Il LINK. Occorre dire a quale ancora deve riferirsi, con: vai alla sezione 3

78 TABELLE Per creare una tabella si usa il comando tabella ha vari attributi che servono per stabilire le caratteristiche della tabella

79 TABELLE


80 TABELLE (table row) per creare righe della tabella nuova riga


81 TABELLE Questa è la prima riga. Questa è la seconda riga. Questa è la prima riga Questa è la seconda riga

82 TABELLE per inserire dati inserimento di una dato per il titolo delle colonne titolo della colonna (bold e centrato) titolo tabella titolo della tabella

83 TABELLE primasecondaterza 123 abc iiiiii

84 TABELLE I comandi TD e TH hanno vari attributi:


85 TABELLE COLSPAN Permette di raggruppare le celle all'interno delle colonne in modo da avere ad esempio una riga da 2 colonne e unaltra da 3. prima colonna seconda colonna terza colonna cella che occupa 2 colonne

86 TABELLE Prima colonnaSeconda colonnaTerza colonna Cella che occupa 2 colonne

87 TABELLE ROWSPAN Permette di creare celle che occupino più di una riga. cella che occupa 2 righe

88 TABELLE Cella che occupa due righe

89 FRAME In molti casi può essere utile dividere un documento HTML in più parti, ognuna delle quali può a sua volta contenere un documento HTML gestibile in modo separato ATTN: non tutti i browser supportano i frame (Nescape a partire dalla versione 2.0; MS Explorer a partire da 3.0)

90 FRAME frame.html

91 FRAME Il file totale che contiene tutti i frame (frame.html): non ha il comando... che è rimpiazzato dal tag... ha il tag che definisce quali pagine sono contenute nei frame ha una parte finale... che viene visualizzata nel caso in cui il browser non supporti i frame

92 FRAME si usa per definire la suddivisione della pagina completa (frame.html) Occorre decidere in quante righe e/o colonne suddividere la pagina e definire le dimensioni di ciascuna riga e/o colonna. NB. Si può usare anche * per indicare il resto della pagina o la grandezza relativa (vedi esempi…)

93 FRAME {il resto nella seconda riga} {la prima riga deve essere il doppio della seconda}

94 FRAME

95 FRAME Altri attributi di frameborder="no" (di default è yes) framespacing=n° border=n° (spessore del bordo. I 2 attributi sono equivalenti, ma è bene inserirli entrambi per assicurarsi che tutti i browser li supportino) bordercolor=colore

96 FRAME si usa per indicare quali file.html devono essere contenuti nei frame definiti con FRAMESET NB: ci sarà un tag per ogni riga e/o colonna

97 FRAME serviva per browser particolarmente obsoleti (come Mosaic 2) che non erano in grado di leggere e visualizzare una struttura frameset. Occorre quindi inserire ad esempio lavvertimento che il sito è strutturato a frame, o un contenuto alternativo (es un link ad una versione del sito senza frame), oppure una descrizione per i motori di ricerca. Il tuo browser non supporta i frame; cliccare qui per vedere la pagina senza frame

98 FRAME prova di frame Qui può essere indicato il link a una versione del sito che non utilizzi un layout a frame ATTENZIONE AL MODO IN CUI I TAG SONO ANNIDATI!!!

99 FRAME Per visualizzare il codice HTML di ciascun frame nel riquadro desiderato cliccare con il tasto destro del mouse. Con Internet Explorer: selezionare HTML Con Mozilla: selezionare this frame > view frame source

100 FRAME Il tuo browser non supporta i frame; cliccare qui per vedere la pagina senza frame


Scaricare ppt "Laboratorio Alfabetizzazione Informatica 2: HTML."

Presentazioni simili


Annunci Google