Introduzione al linguaggio HTML Bibliografia: Arena - Borchia Linguaggi del Web – Petrini Editore ...

Introduzione al linguaggio HTML

Bibliografia: Arena - Borchia Linguaggi del Web – Petrini Editore http://www.html.it

• introduzione

• tag head

• tag body

•link

• testo

• immagini

• elenchi

• tabelle

INDICE

http://www.html.it/

Note introduttive

HTML è l'acronimo di Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti") e non è un linguaggio di programmazione.

Si tratta invece di un linguaggio di marcatura (o di ‘formazione pagina'),

che permette di indicare come disporre gli elementi all'interno di una pagina:

le indicazioni vengono date attraverso degli appositi marcatori, detti "tag".

Ciò significa che l'HTML non ha meccanismi che consentono di prendere delle decisioni, e non è in grado di compiere delle iterazioni ("ripeti questa cosa, finché non succede questo"), né ha altri costrutti propri della programmazione.

L’editor HTML

L’editor più comune è un qualsiasi editor di testo, ad esempio “Blocco note”. Dopo aver creato il codice Html, salvare il file (o rinominarlo) utilizzando come estensione .htm oppure .html.

Esistono in commercio editor visuali del tipo WYSWIG (What you See is What You Get), cioè programmi che permettono di inserire graficamente, come se lavoraste in word, gli elementi delle pagine (ad esempio FrontPage o DreamWeawer).

Gli editor visuali di tipo WYSWIG hanno vantaggi a livello di produttività, ma non permettono la flessibilità e pienezza di controllo che si ottiene con la scrittura del codice.

I TAG

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

la chiusura del tag viene indicata con una "/" (è il simbolo comunemente detto "slash". Quindi: </TAG>).

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

<TAG attributi>contenuto</TAG>

I tag: <html> <head> >body>

<html>

</html>

Testa del documento

<head>

</head>

Corpo del documento

<body>

</body>

<HEAD>

La sezione Head non verrà visualizzata all’utente, tranne il tag <Title> che contiene il titolo della pagina:

<html><head> <title>pagina web di prova </title></head></html>

I tag: <html> <head> >body>

<html>

</html>

Testa del documento

<head>

</head>

Corpo del documento

<body>

</body>

Body

Questo tag introduce il browser nella sezione della pagina corrispondente alle informazioni mostrate a video.

All’interno di questo marcatore, è possibile (a volte indispensabile) inserire una serie di attributi, con i rispettivi valori, per istruire il browser su come visualizzare alcuni particolari della pagina.

Le istruzioni principali riguardano il colore o l’immagine di sfondo, il colore del testo, il colore dei link.... ed altro

I commenti

Un’altra strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei "commenti" nei punti più significativi: si tratta di indicazioni significative per il webmaster, 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 è la seguente:

Tag utilizzati per i caratteri della pagina

<I> Testo Corsivo </I>

evidenziazione in corsivo

<B> Testo Grassetto</B>

evidenziazione in grassetto

<U> Testo Sottolineato</U>

testo sottolineato

<CENTER> Testo centrato</CENTER>

testo o paragrafo centrato

<Hn> Dimensione carattere </Hn>

dimensione dei caratteri - n da 1 a 6. n=1 grande n=6 piccolo

Esempio grandezza caratteri

<html><head> <title>

<b> esempio grandezza caratteri</b> </title></head><body>

<H1> prova testo H1 </h1> <H2> prova testo H2 </h2>

<h3> prova testo H3 </h3> <h4> prova TESTO h4 </H4><H5> prova testo H5 </h5>

<h6> prova testo H6 </h6> </BODY></HTML>

Tag singoli

<BR> ritorno a capo

<HR> linea orizzontale

colore parola chiave notazione esadecimale

arancione orange #FFA500

blu blue #0000FF

bianco white #FFFFFF

giallo yellow #FFFF00

grigio gray #808080

marrone brown #A52A2A

nero black #000000

rosso red #FF0000

verde green #008000

viola violet #EE82EE

Lo standard HTLM 4.0 specifica la possibilità di indicare i colori fondamentali anche con una stringa di testo.

esempio: body bgcolor=orange

text=“#FFFFFF”

Link=“#0000FF”

vlink=“#FFFFFF”

alink=“#0000FF”

topmargin=“2”

leftmargin=“2”

rightmargin=“3”

Bottommargin=“5”

bgcolor=“#000000”

Background=“nomefile.gif”

Principali Attributi del tag body

colore del testo;

colore del link;

colore del link visitato;

colore del link attivo;

margine vuoto superiore espresso in pixel;

margine vuoto sinistro espresso in pixel;

margine vuoto destro espresso in pixel;

margine vuoto inferiore espresso in pixel;

colore di sfondo;

immagine di sfondo;

Attributo Background

Background annulla l’impostazione di bgcolor, ma si inseriscono entrambi poiché, se l’immagine di sfondo non venisse caricata, comunque verrebbe fissato un colore compatibile con il resto della grafica.

Background può usufruire di un ulteriore attributo utile a bloccare l’immagine selezionata per lo sfondo, durante lo scorrimento della pagina; l’istruzione bgproperties=“fixed”

<body background=“immagine.gif” bgproperties=“fixed”>

Testo

<p>paragrafo </p>

Esempio:<p>paragrafo 1</p><p>paragrafo 2</p>

paragrafo 1

paragrafo 2

Il paragrafo è l’unità di base entro cui suddividere un testo.

Il tag <P> lascia una riga vuota prima della sua apertura e dopo la sua chiusura.

<div>Blocco di Testo</div>

Esempio:<div>blocco 1</div><div>blocco 2</div>

blocco 1blocco 2

Il blocco di testo va a capo, ma

a differenza del paragrafo

non lascia spazi prima e dopo la sua apertura.

Allineamento testoTipo di

allineamentoSintassi codice HTML

Testo allineato a sinistra <p align="left">testo</p>

<p align="left">Nel mezzo del cammin dinostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita</p>

Testo allineato a destra <p align="right">testo</p>

<p align="right">Nel mezzo del cammin dinostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita</p>

Testo giustificato <p align="justify">testo</p>

<p aling=“center”>Testo</p>

<p align="justify">Nel mezzo del cammin dinostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita</p>

I link

Le ancore dette più comunemente link sono fondamentalmente il cuore della pagina, grazie a questi collegamenti è possibile spostarsi da una pagina all’altra, da un sito all’altro, da un server all’altro.

Il tag <a> con attributo “href=“ Esempi:<a href=http://www.altervista.com>Altavista il motore di ricerca</a>

Altavista il motore di ricerca<a href=http://www.altervista.com>Altavista il motore di ricerca

target=_blank</a>

L’attributo target serve per fare caricare la pagina linkata nella stessa finestra (_top) oppure in una nuova finestra (_blank)

Come riferimenti inoltre, è possibile usare valori come: <a href=mailto:........> effettua una spedizione all’indirizzo specificato esempio: <A HREF="mailto:[email protected]"> <a href=”nome_file.zip”> .... Permette di creare un collegamento di

download di file ad esempio .exe, .zip, .mp3

mailto:........

mailto:........

Esempio

<html>

<head>

<title>Il sito della 5°C</Title>

</head>

<body bgcolor=#ffffff” topmargin=“2” bottommargin=“5” leftmargin=“3” rightmargin=“3” link=“0000ff” vlink=“fuchsia”>

<p>benvenuti</p>

<a href=http://gifanimate.html.it>GUIDA HTML</a>

</body>

</html>

Caratteri speciali

&nbps; “no breaking space”<p>Spazio normale</p> Spazio normale<p>Spazio&nbps; doppio</p> Spazio doppio<p>Spazio&nbps;&nbps triplo</p> Spazio triplo " “ < < > > € € è è & & £ £

Scegliere il font del testo

Per scegliere il tipo di carattere con cui un font deve essere visualizzato è sufficiente usare la sintassi:

<font face="Arial">testo in Arial</font>

E’ bene tener conto di due accorgimenti:scegliere caratteri "sicuri" , che siano cioè senz’altro presenti sul pc dell’utente; non indicare un solo carattere, ma una serie di caratteri che gradualmente si allontanano dal risultato che vorremmo ottenere, ma non di molto, fino ad indicare la famiglia a cui il nostra carattere appartiene. In questo modo il browser dell’utente cercherà di trovare nella propria cartella dei fonts il primo carattere indicato, se non lo trova passerà al secondo, e solo come ultima spiaggia sceglierà si utilizzare il carattere predefinito (il famigerato "Times")

<font face="Verdana, Arial, Helvetica, sans-serif"> Verdana e caratteri simili</font><br>

Colore e dimensione del testo

Adesso che abbiamo scelto il carattere con cui scrivere il nostro testo possiamo scegliere il colore, con la sintassi:

<font color="blue">testo blu</font>

ovvero:

<font color="#0000FF">testo blu</font>testo blu

Le dimensioni del testo si attribuisco mediante l’attributo "size" del tag font.

<font size="1">testo di grandezza 1</font><br>

Riassumendo il tag font può assumere il seguente formato:

<p align=“center”><font size=“4” color=“#FF0000” face=“Comic Sans MS”>Benvenuti sul mio sito</font></p>

Le immaginiLe regole da rispettare nell’uso di immagini per il web: non inserire immagini troppo grosse e pesanti; Non inserirne troppe nella stessa pagina; Usare formati compressi, ovvero .jpg, .gif e png

Per inserire le immagini il tag è <img>Gli attributi principali del tag <img> sono:<src> -> indica la posizione esatta dell’immagine (source)<alt> -> rappresenta un testo alternativo<widht> -> indica la dimensione dell’immagine in larghezza in pixel<height> -> indica la dimensione dell’immagine in altezza in pixel<align> -> indica la posizione dell’immagine nella pagina rispetto al testoI valori sono: left, right, center, top, bottom, middleBorder -> per inserire una cornice all’immagine assegnando lo spessore del bordo in

pixel; il valore 0 indica assenza del bordo

Esempio: <p align=“center”><img src=“pubblicita.jpg” alt=“testo alternativo” widht=“120” height=“60” border=0></p>

Esempio<HTML><HEAD><TITLE> La mia prima pagina con gif animata HTM</TITLE></HEAD>< Body text=red bgcolor="#0bccee" ><IMG SRC="ca106.gif" align=left><bR><IMG SRC="ca106.gif" align=right><bR><br><hr><Center><H1> Prova immagine <u>Gif animata</u></H1><br></center><p align ="justify"> È importante assegnare sempre un colore alla pagina

anche quando lo sfondo della pagina è bianco (al massimo assegnare bgcolor="#FFFFFF"). Infatti, come impostazione predefinita, il browser assegna alla pagina il colore di sfondo che l’utente ha impostato nella finestra del sistema operativo:<font color = blue size=3> quindi se l’utente ha impostato uno sfondo nero e voi non avete assegnato nessun colore di sfondo alla pagina</font>, la vostra pagina sarà nera.</p>

<p align="left">testo a sinistra</p><p align="right">testo a destra</p><p align="center">Nel mezzo del cammin dinostra vita mi ritrovai per una selva oscura ché la diritta via era

smarrita</p>ciao<A HREF="prova2.htm"> <img align="right" SRC="goccia.jpg" width="50"

height="50"> </A></body></html>

http://it.geocities.com/marina60_2003/esempio1/prova1html.html

Gli elenchi - Liste non ordinate <ul> <li>

5T

4T

3T

3I

Per realizzare l’elenco occorre aver inserito il seguente codice HTML

<html>

<body>

<ul type=“square”>

<li>5T </li>

<li>4T </li>

<li>3T </li>

<li>3I </li>

</ul>

</body>

</html>

type=“square” è l’attributo che permette di scegliere il punto elenco come nell’esempio

Type=“circle” (pallino nero) è il simbolo di default

Gli elenchi - Liste ordinate <ol> <li>

1. Gennaio

2. Febbraio

3. Marzo

4. Aprile

5. Maggio

Per realizzare l’elenco occorre aver inserito il seguente codice HTML

<html>

<body>

<ol type=“1”>

<li>Gennaio </li>

<li>Febbraio </li>

<li>Marzo </li>

<li>Aprile</li>

<li>Maggio </li>

</ol>

</body>

</html>

type=“1” (numeri arabi ) è il simbolo di default

type="a“ alfabeto minuscolo

type=“A“ alfabeto maiuscolo

type=“i“ numeri romani minuscoli

type=“I“ numeri romani maiscoli

Esempio di elenchi annidati

Combinando tra loro i due tipi di marcatori per gli elenchi è possibile costruirne versioni annidate

Esempio:• primo della 1a lista • secondo della 1a lista

a. primo della 2a lista b. secondo della 2a lista

• terzo della 1a lista

<ul>

<li>primo della 1a lista </li>

<li>secondo della 1a lista </li> <ol type =“a”>

<li>primo della 2a lista </li><li>secondo della 2a lista </li>

</ol>

<li>terzo della 1a lista </li>

</ul>

Le Tabelle

Tag per creare una tabella <table> che si chiude con </table>

Esempio:

Contenuto della Tabella

<table border=“2” width=“400”>

<tr>

<td>Contenuto della Tabella</td>

</tr>

</table><table> apre la tabella

Due attributi del tag table:border=“2” indicare lo spessore del bordo ; se =0 tabella senza bordowidth=“400” indica lo spazio occupato dalla tabella in orizzontale

<tr>“table row”: indica l’apertura di una riga

<td>“table data”: indica una cella all’interno di una riga

Esempio di tabella con più righe

Prima riga <table border=“2” width=“400”>

<tr>

<td>Prima riga</td>

</tr><tr><td>Seconda riga</td></tr><tr><td>Terza riga</td></tr>

</table>

Le Tabelle

Seconda riga

Terza riga

Esempio di tabella con più colonne

Prima cella

<table border=“2” width=“100%”>

<tr>

<td width=“15%”>Prima cella</td>

<td width=“35%”>Seconda cella</td>

<td width=“50%”>Terza cella</td>

</tr>

</table>

Le Tabelle

Seconda cella Terza cella

Come si nota in questo esempio si può inserire la dimensione in termini percentuali

Esempio di tabella con più righe e colonne

Snx alta


<tr>

<td>Snx alta</td>

<td>Mezzo alta</td>

<td>Dx alta</td>

</tr><tr height=“80”><td>Snx bassa</td><td>Mezzo bassa</td><td>Dx bassa</td></tr>

</table>

Le Tabelle

Snx bassa

Mezzo altoMezza bassa

Dx alta

Dx bassa

Esempio Piramide

Attributo rowspan applicabile alla cella e quindi inserito nel tag <td>

Cella che occupa due righe


<tr>

<td rowspan=“2”>Cella che occupa 2 Righe</td>

<td>DX alta</td>

</tr><tr><td>Dx bassa</td></tr>

</table>

Le Tabelle

Dx alta

Dx bassa

Si utilizza per raggruppare più righe di una cella

Attributo Colspan applicabile alla cella e quindi inserito nel tag <td>

Cella che occupa due colonne


<tr>

<td >Snx alta</td>

<td>DX alta</td>

</tr><tr><td colspan=“2”>cella che occupa 2 colonne</td></tr>

</table>

Le Tabelle

Snx alta Dx alta

Si utilizza per raggruppare più colonne di una cella

Riga di intestazione tabella

Il marcatore <th> indica table header, ovvero intestazione di tabella. Permette di definire una prima riga automaticamente centrata e in grassetto.

Esempio: <table border="2"> <th colspan=3>Cella Testata</th> <tr><td>prima cella</td><td>seconda cella</td><td>terza cella</td></tr></table>

Cella Testata

Prima cella Seconda cella Terza cella

Esercizi Realizzare la seguente tabella inserendo contenuti sia di testo che immagine utilizzando il tag <th> per la testata

Pagina web con vari elementi

Frame

<html>

<frameset cols=“20%,80%”>

<frame src=“indice.htm” name=sinistra”>

<frame src=“einstein.htm” name=destra>

</frameset>

</html>

20% 80%

Frame

<html>

<frameset rows=“20%,80%”>

<frame src=“indice.htm” name=sinistra”>

<frame src=“einstein.htm” name=destra>

</frameset>

</html>

Frame

<frameset cols="30%,70%"> <Frame name="menu" src="elenco.htm"> <frameset rows="65%,45%"> <Frame name="principale" src="tabella.htm"> <Frame name="prova" Src="prova2.htm"> </frameset></frameset>

IpertestoProgettazione Documentazione

Home

Hobby Autore.........

DescrizioneBreve

Strutture Html Link Note descrittive

Home Frame(due elementi:Indice descrizione

HobbyAutore

......

Argomento trattato dalla pagina

Indice Contenuto in home(elenco puntato)

....... ..........

Autore Tabella & Immagine Home Dati personali:Data di nascita – età – residenza – indirizzo e-mail

....... .......... .... ........

Introduzione al linguaggio HTML Bibliografia: Arena - Borchia Linguaggi del Web – Petrini Editore ...

Documents

Transcript of Introduzione al linguaggio HTML Bibliografia: Arena - Borchia Linguaggi del Web – Petrini Editore ...