HTML & MARKUP LANGUAGES - Zurich · nella pagina e sui contenitori logici che la compongono. ... •Blocchi contenitore - div BODY. LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS

LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 1

HTML & MARKUP LANGUAGES


HTML DEVELOPMENT

Primi anni ‘90: Tim Berners-Lee sviluppò la prima versione dell’HTML al CERN di Ginevra (Svizzera), assieme al protocollo HTTP dedicato al trasferimento di documenti in tale formato.

Nel 1993 fu resa pubblica la prima versione dell’HTML, firmata inseme a Daniel Connolly.


STANDARD WEB

“…a set of standardized best practices for building web sites,

and a philosophy of web design and development that includes those methods.”

from Wikipedia


STANDARD WEB

Quali sono le tecnologie per un design conforme agli standard?

• HTML / XHTML for semantic markup of content

• Cascading Stylesheets (CSS) for the presentation of content

• JavaScript for functionality related to content


STANDARD UFFICIALI (MA ANACRONISTICI!)

• Risoluzione minima schermo: 1024 px di larghezza (quindi grid 960)

• Formato immagini: jpeg / png / gif• CSS2 + xhtml • PHP • Controllare la validazione• Dimensioni della home page (qualche kb al massimo)• Testi 12px di altezza• Colori fra i 216 web safe


STANDARD DI FATTO

• Risoluzione minima schermo: 960px / 1170 px di larghezza• Formato immagini: jpeg / png / gif / svg / webP• CSS3 + xhtml / html5• PHP • Controllare la validazione• Dimensioni della home page (qualche kb al massimo)• Testi 12px di altezza• Colori fra i 65000 (la tavolozza web safe non è piu rilevante)


HTML è l’acronimo di HyperText Markup Language

(Linguaggio di Marcatura di Ipertesti)

XHTML è l’acronimo di eXtensible HyperText Markup Language

Un file XHTML è una pagina HTML scritta in conformità con lo standard XML

DEFINIZIONE DI HTML


DEFINIZIONE DI HYPERTEXT - IPERTESTO

In informatica, l’ipertesto è insieme non lineare di documenti con informazioni di varia natura (testi, immagini, audio, filmati), collegati l’uno all’altro per mezzo di connessioni logiche e rimandi (link) che consentono all’utente di costruirsi di volta in volta un autonomo percorso di lettura.


MARKUP - MARCATURA

Il termine markup (o marcatura) deriva dall’ambiente tipografico dove si usava marcare con annotazioni le parti del testo che andavano evidenziate, corrette o editate in maniera particolare (corsivi, grassetti, ecc.) allo scopo di segnalarle al compositore o al dattilografo.


MARKUP LANGUAGE

La tecnica di composizione di un testo con l’uso di marcatori (o espressioni codificate) richiede una serie di convenzioni, ovvero di un linguaggio a marcatori di documenti.

In generale un linguaggio di markup descrive i meccanismi di rappresentazione (strutturali, semantici o presentazionali) del testo che, utilizzando convenzioni standardizzate, sono utilizzabili su più supporti.



LA SINTASSI DELL’HTML

L’HTML è il linguaggio con cui potete scrivere una pagina Web e quindi ha una sua “grammatica”.

Un documento html non è nient’altro infatti che un file di testo con delle indicazioni/marcature sui contenuti presenti nella pagina e sui contenitori logici che la compongono.

Le marcature vengono chiamate TAG:

• Hanno il compito di visualizzare le diverse parti di una pagina web.

• Hanno differenti nomi a seconda della loro funzione.


I tag vanno inseriti tra parentesi uncinate (<TAG>)

La chiusura del tag viene indicata con una “/” (Quindi: </TAG>).

Il contenuto va inserito tra l’apertura e la chiusura del tag medesimo, secondo questa forma:

<TAG attributi> contenuto </TAG>


Principali Tag di contenuto:

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, hr, table, img

Principali Tag di struttura:

html, body, div (html)

section, header, footer, article (nuovi tag html5)

CONTENUTI VS STRUTTURA


EMPTY TAGS

Alcuni particolari tag non hanno contenuto - perché ad esempio indicano la posizione di alcuni elementi (come il tag delle immagini o l’interruzione di linea) - conseguentemente questi tag non hanno neanche un tag di chiusura.

Se scriviamo il codice secondo lo standard XHTML il tag avrà una chiusura immediata al suo interno, mentre secondo lo standard HTML5 la chiusura interna non è necessaria.

La loro forma sarà dunque /XHTML vs HTML)

<TAG /> o <TAG attributi /> oppure <TAG> o <TAG attributi>

Ecco un esempio di immagine:

<img alt=”alt” /> oppure <img alt="alt">


Alucni esempi:

<br/> per inserire un’interruzione di linea

<hr/> per inserire un cambiamento tematico all’interno della pagina che viene visualizzato come una linea orizzontale

In alcuni empty tag sono molto importanti gli attributi:

<img src=”picture.jpg” alt= “This is my picture” /> per inserire un’immagine


COMMENTARE IL CODICE

È possibile inserire delle indicazioni significative per il developer, ma invisibili al browser.

Inserendo i commenti in punti specifici del documento ci permette di mantenere l’orientamento anche in file molto complessi e lunghi.

La sintassi di un commento è la seguente




STRUTTURA DI UNA PAGINA BASE

Una pagina base HTML è suddivisa solitamente in tre sezioni:

Specifiche iniziali

Inizio codice

Testata - Fine testata

Corpo - Fine corpo

Fine codice



INDENTAZIONE


Doctype specifica il tipo di documento. È la prima riga da inserire.

DOCTYPE XHTML<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 //IT">

• HTML: il tipo di linguaggio utilizzato è l'HTML• PUBLIC: il documento è pubblico• W3C: il documento fa riferimento alle specifiche rilasciate dal W3C• XHTML 1.0 Transitional: il documento fa riferimento a una DTD ("Document Type Definition" cioè "Definizione del tipo di documento");

DOCTYPE HTML5<!DOCTYPE HTML>

SPECIFICHE INIZIALI: DOCTYPE


Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato.

Questo è il luogo dove scrivere

• titolo e altri meta-tag (alcuni a esclusivo beneficio dei motori di ricerca)

• script (JavaScript)

• fogli di stile (css)

HEAD


<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” />Indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese).

CHARSET HTML5

<meta charset=”UTF-8”>

HEAD / META-TAG: CHARSET


Sintassi:

<title>Titolo di pagina max 60 caratteri</title>

Inserisce un titolo della pagina web, che compare nella parte alta della finestra del browser.

È un meta-tag, poiche compare nella parte dell’head di pagina e non è un tag di contenuto.

Molto importante per l’indicizzazione delle pagine sui motori di ricerca.

HEAD / META-TAG: <TITLE> / TITOLO DI PAGINA


Sintassi:

<meta name=”description” content=”descrizione massimo 120 caratteri”>

Inserisce una descrizione sommaria della pagina web.

Molto importante per l’indicizzazione delle pagine sui motori di ricerca.

HEAD / META-TAG <META NAME “DESCRIPTION”>


Sintassi:

<meta name=”keywords” content=”Comunicazione visiva, HTML, CSS, corso, Bicocca”>

Inserisce una serie di parole chiave della pagina web divise tra di loro da una virgola.

Serve come indicazione per l’indicizzazione delle pagine sui motori di ricerca.

HEAD / META-TAG <META NAME “KEYWORDS”>


Qui è racchiuso il contenuto vero e proprio del documento che viene visualizzato dal browser. Il contenuto della pagina verrà strutturato a seconda dei tag utilizzati:• Titoli - h1 e Sottotitoli - h2, h3, h4, h5, h6• Testi - p• Elenchi - ul-ol-li• Immagini - img• Link - a• Tabelle - table• Blocchi contenitore - div

BODY


Sintassi:

<h1>titolo</h1>

<h2>titolo</h2>

....

<h6>titolo</h6>

Inserisce un titolo. Semanticamente il tag H1 è il più rilevante per il posizionamento online, in accoppiata con il tag H2, generalmente chiamato “sottotitolo”.

TAG <H1> - <H6> : TITOLI DI PAGINA


Sintassi: <p>paragrafo di testo</p>

Inserisce un paragrafo di testo continuo e terminando il paragrafo stesso con una spaziatura finale di fine paragrafo (impostazione di default del browser).

TAG <P> : PARAGRAFI


Così come un libro si costituisce di un solo titolo principale, di alcuni sottotitoli di vario livello e di diversi paragrafi...

...anche la nostra pagina web dovra essere strutturata con:

un solo titolo per contenuto (h1)

dei sottotitoli (h2,h3, ecc.)

e più paragrafi (p).

STRUTTURAZIONE DEI CONTENUTI DELLA PAGINA


Inserisce un “a capo” nel testo senza introdurre interline e spaziate nel testo, come avviene spezzando con due tag <p> contigui (interruzione di riga).

Questo tag, non avendo contenuti, si apre e si chiude direttamente.

Sintassi: <br/> (xhtml) o <br> (html)

TAG <BR> : BREAK RULE


Inserisce una linea orizzontale e definisce un cambio di argomento nella pagina.

Sintassi: <hr/> (xhtml) o <hr> (html)

TAG <HR> : HORIZONTAL RULE


Esistono due tipi di elenchi:• Elenchi ordinati• Elenchi non ordinati

Sintassi

<elenco> <elemento>nome del primo elemento <elemento>nome del secondo elemento ………. ……</elenco>

GLI ELENCHI


Descrive una lista di oggetti (parole, immagini, link...) non ordinata, ovvero senza numerazione progessiva. Viene spesso utilizzato per creare dei menu.

• primo elemento• secondo elemento• ...

Sintassi

<ul><li>primo elemento </li><li>secondo elemento </li>……</ul>

TAG <UL> : UNORDERED LIST


Descrive una lista di oggetti (parole, immagini, link...) ordinata, ovvero con numerazione progessiva

1. primo elemento2. secondo elemento3. ...

Sintassi

<ol><li>primo elemento </li><li>secondo elemento </li>……</ol>

TAG <OL> : ORDERED LIST


Descrive un oggetto entro una lista.

Il tag LI non puo esistere senza un progenitore di lista (lista non ordinata o lista ordinata)

Sintassi

<li> oggetto in lista </li>

TAG <LI> : LIST ITEM


Gli elenchi possono essere nidificati all’interno di un altro elenco.

Sintassi

<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li></ul>

ELENCHI NIDIFICATI

Documents

HTML & MARKUP LANGUAGES - Zurich · nella pagina e sui contenitori logici che la compongono. ... •Blocchi contenitore - div BODY. LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS