Comments
Transcript
I form HTML - Tecnologia per la comunicazione
Tomasco Ermenegildo
HTML5 (HyperText Markup Language)
CSS (Cascading Style Sheets)
Javascript
XML (eXtensible Markup Language)
AJAX (Asinchronous Javascript And XML)
Architettura delle applicazioni web e Web Services
Workflow progettazione sito web
Comunicazione multimediale digitale
HTML5 (HyperText Markup Language)
Hyper Text Markup Language
Comportamento (JS)
Presentazione (CSS)
Contenuto (HTML)
<!DOCTYPE html>
<html lang="it">
<head>
<title>Tecnologia per la comunicazione</title>
<meta name="description" content="Modulo formativo ...">
<meta name="keywords" content="HTML5, CSS, Javascript, XML">
<meta name="author" content="Ermenegildo Tomasco">
<link rel="stylesheet" href=“stile.css">
</head>
<body>
<h1>La mia prima pagina</h1>
<p>Il mio primo pragrafo.</p>
</body>
</html>
<tagname attibuti>contenuto</tagname>
esempio
<html lang="it">
<br>
<p title="Introduzione al corso">Il corso di "Tecnologia per la
comunicazione" si propone di fornire allo studente</p>
<a href="http://www.google.com">Google</a>
<img src="images/img1.jpg" alt="Fiat 500" width="150"
height="142">
<input type="button" value="Clicca qui" id="mybutton">
esempio
<video width="320" height="240" controls muted loop
poster="multimedia/HTML5.png">
<source src="multimedia/HTML5.mp4" type="video/mp4">
<source src="multimedia/HTML5.ogg" type="video/ogg">
Il tuo browser non supporta il tag video
</video>
<audio controls autoplay loop>
<source src="multimedia/TheSoundofSilence.ogg" type="audio/ogg">
<source src="multimedia/TheSoundofSilence.mp3" type="audio/mpeg">
Il tuo browser non supporta il tag audio
</audio>
esempio
Attribuire uno speciale significato al testo
<b>Grassetto</b>.
<i>Corsivo</i>.
<ins>Sottolineato</ins>.
<mark>Marcato</mark>.
<em>Accentuato</em>.
<small>Piccolo</small>.
<del>Errore</del>.
<strong>Importante</strong>.
Normale<sub>pedice</sub>.
Normale<sup>apice</sup>.
esempio
Inline – attributi di stile nei tag in HTML
Interni – viene inserita una sezione
<style> elementi di stile </style>
nella sezione HTML <head>
Esterni – vengono usati uno o più fogli di stile .CSS
esterni
esempio
Inline – attributi di stile nei tag in HTML
style="prorietà:valore"
<h1 style="color:blue;font-family:verdana;font-size: 24pt;
text-align:center">La mia prima pagina</h1>
<p style="color:red;font-family:courier;font-size: 16pt;
text-align:right">Il mio primo pragrafo.</p>
esempio
Interni
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>La mia pagina web</h1>
<p>Testo colorato</p>
<p>Paragrafo 2</p>
</body>
</html>
Esterni
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>La mia pagina web</h1>
<p>Il primo paragrafo della pagina</p>
</body>
</html>
<!DOCTYPE html>
esempio.htm
<html>
<head>
<link rel="stylesheet" href="styles1.css">
</head>
<body>
<h1>La mia prima pagina</h1>
<p>Il mio primo paragrafo.</p>
<p class="error">Pagina non trovata</p>
<p id="p01">Io sono blu</p>
<p class="error">Immagine piccola</p>
<p class="noborder"><img
src="images/img1.jpg" alt="fiat 500"
style="float:left;width:259px;height:194px">La fiat
500</p>
</body>
</html>
h1 {
styles1.css
color:blue;
font-family:verdana;
font-size:24px;
}
p {
font-family:courier;
font-size:16px;
border:1px solid black;
padding:10px;
margin:30px;
}
p#p01 {
color:blue;
}
p.error {
color:red;
}
p.noborder {
border:0px;
}
Aprite il file esercizio1.html con il browser
Aprite il file esercizio1.html con Notepad
Aprite il file styles1.css con Notepad
Quale testo verrebbe visualizzato se l'immagine
non venisse trovata?
foto di prova
fiat 500
Image not found
Quale testo viene visualizzato al passaggio del
mouse sull'immagine
foto di prova
fiat 500
Nessun testo
Modificare il font-family con uno o più dei
seguenti:
Comic Sans MS, Garamond, Georgia, Lucida
Console, Lucida Sans Unicode, MS Sans Serif,
Symbol, Tahoma, Times New Roman
Quale delle seguenti modifiche fa sì che la prima
parola del primo paragrafo venga visualizzata in
grassetto e l'ultima parola in corsivo
<p><b>Il mio primo <i>paragrafo.</p>
<p><b>Il<b> mio primo <i>paragrafo</i>.</p>
<p><b>Il</b> mio primo <i>paragrafo</i>.</p>
Modificare il font-size e vedere cosa succede
Togliere l'attributo "float:left;" dall'immagine e
vedere cosa succede
Cosa succede se togliete l'attributo "padding" dal
paragrafo?
Cosa succede se togliete l'attributo "margin" dal
paragrafo
Definiscono blocchi interpretati da un browser a
prescindere dall’aspetto grafico
<section>
<article>
<aside>
<header>
<footer>
<hgroup>
<nav>
Demarca un insieme di contenuti fra di loro
correlati.
<section id="benvenuti">
<h1>Benvenuti al mare</h1>
<p>Ciao mi piace andare al mare</p>
</section>
Demarca una informazione indipendente dal resto
del documento.
<section id="benvenuti">
<article id="mare">
<h1>Benvenuti al mare</h1>
<p>Ciao mi piace andare al mare</p>
</article>
</section>
demarca un contenuto di poca importanza rispetto
al documento
<aside>
<p>visita il nostro blog</p>
</aside>
demarca l'intestazione di una sezione
<section id="benvenuti">
<header>
<h1>Benvenuti a tutti</h1>
<p>Sezione dedicata ai saluti</p>
</header>
<h1>Benvenuti al mare</h1>
<p>Ciao mi piace andare al mare</p>
</section>
demarca il pie di pagina o di sezione.
<footer>
<p>Ralizzato da Ermenegildo Tomasco</p>
</footer>
demarca una serie di link utili per la navigazione.
<nav>
<ul>
<li><a href="http://www.google.it">Google</a></li>
<li><a href="http://www.yahoo.it">Yahoo</a></li>
<li><a href="http://www.bing.it">Bing</a></li>
</ul>
</nav>
Aprite il file esercizio2.html con il browser
Aprite il file esercizio2.html con Notepad
Modificare nel file esercizio2.html la linea
<link rel="stylesheet" href="styles2.css">
con
<link rel="stylesheet" href="astyles2.css">
salvate e ricaricate la pagina nel browser: cosa
succede?
Ripristinate la linea, salvate e ricaricate la pagina
Modificate il footer in modo tale da scrivere in
grassetto il vostro nome
Copyright © Vostro nome
Aggiungere la proprietà autoplay al video.
Provare a togliere (muted, controls, loop) e
reinserire le proprietà del video
Modificate le dimensioni dell'immagine
Inserite un link con href="http://www.google.it"
sulla foto
Aprite il file styles2.css con Notepad
Settare a blue il colore di sfondo dell'header e del
footer
Allineare il footer a sinistra
Far visualizzare in rosso il testo: "Tecnologia per la
comunicazione - Test"
I form HTML sono usati per raccogliere dati
dall’utente.
<form action=“invia.php" method="GET" target="_blank">
Elementi del form.
</form>
esempio
Text Input
<form action="invia.php" method="GET" target="_blank">
Nome: <input type="text" name="Nome">
<br>
<input type="submit" value="Invia">
</form>
<password>
<form action="invia.asp" method="POST" target="_blank">
Nome utente:<br>
<input type="text" name="utente">
<br>
Password:<br>
<input type="password" name="pwd">
<br>
<input type="submit" value="Invia">
</form>
Textarea Input
<form action=“invia.php" method="GET" target="_blank">
Note:<br>
<textarea name="message" rows="10" cols="30"></textarea>
<br>
<input type="submit" value="Invia">
</form>
<datalist>
<form action="invia.php" method="GET" target="_blank">
Nazione:<br>
<input name="nazione" list="nazione">
<datalist id="nazione">
<option value="Italia">
<option value="Inghilterra">
<option value="Francia">
</datalist>
<br>
<input type="submit" value="Invia">
</form>
<output>
<form action="invia.asp" method="GET" target="_blank"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" name="a" value="20">
+
<input type="number" id="b" name="b" value="30">
=
<output name="x" for="a b"></output>
<br>
<input type="submit" value="Invia">
</form>
<button>
<button type="button" onclick="alert('Ciao!')">Clicca!</button>
Radio Input
<form action="invia.php" method="GET" target="_blank">
Sesso:<br>
<input type="radio" name="sesso" value="Uomo" checked>Uomo
<input type="radio" name="sesso" value=“donna">Donna
<br>
<input type="submit" value="Invia">
</form>
< checkbox >
<form action="invia.asp" method="POST" target="_blank">
<input type="checkbox" name="profilo" value="alto"> Alto
<br>
<input type="checkbox" name="profilo" value="biondo"> Biondo
<br>
<input type="submit" value="Invia">
</form>
<number>
<form action="invia.asp" method="POST" target="_blank">
Quantità (tra 1 e 5):
<input type="number" name="quantita" min="1" max="5">
<br>
<input type="submit" value="Invia">
</form>
<date>
<form action="invia.asp" method="POST" target="_blank">
Compleanno:
<input type="date" name="compleanno">
<br>
<input type="submit" value="Invia">
</form>
<color>
Il tuo colore preferito:
<form action="invia.asp" method="GET" target="_blank">
Il tuo colore preferito:
<input type="color" name="colore">
<br>
<input type="submit" value="Invia">
</form>
<email>
<form action="invia.asp" method="GET" target="_blank">
E-mail:
<input type="email" name="email">
<br>
<input type="submit" value="Invia">
</form>
esempio
Maxlength
Nome: <input type="text" name="nome" value="John" maxlength="10">
Size
Nome: <input type="text" name="nome" value="John" size="50">
readonly
Nome: <input type="text" name="nome" value="John" readonly>
Autofocus
Campo principale:<input type="text" name="principale" autofocus>
Min e Max
Quantità (tra 1 e 5):<input type="number" name="quantita" min="1"
max="5">
Placeholder
Nome:<input type="text" name="nome" placeholder="Scrivi il tuo
nome">
Required
Username: <input type="text" name="username" required>
Aprite il file form.html con il browser
Aprite il file form.html con Notepad
Spostare il focus iniziale sul campo password
Rendere obbligatorio il campo nome
Settare la massima lunghezza della password a 8
caratteri
Inserire una nuova opzione (Germania) nel campo
Nazione
Fare in modo tale che l’opzione «alto» sia
preselezionata al caricamento della pagina
Far si che il campo «anni» accetti valori tra 10 e 99
Inserire sul campo email il suggerimento:
◦ "Scrivi la tua email"
Javascript
HTML per definire il contenuto delle pagine web
CSS per specificare il layout delle pagine web
JavaScript per definire il comportamento delle
pagine web
JavaScript è il linguaggio di programmazione per
HTML
◦ Accedere agli elementi HTML
◦ Cambiare il valore di un attributo HTML
◦ Cambiare gli stili
◦ Rimuovere/Aggiungere elementi e attributi HTML
◦ Gestire eventi in una pagina HTML
DOM standard per l’accesso ai documenti
Definisce:
◦ Gli elementi HTML come oggetti
◦ Le proprietà degli elementi HTML
◦ I metodi per accedere agli elementi HTML
◦ Gli eventi per tutti gli elementi HTML
JavaScript può essere utile per:
◦ Leggere/Modificare una proprietà di un elemento HTML
es. modificare l’HTML di un paragrafo
◦ Validazione di un input form
es lunghezza di una stringa maggiore di 6 caratteri
◦ Visualizzare del contenuto dinamico in una pagina
es. Visualizzare il risultato di una operazione
◦ Gestione di eventi
onChange, onClick, onLoad,...
◦
◦
◦
◦
◦
◦
◦
◦
JS
JS
JS
JS
JS
JS
JS
JS
Window
Screen
Location
History
Navigator
Popup Alert
Timing
Cookies
Si può accedere agli elementi di una pagina:
tramite il suo id
tramite il tag name
tramite la classe
Si può accedere agli elementi di un oggetto
es. un form
Aprite la cartella js
Aprite il file LeggiEmodifica.html con il browser e
con NotePad
Visualizzare il saluto in un popup (alert(...))
Aprite il file valida.html con il browser e con
NotePad
Modifica la funzione js in modo tale che visualizzi
un messaggio di errore se l’input è superiore a 10
caratteri
Aprite il file somma.html con il browser e con
NotePad
Modifica la funzione js in modo tale che calcoli la
moltiplicazione di due numeri, al posto della
somma
Aprite il file CambiaFoto.html con il browser e con
NotePad
Modifica la funzione FotoPiccola in modo tale che
setti la larghezza dell’immagine a 350px, dopo
aver caricato l’immagine
XML (eXtensible Markup Language)
XML è stato progettato per descrivere dati
HTML è stato progettato per visualizzare dati
<Dipendente>
<Nome>Gildo</Nome>
<Cognome>Tomasco</Cognome>
<DataNascita>16/12/1976</DataNascita>
</Dipendente>
I tag XML sono costruiti
I tag XML sono predefeniti
Separazione tra dati e visualizzazione
Condivisione dei dati
Comunicazione tra sistemi eterogenei
Indipendente dalla piattaforma (aggiornamenti o
migrazioni)
Dati più accessibili (news feeds, disabili, …)
Gli elementi in un documento XML formano un
albero.
La prima linea definisce la versione dell’XML.
I documenti XML devono contentere un root
element
<?xml version="1.0" encoding="UTF-8"?>
<Dipendenti>
<Dipendente>
<Nome>Gildo</Nome>
<Cognome>Tomasco</Cognome>
<DataNascita>16/12/1976</DataNascita>
</Dipendente>
<Dipendente>
<Nome>Mario</Nome>
<Cognome>Rossi</Cognome>
<DataNascita>10/09/1980</DataNascita>
</Dipendente>
</Dipendenti>
Tutti gli elementi devono avere un tag di apertura
ed uno di chiusura
<tag> ...... </tag>
I tag XML sono Case Sensitive
<Nome> diverso da <nome>
Gli elementi XML devono essere opportunamente
innestati
<p><i>.....</p></i> errore
Gli attributi degli elementi devono essere tra ""
<Dipendente dataAssunzione="01/07/2005">
Gli attributi degli elementi devono essere tra “”
<Dipendente dataAssunzione=«01/07/2005">
Commenti in XML
<!– Questo è un commento -->
Gli spazi bianchi in XML sono preservati
Un XML è Well Formed
se rispetta le regole sintattiche
http://www.w3schools.com/dom/dom_validate.asp
Un elemento può contenere
◦ altri elementi
◦ testo
◦ attibuti
◦ o un mix dei precedenti elementi
Gli attributi possono contenere informazioni
addizionali che non sono parte dei dati
<file type="gif">computer.gif</file>
Definisce uno standard per l’accesso e la
manipolazione dei documnti XML.
Tutto in un documento XML è un nodo:.
◦ L’intero documento è il document node
◦ Ogni elemento XML è un element node
◦ I testo degli elementi XML sono text nodes
◦ Ogni attributo è un attribute node
◦ I commenti sono comment nodes
Parents, Children, and Siblings
◦ In un documento XML, il nodo superiore è chiamato
root
◦ Ciascun nodo, eccetto la radice, ha un esattamente
padre
◦ Un nodo può avere un qualsiasi numero di figli
◦ Una foglia è un nodo che non ha figli
◦ Siblings sono nodi con lo stesso padre
XMLHttpRequest
L’oggetto XMLHttpRequest viene usato per lo scambio di dati tra il
browser ed il server, senza la necessità di dover ricaricare la
pagina.
Parsare un Documento XML
◦ xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET",“Dipendenti.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x.nodeName - the name of x
x.nodeValue - the value of x
x.parentNode - the parent node of x
x.childNodes - the child nodes of x
x.attributes - the attributes nodes of x
x.getElementsByTagName(name) - get all elements
with a specified tag name
x.appendChild(node) - insert a child node to x
x.removeChild(node) - remove a child node from x
<!DOCTYPE html>
<html>
<head>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","dipendenti.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
Continua
x=xmlDoc.getElementsByTagName("Dipendente");
i=0;
function mostraDip()
{
e);
nome=(x[i].getElementsByTagName("Nome")[0].childNodes[0].nodeValu
cognome=(x[i].getElementsByTagName("Cognome")[0].childNodes[0].n
odeValue);
dataAssunzione=(x[i].getElementsByTagName("DataNascita")[0].childNo
des[0].nodeValue);
txt="Nome: " + nome + "<br>Cognome: " + cognome +
"<br>Data assunzione: "+ dataAssunzione;
document.getElementById("dipendente").innerHTML=txt;
}
Continua
function next()
{
if (i<x.length-1){
i++; mostraDip();
}
}
function prec()
{
if (i>0){
i--; mostraDip();
}
}
</script>
</head>
Continua
<body onload="mostraDip()">
<div id='dipendente'></div><br>
<input type="button" onclick="prec()" value="<<" />
<input type="button" onclick="next()" value=">>" />
</body>
</html>
Appendice
esempio
<!DOCTYPE html>
<html>
<head>
<title>Tecnologie per la comunicazione</title>
<meta name="description" content="Modulo formativo ...">
<meta name="keywords" content="HTML5, CSS, Javascript, XML">
<meta name="author" content="Ermenegildo Tomasco">
<link rel="stylesheet" href="styles.css">
</head>
Continua
<body onLoad="alert('Benvenuti, ci divertiremo!!!')">
<header>
<h1>Napoli</h1>
</header>
<nav>
<ul class="main">
<li><a href="campania.html">Campania</a></li>
<ul class="sub">
<li><a href="napoli.html">Napoli</a></li>
<li>Salerno</li>
<li>Avellino</li>
</ul>
</ul>
</nav>
Continua
<section>
<h1>Geografia fisica</h1>
<p>
<img src="images/Napoli-PalazzoReale.jpg">Napoli sorge quasi al centro
dell'omonimo golfo, dominato dal massiccio vulcanico Vesuvio e delimitato ad est dalla
penisola sorrentina con Punta Campanella, ad ovest dai Campi Flegrei con Monte di
Procida, a nord ovest-est dal versante meridionale della piana campana che si estende dal
lago Patria al nolano.
</p>
<p>
La città storica è andata sviluppandosi prevalentemente sulla costa. Il territorio
di Napoli è composto prevalentemente da colline (molti di questi rilievi superano i 150
metri d'altezza per giungere fino ai 452 m della collina dei Camaldoli), ma anche da isole,
insenature e penisole a strapiombo sul Mar Tirreno.
</p>
</section>
Continua
<section>
<h1>Clima</h1>
<p>
Napoli gode di un clima mediterraneo, con inverni miti e piovosi e estati calde e secche,
ma comunque rinfrescate dalla brezza marina che raramente manca sul suo golfo. Il sole
splende mediamente per 250 giorni l'anno.[41] La particolare conformazione morfologica
del territorio del capoluogo, comunque, è tale da fare in modo che la città possieda al suo
interno differenti microclimi, con la possibilità quindi di incontrare variazioni climatiche
anche significative spostandosi di pochi chilometri. Ad esempio, più continentale rispetto
al centro della città risulta essere la zona di Capodichino, al pari della maggior parte dei
quartieri della zona nord del capoluogo, come Poggioreale o Secondigliano. Anche la
zona dei Camaldoli, a causa della maggiore altitudine, si caratterizza per un clima
leggermente più freddo nei mesi invernali, ed un clima meno afoso in quelli estivi. Non
sono mancati però anche episodi di gelo (gli ultimi nel marzo 2005 e nel febbraio 2012).
</p>
</section>
Continua
<footer>
Copyright © ....
</footer>
</body>
</html>
header {
background-color:green;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:lightgray;
height:520px;
width:10%;
float:left;
padding:5px;
}
Continua
section {
width:85%;
float:left;
padding:10px;
}
footer {
background-color:green;
color:white;
clear:both;
text-align:center;
padding:5px;
}
Continua
p{
text-indent: 50px;
font-family: "Times New Roman";
font-size: 20px;
text-align: justify;
}
p.secondo {
text-indent: 50px;
font-family: "Times New Roman";
font-size: 20px;
color: red;
}
Continua
a:link {color:blue; background-color:transparent; text-decoration:none}
a:visited {color:blue; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
ul {
list-style-type: none;
}
ul li {
background-image: url(images/quadrato.gif);
background-repeat: no-repeat;
background-position: 0px center;
padding-left: 15px;
}
Continua
ul.main {
padding-left: 0px;
}
ul.sub {
padding-left: 10px;
}
ol {
padding-left: 150px;
}
img {
float:left;
}
esempio
Inline – attributi di stile nei tag in HTML
style="prorietà:valore"
Colore del testo
<h1 style="color:blue">Titolo </h1>
<p style="color:red">Paragrafo</p>
Font HTML
<h1 style="font-family:verdana"> Titolo </h1>
<p style="font-family:courier">Paragrafo</p>
Taglia del testo HTML
<h1 style="font-size: 24pt"> Titolo </h1>
<p style="font-size: 16pt">Paragrafo</p>
Allineamento del testo HTML
<h1 style="text-align:center">titolo centrato</h1>
<p style="text-align:right">paragrafo allineato a destra</p>
I link sono definiti con il tag <a>…</a>
Link ad una pagina locale
<a target="_blank" href="primaPagina.html">Prima Pagina</a>
Link ad una pagina esterna
<a target="_blank" href="http://www.google.it">Google</a>
Definire uno stile per i link
<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:green; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>
esempio
I link sono definiti con il tag <a>…</a>
Link interni al documento
<h2 id="consigli">Sezione dei consigli utili</h2>
.....
<!–- dalla stessa pagina-->
<a href="#consigli">Consulta i nostri consigli</a>
<!–- da una pagina esterna-->
<a href="paginaConsigli.htm#consigli">Consulta i nostri consigli</a>
Le immagini vengono inserite con il tag <img>
Immagine con attributi
<img src="images/img1.jpg" title="fiat 500" alt="fiat 500"
style="width:259px;height:194px">
Link su una immagine
<a href="images/img1-big.jpg">
<img src="images/img1.jpg" title="fiat 500" alt="fiat 500"
style="width:259px;height:194px">
</a>
Imaging floating
<p><img src="images/img1.jpg" alt="fiat 500"
style="float:left;width:259px;height:194px">La fiat 500</p>
Le immagini vengono inserite con il tag <img>
Image Maps
<img src="images/img1.jpg" alt="foto" usemap="#foto" style="width:350px;
height:250px;">
<map name="foto">
<area shape="rect" coords="0,0,350,50" alt=“Colosseo" href=“colosseo.htm">
<area shape="circle" coords="175,125,150" alt=“fiat 500"
href=“f500.html.htm">
</map>
esempio
Liste non ordinate
o Primo oggetto
o Secondo oggetto
o Terzo oggetto
o Quarto oggetto
Liste ordinate
1.
Primo oggetto
2.
Secondo oggetto
3.
Terzo oggetto
4.
Quarto oggetto
Liste non ordinate
o Primo oggetto
o Secondo oggetto
o Terzo oggetto
o Quarto oggetto
Liste ordinate
1.
Primo oggetto
2.
Secondo oggetto
3.
Terzo oggetto
4.
Quarto oggetto
Possibili valori attributo type
Liste non ordinate
<ul style="list-style-type:disc">
<li>primo</li>
<li>secondo</li>
<li>terzo</li>
</ul>
list-style-type:disc
list-style-type:square
list-style-type:circle
list-style-type:none
Possibili valori attributo type
Liste ordinate
<ol type="1">
<li>primo</li>
<li>secondo</li>
<li>terzo</li>
</ol>
1: con numeri
A: con lettere upper case
a: con lettere lower case
I: upper case romano
i: lower case romano
esempio
Div: elemento di tipo blocco
<div style="background-color:black; color:white; padding:20px;">
<h2>Napoli</h2>
<p>Napoli sorge quasi al centro dell'omonimo golfo, dominato dal massiccio vulcanico
Vesuvio e delimitato ad est .</p>
</div>
Span: elemento di tipo inline
<h1>La città più <span style="color:red">bella</span> del mondo</h1>
esempio
Novità di HTML5
<audio controls autoplay loop>
<source src="multimedia/TheSoundofSilence.ogg" type="audio/ogg">
<source src="multimedia/TheSoundofSilence.mp4" type="audio/mpeg">
Il tuo browser non supporta il tag audio
</audio>
http://www.online-convert.com/
Novità di HTML5
<video width="320" height="240" controls autoplay loop
poster="multimedia/TheSoundofSilence.jpg">
<source src="multimedia/TheSoundofSilence.mp4" type="video/mp4">
<source src="multimedia/TheSoundofSilence.ogg" type="video/ogg">
Il tuo browser non supporta il tag video
</video>
http://www.online-convert.com/
esempio
contenitore per due o più elementi di intestazione
<hgroup>
<h1>Benvenuti a tutti</h1>
<h2>Benvenuti al mare</h2>
<h3>Benvenuti in montagna</h3>
<h4>Benvenuti in Italia</h4>
<h5>Benvenuti in Campania</h5>
<h6>Benvenuti al corso</h6>
</hgroup>