Scribd
Carica
17 visualizzazioni76 pagine

02 HTML

Il documento descrive le basi dell'HTML, il linguaggio di markup utilizzato per creare pagine web. Viene spiegato cos'è l'HTML, come è strutturato un documento HTML, i diversi tag ed elementi come titoli, paragrafi, link e altri componenti fondamentali per creare la struttura semantica di una pagina web.

Caricato da

suonodimarte
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
17 visualizzazioni76 pagine

02 HTML

Il documento descrive le basi dell'HTML, il linguaggio di markup utilizzato per creare pagine web. Viene spiegato cos'è l'HTML, come è strutturato un documento HTML, i diversi tag ed elementi come titoli, paragrafi, link e altri componenti fondamentali per creare la struttura semantica di una pagina web.

Caricato da

suonodimarte
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 76

HYPERTEXT MARKUP

LANGUAGE
Che cos’è l’HTML
■ L’HTML è un linguaggio di markup che descrive la
semantica e la strutturazione di una pagina web

■ L’HTML è composto da un insieme di tag, ognuno con le


proprie caratteristiche e funzionalità

■ Di conseguenza, una pagina web è un insieme di testo e


tag.
Come utilizzare l’HTML

■ Principalmente, l’HTML andrebbe utilizzato solo per


definire la struttura della pagina web
■ Purtroppo non sempre tutti seguono questo principio
■ Ancora oggi viene utilizzato anche per definire il layout di
una pagina web SBAGLIATO
■ L’HTML permette di integrare tecnologie diverse per
definire il layout e il contenuto di una pagina (es. CSS,
JAVA, ecc.)
Esempio

■ Considerate le slide di questo corso


■ La semantica definisce la struttura delle parti del testo:
– Un titolo
– Un elenco puntato per contenuto
■ La presentazione definisce
– Il colore rosso per il titolo
– Il nero per il testo
– Il bianco per lo sfondo
Tags
■ Sono le componenti base dell’HTML

■ Ogni tag è racchiuso tra due parentesi angolari

■ Esistono tre tipi di tag:


– Normali
– Vuoti
– Provenienti da altri namespace
Tags - Normali
■ Sono quelli che possono racchiudere del testo al loro
interno

■ Paragrafi, liste, titoli, ecc.

■ Richiedono, generalmente, un tag di apertura e


chiusura

Tag apertura Tag chiusura


Tags - Vuoti
■ Fanno riferimento a quegli elementi vuoti che non
possono avere alcun contenuto

■ Immagini, video, link, aree di input, ecc.

■ Non richiedono il tag di chiusura

Tag apertura
Tags – Provenienti da altri Namespace
■ Descrivono dei servizi esterni, come SVG, MathML o
altri

■ Questi elementi utilizzano dei tag ‘autochiudenti’

Tag apertura Tag chiusura


Tag ed Elemento

■ Spesso Tag ed Elemento vengono usati come sinonimi


■ Tag indica ciò che è compreso fra le parentesi angolari, esempio <p>
■ L’Elemento è tutto ciò che è contenuto fra il tag di apertura e quello
di chiusura
■ Gli elementi possono essere nidificati mentre i tag no.

Elemento
<h1>Titolo 1</h1>
Tag apertura Tag chiusura
Tag - Attributi
■ Gli attributi permettono di definire le caratteristiche e il
funzionamento dei vari elementi HTML

■ Vengono specificati nel tag di apertura

■ Si presentono nella forma:


– chiave: “valore”

Attributo
<a href="http://www.w3schools.com">Esempio di link</a>

Chiav Valore
Versioni HTML
Dal 1993 ad oggi, sono stati definiti diversi standard
■ 1993 – HTML 1.0 (Ipertesti)
■ 1994 – HTML 2.0 (Introduzione stili e tabelle)
■ 1995 – HTML 3.0
■ 1998 – HTML 4,0
– Miglior accessibilità per le persone disabili
– Possibilità di incorporare oggetti (dinamicità pagine)
■ 2014 – HTML 5,0
– Multimedia
– Miglior supporto e semantica
■ W3C - https://www.w3.org/
Com’è strutturata una pagina HTML
Rappresentazione ad Albero DOM
html

head body

title h1

contenuto contenuto
■ Dalla struttura nidificate degli elementi è possible definire
un albero
■ Tale rappresentazione viene sfruttuta per poter modificare,
eliminare o aggiungere nuovi elementi utilizzando
linguaggi come JavaScript
DOCTYPE

