HTML LE PAGINE WEB COME SI SA, INTERNET E UN SISTEMA MONDIALE DI RETI DI COMPUTER CHE PERMETTE DI UTILIZZARE UN SISTEMA DI CONNESSIONE TRA COMPUTER.

Presentazione sul tema: "HTML LE PAGINE WEB COME SI SA, INTERNET E UN SISTEMA MONDIALE DI RETI DI COMPUTER CHE PERMETTE DI UTILIZZARE UN SISTEMA DI CONNESSIONE TRA COMPUTER."— Transcript della presentazione:

1

2 HTML

3 LE PAGINE WEB COME SI SA, INTERNET E UN SISTEMA MONDIALE DI RETI DI COMPUTER CHE PERMETTE DI UTILIZZARE UN SISTEMA DI CONNESSIONE TRA COMPUTER. SCOPO DI QUESTO CORSO E QUELLO IMPARARE LE TECNICHE PER IL DISEGNO E LA STRUTTURAZIONE DI UN DOCUMENTO IN INTERNET. I DOCUMENTI CHE SI POSSONO CONSULTARE SU INTERNET PRESENTANO: SFONDO COLORATO O FORMATO DA IMMAGINI CARATTERI CON COLORI E DIMENSIONI DIVERSIFICATE IMMAGINI POSSIBILITA DI COLLEGARSI E APRIRE ALTRI DOCUMENTI CORRELATI ECC

4 UN DOCUMENTO PUBBLICATO SU INTERNET PRENDE IL NOME DI PAGINA WEB. LO STRUMENTO UTILIZZATO PER LA CREAZIONE DI PAGINE WEB E IL LINGUAGGIO HTML. HTML, E ACRONIMO DI HYPERTEXT MARKUP LANGUAGE OVVERO LINGUAGGIO DI CONTRASSEGNI PER IPERTESTI.PER IPERTESTO SI INTENDE UN INSIEME DI UNITA DI INFORMAZIONI CONNESSE TRA DI LORO ATTRAVERSO ASSOCIAZIONI DISPONIBILI PER LA SCELTA DELLUTENTE.

5 HTML E UN LINGUAGGIO COMPOSTO DA CONTRASSEGNI CHE PERMETTONO DI COSTRUIRE PAGINE WEB CONTROLLANDO LA PRESENZA, LA DISPOSIZIONE E LASPETTO DI TUTTO CIO CHE IN TALE PAGINA PUO COMPARIRE: TESTO FORMATTATO, IMMAGINI, COLLEGAMENTI AD ALTRI DOCUMENTI, ECC.. QUINDI HTML NON E UN LINGUAGGIO DI PROGRAMMAZIONE MA DI DEFINIZIONE E DI DISEGNO DELLASPETTO DI UN DOCUMENTO.

6 UN FILE HTML E UN FILE DI TIPO TESTO E VIENE SCRITTO CON UN COMUNE PROGRAMMA DI EDITOR TIPO BLOCCO NOTE, IL FILE VA SALVATO CON ESTENSIONE.HTM. PER PASSARE DAL TESTO A QUANTO COMPARE SUL MONITOR OCCORRE UN PROGRAMMA DI VISUALIZZAZIONE DETTO BROWSER. TALE PROGRAMMA LEGGE IN INPUT I DATI DEL FILE HTML E PRODUCE IN OUTPUT SUL VIDEO LA VISUALIZZAZIONE DELLA PAGINA WEB.

7 IL FILE HTML CONTIENE NON SOLO OGGETTI CHE SARANNO VISTI DA CHI CONSULTA LA PAGINA WEB, MA ANCHE I COMANDI UTILI PER LA PRESENTAZIONE DEL CONTENUTO DELLA PAGINA. QUESTI COMANDI PRENDONO IL NOME DI TAG (ETICHETTA). I TAG, CHE NON FANNO PARTE DEL TESTO E CHE NON DEVONO ESSERE VISTI DALLUTENTE SONO RACCHIUSI TRA PARENTESI ANGOLARI:.

