Esempi HTML

Ciao a tutti,ora provate voi è semplicissimo.

Per fare una scritta scorrevole con HTML è semplicissimo,al comando <marquee> aggiungete il vostro messaggio e poi chiudete il comando così</marquee>

Quindi per esemplificare meglio il testo che scorre qui sopra è stato prodotto con la seguente sintassi :

<marquee>Ciao a tutti,è semplicissimo,ora provate voi.</marquee>

Semplice ma efficace per l'effetto scorrevole con impatto visivo empatico

i colori li ho messi per vostra comodità.

in fondo a questa pagina trovate gli esempi di sintassi <marquee>

Provate a fare l'esercizio sottostante chiudendo con i marcatori " <" ">" senza le virgolette,almeno in questo caso specifico,quelle si usano per altro,quindi ricordate sempre di utilizzare i marcatori di cui sopra sempre per scrivere HTML usando un semplice foglio di testo del blocco note di windows e salvare non con .doc o .text ma con .html o .htm,poi a seconda di quale browser usate vi appare immediatamente dopo il salvataggio in formato HTML o HTM l'icona sul desktop e con un doppio click potete controllare il vostro lavoro

con questa sintassi:

<html>
<head><title>La mia prima pagina web</title><head>
<body bgcolor="pink">
<center>
<h1>Benvenuti nella mia homepage</h1>
</center>
<font face="verdana" size="2">
<b>Il mio nome è Bruno Crimella</b>
<br><br>
i miei siti preferiti sono:
<ul>
<li>www.istruzione.it
<li>www.leopardi.it
<li>www.rai.it
</ul>
</font>
Per contattarmi: <i>bruno.crimella@fastwebnet.it</i>
</body>
</html>

Il comando per colorare a vostro piacimento e gusto il testo di una pagina web è il seguente che vedete qui:

<p>
<font color="blue" size="2" face="Verdana">
Testo da visualizzare
</font>
</p>

Tabelle

<table border="0" cellspacing="0" cellpadding="3">
<tbody>
<tr>
<td><strong>Nome</strong></td>
<td><strong>Cognome</strong></td>
<td><strong>Telefono</strong></td>
</tr>
<tr>
<td>Maria</td>
<td>Rossi</td>
<td>12345-12345</td>
</tr>
<tr>
<td>Pippo</td>
<td>Verdi</td>
<td>0123-12345</td>
</tr>
</tbody>
</table>

Nome	Cognome	Telefono
Maria	Rossi	12345-12345
Pippo	Verdi	0123-12345

Oppure provate a salvare con HTML o HTM questa sintassi di esempio tabella

<table border="1">
    <thead>
        <th>Nome</th>
        <th>Cognome</th>
    <thead>
    <tbody>
        <tr>
            <td>Giuseppe</td>
            <td>Verdi</td>
        </tr>
        <tr>
            <td>Antonio</td>
            <td>Bianchi</td>
        </tr>
        <tr>
            <td>Mario</td>
            <td>Rossi</td>
        </tr>
    </tbody>
    <tfoot>
        <td colspan="2">Tabella degli utenti</td>
    <tfoot>
</table>

Nome	Cognome
Giuseppe	Verdi
Antonio	Bianchi
Mario	Rossi
Tabella degli utenti

Questo è il vostro risultato di tabella con bordi evidenziati in rilievo.

La linea che separa la tabella sopra che vedete è composta da questo comando

<HR WIDTH=300 SIZE=5>

La linea sopra è composta dalla seguente sintassi:

<HR WIDTH=500 SIZE=5 COLOR=RED>

Quest'altra linea di separazione ha la sintassi

<HR WIDTH=500 SIZE=8 >

Primo esempio di pagina Web

Se vuoi chiarimenti, mandami una mail

Per realizzare quest'altro esempio il codice da implementare sarà il seguente

