classiperlo.altervista.orgclassiperlo.altervista.org/Materiale/3ast/EL5-1_3AST_Stru… · Web...
16
EL5-1_3AST STRUTTURA DELLA PAGINA IN HTML5 Autore: __________________________________________ Data: _________Classe: ____ Se ci sono domande a cui non sai rispondere, puoi lasciarle vuote, ma devi scriverlo alla fine dell'esercitazione. Domande senza risposta (o con generica risposta NON SO) e non elencate alla fine, potranno comportare l'annullamento dell'esercitazione (se 3 o più). ABBREVIAZIONI (SHORTHAND) →pagina.html Indica la creazione di un file col nome indicato nella cartella dell'esercitazione (a partire dal template di pagina vuota o mediante copia e incolla dalle pagine precedenti). Segue descrizione del file da creare o immagine esplicativa. → Schermata browser Indica che bisogna incollare una schermata della pagina corrente visualizzata nel brower. → Validatore Indica che bisogna validare la pagina e incollare una schermata del validatore. ATTENZIONE: non verranno accettate validazioni in cui non è visibile l'indirizzo della pagina validata → GIF Indica che bisogna registrare un filmato GIF
Transcript of classiperlo.altervista.orgclassiperlo.altervista.org/Materiale/3ast/EL5-1_3AST_Stru… · Web...
EL5-1_3AST STRUTTURA DELLA PAGINA IN HTML5 Autore: __________________________________________ Data: _________Classe: ____
Se ci sono domande a cui non sai rispondere, puoi lasciarle vuote, ma devi scriverlo alla fine dell'esercitazione. Domande senza risposta (o con generica risposta NON SO) e non elencate alla fine, potranno comportare l'annullamento dell'esercitazione (se 3 o più).
ABBREVIAZIONI (SHORTHAND)
→pagina.htmlIndica la creazione di un file col nome indicato nella cartella dell'esercitazione (a partire dal template di pagina vuota o mediante copia e incolla dalle pagine precedenti). Segue descrizione del file da creare o immagine esplicativa.
→ Schermata browserIndica che bisogna incollare una schermata della pagina corrente visualizzata nel brower.
→ ValidatoreIndica che bisogna validare la pagina e incollare una schermata del validatore.
ATTENZIONE: non verranno accettate validazioni in cui non è visibile l'indirizzo della pagina validata
→ GIFIndica che bisogna registrare un filmato GIF
→ Codice HTMLIndica che bisogna incollare il codice specificato (es. HTML, CSS, JS)
A) OPERAZIONI PRELIMINARI
A1) Crea una cartella di nome ES5 nella tua cartella Esercitazioni.
A2) Crea una sottocartella di ES5 con nome uguale a quello di questa esercitazione (EL5-1_3AST Struttura della pagina in HTML5)
A3) All'interno della sottocartella EL5-1_3AST Struttura della pagina in HTML5 salva questo file Word
B) NUOVI ELEMENTI SEMANTICI IN HTML5
Abbiamo imparato a usare l'elemento contenitore DIV per strutturare la nostra pagina in blocchi (esempio header, footer, colonna laterale etc).
L'HTML 5 prevede una serie di elementi specifici (elementi semantici) che possono essere usati per costruire la struttura di una pagina, al posto dei semplici DIV.
I principali elementi semantici in HTML 5 sono
1. HEADERServe per specificare l'intestazione di una pagina o di una sezione all'interno di una pagina. Da non confondere con i tag H1, H2 etc (che sono un'altra cosa!).
2. FOOTERServe per specificare un footer (piè di pagina) in una pagina o in una sua sezione
3. NAVServe per indicare un menu di navigazione
4. ARTICLEServe per specificare un articolo. Esso può identificare il post di un forum, un articolo di una rivista o di un giornale, l’articolo di un blog, un commento, un widget interattivo, o qualsiasi cosa che abbia un contenuto autonomo nella pagina.
5. SECTIONServe per indicare una sezione generica, cioè un raggruppamento di contenuti affini per tema.
6. ASIDEServe per raggruppare informazioni collaterali (es. box di approfondimenti, pubblicità etc)
Eccoti qui i riferimenti per la spiegazioni e gli esperimenti su W3School:
https://www.w3schools.com/html/html5_semantic_elements.asp
Vediamo tutto questo in pratica.
B1) → Copia e incolla il codice seguente in struct1.html:
<!DOCTYPE html> <html lang="it">
<head> <meta charset="utf-8"> <title>Titolo della pagina</title>
</head>
<body>
<div id="header"><h1>HEADER PRINCIPALE</h1><div id="nav1"><ul><li><a href="www.classiperlo.altervista.org">link1</a></li><li><a href="www.classiperlo.altervista.org">link1</a></li><li><a href="www.classiperlo.altervista.org">link1</a></li></ul></div></div><div id=”main”><div id="aside"><h2>TITOLO ASIDE</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis iaculis gravida. Ut nunc libero, hendrerit a felis quis, laoreet tincidunt tortor. Vivamus in ligula aliquam, sollicitudin est sed, ornare nibh. Suspendisse tincidunt metus justo, at pulvinar lorem rutrum et. Donec elementum ac purus sit amet congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam viverra ex eget ex semper imperdiet. Sed sit amet rhoncus dui, a vulputate dui. Suspendisse dictum, tellus vitae mattis auctor, dui odio auctor sem, non vestibulum magna ligula et sem. Nam vel augue vel dolor consequat placerat. Suspendisse potenti. Duis semper purus sit amet lectus accumsan ultrices. Vivamus tempus, risus in venenatis scelerisque, arcu felis volutpat ante, sed interdum velit dui et sem.</p><div id="nav2"><ul><li><a href="www.classiperlo.altervista.org">link1</a></li><li><a href="www.classiperlo.altervista.org">link1</a></li><li><a href="www.classiperlo.altervista.org">link1</a></li></ul></div></div><div id="section"><h2>TITOLO SEZIONE</h2><div id="article1"><h3>TITOLO ARTICLE1</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis iaculis gravida. Ut nunc libero, hendrerit a felis quis, laoreet tincidunt tortor. Vivamus in ligula aliquam, sollicitudin est sed, ornare nibh. Suspendisse tincidunt metus justo, at pulvinar lorem rutrum et. Donec elementum ac purus sit amet congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam viverra ex eget ex semper imperdiet. Sed sit amet rhoncus dui, a vulputate dui. Suspendisse dictum, tellus vitae mattis auctor, dui odio auctor sem, non vestibulum magna ligula et sem. Nam vel augue vel dolor consequat placerat. Suspendisse potenti. Duis semper purus sit amet lectus accumsan ultrices. Vivamus tempus, risus in venenatis scelerisque, arcu felis volutpat ante, sed interdum velit dui et sem.
</p></div><div id="article2"><h3>TITOLO ARTICLE1</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis iaculis gravida. Ut nunc libero, hendrerit a felis quis, laoreet tincidunt tortor. Vivamus in ligula aliquam, sollicitudin est sed, ornare nibh. Suspendisse tincidunt metus justo, at pulvinar lorem rutrum et. Donec elementum ac purus sit amet congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam viverra ex eget ex semper imperdiet. Sed sit amet rhoncus dui, a vulputate dui. Suspendisse dictum, tellus vitae mattis auctor, dui odio auctor sem, non vestibulum magna ligula et sem. Nam vel augue vel dolor consequat placerat. Suspendisse potenti. Duis semper purus sit amet lectus accumsan ultrices. Vivamus tempus, risus in venenatis scelerisque, arcu felis volutpat ante, sed interdum velit dui et sem.</p></div></div></div><div id="footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis iaculis gravida. Ut nunc libero, hendrerit a felis quis, laoreet tincidunt tortor. Vivamus in ligula aliquam, sollicitudin est sed, ornare nibh. Suspendisse tincidunt metus justo, at pulvinar lorem rutrum et. Donec elementum ac purus sit amet congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam viverra ex eget ex semper imperdiet. Sed sit amet rhoncus dui, a vulputate dui. Suspendisse dictum, tellus vitae mattis auctor, dui odio auctor sem, non vestibulum magna ligula et sem. Nam vel augue vel dolor consequat placerat. Suspendisse potenti. Duis semper purus sit amet lectus accumsan ultrices. Vivamus tempus, risus in venenatis scelerisque, arcu felis volutpat ante, sed interdum velit dui et sem.</div></body>
</html>
La figura seguente mostra il significato dei diversi elementi presenti nella pagina (main è il DIV che contiene aside e section):
Naturalmente gli elementi non sono stati posizionati, non ci sono bordi, margini etc. Stiamo parlando semplicemente di struttura logica (o semantica) della pagina.
B2) Copia struct1.html in struct2.html
B3) Modifica struct2.html in modo da introdurre i nuovi elementi semantici di html5 al posto degli elementi DIV generici (vedi sotto per le spiegazioni).
SPIEGAZIONI
Supponiamo per esempio di voler modificare:<div id="header">....</div>
Questo è molto facile. Dal momento che la pagina contiene un solo elemento header, è sufficiente convertire il DIV nel corrispondente elemento HEADER di HTML 5:
<header>....</header>
Vediamo un esempio leggermente più complesso. Voglio modificare:<div id="nav1">...</div>
Siccome in questo caso la pagina contiene più elementi di navigazione, dovrò identificare con un diverso id i diversi elementi:
<nav id="nav1">...</nav>
ATTENZIONE: non esiste nessun elemento di nome main in HTML 5. Pertanto:<div id="main">...</main>
non deve essere sostituito (rimane un normale elemento DIV).
B4) → Codice completo di struct2.html
B5) → Validatore html
B6) Secondo te, quali vantaggi ci sono ad usare i tag semantici invece dei semplici DIV? Ti suggerisco alcune risposte, che devi sviluppare e ampliare, scrivendo la tua spiegazione (leggi i riferimenti indicati nel box sotto):
1. MIGLIORA L'ACCESSIBILITA':
2. MIGLIORA LA SEO (Search Engine Optimization):
3. MIGLIORA LA LEGGIBILITA' E MANUTENZIONE DEL CODICE:
QUALI SONO I VANTAGGI DEI TAG SEMANTICI
- https://seekbrevity.com/semantic-markup-important-web-design/- http://www.html5arena.com/blog/html5/10-major-advantages-of-html5/
Osserva la figura qui sotto. La pagina sinistra è realizzata usando una serie di DIV. La pagina di destra invece usa gli elementi strutturali di HTML 5:
C) POSIZIONAMENTO DEGLI ELEMENTI NELLA PAGINA
C1) Crea un foglio CSS vuoto di nome struct2.css e collegalo con struct2.html
C2) Senza modificare il codice html di struct2.html, ma lavorando esclusivamente sul foglio stile struct2.css, dimensiona e posiziona gli elementi header, aside, section (+article1, article2) e footer. Riproduci il posizionamento indicato in figura:
Usa valori di dimensioni, margine, padding e posizione a piacere. Colora lo sfondo di ogni elemento in modo diverso, in modo che siano distinguibili fra loro.
SUGGERIMENTO
main non è un elemento nuovo, è solo un DIV con id="main" e serve come contenitore di ASIDE e di SECTION. Puoi posizionare ASIDE e SECTION con float left e right.Se il FOOTER non si posiziona correttamente, usa clear:both per azzerare tutti i posizionamenti (stile da applicare sull’elemento FOOTER).
C3) → Codice di struct2css
C4) → Schermata browser
C5) → Validatore html
C6) → Validatore css
D) TRASFORMIAMO LE LISTE DI NAVIGAZIONE IN MENU
Nella nostra pagina i menu di navigazione sono stati realizzati per mezzo di liste non ordinale (UL). Questa è infatti la prassi usata da tutti per la realizzazione di pagine html, in quanto dal punto di vista semantico un menu di navigazione è una lista (di link).
Tuttavia le liste puntate standard dell'html non sono certamente eleganti da vedere! Ma nessun problema: possiamo sistemarle usando gli stili.
Puoi trovare una spiegazione più approfondita ed esempi pratici qui:
https://www.w3schools.com/css/css_navbar.asp
Occupiamoci per prima cosa del menu di navigazione verticale (in Nav2). Il codice CSS per trasformare una lista non numerata in un menu di navigazione verticale è il seguente:
ul.verticale { list-style-type: none; margin: 0; padding: 0; width: ... background-color: ...;}
ul.verticale li { text-align: center; border: ...; /* serve per separare gli elementi */}
ul.verticale li a { display: block; color: ...; padding: ...; text-decoration: none;}
ul.verticale li a:hover { background-color: ...; color: ...;}
I puntini di sospensione indicano dei valori che possono essere scelti a piacere. I singoli punti sono spiegati nel dettaglio qui sotto:
1. ul.verticaleIl nome verticale viene usato per creare una classe da assegnare all'elemento UL che contiene il menu verticale (<ul class="verticale">).
2. ul.verticale liIndica tutti gli elementi LI che si trovano dentro una lista UL con classe verticale.
Serve per attribuire uno stile solo agli LI che stanno dentro la lista verticale (e solo a quelli).
3. ul.verticale li aIndica tutti gli elementi A che si trovano dentro un elemento LI che si trova dentro un UL con classe verticale. Serve per attribuire uno stile ai link contenuti nella lista verticale (e solo a quelli).
4. ul.verticale li a:hoverCome sopra, ma definisce una pseudoclasse hover che verrà richiamata quando si passa col mouse sopra a un link contenuto nella lista.
5. list-style-type: noneServe per rimuovere il pallino (bullet) dagli elementi della lista non ordinata UL.
6. text-decoration: noneServe per togliere la sottolineatura dai link.
7. display: blockDice di trattare gli elementi A (che normalmente sarebbero elementi inline) come elementi di blocco (come se fossero DIV, per intenderci).
D1) Completa gli stili precedenti aggiungendo le dimensioni e i colori mancanti (a piacere, secondo i tuoi gusti).
D2) → Codice di struct2css (solo la parte riguardante il menu verticale)
D3) → Schermata browser
Vediamo adesso come si fa a trasformare una lista UL in un menu di navigazione orizzontale. Il codice CSS che ci serve è il seguente:
ul.orizzontale { list-style-type: none; background-color: ...; margin: 0; padding: 0; overflow: hidden; text-align:center;}
ul.orizzontale li { display:inline;
border-right: ...; /* serve per separare gli elementi */}
ul.orizzontale li a { color: white; padding: ...; text-decoration: none;}
ul.orizzontale li a:hover { background-color: ...;}
I diversi punti sono spiegati qui sotto (solo quelli che sono diversi dalla lista verticale):
1. overflow: hiddenSe il testo contenuto supera le dimensioni dell'elemento, taglia (nasconde) la parte eccedente.
2. display: inlineDice di trattare gli elementi LI (che normalmente sarebbero elementi di blocco) come elementi inline (come se fossero SPAN, per intenderci). Questo stile fa sì che i diversi elementi della lista vengano visualizzati uno accanto all'altro (in orizzontale, invece che verticalmente, come di solito).
3. border-rightServe per definire un bordo destro su ogni elemento della lista, in modo da separare con una linea verticale gli elementi stessi.
D4) Completa gli stili precedenti aggiungendo le dimensioni e i colori mancanti (a piacere, secondo i tuoi gusti).
D5) → Codice di struct2css (solo la parte riguardante il menu orizzontale)
D6) → Schermata browser
D7) → Validatore html
D8) → Validatore css
E) ACCESSIBILITA'
Verifichiamo infine che la nostra pagina sia accessibile. Se ci sono errori, correggili, prima di incollare le schermate.
E1) Copia struct2.html e struct2.css in struct3.html e struct3.css (modifica il collegamento al foglio stile). Rendi accessibile struct3.html (se non lo è).
E2) → Schermata browser pagina accessibile
E3) Validatore accessibilità http://examinator.ws/ (solo scheda Mal):
E4) Schermata analisi pagina effettuata con Color Contrast Analyzer
F) OPERAZIONI FINALI
F1) Controlla di aver risposto a tutte le domande contenute in questa esercitazione. Se hai tralasciato alcune domande perché non sai rispondere, elencale qui (es. B2):
F2) Comprimi le immagini contenute in questo file Word (seleziona un'immagine, scheda Formato e poi Comprimi immagini e infine Applica a tutte le immagini del documento) in modo da ridurne le dimensioni.
F3) Se lavori a scuola, svuota la cartella tua Download (prima salva gli eventuali file che ti servono!) e poi incolla qui sotto una schermata in cui si veda la cartella Download vuota insieme con l'orologio e la data del PC (in fondo allo schermo). Se lavori sul PC di casa, puoi saltare questa domanda.
F4) Controlla che la cartella di questa esercitazione contenga i seguenti file con i nomi qui indicati:Nome del file Tipo del file DescrizioneEL5-1_3AST Struttura della pagina in HTML5
Word Il file di questa esercitazione
struct1.html HTMLstruct2.html HTMLstruct2.css CSSstruct3.html HTMLstruct3.css CSS
F5) Chiudi tutti i file, zippa la cartella di questa esercitazione e inviala all'insegnante su Classiperlo.