8 IL PRIMO TAG E. IL DOCUMENTO SI SUDDIVIDE IN DUE PARTI: LITESTAZIONE E IL CORPO. LINTESTAZIONE E CONTRADDISTINTA DAI TAG E, MENTRE IL CORPO E RACCHIUSO DA E. LINTESTAZIONE CONTIENE IL TITOLO DELLA PAGINA. LA PARTE PRINCIPALE E IL BODY E QUI SI TROVA IL VERO CONTENUTO DELLA PAGINA. VEDI ESEMPIO1 ESEMPIO1

9 FORMATTAZIONE DEL TESTO SI INTENDONO TUTTE QUELLE SPECIFICHE CHE PERMETTONO DI DEFINIRE LA FORMA, LA GRANDEZZA, LOSTILE E IL COLORE DEI CARATTERI E, INOLTRE LA POSIZIONE DEL TESTO ALLINTERNO DELLA PAGINA E LA SUA SUDDIVISIONE IN PARAGRAFI. IL TAG VA A CAPO E NON VUOLE IL TAG DI FINE IL TAG RAGGRUPPA LE RIGHE IN UN PARAGRAFO IL TAG DI FINE E OPZIONALE ESEMPIO

10 ATTRIBUTI UN ATTRIBUTO E UNA PROPRIETA ASSOCIATA AL TAG. PERMETTE DI SPECIFICARE UNA FUNZIONE AGGIUNTIVA RISPETTO A QUELLA DI BASE DEL TAG. ALLATTRIBUTO DEVE ESSERE ASSEGNATO UN VALORE. SPECIFICHE DI ALLINEAMENTO DEL TESTO PER IL TAG ALIGN =LEFT ALLINEAMENTO A SINISTRA =RIGHT ALLINEAMENTO A DESTRA =CENTER ALLINEAMENTO AL CENTRO =JUSTIFY ALLINEAMENTO GIUSTIFICATO ESEMPIO

11 INTESTAZIONE UN TITOLO E LELEMENTO CHE DEVE DISTINGUERSI DAL TESTO. SONO PREVISTI 6 LIVELLI DI TITOLI. VA DA AD ESEMPIO ANCHE PER IL TAG E POSSIBILE SPECIFICARE LATTRIBUTO ALIGN. ESEMPIO LO STILE DEI CARATTERI LO STILE DEL CARATTERE INDICA LA MODALITA CON CUI SI PRESENTANO LE LETTERE E SONO NORMALMENTE QUATTRO: GRASSETTO TAG CORSIVO TAG SOTTOLINEATO TAG BARRATO TAG ESEMPIO

12 I FONT E LA DIMENSIONE DEL CARATTERE LASPETTO E IL DISEGNO DEFINISCONO LA FORMBASE (TYPEFACE) DEI CARATTERI. ESISTONO UNA GRANDE QUANTITA DI CARATTERI. I PIU USATI SONO: TYPEFACE ARIAL TIME NEW ROMAN COURIER-NEW COMIC

13 UN ALTRO ELEMENTO CHE CONTRADDISTINGUE I CARATTERI E LA DIMENSIONE. IL TYPEFACE, LO STILE E LA DIMENSIONE FORMANO IL FONT DI UN CARATTERE. IL LINGUAGGIO HTML PERMETTE DI SPECIFICARE IL FONT DEL TESTO DA VISUALIZZARE. ALLO SCOPO VIENE UTILIZZATO IL TAG. POICHE IL FONT E DEFINITO DA TRE ELEMENTI TYPEFACE, STILE E DIMENSIONE E POICHE LO STILE E DEFINITO ATTRAVERSO ALTRI TAG SPECIFICI (,, ECC.) AL TAG FONT SONO ASSOCIATI SOLTANTO DUE ATTRIBUTI: FACE PER DEFINIRE LASPETTO E LA FORMA DEI CARATTERI E SIZE PER DEFINIRE LA DIMENSIONE. PER LATTRIBUTO FACE I VALORI AMMESSI SONO I NOMI DI UN TYPEFACE. SE NON SPECIFICATO PER DEFAULT ASSUME TIME NEW ROMAN LATTRIBUTO SIZE INDICA IL VALORE DELLA DIMENSIONE DEL CARATTERE E VA DA 1 A 7. SE NON SPECIFICATO ASSUME IL VALORE 3. ESEMPIO

