Le pagine WEB. Ogni pagina web presenta 3 tag principali:

(1)

Le pagine WEB

L’attività si svolgerà utilizzando Brackets, editor crossover per Windows, Linux e iOS.

Utilizzare il link seguente: https://brackets.io/.

Un’ottima fonte di tutorial ed esempi può essere consultata sul sito:

www.w3schools.com/html/.

Le pagine WEB sono costituite da file con estensione .html, queste sono realizzate con il linguaggio di markup HTML (nelle sue diverse versioni) e con linguaggi di scripting.

Il linguaggio HTML prevede tag (in sostituzione delle solite istruzioni) che permetto di creare pagine statiche, con gli script possiamo rendere le pagine dinamiche ed interattive.

I tag HTML costituiscono descrittori che definiscono ed etichettano i contenuti dei file.

I tag vengono poi interpretati dai browser per poter renderizzare la pagina e renderla visualizzabile all’utente.

I tag sono costituiti da coppie di parentesi triangolari < > che contengono parole chiave specifiche, ogni tag viene aperto all’inizio del blocco dati a cui si riferisce e chiuso alla fine.

L’apertura di un tag ha la seguente forma: <TAG>

La chiusura di un tag ha la seguente forma: </TAG>

Per una corretta visualizzazione è necessario che i tag vengano aperti e chiusi con adeguato annidamento, esattamente come le parentesi graffe dei linguaggi di programmazione ad alto livello, esistono alcuni tag che non prevedono chiusura essendo solamente dichiarativi.

Ogni pagina web presenta 3 tag principali:

<!DOCTYPE HTML> Dichiara il tipo di documento, non prevede il tag di chiusura

<HTML> È il tag principale, contiene l’intero codice, è come il main

<HEAD> Contiene metadati, ovvero informazioni relative alla pagina

<BODY> Contiene il corpo della pagina web La struttura di questi componenti di base è la seguente:

<!DOCTYPE HTML>

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

Il tag HEAD può contenere i seguenti tag specifici:

<TITLE> Definisce il titolo della pagina

<STYLE> Definisce lo stile e serve a richiamare anche file esterni (i .css) con il tag <LINK>, usato come segue:

Bisogna ricordare che il tag LINK non richiede tag di chiusura

(2)

<SCRIPT> Permette di aggiungere codici dinamici, per esempio:

I tag possono avere specifiche definite come attributi, questi vengono indicati all’interno delle parentesi triangolari del tag di apertura blocco e sono specifici per il tipo di tag.

All’interno della sezione HEAD si usa il tag <META>, questo tag non richiede tag di chiusura, contiene informazioni non visibili sulla pagina, ma utili per posizionare la pagina nei motori di ricerca, piuttosto che specifiche per una corretta visualizzazione dei contenuti. Di seguito alcuni esempi:

utile per aggiungere una descrizione al sito web

utile per aggiungere parole chiave su cui i motori di ricerca possono basarsi e indicizzare la pagine come risultato di ricerca

utile per permettere al browser di visualizzare la pagina in scala con la risoluzione dello schermo del dispositivo.

Il tag BODY identifica i reali contenuti della pagina. In questo blocco possiamo inserire i contenuti formattati che vogliamo esporre nella pagina.

È buona norma suddividere la pagina in blocchi, per organizzare i dati.

A tale scopo possiamo utilizzare i seguenti tag:

<header> Spazio dedicato ai banner, ai titoli o all’intestazione della pagina

<nav> Sezione dedicata ai menù di navigazione nel sito web

<article> Contenuto principale della pagina, ogni articolo può contenere un header e un footer

<section> Identifica parti della pagina che non rientrano nelle altre tipologie

<aside> Contenuto non strettamente legato alla pagina, ma per esempio riferito alla mappa di navigazione del sito o ad elementi da mantenere in evidenza

<footer> Piè di pagina

<div> Blocco identificato da un nome che lo associa a specifiche di stile indicate nell’<head> di pagina o nel file .css associato

Di seguito vengono analizzati i componenti principali che possiamo utilizzare per costruire le nostre pagine.

TITOLI

Esistono tag specifici che identificano una stringa come un titolo o un sottotitolo, questi tag includono una formattazione predefinita per mettere in evidenza il testo che contengono.

Sono organizzati con un id numerico, dove il valore più basso indica il titolo più evidente e via via si riduce la differenza rispetto al corpo del testo. Di seguito l’esempio generico, nel quale dobbiamo sostituire ‘n’ con un intero che va da 1 a 6 in base al grado di rilevanza del titolo:

<Hn>Prova</Hn>

(3)

PARAGRAFI

Rappresentano blocchi di testo standard. Il testo di un paragrafo non prevede il ritorno di carrello (a capo), se non in base alla dimensione dello schermo. La sintassi è:

<p>Prova</p>

I tag che possono essere utilizzati per personalizzare un paragrafo sono:

<BR> Forza il ritorno di carrello e non prevede tag di chiusura

<B> Impone il grassetto nel testo contenuto nel blocco

<I> Impone l’italic (corsivo) nel testo contenuto nel blocco

<MARK> Evidenzia il testo con una barra colorata

<PRE> Permette di mantenere spazi e ritorni di carrello come indicati nel testo che contiene, non richiede la definizione manuale di <BR>, è utile per i testi poetici. Normalmente è associato all’attributo style nel seguente modo:

<PRE style = “font-size:npx” con n dimensione del carattere ELENCHI PUNTATI

La costruzione di un elenco puntato avviene grazie al tag <OL> oppure <UL> che indica l’inizio dell’elenco, mentre le singole voci sono costruite con il tag <LI>.

Il tag <UL> permette di creare un sotto-elenco.

