Post on 16-Apr-2017
HTML, la lingua franca del web
Il padre dell'HyperText Markup
Language, come dello stesso Web,
è Sir Tim Berners-Lee, che nel 1991
ha scritto un documento intitolato
“HTML Tags” proponendo una
ventina di elementi (tag) da usare
per scrivere pagine web.
L’HTML si fa in 3
HTML5 contenuto, significato
CSS3 presentazione, stile, layout
Javascript/jQuery interazione
Elementi, Tag, Attributi
<a href="http://www.eos-solutions.it">EOS Solutions</a>
ELEMENTO ATTRIBUTO TAG
HTML, la struttura dei documenti
I documenti HTML sono file di testo
salvati con l’estensione .html (o .htm)
Editor
qualsiasi editor di testo va bene,
i miei consigli:
• Brackets - http://brackets.io/
• Microsoft Expression Web -https://www.microsoft.com/en-
us/download/details.aspx?id=36179
HTML, la struttura dei documenti
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>
La sintassi CSS: Selettori, Proprietà, Valori
Selettori:
Type in base al tipo di elemento html, come a, p, img …
Class in base al valore dell’attributo class
ID in base al valore dell’attributo univoco ID
Far parlare HTML con CSS
I fogli di stile CSS sono file di testo salvati con l’estensione .css
<head>
<link rel="stylesheet" href="main.css">
</head>
In alternativa:
<head>
<style>
p { color: orange; font-size: 16px; }
</style>
</head>
DIV e SPAN, le scatole vuote dell’HTML
<div> (block-level) e <span> (inline-level) sono contenitori,
non hanno significato semantico.
<!-- Division -->
<div class="social"><p>I may be found on...</p>
<p>Additionally, I have a profile on...</p>
</div>
<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
Elementi Testuali
Headings
Paragrafi<p>Testo del paragrafo</p>
Testo in Grassetto<p><strong>Attenzione:</strong> caduta massi.</p>
Testo in Corsivo<p>Io <em>amo</em> Milano!</p>
I Link
<!-- Percorso Relativo -->
<a href="about.html">About</a>
<!-- Percorso Assoluto -->
<a href="http://www.google.com/">Google</a>
Link a un indirizzo email:
<a href="mailto:andrea.rigon@eos-
solutions.it?subject=Oggetto%20della%20mail&body=Testo%20del
la%20mail%0AFirma">Scrivimi</a>
I Link
Aprire i Link in una nuova finestra del browser:
<a href="http://www.eos-solutions.it/" target="_blank">Apri il sito in
una nuova finestra</a>
Link a sezioni della stessa pagina:
<body id="top">
...
<a href="#top">Back to top</a>...
</body>
La «Cascata»
p {
background: orange;font-size: 24px;
}
p {
background: green;}
Tutti i paragrafi del documento avranno lo sfondo VERDE
Combinare i Selettori
HTML
<div class="hotdog">
<p>...</p>
<p>...</p>
<p class="mustard">...</p>
</div>
CSS
.hotdog p {
background: brown;
}
.hotdog p.mustard {
background: yellow;
}
Stili modulari con classi multiple
HTML
<a class="btn btn-success">...</a>
<a class="btn btn-danger">...</a>
CSS
.btn {
font-size: 16px;
}
.btn-danger {
background: red;
}
.btn-success {
background: green;
}
Colori
.postit {
background: yellow; }
. postit {
background: #ff0; }
. postit {
background: rgb(255, 255, 0); }
. postit {
background: rgba(255, 255, 0, .5); }
https://color.adobe.com – per calcolare valori esadecimali e rgb
Unità di misura
Assolute
Pixel:
p {
font-size: 14px;
}
Relative
Percentuali:
.colonna {
width: 50%; }
EM:
.banner {
font-size: 14px;
width: 5em; }In questo caso il banner
sarà largo 70px (14*5)
Cambiare le proprietà dei caratteri
html {
color: #555;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
line-height: 1.5;
/* Scorciatoia */
font: italic bold 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
/* ordine: font-style font-weight font-size/line-height font-family */ }
Formattare il testo
p {
text-align: center; /* valori: left, right, center, justify */
text-decoration: none; /* valori: none, underline, overline, line-through */
text-indent: 20px;
text-shadow: 3px 6px 2px rgba(0, 0, 0, .3);
text-transform: uppercase; /* valori: none, capitalize, uppercase, lowercase */
}
Citazioni
<cite>: citare un'opera, un autore, una risorsa
<q>: brevi citazioni in linea
<blockquote>: citazioni lunghe (block-level element)
<p>Il libro <cite><a href="http://www.amazon.com/Learn-Code-HTML-CSS-
Websites/dp/0321940520">Learn to Code HTML and CSS</a></cite> di Shay Howe ha ispirato
questa presentazione.</p>
<p>Come disse Stan Lee, <q>Da grandi poteri derivano grandi responsabilità.</q></p>
<blockquote><p>Nel giorno più splendente, nella notte più profonda, nessun malvagio sfugga alla mia ronda, colui
che nel male si perde, si guardi dal mio potere, la luce di Lanterna Verde!</p>
<p><cite>Il giuramento di Lanterna Verde, creato nel 1959 da John Broome e Gil Kane</cite></p>
</blockquote>
Liste
Liste Puntate
<ul>
<li>Verde</li><li>Bianco</li>
<li>Rosso</li>
</ul>
• Verde
• Bianco
• Rosso
Liste Numerate
<ol>
<li>Avatar</li><li>Titanic</li>
<li>The Avengers</li>
</ol>
1. Avatar
2. Titanic
3. The Avengers
Liste
Description List (es. glossari, faq)
<dl>
<dt>HTML</dt>
<dd>Linguaggio di markup per la formattazione di documenti ipertestuali disponibili nel World Wide
Web sotto forma di pagine web.</dd><dt>Avengers</dt>
<dd>Film del 2012, prodotto dai Marvel Studios, basato sui fumetti Marvel.</dd>
<dd>Gruppo di supereroi composto da numerosi personaggi della Marvel, creato da Stan Lee e Jack
Kirby nel 1963.</dd>
<dt>Spider-Man</dt>
<dt>Uomo Ragno</dt>
<dd>L'Uomo Ragno (Spider-Man), il cui vero nome è Peter Parker, è un personaggio dei fumetti, creato
da Stan Lee e Steve Ditko nel 1962.</dd>
</dl>
Inserire Immagini
<img src="dog.jpg" alt="A black, brown, and white dog
wearing a kerchief">
Formati supportati: .jpg .gif .png
Posizionare l’immagine con CSS:
img {
background: #eaeaed;
border: 1px solid #9799a7;
float: right;
margin: 8px 0 0 20px;
padding: 4px; }
Tabelle
<table>
<tr>
<th></th>
<th></th>
...
</tr>
<tr>
<td></td>
<td></td>
...
</tr>
</table>
Formattare la tabella con CSS:
table {
border-collapse: collapse; }
th, td {
border: 1px solid #c6c7cc;
padding: 10px 15px; }
th {
font-weight: bold; }
Link utili
W3Schools - http://www.w3schools.com/
Codecademy - http://www.codecademy.com/
Learn to Code HTML & CSS - http://learn.shayhowe.com/
A to Z CSS - http://www.atozcss.com/
CSS Reference - http://tympanus.net/codrops/css_reference/
CSS Tricks - https://css-tricks.com/
Your Inspiration Web - http://www.yourinspirationweb.com/
HTML.it - http://www.html.it/