HTML & MARKUP LANGUAGES 2...•Nuovi html5 - nav-main-header-footer-section-article … BODY...

Informatica e grafica per il web 2017-2018 | docente: Gabbiadini Alessandro 1

HTML & MARKUP LANGUAGES 2


Qui è racchiuso il contenuto vero e proprio del documento che viene visualizzato dal browser. Il contenuto della pagina verrà strutturato a seconda dei tag utilizzati:• Titoli - h1 e Sottotitoli - h2, h3, h4, h5, h6• Testi - p ed elenchi - ul-ol-li• Immagini - img• Link - a• Tabelle - table• Blocchi contenitore - div• Nuovi html5 - nav-main-header-footer-section-article …

BODY


Oltre alla definizione del contenuto è possibile definire una serie di attributi a ciascun tag.Sintassi: <tag attributo=”valore”>contenuto</tag>Alcuni attributi sono specifici per determinati tag (href, src...), altri invece possono essere specificati per qualsiasi tipo di tag (id, class...)

es. <a href=”miapagina.htm” class=”blu”>Mia pagina</a>es. <p class=”blu”>Mio paragrafo</p>es. <img src=”miaimmagine.jpeg”>

ATTRIBUTI


“The <a> tag defines a hyperlink, which is used to link from one page to another.” (w3schools)

Il tag <a> (anchor / link / collegamento) trasforma il documento in un ipertesto: sono “il ponte” che consente di passare da una pagina all’altra.

L’attributo più importante è href (hypertext reference) che definisce la destinazione del collegamento.

Sintassi: <a href=”url-di-destinazione”>testo visualizzato</a>

TAG <A> : ANCHOR LINK


La destinazione di un link può essere:

» un url (che può essere relativa o assoluta)

<a href=”pagina.html”>url relativo</a>

<a href=”http://www.sito.com”>url assoluto</a>

» un indirizzo mail

<a href=”mailto:[email protected]”>[email protected]</a>

» un’ancora

<a href=”#ancora”>ancora</a>

TAG <A> / DESTINAZIONE


URL ASSOLUTI / PERCORSI ASSOLUTI

<a href=”http://www.miosito.it/cartella/pagina.html”>link</a>

Descrivere un percorso assoluto significa indicare per esteso l’indirizzo di un certo documento, elencando tutte le directory e sottodirectory che dobbiamo attraversare per raggiungerlo.


Sviluppando un sito si fa spesso riferimento a documenti situati nel sito stesso, per fare questo è possibile usare i percorsi relativi.

I percorsi relativi fanno riferimento alla posizione degli altri file rispetto al documento in cui ci si trova in quel momento.

<a href=”pagina2.html”>link</a>

URL RELATIVI / PERCORSI RELATIVI


Nel file brochure.html per scrivere un collegamento con url relativa

Stesso livello <a href=”sitiweb.html”>Siti web</a>

Livello superiore <a href=”../prodotti.html”>Prodotti</a>

File all’interno di una cartella contenuta nel livello superiore <a href=”../servizi/consulenza.html”>Consulenza</a>

Nel file servizi.html scrivere un collegamento contenuto in una cartella di livello inferiore basterà inserire il nome della cartella seguito da uno slash <a href=”servizi/consulenza.html”>Consulenza</a> <a href=”prodotti/sitiweb.html”>Siti web</a>

URL RELATIVI / PERCORSI RELATIVI


ATTENZIONE AI PERCORSI ASSOLUTI IN LOCALE!


È consigliabile non lasciare spazi vuoti nei nomi dei file (gli spazi vuoti non sempre vengono interpretati correttamente), meglio ovviare a questa necessità con un “trattino basso” (cioè “_”) o un trattino alto (“-“). Ad esempio: mio_file.html / mio-file.html

Maiuscole e minuscole possono fare la differenza (in ambiente Unix spesso la fanno), quindi controllate il modo in cui avete scritto i file.

Non usare lettere accentate visto che possono essere codificate in maniera diversa su piattaforme diverse (una “à” scritta in ambiente Windows può essere letta come una “Ö” in ambiente MacOs).

Non usare simboli e punteggiatura visto che spesso sono usati per funzioni specifiche nella barra degli indirizzi (lo slash / indica un cambio di una cartella, il ? serve a inserire una serie di parametri aggiuntivi ecc.)

IMPORTANTE: NOMI DEI FILE


» File homepage: 1) deve chiamarsi index.htm o index.html (tutto minuscolo!) altrimenti, nel momento in cui si carica il sito online, il sito non funziona. 2) deve trovarsi nella cartella root del sito ossia non deve essere contenuto in una sottocartella.

» Sottocartelle che suddividono i contenuti non html (immagini, file da scaricare, pdf, javascript ecc.) eventualmente è possibili creare sottocartelle anche per i file html

» Sottocartella per i file css se esistono più fogli stile css

ORGANIZZAZIONE DEL SITO


TAG <IMG> : INSERIAMO LE IMMAGINI


TAG <IMG> : FORMATI IMMAGINE

I formati immagine per il web sono:

»JPEG Joint Photographic Experts Group

»GIF Graphics Interchange Format

»PNG (PNG-8 e PNG-24) Portable Network Graphics

Esistono inoltre i formati:

»WBMP Wireless Bitmap: formato monocromatico (pixel bianchi e neri) usato da dispositivi wireless (per esempio dispositivi WAP).

»SVG Scalable Vector Graphics: formato per immagini vettoriali.

Central

IntramurosSee and Do

Eat

Drink

Buy

Sleep

Missing entries

Missing Entries

Missing entries

Missing Entries

Missing entries

Esempio di immagine

WBMP

Esempio di immagine