<html>
<head><title>Primo esempio di pagina Web</title></head>
<body>
<hr>
<h1>Primo esempio di pagina Web</h1><br>
<a href="mailto:bruno.crimella@fastwebnet.it">Se vuoi chiarimenti, mandami una mail</a>
</body>
</html>

L'elemento <HR> permette di introdurre una linea separatrice tra i paragrafi lunga quanto la larghezza della finestra del browser. Si noti che tale linea, a differenza di altri oggetti che possono essere introdotti come separatori tra sezioni (ad esempio, piccole immagini), è di gomma, nel senso che si allarga o si stringe al modificarsi delle dimensioni della finestra stessa. Si tartta comunque di un'istruzione "secca" che non richiede tag di chiusura.

E' possibile comunque utilizzare delle istruzioni specifiche nei tag HR se vogliamo che le nostre righe, abbiamo a video, un aspetto predefinito. Alcuni attributi applicabili sono:

size="n", dove n indica lo spessore della riga;
noshade, che serve ad eliminare l'effetto "ombra" della linea;
width="n% |n", che regola la larghezza della riga, sia in percentuale, relativamente alla larghezza dello schermo, sia in assoluto, in pixel;
align="left | center | right", per allineare la riga rispettivamente a sinistra al centro e a destra (gli effetti di questo attributo, ovviamente, sono visibili solo se la linea ha una larghezza inferiore al 100% dello schermo)

esempi:

<HR size="n">
<HR size="10">

<HR noshade>
<HR noshade>

<HR width="n% | n">(Come potete notare, se non viene inserito alcun attributo di allineamento, la riga inserita, per default viene visualizzata al centro)
<HR width="50">
<HR width="50%">

<HR align="left | center | right">
<HR width="50%" align="left">
<HR width=50% align=rigth>

Marquee Basic

Basic <marquee> ... </marquee>

<marquee>guarda! guarda! cosa si può fare </marquee>

guarda! guarda! cosa si può fare

scorrimento di una scritta da dx verso sx (default)

Attributi di scroll

Direzione <direction=#> #=left, right

<marquee direction=left>guarda! guarda! cosa si può fare </marquee> <P> <marquee direction=right>guarda! guarda! cosa si può fare </marquee>

guarda! guarda! cosa si può fare

Behavior <behavior=#> #=scroll, slide, alternate

<marquee behavior=scroll>guarda! guarda! cosa si può fare </marquee> <P> <marquee behavior=slide>guarda! guarda! cosa si può fare </marquee> <P> <marquee behavior=alternate>guarda! guarda! cosa si può fare </marquee>

guarda! guarda! cosa si può fare

velocita' di Scroll <scrollamount=#>

<marquee scrollamount=20>guarda! guarda! cosa si può fare!</marquee>

guarda! guarda! cosa si può fare!

Ritardo di Scroll <scrolldelay=#>

<marquee scrolldelay=500>guarda! guarda! cosa si può fare!</marquee>

guarda! guarda! cosa si può fare!

Marquee Layout

Align <align=#> #=top, middle, bottom

<font size=6> <marquee align=# width=200>bye bye!</marquee> </font> Ti saluto

bye bye! Ti saluto.

Background Color <bgcolor=#> #=rrggbb or name

<marquee bgcolor=aaaaee>guarda! guarda! cosa si può fare!</marquee>

guarda! guarda! cosa si può fare!

Size <height=# width=#>

<marquee height=40 width=50% bgcolor=aaeeaa> Bye Bye! </marquee>

Bye Bye!

Margins <hspace=# vspace=#>

********************************************<br> Bye, <marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>Bye dal Giappone!</marquee> Saluti a tutti.<br> ********************************************

********************************************
Bye Bye dal Giappone! Saluti a tutti.
********************************************

Liste

Le liste che HTML è in grado di gestire sono di tipo numerato, non numerato e liste di definizioni. La struttura generica di una lista è:

elemento di inizio della lista;
sequenza di voci;
elemento di chiusura della lista.

Gli elementi di inizio delle liste possono essere:

