HTML HTML Sistema di contrassegno riconosciuto dai Browser come (Firefox, Chrome, Internet Explorer) Hyper Text Markup Language.

Presentazione sul tema: "HTML HTML Sistema di contrassegno riconosciuto dai Browser come (Firefox, Chrome, Internet Explorer) Hyper Text Markup Language."— Transcript della presentazione:

1 HTML HTML Sistema di contrassegno riconosciuto dai Browser come (Firefox, Chrome, Internet Explorer) Hyper Text Markup Language

2 HTML Un documento HTML si divide in due parti 1. Intestazione 2. Corpo del documento

3 Intestazione L’intestazione contiene una serie di informazioni necessarie al browser per una corretta interpretazione. Il titolo della pagina I termini chiave per i motori di ricerca Il tipo di HTML supportato

4 I Tag di Intestazione DOCTYPE HTML HEAD TITLE META

5 Il Tag (apre) ……….. (chiude)

6 Fornisce informazioni al server web che ospita la pagina HTML PUBLIC: Documento pubblico IETF: Tipo di HTML gestito dalla Internet Engineering Task Force DTD HTML 4.0 : Versione di Html Supportata EN: La lingua del Documento L’uso di questo Tag non è obbligatorio

7 racchiude tutte le informazioni riguardanti il browser, al web server ed ai motori di ricerca

8 Fornisce il titolo alla pagina La mia prima pagina Utilizzata da alcuni motori di ricerca

9 Ricerca parole chiavi Name=“keywords” content= “Monitor, Video” Autore della pagina Name=“author” content=“nome cognome” Descrizione che appare alla fine della ricerca Name=“description” content=“ descrizione”

10 Sintesi intestazione

11 Corpo del Documento Imposta gli attributi di visualizzazione Attributi: Imposta Colore di sfondo Bgcolor=“red” Oppure Bgcolor=“#ff0000” Imposta immagine di sfondo Background=“sfondo.gif” Per rendere lo sfondo immobile rispetto allo scroller Background=“sfondo.gif” Bgproperties=“Fixed”

12 Ancora su Imposta il colore del testo Text=“red” oppure un valore esadecimale Link (Collegamenti) non ancora visitati Link=“red” o valore Esadecimale Link Cliccati Alink=“yellow” Alink (Active link) Link Visitati Vlink=“green” Vlink (Visited link)

13 Formattare i titoli …… …… Definisce grandezza del testo testo Attributi: Face=“arial” definisce il tipo di carattere Size=3 definisce la dimensione del testo Color=green indica il colore del testo

14 I tag più usati Testo Il testo è Grassetto B (Bold) Testo Il testo è Corsivo I (Italic) Testo sottolineato U (Underline) Forza il ritorno a capo Introduce uno spazio

15 Testo scorrevole supportato soltanto dai browser IE Attributi: Behavior = “scroll” testo scorre da sx to dx “slide” 1 volta poi si fissa “alternate” rimbalza Direction = “left” – “right” – “down” –”up”

16 Creare Paragrafi con Definisce un paragrafo e lo allinea a sinistra Testo Definisce un paragrafo e lo allinea a Destra Testo Definisce un paragrafo e lo allinea al centro Testo Definisce un paragrafo e lo Giustifica Testo

17 Elenchi Ordinati Numerati Prima voce Seconda voce Terza voce numerico Indice = A Indicizz. alfabetica maiuscola Indice = a Indicizz. alfabetica minuscola Indice = I Indicizz. Numeri romani maiuscoli Indice = i Indicizz. Numeri romani minuscoli

18 Elenchi Puntati Prima voce Non definito = Disc Disc Pallini pieni Circle Pallini vuoti Square Quadrati

19 Inserimento Immagini Non necessita di chiusura Attributi : Alt =“nome” Commenti testuali alle immagini Width =“n” Specifica misura larghezza in Pixel Height =“n” Specifica misura altezza in Pixel Border=N Assegna un bordo all’immagine Align= Top / Bottom / Middle Allinea l’immagine rispetto al testo Alto /Basso/Medio hspace = Spazio laterale destro e sinistro dal testo vspace = Spazio laterale sopra sotto dal testo

20 Creare Links o Ancore Crea un collegamento iol.it HREF significa Hypertext Reference Carica il Link in una nuova finestra Target=“_new” Crea un collegamento verso un indirizzo e-mail pippo Da la possibilità di fare un download

21 Creazione Tabelle Attributi: Width=“N” Definisce la dimensione della larghezza della cella Espressa in % oppure in Pixel Height=“N” Definisce la dimensione dell’altezza della cella Espressa in % oppure in Pixel Border=“N” Definisce lo spessore del bordo

22 Ancora sulle Tabelle Attributi: Cellspacing=“10” Spazio fra le celle Cellpadding=“8” Spazio fra il bordo e i dati nella cella ALIGN con i parametri: right, left, center, justify allinea il contenuto delle celle Background="immagine_di_sfondo.jpg“ BGCOLOR="Yellow“ Colore di sfondo

23 Questo tag definisce l'inizio di una riga della tabella Il numero di righe di una tabella è pari al numero di elementi

24 Creazione Celle Attributi: Colspan=“2” occupa due celle in orizzontale Rowspan =“2” occupa due celle in verticale Bgcolor="Green“ definisce il colore di sfondo

25 Ancora sulle celle Attributi: Width=n definisce la larghezza della cella Height=n definisce l’altezza della cella

26 Fogli di stile CSS I fogli di stile sono i mezzi per controllare il modo in cui formattare i Tag Html. I tre modi per utilizzare i fogli di stile 1. Fogli di stile in linea 2. Fogli di stile incorporati 3. Fogli di stile esterni

27 I Fogli di stile in linea Definisce in linea lo stile del tag Prova foglio di stile in linea Prova h1 senza foglio di stile

28 Risultato

29 I Fogli di stile incorporato Definisce lo stile di un Tag per tutta la pagina Documento senza titolo h1 {color:red; font:22pt arial} foglio di stile incorporato

30 Risultato

31 Fogli di stile esterno Lo style viene definito in un file esterno e richiamato dalla pagina. foglio di stile esterno

32 File esterno Il file che contiene lo stile h1 salvato come Foglioext.css h1 { color:red; font:22pt arial; }

33 Risultato