Sistemi - Lezione XIV - Introduzione a HTML

Sistemi Di Elaborazione Dell’informazione

Dott. Antonio CalanducciLezione XIV: Introduzione a HTML

Corso di Laurea in Scienze della ComunicazioneAnno accademico 2009/2010

wdwdwdwdwdw

A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010

Markup• Il termine markup (=marcatura) deriva dal mondo tipografico:

- marcare con delle annotazioni le parti di testo che vanno evidenziate, formattate, corrette

2

wdwdwdwdwdw


Editor• Nell’ambito dell’elaborazione elettronica dei testi sono stati creati strumenti

informatici per la creazione dei documenti.

• Esistono programmi per l’elaborazione dei testi di tipo diverso:

- Gli editor WYSIWYG (What You See Is What You Get)

- Gli editor che usano il concetto di markup.

• Nel caso di editor che usano il concetto di markup, un testo è costituito da due parti

- Il contenuto vero e proprio.

- Le “istruzioni” che specificano come il contenuto deve essere rappresentato sul dispositivo (lo schermo di un PC, ma anche per esempio una stampante).

• In genere si racchiude il testo fra istruzioni chiamate tag

• I tag sono scritti usando i normali caratteri e quindi i documenti possono essere creati usando semplici editor di testo.

3

wdwdwdwdwdw


Esempi di editor e markup• Microsoft Word, Google Docs: editor WYSIWYG

- quello che si vede su schermo è quello che verrà stampato

- non viene usato un linguaggio a marcatori

- se apriamo con blocco note un file .doc vedremo il formato interno (non human readable)

• File di tipo RTF (Rich Text Format) e PS (PostScript) usano un linguaggio di markup

- sono file di testo: contenuto + istruzioni formattazione/presentazione/stampa

4

wdwdwdwdwdw


HTML• HTML: HyperText Markup Language:

- linguaggio di markup per ipertesti (del Web)

• HTML non è un linguaggio di programmazione

• linguaggio di markup: permette di descrivere la disposizione di tutti gli elementi presenti all’interno di un documento

- file HTML sono in formato testo (leggibili da qualsiasi editor di testo)

- basta salvare il file con estensione .html o .htm

- browser legge un doc HTML, interpreta le specifiche di formattazione e visualizza il documento

5

wdwdwdwdwdw


Primo doc HTML

6

<html><head> <title>Pagina HTML di prova</title></head>

<body>Hello, world!</body></html>

wdwdwdwdwdw


HTML: sintassi- tag di apertura <tag> e tag di chiusura </tag>

<nometag>

istruzioni

.....

</nometag>

• Un doc HTML inizia sempre con il tag <html> e termina con </html>

• HTML è un linguaggio case insentitive:

- <html>, <HTML>, <Html> sono gli stessi

- è consigliabile essere consistenti7

wdwdwdwdwdw


HTML: tag e attributi• <TAG attributi>contenuto</TAG>

• Es:

- <P align="right">testo</P>

• Sintassi completa:

- <TAG attributo_1="valore1" attributo_2="valore2">contenuto</TAG>

• Es:

- <IMG width="20" height="20" src="miaImmagine.gif" alt="alt">

• Non è importante l’ordine con cui si scrivono gli attributi

8

wdwdwdwdwdw


HTML: <head>• head=testa del documento

- contiene il titolo ed i metatag che servono a descrivere il contenuto del documento stesso.

- informazioni in genere non direttamente percepibili, fornisce info su come deve essere interpretato

• Es:

9

<head><title>titolo del documento</title><meta name="keywords" content="parole chiave qui"><meta name="author" content="nome e cognome qui"></head>

wdwdwdwdwdw


Commenti• Quando la dimensione e la complessità delle nostre pagine

Web è fondamentale usare i commenti:

- ricordare perchè sono state fatte delle modifiche

- permettere ad altri dopo di noi di continuare a lavorare sulla stessa pagina

• I commenti sono racchiusi tra

- 

• Esempi:

- 

10

wdwdwdwdwdw


HTML: <body> e attributi• body=corpo

- contenuto vero e proprio del documento

• Attributi principali di body:

- bgcolor="colore sfondo"

- background="nome file con l'immagine"

- text="colore testo"

- link="colore link da visitare"

- vlink="colore link visitato"

- alink="colore link selezionato"11

wdwdwdwdwdw


<body>: esempio

12

<bodybgcolor="red"bgcolor="yellow"bgcolor="#00ffff"text="#eeeeee"link="#ffffff"background="images/sfondo.gif"

>

<body text= “white” link=“#cc0000” background=“images/sabbia.gif>

wdwdwdwdwdw


RGB• Ogni colore può essere codificato mediante tre numeri

compresi tra 0 e 255 che rappresentano le quantità di ROSSO VERDE e BLU presenti nel colore stesso.

• Ogni numero compreso tra 0 e 255 deve essere trasformato nella rappresentazione esadecimale (base 16) corrispondente.

• Con questa codifica si possono rappresentare più di 16,7 (=2^24=2^8*2^8*2^8) milioni di colori diversi.

13

wdwdwdwdwdw


RGB

• nei file HTML le codifiche esadecimali vanno scritte senza lasciare spazi vuoti tra le cifre