<UL> per le liste non numerate ( Unnumbered List);
<OL> per le liste numerate ( Ordered List);
<DL> per le liste di definizioni ( Definition List).

Gli elementi di chiusura sono, per ogni tipo di lista, il corrispondente elemento di inizio preceduto dal carattere /.

Per le liste numerate e non, ogni voce è indicata da <LI> ( List Item), mentre per quelle di definizioni si devono usare:

<DT> per la dichiarazione di un nome;
<DD> per la definizione stessa.

Basic Listings

Liste non numerate <ul><li>...</ul>

Oggi
Domani

<ul> <li>Oggi <li>Domani </ul>

UNO
- DUE
  - TRE

<ul><li>UNO

    <ul><li>DUE

        <ul><li>TRE

</ul></ul></ul>

Liste numerate <ol><li>...</ol>

Oggi
Domani

<ol> <li>Today <li>Tommorow </ol>

UNO
1. DUE
  1. TRE

<ol><li>UNO

    <ol><li>DUE

        <ol><li>TRE

</ol></ol></ol>

Liste di definizione <dl><dt>...<dd>...</dl>

Mosaic: Mosaic è un browser per HTML che...
Netscape: Netscape è un altro browser per HTML più recente e .....

<dl> <dt>Mosaic <dd>Mosaic è un browser per HTML che... <dt>Netscape <dd>Netscape è un altro browser per HTML più recente e ..... </dl>

Liste Compatte <dl compact><dt>...<dd>...</dl>

Oggi: Oggi sto meglio di ieri.
Domani: Domani starò meglio di oggi.

<dl compact> <dt>Oggi <dd>Oggi sto meglio di ieri. <dt>Domani <dd>Domani starò meglio di oggi </dl>

Tipi di Liste

Stili per liste non numerate<li type=#> #=disk, circle, square

UNO
DUE
TRE

<ul> <li type=disc>UNO <li type=circle>DUE <li type=square>TRE </ul>

Stili per liste numerate - uso di lettere e numeri <li type=#> #=A, a, I, i, 1

UNO-UNO UNO-DUE	`<ol> <li type=A>UNO-UNO <li>UNO-DUE </ol>`
UNO-UNO UNO-DUE	`<ol> <li type=a>UNO-UNO <li>UNO-DUE </ol>`
UNO-UNO UNO-DUE	`<ol> <li type=I>UNO-UNO <li>UNO-DUE </ol>`
UNO-UNO UNO-DUE	`<ol> <li type=i>UNO-UNO <li>UNO-DUE </ol>`
UNO-UNO UNO-DUE	`<ol> <li type=1>UNO-UNO <li>UNO-DUE </ol>`

Stili per liste numerate (da quale lettera o numero) <ol start=#> #=number

UNO-DUE
UNO-DUE
1. DUE-UNO
2. DUE-UNO

<ol start=5>

<li type=A>UNO-UNO

<li>UNO-DUE

      <ol start=10>

               <li type=i>DUE-UNO

<li>DUE-UNO

</ol></ol>

Le liste possono essere annidate a piacere. Ogni livello ha un suo simbolo per indicare l'inizio di una nuova voce. In più una lista può contenere un'unica voce e ogni singola voce può contenere più paragrafi.

Inserire dei link

I link in una pagina Web sono aree attive del testo che ci permettono, con un click del mouse, di saltare a un documento collegato. La prima cosa che occorre decidere è dunque quale parte del testo si vuole rendere attiva, e poi inserire il marcatore per definirla come tale. La sintassi è la seguente:

<a href="url del documento di destinazione">testo attivo</a>

'A' di 'a href' sta per anchor, ancora in inglese, e l'attributo 'href' sta per 'riferimento ipertestuale', e deve contenere la URL completa del documento di destinazione.

Aggiungiamo nella nostra pagina 'prova.htm' un link ipertestuale, inserendo una riga contenente la scritta letteratura e procediamo nel modo sotto esposto:

