Html 1.0 for dummies

ACCADEMIA BELLE ARTI ROMA a.a. 2013/14

04/#

HTML 1.0, UN’INTRODUZIONE

giovedì 5 giugno 14

html

01/

✦ non un linguaggio di programmazione, ma un linguaggio di marcatura rilasciato da Tim Berners Lee al Cern di Ginevra nel 1991.

✦ un linguaggio che evolve: a partire dal 1991 è (quasi) arrivato alla release .5, quella che è di fatto lo standard per lo sviluppo di pagine web.

✦ l’html è in grado di inglobare altri linguaggi come CSS, Javascript e Jquery, XML, come anche animazioni vettoriali o streaming audio-video.

✦ estensione: .html ; .htm


w3c

02/

il controllore dell’html Il World Wide Web Consortium (W3C) è l’organizzazione non governativa che stabilisce gli standard tecnici del web. La sua missione è “to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web.”

Fondato nel 1994 da Tim Berners Lee al MIT di Boston, ha tra i propri 380 membri organismi nazionali di ricerca, rappresentanti di aziende private e organizzazioni no profit.


tag

03/

✦ Si indica come TAG il comando racchiuso tra < e >. Si tratta di marcatori che formattano il contenuto attribuendo di!erenti specifiche di visualizzazione. ✦ Un tag si apre con < > e si chiude con </> . Es: <p> </p>✦ Il contenuto inserito dentro un tag viene definito elemento.✦ I browser permettono l’interpretazione dei tag, pur lasciando all’utente una certa libertà rispetto alle possibilità di visualizzazione di una pagina web.


tag

04/

✦ Attenzione! Nel campo dell’indicizzazione dei contenuti, il tag è la parola chiave con cui si “etichettano” i contenuti di una pagina per favorire l’indicizzazione sui motori di ricerca.

✦ Questa accezione di tag è quella che si lega al concetto di folksonomia (altresì detto anche “social bookmarking”), con cui si intende la capacità della folla degli utenti web di associare ai contenuti una chiave di ricerca semantica.


programmi di editing

05/

L’html può essere scritto manualmente o attraverso programmi.Ci sono due tipologie di programmi:

✦ Editor testuali: il codice viene scritto attraverso (es. Adobe Dreamweaver)

✦ Editor WYSIWYG (What You See Is What You Get): più accessibili, non impongono di conoscere codice ma fanno assemblare la pagina a partire da elementi visuali precostituiti. Ciò che vedo sullo schermo del mio computer è ciò che vedrò sulla pagina del browser (es. ) .


citazioni

06/

<html> <head> <title>Titolo</title> <meta name="description" content="Hello world example page" /> <meta name="keywords" content="web design" /> </head> <body> <h1>Hello World!</h1> <p>Paragrafo</p> </body></html>

<html> apre il documento html

<head> contiene informazioni come il titolo della pagina, i meta tags, la codifica dei caratteri eccDati non visualizzati dal Browser,ma che vengono presi in considerazione ad esempio dai motori di ricerca

<body> contiene tutto ciò che dovrà apparire sullo schermo


albero del documento

07/

html

body

h1 p

img

head

title


sintassi

08/

✦ I tag possono essere nidificati: <b> testo in bold <i> bold+corsivo </i> bold </b>

✦ E' obbligatorio rispettare la gerarchia delle inclusioni: <b> testo in bold <i> bold+corsivo </b> ... </i> ERRATO

✦ I tag che non prevedono contenuti, chiudono se stessi: Es. <br />, <hr/>, <img src=”image.jpg” />


sintassi

09/

E' buona norma scrivere i tag sempre in minuscolo<html> e non <HTML>

I tag possono contenere attributi:<table width=”300px”>,<p align=”right”> I valori degli attributi vanno sempre racchiusi tra apici “ ”<table border=1> ERRATO


struttura

09/

Un elemento BLOCK-LEVEL (paragrafi, tabelle, il contenitore generale <div>...) definiscono la struttura in blocchi di un documento.Ogni block-level forma un blocco separato, e si dispone in riga con gli altri block level del documento. A sua volta può contenere altri block-level o elementi inline.

Un elemento INLINE (elementi di formattazione) rimane in linea, sulla stessa linea del contenuto. Non può contenere elementi block ma solo inline.


comandi

10/

TITOLI

<h1>titolo 1</h1><h2>titolo 2</h2><h3>titolo 3</h3><h4>titolo 4</h4><h5>titolo 5</h5><h6>titolo 6</h6>


comandi

10/

PARAGRAFI

<p>Lorem ipsum dolor...</p><p>Craas commodo sollicitudin...</p><p>In elementum, tortor</p>

il <p> lascia una riga vuota dopo la chiusura


comandi

10/

A CAPO

<br> (da “break”, interruzione di riga)

SEPARATORE DI SEZIONE<hr>crea una riga nera di separazione tra una sezione e l’altra

il <br> e l’ <hr> non richiedono tag di chiusura, tranne che nell’XML... [<br/> e <hr/>]


comandi

10/

FORMATTAZIONE

<b>testo in grassetto</b> oppure <strong>grassetto</strong><i>testo in corsivo</i> oppure <em>corsivo/enfatizzato</em><u>testo sottolineato</u><strike>testo barrato</strike> (si usa per il testo “cancellato”)


comandi

10/

LISTE NON NUMERATE

<ul> <li>voce 1</li> <li>voce 2</li> <li>voce 3</li> <li>voce 4</li></ul>

LISTE NUMERATE

<ol> <li>voce 1</li> <li>voce 2 <ul> <li>voce 2.1</li> <li>voce 2.2</li> </ul> </li> <li>voce 3</li> <li>voce 4</li></ol>


comandi

10/

TABELLE

<table border=”1” > <tr> <th>Titolo cella 1</th> <th>Titolo cella 2</th> </tr> <tr> <td>riga 1 - cella 1</td> <td>riga 1 - cella 2</td> </tr> <tr> <td>riga 2 - cella 1</td> <td>riga 2 - cella 2</td> </tr></table>


comandi

10/

IMMAGINI

<img src=”../immagini/nome.jpg” width=”300px” alt=”testo alternativo” /> Attributi:src: url dell'immagine, il percorso può essere sia assoluto che relativo

alt: testo alternativo che descrive l'immagine (letto dagli screen-reader)

width - height: modificano le dimensioni a video dell'immagine


comandi

10/LINK

<a href=”www.google.com” title=”vai alla home di google”>testo del link</a>

Attributi:href: url da linkare, può essere una pagina internet, un immagine, un file etc.title: testo descrittivo del link che appare al passaggio del mouse

Può contenere immagini:<a href=”www.google.com” title=”vai alla home di google”> <img src=”google_logo.jpg” alt=”google logo”/></a>


http://www.google.com




Html 1.0 for dummies

Design

Transcript of Html 1.0 for dummies