CORSO BASE Il Browser LO Standard HTML I TAG Annidamento e Identizione I commenti Case unsensitive Struttura pagina-DOCTYPE HEAD BODY Ipertesti Immagini.

Presentazione sul tema: "CORSO BASE Il Browser LO Standard HTML I TAG Annidamento e Identizione I commenti Case unsensitive Struttura pagina-DOCTYPE HEAD BODY Ipertesti Immagini."— Transcript della presentazione:

1 CORSO BASE Il Browser LO Standard HTML I TAG Annidamento e Identizione I commenti Case unsensitive Struttura pagina-DOCTYPE HEAD BODY Ipertesti Immagini Suoni Tabelle Form Maria A.R. Consoli Corso HTML BY, NC, SA Attribuzione - Non commerciale - Condividi allo stesso modo : Commons Deed | Legal Code)Commons DeedLegal Code)

2 Maria A.R. Consoli Corso HTML 2 L'HTML è il linguaggio con cui potete indicare come i vari elementi vanno disposti in una pagina Web. Un documento html non è nient'altro infatti che un file di testo con delle indicazioni sul colore delle scritte, sulla posizione delle immagini all'interno della pagina, su come far scorrere il testo, e altre cose di questo genere.

3 Maria A.R. Consoli Corso HTML 3 Il Browser è il programma che usate quando navigate nel Web. scarica i vari files che si trovano su un computer remoto (il server) legge i documenti scritti in html visualizza la pagina Internet Explorer Netscape Navigator Mozilla (open source) Opera

4 Maria A.R. Consoli Corso HTML 4 CACHE: cartella in cui vengono memorizzati i files scaricati dal web. Internet Explorer visualizza così il percorso della cache Strumenti > Opzioni Internet > Generale > Impostazioni > Visualizza file rendering della pagina: visualizzazione di un file html da parte del browser. Motore di rendering: sezione del browser che si occupa di mostrare sul video la pagina. HTML:acronimo di Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti") W3C: (World Wide Web Consortium (http://www.w3.org/)) organismo che si occupa di standardizzare la sintassi del linguaggio HTMLhttp://www.w3.org/

5 Maria A.R. Consoli Corso HTML 5 Il W3C ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0); l'HTML si è evoluto in XHTML. l'HTML verrà utilizzato ancora per diversi anni come linguaggio principe delle pagine web. Alcuni concetti dell'XHTML richiedono già una certa comprensione dei problemi che si acquisisce solo con l'esperienza. L'HTML è più immediato e consente di incominciare subito a produrre documenti web; Chi conosce l'XHTML non può non conoscere l'HTML. La conoscenza dell'HTML è infatti il prerequisito essenziale di ogni webmaster. Le differenze tra i due linguaggi non sono così marcate e passare dall'uno all'altro non dovrebbe richiedere molta fatica.

6 Maria A.R. Consoli Corso HTML 6 uno o più browser un editor testuale per scrivere il codice HTML CREARE IL FILE 1.Aprite in editor testuale, per esempio Blocco note; 2.Scrivere il codice di una pagina; 3.Salvare con lestensione "html", ad esempio miaPagina.html; 4.Chiudete leditor 5.Troverete il file con licona del browser e si aprirà in automatico cliccandoci su due volte. MODIFICARE IL FILE 1.utilizzate i comandi Visualizza > HTML, 2.cambiate il codice, 3.salvate, 4.utilizzate il pulsante "aggiorna" del browser 5.visualizzare le modifiche.

7 Maria A.R.Consoli Corso HTML 7 Questo avviene perché l'estensione non è.html, ma.html.txt Per visualizzare l'estensione del file in sistemi Windows andate in una cartella e quindi: Strumenti > Opzioni cartella > Visualizzazione E poi togliere la spunta da: "Nascondi le estensioni dei file per i tipi di file conosciuti" infine premere il pulsante: "Come cartella corrente

8 Maria A.R.Consoli Corso HTML 8 Questo succede perché la pagina visualizzata è sempre quella vecchia memorizzata nella cache. Ricordatevi di impostare la cache del vostro browser in modo che il file html venga ricaricato ogni volta che richiamate la pagina. In Internet Explorer: Strumenti > Opzioni Internet > Generale > Impostazioni > Ricerca versioni più recenti delle pagine memorizzate: all'apertura della pagina

9 Maria A.R.Consoli Corso HTML 9 Hanno il compito di visualizzare le diverse parti di una pagina web. Hanno differenti nomi a seconda della loro funzione. I tag vanno inseriti tra parentesi uncinate ( ) la chiusura del tag viene indicata con una "/" (Quindi: ). Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma: testo la struttura di un attributo è: attributo="valore" Quindi in definita la struttura di un tag sarà: testo