letteratura - visita la <a href="http://www.liberliber.it"> biblioteca telematica</a> di Liber Liber.
Ed ecco il risultato a video
letteratura - visita la biblioteca telematica di liber Liber

Tutto qui. Da adesso in poi, è sufficiente un click su 'biblioteca telematica' per collegarsi all'indirizzo Internet 'http://www.liberliber.it'. Con il medesimo semplice meccanismo, possiamo inserire link ad altri documenti presenti sul nostro stesso sito, e addirittura a punti specifici di un documento. La sintassi del path per richiamare un documento all'interno del nostro stesso sito è la medesima utilizzata per richiamare le immagini. Quindi:

<a href="bruno.htm">testo cliccabile</a>
si usa quando il file 'bruno.htm' si trova nella stessa directory nella quale è memorizzato il file che contiene il link ('prova.htm' nel nostro caso).

<a href="biografia/bruno.htm">testo cliccabile</a>
si usa quando il file 'bruno.htm' si trova in una sub-directory ('biografia' nel nostro caso) di 'prova.htm'.

<a href="../bruno.htm">testo cliccabile</a>
si usa se il file 'bruno.htm' si trova nella directory superiore rispetto a quella che contiene 'prova.htm'.

<a href="../biografia/bruno.htm">testo cliccabile</a>
si usa se il file 'bruno.htm' si trova in una directory ('biografia' nel nostro caso) che è gerarchicamente allo stesso livello di quella che contiene 'prova.htm'.

Per inserire il link a un punto specifico di un altro documento (o anche a un punto specifico del documento che si sta leggendo) è necessario ricorrere preventivamente a un altro attributo del comando '<a>', cioè 'name="testo"' (es.: <a name="start"></a>). La funzione dell'attributo 'name' è quella di assegnare un nome a una parte del documento, così che in seguito vi si possa far riferimento. Facciamo subito un esempio pratico, e assegniamo il nome 'start' alla parte iniziale del nostro file 'prova.htm', aggiungendo la riga evidenziata:

<html> <head> <title>La prima pagina Web di bruno</title> </head> <body bgcolor="#FFFFFF" text="#990000"> <a name="start"></a> <h1 align="center">Home page di Bruno</h1> <p>Questa è la mia prima pagina in HTML.</p> ecc.

Ora è possibile riferirsi alle prime righe del file 'prova.htm' con il nome 'start'. La sintassi per invocare la parte di testo chiamata 'start', dal momento che si trova all'interno dello stesso file.htm, è la seguente:
"#nome assegnato al riferimento interno".
Es.:

<a href="#start">testo cliccabile</a>

E' anche possibile creare collegamenti a parti specifiche di nuovi documenti. Se nel documento prova.htm si scrive:

Ecco il mio <A NAME = "studi"> piano di studi</A>

e in un altro documento: 2.htm ho dato al possibilità di collegarsi direttamente al mio piano di studi:

Questi sono i miei <A HREF="prova.htm#studi">piano di studi</A>: non male !

allora, premendo il tasto del mouse sulla parola piano di studi nel documento 2.htm si aprirà il documento prova.htm direttamente sulle righe del piano di studi.
Come vedete l'unica differenza è che nella corrispondente <HREF> si deve necessariamente mettere
"nomefile#nome assegnato al riferimento interno"

Oltre che definire link tra documenti di World Wide Web, con il tag '<a href>' è anche possibile permettere ai futuri visitatori della nostra pagina di inviarci dei messaggi di posta elettronica. Questa la sintassi:
"mailto:user@indirizzo della casella postale"

<a href="mailto:bruno.crimella@fastwebnet.it">Fai click qui per scrivermi</a>

Prima di proseguire, diamo un'occhiata al nostro file 'prova.htm' così da ripassare alcuni degli ultimi comandi visti (sono in evidenza):