■ Deriva dalla contrazione del termine Document Type Declaration

■ Indica la versione del linguaggio utilizzato

■ Non indicarlo può comportare degli errori durante la fase di


caricamento
DOCTYPE - Struttura

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


http://www.w3.org/TR/html4/loose.dtd>
DOCTYPE - Tipologie

■ Le precendeti versioni dell’HTML utilizzano tre tipi di DOCTYPE:


– STRICT: non permette l’utilizzo di tag deprecati e frameset
– TRANSITIONAL: consente l’utilizzo di tag deprecati ma non dei
frameset
– FRAMESET: quando vogliamo utilizzare I frameset per definire il
contenuto di una pagina
■ Nell’ultima versione (HTML5) la definizione del DOCTYPE è
semplificata. C’è un preciso motivo!
<!DOCTYPE html>
Percorsi Assoluti e Relativi

/main/

pagina_web.html

images/

img1.png
Percorsi Assoluti e Relativi
■ Percorso Assoluto: specifica l'intero url della risorsa, a
partire dal protocollo
http://www.miosito.com/images/img1.png
■ Percorso Relativo: specifica la posizione della risorsa,
partendo dalla posizione che contiene la pagina corrente
– Risorsa corrente: /main/pagina_web.html
– Il collegamento relativo dell'imagine da caricare:
/images/img1.png
– La cartella corrente si identifica con punto o slash
./images o /images
– La cartella superiore si identifica con doppio punto ../images
Commenti

■ Fondamentali per la comprensione e la revisione del codice

<!– Esempio di un commento in HTML -->


HEAD
■ Due sezioni fondamentali: HEAD e BODY

■ Nella sezione HEAD vengono inseriti gli elementi necessari per la


corretta visualizzazione delle pagine e per fornire informazioni circa la
pagina stessa
– Link agli script esterni (CSS, JS, PHP, ecc.)
– Meta-informazioni
– Titolo della pagina
– Favicon
HEAD - Title

■ Definisce il titolo della pagina web

■ Utile per ottimizzare il recupero dei contenuti della pagina sui motori di
ricercare

■ Supporta l’utente quando ha più tab aperte

<head>
<title>Titolo dell’Applicazione Web</title>
...
</head>
HEAD - Base
■ Il tag base definisce l’URL di base per tutti i collegamenti relativi nella
pagina
■ Riduce gli errori
■ È opzionale

<head>
<base href="http://il_mio_sito/">
<link rel="stylesheet" type="text/css" href="scripts/mystyle.css">
</head>
HEAD - Link

■ Definisce un relazione fra il documento corrente ed una risorsa esterna


■ Generalmente viene usato per caricare i fogli di stile (CSS)

<head>
<link rel="stylesheet" type="text/css" href="scripts/myStyle.css">
</head>
HEAD - Style
■ Questo tag viene usato per determinare come visualizzare gli elementi
contenuti nella pagina web.
■ Tuttavia è buona norma specificare il codice CSS in file esterni

<style type="text/css">
body {
background-color: red;
}
div {
font-size: 15px;
}
</style>
HEAD – Script
■ Consente di importare o definire dei codici da eseguire all’interno della
pagina lato client

■ JavaScript, PHP, ecc.

<script type=”text/javascript” <script type="text/javascript">


src=”/scripts/myScript.js”> console.log(ʺHello World! ʺ);
</script>
HEAD - Meta
■ Forniscono informazioni aggiuntive sulla pagina e i suoi contenuti

■ Le informazioni specificate usando i meta valori non vengono


visualizzate

■ Sono composti da 3 coppie chiave-valore:


– HTTP-EQUIV
– Name
– Content
HEAD – Meta 2
■ Keywords tipiche per l’attributo NAME sono:
– author
– description
– copyright
– generator
– robots
– language

<meta name="description" content="Come usare i meta-tag"/>


HEAD - Esempio
<head>
<!– Titolo pagina -->
<title>Titolo visualizzato sulla tab del browser</title>

<!– meta informazioni -->


<meta charset="utf-8" />
<meta name="author" content="Alberto Angela"/>

<!– link script -->


<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script type="text/javascript"></script>
</head>
BODY
■ In questa sezione trovano spazio gli elementi che definiscono il
contenuto vero e proprio della pagina
Caratteri Speciali e Accentati

