Tiziana Mancinelli
Corso di Iformatica per gli studi umanistici 2018
HTML
HTML: Siti web
HTML
HTML
Tasto destro:
- View Page source
- Inspect Element
HTML
- Rispetta la struttura gerarchica
- Ogni tag di apertura deve avere il suo tag di chiusura
- Rispetta la regola di Matriochka: i tag sono sempre annidati l'uno dentro l'altro (non si sovrappongono mai!)
<html>
<body>
<h1>Questo è un titolo</h1>
<body>
</html>HTML
- È possibile utilizzare elementi vuoti
- I tag dovrebbero essere scritti in minuscolo (buona pratica)
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My first head</h1>
<p>My first opragraph</p>
</body>
</html>HTML
- Gli elementi HTML sono costituiti da un tag di apertura (ad esempio <strong>) e un tag di chiusura (/ strong)
<strong> Importante! </ strong>
HTML
HTML non è difficile
Marcatura giusta: <b> <i> HTML </i> </b>
Markup errato: <b> <i> HTML </ b> </ i>
Elementi vuoti
L'unica eccezione alla regola consiste in alcuni elementi, chiamati elementi vuoti perché non contengono dati: i tag finali saranno superflui.
Ad esempio: il tag <br>, che inserisce un'interruzione di riga singola.
Elementi sempre in minuscolo:
Dobbiamo scrivere
<title>
e non
<Titolo> o <TITOLO>
Era una regola con XHTML, non è obbligatorio con HTML5 ... ma è una buona pratica!
Elementi HTML:
<!DOCTYPE html>: dichiarazione definisce questo documento come HTML5 (versione HTML)
<html>: elemento radice di una pagina HTML che contiene <head> e <body>
Elementi HTML:
<head>
<title>:il titolo della pagina (nella barra degli strumenti del browser).
<stile>: definisce le informazioni di stile per un documento (attenzione!)
<meta>: definisce i metadati relativi a un documento HTML (descrizione della pagina, parole chiave, autore del documento, ultima modifica e altri metadati)
<link>: definisce la relazione tra un documento e una risorsa esterna (CSS o Javascript)
Elementi HTML:
Titoli e paragrafi
<h1> ... <h6>: intestazioni HTML
<p>: definisce un paragrafo
<br>: inserisce un'interruzione di riga singola
PRIMO ESERCIZIO!
Make your first web page!
ATTRIBUTI
- Tutti gli elementi HTML possono avere attributi
- Gli attributi forniscono informazioni aggiuntive su un elemento
- Gli attributi sono sempre specificati nel tag di inizio
- Gli attributi di solito vengono in coppie nome / valore come: name = "value"
ATTRIBUTI
<img src=“pippo.jpg” alt=“3-month-old Pippo”>
ATTRIBUTI importanti:
- alt: testo alternativo per un'immagine, quando l'immagine non può essere visualizzata
- href: URL (indirizzo web) per un collegamento
- src: URL (indirizzo web) per un'immagine
- stile: stile CSS incorporato per un elemento (attenzione!)
- title: informazioni extra su un elemento (visualizzato come suggerimento)
Elementi e attributi
- <img>: definisce un'immagine
Attributo @src: definisce l'URL dell'immagine
@alt attributo: definisce un testo alternativo per un'immagine, se non può essere visualizzato
- <a>: definisce un collegamento
Attributo @href: definisce l'indirizzo del collegamento
CLASS e ID
Attributi globali HTML (gli attributi di seguito possono essere utilizzati su qualsiasi elemento HTML)
Tra gli attributi globali c'è la classe di identificazione
I CSS non sarebbero uno strumento così potente come ID e CLASS
CLASS
Aggiungiamo al div l'attributo class = "box-immagine":
<div class = "box-immagine"> Testo + immagine </ div>
Il valore dell'attributo class è definito nel file css
.box-immagine {color: blue;}
L'attributo della classe HTML consente di definire stili uguali per elementi con lo stesso nome di classe
ID
Aggiungiamo al div l'attributo id = "box-immagine":
<div id = "box-immagine"> Testo + immagine </ div>
Il valore dell'attributo class è definito nel file css
# box-immagine {color: blue;}
L'attributo id specifica un ID univoco per un elemento HTML (il valore deve essere univoco all'interno del documento HTML)
SPAN
Il tag <span> è usato per raggruppare elementi inline in un documento
Il tag <span> fornisce un modo per aggiungere un hook a una parte di un testo o una parte di un documento
LISTE & COMMENTI
- <ul>: elenco non ordinato
- <ol>: elenco ordinato
- <li>: elemento della lista
<! -- Questo è un commento -->: i commenti non vengono visualizzati dal browser, ma possono aiutare a documentare il codice sorgente HTML
CSS - Cascading Style Sheets
Il CSS è un linguaggio che descrive lo stile di un documento HTML.
CSS descrive come dovrebbero essere visualizzati gli elementi HTML.
INLINE STYLE SHEET
<p style="color: green;">Green text</p>
Uno CSS all'interno del tag perde molti dei vantaggi di un foglio di stile (mescolando il contenuto con la presentazione). Usa questo metodo con parsimonia.
INTERNAL STYLE SHEET
<html>
<head>
<style>
p { color: green; }
</style>
</head>
<body>
<p>Green text</p>
</body>
</html>Può essere usato se una singola pagina ha uno stile unico
CSS ESTERNO
La scelta migliore
- È possibile modificare lo stile di un documento HTML in modo efficiente e rapido.
- Lo stesso stile può essere utilizzato per molte pagine Web.
- Il codice HTML è pulito e il download dei documenti è più veloce.
CSS ESTERNO
La scelta migliore
<link rel="stylesheet" type="text/css" href="esempio.css">
CSS
LE REGOLE
Selector {
property1 : value1;
property2 : value2;
…
propertyN : valueN;
}
CSS
LE REGOLE
SELECTOR
h1
Css declarations
{
margin-top: 50px;
font-style: italic;
color: red;
}
CSS
LE REGOLE
h1 {
color: #dd5500;
font-family: Arial;
}
p {
margin-top: 50px;
color: blue;
font-style: italic;
}
CSS
LE REGOLE: ID E CLASS
.className {
proprietà1: valore1;
proprietà2: valore2;
…….…
proprietàN: valoreN;
#idName {
proprietà1: valore1;
proprietà2: valore2;
…..…
proprietàN: valoreN;
CSS
LE REGOLE: ID E CLASS
.box-image {
background-color: blue;
width: 200px;
margin-top: 20px; }
#box-image {
background-color: blue;
width: 200px;
margin-top: 20px; }
RISORSE:
HTML - CSS
By Tiziana Mancinelli