È possibile definire come etichettare i punti dell’elenco aggiungendo l’attributo type al tag

<OL>, di seguito alcuni esempi:

produce un elenco puntato con etichette in numero romano partendo dal valore X

produce un elenco puntato con etichette alfabetiche

produce un elenco puntato con etichette numeriche La costruzione dell’elenco segue la struttura d’esempio:

<OL>

<LI>punto uno</LI>

<LI>punto due</LI>

</OL>

oppure

<UL>

<LI>punto uno</LI>

<UL>

<LI>punto a</LI>

</UL>

<LI>punto due</LI>

</UL>

(4)

Un altro tipo di lista puntata può essere quella con marcatori descrittivi, quindi usiamo delle parole chiave che identificano l’elenco, ciò grazie ai tag <DL>, <DT> e <DD>, usati come segue:

<DL>

<DT>parola descrittiva una</DT>

<DD>prima voce</DD>

<DD>seconda voce</DD>

<DT>parola descrittiva due</DT>

<DD>prima voce</DD>

<DD>seconda voce</DD>

</DL>

TABELLE

Le tabelle sono blocchi costruiti riga per riga, all’interno di ogni riga viene definita ogni cella che la costituisce. I tag utilizzati sono:

<TABLE> Dichiarazione della tabella

<TR> Dichiarazione della riga

<TH> Dichiarazione di una cella di intestazione

<TD> Dichiarazione di una cella di contenuto La struttura da utilizzare è la seguente:

<TABLE>

<TR>

<TH>TITOLO COLONNA UNO</TH>

</TR>

<TR>

<TD>contenuto cella in riga 1 colonna 1</TD>

<TD>contenuto cella in riga 1 colonna 2</TD>

</TR>

</TABLE>

Le tabelle sono personalizzabili con la definizione di attributi relativi a bordi e sfondi.

<THEAD> Identifica il blocco intestazione della tabella

<TFOOT> Identifica il blocco di chiusura della tabella, per esempio il totale se si parla di tabelle che contengono colonne numeriche

<TBODY> Identifica il corpo della tabella

Con i css possiamo intervenire con la personalizzazione della tabella, usando il tag

<HTML>

<HEAD>

<STYLE>

table, th, td {border:1px solid black;}

(5)

caption {font-weight:bold; colo:blue;}

th {background-color:yellow;}

td {text-align:center;}

</STYLE>

</HEAD7>

<BODY>

<CAPTION>PROVA</CAPTION>

<TR>

<TH>Intestazione c1</TH>

</TR>

<TR>

<TD>Contenuto riga 1 colonna 1</TD>

</TR>

</TABLE>

</BODY>

</HTML>

In questo esempio descriviamo lo stile associato ai tag TABLE, TH, TD e CAPTIO (titolo della tabella), lo stile verrà poi applicato a tutte le tabelle della pagina, senza bisogno di specificare per ognuna di esse gli stessi attributi.

COLLEGAMENTI IPERTESTUALI

Per creare un link, ovvero un punto di connessione ad un materiale esterno alla pagina possiamo usare il tag <a> nel seguente modo:

<a href = “./paginaInternaAllaCartellaAttuale”>Testo attivo al click</a>

con l’opzione rel se il collegamento è ad un sito esterno:

<a href = “URL” rel = external>Testo attivo al click</a>

con l’opzione target per aprire la destinazione in un nuovo tab:

<a href = “URL” target= “_blank”>Testo attivo al click</a>

Le opzioni possono essere combinate tra loro.

IMMAGINI

Per inserire le immagini nella pagina si utilizza il tag <IMG>, come segue:

<IMG src = “./nomeFile.jpg”>

Facendo attenzione a indicare la posizione completa del file, se questo non si trova nella stessa cartella della pagina in cui viene inserito.

È disponibile l’attributo alt per inserire un testo alternativo all’immagine, nel caso non sia possibile caricarla per un qualsiasi errore:

<IMG src = “./nomeFile.jpg” alt = “testo descrittivo”>

Inoltre possiamo aggiungere una didascalia all’immagina, inserendo il seguente blocco dopo il tag <IMG>:

<FIGCAPTION>Didascalia<EM>fonte</EM></FIGCAPTION>

Possiamo visualizzare immagini di tipo .jpg, .png, .gif.

VIDEO, AUDIO e CANVAS

Per inserire video e audio nelle pagine si utilizzano i seguenti blocchi:

<VIDEO CONTROLS>

<SOURCE SRC = “./nomeVideo.mp4 type = “video/mp4”>

</VIDEO>

con le opzioni video/mp4, video/webm o video/ogg in base al formato del video.

Sostituendo a VIDEO il tag <AUDIO> abbiamo la struttura per i file audio, le tipologie

(6)

audio utilizzabili sono audio/mpeg, audio/wav, audio/ogg.

Per le immagini possiamo usare gli attributi di larghezza e altezza per gestire l’elemento rispetto alla pagina: width= “N” height = “M”.

I canvas sono componenti su cui è possibile disegnare, in particolare sono contenitori che possono essere usate per disegnare componenti grafici di tipo geometrico, sono componenti avanzati e possono essere utili con script per la realizzazione di semplici giochi interattivi prodotti grazie a javascripts. Una valida alternativa, semplice da usare, è il tag <SVG>, usato come segue:

<SVG width = “N” height = “M”>

<circle cx = “” cy = “” r = “” stroke = “color” stroke-width = “N” file =

“color” />

<rect x = “” y = “” width = “” height = “” stroke = “color” stroke-width = “N”

file = “color” />

</SVG>

Dove abbiamo definito le due figure geometriche con la posizione dei loro centri, dimensioni, colore dei bordi e dimensione, colore di riempimento.