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

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

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

I Tag di Intestazione DOCTYPE HTML HEAD TITLE META

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

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

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

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

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”

Sintesi intestazione

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”

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)

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

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

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”

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

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

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

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

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 pippo Da la possibilità di fare un download

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

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

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

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

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

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

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

Risultato

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

Risultato

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

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

Risultato