<html> <head> <title>La prima pagina Web di Bruno</title> </head> <body bgcolor="#FFFFFF" text="#990000"> <a name="start"></a> <h1 align="center">Home page di Bruno </h1> <p>Questa è la mia prima pagina in HTML.</p> <h3>Il mio tempo libero</h3> <ul> <li>letteratura - visita la <a href="http://www.liberliber.it">biblioteca telematica</a> di Liber Liber <li>cinema (qui sotto la classifica dei miei film preferiti) <ol> <li>La vita é bella <li>Un pesce di nome Wanda <li>L'uomo della pioggia </ol> <li>sport <ol> <li>Calcio <li>Tennis <li>Pallavolo </ol> </ul> <h3>Il lavoro</h3> <dl> <dt>Esperienze amministrative in Ditte <dd>contabilità aziendale, bilancio, prima nota marketing <dt>Manuali <dd>ho scritto un manuale sul linguaggio html ed uno su Internet <dt>Corsi <dd>ho tenuto corsi a ragazzi, docenti ed anziani su argomenti vari </dl> <hr width="80%" align="center" noshade> <p><img src="mouse.gif" width="296" height="181" alt="Foto di un mouse" hspace="10" vspace="5" align="left"><font size="-1" color="#000000">Testo qualsiasi, testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi.</font></p> <p align="center"><a href="#start">Fai click qui per tornare in cima al documento.</a></p> <p align="center"><a href="mailto:bruno.crimella@fastwebnet.it">Fai click qui per scrivermi.</a></p> </body> </html>

Come detto precedentemente se il documento da collegare non è locale, si deve utilizzare, come indirizzo, l' Uniform Resource Locator noto come URL. L'URL contiene la localizzazione del documento e il tipo di risorsa utilizzata per accederci. Il formato tipico di un URL è:

schema://indirizzo_ip/path/filename

Gli ultimi due campi sono il pathname completo e assoluto all'interno della macchina il cui indirizzo di rete è specificato in indirizzo_ip. Schema, viceversa, specifica il tipo di risorsa da utilizzare per il collegamento e può assumere uno dei seguenti valori:

ftp: il file è locale o può essere raggiunto tramite un FTP anonimo;
http: il file è su un server WWW;
gopher: il file è su un server gopher;
WAIS: il file è su un server WAIS;
news: specifica un gruppo su Usenet;
telnet: il file può essere raggiunto tramite una connessione di tipo Telnet.

Ecco l'esempio sopracitato

Home page di Bruno

Questa è la mia prima pagina in HTML.

Il mio tempo libero

letteratura - visita la biblioteca telematica di Liber Liber
cinema (qui sotto la classifica dei miei film preferiti)
1. La vita é bella
2. Un pesce di nome Wanda
3. L'uomo della pioggia
sport
1. Calcio
2. Tennis
3. Pallavolo

Il lavoro

Esperienze amministrative in Ditte: contabilità aziendale, bilancio, prima nota marketing
Manuali: ho scritto un manuale sul linguaggio html ed uno su Internet
Corsi: ho tenuto corsi a ragazzi, docenti ed anziani su argomenti vari

Foto di un mouse Testo qualsiasi, testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi.

Fai click qui per tornare in cima al documento.

Fai click qui per scrivermi.

Collegamenti

Contattami tramite MSN e Skype

Per inserire un collegamento come quello che vedete per Msn e Skype la sintassi sarà la seguente:

<font size="4">Contattami tramite <a href="mailto:bruno.crimella@hotmail.it">MSN</a> e <a href="skype:bruno.crimella?add">Skype</a></font>

Ovviamente come abbiamo già visto nelle pagine dedicate al tag "font" si possono modificare grandezza colore e tipo di font--->font size= font color= font=verdana->tahoma-etc

contenuto

La tabella che vedete qui sopra ha questa sintassi:

<table width="450" bgcolor="#00CCFF" cellpadding="10" cellspacing="1">

  <tr bgcolor="FFFFFF">
    <td width="50%"><b>contenuto</b></td>
    <td width="50%"> </td>
  </tr>

</table>