■ Un tipico problema nella visualizzazione dei contenuti di un testo sono


i caratteri speciali o accentati.
■ Due soluzioni:
– Usare l’apposito meta-tag (la versione HTML5 lo include
automaticamente senza doverlo specificare)
<meta charset="utf-8" />
– Oppure utilizzare dei codici speciali
à => &agrave;
á => &aacute;
BODY - Heading
■ Rappresentano i titoli dei vari capitoli di una pagina:
– Facilitano la lettura del documento
– I motori di ricerca li utilizzano per analizzare il contenuto della pagina
■ Non servono per ingrandire il testo
■ Sono 6:
– <h1> (Titolo principale)
– <h2> (sottotitolo)
– <h3> (sotto-sottotitolo)
– <h4>
– <h5>
– <h6>
BODY – Heading Esempio

<body>
<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<h5>Heading h5</h5>
<h6>Heading h6</h6>
</body>
BODY - Paragrafi
■ Contenitori per i blocchi di testo
■ Sono rappresentati dall'elemento <p>
■ NB: i browser non considerano gli spazi e gli accapo presenti nei
paragrafi.
■ Si va a capo usando il tag <br/>
BODY – Paragrafi Esempio

<body>
<p>Ecco un paragrafo</p>
<p>Gli spazi e
gli accapo non sono
considerati
</p>
<p>Un paragrafo con il tag
<br/>
per andare accapo
</p>
</body>
BODY - Formatting Tags
■ Definiscono la formattazione del testo sotto vari aspetti:
– Testo in Grassetto <b>
– Testo in Corsivo <i>
– Testo Sottolineato <u>
– Pedice e Apice <sub> e <sup>
– ecc.
Lista complete formatting tags: http://www.w3schools.com/html/html_formatting.asp

■ Utili per vivacizzare l'aspetto ma non bisogna esagerare


– da non confondere con <strong> ed <em>
BODY - Formatting Tags Esempio
<body>
<p><b>Grassetto</b></p>
<p><i>Corsivo</i></p>
<p><u>Sottolineato</u></p>
<p>
<code>Codice di programma</code>
</p>
<p>Testo
<sub> pedice</sub> e
<sup>apice</sup>
</p>
</body>
BODY - Link
■ Collegamento diretto a un’altra pagina web
■ Definiti usando il tag <a>
■ Diversi attributi:
– href, url del collegamento esterno
– target, se settato a _blank consente di aprire il documento su una nuova finestra
– name: usato per definire dei segnalibri all’interno del documento
– rel: definisce relazione tra le due pagine web
– hreflang: indica la lingua del collegamento esterno
– accessKey: permette di definire una shortcut da tastiera
BODY – Link Interni

■ Definire un segnalibro interno:

1) si inserisce la parte del documento all’interno di un tag <a>,


assegnado un valore all’attributo name

2) nel punto in cui si vuole inserire il collegamento, si definisce un


altro tag <a>, dando all’attributo href il valore dell’attributo name del
segnalibro preceduto dal carattere #
BODY – Link Esempio
<body>
<a href="https://www.udemy.com/">
Link a una pagina esterna
</a>
<br/>
<a href="https://www.udemy.com/" target="_blank">
Link a una pagina esterna ma aprila in
nuova finestra
</a>
<a name="link_interno">
<p>Testo generico</p>
</a>
<a href="#link_interno">
Collegamento Interno
</a>
</body>
BODY - Immagini
■ Si utilizza il tag <img>
■ Attributi:
– src: specifica l’url dell’immagine
– alt: definisce il testo alternativo che viene visualizzato qualora
l’immagine non sia disponibile (è utile sopratutto per i non vedenti)
– width: larghezza dell’immagine (è buona norma definirlo)
– height: altezza dell’immagine (è buona norma definirlo)
■ NB È un tag senza contenuto
BODY – Immagini Esempio
<body>
<img
src="https://www.udemy.com/staticx/udemy/imag
es/v6/logo-coral.svg"
alt="Logo Udemy" width="100" height="100">
<br/>
<img src="immagine_non_trovata.png"
alt="Esempio immagine non trovata" width="100"
height="100">
</body>
BODY - Tabelle
■ La strutturazione di una tabella avviene usando 4 tag:
– <table>, definisce una tabella
– <th> per dare un titolo a ciascuna colonna
– <tr> crea una riga
– <td> crea una colonna

■ NB non sono uno strumento per definire il layout della pagina


