sistemi - lezione xiv - introduzione a html
DESCRIPTION
TRANSCRIPT
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
Primo doc HTML
6
<html><head> <title>Pagina HTML di prova</title></head>
<body>Hello, world!</body></html>
wdwdwdwdwdw
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
- <!-- e -->
• Esempi:
- <!-- menu di sinistra --><!-- barra in alto --><!-- eccetera -->
10
wdwdwdwdwdw
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
<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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
wdwdwdwdwdw
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
HTML: tabella
22
wdwdwdwdwdw
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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
A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010
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