14 COLORI HTML CI PERMETTE DI MODIFICARE SIA LO SFONDO DELLA PAGINA CHE IL COLORE DEL TESTO. I COLORI RACCOMANDATI DAL WWW CONSORTIUM SONO SEDICI E POSSONO ESSERE IDENTIFICATI CON IL NOME O CON UN NUMERO ESADECIMALE. LA DEFINIZIONE DEI COLORI IN HTML E ORGANIZZATA ATTRAVERSO GLI DEL TAG E DEL TAG E POSSIBILE DEFINIRE IL COLORE DELLO SFONDO E IL COLORE DEL TESTO PER LINTERO CORPO USANDO GLI ATTRIBUTI BGCOLOR E TEXT ASSOCIATI AL TAG SE SI VUOLE MODIFICARE IL COLORE SOLTANTO DI UNA PARTE DEL TESTO, SI USARE LATTRIBUTO COLOR ASSOCIATO AL TAG ESEMPIO

15 LA DISPOSIZIONE DEL TESTO ELENCHI PUNTATI E NUMERATI HTML PERMETTE DI CREARE LISTE EVIDENZIATE CON SIMBOLI DI VARIO GENERE O DI NUMERARE GLI ELENCHI IN SEQUENZA. SONO PREVISTE TRE MODALITA DIVERSE DI CREAZIONE DI ELENCHI: LA LISTA DISORDINATA CHE CONSISTE IN ELENCO DI VOCI, CIASCUNO PRECEDUTO DA UN CARATTERE PARTICOLARE LA LISTA ORDINATA DOVE OGNI VOCE E PRECEDUTA DA UN NUMERO O DA UNA LETTERA CHE INDICA LA POSIZIONE DELLA VOCE ALLINTERNO DELLA LISTA LA LISTA DI DEFINIZIONE IN CUI OGNI ELEMENTO IN CUI OGNI ELEMENTO E COMPOSTO DA DUE PARTI: UNA CHE INDICA IL TERMINE DA DEFINIRE E UNA CHE INDICA IL TESTO DELLA DEFINIZIONE

16 PER I PRIMI DUE TIPI DI ELENCHI, SI UTILIZZANO DUE TAG CHE SEGNALANO LINIZIO DELLELENCO, E, E OGNI VOCE VOCE DELLA LISTA E RACCHIUSA TRA I TAG E. LISTA CASUALE LISTA ORDINATA VOCE O ELEMENTO DELLA LISTA SIA PER CHE PER E POSSIBILE SPECIFICARE IL TIPO DI CONTRASSEGNO, LATTRIBUTO PER CAMBIARE IL CONTRASSEGNO E TYPE. IN PARTICOLARE PER I VALORI AMMESSI SONO: DISC DISCO O CERCHIO CIRCLE CIRCONFERENZA VUOTA SQUARE QUADRATO

17 MENTRE PER LATTRIBUTO I VALORI AMMESSI SONO: A, a, I, i, L ( PER DEFAULT ) PER IL TERZO ELENCO,LA LISTA DI DEFINIZIONE SI USA IL TAG CHE INTRODUCE UNA LISTA IN CUI OGNI VOCE E COMPOSTA DA DUE PARTI: LA PRIMA SPECIFICA I TERMINI DI DEFINIZIONE, LA SECONDA PRESENTA LA DEFINIZIONE: LISTA DI DEFINIZIONE TERMINE DA DEFINIRE DEFINIZIONE ESEMPIO

18 LINEA ORIZZONTALE E POSSIBILE INSERIRE UNA LINEA ORIZZONTALE. IL TAG APPOSITO E. GLI ATTRIBUTI SONO: ALIGN =LEFT ALLINEAMENTO A SINISTRA =RIGHT ALLINEAMENTO A DESTRA =CENTER ALLINEAMENTO AL CENTRO WIDTH =NUMERO LARGHEZZA IN PIXEL =N% LARGHEZZA % RISPETTO ALLA PAGINA SIZE =NUMERO SPESSORE IN PIXEL ESEMPIO

19 LE TABELLE LE TABELLE SONO UNO DEGLI ELEMENTI PIU SEMPLICI PER ORGANIZZARE LA DISPOSIZIONE DEGLI OGGETTI DELLA PAGINA. UNA TABELLA E FORMATA DA RIGHE E COLONNE, LINTERSEZIONE DI UNA RIGA CON UNA COLONNA SI CHIAMA CELLA. PER DEFINIRE UNA TABELLA IN HTML SONO PREVISTE NOVE TAG: IL PRIMO E ALLINTERNO DELLA COPPIA VANNO DEFINITE LE RIGHE CHE COMPONGONO LA TABELLA CON IL TAG E LINTERNO DI CISCUNA RIGA SI DEFINISCONO LE CELLE DI DATI CON IL TAG ESEMPIO

20 LE INTESTAZIONI E POSSIBILE DEFINIRE UNA RIGA DI INIZIALE CHE CONTENGA IL NOME DI OGNI COLONNA, LE CELLE DELLA RIGA DI INTESTAZIONE SI DISTINGUONO PERCHE SONO DEFINITE DAL TAG IN LUOGO DEL. IL COTENUTO VIENE PRESENTATO DIRETTAMENTE IN GRASSETTO. BORDI E COLORI PER MIGLIORARE LA TABELLA SI PUO DEFINIRE,UN BORDO, LA SPAZIATURA TRA LE CELLE E LASCIARE SPAZIO TRA IL CONTENUTO DI UNA CELLA E IL BORDO DELLA STESSA. BORDER N° DI PIXEL AMPIEZZA DEL BORDO CELLSPACING N° DI PIXEL SPAZIO TRA CELLE CELLPADDING N° DI PIXEL SPAZIO TRA BORDO E CELLE ESEMPIO

21 SI POSSONO AGGIUNGERE DEGLI EFFETTI CROM5ATICI UTILIZZANDO LATTRIBUTO BGCOLOR=COLORE CHE SPECIFICA IL COLORE DELLO SFONDO, BORDERCOLOR=COLORE CHE SPECIFICA IL COLORE DEL BORDO. STRUTTURA E DIMENSIONE DI UNA TABELLA PER COMPLETARE LA LISTA DEGLI ATTRIBUTI POSSIBILI NEL TAG, SI DEVONO CITARE ANCHE ALIGN E WIDTH CHE SPECIFICANO RISPETTIVAMENTE LA POSIZIONE DELLA TABELLA ALLINTERNO DELLA PAGINA E LA SUA LARGHEZZA. ALIGN LEFT TABELLA A SINISTRA RIGHT TABELLA A DESTRA CENTER TABELLA AL CENTRO WIDTH N° PIXEL LARGHEZZA IN PIXEL N% LARGHEZZA IN % ESEMPIO

22 LE IMMAGINI PER INSERIRE UNA FIGURA ALLINTERNO DI UNA PAGINA WEB E POSSIBILE UTILIZZARE DUE TAG, E ; IN PARTICOLARE IL SECONDO SERVE PER INSERIRE UN OGGETTO DI QUALSIASI NATURA NON NECESSARIAMENTE UN IMMAGINE. IL TAG NON NECESSITA DEL TAG DI CHIUSURA. GLI ATTRIBUTI SONO: SRC =URL POSIZIONE DEL FILE ALT = BREVE TESTO TESTO ALTERNATIVO ALLA FIGURA ALIGN= TOP TESTO ALLINEATO IN ALTO =MIDDLE TESTO ALLINEATO IN CENTRO =BOTTOM TESTO ALLINEATO IN BASSO ESEMPIO

23 ATTRIBUTI PER LA PRESENTAZIONE DELLE IMMAGINI PER CIASCUNA IMMAGINE E SOLITAMENTE DEFINITO IL SUO INGOMBRO ESPRESSO COME NUMERO DI PIXELIN ORIZZONTALE E IN VERTICALE, QUESTO NUMERO PERO PUO ESSERE MODIFICATO ALLINTERNO DEL FILE HTML. HEIGHT= N° PIXEL ALTEZZA WIDTH = N° PIXEL LARGHEZZA PER DISTANZIARE LIMMAGINE DAL RESTO DEL TESTO O DA ALTRE IMMAGINI : HSPACE= N° PIXEL SPAZIATURA ORIZZONTALE VSPACE = N° PIXEL SPAZIATURA VERTICALE BORDER = N° PIXEL LARGHEZZA BORDO PROVATE A FARE DELLE PROVE CON UNA STESSA IMMAGINE.

