Il World Wide Web Consortium, anche conosciuto come W3C, è un'organizzazione non governativa internazionale che ha come scopo quello di sviluppare tutte le potenzialità del World Wide Web.
Al fine di riuscire nel proprio intento, la principale attività svolta dal W3C consiste nello stabilire standard tecnici per il World Wide Web inerenti sia i linguaggi di markup che i protocolli di comunicazione.
Un metalinguaggio è soltanto un linguaggio che permette di definire altri linguaggi. Uno dei metodi più diffusi è aggiungere dei marcatori al contenuto di un documento, per questo è molto usato per sistemi linguistici.
I linguaggi di markup di tipo procedurale specificano quali sono le procedure di trattamento del testo e indicano le istruzioni da eseguire affinché la porzione di testo referenziata possa essere visualizzata.
I linguaggi di markup di tipo descrittivo lasciano che sia il software a scegliere quale rappresentazione debba essere applicata al testo.
Possiamo dire che i linguaggi di programmazione sono in grado di utilizzare variabili, cicli, funzioni e altre strutture per rendere la programmazione dinamica. Praticamente con i linguaggi di programmazione possiamo inserire della logica all’interno dei nostri programmi.
Prima di iniziare l’analisi dovremmo fare una piccola precisazione, HTML non è un metalinguaggio ma è un linguaggio di marcatura.
In informatica il termine inglese open source (che significa sorgente aperta) viene utilizzato per riferirsi ad un software di cui i detentori dei diritti rendono pubblico il codice sorgente, favorendone il libero studio e permettendo a programmatori indipendenti di apportarvi modifiche ed estensioni. Questa possibilità è regolata tramite l'applicazione di apposite licenze d'uso. Il fenomeno ha tratto grande beneficio da Internet, perché esso permette a programmatori distanti di coordinarsi e lavorare allo stesso progetto.
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: <strong> <em> HTML </em> </strong>
Markup errato: <strong> <em> HTML </em> </ strong>
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>
A cosa serve l'elemento <head>?
<title>:il titolo della pagina (nella barra degli strumenti del browser).
<stile>: definisce le informazioni di stile per un documento (importante!)
<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)
Il tag <meta>
- Codifica di livello 0 o di basso livello. Riguarda la rappresentazione binaria della sequenza ordinata dei caratteri (la codifica dei caratteri, UnicodeUTF8)
- Codifica di alto livello. Arricchisce il testo codificato al livello zero con informazioni di tipo strutturale
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
ATTRIBUTI
<img src=“bertolucci.jpg” alt=“Bertolucci”>
ATTRIBUTI importanti:
- alt: testo alternativo per un'immagine, quando l'immagine non può essere visualizzata
- src: URL (indirizzo web) per un'immagine
Il collegamento ipertestuale
<a>: definisce un collegamento
Attributo
@href: definisce l'indirizzo del collegamento
LISTE & COMMENTI
- <ul>: elenco non ordinato
- <ol>: elenco ordinato
- <li>: elemento della lista
<! -- Questo è un commento -->
<html>
<head>
<title>Esempio</title>
</head>
<body>
<ul>
<li>About</li>
<li>Project</li>
<li>Team</li>
<li>Contatto</li>
</ul>
</body>
</html>LISTE & COMMENTI
- i commenti non vengono visualizzati dal browser, ma possono aiutare a documentare il codice sorgente HTML
<! -- Questo è un commento -->
<html>
<head>
<title>Esempio</title>
</head>
<body>
<!-- menù -->
<ul>
<li>About</li>
<li>Project</li>
<li>Team</li>
<li>Contatto</li>
</ul>
</body>
</html>Il tag DIV egli attributi 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
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.
CLASS
Aggiungiamo al div l'attributo class="header":
<div class="header"> Testo + immagine </ div>
Il valore dell'attributo class è definito nel file css
.header {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
Il valore dell'attributo class è definito nel file css
# header {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
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="prova_1.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
Text
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
.header {
background-color: blue;
width: 200px;
margin-top: 20px; }
#header {
background-color: blue;
width: 200px;
margin-top: 20px; }
RISORSE:
HTML
By Tiziana Mancinelli
