HTML5 Manuale tratto da w3schools.com http://www.w3schools.com

Transcript

HTML5
Manuale tratto da w3schools.com
http://www.w3schools.com/
Pagine HTML
Tutte le pagine HTML devono iniziare con un tag dichiarativo di questo tipo:
<!DOCTYPE html>.
Le pagine HTML iniziano con <html> e terminano con </html>.
Attributo lang
<html lang=”it”>
Avvisa il browser e gli screen reader che la pagina è scritta in italiano
La parte visibile di una pagina HTML è contenuta tra i tag <body> e </body>.
L’attributo HTML Style
style="proprietà:valore"






L’attributo style è usato per definire lo stile di elementi HTML
Colore di sfondo: background-color
Colore del testo: color
Tipo di testo del font: font-family
Dimensione del testo: font-size
Allineamento del testo: text-align
Esempio: <body style="background-color:lightgrey">
Intestazioni HTML (Headings)
Le intestazioni HTML sono definite con I tag da <h1> a <h6>
Paragrafi HTML (Paragraphs)
I paragrafi HTML sono definite con il tag <p>
L’attributo HTML title fornisce ulteriori informazioni di tipo "tool-tip"
Es: <p title="Informazioni">
Elementi di formattazione del testo HTML
Tag
Description
<b>
bold (grassetto)
<em>
emphasized (enfatizzato)
<i>
italic (corsivo)
<small>
smaller (piccolo)
<strong>
important (grosso)
<sub>
subscripted (pedice)
<sup>
superscripted (apice)
<ins>
inserted
<del>
deleted (barrato)
<mark>
marked/highlighted (evidenziato)
Riga orizzontale HTML (Horizontal Rules)
Il tag <hr> crea una linea orizzontale
HTML Line Breaks
Il tag <br> definisce un line break
Collegamenti ipertestuali HTML Links
I links HTML si definiscono con il tag <a>
L’indirizzo del link p specificato con l’attributo href
Es: <a href="http://www.donmilani.it">Questo è un link</a>
Sintassi del tag Link HTML
In HTML, i links sono definite con il tag <a>:
L’attributo href specifica l’indirizzo di destinazione (http://www.donmilani.it)
Il testo del link è la parte visibile. Cliccando sul testo si viene indirizzati ad un
indirizzo specifico.
L’attributo target specifica dove aprire il documento linkato.
Target Value
Description
_blank
Apre il link in una nuova finestra o scheda
_self
Apre il link nella stessa finestra da dove viene richiamato
(predefinito)
_parent
Apre il link in un parent frame
_top
Apre il link a pagina intera della finestra
framename
Apre il link in un frame specifico
Es: <a href="http://www.donmilani.it" target="_self">Visita il sito Don
Milani</a>
Immagini HTML (images)
Le immagini HTML sono definite con il tag <img>
Attributi del tag img sono: (source file (src), alternative text (alt), size
(width and height)
Esempio
<!DOCTYPE html>
<html>
<body>
<h2>Montagne</h2>
<img src="mountain.jpg" alt="Montagna" style="width:304px;height:228px">
</body>
</html>
Sintassi HTML Images
In HTML, le immagini sono definite con il tag <img>.
Il tag <img> è vuoto, contiene solo attributi e non ha un tag di chiusura.
L’attributo src definisce l’url (indirizzo web) dell’immagine:
<img src="url" alt="Testo">
L’attributo alt
L’attributo alt specifica un testo alternative per l’immagine se questa non può
essere visualizzata.
Esempio
<img src="donmilani.gif" alt="Il sito Don Milani">
L’attributo alt è obbligatorio. Una pagina web non sarà validata correttamente se
esso manca.
Screen Readers HTML
Sono programmi che possono leggere ciò che è visualizzato sullo schermo.
Nel web possono riproodurre il linguaggio HTML come testo parlato, suoni oppure
Braille.
Gli screen readers sono utilizzati da persone cieche o con difficoltà di
apprendimento.
Dimensione delle immagini (Size - Width and
Height)
Si può usare l’attributo style per specificare larghezza ed altezza
(width and height) di una immagine.
I valori sono specificati in pixels (utilizzare px dopo il valore):
Esempio
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
Immagini in un’altra cartella
Se non specificato i browser si aspettano di trovare l’immagine nella stessa
cartella delle pagine web. Tuttavia, è comune sul web, salvare le immagini in
sottocartelle:
Esempio
<img src="/immagini/prova.gif" alt="Prova" style="width:128px;height:128px">
Usare un’immagine come Link
E’ possibile utilizzare immagini come links:
Esempio
<a href="http://www.donmilani.it"> <img src="milani.gif" alt="Sito Don
Milani" style="width:42px;height:42px;border:0"> </a>
Image Floating
E’ possibile che un’immagine venga posizionata a sinistra o a destra di un
paragrafo.:
Esempio
<p>
<img src="smiley.gif" alt="Smiley
face" style="float:left;width:42px;height:42px">
Un paragrafo con un’immagine. L’immagine si trova alla sinistra del testo.
</p>
Citazioni brevi HTML <q> Quotations
L’elemento HTML <q> definisce una citazione breve.
Es: <p>Lo scopo del WWF è: <q>Costruire un futuro dove le persone vivono in
armonia con la natura.</q></p>
I browsers di solito inseriscono le virgolette (quotation marks) vicino agli
elementi <q>
Citazioni lunghe HTML <blockquote>
L’elemento HTML <blockquote> definisce una sezione citata.
I browsers normalmente indentano gli elementi in <blockquote>.
Es: <p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
Per 50 anni, il WWF ha protetto il future della natura.
La più importante organizzazione del mondo, lavora in 100 paesi ed è
supportata da 1,2 milioni di persone negli Stati Uniti e quasi 5 milioni nel
mondo.
</blockquote>
Tag Commenti HTML

HTML Links – Colori ed icone
Quando si sposta il cursore su un link, normalmente accadono due cose:


La freccia del mouse diventa una piccola mano
Il colore del link cambia
Come impostazione predefinita I link nei browsers appaiono:



Sottolineato e blue: link non visitato
Sottolineato e viola: link visitato
Sottolineato e rosso: link attivo
E’ possibile modificare queste impostazioni utilizzando l’elemento style:
<style>
a:link {color:#000000; background-color:transparent; text-decoration:none}
a:visited {color:#000000; background-color:transparent; text-decoration:none}
a:hover {color:#ff0000; background-color:transparent; text-ecoration:underline}
a:active {color:#ff0000; background-color:transparent; text-decoration:underline}
</style>
HTML Links – L’attributo id
L’attributo id può essere utilizzato per creare segnalibri all’interno dei un
document html.
I segnalibri non sono visualizzati in nessun modo particolare. Sono invisibili al
lettore.
Esempio
<a id="info">Sezione informazioni utili</a>
Creare un link all’elemento <a> (Sezione informazioni utili):
<a href="#info">Visita la sezione informazioni utili</a>
Oppure si può creare un link all’elemento <a> (Sezione informazioni utili) da
un’altra pagina:
<a href="http://www.donmilani.it/html_links.html#info"> Visita la sezione
informazioni utili</a>
HTML Stili - CSS
CSS sta per for Cascading Style Sheets
Gli stili possono essere aggiunti agli elementi HTML in tre modi:



Inline – utilizzando un attributo style negli elementi HTML
Internal – utilizzando un elemento <style> nella sezione <head>
External – utilizzando uno o più file esterni CSS
La maniera più comune è quella di utilizzare file esterni.
Sintassi CSS
element { proprietà:valore ; proprietà:valore }
L’elemento è il nome di un elemento HTML. La proprietà è la proprietà CSS. Il
valore è il valore CSS.
Stili multipli sono separate da punto e virgola.
Inline Styling (Inline CSS)
Esempio
<h1 style="color:blue">Questa è una intestazione Blu</h1>
Internal Styling (Internal CSS)
Può essere utilizzato per definire uno stile comune per tutti gli elementi HTML di
una pagina.
Internal styling è definite nella sezione <head> di una pagina HTM, utilizzando
l’elemento <style>:
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1
{color:blue}
p
{color:green}
</style>
</head>
<body>
<h1>Questa è una intestazione</h1>
<p>Questo è un paragrafo.</p>
</body>
</html>
External Styling (External CSS)
E’ ideale quando lo stile è applicato a pagine multiple. In questo modo è possibile
cambiare lo stile di un intero sito cambiando un file.
External styles sono definite nella sezione <head> di una pagina html
nell’elemento <link>:
Esempio
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
CSS Fonts
La proprietà CSS color definisce il colore del testo.
La proprietà CSS font-family definisce il tipo di font.
La proprietà CSS font-size definisce la dimensione del testo.
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}
</style>
</head>
<body>
</body>
</html>
I riquadri CSS
Ogni elemento visibile HTML ha un riquadro intorno a se, anche se non si vede.
La proprietà CSS border definisce un bordo visibile intorno ad un elemento HTML:
Esempio
p {
border:1px solid black;
}
La proprietà CSS padding definisce lo spazio all’interno del bordo:
Esempio
p {
padding:10px;
}
La propretà CSS margin definisce lo spazio all’esterno del bordo:
Esempio
p {
padding:10px;
margin:30px;
}
Tabelle HTML
Definire tabelle HTML
Esempio
<table style="width:100%">
<tr>
<td>Antonio</td>
<td>Rossi</td>
<td>50</td>
</tr>
<tr>
<td>Eva</td>
<td>Verdi</td>
<td>42</td>
</tr>
</table>
Spegazione:
Le tabelle sono definite con il tag <table>.
La tabelle sono definite in due righe (table rows) con il tag <tr>.
Le righe di una tabella sono divise in contenitori di dati (table data) con il tag
<td>. Essi possono contenere testo, immagini , liste, etc.
Una riga di una tabella può anche essere divisa in intestazioni di pagina (table
headings) con il tag <th>.
Una tabella HTML con attributi Bordo
Se non specificato la tabella sarà visualizzata senza bordo.
Il bordo può essere aggiunto utilizzando l’attributo border:
Esempio
<table border="1" style="width:100%">
<tr>
<td>Antonio</td>
<td>Rossi</td>
<td>50</td>
</tr>
<tr>
<td>Eva</td>
<td>Verdi</td>
<td>42</td>
</tr>
</table>
Per aggiungere un bordo in un CSS:
Esempio
table, th, td {
border: 1px solid black;
}
Tabella HTML con Bordi Collapsed
Se si vuole una tabella i cui bordi siano singoli occorre aggiungere la proprietà
CSS border-collapse:
Esempio
table, th, td {
border-collapse: collapse;
}
Tabella HTML Table con margini (Cell Padding)
Il Cell padding (margine celle) specifica lo spazio tra il contenuto delle celle ed il
bordo.
Per definire il padding (margine), utilizzare la proprietà CSS padding :
Esempio
table, th, td {
border-collapse: collapse;
}
th,td {
padding: 15px;
}
HTML Table Headings (Intestazione tabelle)
Le intestazioni delle tabelle sono definite con il tag <th>.
Come impostazione predefinita I più importanti browsers visualizzano le
intestazioni delle tabelle centrate ed in grassetto:
Esempio
<table style="width:100%">
<tr>
<th>Nome</th>
<th>Cognome</th>
<th>Punti</th>
</tr>
<tr>
<td>Eva</td>
<td>Bianchi</td>
<td>94</td>
</tr>
</table>
Per allineare a sinistra l’intestazione della tabella utilizzare la proprietà CSS textalign:
Esempio
th {
text-align: left;
}
HTML Lists
Liste HTML non ordinate
Una lista non ordinate inizia con il tag <ul> tag. Ogni elemento della lista inizia
con il tag <li>.
Gli elementi della lista saranno indicate con piccolo cerchi neri..
Lista non ordinata:
<ul>
<li>Caffe</li>
<li>Te</li>
<li>Latte</li>
</ul>
Liste HTML non ordinate – Attributi (Style)
Alle liste non ordinate possono essere aggiunti attributi style per definire lo stile
del punto elenco:
Style
Descrizione
list-style-type:disc
Cerchio pieno (default)
list-style-type:circle
Cerchio vuoto
list-style-type:square
Quadrati
list-style-type:none
Nessuno
Cerchio pieno:
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Cerchio vuoto:
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Quadrato:
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Nessuno:
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Liste ordinate HTML
Una lista ordinate inizia con il tag <ol> tag. Ogni elemento della lista inizia con il
tag <li>.
Gli elementi della lista saranno identificati con un numero.
Lista ordinata:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Liste ordinate HTML - Attributi (Style)
Alle liste ordinate possono essere aggiunti attributi style per definire lo stile del
punto elenco:
Tipo
Descrizione
type="1"
Gli elementi saranno numerate con numeri (default)
type="A"
Gli elementi saranno numerate con lettere maiuscole
type="a"
Gli elementi saranno numerate con lettere minuscole
type="I"
Gli elementi saranno numerate con numeri romani maiuscoli
type="i"
Gli elementi saranno numerate con numeri romani minuscoli
Numeri:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lettere maiuscole:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lettere minuscole:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Numeri romani maiuscoli:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Numeri romani minuscoli:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Liste descrittive HTML (Description Lists)
Una lista descrittiva è una lista di termini con la descrizione di ognuno di loro.
Il tag <dl> definisce una lista descrittiva.
Il tag <dt> definisce il termine (noma), e il tag <dd> definisce la descrizione
(data description).
Lista descrittiva:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Liste HTML nidificate
Le liste possono essere nidificate (liste dentro liste).
Lista nidificata:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
HTML – Blocchi (Block Elements)
London
Londra è la capitale dell'Inghilterra. E 'la città più popolosa del Regno Unito, con
un'area metropolitana di oltre 13 milioni di abitanti.
Situata sul fiume Tamigi, Londra è stata un insediamento importante per due
millenni, la sua storia risale alla sua fondazione da parte dei Romani, che la
chiamarono Londinium.
Esempio
<div style="background-color:black; color:white; margin:20px;
padding:20px;">
<h2>London</h2>
<p>
Londra è la capitale dell'Inghilterra. E 'la città più popolosa del Regno
Unito, con un'area metropolitana di oltre 13 milioni di abitanti.
</p>
</div>
HTML Block Elements e Inline Elements
La maggior parte degli elementi HTML sono definite come elementi di livello blocco
(block level) oppure elementi in linea (inline).
Gli elementi di livello blocco (Block level) normalmente iniziano (e finiscono) con
una nuova linea, quando sono visualizzate in un browser.
Esempio: <h1>, <p>, <ul>, <table>
Gli elementi Inline sono normalmente visualizzate senza interruzioni di linea.
Esempio: <b>, <td>, <a>, <img>
L’elemento HTML <div>
L’elemento HTML <div> è un element di livello blocco che può essere utilizzato
come un contenitore per altri elementi HTML.
L’elemento <div> non ha un significato speciale. Non richiede attributi ma
possono essere utilizzati style e class.
Poiché è un elemento di livello blocco il browser visualizzerà interruzioni di linea
prima e dopo di esso.
Quando è utilizzato con CSS, l’elemento <div> può essere utilizzato per definire lo
stile di blocchi di contenuto.
L’elemento HTML <span>
L’elemento HTML <span> è un element in linea (inline element) che può essere
utilizzato come un contenitore per testo.
L’elemento <span> non ha un significato speciale. Non richiede attributi ma
possono essere utilizzati style e class.
A differenza di <div>, che è formattato con interruzioni di linea, l’elemento
<span> non ha una formattazione automatica.
Quando è utilizzato con CSS, l’elemento <span> può essere usato per definire lo
stile di parti di testo:
Esempio
<h1>La mia<span style="color:red">Importante</span>Intestazione</h1>
Classi HTML
Classificare elementi HTML rende possible definire styles CSS per classi di
elemento.
Stili uguali per per classi uguali, oppure stili diversi per classi diverse.
London
London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two
millennia, its history going back to its founding by the Romans, who named it
Londinium.
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
</div>
</body>
</html>
Classificare Elementi di Blocco
L’elemento HTML <div> è un elemento di livello blocco. Può essere usato come
contenitore per altri elementi HTML.
Classificare elementi <div>, rende possibile definire stili uguali per elementi
uguali:
London
London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two
millennia, its history going back to its founding by the Romans, who named it
Londinium.
Paris
Paris is the capital and most populous city of France.
Situated on the Seine River, it is at the heart of the Île-de-France region, also
known as the région parisienne.
Within its metropolitan area is one of the largest population centers in Europe,
with over 12 million inhabitants.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most
populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace, and the home
of the Japanese Imperial Family.
The Tokyo prefecture is part of the world's most populous metropolitan area with
38 million people and the world's largest urban economy.
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in
the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
</div>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
Classificare elementi in linea
L’elemento HTML <span> è un element in line ache può essere usato per
contenere testo.
Classificare elementi <span> rende possible to progettare stili uguali per elementi
<span> uguali.
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>
Layouts HTML
I siti web spesso visualizzano contenuti in colonne multiple (ad esempio i
giornali).
City Gallery
London
Paris
Tokyo
London
Copyright © W3Schools.com
Layout HTML utilizzano elementi <div>
L’elemento <div> è spesso utilizzato come uno strumento di layout perché può
essere facilmente posizionato con I CSS.
Questo esempio usa 4 elementi <div> per creare un layout a colonna multipla:
Esempio
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
</p>
<p>
</p>
</div>
<div id="footer">
</div>
</body>
The CSS:
<style>
#header {
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
Website Layout Using HTML5
HTML5 ha la possibilità di utilizzare nuovi elementi semantici che definiscono parti
di una pagina web:
header
Definisce un’intestazione di un documento o
di una sezione
nav
Definisce un contenitore per link di navigazione
section
Definisce una sezione in un documento
article
Definisce un articolo indipendente ed autonomo
aside
Definisce un contenuto a parte
(come una barra laterale)
footer
Definisce un piè di pagina di un documento o di una
sezione
details
Definisce ulteriori dettagli
summary
Definisce un titolo per l'elemento dettagli
Questo esempio usa <header>, <nav>, <section>, and <footer> per creare un
layout a colonna multipla:
Esempio
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
</p>
<p>
</p>
</section>
<footer>
</footer>
</body>
The CSS
<style>
header {
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
color:white;
clear:both;
text-align:center;
padding:5px;
}
Nomi dei colori HTML
I colori sono visualizzati combinando ROSSO, VERDE ed AZZURRO.
140 Nomi di colori sono supportati da tutti browser
140 nomi di colori sono definite nelle specifiche dei colori HTML5 e CSS3.
17 colori sono specifiche HTML, 123 sono specifiche CSS.
La tabella seguente li elenca, insieme ai loro valori esadecimali.
I 17 colori HTML sono: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, orange, purple, red, silver, teal, white, and yellow.
Colori ordinati per nome
Color Name
HEX
AliceBlue
#F0F8FF
AntiqueWhite
#FAEBD7
Aqua
#00FFFF
Aquamarine
#7FFFD4
Azure
#F0FFFF
Beige
#F5F5DC
Bisque
#FFE4C4
Black
#000000
BlanchedAlmond
#FFEBCD
Blue
#0000FF
BlueViolet
#8A2BE2
Brown
#A52A2A
BurlyWood
#DEB887
CadetBlue
#5F9EA0
Chartreuse
#7FFF00
Chocolate
#D2691E
Coral
#FF7F50
Color
CornflowerBlue
#6495ED
Cornsilk
#FFF8DC
Crimson
#DC143C
Cyan
#00FFFF
DarkBlue
#00008B
DarkCyan
#008B8B
DarkGoldenRod
#B8860B
DarkGray
#A9A9A9
DarkGreen
#006400
DarkKhaki
#BDB76B
DarkMagenta
#8B008B
DarkOliveGreen
#556B2F
DarkOrange
#FF8C00
DarkOrchid
#9932CC
DarkRed
#8B0000
DarkSalmon
#E9967A
DarkSeaGreen
#8FBC8F
DarkSlateBlue
#483D8B
DarkSlateGray
#2F4F4F
DarkTurquoise
#00CED1
DarkViolet
#9400D3
DeepPink
#FF1493
DeepSkyBlue
#00BFFF
DimGray
#696969
DodgerBlue
#1E90FF
FireBrick
#B22222
FloralWhite
#FFFAF0
ForestGreen
#228B22
Fuchsia
#FF00FF
Gainsboro
#DCDCDC
GhostWhite
#F8F8FF
Gold
#FFD700
GoldenRod
#DAA520
Gray
#808080
Green
#008000
GreenYellow
#ADFF2F
HoneyDew
#F0FFF0
HotPink
#FF69B4
IndianRed
#CD5C5C
Indigo
#4B0082
Ivory
#FFFFF0
Khaki
#F0E68C
Lavender
#E6E6FA
LavenderBlush
#FFF0F5
LawnGreen
#7CFC00
LemonChiffon
#FFFACD
LightBlue
#ADD8E6
LightCoral
#F08080
LightCyan
#E0FFFF
LightGoldenRodYellow
#FAFAD2
LightGray
#D3D3D3
LightGreen
#90EE90
LightPink
#FFB6C1
LightSalmon
#FFA07A
LightSeaGreen
#20B2AA
LightSkyBlue
#87CEFA
LightSlateGray
#778899
LightSteelBlue
#B0C4DE
LightYellow
#FFFFE0
Lime
#00FF00
LimeGreen
#32CD32
Linen
#FAF0E6
Magenta
#FF00FF
Maroon
#800000
MediumAquaMarine
#66CDAA
MediumBlue
#0000CD
MediumOrchid
#BA55D3
MediumPurple
#9370DB
MediumSeaGreen
#3CB371
MediumSlateBlue
#7B68EE
MediumSpringGreen
#00FA9A
MediumTurquoise
#48D1CC
MediumVioletRed
#C71585
MidnightBlue
#191970
MintCream
#F5FFFA
MistyRose
#FFE4E1
Moccasin
#FFE4B5
NavajoWhite
#FFDEAD
Navy
#000080
OldLace
#FDF5E6
Olive
#808000
OliveDrab
#6B8E23
Orange
#FFA500
OrangeRed
#FF4500
Orchid
#DA70D6
PaleGoldenRod
#EEE8AA
PaleGreen
#98FB98
PaleTurquoise
#AFEEEE
PaleVioletRed
#DB7093
PapayaWhip
#FFEFD5
PeachPuff
#FFDAB9
Peru
#CD853F
Pink
#FFC0CB
Plum
#DDA0DD
PowderBlue
#B0E0E6
Purple
#800080
RebeccaPurple
#663399
Red
#FF0000
RosyBrown
#BC8F8F
RoyalBlue
#4169E1
SaddleBrown
#8B4513
Salmon
#FA8072
SandyBrown
#F4A460
SeaGreen
#2E8B57
SeaShell
#FFF5EE
Sienna
#A0522D
Silver
#C0C0C0
SkyBlue
#87CEEB
SlateBlue
#6A5ACD
SlateGray
#708090
Snow
#FFFAFA
SpringGreen
#00FF7F
SteelBlue
#4682B4
Tan
#D2B48C
Teal
#008080
Thistle
#D8BFD8
Tomato
#FF6347
Turquoise
#40E0D0
Violet
#EE82EE
Wheat
#F5DEB3
White
#FFFFFF
WhiteSmoke
#F5F5F5
Yellow
#FFFF00
YellowGreen
#9ACD32
Valori dei colori HTML
I colori sono visualizzati combinando il ROSSO, il VERDE ed il BLU.
Valori dei colori
I colori sono definite utilizzando una notazione esadecimale per valori del rosso, verde e blu (RGB).
Il valore più basso per ognuno è 0 (esadecimale 00). Il valore più alto è 255 (hex FF).
I valori in esadecimale sono scritti con un # seguito da 3 o 6 caratteri esadecimali.
Color
Color 3 digit HEX
Color 6 digit HEX
Color RGB
#F00
#FF0000
rgb(255,0,0)
#0F0
#00FF00
rgb(0,255,0)
#00F
#0000FF
rgb(0,0,255)
hades of grey (from black to white) are defined using equal values for all the 3 light sourses:
Color
Color 3 digit HEX
Color 6 digit HEX
Color RGB
#000
#000000
rgb(0,0,0)
#888
#888888
rgb(136,136,136)
#FFF
#FFFFFF
rgb(255,255,255)
Colori ordinate per valore esadecimale
Color Name
HEX
Black
#000000
Navy
#000080
DarkBlue
#00008B
MediumBlue
#0000CD
Blue
#0000FF
DarkGreen
#006400
Green
#008000
Teal
#008080
DarkCyan
#008B8B
DeepSkyBlue
#00BFFF
DarkTurquoise
#00CED1
MediumSpringGreen
#00FA9A
Lime
#00FF00
SpringGreen
#00FF7F
Aqua
#00FFFF
Cyan
#00FFFF
MidnightBlue
#191970
Color
DodgerBlue
#1E90FF
LightSeaGreen
#20B2AA
ForestGreen
#228B22
SeaGreen
#2E8B57
DarkSlateGray
#2F4F4F
LimeGreen
#32CD32
MediumSeaGreen
#3CB371
Turquoise
#40E0D0
RoyalBlue
#4169E1
SteelBlue
#4682B4
DarkSlateBlue
#483D8B
MediumTurquoise
#48D1CC
Indigo
#4B0082
DarkOliveGreen
#556B2F
CadetBlue
#5F9EA0
CornflowerBlue
#6495ED
RebeccaPurple
#663399
MediumAquaMarine
#66CDAA
DimGray
#696969
SlateBlue
#6A5ACD
OliveDrab
#6B8E23
SlateGray
#708090
LightSlateGray
#778899
MediumSlateBlue
#7B68EE
LawnGreen
#7CFC00
Chartreuse
#7FFF00
Aquamarine
#7FFFD4
Maroon
#800000
Purple
#800080
Olive
#808000
Gray
#808080
SkyBlue
#87CEEB
LightSkyBlue
#87CEFA
BlueViolet
#8A2BE2
DarkRed
#8B0000
DarkMagenta
#8B008B
SaddleBrown
#8B4513
DarkSeaGreen
#8FBC8F
LightGreen
#90EE90
MediumPurple
#9370DB
DarkViolet
#9400D3
PaleGreen
#98FB98
DarkOrchid
#9932CC
YellowGreen
#9ACD32
Sienna
#A0522D
Brown
#A52A2A
DarkGray
#A9A9A9
LightBlue
#ADD8E6
GreenYellow
#ADFF2F
PaleTurquoise
#AFEEEE
LightSteelBlue
#B0C4DE
PowderBlue
#B0E0E6
FireBrick
#B22222
DarkGoldenRod
#B8860B
MediumOrchid
#BA55D3
RosyBrown
#BC8F8F
DarkKhaki
#BDB76B
Silver
#C0C0C0
MediumVioletRed
#C71585
IndianRed
#CD5C5C
Peru
#CD853F
Chocolate
#D2691E
Tan
#D2B48C
LightGray
#D3D3D3
Thistle
#D8BFD8
Orchid
#DA70D6
GoldenRod
#DAA520
PaleVioletRed
#DB7093
Crimson
#DC143C
Gainsboro
#DCDCDC
Plum
#DDA0DD
BurlyWood
#DEB887
LightCyan
#E0FFFF
Lavender
#E6E6FA
DarkSalmon
#E9967A
Violet
#EE82EE
PaleGoldenRod
#EEE8AA
LightCoral
#F08080
Khaki
#F0E68C
AliceBlue
#F0F8FF
HoneyDew
#F0FFF0
Azure
#F0FFFF
SandyBrown
#F4A460
Wheat
#F5DEB3
Beige
#F5F5DC
WhiteSmoke
#F5F5F5
MintCream
#F5FFFA
GhostWhite
#F8F8FF
Salmon
#FA8072
AntiqueWhite
#FAEBD7
Linen
#FAF0E6
LightGoldenRodYellow
#FAFAD2
OldLace
#FDF5E6
Red
#FF0000
Fuchsia
#FF00FF
Magenta
#FF00FF
DeepPink
#FF1493
OrangeRed
#FF4500
Tomato
#FF6347
HotPink
#FF69B4
Coral
#FF7F50
DarkOrange
#FF8C00
LightSalmon
#FFA07A
Orange
#FFA500
LightPink
#FFB6C1
Pink
#FFC0CB
Gold
#FFD700
PeachPuff
#FFDAB9
NavajoWhite
#FFDEAD
Moccasin
#FFE4B5
Bisque
#FFE4C4
MistyRose
#FFE4E1
BlanchedAlmond
#FFEBCD
PapayaWhip
#FFEFD5
LavenderBlush
#FFF0F5
SeaShell
#FFF5EE
Cornsilk
#FFF8DC
LemonChiffon
#FFFACD
FloralWhite
#FFFAF0
Snow
#FFFAFA
Yellow
#FFFF00
LightYellow
#FFFFE0
Ivory
#FFFFF0
White
#FFFFFF
HTML Head
L’elemento HTML <head>
L’elemento <head> è un contenitore per metadata (dati sui dati).
I meta dati HTML sono informazioni relative al document HTML. I metadata non
vengono visualizzati.
Tipicamente i metadati definiscono title, styles, links, scripts, ed altre meta
informazioni.
I seguenti tag descrivono metadati: <title>, <style>, <meta>, <link>, <script>,
and <base>.
Omettere <html> e <body>
Nello standard HTML5, i tag <html> , <body>, e <head> possono essere omessi.
Il codice seguente sarà validate come HTML5:
Esempio
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<p>Questo è un paragrafo</p>
Omettere <head>
Nello standard HTML5, il tagf <head> può essere omesso.
Per default, I browsers aggiungeranno a tutti I tag prima del tag <body>, ad un
elemento <head> di default.
E’ possible ridurre la complessità dell’HTML, omettendo il tag <head>:
Esempio
<!DOCTYPE html>
<html>
<title>Titolo della pagina</title>
<body>
<p>Questo è un paragrafo</p>
</body>
</html>
L’elemento HTML <title>
L’elemento <title> definisce il titolo del documento.
L’elemento <title> è richiesto in tutti I documenti HTML/XHTML.
L’elemento <title>:



Definisce un titolo nella toolbar del browser
Fornisce un titolo alle pagine quando vengono aggiunte ai preferiti
Visualizzano un titolo per la pagina nei risultati dei motori di ricerca
Un documento HTML semplificato:
Esempio
<!DOCTYPE html>
<html>
<title>Titolo della pagina</title>
<body>
Contenuto del documento......
</body>
</html>
L’elemento HTML <style>
L’elemento <style> è utilizzato per definire le informazioni relative allo stile di un
document HTML.
All’interno dell’elemento <style> si specific ail modo con il quale gli elementi
vengono presentati nel browser:
Esempio
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
L’elemento HTML <link>
L’elemento <link> definisce la relazione di una pagina ad una risorsa esterna.
E’ molto spesso usato per creare un collegamento ai fogli di stile CSS:
Esempio
<link rel="stylesheet" href="mystyle.css">
L’elemento HTML <meta>
L’elemento <meta> è utilizzato per specificare la descrizione della pagina, le
parole chiave, l’autore ed altri metadati.
I metadati sono usati dai browser (come visualizzare contenuti), dai motori di
ricerca (parole chiave), ed altri servizi web.
Definire parole chiave per i motori di ricerca:
Esempio
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Definire la descrizione di una pagina web:
Esempio
<meta name="description" content="Manuale HTML e CSS">
Definire il set di caratteri utilizzato:
Esempio
<meta charset="UTF-8">
Definire l’autore di una pagina:
Esempio
<meta name="author" content="Giovanni Bianchi">
Aggiornare la pagina ogni 30 secondi:
Esempio
<meta http-equiv="refresh" content="30">
L’elemento HTML <base>
L’elemento <base> specifica la URL base e il target base element specifies the
base URL and base target for all per tutte le URLs collegate in una pagina:
Esempio
<base href="http://www.w3schools.com/images/" target="_blank">
Entità HTML
I caratteri riservati in HTML devono essere sostituiti con caratteri entità.
I caratteri, non presenti sulla tastier, possono essere sostituiti da entità.
Entità HTML
Alcuni caratteri sono riservati in HTML.
Se vengono utilizzati i segni minore (<) o maggiore (>) il browser potrebbere
confonderli con i tag.
I caratteri entità sono utilizzati per visualizzare I caratteri riservati in HTML.
Un caratteri entità appare così:
&entity_name;
OR
&#entity_number;
To display a less than sign we must write: < or <
Non Breaking Space
Una entità carattere utilizzata in HTML è il non breaking space ( ).
I browser troncano sempre gli spazi nelle pagine html. Se scrivi 10 spazi, il broser
ne rimuoverà 9. Per aggiungere degli spazi occorre utilizzare  
Alcuni utili HTML Character Entities (I nomi entità sono case sensitive)
Risultato
Descrizione
Nome entità
Numero entità
non-breaking space
 
 
<
less than
<
<
>
greater than
>
>
&
ampersand
&
&
¢
cent
¢
¢
£
pound
£
£
¥
yen
¥
¥
€
euro
€
€
©
copyright
©
©
®
registered trademark
®
®
Codifica HTML (Set di caratteri)
Per visualizzare correttamente una pagina HTML, un browser deve conoscere il
set di caratteri da utilizzare (codifica del carattere).
Cosa è la Codifica del Caratttere?
ASCII è stato il primo standard di codifica caratteri (chamato anche set di
caratteri). Esso definisce 127 diversi caratteri alfanumerici che possono essere
utilizzati in internet.
ASCII supporta numeri (0-9), lettere Inglesi (A-Z), ed alcuni caratteri speciali
come ! $ + - ( ) @ < > .
ANSI (Windows-1252) era l’originario set di caratteri di Windows. Supportava 256
differenti caratteri.
ISO-8859-1 era il set di caratteri predefinito per HTML 4. Anche esso supportava
256 differenti caratteri.
Poichè ANSI and ISO erano limitati, la codifica dei caratteri fu cambiata in UTF-8
per HTML5.
UTF-8 (Unicode) copre quasi tutti I caratteri ed I simboli del mondo
L’attributo HTML charset
Per visualizzare una pagina HTML correttamente, un browser deve conoscere il set
di caratteri utilizzato nella pagina.
Questo è specificato in un altro <meta> tag:
For HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
For HTML5:
<meta charset="UTF-8">
Se un browser rileva ISO-8859-1 in una pagina web, lo assimila all’ANSI, perchè
ANSI è identico all’ISO-8859-1 tranne per il fatto che ANSI ha 32 caratteri in più.
Il set di caratteri ASCII
ASCII utilizza I valori da 0 to 31 (e 127) per i caratteri di controllo.
ASCII utilizza I valori da 32 a 126 per lettere, cifre e simboli.
ASCII non usa I valori da 128 a 255.
Il set di caratteri ANSI (Windows-1252)
ANSI è identico ad ASCII per I valorei da 0 a 127.
ANSI ha un set di caratteri proprietario per I valori da 128 a 159.
ANSI è identico ad UTF-8 per I valori da 160 a 255.
Il set di caratteri ISO-8859-1
8859-1 è identico ad ASCII per I valori da 0 a 127.
8859-1 non usa I valori da 128 a 159.
8859-1 è identico a UTF-8 per I valori da 160 a 255.
Il set di caratteri UTF-8
UTF-8 è identico ad ASCII per I valori da 0 a 127.
UTF-8 non usa I valori da 128 a 159.
UTF-8 è identico ad ANSI e 8859-1 per I valori da 160 a 255.
UTF-8 continua dal valore 256 con più di 10.000 caratteri diversi.

HTML5 Manuale tratto da w3schools.com http://www.w3schools.com

Transcript

Documenti analoghi

Html: style, span, div

"Princesa De Mi Barrio", il rap italiano si fonde con il

Respect - Beat Sheet

Corso WordPress IASF - Pegotest

Lezione 1 (stampa)

Ginnastica - ting

ADJ Style TAB 9.7”: il nuovo Tablet 3G dedicato a chi è sempre in

font-size

La dichiarazione di dipendenza dei Kings of Convenience

Handles and Colours Catoni 5IT150362

CSS - DISI

CSS: Introduzione

Guida pratica ai CSS