Introduzione. Elementi di Informatica. Standard. Struttura dei TAG - 1. Annidamento e Indentazione. Struttura dei TAG - 2

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Introduzione. Elementi di Informatica. Standard. Struttura dei TAG - 1. Annidamento e Indentazione. Struttura dei TAG - 2"

Flavio Giovannini
5 anni fa
Visualizzazioni

1 Università degli Studi di Udine Facoltà di Ingegneria CORSO DI LAUREA IN SCIENZE dell ARCHITETTURA Elementi di Informatica HTML e CSS D. Gubiani HTML è l acronimo di HyperText Markup Language che tradotto significa linguaggio di contrassegno per gli ipertesti Non è un linguaggio di programmazione ma un linguaggio di contrassegno, o di marcatura 9 maggio 2011 D. Gubiani HTML e CSS 1 D. Gubiani HTML e CSS 2 Standard Struttura dei TAG - 1 L organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML è il W3C (World Wide Web Consortium) Ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0) e da un certo punto in poi l HTML si è evoluto in XHTML (si tratta dell HTML riformulato come linguaggio XML) All interno di ogni pagina è presente una serie di marcatori (i TAG) a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione - i tag vanno inseriti tra parentesi uncinate (< TAG >) - la chiusura del tag viene indicata con una / (< /TAG >) - il contenuto è inserito tra l apertura e la chiusura del tag medesimo < TAG attributo 1 = valore1 attributo n = valoren > contenuto < /TAG > < P align = center > Questo testo e contenuto in un paragrafo < /P > D. Gubiani HTML e CSS 3 D. Gubiani HTML e CSS 4 Struttura dei TAG - 2 Annidamento e Indentazione Alcuni particolari tag non hanno contenuto < TAG attributo 1 = valore1 attributo n = valoren / > < IMG widht = 20 height = 20 SRC = miaimmagine.gif ALT = alt / > Una caratteristica importante del codice HTML è che i tag possono essere annidati l uno dentro l altro, anzi molto spesso è necessario farlo < P align = right > testo1 < P align = left > testo2 < /P > < /P > Buona regola è utilizzare dei caratteri di tabulazione per far rientrare il testo ogni volta che ci troviamo in presenza di un annidamento D. Gubiani HTML e CSS 5 D. Gubiani HTML e CSS 6

HEAD BODY Per rendere il codice più leggibile si può inserire dei commenti (indicazioni significative per il webmaster, ma invisibili al browser) La sintassi è la seguente: <!

01 Transitional//IT > D. Gubiani HTML e CSS 7 D.

2 HEAD BODY Per rendere il codice più leggibile si può inserire dei commenti (indicazioni significative per il webmaster, ma invisibili al browser) La sintassi è la seguente: <! questo e un commento > Prima cosa da indicare sono le specifiche del linguaggio utilizzato <!DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.01 Strict//IT > oppure <!DOCTYPE HTML PUBLIC //W 3C//DTD XHTML 4.01 Transitional//IT > D. Gubiani HTML e CSS 7 D. Gubiani HTML e CSS 8 HEAD BODY HEAD BODY HTML - HEAD - BODY HEAD Tre tag descrivono la struttura principale della pagina: Include informazioni di intestazione della pagina: D. Gubiani HTML e CSS 9 D. Gubiani HTML e CSS 10 HEAD BODY BODY Include il contenuto della pagina: Questa è il contenuto della pagina HTML. CONTENUTO DELLA PAGINA Questa è il contenuto della pagina HTML e ora vedremo come andare a strutturarlo. Andremo in particolare a vedere i vari tag che ci permettono la sua strutturazione. I principali tag sono i seguenti: - p: paragrafo; - h1..h6: intestazioni; - ul,li: elenchi; - D. Gubiani HTML e CSS 11 D. Gubiani HTML e CSS 12

Andremo in particolare a vedere i vari tag che ci permettono la sua strutturazione.< /P > < P >I principali tag sono i seguenti:< /P > < UL > < LI >p: paragrafo;< /LI > < LI >h1.