10 Maria A.R.Consoli Corso HTML 10 Alcuni particolari tag non hanno contenuto - perché ad esempio indicano la posizione di alcuni elementi (come il tag delle immagini) -, conseguentemente questi tag non hanno neanche chiusura. La loro forma sarà dunque: Ecco un esempio di immagine: come si vede il tag non viene chiuso. Questo tipo di tag viene detto "empty", cioè "vuoto".

11 Maria A.R. Consoli Corso HTML 11 L'annidamento ci permette di attribuire formattazioni successive al testo che stiamo inserendo. esempio: contenuto 1 contenuto 2 Apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab: Questa procedura si chiama indentazione, e grazie ad essa il codice HTML risulta più leggibile esempio: testo 1 testo 2

12 Maria A.R. Consoli Corso HTML 12 indicazioni significative per il webmaster, ma invisibili al browser. Inserendo i commenti in punti specifici del documento ci permette di mantenere l'orientamento anche in file molto complessi e lunghi. Sintassi esempio:

13 13 L'HTML è "case unsensitive Questo significa che è del tutto indifferente se scrivere i tag in maiuscolo o in minuscolo. e vengono letti allo stesso modo dal browser. Per aumentare la leggibilità del codice è buona norma scrivere in maiuscolo il nome del tag (es: ) e in minuscolo gli attributi (es: align="right"). Quindi: L'XHTML è "case sensitive" per abituarsi già al linguaggio che verrà è consigliabile scrivere tutto in minuscolo. Maiuscolo e minuscolo, in ogni caso non costituiscono errore. Maria A.R. Consoli Corso HTML

14 Maria A.R. Consoli Corso HTML 14 Una apagina HTML è suddivisa in tre sezioni: Specifiche Inizio codice Testata Fine testata Corpo Fine corpo Fine codice esempio: SPECIFICHE Qui il nostro contenuto Qui il nostro contenuto

15 Maria A.R. Consoli Corso HTML 15 specifica il tipo di documento. E la prima riga da inserire. HTML: il tipo di linguaggio utilizzato è l'HTML PUBLIC: il documento è pubblico W3C: il documento fa riferimento alle specifiche rilasciate dal W3C DTD HTML 4.01 Transitional: il documento fa riferimento a una DTD ("Document Type Definition" cioè "Definizione del tipo di documento"); la versione di HTML supportata è la 4.01 "transitional" IT: la lingua con cui è scritta la DTD è litaliano (EN: la lingua con cui è scritta la DTD è l'inglese)

16 Maria A.R. Consoli Corso HTML 16 Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove scrivere i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, fogli di stile indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese). Nome del sito Il title è il titolo della pagina e compare in alto sulla barra del browser. Il percorso assoluto a cui fare riferimento per trovare tutti i files a cui si fa riferimento. indica alcuni contenuti relativi al sito stesso. Le keywords compaiono separate da virgola, da punto e virgola, oppure senza alcun segno di interpunzione. Esempio

17 Maria A.R. Consoli Corso HTML 17 Sfondo Margini Lingua Colori del testo e dei link Titoli Blocchi di testo Allineamento Andare a capo Stile Font, Colore, dimensione Elenchi Qui è racchiuso il contenuto vero e proprio del documento Il contenuto della pagina verrà formattato a seconda dei tag utilizzati:

18 Maria A.R. Consoli Corso HTML 18 Imposta lo sfondo con un colore Sintassi: Bgcolor =background color Colore= uno dei colori indicati nella tabella #FFA500 #0000FF #FFFFFF #FFFF00 #808080 #A52A2A #000000 #FF0000 #008000 #EE82EE NOTA BENE Il numero di colori che lutente ha a disposizione dipende dalla scheda video. Poiché non cè modo di sapere quale scheda video abbia lutente, i webdesigner fanno riferimento alla "palette sicura" dei 256 colori (palette web safe). Esempio1

19 Maria A.R. Consoli Corso HTML 19 Imposta lo sfondo con una immagine Sintassi: ESEMPIO Se limmagine imgsfondo.gif si trova nella stessa cartella della nostra pagina Se la sua posizione è diversa indicare il percorso assoluto Se nella abbiamo dichiarato il tag base NOTA BENE Limmagine di sfondo verrà ripetuta in orizzontale e in verticale. E possibile abbinare i due tag: Esempio2

20 Maria A.R. Consoli Corso HTML 20 Imposta i margini Sintassi: ESEMPIO NOTA BENE Il testo della pagina inizia al confine con il margine superiore, le eventuali immagini di sfondo inizieranno sempre dal bordo pagina. Se si utilizza un logo è bene eliminare i margini Esempio3

