Embed Size (px)
Citation preview
EL5-1_3AST STRUTTURA DELLA PAGINA IN HTML5 Autore: __________________________________________ Data: _________Classe: ____
ATTENZIONE
Il significato dei simboli usati in questa e nelle prossime esercitazioni è spiegato dettagliatamente nella guida http://www.classiperlo.altervista.org/Materiale/Generale/Simboli.doc (scaricala e consultala in caso di dubbi).
Il simbolo della manina in colore blu indica una domanda alla quale bisogna OBBLIGATORIAMENTE rispondere scrivendo in colore blu.
Il simbolo della manina in colore blu con la scritta Cou New indica un codice che va incollato usando Courier New in colore blu.
Il simbolo della manina in nero indica una o più immagini o schermate da incollare (protette col tuo watermark, le tue iniziali di Nome e Cognome)
Il simbolo della manina con colori attenuati indica un'operazione che bisogna svolgere, senza rispondere a nessuna domanda (non vuol dire che non devi fare nulla – significa solo che non devi scrivere niente!).
Il simbolo della manina col ciak video indica un video da registrare con Gif Recorder (http://gifrecorder.com/)e da salvare in formato gif nella cartella dell'esercitazione.recupero.
Questo simbolo indica un video di esempio o di spiegazioni da guardare su YouTube
A) OPERAZIONI PRELIMINARI (ATTENZIONE AI PUNTI A4 E A5)
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
A4) Incolla qui sotto una schermata dove si veda la struttura di cartelle e sottocartelle della tua cartella Informatica in File Explorer (sostituisci la mia immagine con la tua espandendo tutte le cartelle principali):
A5) Svuota la tua cartella Download, cancellando o spostando da altre parti tutti i file che contiene. Incolla qui sotto una schermata nella quale si veda Download vuota e la data dell'orologio di sistema (sostituisci la mia schermata con la tua):
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.
ELEMENTI SEMANTICI
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. MAINServe per indicare il contenuto principale del documento. Per una data pagina ci può solo essere un unico elemento MAIN
4. NAVServe per indicare un menu di navigazione
5. 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.
6. SECTIONServe per indicare una sezione generica, cioè un raggruppamento di contenuti affini per tema.
7. ASIDEServe per raggruppare informazioni collaterali (es. box di approfondimenti, pubblicità etc)
B1) Cosa vuol dire la parola semantico e cosa significa elemento semantico?
B2) Per esempio, un paragrafo P è un elemento semantico? E un DIV?
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, cominciando con una pagina costruita senza usare i nuovi elementi semantici di HTML 5 (ma usando, come sei abituato a fare, i normali DIV).
B3) → 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):
ATTENZIONE
Naturalmente gli elementi non sono stati posizionati, non ci sono bordi, margini etc. e l'aspetto della tua pagina sarà per adesso del tutto diverso da quello mostrato nella figura qui sopra. Ci occuperemo poi del posizionamento.
Per adesso occupiamoci semplicemente di struttura logica (o semantica) della pagina. Realizziamo dunque una seconda versione della stessa pagina, nella quale però utilizzeremo i nuovi elementi di HTML 5 al posto dei normali DIV.
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:
B4) Copia struct1.html in struct2.html
B5) 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>
B6) → Codice completo di struct2.html
B7) → Validatore html
C) TAG SEMANTICI: A COSA SERVONO?
QUALI SONO I VANTAGGI DEI TAG SEMANTICI
In generale l'uso di elementi semantici rende più efficiente, interpretabile e chiara la struttura della pagina. In particolare:
1) una pagina realizzata con elementi semantici risulta maggiormente accessibile per le tecnologie di lettura assistita (un lettore vocale per esempio riesce a navigare più facilmente nella struttura della pagina se questa è costruita con elementi semantici, invece di semplici div).
2) strutturare la pagina con gli elementi semantici facilita l'indicizzazione della pagina da parte dei motori di ricerca (es. Google), migliorando quella che viene detta SEO (Search Engine Optimization).
3) il codice di una pagina correttamente strutturata è più chiaro e leggibile e pertanto più facile da correggere e da modificare per lo sviluppatore
C1) Prova a spiegarmi per quali ragioni, ad esempio, l'uso dell'elemento NAV potrebbe aiutare un lettore vocale nell'interpretazione di una pagina:
C2) Perché gli elementi semantici facilitano l'indicizzazione automatica da parte dei motori di ricerca?
C3) Quali vantaggi comporta per il web designer il fatto che la pagina sia ottimizzata per la SEO?
C4) Dai adesso un'occhiata alla pagina in figura qui sotto:
C5) Qui puoi vedere un esempio di uso degli elementi semantici per strutturare la pagina precedente:
C6) L'elemento main della pagina contiene un unico elemento. Quale?
C7) Per quale ragione la pagina contiene due elementi nav?
C8) Qual è lo scopo semantico dell'elemento aside nella pagina precedente?
C9) Quanti elementi article ci sono nella pagina?
D) POSIZIONAMENTO DEGLI ELEMENTI NELLA PAGINA
D1) Crea un foglio CSS vuoto di nome struct2.css e collegalo con struct2.html
D2) 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
Ricordati di fornire le dimensioni orizzontali width e height dei vari elementi.
Puoi usare une elemento MAIN come contenitore (invisibile) di ASIDE (in giallo) e di SECTION (in arancione). Dai una dimensione orizzontale width a MAIN.
Puoi posizionare ASIDE e SECTION all'interno del contenitore MAIN con float left (ed eventualmente float right).
Se il FOOTER non si posiziona correttamente, usa clear:both per azzerare tutti i posizionamenti (stile da applicare sull’elemento FOOTER).
D3) → Codice di struct2css
D4) → Schermata browser
D5) → Validatore html
D6) → Validatore css
E) TRASFORMIAMO LE LISTE DI NAVIGAZIONE IN MENU
https://youtu.be/ALKY1k0IYC0 (Puoi creare anche tu altri video come questo e vincere PC! Leggi le spiegazioni su SPEEDY VIDEO sotto al mio video)
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).
E1) Cosa vuol dire la frase "dal punto di vista semantico un menu di navigazione è una lista"? Spiegamela con parole tue:
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
STILI PER IL MENU DI NAVIGAZIONE VERTICALE
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:hover
Come 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).
E2) Completa gli stili precedenti aggiungendo le dimensioni e i colori mancanti (a piacere, secondo i tuoi gusti).
E3) → Codice di struct2css (solo la parte riguardante il menu verticale)
E4) → Schermata browser
STILI PER IL MENU DI NAVIGAZIONE ORIZZONTALE
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.
E5) Completa gli stili precedenti aggiungendo le dimensioni e i colori mancanti (a piacere, secondo i tuoi gusti).
E6) → Codice di struct2css (solo la parte riguardante il menu orizzontale)
E7) → Schermata browser
E8) → Validatore html
E9) → Validatore css
F) ACCESSIBILITA'
Infine rendiamo accessibile la nostra pagina. Se ci sono errori, correggili, prima di incollare le schermate.
F1) Copia struct2.html e struct2.css in struct3.html (modifica gli stili rendendoli incorporati nella pagina). Rendi accessibile struct3.html (se non lo è).
F2) → Schermata browser pagina accessibile
F3) Validatore accessibilità http://examinator.ws/ (solo scheda Mal):
F4) Schermata analisi pagina effettuata con Color Contrast Analyzer (carica la pagina su HTML Pasta per validarla https://htmlpasta.com/):
G) OPERAZIONI FINALI
G1) Controlla di aver risposto a tutte le domande e incollato tutte le schermate. Tutte le
caselline dovrebbero avere un segno X, per indicare che hai risposto
G2) 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.
G3) 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 HTML
G4) Chiudi tutti i file, zippa la cartella di questa esercitazione e inviala all'insegnante su Classiperlo.
