HTML non per web designer

Corso di HTML «non per web designer»

Andrea Rigon

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

http://brackets.io/

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.



<div class="social"><p>I may be found on...</p>

<p>Additionally, I have a profile on...</p>

</div>



<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



<a href="about.html">About</a>



<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

https://color.adobe.com/

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/

http://www.w3schools.com/

http://www.codecademy.com/

http://learn.shayhowe.com/

http://www.atozcss.com/

http://tympanus.net/codrops/css_reference/

https://css-tricks.com/

http://www.yourinspirationweb.com/

http://www.html.it/

Internet

HTML non per web designer