3 Visualizzazione del Contenuto Contenuto Strutturato D. Gubiani HTML e CSS 13 D. Gubiani HTML e CSS 14 per la Strutturazione < H1 > CONTENUTO DELLA PAGINA < /H1 > < P >Questa è il contenuto della pagina HTML e ora vedremo come andare a strutturarlo. Andremo in particolare a vedere i vari tag che ci permettono la sua strutturazione.< /P > < P >I principali tag sono i seguenti:< /P > < UL > < LI >p: paragrafo;< /LI > < LI >h1..h6: intestazioni;< /LI > < LI >ul,li: elenchi;< /LI > < LI >< /LI > < /UL > D. Gubiani HTML e CSS 15 elemento nome tipo h1, h2, h3, h4, h5, h6 intestazione contenitore p paragrafo contenitore hr linea orizzontale indipendente ul, ol, li elenco (ordinato e non) e contenitore voce elenco dl, dt, dd elenco di definizione contenitore br interruzione di linea indipendente table, tr, td tabella, riga e cella contenitore div, span blocco di testo contenitore D. Gubiani HTML e CSS 16 elemento nome tipo b grossetto contenitore i corsivo contenitore sub pedice (subscript) contenitore sup apice (superscript) contenitore strike barrato contenitore img immagine indipendente a ancora contenitore I fogli di stile sono insiemi di regole di formattazione Una regola è definita nel seguente modo: selettore { proprietà: valore } - selettore indica il tipo di contenuto che si vuole formattare - proprietà indica il tipo di formattazione che si vuole applicare - valore imposta il valore della proprietà definita Esempi: h1 { color : blue } h1 { color : blue; text align : center; } D. Gubiani HTML e CSS 17 D. Gubiani HTML e CSS 18

4 Modalità di Utilizzo Fogli di Stile Esterni Possono essere applicati in 3 modi diversi: - fogli di stile esterni - fogli di stile interni - fogli di stile inline < link rel = stylesheet type = text/css href = fogliodistile.css / > D. Gubiani HTML e CSS 19 D. Gubiani HTML e CSS 20 Fogli di Stile Interni Fogli di Stile Inline < style type = text/css > regole < /style > < meta http equiv = Content Style Type content = text/css / > < body style = regola1; regola2; > tag con regole D. Gubiani HTML e CSS 21 D. Gubiani HTML e CSS 22 Allineamenti (proprietà e valori): - text-align (left, right, center, justify) - vertical-align (top, bottom, middle) Dimensioni (proprietà e valori): - width (pixel e %) - height (pixel e %) Proprietà: - color - background-color Valori: - nome del colore (blue, red) - codifica esadecimale ( FF 0005) - codifica RGB (rgb(255,0,5)) D. Gubiani HTML e CSS 23 D. Gubiani HTML e CSS 24

5 - font-family (times, arial, courier) - font-size (parole chiave quali large, small, xx-small, dimensioni percentuali quali 100%, 80%, 120%, dimensioni relative quali +2, -1, dimensioni in pixel quali 12px, 20px) - font-weight (normal, bold, bolder, lighter) - font-style (normal, italic) - border-width (larghezza in pixel) - border-style (none, dotted, dashed, solid) - border-color (vedere colore) D. Gubiani HTML e CSS 25 D. Gubiani HTML e CSS 26 - vertical-align (top, bottom, middle) - float (left, right) - border- (vedere bordi) Immagine di sfondo: - background-image (url( immagine.jpg )) - background-repeat (repeat, no-repeat, repeat-x, repeat-y) D. Gubiani HTML e CSS 27

Documenti analoghi

HTML Guida base. Guida grafica essenziale all Hyper Text Markup Language I parte

HTML Guida base. Guida grafica essenziale all Hyper Text Markup Language I parte HTML Guida base Guida grafica essenziale all Hyper Text Markup Language I parte In questa breve guida imparerai come è fatta la struttura della pagina HTML impostare il titolo della pagina impostare lo