SVG



JPEG / ideale per fotografie e immagini complesse con tanti colori e cambi tonali, compressione con perdità: la riduzione delle dimensioni dei file è ottenuta riducendo la qualità dell’immagine; non supporta la trasparenza.

GIF / ideale per loghi, testi e altre immagini grafiche, compressione senza perdità, ma supporta fino a 256 colori, quindi se l’immagine ha più di 256 colori avrò una perdita di qualità, per questo non è adatto per immagini fotografiche con milioni di colori, supporta la trasparenza a 1 bit (quindi un pixel potrà essere o completamente trasparente o completamente opaco) e l’animazione.

PNG-8 / è l’equivalente del formato GIF ma senza animazione.

PNG-24 / ideale per qualsiasi tipo di immagine, compressione senza perdità e la qualità dell’immagine è molto alta, supporta la trasparenza a 8-bit, la dimesione (peso) del file è piuttosto alta, soprattutto nel caso di immagini fotografiche.


Inutile provare dunque a inserire un file “.psd” (formato nativo di Photoshop) all’interno della vostra pagina HTML: con grande probabilità il browser non caricherà il file (dovete infatti prima convertire il file in uno dei formati precedentemente indicati).

È importante ricordare che il codice HTML fornisce delle indicazioni al browser su come visualizzare il testo e le immagini - ed eventualmente i video e i suoni - all’interno della pagina: il testo (come abbiamo visto) è scritto direttamente nel file HTML, le immagini invece sono caricate insieme alla pagina.



TAG <IMG> : SINTASSI

Sintassi:

<img src=”logo.gif” alt=”descrizione”/> (xhtml)

<img src=”logo.gif” alt=”descrizione”> (html5)


Ogni tabella è composta da:

»un tag <table> che definisce dove inizia e finisce la tabella

»uno o più tag <tr> TableRules che definiscono le righe della tabella

»uno o più tag <td> TableData all’interno di ciascuna riga che definiscono le celle per riga

»eventualmente uno o più tag <th> TableHeader per la prima riga che definiscono le celle-intestazione

<table> <tr> <th>intestazione 01</th> <th>intestazione 02</th> </tr> <tr> <td>dato 01</td> <td>dato 02</td> </tr> <tr> <td>dato 01</td> <td>dato 02</td> </tr> </table>

LE TABELLE: TAG <TABLE> <TR> <TH> <TD>


Per ottenere questo risultato è necessario specificare che una cella deve occupare il posto di 2 (o più colonne). In questo caso si utilizza l’attributo colspan sul <td>, specificando come valore il numero di celle che devono essere occupate.

Sintassi: <td colspan=”3”>contenuto cella</td>

Tramite l’attributo rowspan (da riferirsi sempre a <td>) è invece possibile creare delle celle che occupino più di una riga.

Sintassi: <td rowspan=”3”>contenuto cella</td>

LE TABELLE: GLI ATTRIBUTI COLSPAN E ROWSPAN


Il tag <div> descrive un blocco logico, un box contenitore, che ci permette di creare la griglia di impaginazione. Può essere visto come un rettangolo contenitore di contenuti o altre strutture. Vengono usati per suddividere i contenuti di una pagina web e organizzarli nello spazio tramite i css.

Sintassi

<div> some content here </div>

Il blocco div impone un “a capo”, ma - a differenza del paragrafo – non lascia spazi prima e dopo la sua apertura.

TAG <DIV> : BLOCCO CONTENITORE

Esempio <div> <h2>titolo</h2> <p>contenuto</p> </div>


DIv esterno per la pagina

DIV per header

DIV per il content

DIV per il pre-footer

DIV per il footer

DIV per la left columnDIV per la right column

DIV per il menuDIV per il logo


Ogni elemento HTML può avere associato un attributo id attraverso il quale determinare univocamente un elemento nella pagina.

Non ci devono essere due elementi con il medesimo id. Viene utilizzato spesso per differenziare in modo univoco i div che strutturano la pagina.

Sintassi

<div id=”menu”> voci di menu qui </div>

ATTRIBUTO ID


Per raggruppare un gruppo di elementi in linea (esempio una parte di testo) può essere utile utilizzare il tag <span> per separarli dal resto. Non inserisce nessun a capo.Il tag <span> non aggiunge nessun cambiamento visivo o grafico agli elementi che raggruppa di default.Il tag <span> fornisce un modo per formattare una parte del testo o una parte del documento.Quando non abbiamo un tag a cui fare riferimento, il tg span serve da segnaposto (lo vedremo meglio in seguito)Sintassi<p>

The <span attributi>Quick Brown Fox</span> Jumps OverThe <span attributi>Lazy Dog</span>

</p>

TAG <SPAN> : CONTENITORE PER ELEMENTI IN LINEA


Ogni elemento HTML può avere associato un attributo class con uno o più valori.

L’attributo class serve per attibuire stili uguali a tutti gli elementi con quella classe.

<p class=”rosso”> Paragrafo con classe rosso </p>

<p class=”rosso strillo”> Paragrafo con classe rosso e classe strillo </p>

ATTRIBUTO CLASS


Ogni elemento nella medesima pagina puo avere uno ed un solo ID associato.

Gli elementi possono avere classi multiple associate

<div id=”content” class=”classe1 classe2 classe3”> oggetto identificato come content a cui sono associate 3 classi </div>

ID VS CLASS


DOMANDE?

HTML & MARKUP LANGUAGES 2...•Nuovi html5 - nav-main-header-footer-section-article … BODY...

Documents

Transcript of HTML & MARKUP LANGUAGES 2...•Nuovi html5 - nav-main-header-footer-section-article … BODY...