• http://xhtml.html.it/guide/lezione/1663/impostare-il-colore-di-sfondo/

14

http://xhtml.html.it/guide/lezione/1663/impostare-il-colore-di-sfondo/




wdwdwdwdwdw


HTML: titoli e paragrafi• <H1>, <H2>,.....<H6>

- H1: titolo di livello 1

- H6: titolo di livello 6

• <P> paragrafo </P>

- Per andare a capo all’interno di un paragrafo si usa il tag line BReak: <BR>

- è un eccezione: non necissita il tag di chiusura

• <DIV>testo</DIV>

- come <P> non lascia spazi prima e dopo il paragrafo

15

wdwdwdwdwdw


HTML: formattazione testo• <B>grassetto</B> (bold)

• <I>corsivo</I> (italic)

• <em>enfatizzato</em> (emphasized)

• <code>codice</code>

• <strong>grassetto</grassetto>

• <font size=”3”> testo </font>

• <font color=“blue”>testo di blue </font>

16

wdwdwdwdwdw


HTML: allineamento testo

<p align=“center”>paragrafo al centro</p>

<p align=“right”>paragrafo a destra</p>

<p align=”left”>paragrafo a sinistra</p>

<p align=“justify”>paragrafo giustificato</p>

<center> testo da centrare </center>

17

wdwdwdwdwdw


HTML: elenchi<ul> e <li> (unordered list) e (list item)

<ul>

<li>primo elemento</li>

<li>secondo elemento</li>

</ul>

<ol> e <li> (ordered list) e (list item)

<ol>

<li>primo elemento</li>

<li>secondo elemento</li>

</ol>

18

wdwdwdwdwdw


HTML: link e ancore• <a>...</a>: ancore

• Link a pagine esterne. Es.:

- <a href=”http://s1stem1.wordpress.com”>blog di sistemi</a>

• Link a pagine sullo stesso server

- <a href=”sistemi2.html”>pagina sistemi2.html</a>

• Link a sezioni nello stessa pagina

- <a href=”#sezione4”>vai alla sezione 4</a>

- <a name=”sezione4”></a> nei punti del doc in cui mettere le “ancore”

19

wdwdwdwdwdw


HTML: <IMG>• Tag per incorporare immagini

<img

src="nome file dell'immagine"

align="left" | "right" | "center"

border="numero"

height="numero"

width="numero"

hspace="numero" (spazio orizzontale)

vspace="numero" (spazio verticale)

alt="testo alternativo all'immagine">

• Ref: http://www.gdesign.it/pages/html/image/imgtag.php

20

wdwdwdwdwdw


HTML: tabella• Per creare una tabella in HTML si usano i tag:

<table> ... </table>

• Per definire una tabella si procede nel modo seguente:

- Ogni riga deve esseri inclusa tra i tag <tr></tr> (table row = riga)

• All’interno di ogni riga, il testo di ogni cella, deve essere incluso tra <td></td> (table data)

- Se si tratta delle celle per la prima riga, per l’intestazione, si usa invece <th></th> (table header)

21

wdwdwdwdwdw


HTML: tabella

22

wdwdwdwdwdw


Esempio di tabella

23

<html><head> <title>Esempio tabella</title></head>

<body bgcolor=“white” text=“green”> <center> Prima tabella <table border=1> <tr> <th>Uno</th> <th>Due</th> </tr> <tr> <td>aaaaaaaaaa</td><td>bbbbbbbb</td> </tr> <tr> <td>ccccccccc</td><td>ddddddddd</td> </tr> </table> </center></body>

wdwdwdwdwdw


Ancora tabelle - attributi<table

width=“larghezza della tabella”

cellpadding=“numero”

- indica la distanza tra il contenuto della cella e il bordo. Se il valore viene indicato con un numero intero, la distanza è espressa in pixel; il cellpadding tuttavia può anche essere espresso in percentuale. Di default la distanza è nulla.

cellspacing=“numero”

- specifica la distanza (in pixel) tra una cella e l’altra, oppure tra una cella e il bordo. Di default è un pixel, dunque occorrerà sempre azzerarlo esplicitamente, quando non lo si desideri.

border=“numero”

- specifica la larghezza dei bordi di una tabella (in pixel).

bgcolor=“colore sfondo tabella”

>24

wdwdwdwdwdw


Attributi celle<td (th)

width=“dimensione della cella”

colspan=“numero”

rowspan=“numero”

bgcolor=“colore sfondo cella”

align=”right” | ”left” | ”center”

valign=“top” | “bottom” | “middle”

nowrap (non manda mai a capo il testo di una cella)

>

Es: http://www.html.it/guide/esempi/guida_html/tabelle/tabelle6.html25

wdwdwdwdwdw


Riferimenti• HTML

- http://xhtml.html.it/guide/leggi/51/guida-html/

- http://www.gdesign.it/pages/html/html.php

- http://www.w3schools.com/tags/default.asp

26

http://www.gdesign.it/pages/html/html.php

http://www.gdesign.it/pages/html/html.php

http://www.w3schools.com/tags/default.asp

http://www.w3schools.com/tags/default.asp

Sistemi - Lezione XIV - Introduzione a HTML

Technology

Transcript of Sistemi - Lezione XIV - Introduzione a HTML