24 IL SUONO DI SOTTOFONDO CE LA POSSIBILITA DI ASSOCIARE UN BRANO MUSICALE A UNA PAGINA WEB UTILIZZANDO IL TAG, CHE VA INSERITO ALLINTERNO DELLA SEZIONE. DEVE ESSERE ACCOMPAGNATO DALLATTRIBUTO SRC CHE RICHIEDE COME VALORE IL RIFERIMENTO AL FILE MUSICALE DA INSERIRE. ESEMPIO

25 IPERTESTO FINO AD ORA ABBIAMO VISTO CHE L HTML CI CONSENTE DI ORGANIZZARE E DISPORRE IL TESTO;INSERIRE IMMAGINI SUONI QUINDI CHE CI PERMETTE DI COSTRUIRE DOCUMENTI MULTIMEDIALI (DIVERSI MEZZI DICOMUNICAZIONE). ORA VEDREMO LE MODALITA CHE HTML CI OFFRE PER COSTRUIRE UNIPERTESTO. CON IL TERMINE IPERTESTO SI DEFINISCE UN TESTO CHE PUO ESSERE LETTO NON SOLO IN MODO SEQUENZIALE MA ANCHE SEGUENDO RIFERIMENTI O SALTI LOGICI AL BISOGNO. LESEMPIO PIU SEMPLICE DI IPERTESTO E UNO SCRITTO CORREDATO DI NOTE. IL NUMERO ALLINTERNO DEL TESTO CHE INDICA LA NOTA, COSTITUISCE, DAL PUNTO DI VISTA LOGICO LESEMPIO PIU SEMPLICE DI LINK.

26 I LINK UN LINK INDICA LA POSIZIONE E LA MODALITA PER ACCEDERE A UN ALTRO TESTO O A UN TESTO AGGIUNTIVO LOGICAMENTE CORRELATO AL TESTO IN CONSULTAZIONE. DAL PUNTO DI VISTA DEL LINGUAGGIO HTML SI POSSONO DISTINGUERE I SEGUENI TIPI DI COLLEAMENTO: A)COLLEGAMENTI TRA PARTI DEL MEDESIMO DOCUMENTO B)COLLEGAMENTI TRA DOCUMENTI DIVERSI, MA COLLOCATI SULLO STESSO ELABORATORE C)COLLEGAMENTI TRA DOCUMENTI DISLOCATI SU DIVERSI SITI.

27 LE ANCORE NEL COLLEGAMENTO TRA DUE DOCUMENTI SONO DEFINITI DUE PUNTI: IL PUNTO DI PARTENZA DOVE E INSERITA LA DEFINIZIONE DEL COLLEGAMENTO E IL PUNTO DI ARRIVO, CIOE IL PUNTO IN CUI IL COLLEGAMENTO RIMANDA. IL NOME DEL TAG PRINCIPALE CHE PERMETTE DI DEFINIRE UN IPERTESTO PRENDE IL NOME DA QUESTA ANALOGIA TRA COLLEGAMENTO E ANCORA: IL TAG E E SERVE A DEFINIRE SIA IL PUNTO DI PARTENZA CHE DI ARRIVO. NEL TAG INIZIALE E FINALE E RACCHIUSO LOGGETTO CHE REALIZZA IL PUNTO DI PARTENZA.

28 GLI ATTRIBUTI SONO: HREF = COLLEGAMENTO IPERTESTUALE NAME =STRINGA DI CARATTERI HREF VA POSTO NEL PUNTO DI PARTENZA DEL COLLEGAMENTO, MENTRE NAME E LATTRIBUTO DEL PUNTO DARRIVO. ESEMPIO E POSSIBILE FARE UN COLLEGAMENTO A PARTIRE DA UNIMMAGINE. ESEMPIO

29

30 I FRAME FRAME E UNA PAROLA INGLESE CHE PUO ESSERE TRADOTTA RIQUADRO E VIENE USATA PER INDICARE LA POSSIBILITA DI SUDDIVIDERE UNA PAGINA WEB IN DIVERSI RIQUADRI. CIASCUNA AREA IN CUI E SUDDIVISA LA PAGINA PUO VISUALIZZARE UN DIVERSO FILE HTML. IN UNA SINGOLA PAGINA PUO ESSERE DEFINITO UN NUMERO ILLIMITATO DI FRAME. PERCOSTRUIRE UNA PAGINA CHE SIA SUDDIVISA IN RIQUADRI I TAG FONDAMENTALI SONO E = INSIEME DEI FRAME = RIQUADRO

