HTML, HyperText Markup Language Prof. Renato SICA (ITIS "A. Meucci" - Castelfidardo (AN))
Scopo della lezione Mostrare, nella pratica, il concetto di ipertesto. Fornire, in pratica, il concetto di interprete. Senza avere alcuna conoscenza di programmazione scrivere (forse per la prima volta) un semplice programma ( la L di HTML sta per Language ). Fornire conoscenze di base per costruire pagine web statiche senza l ausilio di editor specializzati (Frontpage, HTML Edit, ). Fornire conoscenze per la costruzione di pagine web elementari nelle quali poter ospitare i vostri contributi multimediali.
HTML: un po di storia Il WWW (World Wide Web) fu inventato nel 1991 da Tim Berners Lee al CERN di Ginevra. Esso consisteva in un sistema per rendere disponibili su Internet dei contenuti di testi ed immagini (pagine Web) con facilità, mediante protocolli di comunicazione (HTTP HTTP), linguaggi di codifica dei contenuti (HTML), e sintassi per indicare la collocazione dei contenuti (URL). Lo standard HTML fu inizialmente sviluppato dall IETF. Oggi le specifiche dello standard e le sue evoluzioni sono manutenute dal World Wide Web Consortium (www.w3c.org).
HTML: le specifiche standard Lo standard HTML si è evoluto in diverse versioni successive: 1.0, 2.0, 3.0, 3.2, 4.0, 4.01. Un cambio nel nome: la versione attualmente più recente si chiama XHTML 1.0. Molto simile alla precedente HTML 4.01. Il cambiamento da HTML a XHTML riguarda principalmente l adozione delle regole più rigide utilizzate già da XML (un altro tipo di markup language usato per altri scopi e leggermente più complesso) per HTML, in modo da renderlo più facile da processare e manutenere.
HTML: i tag Un documento HTML è composto sia dal contenuto che da comandi. Il contenuto è ciò che viene visualizzato dall utente con un browser. I comandi (o tag) sono le istruzioni che fanno sì che il documento venga visualizzato correttamente in tutte le sue parti così come appare nel browser.
HTML: il formato dei tag Le pagine Web, dunque, contengono due tipi di oggetti: 1. Il testo del documento; 2. I tag HTML che indicano gli elementi, la struttura, la formattazione e i link ipertestuali con altre pagine,. In generale i tag hanno il seguente aspetto: <NomeTag> testo su cui il tag ha effetto </NomeTag> <NomeTag attributo= valore > contenuto </NomeTag>
HTML: il compito dei tag HTML è un markup language partendo dal testo si possono poi applicare alcuni particolari tag a parole e paragrafi per ottenere la formattazione richiesta. I tag definiscono: intestazioni, paragrafi, elenchi e tabelle lo stile dei caratteri, ad esempio il grassetto
HTML: come scrivere una semplice pagina Una pagina Web è un file con estensione.htm o.html Il modo migliore per iniziare a creare pagine Web è quello di usare un semplice editor di testi, ad esempio Notepad o Wordpad. Esistono anche: editor grafici di HTML (es. Front Page di Microsoft, Dreamweaver, HTML Edit ) editor a Tag programmi convertitori (Word, WordPerfect ecc.) L altro strumento di cui avremo bisogno per visualizzare le pagine che scriveremo è il browser.
HTML: struttura di una pagina Ciò che dobbiamo inizialmente scrivere è: <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML>
HTML: primo esempio <HTML> <HEAD> <TITLE> Home Page di Nome </TITLE> </HEAD> <BODY> </BODY> </HTML>
HTML: il tag <body> Dopo l'intestazione deve essere inserito il corpo del documento, identificato dal marcatore <body>: <body>...</body> Il testo del documento va inserito tra questi due marcatori, includendo tutti gli altri marcatori con i quali si vorrà descriverne la struttura e la forma. L'elemento '<body>' prevede alcuni attributi che analizzeremo in seguito.
HTML: prima pagina (1/2) Cominciamo, dunque, a comporre la nostra pagina digitando quanto segue: <html> <head> <title>la mia prima pagina Web </title> </head> <body> <h1>questa e la Home page di Nome Cognome</h1> <p>questa e la mia prima pagina in HTML.</p> </body> </html>
HTML: prima pagina (2/2)
HTML: i tag <hn> I titoli di un documento possono essere articolati su vari livelli gerarchici (titolo di sezione, titolo di capitolo, titolo di paragrafo etc.) Gli elementi per codificare questi titoli interni hanno un marcatore della forma <hn> In HTML sono disponibili sei diversi livelli di titoli: <h1> è il livello più alto e <h6> il più basso Il primo viene solitamente utilizzato per marcare il titolo di un capitolo, o di una sezione importante, e i successivi per indicare sottosezioni progressivamente più piccole.
HTML: esempio tag <hn> (1/2) Un esempio: <html> <head> <title>la mia prima pagina Web </title> </head> <body> <h1>questa e la Home page di Nome Cognome</h1> <p>questa e la mia prima pagina in HTML.</p> <h1>primo livello</h1> <h2>secondo livello</h2> <h3>terzo livello</h3> <h4>quarto livello</h4> <h5>quinto livello</h5> <h6>sesto livello</h6> </body> </html>
HTML: esempio tag <hn> (2/2)
HTML: attributi dei tag <hn> E possibile inserire più titoli all'interno della pagina, anche dello stesso livello. Tutti i marcatori di questi titoli interni supportano un attributo che permette di specificare l'allineamento del testo. Il nome dell'attributo è 'align', e i valori possibili, che specificano il tipo di allineamento, sono: 1. center 2. left 3. right Ad esempio: <h1 align="center">home page di Nome Cognome</h1>
HTML: il tag <p> Un documento HTML può essere diviso in capoversi (paragrafi): a tale fine va utilizzato l'elemento <p>. L'effetto visivo di questa istruzione è quello di inserire un ritorno a capo e una riga vuota nel testo a video. Si noti che dopo ogni titolo <hn> il browser va a capo automaticamente.
HTML: esempio tag <p> Riportiamo nel nostro file le due parti che seguono: <p>questa riga</p><p>va a capo.</p> <p>quest'altra,invece, appare scritta su un unica riga nonostante ci siano degli a capo.</p>
HTML: attributi del tag <p> L esempio che abbiamo appena visto ci dice che l HTML visualizza i capoversi separandoli in funzione dell'istruzione <p> e non degli 'a capo' eventualmente presenti nel nostro file. Anche il marcatore <p> può avere degli attributi di tipo 'align'. <p align="right">, ad esempio, sposterà a destra il capoverso. Un altro marcatore che riguarda la gestione dei salti di linea è <br> (break). La sua funzione è quella di provocare un 'ritorno a capo' senza introdurre una riga vuota. <br> non ha un marcatore di chiusura in quanto indica semplicemente il punto in cui intervenire. Ricorrendo a più marcatori <br> in sequenza si possono creare delle spaziature verticali.
HTML: le liste non numerate In un documento possono comparire anche elenchi ordinati di voci, o liste che possono essere numerate (ad ogni voce della lista è assegnato automaticamente un numero progressivo) o non numerate (ogni voce della lista è preceduta da un pallino). HTML fornisce una serie di elementi per inserire liste all'interno di pagine Web. La sintassi per le liste non numerate è la seguente: <ul> <li>prima voce</li> <li>seconda voce</li> <li>terza voce</li> </ul>
HTML: le liste numerate Le liste numerate si costruiscono nello stesso modo, ma il tag di apertura è <ol> (ordered list) e quello di chiusura, ovviamente, </ol>. All'interno, ancora una serie di elementi <li> <ol> <li>prima voce</li> <li>seconda voce</li> <li>terza voce</li> </ol>
HTML: esempio liste
HTML: attributi delle liste Il formato delle liste può essere controllato mediante alcuni attributi tra cui: type="x dove x può assumere uno dei seguenti valori: circle = cerchio square = quadratino I = numeri romani maiuscoli i = numeri romani minuscoli a = lettere minuscole A = lettere maiuscole
HTML: Gli stili di carattere (1/2) In genere gli stili di carattere sono corsivo, grassetto, sottolineato. HTML dispone dei seguenti stili <strong>...</strong> Testo molto rilevante (viene reso di norma in grassetto) <em>...</em> Testo enfatizzato (viene reso di norma in corsivo) <cite>...</cite> Testo citato (viene reso di norma in corsivo) <address>...</address> Indirizzo (viene reso in corsivo o in grassetto con un carattere piccolo)
HTML: Gli stili di carattere (2/2) <b>...</b> Grassetto <u>...</u> Sottolineato <i>...</i> Italico o corsivo <big>...</big> carattere più grande <small>...</small> carattere più piccolo Gli stili possono essere sommati; ad esempio, per ottenere un testo corsivo neretto si può scrivere: <b><i>questa riga è in neretto e corsivo</i></b> La cosa importante è creare codice nidificato
HTML: esempio stile carattere
HTML: le righe orizzontali L'elemento <hr> ha lo scopo di inserire una linea orizzontale fra blocchi di testo o immagini all'interno di una pagina Web. Si tratta di un marcatore che non richiede tag di chiusura. Alcuni attributi applicabili sono: size="n dove n indica lo spessore della riga (es.: <hr size="5">); Noshade serve a eliminare l'effetto 'ombra' della linea (es.: <hr noshade>); width="n% n" regola la larghezza della riga, sia in percentuale, relativamente alla larghezza dello schermo, sia in assoluto, in pixel (es.: <hr width="50%"> oppure <hr width="250">); align="left center right allinea la riga rispettivamente a sinistra, al centro e a destra, ad es.: <hr align="right" width="80%">
HTML: esempio righe orizzontali
HTML: Attributi del BODY Ci sono degli attributi che possono essere aggiunti all'elemento <body> per specificare l'aspetto del testo e dello sfondo in una pagina Web: background="file-grafico" permette di indicare un file grafico (in formato GIF o JPEG) che viene inserito sullo sfondo della pagina; se l'immagine è più piccola rispetto alla pagina, essa viene automaticamente duplicata e affiancata alle sue copie bgcolor="#colore RGB" permette di assegnare un colore allo sfondo text="#colore RGB" indica il colore del testo all'interno della pagina link="#colore RGB" indica il colore dei link vlink="#colore RGB" indica il colore dei link già attivati alink="#colore RGB" indica il colore dei link mentre si attivano con il mouse
HTML: i colori Colore Esadecimale Arancione #FF8000 Bianco #FFFFFF Blu #0000FF Celeste #80FFFF Giallo #FFFF00 Grigio #C0C0C0 Marrone #804040 Nero #000000 Rosa #FF8080 Il valore che segue l attributo BGCOLOR è un valore esadecimale che indica il colore. Il colore è dato dalla fusione dei tre colori principali, il Rosso, il Verde e il Blu. Le prime due cifre indicano la quantità di Rosso, le seconde la quantità di Verde mentre le terze la quantità di Blu (#rrvvbb). Rosso Verde Viola #FF0000 #00FF00 #8080FF Tabella dei colori ai siti http://www.molly.com/molly/webdesign/136_colors.html http://www.molly.com/molly/webdesign/colorchart.html
HTML: esempio tabella di colori
HTML: esempio colore di sfondo (1/2) <HTML> <HEAD> <TITLE>IMMAGINE</TITLE> </HEAD> <BODY BGCOLOR= #00FF00 > <B> Prova colore sfondo</b> <P> </BODY> </HTML>
HTML: esempio colore di sfondo (2/2)
HTML: dimensionamento dei caratteri (1/2) Nel caso di dimensionamento in termini assoluti si usa il seguente marcatore: <font size="n">testo</font> Dove 'n' è un numero che va da 1 a 7, ad es.: <font size="4">prova</font>. La dimensione normale del font è 3. Dunque se si usano gli indici 1 o 2 si ottiene un font ridotto rispetto al testo normale, mentre con 4, 5, 6 e 7 si ottiene un font ingrandito.
HTML: dimensionamento dei caratteri (2/2) Nel caso di dimensionamento in termini relativi si usa la seguente marcatura: <font size="+/- n">testo</font> In questo caso n può variare da -2 a +4. Usando in modo combinato i vari tag è possibile ottenere effetti come questo: <font size="+4">h</font><font size="+3"> E</font><font size="-1">l</font><font size="+2">lo</font>
HTML: le immagini <HTML> <HEAD> <TITLE>Esempio pagina contenente una IMMAGINE</TITLE> </HEAD> <BODY BGCOLOR= #000000 > <IMG SRC="tango1.jpg" alt="hugo Pratt/Corto Maltese e il tango"> <P> </BODY> </HTML> Se il file che contiene l immagine non si trova nella stessa directory del file html che lo include, si dovranno specificare anche i nomi delle directory (cartelle) fino a quella in cui si trova il file HTML (specificare il path), separati dalla barra (/), in questo modo: < img src=' immagini/tango1.jpg''> L attributo alt
HTML: esempio immagine
HTML: immagine in movimento <HTML> <HEAD> <TITLE>Esempio pagina contenente una IMMAGINE</TITLE> </HEAD> <BODY> <FONT SIZE="3" COLOR="BLUE"> ESEMPIO DI IMMAGINE in movimento (orizzontale)</font> <P> <MARQUEE> <IMG SRC="lungomaltese.jpg"> </MARQUEE> </P> </BODY> </HTML>
HTML: attributi del tag <img> L'elemento <img> è corredato da diversi attributi: per modificare le dimensioni (consigliati programmi di grafica) si può disporre degli attributi width e height. Ad esempio: <img src= esempio.gif height= 150 width= 45 > Attributo alt consente di inserire un testo accanto all immagine: alt= testo alternativo Attributo align per definire posizione dell'immagine rispetto al testo align = top align = middle testo allineato in alto testo allineato in centro align = bottom testo allineato in basso Altri attibuti hspace = vspace = border = spaziatura orizzontale (in pixel) spaziatura verticale (in pixel) in pixel Come già detto, un immagine può essere usata anche come sfondo: <body background= path completo >
HTML: link e riferimenti I documenti HTML sono degli ipertesti il cui funzionamento è dovuto agli HyperLink o ancoraggi, il cui tag specifico è <A>: <A HREF> L'elemento <A> (Anchor) ha bisogno di un tag di apertura e chiusura e al suo interno è possibile inserire testo, immagini o altri elementi multimediali. HREF (abbreviazione di Hypertext Reference) contiene l'url o la pagina da linkare: <A HREF="http://www.repubblica.it/"> Visita il sito del quotidiano La Repubblica </A> E' possibile sostituire al testo un'immagine Grazie a TARGET è possibile caricare un pagina associata a HREF in un'altra finestra del browser, attraverso la seguente sintassi: <A HREF= http://www.ciao.it TARGET="_new">Visita www.ciao.it </A> L'attributo TARGET="_new" indica al browser di caricare il link a http://www.ciao.it in una nuova (_new) finestra.
HTML: link a mail E' possibile inserire collegamenti anche verso indirizzi e-mail, attraverso una sintassi leggermente diversa da quella indicata per le URL: <A HREF="mailto:ciccio@bellicapelli.it">Scrivimi!</A> Cliccando su questo link viene automaticamente aperto il programma di posta predefinito con il campo TO/A già impostato su ciccio@bellicapelli.it.
HTML: le tabelle Per creare una tabella in HTML si usano i tag: <table>.</table> all interno dei quali si deve definire il contenuto della tabella. Per definire una tabella si procede nel modo seguente: si realizza la prima riga facendo uso del tag <tr> = table row si indicano le varie celle facendo uso: del tag <th> per le intestazioni di cella </th> = table header del tag <td> per i dati della cella </td> = table data si passa alla seconda riga con le relative celle avendo cura di usare il tag </tr>
HTML: esempio tabelle (1/2) <HTML> <HEAD><TITLE>Esempio di TABELLA</TITLE> </HEAD> <BODY> <CENTER> Tabella<P> <TABLE border=1> <TR><TD>uno<TD>due <TR><TD>tre <TD>quattro <TR><TD>cinque<TD>sei </TABLE> </CENTER> </BODY> </HTML>
HTML: esempio tabelle (2/2)
HTML: attributi tabelle border="n" (es.: <table border="1">) rende visibile il bordo della tabella. Il valore n è in pixel. cellpadding="n" (es.: <table cellpadding="10">) è lo spazio tra il bordo della tabella e il testo contenuto all'interno delle celle. cellspacing="n" (es.: <table cellspacing="5">) è la distanza tra una cella e un'altra. width="n n%" (es.: <table width="100%"> oppure <table width="250">) la larghezza della tabella relativamente allo schermo, espressa con i valori percentuali, oppure in assoluto, in pixel. bgcolor="#rrggbb" (es.: <table bgcolor="#ff0000"> oppure < table bgcolor="red">) determina il colore di sfondo della tabella. La sintassi di rrggbb è la medesima vista per attribuire colori allo sfondo del documento o ai caratteri. In alternativa ai valori esadecimali si possono anche qui usare i nomi dei colori, in inglese (red, green, ecc.).
HTML: caratteri speciali CARATTERI SPECIALI: < > > < à à é é è è ì ì ò ò ù ù & & spazio APICE E PEDICE: <sup> </sup> <sub> </sub>
HTML: i frame Una pagina WEB può essere suddivisa in più aree indipendenti denominate frame. Permettono di visualizzare più elementi di interesse primario Migliorano l aspetto finale della pagina WEB E consigliabile non eccedere nel loro uso per non appesantire la realizzazione del sito. Un punto a loro sfavore è l incompatibilità con alcuni browser che non supportano il loro utilizzo per cui, di norma, si crea una versione del sito con frame ed una versione senza frame.
HTML: un esempio di utilizzo dei frame FRAME PER IL DOCUMENTO FRAME DI NAVIGAZIONE HOME Link1 Link2 Link3 CONTENUTO DELL HOME PAGE
HTML: suddivisione orizzontale con frame Oppure RIGA RIGA
HTML: tag per creare i frame Occorre utilizzare i TAG <FRAMESET> </FRAMESET> che servono per delimitare la definizione di tutta la struttura e i TAG <FRAME SRC= nome1.htm NAME="alias1"> <FRAME SRC= nome2.htm NAME="alias2"> che servono per definire il nome convenzionale delle righe o delle colonne
HTML: tag per creare i frame <frameset> è il tag iniziale (sostituisce a tutti gli effetti il tag <body>) e raccoglie la descrizione dei frame presenti nella pagina. Quando la lista dei frame termina, si inserisce il tag finale </frameset> Il tag <frame> serve alla definizione di ogni singolo frame e non necessita di chiusura dato che esso termina quando se ne definisce uno nuovo oppure quando si usa il tag </frameset> Per organizzare una pagina con frame occorre dapprima costruire e predisporre le pagine html che riempiranno i diversi frame e successivamente definire i frame all interno della pagina principale.
HTML: frame, struttura colonne <HTML> <HEAD> <TITLE>Pagina con Frame</TITLE> </HEAD> <FRAMESET COLS= 15%, 85%"> <frame src= primo.html" name="menu"> <frame src= secondo.html" name="mypage"> </FRAMESET> </HTML>
HTML: frame, struttura colonne
HTML: frame, struttura righe <HTML> <HEAD> <TITLE>Pagina con Frame</TITLE> </HEAD> <FRAMESET ROWS="25%, 75%"> <frame src= primo.html" name="menu"> <frame src= secondo.html" name="mypage"> </FRAMESET> </HTML>
HTML: frame, struttura righe
HTML: commenti Sintassi per un commento (ovunque nel file): <!--commento--> Utilizzati per segnalare delle sezioni di codice o altre informazioni utili a chiunque utilizzi la pagina HTML NON interpretate da BROWSER Utilizzare la scrittura indentata (soprattutto per programmi particolarmente lunghi)
Recenti evoluzioni di HTML: fogli di stile HTML tradizionale: i tag sono usati sia per specificare la struttura che l aspetto del documento. Problemi di manutenibilità, compatibilità, verifiche di correttezza, etc.. Separazione: HTML sempre più orientato alla struttura (tag come <font > destinati a cadere in disuso) Gli stylesheets specificano come una pagina deve apparire
HTML: CSS CSS (Cascading Style Sheet): File (o area del sorgente HTML) in cui viene definito l aspetto desiderato per gli elementi di una pagina Web. body { color: purple } body { background-color: #d8da3d; font-weight: normal } h1 { font-family: Helvetica, Geneva, Arial, sans-serif } a:link { color: blue } a:visited { color: purple }.titolo { color: white; background: red; }.sottotitolo { color: red; background: white; }
HTML: fogli di stile collegati <HTML> <HEAD> <TITLE>Usare i fogli di stile</title> <LINK REL="stylesheet" TYPE="text/css" HREF="stile.css"> </HEAD> <BODY>... </BODY> </HTML> Lo stesso file può essere richiamato da più pagine Web! Gli attributi del tag <LINK > REL: descrive il tipo di relazione tra il documento e il file collegato. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet. HREF: serve a definire l'url assoluto o relativo del foglio di stile. TYPE: identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css. MEDIA: con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Unico di questi attributi ad essere opzionale.
HTML: fogli di stile incorporati Lo stile va comunque indicato all interno della sezione HEAD: <HTML> <HEAD> <TITLE>Usare i fogli di stile</title> <STYLE TYPE="text/css"> body { } </style> </HEAD> <BODY>... </BODY> </HTML> background: #FFFFCC;
HTML: fogli di stile in linea Ad esempio, si vuole formattare un titolo H1 in modo che abbia il testo di colore rosso e lo sfondo nero, scriveremo: <h1 style="color: red; background: black;">...</h1>
HTML: Quando usare i diversi tipi di CSS In base al meccanismo del cascading, si sfruttano le priorità: 1. In linea 2. Incorporati 3. Collegati Nota: l'uso estensivo di fogli in linea rischia di compromettere uno dei principali vantaggi dei CSS, ovvero avere pagine più leggere e facili da gestire. Il loro uso è ultimamente considerato deprecato anche dal W3C
HTML: stile_di_esempio.css /* Definisco le regole per il corpo del documento */ body { background: White; /* Prima dichiarazione: notate il punto e virgola finale!*/ font-family: Verdana, Geneva, Arial, Helvetica; /* Seconda dichiarazione*/ font-size: 12px; /* Terza dichiarazione */ } /* Titolo di primo livello */ h1 { color: black; } /* Paragrafo generico */ p { color: black; font: 12px/1.5 Georgia, "Times New Roman", serif; } #div1 { background: Silver; /* Sfondo color argento */ width: 300px; } #div2 { background: Silver; width: 300px; position: absolute; top: 400px; left: 400px; }
HTML: sintassi dei fogli di stile Come è fatta una regola:
HTML: CSS Selettore Class Per definire una classe si usa far precedere il nome da un semplice punto: <style type="text/css">.testorosso { font: 12px Arial, Helvetica, sans-serif; color: #FF0000; } </style> Per applicarla ad un elemento della pagina Web: <p class="testorosso"> In questo paragrafo parleremo di...</p>
HTML: CSS Selettore ID La sintassi per la definizione di un ID. Basta far precedere il nome dal simbolo di cancelletto: <style type="text/css"> #titolo {color: blue;} </style> Per applicarla ad un elemento della pagina Web: <h1 id="titolo"> Titolo dell articolo...</h1>
HTML: CSS Classe o ID? I selettori di tipo Class e ID funzionano nello stesso modo, ma con una sola fondamentale differenza: è ad essa che dovete fare riferimento per scegliere se usare una classe o un ID. In un documento (X)HTML l'attributo id è usato per identificare in modo univoco un elemento. In pratica, se assegno ad un paragrafo l'id "testorosso", non potrò più usare questo valore nel resto della pagina. Di conseguenza, l'id #testorosso dichiarato nel CSS trasformerà solo quel paragrafo specifico. Una singola classe, al contrario, può essere assegnata a più elementi, anche dello stesso tipo.
HTML: CSS Pseudo-classi Una pseudo-classe non definisce un elemento ma un particolare stato di quest'ultimo. In pratica imposta uno stile per un elemento al verificarsi di certe condizioni. La seguente regola vuol dire: i collegamenti ipertestuali (<A>) che non siano stati visitati (:link) avranno il colore blue. a:link {color: blue;} La seguente regola vuol dire: i collegamenti ipertestuali (<A>) che sono stati visitati (:visited) avranno il colore purple. a:visited { color: purple }