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: LINTESTAZIONE 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, LO STILE E IL COLORE DEI CARATTERI ED 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