BODY – Tabelle Esempio
<body>
<table>
<tr>
<th> Prima Colonna </th>
<th> Seconda Colonna </th>
</tr>
<tr>
<td> dato1_cella1 </td>
<td> dato1_cella2 </td>
</tr>
<tr>
<td> dato2_cella1 </td>
<td> dato2_cella2 </td>
</tr>
</table>
</body>
BODY - Liste
■ Per elencare oggetti simili si usano le liste
■ Le liste possono essere:
– <ol>, liste numerate
– <ul>, liste non ordinate
■ Si usa il tag <li> per definire un nuovo elemento (a prescindere dal tipo
della lista)
BODY – Liste Esempio
<body>
<h1>Lista libri numerata</h1>
<ol>
<li>La compagnia dell’anello</li>
<li>Le due torri</li>
<li>Il ritorno del Re</li>
</ol>
<h1>Lista film non ordinata</h1>
<ul>
<li>Arancia Meccanica</li>
<li>Le due torri</li>
<li>Il ritorno del Re</li>
</ul>
</body>
BODY - Form
■ Il tag <form> è uno dei principali mezzi per interagire con gli utenti
– sono moduli che consentono l’inserimento e l’invio di dati ai server
– questi dati possono essere raccolti in modo diverso (campi di testo,
pulsanti, ecc.)
■ Attributi:
– action: definisce la risorsa a cui passare i dati inseriti
– method: specifica come i dati vengono inviati alla risorsa dichiarata,
ovvero POST o GET
– enctype: indica il tipo di media da utilizare per codificare i dati
FORM - Input
■ Elementi per inserire un valore in un form: <input> e <textarea>
■ Tag <input> permette l’inserimento di diversi tipi di dati:
– text, file, image, ecc.
■ Si differenziano per il valore dell’attributo type
■ Generano delle coppie chiave-valore:
– la chiave è associata all’attributo name
– il valore è definito dall’attributo value
FORM - Input Testuale
■ Due opzioni:
– <input type="text"> testo di piccole dimensioni (tipo username o
email)
– <textarea> testo di lunghe dimensioni (per esempio commenti o
recensioni)

■ HTML5 ha introdotto la gestione di tanti tipi di dati:


– data, email, file, immagini, numeri, range, telefono, url, password
FORM – Input Testuale

Lista completa
https://www.w3schools.com/tags/att_input_type.asp
FORM – Label
■ È buona norma specificare una etichetta (<label>) per ciascun elemento
di input
– Si associa una label specificando, nell’attributo for, l’id
dell’elemento input
■ Supporta l'utente nella compilazione del form
FORM – Input Testuale Esempio
<body>
<form action="gestisci_dati.php" method="post">
<label for="username">Username</label>
<input type="text" name="username"
id="username" value="Inserisci Username" />
<br/>
<label for="pswd">Password</label>
<input type="password" name="pswd” "
id="pswd" value="Inserisci Password" />
<br />
<label for="commento">Commento</label>
<textarea rows="6" cols="12”
name="commento" id="commento">
</textarea>
</form>
</body>
FORM – Selezione Valori Singoli

■ Tre opzioni per la selezione di singoli valori:


– radio button, <input type="radio">
■ va bene per liste con bassa cardinalità (7±2)
– drop down list, <select>
■ media cardinalità (10-20)
– list box, <select size="n">
■ alta cardinalità (più di 20)
FORM – Selezione Valori Singoli Esempio
<body>
<form action="gestisci_dati.php" method="post">
<!–- radio button bassa cardinalità -->
<label for="bassa_1">Opzione 1</label>
<input type="radio" name="bassa_crdn"
id="bassa_1 " value="bassa_1">
<br>
<label for="bassa _2">Opzione 2</label>
<input type="radio" name="bassa_crdn"
id="bassa_2" value="opzione_2">
<br>
<!–- select media cardinalità -->
<select name="media_crdn">
<option value="media_uno">Opzione 1</option>
<option value="media_due">Opzione 2</option>
<option value="media_tre">Opzione 3</option>
</select>
<br>
<!–- select alta cardinalità -->
<select name="alta_crdn" size="3">
<option value="alta_uno">Opzione 1</option>
<option value="alta_due">Opzione 2</option>
<option value="alta_tre">Opzione 3</option>
</select>
</form>
</body>
FORM - Selezione Multipla
■ Due tag per gestire le scelte multiple:
– check box, <input type="checkbox">
■ adatto a liste di media-bassa cardinalità (≤15)
– listbox, <select multiple>
■ media-alta cardinalità (>15)
FORM – Selezione Multipla Esempio
<body>
<form action="gestisci_dati.php" method="post">
<!–- check-box media-bassa cardinalità -->
<label for="check_opz1">Opzione 1</label>
<input type="checkbox" name="media_bassa_crdn"
id="check_opz1" value="check_opz1">
<br>
<label for="check_opz2">Opzione 2</label>
<input type="checkbox" name="media_bassa_crdn"
id="check_opz1" value="check_opz2">
<br>
<!–- select media-alta cardinalità -->
<select name="media_alta_crdn" multiple>
<option value="opz1">Opzione 1</option>
<option value="opz2">Opzione 2</option>
<option value="opz3">Opzione 3</option>
</select>
</form>
</body>
FORM - Pulsanti
■ Utilizzati per confermare un operazione, come invio dati in un form. HTML5 mette a
disposizione due tag diversi:
– <input>, element vuoto, la definizione del pulsante va inserito nell'attributo value
– <button>, può contenere più elementi al suo interno (testo e immagini)
■ In entrambi i tag l’attributo type può assumere uno di questi valori:
– submit, serve per inviare i dati inseriti nel form al server
– button, bottone generico generalmente usato per eseguire delle operazioni fornite
da script esterni (per esempio Javascript)
– reset, cancella il contenuto di tutti i campi input di un form form
FORM – Pulsanti Esempio
<body>
<form action="gestisci_dati.php" method="get">
<label for="username">Username</label>
<input type="text"
name="username"
id="username"
value="Inserisci Username" />
<br/>
<label for="pswd">Password</label>
<input type="password" name="pswd"
id="pswd"
value="Inserisci Password" />
<br />
<input type="submit"
value="Invia - tag input" />
<br />
<button type="submit">
Invia – tag button
</button>
</form>
</body>
Sezioni
■ Le sezioni nei documenti HTML sono utili per:
– Separare contenuti
– Definire layout
■ Generalmente si usano due contenitori generici:
– <div>, rappresenta un blocco del documento separato dagli altri
– <span>, Definisce una sezione non separata dalle altre
■ HTML5 ha introdotto nuovi elementi semantici
Sezioni Esempio
<body>
<form action="gestisci_dati.php" method="post">
<!–- check-box media-bassa cardinalità -->
<div>
<label for="check_opz1">Opzione 1</label>
<input type="checkbox" name="media_bassa_crdn"
id="check_opz1" value="check_opz1">
<br>
<label for="check_opz2">Opzione 2</label>
<input type="checkbox" name="media_bassa_crdn"
id="check_opz1" value="check_opz2">
</div>
<!–- select media-alta cardinalità -->
<div>
<select name="media_alta_crdn" multiple>
<option value="opz1">Opzione 1</option>
<option value="opz2">Opzione 2</option>
<option value="opz3">Opzione 3</option>
</select>
</div>
</form>
</body>
SEZIONI - HTML5
■ Nuove sezioni introdotte:
– <article>, <aside>, <details>, <figcaption>, <figure>,
<footer>, <header>, <main>, <mark>, <nav>, <section>,
<summary>, <time>

■ Graficamente non si differenziano dalle sezioni generiche, ma:


– Definiscono la semantica della pagina
– Di conseguenza aiutano il browser a comprendere il tipo di
contenuto
SEZIONI – HTML5 Esempio
<header>
Descrive la testata della pagina e contiene i titoli dell’article
<nav>
Contiene i link per navigare nel sito
<article>
Rappresenta un contenuto indipendente e autonomo rispetto alle altre
sezioni. Al suo interno può racchiudere più sezioni:
<section>
<aside>
Sezione di approfondimento o parti non direttamente collegate al
contenuto (sponsor, link esterni ecc.)
<footer>
Contiene informazioni su autore, contatti ecc.
Sezioni HTML 5
Video e Audio

■ HTML5 semplifica l'inserimento di audio e video

■ Video
<video width="300" height="300">
<source src="video.mp4" type="video/mp4">
</video>
■ Audio
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
</audio>
Canvas

■ Definisce un'area di "disegno" generata a partire da codice