31 GLI ATTRIBUTI PER IL TAG SONO DUE COLS =N° DI PIXEL AMPIEZZA DEL FRAME IN PIXEL =% SUL TOTALE AMPIEZZA DEL FRAME IN % = * AMPIEZZA AUTOMATICA ROWS =N° DI PIXEL ALTEZZA DEL FRAME IN PIXEL =% SUL TOTALE ALTEZZA DEL FRAME IN % = * ALTEZZA AUTOMATICA IL PRIMO FRAME OCCUPA IL 20%DELLA PAGINA IL SECONDO QUELLO CHE RESTA ESEMPIO IL SECONDO FRAME OCCUPA 160 PIXEL DELLA PAGINA IL SECONDO QUELLO CHE RESTA ESEMPIO DUE FRAME VERTICALI UGUALI. ESEMPIO

32 DUE FRAME ORIZZONTALI UGUALI: ESEMPIO DUE FRAME ORIZZONTALI IL PRIMO PARI AL 16% DELLALTEZZA TOTALE ESEMPIO

33 FRAMESET ANNIDATI E POSSIBILE DEFINIRE NELLA STESSA PAGINA SEGMENTAZIONI SIA IN SENSO VERTICALE SI ORIZZONTALE; CIO SI OTTIENE SFRUTTANDO LA POSSIBILITA DI DEFINIRE FRAMESET ALLINTERNO DI UN ALTRO FRAMESET. SE I FRAME DI UNA PAGINA WEB DEVONO AVERE UNA STRUTTUTA DEL TIPO: SI DEFINISCONO TRE FRAME ORIZZONTALI E QUINDI SI DIVIDE IL SECONDO FRAMEORIZZONTALE IN DUE SOTTOFRAME VERTICALI SINTESI O MENU INTESTAZIONE CORPO PIE DI PAGINA

34 ESEMPIO ABBIAMO QUATTRO DOCUMENTI E VOGLIMO DISPORLI NEL SEGUENTE MODO: PROGRAMMA:

35 GLI ATTRIBUTI DI FRAME: I BORDI FRAMEBORDER =0 SENZA BORDO =1 BORDO RICHIESTO I MARGINI PER UNA MIGLIORE IMPAGINAZIONE DEL CONTENUTO DEI FRAME E POSSIBILE ANCHE DEFINIRE DEI MARGINI VUOTI SIA ORIZZONTALI CHE VERTICALI. MARGINHEIGHT =N° PIXEL ALTEZZA DEL MARGINE MARGINWIDHT =N° PIXEL LARGHEZZA DEL MARGINE LE BARRE DI SCORRIMENTO LE BARRE DI SCORRIMENTO VERTICALI ED ORIZZONTALI VENGONO INSERITE AUTOMATICAMENTE QUANDO IL CONTENUTO DI UNA PAGINA SUPERA LA DIMENSIONE DEL FRAME.

36 SCROLLING =YES PRESENZA DELLA BARRA =NO ASSENZA DELLA BARRA =AUTO SCELTA AUTOMATICA LINK E FRAME LULTIMO ATTRIBUTO CHE VIENE DESCRITTO E NAME. QUESTO ATTRIBUTO VIENE UTILIZZATO PER DISTINGUERE UN FRAME DAGLI ALTRI. NAME = STRINGA NOME DEL FRAME IL NOME DEL FRAME DIVENTA IMPORTANTE QUANDO E UTILIZZATO IN ASSOCIAZIONE CON LATTRIBUTO TARGET DEL TAG <A…: TARGET =STRINGA NOME DEL FRAME

37 NEL COLLEGAMENTO IPERTESTUALE SI PUO USARE LATTRIBUTO TARGET PER SPECIFICARE IL NOME DEL FRAME IN CUI VISUALIZZARE LA PAGINA IL CUI URL ( IL NOME EASSEGNATO AL FRAME CON LATTRIBUTO DEL TAG FRAME). LATTRIBUTO TARGET PUO ESSERE IMPOSTO CON DIVERSI VALORI SPECIFICATI. ESEMPIO