21 Maria A.R. Consoli Corso HTML 21 Imposta la lingua specifica ai motori di ricerca e al browser dellutente quale lingua stiamo utilizzando Sintassi: ESEMPIO NOTA BENE Si tratta di un attributo che vi sarà utile soprattutto se vi capiterà di sviluppare dei siti multilingua

22 Maria A.R. Consoli Corso HTML 22 Impostare il colore del testo per tutta la pagina Sintassi: ESEMPIO oppure NOTA BENE Usate la tabella vista per il colore dello sfondo Esempio4

23 Maria A.R. Consoli Corso HTML 23 Impostare il colore del link per tutta la pagina Sintassi: link =collegamento a riposo (di default i link sono blu (#0000FF)) alink=collegamento attivo vlink=collegamento visitato(di default i vlink sono (#800080). ESEMPIO NOTA BENE Usate la tabella vista per il colore dello sfondo Esempio5

24 Maria A.R. Consoli Corso HTML 24 Elemento di blocco Sintassi: titolo h=heading(titolo) X=numero da 1 a 6 (grandezze del titolo). Si tratta dunque di un elemento di blocco ESEMPIO titolo 3 NOTA BENE Il tag risulta in grassetto e lascia una riga vuota prima e dopo di sé Le dimensioni del carattere dipendono dallimpostazione utente Esempio6

25 Maria A.R. Consoli Corso HTML 25 Elemento di blocco Sintassi: paragrafo ESEMPIO esempio di paragrafo NOTA BENE Il tag lascia una riga vuota prima della sua apertura e dopo la sua chiusura. Esempio7

26 Maria A.R. Consoli Corso HTML 26 Elemento di blocco Sintassi: testo</div ESEMPIO Blocco di testo NOTA BENE Il blocco di testo va a capo, ma - a differenza del paragrafo – non lascia spazi prima e dopo la sua apertura. Esempio8

27 Maria A.R. Consoli Corso HTML 27 Elemento di blocco Sintassi: contenitore ESEMPIO ESEMPIO DI SPAN NOTA BENE non va a capo Esempio9

28 Maria A.R. Consoli Corso HTML 28 Elemento di blocco Sintassi: testo Orientamento =left oppure right oppure justify ESEMPIO testo testo testo NOTA BENE Lattributo "align" è disapprovato dal W3C Esempio10

29 Maria A.R. Consoli Corso HTML 29 Sintassi: (a capo) oppure (a capo con una linea) attributi:noshade sfuma la linea "size" laltezza in pixel, "width" larghezza in pixel ESEMPIO Esempio11

30 Maria A.R. Consoli Corso HTML 30 STILI FISICI definiscono graficamente lo stile del carattere Esempio12 testo grassetto testo corsivo testo sottolineato testo tagliato testo apice testo pedice RENDERING testo Testo

31 Maria A.R. Consoli Corso HTML 31 STILI LOGICI forniscono informazioni sul ruolo svolto dal contenuto SENZA RENDERING abbreviazione abbreviazione acronimo acronimo codice linguaggio di progr. citazione allinterno della frase breve citazione

32 Maria A.R. Consoli Corso HTML 32 STILI LOGICI forniscono informazioni sul ruolo svolto dal contenuto Esempio13 CON RENDERING indirizzo blocco di citazione citazione: rientrato a destra citazione citazione: corsivo definizione definizione:corsivo enfasi enfasi: corsivo keyboard digitazione: spaziatura fissa esempio esempio: spaziatura fissa rafforzamento con forza: grassetto variabile una variabile: corsivo

33 Maria A.R. Consoli Corso HTML 33 testo in Arial testo in Arial testo in Verdana testo in Verdana Sintassi: testo NOTA BENE IL TAG è disapprovato dal W3C. Il "font" di default è il "Times". Non è possibile far sì che lutente visualizzi un testo in un carattere fantasioso scelto da noi. Allo stato attuale dellarte lutente che naviga in internet può visualizzare solo i caratteri che sono installati nel suo S.O.: in Windows si tratta dei caratteri presenti in: Pannello di controllo > Tipi di caratteri

34 Maria A.R. Consoli Corso HTML 34 Le famiglie di font

35 Maria A.R. Consoli Corso HTML 35 ESEMPIO testo blu Sintassi: testo NOTA BENE Usate la tabella vista per il colore dello sfondo. Questo tag viene utilizzato se si intende usare un colore diverso da quello stabilito con il tag. Di solito si utilizza in abbinamento col tag Esempio:

36 Maria A.R. Consoli Corso HTML 36 ESEMPIO testo di grandezza 5 Sintassi: testo di grandezza n n= misura del carattere da 1 a 7 oppure + o – n (relativamente a 3) NOTA BENE La dimensione del carattere di default nel browser Internet explorer è 3 La dimensione del carattere dipende dalle impostazioni del browser dellutente. Di solito si utilizza in abbinamento col tag Es.: Esempio14

37 Maria A.R. Consoli Corso HTML 37 Elenchi ordinati Elenchi non ordinati Elenchi di definizioni Sintassi nome del primo elemento nome del secondo elemento ………. ……

38 Maria A.R. Consoli Corso HTML 38 Elenchi ordinati Sintassi nome del primo elemento nome del secondo elemento ………. …… ol= order list li=list item Esempio primo elemento secondo elemento terzo elemento Testo fuori lista

39 Maria A.R. Consoli Corso HTML 39 Elenchi ordinati Sintassi nome del primo elemento nome del secondo ol= order list li=list item Attributo:1=numeri arabi; a=alfabeto minuscolo; A=alfabeto maiuscolo; i=romani minuscoli; I=romani maiuscoli Esempio primo elemento secondo elemento terzo elemento Testo fuori lista Esempio15

40 Maria A.R. Consoli Corso HTML 40 Elenchi non ordinati Sintassi type=attributo> nome del primo elemento nome del secondo ul= unorder list li=list item Attributo:disc=pallino pieno; circle=pallino vuoto; square=quadrato pieno; Esempio primo elemento secondo elemento terzo elemento Testo fuori lista Esempio16

41 Maria A.R. Consoli Corso HTML 41 Elenchi di definizioni Sintassi > nome del primo elemento nome del secondo dl= definition list Attributo: dt=senza rientro; dd= con rientro; Esempio nome del primo elemento nome del secondo Esempio17

42 Maria A.R. Consoli Corso HTML 42 I link sono "il ponte" che consente di passare da un testo allaltro Sono formati da: la risorsa verso cui il collegamento punta contenuto che "nasconde il collegamento (non importa se si tratta di testo, di immagine o di files) Esempio18 Sintassi: contenuto ESEMPIO notizie su Catania e non solo Nota bene Per motivi di sicurezza non è possibile eseguire un file ".exe" direttamente dal web; lutente dovrà sempre prima scaricarlo sul proprio PC.

43 Maria A.R. Consoli Corso HTML 43 Nota bene E opportuno dividere il sito in varie sezioni, in modo da avere tutti i documenti dello stesso tipo allinterno di un contesto omogeneo. Per creare collegamenti verso i documenti più reconditi, destreggiandoci tra le strutture più ramificateesistono due tecniche: indicare un percorso assoluto Viene utilizzato per far riferimento ad un percorso certo(se si è già in possesso di un proprio sito) http://www.itcdefelice.it/corsi/programmatori/materie.html indicare un percorso relativo Viene utilizzato per far riferimento ad un percorso ancora da definire(se non si è già in possesso di un proprio sito) Esempio percorso relativo

44 Maria A.R. Consoli Corso HTML 44 Servono per muoversi rapidamente in una pagina che non entra in una schermata. Ad una àncora viene assegnato un nome con: testo Alla hotword si definisce il link con: testo Per creare un indice interno alla pagina si procede dunque in due fasi distinte: creazione dellancora a cui puntare ( ) creazione del collegamento allancora appena creata e riferimento attraverso il cancelletto ( ) È bene non confondere le due fasi. o SEGNALIBRI Esempio19

45 Maria A.R. Consoli Corso HTML 45 Nota bene Lattributo title è molto importante per descrivere lelemento a cui fa riferimento il link ed è anche utilissimo per migliorare la propria presenza nei motori di ricerca, che ne vanno a leggere il contenuto. Esempio 20 Sintassi: testo Lattributo title è molto importante, e serve per descrivere lelemento a cui fa riferimento il link.

46 Maria A.R. Consoli Corso HTML 46 ESEMPIO: ISTITUTO TECNICO COMMERCIALE DE FELICE CATANIA <meta name="keywords" content=scuola, istituto, tecnico, superiore, commerciale, de felice, catania">

47 Maria A.R. Consoli Corso HTML 47 Per far riferimento a un file che si trovi allinterno della stessa directory basta linkare il nome del file pagina Per far riferimento a un file contenuto in una cartella di livello inferiore alla posizione corrente, nominare la cartella seguita dallo "slash", e poi il nome del file. pagina interna Per tornare su di un livello, è sufficiente utilizzare la notazione pagina interna