javascript
■ Utile per tante applicazioni (giochi, visualizzazione dati)
■ Diminuisce la necessità di utilizzare plugin di terze parti
(es. Flash)
Drag & Drop
■ Funzionalità che permette di creare dei blocchi che accettino dati
trascinati da altri
■ HTML5 supporta questa interazione facilitando il lavoro degli
sviluppatori
HTML - ESERCIZI
Esercizio 1
■ Avviate ECLIPSE JEE sul vostro computer e create un nuovo progetto. In seguito, create
un file html (assegnategli il nome ‘main’).
■ Compila l'head con tutti i tag necessari (almeno meta e title), ed un body.
■ Aggiungi all'interno del body il testo "Hello world!"
■ Salva la pagina e controlla la validità del codice appena scritto sul sito del W3C:
https://validator.w3.org/#validate_by_input
– Correggi gli eventuali errori!
■ Apri la pagina. Dovresti ottenere una pagina che contiene solo Hello world!!!
– NB questi dati non sono trasferiti tramite HTTP, ma sono presi direttamente dal disco.
Esercizio 2.1
■ Ora create la home page della vostra prima applicazione web. Questa deve
contenere:
– Un titolo principale
– Un paragrafo con le informazioni generali
– Diverse sezioni che presentino aspetti particolari dell'applicazione
(nell'esempio Amazon considerate i libri, l'elettronica, la musica ecc.).
Per ognuna fornite un titolo ed almeno un paragrafo.
– Create un indice
■ NB non preoccupatevi della grafica! Quella la vedremo a tempo debito
(CSS)
Esercizio 2.2
■ Disegnate la struttura ad albero della pagina che avete creato.
Esercizio 2.3
■ Arricchisci la pagina precedente utilizzando in modo corretto i seguenti
tag, per marcare le corrispondenti parti del testo:
– h1, ..., h6
– p
– formatting tags
■ Il testo deve contenere una sezione principale, almeno tre sotto-sezioni
formate ognuna da tre o più paragrafi. All'interno dei paragrafi, è
necessario marcare qualche parte di testo con i formatting tags.
– Il "cosa" si scrive è relativamente importante.
Esercizio 2.4
■ Includi, nella pagina HTML che hai creato, anche:
– Dei link a delle risorse esterne
– Uno o più elenchi puntati
– Uno o più elenchi numerati.
– Un'immagine, impostando l'attributo alt e title.
Esercizio 3
■ Crea una tabella che abbia come righe gli oggetti che vorresti gestire con
la tua applicazione web, e per colonne i campi che li descrivono.
■ Utilizzare in modo corretto i vari tag per specificare i titoli ed i contenuti
delle colonne.
Esercizio 4
■ Crea un form per inserire i dati necessari per la creazione di un nuovo
oggetto, utilizzando il tipo di input corretto (testuale, selezione singola o
multipla).
■ NB non preoccuparti di definire l'attributo action del form, lo vedremo
meglio quando studieremo la parte sui server
Esercizio 5.1
■ Su Eclipse, crea un nuovo Static Web Project
■ Copia nella cartella WebContent i file creati durante gli esercizi precedenti:
– 2.4 (nel mio caso main_2_4.html)
– 3 (recensioni_tabella.html)
– 4 (login.html e aggiungi_recensione.html)

■ NB ricordati di copiare anche la cartella images


Esercizio 5.2
■ Dividi il body della pagina main.html in sezioni, utilizzando il tag div e/o i tag
semantici
– Una sezione che contenga il contenuto corrente della pagina, con id=content-main
– Una sezione che contenga l'header della pagina, con id content-header, all'interno del
body. All’interno di questa sezione inserisci i link alle pagine che abbiamo creato in
precedenza.
– Un’altra sezione per il menu di navigazione, con id content-sidebar, all’interno del body.
– Una sezione content-footer all'interno del body ,contente informazioni sull'autore della
pagina l'ultima modifica
Esercizio 5.3
■ Dividi il body delle altre pagine in sezioni, utilizzando il tag div e/o i tag semantici
– Una sezione che contenga il contenuto corrente della pagina, con id=content-main
– Una sezione che contenga l'header della pagina, con id content-header, all'interno di
content-main. All’interno di questa sezione inserisci i link alle pagine che abbiamo creato
in precedenza.
– Un’altra sezione per il menu di navigazione, con id content-sidebar, fuori dall’header.
– Una sezione content-footer all'interno di content-main contente informazioni sull'autore
della pagina l'ultima modifica

Potrebbero piacerti anche