HTML Camagni Paolo Nikolassy Riccardo install

download

http://ebookstep.com/product/html-camagni-paolo-nikolassy-
riccardo/

Download more ebook from https://ebookstep.com

We believe these products will be a great fit for you. Click
the link to download now, or visit ebookstep.com
to discover even more!

Corso di informatica Java vol B Paolo Camagni Riccardo

Nikolassy

http://ebookstep.com/product/corso-di-informatica-java-vol-b-
paolo-camagni-riccardo-nikolassy/

TECNOLOGIE E PROGETTAZIONE DI SISTEMI INFORMATICI E DI

TELECOMUNICAZIONI 2023rd Edition Paolo Camagni Riccardo
Nikolassy

http://ebookstep.com/product/tecnologie-e-progettazione-di-
sistemi-informatici-e-di-telecomunicazioni-2023rd-edition-paolo-
camagni-riccardo-nikolassy/

Fondamenti Di Controlli Automatici 1P 2nd Edition Paolo

Bolzern Riccardo Scattolini Nicola Schiavoni

http://ebookstep.com/product/fondamenti-di-controlli-
automatici-1p-2nd-edition-paolo-bolzern-riccardo-scattolini-
nicola-schiavoni/

111 Kode HTML untuk Belajar Kilat Arista Prasetyo Adi

http://ebookstep.com/product/111-kode-html-untuk-belajar-kilat-
arista-prasetyo-adi/
Gesù incontra Paolo Curtaz

http://ebookstep.com/product/gesu-incontra-paolo-curtaz/

HTML und CSS Semantik Design Responsive Layouts 2te 2nd

Edition Peter Bühler

http://ebookstep.com/product/html-und-css-semantik-design-
responsive-layouts-2te-2nd-edition-peter-buhler/

Introduction à l anthropologie du politique 1st Edition

Ciavolella Riccardo

http://ebookstep.com/product/introduction-a-l-anthropologie-du-
politique-1st-edition-ciavolella-riccardo/

Kurma K z 1st Edition Paolo Bacigalupi

http://ebookstep.com/product/kurma-kiz-1st-edition-paolo-
bacigalupi/

Io avrò cura di te Papa Francesco A Cura Di Riccardo

Bonacina

http://ebookstep.com/product/io-avro-cura-di-te-papa-francesco-a-
cura-di-riccardo-bonacina/
 Quaderni di
TECNOLOGIE

Paolo Camagni
Riccardo Nikolassy

HTML
Edizione OPENSCHOOL
1 LIBRODITESTO
2 E-BOOK+
3 RISORSEONLINE
4 PIATTAFORMA
HOEPLI
PAOLO CAMAGNI RICCARDO NIKOLASSY

HTML
Quaderni di tecnologie

EDITORE ULRICO HOEPLI MILANO

Copyright © Ulrico Hoepli Editore S.p.A. 2016
Via Hoepli 5, 20121 Milano (Italy)
tel. +39 02 864871 – fax +39 02 8052886
e-mail [email protected]

www.hoepli.it

Tutti i diritti sono riservati a norma di legge

e a norma delle convenzioni internazionali
Quaderni di tecnologie
La collana Quaderni di tecnologie è costituita da volumi monografici che trattano singolarmen-
te argomenti specifici inerenti a tecnologie di ambito informatico, elettrico, elettronico, mecca-
nico e meccatronico.
Lo scopo della collana è fornire al docente strumenti didattici specifici per singoli argomenti al
fine di realizzare o integrare un percorso formativo adatto al proprio piano di lavoro.
L’approccio didattico vuole essere estremamente “semplificato” senza essere banale, mantenendo
rigorosità nella terminologia ma essenzialità negli aspetti teorici privilegiando l’attività labora-
toriale.
I Quaderni sono quindi uno strumento didattico realmente duttile, che consente al docente di
costruirsi percorsi di insegnamento su misura, combinando argomenti/temi in funzione delle
proprie specifiche esigenze.
L’elenco completo dei titoli disponibili è riportato all’indirizzo web www.hoepliscuola.it.

Presentazione del volume

HTML intende fornire le basi per poter creare pagine web mediante HTML e i fogli di stile css.
HTML rappresenta il linguaggio di contrassegno per le pagine web, mentre invece con il box
model in css possiamo arricchirle definendone anche il layout.

Conoscere HTML, rappresenta ancora oggi la porta di ingresso per la realizzazione dei siti
Internet, nel volume vengono anche trattate le novità che riguardano la definizione di pagine
responsive.

Questo volume affronta gradualmente i temi fondamentali della realizzazione di pagine web,
attraverso numerosi esempi e secondo un approccio della scoperta guidata; è adatto anche a chi
non ha conoscenze specifiche di informatica e conduce per mano lo studente portandolo alla re-
alizzazione di pagine web arricchite dai fogli di stile css, senza effettuare approfondimenti teorici
ma privilegiando l’aspetto operativo di una didattica laboratoriale

La teoria è stata ridotta al minimo per privilegiare l’aspetto pratico. In itinere vengono propo-
sti esercizi di approfondimento e consolidamento; alla fine di ogni lezione vengono proposti
esercizi con difficoltà crescente e una scheda di autovalutazione che permettono di verificare le
conoscenze e le capacità acquisite.
III
 Struttura dell’opera

PROVA ADESSO!
Per mettere in pratica,
in itinere, quanto
appreso nella lezione

OSSERVAZIONI
Un aiuto per comprendere
e approfondire

ZOOM
Piccole sezioni
di approfondimento

SCHEDA DI AUTOVALUTAZIONE
Alla fine di ciascuna lezione
il lettore può valutare la qualità
del suo apprendimento

ESERCIZI
Ampia sezione di esercizi per la verifica
delle conoscenze e delle competenze

AreaDigitale
eBook+
L’eBook+ che completa il volume presenta l’intero
testo in versione digitale, utilizzabile su tablet, LIM
e computer, e offre alcuni contenuti aggiuntivi.
Indice

Lezione 1 · Introduzione all’HTML Lezione 4 · Multimedialità e moduli

Il web 1 nelle pagine web
L’HTML 2 Gli oggetti multimediali 44
La creazione di una pagina 6 Inserire applet Java 48
La sintassi HTML 7 Moduli e server web 48
L’intestazione di un documento 9 Il modulo di immissione form 49
Il corpo del documento (tag <body>) 11 Gli elementi che compongono i moduli (campi) 51
I paragrafi e la formattazione del testo 13 Come disabilitare i controlli 56
La definizione del carattere 18 Esercitiamoci 58
Esercitiamoci 20 Scheda di autovalutazione 59
Scheda di autovalutazione 21 AreaDigitale
AreaDigitale Riassunto tag HTML
» La validazione del W3C
» Il tag <meta>
» I codici RGB Lezione 5 · Introduzione ad HTML 5
» Verifica le competenze acquisite Novità di HTML 5 rispetto al passato 60
» Esercizi per l’approfondimento La struttura di un documento HTML 5.0 61
Immagini e oggetti multimediali 69
» Il primo sito apparso sul WWW
Esercitiamoci 72
» Modificare il codice HTML Scheda di autovalutazione 73

Lezione 2 · Inseriamo immagini Lezione 6 · Introduzione ai fogli di stile

ed elenchi nella pagina I fogli di stile 74
Le immagini 22 Gli stili 75
Le liste 26 L’applicazione degli stili 77
Esercitiamoci 29 L’applicazione degli stili in cascata 81
Scheda di autovalutazione 30 Classi e pseudoclassi 81
AreaDigitale Il selettore id 87
» Verifica le competenze acquisite
Esercitiamoci 88
» Esercizi per l’approfondimento Scheda di autovalutazione 89
AreaDigitale
Lezione 3 · Le tabelle e gli hyperlink » Le unità di misura nei fogli CSS
» Verifica le competenze acquisite
Le tabelle 31
» Esercizi per l’approfondimento
I collegamenti ipertestuali (link) 35
Le mappe sensibili 39
Esercitiamoci 42 Come utilizzare il coupon per scaricare
Scheda di autovalutazione 43 la versione digitale del libro (ebook+)
e i contenuti digitali integrativi (risorse online) 90
AreaDigitale
» Verifica le competenze acquisite
» Esercizi per l’approfondimento
 L’OFFERTA DIDATTICA HOEPLI
L’edizione Openschool Hoepli offre a docenti e studenti tutte le potenzialità
di Openschool Network (ON), il nuovo sistema integrato di contenuti e servizi
per l’apprendimento.

Edizione OPENSCHOOL

+ + +
LIBRO eBOOK+ RISORSE PIATTAFORMA
DI TESTO ONLINE DIDATTICA

Il libro di testo L’eBook+ è la versione Il sito della casa editrice La piattaforma didattica
è l’elemento cardine digitale e interattiva offre una ricca dotazione è un ambiente digitale
dell’offerta formativa, uno del libro di testo, di risorse digitali che può essere utilizzato
strumento didattico agile utilizzabile su tablet, per l’approfondimento in modo duttile, a misura
e completo, utilizzabile LIM e computer. e l’aggiornamento. delle esigenze della classe
autonomamente Aiuta a comprendere Nella pagina web dedicata e degli studenti.
o in combinazione con e ad approfondire al testo è disponibile Permette in particolare di
il ricco corredo digitale i contenuti, rendendo MyBookBox, condividere contenuti ed
offline e online. Secondo l’apprendimento più attivo il contenitore virtuale esercizi e di partecipare
le più recenti indicazioni e coinvolgente. Consente che raccoglie i materiali a classi virtuali.
ministeriali, volume di leggere, annotare, integrativi che Ogni attività svolta viene
cartaceo e apparati sottolineare, effettuare accompagnano l’opera. salvata sul cloud e rimane
digitali sono integrati ricerche e accedere Per accedere sempre disponibile
in un unico percorso direttamente alle ai materiali è sufficiente e aggiornata.
didattico. Le espansioni numerose risorse registrarsi al sito La piattaforma consente
accessibili attraverso digitali integrative. www.hoepliscuola.it inoltre di consultare
l’eBook+ e i materiali Scaricare l’eBook+ e inserire il codice coupon la versione online
integrativi disponibili è molto semplice. che si trova nella terza degli eBook+ presenti
nel sito dell’editore È sufficiente seguire pagina di copertina. nella propria libreria.
sono puntualmente le istruzioni riportate Per il docente nel sito È possibile accedere
richiamati nel testo nell’ultima pagina sono previste ulteriori alla piattaforma attraverso
tramite apposite icone. di questo volume. risorse didattiche dedicate. il sito www.hoepliscuola.it.
1
LEZIONE

In questa lezione
INTRODUZIONE impareremo
◗◗ a riconoscere la sintassi dei
ALL’HTML comandi principali dell’HTML
◗◗ a realizzare pagine HTML attraverso
i tag più comuni
◗◗ a utilizzare i tag di definizione
paragrafi
◗◗ a utilizzare i tag per la
formattazione del testo

Il web
L’HTML è un linguaggio che è stato studiato per essere utilizzato all’interno del
º WWW ». È stato studiato e implementato
Definizione dal Cern di Ginevra nel 1989 per agevolare
Andrew S. Tanenbaum defi- la cooperazione di gruppi di ricerca sparsi nel
nì il WWW (World Wide Web), mondo. Nasce per il pubblico nei primi anni
nel testo di riferimento per le Novanta sulla base di tre standard:
reti “Computer Networks” del ◗◗HTTP, un protocollo per la trasmissione di
1997, come una “architettura documenti su Internet;
software per accedere a docu-
◗◗URL, una notazione per l’indirizzamento
menti tra loro collegati e distri-
buiti su migliaia di macchine delle risorse;
nell’intera Internet”. ◗◗HTML, un linguaggio per la scrittura di do-
cumenti ipertestuali.
I documenti HTML rappresentano pagine ipermediali contenenti diversi elementi:
◗◗testi;
◗◗immagini;
◗◗suoni;
◗◗collegamenti ipertestuali ad altre pagine (link); AreaDigitale
Il primo sito apparso sul www
◗◗programmi.
1
L1 · Introduzione all’HTML

Le pagine vengono ospitate su

server web e visualizzate dai client
attraverso l’utilizzo di un browser
web (Internet Explorer, Firefox,
Opera, Chrome, Safari). Quando
l’utente digita l’indirizzo web
(URL) della pagina che vuole vi-
sitare, il sistema operativo richie-
de, attraverso una connessione
HTTP, la pagina al server in cui è
memorizzata e la scarica per esse-
re visualizzata dal º browser ».
Definizione
Il broswer è un programma che interpreta dati codificati nel linguaggio HTML e visualizza l’in-
formazione con la formattazione specificata.

Un URL è formato da tre parti:

1. dal protocollo utilizzato per il trasferimento dati (HTTP);
2. dall’indirizzo del server su cui risiede la risorsa;
3. dal percorso della pagina presente sul server.

Protocollo Indirizzo del server Percorso all’interno del

server (pathname)

L’HTML
HTML è l’acronimo di Hyper Text Markup Language. Il suo significato è “linguag-
gio di contrassegno ipertestuale”, e indica il linguaggio con il quale vengono realiz-
zate le pagine web. Un documento HTML non è altro che un file rigorosamente di
2
 Introduzione all’HTML · L1

tipo testo, contenente alcune parole chiave aventi la funzione di indicare al browser
dell’utente le caratteristiche degli oggetti che lo compongono, quali per esempio la
dimensione del testo, il colore, la posizione delle immagini all’interno della pagina,
lo stile delle linee, delle tabelle ecc.
Definizione Si tratta di un linguaggio di contrassegno (o
Il termine tag deriva dalla lingua in- “di marcatura”), che permette di indicare co-
glese (dove significa “targhetta”) e me disporre gli elementi all’interno di una
viene usato per identificare l’inizio e pagina. Tali indicazioni vengono date attra-
la fine di un comando.
verso degli appositi marcatori, detti º tag ».

Pur essendo dotato di una propria sintassi, non è governato da una logica ferrea co-
me quella dei linguaggi di programmazione: se non viene chiuso un tag, non ver-
ranno prodotti dei messaggi di errore; se non si rispetta la sintassi probabilmente la
pagina non verrà visualizzata in modo corretto, o non verrà visualizzata affatto, ma
non compariranno fastidiosi messaggi di errore. Il linguaggio HTML non possiede
variabili, cicli, strutture dati particolari, non è neppure in grado di gestire input da
parte dell’utente, ma è in grado solo di descrivere i dati da visualizzare. Infine l’e-
stensione dei file che contengono codice HTML può essere .htm oppure .html in-
differentemente. AreaDigitale
La validazione del W3C

Il linguaggio HTML è stato ratificato e definito dal W3C (World Wide Web Consortium, www.
w3c.org), l’organismo che definisce gli standard di questo linguaggio a livello mondiale.

I tag possono essere scritti in maiuscolo oppure in minuscolo, in quanto il linguag-

gio HTML non è di tipo case sensitive. Tuttavia affinché una pagina web venga va-
lidata dall’organismo W3C è necessario che
Definizione
i comandi vengano scritti tutti in minuscolo
e vengano sempre usati i tag di chiusura se- XHTML è una versione di HTML ba-
condo una codifica chiamata º XHTML ». sata sul metalinguaggio XML e ha
una sintassi rigorosa. Serve per de-
Per i comandi che non possiedono tag di finire la struttura logica dei docu-
chiusura è necessario aggiungere uno slash menti.
alla fine, per esempio:
<br />

L’HTML è un linguaggio di tipo interpretato, gli elementi di cui è composto sono

caratterizzati dai tag di descrizione che iniziano e finiscono tra parentesi angolari
<...>. I tag sono normalmente in numero pari per poter rappresentare l’inizio e la

3
L1 · Introduzione all’HTML

fine di un’istruzione e prendono il nome di start-tag ed end-tag (per esempio, <H1>

e </H1>). Un end-tag ha la stessa forma dello start-tag tranne per la barra (/) che
deve precedere il testo tra le parentesi. Alcuni elementi possono includere un attribu-
to o proprietà, che è un’informazione aggiuntiva contenuta all’interno dello start-tag.
Tag del Valore
comando Attributo dell’attributo Contenuto

<a href=”http://www.magistricumacini.it”>Sito dell’istituto</a>

Tag di apertura Tag di chiusura

Gli errori sintattici presenti in una Se il linguaggio HTML definisce il contenu-

pagina HTML non vengono segna-
lati in modo specifico dai browser,
to e la struttura di una pagina web, attraverso i
i tag errati vengono di norma sem- fogli di stile (º CSS ») andiamo invece a rap-
plicemente ignorati. presentarne in modo gradevole i contenuti.

Definizione
Possiamo notare come un’informazione, ini-
I fogli di stile CSS (Cascading Style zialmente in forma destrutturata, possa esse-
Sheet) sono dei tag particolari che
re strutturata attraverso alcuni tag HTML
consentono di definire gli aspetti di
presentazione dei documenti. oppure definita in modo da essere presentata
attraverso l’ausilio di fogli di stile (CSS):
Informazione Informazione
destrutturata strutturata

Titolo

HTML
Paragrafo

Elenco

CSS

Presentazione

Testo colorato,
sfondo colorato,
bordo riquadro,
titolo ecc.

4
 Introduzione all’HTML · L1

ESEMPIE
Pagina di prova (FILE: prova.html) • L’esempio che segue è il codice di un documento
HTML:
<html>
<head>
<title>Un semplice esempio HTML</title>
</head>
<body>
<h1>HTML è facile da apprendere</h1>
<p>Benvenuto nel mondo HTML.
Questo è il primo paragrafo. </p>
<p>E questo è un altro. </p>
</body>
</html>

Per scrivere l’esempio è sufficiente aprire il browser e poi nel menu Visualizza sce-
gliere HTML. Utilizzeremo in questo caso semplicemente il Blocco note di Win-
dows. Otteniamo in output nel browser la seguente videata.

ESEMPIE
Pur esistendo numerosissimi editor per l’HTML in grado di generare il codice ne-
cessario per realizzare una pagina web mediante interfacce grafiche di utilizzo ami-
chevole (per esempio FrontPage, Mozilla Composer, Dreamweaver, HTMLeditor,
1stPage e così via), si vuole illustrare come realizzare una pagina web senza l’ausilio
di questi strumenti. Può essere utilizzato un qualunque editor di testi, fermo restan-
do che l’impiego di strumenti grafici molto spesso semplifica la realizzazione delle
pagine e rende il lavoro più semplice, veloce e soprattutto lascia più spazio alla crea-
tività dell’utilizzatore, che non deve preoccuparsi di scrivere letteralmente il codice
e può concentrarsi esclusivamente sul risultato finale.
5
L1 · Introduzione all’HTML

Come accennato, un documento HTML non è altro che un file di testo semplice,
cioè senza gli attributi di formattazione (come colori particolari associati al testo,
immagini, stili e così via) con la differenza che il file HTML, anziché avere estensio-
ne .txt, ha estensione .html o .htm. Il compito di visualizzare correttamente i file
salvati con questo formato è affidato ai browser, programmi che, utilizzando una
connessione di rete oppure aprendo i file dal computer locale, si occupano di “leg-
gere” le istruzioni contenute nel file HTML e visualizzarne i risultati.

Cercare di realizzare documenti HTML compatibili con il massimo numero disponibile di ver-
sioni di browser rappresenta un dovere del programmatore. Questa tecnica prende il nome di
programmazione cross-browser, cioè una programmazione che abbraccia il numero maggiore
di browser.

AreaDigitale
La creazione di una pagina Modificare il codice HTML

Per creare una pagina in HTML è sufficiente aprire il browser e, a partire dalla ver-
sione 8 di Internet Explorer, fare click sull’icona delle Impostazioni e quindi su
Strumenti di sviluppo. Appare la finestra del debug dell’HTML che permette di
scrivere e modificare il codice HTML necessario.

Facendo clic sul pulsante Modifica è consentito editare il

codice HTML presente nella finestra.

Selezionando il pulsante Salva HTML è possibile salvare le

modifiche effettuate (figura a lato).

6
 Introduzione all’HTML · L1

Z¥¥M
Codice HTML in blocco note di Internet Explorer • Coloro che intendono usare il Bloc-
co note di Windows, dalla versione 11 di Internet Explorer, per modificare il file
origine devono premere Alt F, per attivare il menu File di Internet Explorer, quindi
selezionare la voce Modifica con Blocco note...:

In questo caso si ottiene l’apertura di una finestra del Blocco note che mostra il co-
dice sorgente HTML della pagina:

Dopo aver scritto il codice in Blocco note, è necessario salvare la pagina e ricordarsi
di aggiornare la schermata del browser mediante il pulsante Aggiorna.

La sintassi HTML
All’interno di ogni pagina in formato HTML sono presenti, come accennato nel
paragrafo precedente, una serie di marcatori (markup tag), che hanno differenti no-
mi a seconda della loro funzione. Si tratta di istruzioni delimitate e rese riconoscibili
7
L1 · Introduzione all’HTML

dalle parentesi angolari, che servono per delimitare o marcare parti del documento.
Tutti i tag, tranne qualche eccezione, devono essere aperti e chiusi. Il contenuto va
inserito tra l’apertura e la chiusura del tag medesimo, secondo questa forma:
<tag attributi>contenuto</tag>

Per esempio, vediamo la sintassi necessaria per allineare un testo al centro:

<p align=”center”>testo</p>

Dall’esempio è evidente che la sintassi dei comandi HTML è:

attributo=”valore”

Vediamo quindi qual è la struttura definitiva della sintassi di un tag:

<tag attributo1=”valore1” attributo2=”valore2” ...
attributoN=”valoreN”>
contenuto
</tag>

Alcuni tag particolari non hanno alcun contenuto e sono chiamati º empty tag »; a
volte indicano solo la posizione di alcuni elementi (per esempio per le immagini) e
spesso non hanno neppure un tag di chiusura (per esempio per l’interruzione di
riga). La loro forma è più semplice ed è del tipo seguente.
<tag attributi />

Definizione
Vengono chiamati empty tag i tag vuoti, senza contenuto e senza
chiusura. Vediamone due esempi:
<img src=”immagine.jpg” widht=”100” height=”100” />
Salve a tutti<br />
mi chiamo Bill<br />
e sono il vostro Personal Computer<br />

Per esempio il tag che consente di applicare lo stile grassetto (bold, in inglese) è <b>
come tag di apertura e </b> come tag di chiusura:
Testo che precede il tag<b>testo grassetto</b>testo che segue il tag

8
 Introduzione all’HTML · L1

Quando si vogliono usare più formattazioni sullo stesso testo, per esempio se si de-
sidera applicare sia il grassetto (<b>) sia il corsivo (<i>) sia il sottolineato (<u>), si
devono rispettare le priorità, cioè l’ultimo tag aperto deve essere chiuso per primo.
<b><i><u>testo formattato</u></i></b>

L’intestazione di un documento
Una pagina HTML possiede una struttura logica di tipo gerarchico, le cui parti
principali sono due, denominate rispettivamente head, che significa intestazione, e
body, il corpo della pagina. Il primo componente rappresenta tutte le caratteristiche
proprie della pagina, dal titolo alla compatibilità del documento, a differenza del
corpo della pagina che rappresenta invece il contenuto della pagina, quello che so-
stanzialmente viene visualizzato nel browser.
Intestazione <!DOCTYPE>:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//IT” opzionale
http://www.w3.org/TR/html4/loose.dtd>
<html>
<head>
<title>
Titolo Elemento <head>: informazioni
</title> sul documento
...
Elemento <html>:
</head> radice del documento
<body>
... Elemento <body>: contenuto del
</body> documento

</html>

AreaDigitale
Il tag <meta>

Poiché il titolo viene usato anche per costruire gli indici automatici usati dai motori di ricerca è
importante che esso sia significativo, che ne esprima cioè il contenuto in sintesi.

Dell’intestazione l’unica informazione che viene visualizzata nel browser è il titolo

della scheda, le altre servono per identificare le caratteristiche della pagina.
9
L1 · Introduzione all’HTML

Z¥¥M
Il doctype • Mediante il tag doctype definiamo il tipo di documento che abbiamo
scritto, se si tratta ad esempio di HTML, XHTML o HTML 5.

Quando utilizziamo software di programmazione web, come ad esempio FrontPage o Dreamwe-

aver, viene automaticamente immesso il tag doctype come prima riga di codice:
<!doctype ...

Questo tag serve per riportare a un file presente sul sito del W3C nel quale sono di-
chiarate le regole della versione HTML che si sta usando. Ciò permette ai browser
di interpretare correttamente la pagina HTML.
Il tag che di default consente di determinare automaticamente la versione di HTML
è il seguente:
<!doctype html>

Questo tag è importante per poter ricevere la º validazione » dall’organismo mon-

diale di definizione degli standard del web (W3C).
La validazione si rende necessaria quando ad
esempio vogliamo utilizzare alcune applica-
zioni speciali all’interno del nostro sito co-
Definizione me ad esempio un contatore di visite ufficia-
Un sito internet si dice valido quan- le oppure un sistema di pagamento online.
do rispetta gli standard definiti dal
W3C. Possiamo definire un sito web
valido quando viene scritto median-
te un codice che rispetti le regole
Come abbiamo visto il validatore del W3C non
standard internazionali dettate dal
è altro che una pagina che consente, fornendo
consorzio W3C.
l’url o caricando direttamente una pagina HTML,
Rispettare questi standard significa
di rilevare gli errori di sintassi del codice HTML
avere un sito Internet visualizzabile
permettendoci di correggerli facilmente. La vali-
correttamente in tutti i browser, ve-
dazione tuttavia non è indice di correttezza asso-
locizzare il caricamento di quest’ulti-
luta della nostra pagina, può infatti accadere che
mo e renderlo più facile da gestire e
nonostante un sito venga rilevato valido possa
modificare.La validazione avviene in-
contenere alcuni errori semantici o di logica.
dicando la pagina principale del sito
all’indirizzo: http://validator.w3.org/

10
 Introduzione all’HTML · L1

ESEMPIE
Titolo della pagina (FILE: titolo.html)
<head>
<title>pagina di prova</title>
</head>

ESEMPIE

Il corpo del documento (tag <body>)

Il corpo di un documento racchiude le informazioni che riguardano il contenuto
del documento HTML. Il contenuto può essere presentato da un programma uten-
te in tanti modi. Per esempio, per quanto riguarda i browser visuali, si può pensare
al corpo come a una sorta di tela in cui appare il contenuto: testo, immagini, colori,
grafici ecc.
Attualmente i fogli di stile sono il metodo privilegiato per specificare la presen-
tazione di un documento, ma prima di affrontarli vogliamo presentare i concetti
fondamentali della codifica HTML.
Gli attributi del tag <body> possono essere sostituiti integralmente facendo uso dei
fogli di stile, che verranno illustrati più avanti. Il tag <body> possiede una serie di
attributi: vediamone i principali.

I margini
La proprietà margin consente di ridefinire i margini del documento; per margini
si intende la distanza del testo dal bordo della finestra del browser: leftmargin per
modificare il margine sinistro e topmargin per modificare il margine superiore se-
condo la sintassi compatibile con Internet Explorer, quindi la più diffusa. I margini
sinistro e superiore di default (standard) sono visibili nell’esempio che segue.
ESEMPIE
Margini (FILE: margini.html)

margine superiore

margine sinistro

11
L1 · Introduzione all’HTML

Modifica margini (FILE: modifica_margini.html)

Vediamo di modificarli con l’esempio che segue:
<body leftmargin=0 topmargin=0>
</body>

Si ottiene un margine sinistro a 0 pixel e su-

periore a 0, come indicato nella figura a lato.
ESEMPIE
Il colore del testo
La proprietà per il colore del testo è text.

Il colore dei collegamenti ipertestuali

La proprietà ha il nome link. Il colore dei collegamenti visitati può essere modifica-
to con la proprietà vlink, analogamente a quanto visto per il colore dei link iperte-
stuali. Solitamente è di colore viola.

Il colore di sfondo (background)

La proprietà ha il nome bgcolor. La sintassi è bgcolor=”colore”.

Le immagini di sfondo
La proprietà ha il nome background. Lo sfondo possiede una funzione chiamata
“texture” che replica più volte la stessa immagine per riempire tutto lo spazio dispo-
nibile. Per ottenere un effetto di continuità è necessario usare immagini di ridotte
dimensioni.

Esistono inoltre altre opzioni che possono essere assegnate a uno sfondo, tra queste citiamo la
clausola bgproperties=“fixed”, valida tuttavia per il solo browser Internet Explorer. Mediante tale
opzione se l’utente sposta la barra di scorrimento l’immagine di sfondo rimane fissa. Per esempio:
<body text=”white” link=”yellow” background=”erba.jpg” bgproperties=”fixed”>

12
 Introduzione all’HTML · L1

Z¥¥M
I colori •Per capire che cosa si intende per “colore” vediamo di conoscere i colori
fondamentali o standard che possono essere gestiti in HTML: sono 16 e a ciascuno
di essi è associato un nome esteso. In realtà il nome esteso non è altro che il nome
del colore nella lingua inglese; in tal modo ogniqualvolta si vuole per esempio fare
uno sfondo rosso basta utilizzare la parola chiave red, oppure per il nero black e così
via. Attraverso la tecnica RGB è possibile invece gestire ben 16 milioni di colori.
La tecnica permette di combinare tra loro i 3 colori base che sono il rosso (red), il
verde (green) e il blu (blue), ottenendo in tal modo moltissime combinazioni in
base alla quantità di colore che si intende aggiungere. Vengono assegnati 8 bit per
ciascun colore con una scala di 256 gradazioni possibili. I valori vengono espressi in
esadecimale (base 16), indicando due cifre per ciascuna gamma, secondo il formato:
RRGGBB (due cifre per il rosso, due per il verde, due per il blu)
Le cifre esadecimali sono: 0; 1; 2; 3; 4; 5; 6; 7; 8; 9; A; B; C; D; E; F, quindi RR, GG
e BB possono assumere un valore compreso tra 00 (zero) e FF (255 che è il valore
massimo). In tal modo il codice RGB del bianco sarà “FFFFFF” (tutti i colori al mas-
simo). Oppure il nero è espresso da tutti zero, quindi 000000. Il rosso vale FF0000,
il verde 00FF00, il blu 0000FF.
La notazione esatta prevede che davanti alla sigla del colore venga indicato il “can-
celletto”, così il giallo è: #FFFF00, mentre il fucsia è #FF00FF, oppure il turchese è
#00FFFF. Esistono poi tutte le combinazioni possibili tra i 3 colori, che sono in
totale 16 milioni, questo perché si hanno a disposizione 256 × 256 × 256 possibili
combinazioni, e quindi colori, per un totale di 16.777.216.
AreaDigitale
I codici RGB

I paragrafi e la formattazione del testo

I tag presenti nel body di un documento possono essere divisi in tre categorie:
1. block level tag: sono gli elementi che formano blocchi di testo, determinano
un’andata a capo alla fine del tag di chiusura e possono contenere sia elementi
block level sia tag level;
2. text level tag: sono gli elementi che formattano solo del testo, non determinano
un’andata a capo alla fine del tag di chiusura e possono contenere solo elementi
text level;
3. empty tag: sono gli elementi che non hanno tag di chiusura, come per esempio
il tag che permette di andare a capo.
13
L1 · Introduzione all’HTML

Alla prima categoria appartiene il tag <p> che permette di creare un nuovo paragra-
fo (p è l’iniziale di paragraph che in italiano significa appunto paragrafo). Serve per
marcare l’inizio di un nuovo paragrafo e produce una spaziatura di riga maggiore
per separarlo, in modo evidente, dal precedente. È molto importante che i paragrafi
siano separati dal tag <p>, in quanto il browser ignora qualsiasi indentazione o li-
nea vuota venga inserita nel documento sorgente HTML. Il tag di paragrafo viene
utilizzato anche per definire l’allineamento del testo, grazie all’attributo align. Ve-
diamone la sintassi:
<p align=”allineamento”> testo del paragrafo </p>

Gli allineamenti possono essere:

◗◗left allinea il paragrafo a sinistra (predefinito);
◗◗right allinea il paragrafo a destra;
◗◗center allinea il paragrafo al centro;
◗◗justify giustifica il paragrafo.
ESEMPIE
Paragrafo <p> e allineamento del testo (FILE: paragrafo_p.html)
<p align=”left”>paragrafo allineato a sinistra</p>
<p align=”right”>paragrafo allineato a destra</p>
<p align=”center”>paragrafo centrato</p>
<p align=”justify”>Paragrafo giustificato: il testo viene al-
lineato sia a destra che a sinistra, il browser provvede a in-
serire spazi opportuni dove necessario per allineare corretta-
mente sia a destra che a sinistra.</p>

Sempre alla categoria di elementi di tipo block level appartiene il tag di paragrafo
denominato <div>, che prevede l’uso del tag di chiusura </div>; anch’esso con-
sente di marcare una parte del documento e di gestirne l’allineamento.
<div align=”allineamento”>testo</div>

14
 Introduzione all’HTML · L1

ESEMPIE
Paragrafo <div> e allineamento del testo (FILE: paragrafo_div.html)
L’unica differenza con il comando di paragrafo è che non vengono inseriti spazi
all’inizio e alla fine del paragrafo marcato.
<div>
Paragrafo allineato a sinistra
</div>
<div align=”right”>
Paragrafo allineato a destra
</div>
<div align=”center”>
Paragrafo centrato
</div>
<div align=”justify”>
Paragrafo giustificato. Il testo viene allineato sia a de-
stra che a sinistra, il browser provvede a inserire spazi
opportuni dove necessario per allineare correttamente sia a
destra che a sinistra.
</div>

ESEMPIE
Empty tag
Alla terza categoria appartengono il tag <br /> che permette di andare a capo in
qualunque momento (br=break) e il tag <hr /> che crea una riga di separazione.
Il testo è disposto sequenzialmente, come se si trovasse su un’unica riga, e il browser
provvede a visualizzare a capo un testo quando incontra il tag <br />.
<hr align=”posizione” size=”altezza” width=”lunghezza”
color=”colore” noshade />
Possiamo così sintetizzare i principali attributi del tag <hr>:
◗◗align “center” oppure “right” o “left”;
◗◗width definisce la larghezza orizzontale della linea. Può anche essere espressa
in percentuale o in pixel;
◗◗size definisce lo spessore della riga espressa in pixel o in percentuale;
◗◗color definisce il colore;
◗◗noshade elimina l’effetto 3D della linea.
ESEMPIE
Righe con vari effetti (FILE: righe.html)
riga normale:<br />
<hr />

15
L1 · Introduzione all’HTML

riga senza effetto 3D:<br />

<hr noshade/>
righe di colore, spessore e larghezze diverse:<br />
<hr align=”left” width=”50%” size=”20” color=”#ffff00” />
<hr align=”right” width =”50%” size=”30” color =”#33ff33” />
<hr align=”center” width =”50%” size=”40” color =”#33ff33” />

ESEMPIE

Prova adesso!
Z Ricorrere alla modifica
Apri il file righe.html del margine sinistro e
superiore
Z Utilizzare il tag <hr>
1. Rettifica il documento in modo da avere un margine sinistro di
20 pixel.
2. Rettifica il documento in modo da avere un margine superiore
uguale a zero.
3. Aggiungi una riga di colore blu con spessore pari a 40 pixel e larga quanto lo schermo.

I tag di gestione del testo (text level)

Il carattere usato nella pagina può essere modificato mediante il tag <font> che
possiede l’end-tag </font>. Permette di formattare il testo in base a quanto specifi-
cato negli attributi che ne definiscono il tipo di carattere, il colore e la dimensione.
Sulla dimensione dei caratteri vi
sono grosse limitazioni, in quanto
L’attributo face consente di mostrare un tipo di
l’HTML prevede soltanto 7 misu-
carattere. Tuttavia il carattere che abbiamo scel- re diverse. Vediamo di seguito gli
to non può essere visualizzato qualora l’utente attributi uno per uno.
non abbia caricato il font nel proprio sistema
operativo. Consigliamo pertanto di utilizzare font Il tipo di carattere (face)
diffusi come Arial e Times New Roman per evita-
Permette di modificare il tipo di
re problemi di compatibilità.
font utilizzato per visualizzare le
16
 Introduzione all’HTML · L1

parole. Si può indicare più di un carattere in quanto non tutti i font sono installati
su ogni sistema. Il browser cerca il primo tipo di carattere disponibile nel sistema, se
non lo trova passa al successivo e così via. Se nessun carattere specificato è presente
nella macchina dell’utente, il browser utilizza il carattere predefinito.

La dimensione del carattere (size)

Permette di modificare la dimensione del carattere. Può essere espresso in valore
assoluto con un intero tra 1 e 7 oppure in valore relativo compreso tra −7 e +7.
Il valore di default è 3 e corrisponde a circa 12 punti tipografici. Se si inserisce un
valore diverso viene sempre utilizzato il valore intero più vicino compreso tra 1 e 7.
Il colore del carattere (color)
Permette di modificare il colore del testo marcato. La sintassi è molto semplice,
basta scrivere il codice del colore RGB dopo l’attributo color.
ESEMPIE
Modifica del font del testo (FILE: font.html)
<font face=”courier” color=”darkblue”>courier darkblue</font><br />
<font face=”times new roman” color=”#b05022”>times new roman colore persona-
lizzato</font><br />
<font face=”verdana”>verdana</font><br />
<font face=”comic sans ms”>comic sans</font><br />
<font face=”courier new”>courier new</font><br />
<font face=”comic sans ms” size=1>www.hoepli.it - dimensione 1</font><br />
<font face=”comic sans ms” size=2>www.hoepli.it - dimensione 2</font><br />
<font face=”comic sans ms” size=3>www.hoepli.it - dimensione 3</font><br />
<font face=”comic sans ms” size=4>www.hoepli.it - dimensione 4</font><br />
<font face=”comic sans ms” size=5>www.hoepli.it - dimensione 5</font><br />
<font face=”comic sans ms” size=6>www.hoepli.it - dimensione 6</font><br />
<font face=”comic sans ms” size=7>www.hoepli.it - dimensione 7</font><br />
<font face=”comic sans ms” size=0>www.hoepli.it - dimensione 0 (reale 1)</
font><br />
<font face=”comic sans ms” size=+2>www.hoepli.it - dimensione maggiorata
di2</font>

17
L1 · Introduzione all’HTML

Prova adesso!
◗ Ricorrere alla modifica
Apri il file font.html del colore e della dimen-
sione del carattere
◗ Utilizzare il tag <font>
1. Rettifica il documento modificando il colore delle righe di di-
◗ Utilizzare il tag <b> <i>
mensione dispari.
2. Aggiungi due righe con testo a piacere in grassetto corsivo di
carattere Calibri dimensione 2 e 7.

La definizione del carattere

La definizione ulteriore del carattere viene stabilita dai delimitatori di grassetto,
sottolinea, corsivo, apice e pedice. Vediamo di seguito quali sono i tag che permet-
tono di ottenere gli effetti citati sopra, denominati stili fisici.
◗◗Il tag <b> attiva il carattere grassetto o neretto; la B in inglese è l’iniziale di
Bold.
◗◗Il tag <u> attiva il carattere sottolineato; la U in inglese è l’iniziale di Underscored.
◗◗Il tag <i> attiva il carattere corsivo o italico; la I in inglese è l’iniziale di Italic.
◗◗Il tag <s> attiva la cancellatura visibile; la S in inglese è l’iniziale di StrikeOut.
◗◗Il tag <tt> attiva la monospaziatura; TT in inglese sono le iniziali di TeleType.
◗◗Il tag <sup> attiva il carattere apice; SUP in inglese corrisponde a Superscript.
◗◗Il tag <sub> attiva il carattere pedice; SUB in inglese corrisponde a Subscript.

ESEMPIE
Definizione del carattere in vari stili (FILE: stile.html)

Testo normale<br />

<b>Testo grassetto<br />
<i>Testo grassetto e corsivo<br />
<u>Testo grassetto e corsivo sottolineato<br />
</u></i></b>
<s>Testo barrato</s><br />
<tt>Testo in monospaziatura, significa che tutte le lettere
hanno la stessa larghezza. Per esempio la lettera “i” occupa
lo stesso spazio della “m”</tt><br />
La formula dell’acqua: H₂O<br />
Le aree si misurano in: Km²

18
 Introduzione all’HTML · L1

ESEMPIE
Le intestazioni
Il marcatore di gestione delle intestazioni ha il compito di evidenziare i titoli all’in-
terno del documento. La sintassi prevede il tag iniziale <hn> (Header), che in ingle-
se significa appunto titolo o intestazione, seguito da un numero (n) compreso tra 1
e 6 che identifica la dimensione, secondo la seguente sintassi:
<hn align=”allineamento”>

Prevede l’uso di un tag di chiusura. Il numero n associato al tag ne definisce, oltre

alla dimensione, anche l’importanza; l’importanza e quindi la dimensione sono
proporzionali a tale numero. È inoltre prevista la spaziatura di paragrafo rispetto
agli elementi che seguono e può supportare l’attributo align.
ESEMPIE
Intestazione paragrafi (FILE: intestazioni.html)
<h1 align=”center”>titolo 1</h1>
<h2 align=”right”>titolo 2</h2>
<h3 align=”left”>titolo 3</h3>
<h4 align=”center”>titolo 4</h4>
<h5 align=”right”>titolo 5</h5>
<h6 align=”left”>titolo 6</h6>

AreaDigitale
Verifica le competenze acquisite

19
 L1 · Introduzione all’HTML
Esercitiamoci

1 Crea una pagina html che mostri alcuni paragrafi come indicato dalla figura seguente:

2 Crea un documento html, utilizzando i comandi che hai imparato, come indicato dalla seguente figura:

3 Crea un documento html, utilizzando i comandi che hai imparato, come indicato dalla seguente figura:

4 Crea un documento html, utilizzando i comandi che hai imparato, come indicato dalla seguente figura:

AreaDigitale
Esercizi per l'approfondimento

20
 Introduzione all’HTML · L1

Scheda di autovalutazione
Conoscenze Scarso Medio Ottimo
Ruolo e significato del WWW { { {
Scopo del browser { { {
Formato di un URL { { {
Struttura di un documento HTML { { {
Differenza tra informazione strutturata e destrutturata { { {
Sintassi HTML { { {
Differenza tra tag normali e empty tag { { {
Capire il significato di validazione di un sito { { {
Significato di colore RGB { { {
Il ruolo del tag doctype { { {

Competenze Scarso Medio Ottimo

Editare pagine HTML { { {
Visualizzare una pagina HTML localmente tramite il browser { { {
Settare i margini della pagina { { {
Modificare il colore o l’immagine di sfondo { { {
Creare paragrafi p e div { { {
Formattare il testo { { {
Creare righe di varia dimensione e colore { { {

21
2
LEZIONE

In questa lezione
INSERIAMO IMMAGINI impareremo
 a utilizzare i tag di
ED ELENCHI inserimento immagini
 a utilizzare i tag per la
NELLA PAGINA formattazione degli elenchi

Le immagini
Le immagini che possono essere inserite in una pagina web arricchiscono i contenu-
ti integrando il testo. I formati grafici che si possono inserire in una pagina web sono
fondamentalmente di tre tipi:
◗◗il formato GIF (Graphics Interchange Format);
◗◗il formato JPEG o JPG ( Joint Photographic Expert Group);
◗◗il formato PNG (Portable Network Graphics).
Il formato GIF supporta le animazioni e la trasparenza ma al massimo 256 colori,
mentre il formato JPG permette moltissimi colori ma non supporta né le animazio-
ni né la trasparenza.
Il formato PNG incorpora le caratteristiche dei formati GIF e JPG in quanto pos-
siede un’alta qualità e consente di avere uno sfondo trasparente. Il formato GIF è il
formato grafico creato da CompuServe e il più utilizzato su Internet. Si tratta di un
formato grafico nato per rispondere all’esigenza di una codifica in grado di essere
usata su più sistemi diversi. Questo formato permette immagini con al massimo 256
colori, perciò è poco adatto per le foto ma è ottimo per grafica di tipo “cartoon”, cioè
con colori netti e diversi, senza tonalità.
Il formato JPG è un formato più recente. Gestisce immagini a 16 milioni di colori e
quindi è molto adatto per immagini fotografiche. Il formato prevede una decodifica
22
 Inseriamo immagini ed elenchi nella pagina · L2

di 16 milioni di colori all’interno del file, anche se all’interno di un’immagine non

vengono utilizzati tutti. Il formato GIF invece permette un’ottimizzazione dei co-
lori, quindi un’ulteriore compressione del file che contiene l’immagine. Il formato
JPG permette, in fase di creazione, di definire il livello di compressione, che può
essere elevato, ottenendo in tal modo un risparmio di dimensione del file, oppure
ridotto per una maggiore qualità dell’immagine. Si tenga presente che più alto è
il livello di compressione, maggiore è la perdita di qualità dell’immagine finale. Il
formato GIF permette l’interlacciamento o interleave.
Quando una figura viene caricata in un documento HTML, si osserva che essa si
compone riga per riga, soprattutto se la connessione è piuttosto lenta, con la conse-
guenza che finché l’immagine non viene caricata completamente non se ne capisce
il contenuto. Questo avviene in quanto i pixel dell’immagine vengono memorizzati
sequenzialmente all’interno del file .gif.
Per inserire un’immagine si utilizza il tag <img>, iniziale di Image, che non possiede
tag di chiusura, secondo questa sintassi:
<img src=”percorso/ImmagineDaInserire”>

Supponendo di avere un’immagine di tipo JPG chiamata Immagine.jpg, il codice

HTML per visualizzarla nel browser è:
<img src=”immagine.jpg”>

Si ottiene la visualizzazione dell’immagine nel punto esatto in cui compare il tag,

senza lasciare spazi o a capo prima o dopo l’immagine. Occorre tenere presente che i
file delle immagini che vengono inserite nelle pagine web dovrebbero essere memo-
rizzati all’interno di una cartella separata rispetto a dove risiede la pagina HTML.
La struttura del sito deve prevedere una cartella principale che racchiude tutto il
sito e almeno due cartelle, una per le pagine e una per le immagini.
Gli attributi del tag <img> permettono di variare alcune caratteristiche dell’imma-
gine e aggiungere alcuni elementi molto utili. Ecco la sintassi completa del tag:
<img src=”Immagine” border=”SpessoreBordo” width=”Larghezza”
height=”Lunghezza” align=”Allineamento” alt=”Frase
Alternativa” lowsrc=”Immagine Pre Caricata”>

L’attributo border permette di specificare un bordo attorno all’immagine di uno

spessore espresso in pixel oppure in percentuale. Gli attributi width e height per-
mettono di variare le dimensioni di base dell’immagine in larghezza e altezza mo-
dificandone anche le proporzioni; infatti i valori possono essere espressi anche in
percentuale, per esempio:
23
L2 · Inseriamo immagini ed elenchi nella pagina

<img src=”immagine.jpg” width=”120px” height=”80px” border=”0”>&

nbsp;&nbsp;
<img src=”immagine.jpg” width=”120px” height=”120px” border=”3”>
&nbsp;&nbsp;
<img src=”immagine.jpg” width=”80px” height=”120px” border=”6”>&
nbsp;&nbsp;
<img src=”immagine.jpg” width=”160px” height=”90px” border=”9”>

A volte il browser del client non è in grado di caricare le immagini o di visualizzarle corret-
tamente, sia perché le immagini sono di formato a lui sconosciuto sia perché la versione del
browser o del sistema operativo non lo consente. L’attributo alt permette di impostare un
commento che prende il posto dell’immagine qualora non venga caricata. L’attributo viene
usato anche per far apparire un commento quando il mouse passa sopra la figura.

Z¥¥M
Percorso locale dei file • Esistono due tipologie di percorsi: quelli relativi e quelli
assoluti. I primi indicano un percorso che non fa riferimento a una specifica unità,
ma solo alla cartella principale del sito. In tal modo si dice che il sito è portabile. Un
percorso è invece assoluto quando fa specifico riferimento all’unità o alla URL in
cui si trova il file. In tal caso, qualora si debba trasferire la pagina, non viene garan-
tito il reperimento delle informazioni. La sintassi del percorso assoluto di un file,
chiamato stile Unix, cioè quello usato in Internet è:
file://localhost/volume:pathname

in cui file è una parola chiave, mentre volume rappresenta l’unità che contiene il file,
quindi per esempio C:, D:, E: ecc. Da notare che il parametro localhost può anche
essere omesso. Quindi, se vogliamo visualizzare un’immagine presente nella cartella
Immagini del disco fisso:
<img src=”file:///C:/Documents and Settings/utente/Documenti/
Immagini/foto.jpg”>

24
 Inseriamo immagini ed elenchi nella pagina · L2

bisogna tenere presente che i percorsi locali in ambiente DOS e Windows utilizzano
il carattere di backslash (\) anziché lo slash normale (/). Il secondo carattere, oltre
a essere utilizzato dal sistema operativo Linux, è quello adottato nel web. Il primo,
compatibile con Windows, viene interpretato in Unix in maniera del tutto diversa.
Nei percorsi relativi, invece, si fa riferimento a una cartella senza partire dall’unità.
Per riferirsi alla cartella superiore si usa il simbolo punto punto slash (../) prima del
percorso da usare. In sostanza indicare “../” significa far riferimento alla directory
“padre” di quella corrente, quella cioè che la contiene; con “../nomecartella” si in-
dica perciò una cartella “parallela” a quella corrente. Per esempio, ipotizzando una
struttura di directory:

Se nel documento Pagina.html, che si trova nella directory home_sx, si vuole fare
riferimento all’immagine Immagine.jpg presente in home_dx basta indicare nel
percorso il simbolo “../” che fa riferimento alla directory superiore:
<img src=”../home_dx/immagine.jpg”>

Prova adesso!
Z Inserire immagini con
Crea il file esempio_immagini percorso relativo e
assoluto
Z Utilizzare il tag <IMG>
1. Inserisci uno sfondo a texture usando l’immagine sfondo.jpg.
e <DIV>
2. Inserisci l’immagine google-logo-4.png senza bordo allineata a
sinistra.
3. Modifica le dimensioni dell’immagine inserita nel punto 2 por-
tandola alla metà della dimensione originale, usando le percentuali.
. Crea una riga gialla e aggiungi l’immagine google-logo-1.jpg con bordo di 10 pixel allineata
a destra.
. Modifica le dimensioni dell’immagine inserita nel punto 3 portandola al 30% della dimen-
sione originale.

25
L2 · Inseriamo immagini ed elenchi nella pagina

Le liste
Le liste rappresentano un valido sistema per la rappresentazione di elenchi. Vengo-
no usate soprattutto in abbinamento a immagini GIF, spesso animate, oppure come
elenchi puntati usando caratteri di testo.
Si possono dividere in due categorie:
◗◗elenchi numerati o ordinati in modo progressivo;
◗◗elenchi puntati o non ordinati.

Elenchi numerati
Un elenco numerato è delimitato dal tag di apertura <ol>, che significa Ordered
List, ovvero lista ordinata, e dal tag </ol> di chiusura. Ogni elemento della lista
deve inoltre essere preceduto dal tag <li> (List Item). Mediante l’attributo type
si possono modificare gli stili dell’elenco. La tabella seguente mostra i principali
valori:

Alfabetica maiuscola (A. B. C. ecc.) <ol type=”A”>

Alfabetica minuscola (a. b. c. ecc.) <ol type=”a”>

Con numeri romani maiuscoli (I. II. III. ecc.) <ol type=”I”>

Con numeri romani minuscoli (i. ii. iii. ecc.) <ol type=”i”>

Con numeri (1. 2. 3. ecc.) <ol type=”1”>

Elenchi puntati
Il tag che li identifica è <ul> (Unordered List, lista non ordinata e non numera-
ta). La differenza principale è che gli elenchi indicizzati non sono legati da stretti
rapporti di successione gerarchica, per questo non sono previsti elenchi progressivi
quali numeri o lettere.
Per inserire dei simboli diversi dal “pallino nero” possiamo utilizzare l’attributo
type seguito dalle seguenti voci:

Pallini pieni <ul type=”disc”>

Pallini vuoti <ul type=”circle”>
Quadratini pieni <ul type=”square”>

26
 Inseriamo immagini ed elenchi nella pagina · L2

ESEMPIE
Elenchi numerati, puntati e misti (FILE: elenchi.html)
Elenchi numerati Elenchi puntati Elenchi misti
Elenco numerato: Elenco a pallini: Elenco strutturato:
<ol> <ul> <ul type=”circle”>
<li>Primo <li>Primo <li>Brasile</li>
<li>Secondo <li>Secondo <ul type=”square”>
<li>Terzo <li>Terzo <li>Fluminense</li>
<li>Etc. <li>Etc. <li>Botafogo</li>
</ol> </ul> </ul>
Elenco maiuscolo: Elenco a quadratini: <li>Francia</li>
<ol type=”a”> <ul type=”square”> <li>Germania</li>
<li>Primo elemento <li>Primo </ul>
<li>Secondo elemento <li>Secondo <ul type=”square”>
<li>Terzo elemento <li>Terzo <li>1934 in Italia</li>
<li>Etc. <li>Etc. <ol>
</ol> </ul> <li>Italia
</ol>
Elenco numeri romani: Elenco a pallini vuoti:
<li>1938 in Francia</li>
<ol type=”i”> <ul type=”circle”>
<ol>
<li>Primo elemento <li>Primo
<li>Italia
<li>Secondo elemento <li>Secondo
</ol>
<li>Terzo elemento <li>Terzo
<li>1950 in Brasile</li>
<li>Etc. <li>Etc.
<ol>
</ol> </ul>
<li>Uruguay
</ol>
</ul>
<ol>
<li>Italia
<ol type=”a”>
<li>Basilicata
<li>Lombardia
<li>Veneto
</ol>
<li>Francia
<ol type=”a”>
<li>Loira
<li>Provenza
</ol>
<li>Germania
<ol type=”a”>
<li>Baden Baden
</ol>

ESEMPIE
27
Other documents randomly have
different content
different effect upon you at any rate. You waste all your spare time
upon it, and the consequence is, you are getting to be a worthless,
disobedient boy.”
“But, father, I must have something to read.”
“Don’t I know that; and don’t I get you a new book every
Christmas? Where’s that volume entitled ‘Thoughts on Death; or,
Lectures for Young Men,’ that I bought for you three weeks ago? You
haven’t looked into it, I’ll warrant.”
Mr. Harris was wrong there. Guy had looked into it, and he had
tried to read it, but it was written in such language that he could not
understand it. At the time his father gave him this book he had
presented Ned with a box of fine water-colors—the very thing Guy
had long wished for. Why had not Mr. Harris consulted the tastes and
wishes of the elder, as well as those of the younger son?
“Return that book and paper to their owner at once, and don’t
bring anything like them into this house again,” repeated Mr. Harris.
“May I visit with Henry a little while?” asked the boy.
“Well—I—y-es. You may stay there a quarter of an hour.”
“It’s a wonder,” thought Guy, as he picked up his cap and started
for Mr. Stewart’s house. “Why didn’t he tell me that home is the
place for me after dark? That’s the reply he generally makes.”
As Guy climbed over the fence that ran between his father’s yard
and Mr. Stewart’s he heard a great noise and hubbub. He listened
and found that the sounds came from the house he was about to
visit.
As he drew nearer he saw that one of the window curtains was
raised, and that he could obtain a view of all that was going on in
Mr. Stewart’s back parlor. The occupants were engaged in a game of
blind-man’s buff. Mr. Stewart, his eyes covered with a handkerchief,
and his hands spread out before him, was advancing cautiously
toward one side of the room, evidently searching for Henry, who had
squeezed himself into one corner, with a chair in front of him. The
other children were probably trying to divert their father’s attention,
for two of them were clinging to his coat-tails, while the eldest
daughter would now and then go up and pull his whiskers or pat him
on the back. Mrs. Stewart sat in a remote corner sewing and smiling
pleasantly, seemingly unmindful of the deafening racket raised by
the players.
“Humph!” said Guy, “it will be of no use for me to ask Henry to go
with me. I wouldn’t go myself if I had a home like this. How would
my father look with a handkerchief over his eyes, and Ned and me
hanging to his coat-tails? And wouldn’t mother have an awful
headache though, if this was going on in her house?”
It certainly was a pleasant scene that Guy looked in upon, and he
stood at the window watching the players until he began to be
ashamed of himself. Then he mounted the steps and knocked at the
door.
Mrs. Stewart admitted him, and he entered the parlor just in time
to see Henry’s father pounce upon him and hold him fast.
“Aha! I’ve caught you, sir,” said Mr. Stewart, with a laugh that did
one’s heart good, “and now we had better stop, for we are arousing
the neighbors. Here’s Guy come in to see what’s the matter.”
“No, sir,” replied the visitor, “I just came over to return a book and
paper I borrowed of Henry.”
“Why, you haven’t read them, have you?” asked his friend. “I gave
them to you only yesterday.”
“I know it; but father told me to bring them back. He won’t permit
me to read them. He says they are nothing but trash.”
Henry elevated his eyebrows and looked at his father, who in turn
looked inquiringly at Guy.
“Does your father ever read the New York Magazine?” asked Mr.
Stewart.
“No, sir!” replied Guy emphatically.
 “Ah! that accounts for it. If he would take the trouble to look at it,
he might change his opinion of it. A paper that numbers ministers
among its contributors, that advocates temperance and reform, and
shows up the follies of the day in its stories, can’t be a very
dangerous thing to put into the hands of the youth of the land. Here
is an article by a minister in the paper we have been reading to-
night. Take it over and show it to your father.”
“I wouldn’t dare do it, sir,” returned Guy blushing. “He told me to
guide Nick Whiffles out of the house, and never guide him in again.”
“Oh, that’s where the shoe pinches, is it? Well, I think Nick very
good in his place. Indeed, I confess to a great liking for the old
fellow.”
“He’s just splendid,” said Henry.
“All work and no play makes Jack a dull boy, you know,” continued
Mr. Stewart. “After you and Henry have sat for six long hours on
your hard desk at school, a game of ball or a sail on the lake does
you a world of good. If you should live a week or two on corn bread
and bacon, or pork and beans, you would be glad to have a piece of
pie or cake, wouldn’t you? The mind requires recreation and change
as much as the body, and where can you find it if it be not in a good
story by some sprightly author? Of course the thing can be carried to
excess, and so can eating. One can read himself into an unhealthy
frame of mind as easily as he can gorge himself into dyspepsia.”
When Mr. Stewart had said this much he stopped and took up his
paper. It wasn’t for him to criticise or find fault with the rules his
neighbor had made regarding his son’s reading.
Guy, having an object to accomplish before he returned home,
and knowing that time was precious, declined the chair offered him,
and after taking leave of the family, intimated to Henry that he had
something particular to say to him. The latter accompanied him to
the fence, and Guy leaned upon it, utterly at a loss how to broach
the subject uppermost in his mind.
 CHAPTER IV.

THE READING LESSON.

UY DID not know how to begin the conversation. He wanted to

approach the subject gradually, for he believed that some
little strategy would be necessary in order to bring Henry to
his way of thinking, but somehow the words he wanted would not
come, and seeing that his friend was getting impatient, he plunged
into it blindly:
“How would you like to be a hunter and trapper?” he asked.
“I don’t know anything about trapping, but I like hunting as well
as any boy in the world,” said Henry.
“I mean how would you like to make a business of it, and spend
your life in the woods or on the prairie?”
“I don’t know, but I am going to try it a little while this fall. Father
owns some land in Michigan that he has never seen, and about the
first of September he and I are going up to take a look at it. His
agent writes that game is abundant, and I am going to buy a rifle
before we start.”
“Well, if I had a chance like that I’d never come back again. I’d
stay in the woods.”
“Oh, my father wouldn’t let me.”
“I don’t suppose he would, but you could do as I intend to do—
run away.”
 Henry straightened up and looked at his companion without
speaking.
“Oh, I mean it,” said Guy with a decided nod of his head. “I am
tired of staying here. I am weary of this continual scolding and fault-
finding, and am going to get away where I can take a little comfort.
I have always wanted to be a hunter. I have got my plans all laid,
and I want some good fellow for a companion, for I should be lonely
if I were to go by myself. I’d rather have you than anybody else, and
if you will go we’ll take the ‘Boy Trappers’ with us. That book will tell
us just what we will have to do. It tells how to build wigwams, how
to trap beaver and otter, and catch fish through the ice; how to
make moccasins, leggings and hunting-shirts; how to catch wild
horses; how to preserve the skins of wild animals—in fact,
everything we want to know we will find there.”
“Where do you want to go?” asked Henry.
“Out to the Rocky Mountains.”
“What will you do when you get there?”
“We’ll hunt and trap during the spring and fall, and when summer
comes we’ll jump on our horses, take our furs to the trading-posts
and sell them.”
“And what will we do during the winter?”
“We’ll have a nice little cabin in some pleasant valley among the
mountains, such as the boy trapper had, and we’ll pass the time in
curing our furs and fighting the Indians. That is what they did, you
know. I tell you, Hank,” said Guy with great enthusiasm, “it wouldn’t
be long before we would become as famous as either Kit Carson or
Captain Bridges! What’s the matter with you?” he added, looking
suspiciously at his friend, who seemed on the point of strangling.
Henry, who had listened in utter amazement to what Guy had to
say, could control himself no longer. Clinging to the fence with both
hands he threw back his head and broke out into a shout of laughter
that was heard full a block away.
 “I don’t see anything so funny about it,” said Guy indignantly. “I
am in earnest.”
“Oh, dear!” said Henry, after he had laughed until his jaws and
sides ached. “I know this will be the death of me. Why, Guy, what in
the world put such a ridiculous notion into your head?”
“I don’t call it a ridiculous notion. If the boy trappers could live
that way I don’t see why we couldn’t. I guess we are as smart and
as brave as they were.”
This set Henry to going again. It was some minutes before he
could speak.
“Do you believe that book is true?” he asked.
“Of course I do.”
“Why, Guy, I didn’t think you were such a dunce. The idea that
three boys, the oldest of them only seventeen years of age, could
live as they did, surrounded by savage beasts and hostile Indians,
and get into such scrapes as they did, and come out without a
scratch. Common sense ought to teach you better than that. Those
boy trappers never had an existence except in the brain of the man
who wrote the book.”
“Then why did he write it?” demanded Guy.
“What makes you play base-ball and cricket, and why do you go
fishing and boat-riding every chance you get? Such sports are not
necessary to your existence—you could live without them—but they
serve to fill up the time when you don’t feel like doing anything else.
That’s one reason why books like ‘Boy Trappers’ are written—to keep
you in the house and help you while away a leisure hour that you
might otherwise spend in the streets with bad boys. Oh, Guy! Guy!”
“Now, don’t you begin your laughing again,” said his companion.
At this moment a door opened and the boys heard Mr. Harris
calling.
“Guy!” he shouted.
 “Sir!” was the response.
“Come in now.”
“What’s the matter?” asked Henry.
“Oh, we have a reading lesson every night, and I have to help,”
replied Guy with great disgust. “We’re reading Bancroft’s History of
the United States, and I despise it. I can’t understand half of it, but
father makes me read aloud twenty minutes every night, and scolds
because I can’t tell him the meaning of all the hard words. Now,
Hank, are you going with me or not?”
“Of course I am not. I’ll not give up such a home, and such a
father and mother as I’ve got for the sake of living in a wilderness all
my life.”
“Well, you won’t repeat what I have said to you, will you?”
“No, indeed; but you must promise me that you will give up that
idea.”
“All right, I will.”
“You’ll never speak of running away from home again, or even
think of it?”
“No, I never will—honor bright.”
“Then you may rely upon me to keep your secret. Now I have a
plan to propose: Let’s go fishing on the pier to-morrow—it’s
Saturday, you know—and talk the matter over. I can convince you in
five minutes that you had better stay at home. Come over early—say
five o’clock.”
“I’ll see what father says about it; good-night. I might have known
better than to ask him to go with me,” added Guy mentally, as he
walked slowly toward the house. “If I had as pleasant a home as he
has I wouldn’t go either. Why don’t my father and mother take some
interest in me, and talk to me as Mr. and Mrs. Stewart talk to Hank?
I haven’t changed my mind, and I never shall. I promised that I
would never again think of running away from home, but I did it just
to keep Hank’s mouth shut. As long as he thinks I have given up the
idea, he won’t say a word to anybody. He’ll be astonished some fine
morning, for I shall leave here as soon as I can scrape the money
together. I wish I could find a pocket-book with a hundred dollars in
it. I’d never return it to the owner, even if I found him. I must try
Bob Walker now.”
When Guy entered the sitting-room he found his father and
mother waiting for him. The former handed him an open volume of
Bancroft’s History and Guy, seating himself, began reading the
author’s elaborate description of the passage of the Stamp Act and
the manner in which it was received by the colonists—a subject in
which he was not in the least interested. His father often took him to
task for his bad reading and pronunciation, but he managed to get
through with the required twenty minutes at last, and with a great
feeling of relief handed the book to his mother and moved his chair
into one corner of the room. In forty minutes more the lesson was
ended and Mr. Harris turned to question Guy on what had just been
read. To his surprise and indignation he saw him sitting with his feet
stretched out before him, his chin resting on his breast and his eyes
closed. The boy was fast asleep.
“Guy!” Mr. Harris almost shouted.
“Sir!” replied his son, starting up quickly and rubbing his eyes.
“This is the way you give attention to what is going on, and repay
the pains I am taking to teach you something, is it?” demanded his
father. “Do you think ignorance is bliss? You don’t know anything a
boy of your age ought to know. Tell me how many distinct forms of
government this country has passed through.”
“I can’t,” replied Guy.
“Who was the third President of the United States?”
“I don’t know.”
“What were the names of the two men who were hanged in effigy
by the Massachusetts colonists when the news of the passage of the
Stamp Act was received?”
“I don’t know,” said Guy again.
“And yet that is just what we have been reading about to-night. I
saw a picture in that paper you had in your possession a little while
ago,” continued Mr. Harris with suppressed fury. “It was a man
dressed in furs, who stood leaning against a horse, holding a gun in
one hand and stretching the other out toward a dog in front of him.
Who was that man intended to represent?”
“Nick Whiffles,” said Guy promptly.
“What was the name of his dog?”
“Calamity.”
“Did his horse have a name?”
“Yes, sir—Firebug; and he called his rifle Humbug.”
“There you have it!” exclaimed Mr. Harris with a sneer. “You know
all about that, and you’ve no business to know it either, for it will do
you more harm than good. If we had been reading that trash to-
night you would have been wide-awake and listening with all your
ears; but because we were reading something worth knowing—
something that would be of benefit to you in after life, if you would
take the trouble to remember it—you must needs settle yourself and
go to sleep. Now, then, draw up beside this table and read five
pages in that history; and read them so carefully, too, that you can
answer any question I may ask you about them to-morrow.”
Guy, so sleepy that he could scarcely keep his eyes open,
staggered to the chair pointed out to him and sat down, while his
father once more picked up the evening paper and his mother
resumed her needle.
When he had read the required number of pages and looked them
over two or three times to fix the names and dates in his memory,
he arose and put the book away in the library.
“Father,” said he.
 “Don’t you know that it is very rude to interrupt a person who is
reading?” replied Mr. Harris, looking up from his paper. “What do you
want?”
“May I go fishing with Henry Stewart on the pier to-morrow?”
“No, sir, you may stay at home. A boy who behaves as you do
deserves no privileges. I have learned that I cannot trust you out of
my sight.”
Knowing that it would not be safe to show any signs of anger or
disappointment, Guy kept his face as straight as possible and turned
to leave the room. But when he put his hand on the door-knob his
father called to him.
“Guy,” said he, “where are you going?”
“I am going to bed.”
“And do you intend to leave us with that frown on your face and
without bidding us good-night? One or the other of us might die
before morning and then you would be sorry you parted from us in
anger. I’ve a good mind to whip you soundly, for if ever a boy
deserved it you do. Come back here and kiss your mother.”
Almost ready to yell with rage, Guy returned and kissed his
mother, who presented her cheek without raising her eyes from her
novel, bid his father good-night, and this time succeeded in leaving
the room without being called back.
When he was safe out of his father’s sight he turned and shook his
fist at him, at the same time muttering something between his
clenched teeth that would have struck Mr. Harris motionless with
horror could he have heard it. He went to bed with his heart full of
hate, and not until his mind wandered off to other matters, and he
begun to dream of the wild, free and glorious life he expected to
lead in the mountains and on the prairies of the Far West, did he
recover his usual spirits. He fell asleep while he was building his air-
castles, and awoke to hear the breakfast bell ringing and to see the
morning sun shining in at his window.
 When he descended to the dining-room he was met by Ned, who
was dressed in his best, and who informed him, with evident
satisfaction, that Henry Stewart had been over to see if he was
going fishing, and that his father had said that he couldn’t go to the
pier or do anything else he wanted to do until he had learned to
behave himself. Ned added that he and his father and mother were
going to ride out to visit Uncle David, who lived nine miles in the
country, and that he, Guy, was to be left at home because there was
no room in the buggy for him, and that he was not to stir one step
outside the gate until their return.
“I’ll show you whether I will or not,” said Guy to himself. “It’s a
pretty piece of business, indeed, that I am to be shut up here at
home while the rest of you go off on a visit. I won’t stand it. I’ll see
as much fun to-day as any of you, and if I only had all the money I
need, you wouldn’t find me here when you return.”
Breakfast over, the buggy was brought to the door, and Mr. Harris,
after assisting his wife and son to get in, turned to say a parting
word to Guy.
He was to remain in the yard all day, bring no boys in there to
play with him, and be very careful not to get into any mischief. If
these commands were not obeyed to the very letter there would be
a settlement between them when Mr. Harris came back.
Guy drew on a very long face as he listened to his father’s words,
meekly promised obedience and opened the gate for his father to
drive out. He watched the buggy as long as it remained in sight and
then, closing the gate, jumped up and knocked his heels together,
danced a few steps of a hornpipe, and in various other ways testified
to the satisfaction he felt at being left alone.
“I shouldn’t feel sorry if I should never see them again,” said he.
“I am my own master to-day, and I am going to enjoy my liberty,
too. But before I begin operations I must put Bertha and Jack on the
wrong scent. They would blow on me in a minute.”
 Guy once more assumed a very sober expression of countenance,
and walked into the kitchen where the servant-girl was at work.
“Bertha,” said he, “I am going up to my curiosity shop, and I don’t
want to be disturbed. You needn’t get dinner for me, for I sha’n’t
want any.”
“I am glad of it,” replied the girl, “I am going visiting myself to-
day.”
Guy strolled out to the carriage-house, and here he found Jack,
the hostler and man-of-all-work, to whom he gave nearly the same
instructions, adding the request that if any of his young friends
called to see him, Jack would say to them that Guy had gone off
somewhere, which, by the way, had Jack had occasion to tell it,
would have been nothing but the truth.
The hostler promised compliance, and Guy, having thus opened
the way for the carrying out of the plans he had determined upon,
went up to his curiosity shop, locking the door behind him, and
putting the key into his pocket. He lumbered about the room for a
while, making as much noise as he conveniently could, to let Bertha
and Jack know that he was there, and then stepped to the window
that overlooked the garden and peeped cautiously out. Having made
sure that there was no one in sight, he crawled out of the window,
feet first, and hanging by his hands, dropped to the ground. As soon
as he touched it he broke into a run, and making his way across the
garden, scaled a high board-fence, dropped into an alley on the
opposite side, and in a few minutes more was two blocks away.
“There!” he exclaimed, as he slackened his pace and wiped his
dripping forehead with his handkerchief; “that much is done, and no
one is the wiser for it. Now, the first thing is to go down to Stillman’s
and buy a copy of the Journal. I wrote to the editors of that paper
three weeks ago, telling them that I am going to be a hunter, and
asking what sort of an outfit I shall need, and how much it will cost,
and I ought to get an answer to-day.
 “The second thing is to hunt up Bob Walker and feel his pulse. He
once told me that he would run away and go to sea if his father ever
laid a hand on him again, so I know I shall have easy work with him.
He won’t be as pleasant a companion, though, as Henry Stewart, for
he swears, and is an awful overbearing, quarrelsome fellow. But I
can’t help it; I must have somebody with me.”
A walk of a quarter of an hour brought Guy to Stillman’s news-
depot, where he stopped and purchased a copy of the paper of
which he had spoken. Seeing a vacant chair in one corner of the
store, he seated himself upon it, and with trembling hands unfolded
the sheet, looking for the column containing the answers to
correspondents. When he found it he ran his eye over it until it
rested on the following paragraph:
“An Abused Dog.—If you are going to become a hunter you will need an
expensive outfit. A good rifle will cost from $25 to $75; a brace of revolvers,
from $16 to $50; a hunting-knife, $1.25 to $3.50. Then you will need a
hatchet or two, an abundance of ammunition, blankets, durable clothing,
horse, etc., which, together with your fare by rail and steamer to St. Joseph,
will cost you at least $200 more. We know of no hunter or trapper to whom
we could recommend you, and neither can we say whether or not you will be
able to find a wagon train that you could join. Now that we have answered
your questions, we want to offer you a word of advice. Give up your wild idea,
and never think of it again. As sure as you are a live boy, it will end in nothing
but disappointment and misery. We are inclined to believe that the story of
your grievances is greatly exaggerated; but even if it is not, you cannot better
your condition by running away from home. Your parents have your welfare at
heart, and if you are wise you will remain with them, even though their
requirements do sometimes seem harsh and unnecessary. It may be that you
will some day be left to fight your way through the world with no father or
mother to advise or befriend you, and then you will find how hard it is. Take
our word for it, if you live to be five years older, you will laugh at yourself
whenever you reflect that you ever thought seriously of becoming a
professional hunter.”

Guy read this paragraph over twice, and then folded the paper
and walked slowly out of the store.
 CHAPTER V.

A SAIL ON THE LAKE.

T IS beyond my power to describe Guy’s feelings at that

moment. He had never in his life been more grievously
disappointed. It had never occurred to him that anybody who
knew anything would discourage his project, much less the editors
of his favorite journal, to whom he had made a full revelation of his
circumstances and troubles. And then there was the expense, which
greatly exceeded his calculations. That was the great drawback.
“Humph!” soliloquized Guy, after he had thought the matter over,
“the man who wrote that article didn’t know my father and mother.
If he did, he wouldn’t be so positive that everything they do is for
the best. I know better, and won’t give up my idea. I am determined
to succeed. There are plenty of men who make a living and see any
amount of sport by hunting and trapping, and why shouldn’t I? Kit
Carson is a real man and so is Captain Bridges. So is Adams, the
great grizzly bear tamer. One of these days, when I am as famous as
they are, I shall laugh to think I did become a professional hunter.
But the money is what bothers me now. I shall need at least three
hundred dollars. Great Cæsar! Where am I to get it? I’ve worked
and scraped and saved for the last six months, and I’ve got just
fifteen dollars. That isn’t enough to buy a rifle. Where is the rest to
come from? That’s the question.”
Guy walked along with his hands behind his back and his eyes
fastened thoughtfully on the ground, revolving this problem in his
mind. His prospects did not look nearly so bright now as they did an
hour ago. He was learning a lesson we all have to learn sooner or
later, and that is that we cannot always have things as we want
them in this world, and that the best laid schemes are often
defeated by some unlooked-for event. Three hundred dollars! He
never could earn that amount. His rags brought him but two cents a
pound, and although he kept a sharp lookout and pounced upon
every piece of cloth he found lying about the house, it sometimes
took him a whole month to fill his bag, which held just five pounds.
Old iron was worth only a cent a pound, and business in this line
was beginning to get very dull, for he had not found a single
horseshoe during the last two weeks, and he had purchased the last
thing in the shape of broken frying-pans and battered kettles that
any of his companions had to dispose of. He must find some other
way to earn money. He had thought of carrying papers, which would
add a dollar and a quarter a week to his income, besides what he
would make out of his Carriers’ Addresses on New Years. But Mr.
Harris had vetoed that plan the moment it was proposed.
Guy did not know what to do next.
“Dear me, am I not in a fix?” he asked himself. “I read in the
paper the other day of a boy picking up five thousand dollars that
some banker dropped in the street. Why wasn’t I lucky enough to
find it? That banker might have whistled for his money when once I
got my hands upon it. I must have three hundred dollars and I don’t
care how I get it.”
Guy was gradually working himself into a very dangerous frame of
mind. When one begins to talk to himself in this way it needs only
the opportunity to make a thief of him. If Guy thought of this, he did
not care, for he continued to reason thus, and was not at all alarmed
when a daring project suddenly suggested itself to him. Twenty-four
hours ago he would not have dared to ponder upon it; but now he
allowed his thoughts to dwell upon it, and the longer he turned it
over in his mind the more firmly he became convinced that it was a
splendid idea and that it could be successfully carried out. He
wanted to get away by himself and look at the matter in all its
bearings. With this object in view he turned down Erie Street and
bent his steps toward Buck’s boat-house, intending to spend an hour
or two on the lake. In that time he believed he could make up his
mind what was best to be done.
Arriving at the boat-house, Guy entered and accosted the
proprietor, who stood behind his bar dispensing liquor and cigars to
a party of excursionists who had just returned from a sail on the
lake.
“Mr. Buck, is the Quail in?” asked Guy, giving the name of his
favorite sail-boat.
“Yes, she is,” replied a voice at his elbow; “but what do you want
with her?”
Guy recognized the voice and turned to greet the speaker. He was
a boy about his own age, who sat cross-legged in an arm-chair
beside the door, his hat pushed on the side of his head rowdy
fashion, one hand holding a copy of a sporting paper, and the other
a lighted cigar, at which he was puffing industriously. His name was
Robert Walker. He was a low-browed, black-haired fellow, and
although by no means ill-looking, there was something in his face
that would have told a stranger at the first glance that he was what
is called a “hard customer.” And his looks were a good index of his
character and reputation. He was known as one of the worst boys in
the neighborhood in which Guy lived. Parents cautioned their sons
against associating with him, for he would fight, smoke, swear like
any old sailor, and it was even whispered about among the boys
belonging to the Brown Grammar School that he had been seen
rather the worse for the beer he had drank. But Guy had always
admired Bob; he was such a free and easy fellow! Besides, he knew
so much that boys of his age have no business to know, that he was
looked upon even by such youths as Henry Stewart as a sort of
oracle. He and Guy represented two different classes of boys—one
having been spoiled by excessive indulgence, and the other by
unreasonable severity.
 Robert’s father was Mr. Harris’ cashier and book-keeper, and the
two families would have been intimate had not Bob been in the way.
The fathers and mothers visited frequently, but the boys never did;
their parents always tried to keep them apart. But in spite of this
they were often seen together on the streets, and a sort of
friendship had sprung up between them. This was the boy Guy
wanted for a companion on his runaway expedition, now that Henry
Stewart had declined his invitation.
“The Quail is in,” continued Bob, extending his hand to Guy, who
shook it cordially, “but you are just a minute too late. Mr. Buck is
going to get her out for me as soon as he is done serving these
gentlemen. However, seeing it is you, I’ll take you along, and we can
divide the expenses between us.”
“All right,” replied Guy. “Do you know that you are just the fellow I
want to see?”
“Anything particular?” asked Bob, knocking the ashes from his
cigar.
“Yes, very particular.”
“Well, that’s curious. During the last week I have had something
on my mind that I wanted to speak to you about—it’s a secret, too,
and one that I wouldn’t mention to any fellow but you—but
somehow I couldn’t raise courage enough to broach the subject.
We’ll go out on the lake where we can say what we please without
danger of being overheard. Let’s take a drink before we go. Come
on.”
“I am obliged to you,” answered Guy, “but I never drink.”
“Take a cigar, then.”
“No, I don’t smoke.”
“Nonsense. Be a man among men. Give me some beer, Mr. Buck.
Take a glass of soda, Guy. That won’t hurt you, and it is a
temperance drink, too.”
 Guy leaned his elbows on the counter and thought about it. This
was a temptation that he had never been subjected to before. What
would his father say if he yielded to it? But, on the whole, what
difference did it make to him whether his father liked it or not? He
was going away from home to be a hunter, and from what he had
read he inferred that hunters did not refuse a glass when it was
offered to them. If he was going among Romans, and expected to
hold a high place among them, he must follow their customs. So he
said he would take a bottle of soda, and when it was poured out for
him he, not understanding the etiquette of the bar-room, watched
Bob and followed his motions—bumped his glass on the counter,
said “Here are my kindest regards,” and drank it off.
“Now,” said Bob, smacking his lips over his beer, “we’re all ready.
I’ve got half a dollar’s worth of cigars in my pocket, and they will last
us until we get back.”
The boys followed Mr. Buck out of the house, and along a narrow
wooden pier, on each side of which were moored a score or more of
row and sail-boats of all sizes and models. When they reached the
place where the Quail was lying they clambered down into her, Mr.
Buck cast off the painter, and the little vessel moved away. Guy
never forgot the hour he spent on the lake that day. A week
afterward he would have given the world, had he possessed it, to be
able to wipe it out or live it over again.
As the harbor was long and narrow and the wind unfavorable,
considerable maneuvering was necessary, and for the first few
minutes the attention of Guy and his companion was so fully
occupied with the management of their craft that they could find no
opportunity to begin the discussion of the subject uppermost in their
minds. But when they rounded the light-house pier and found
themselves fairly on the lake, Bob resigned the helm to Guy, and
relighting his cigar, which he had allowed to go out, stretched
himself on one of the thwarts, and intimated that he was ready to
listen to what his friend had to say, adding:
 “You may think it strange, but I believe I can tell you, before you
begin, what you want to talk about.”
“You can!” exclaimed Guy. “What makes you think so?”
“The way you act, and the pains you are taking to make money.
Does your father know that you are a dealer in rags and old iron?”
“Of course not.”
“I thought so. What do you want with the little money you are
able to make in that way? You don’t see any pleasure with it, for you
never spend a cent. What are you going to do with that powder-
horn you’ve got hung up in your curiosity shop? It is of no use to
you, for your father won’t allow you to own a gun. And then there’s
that lead bullet-ladle, rubber blanket, and cheese-knife. They are not
worth the room they occupy as long as you stay here. But you are
laying your plans to run away from home, young man—that’s what
you are up to. Indeed, you have almost as good as said so in my
hearing two or three different times.”
“Well, it’s a fact, and there’s no use in denying it,” said Guy. “You
won’t blow on me?”
“Certainly not. That’s just what I wanted to see about, for I am
going to do the same thing myself.”
“Are you? Give us your hand. We’ll go together. I’m going to be a
hunter.”
“I know you are; I’ve heard you say so. I had some idea of
becoming a sailor, but since I have thought the matter over I have
made up my mind that your plan is the best. If one goes to sea he
has to work whenever he is ordered, whether he feels likes it or not;
but if he lives in the woods he is his own master, and can do as he
pleases. Have you any definite plan in your head?”
“Yes. As soon as I get money enough. I am going to step aboard a
propeller some dark night and go to Chicago. I can travel cheaper by
water than I can by land, you know, and money is an object, I tell
you. From Chicago I shall go to St. Joseph, purchase a horse and
whatever else I may need, join some wagon train that is going to
California, and when I reach the mountains and find a place that
suits me, I’ll stop there and go to hunting.”
“That’s a splendid plan,” said Bob with enthusiasm. “It is much
better than going to sea. When do you intend to start?”
“Ah! that’s just what I don’t know. I find by a paper I bought this
morning that I shall need at least three hundred dollars; and that’s
more than I can ever raise.”
“By a paper you bought!” repeated Bob.
“Yes; there it is,” said Guy, taking it from his pocket and tossing it
toward his companion. “You see I wrote to the editors, telling them
just how I am situated and what I intend to do, and they answered
my letter this week. Look for ‘An Abused Boy’ in the correspondents’
column, and you will see what they said.”
After a little search Bob found the paragraph in question, and
settled back on his elbow to read it.
When he finished, the opinion he expressed concerning it was the
same Guy had formed when he first read it.
“It is rather discouraging, isn’t it?” asked the latter.
“Not to me,” answered Bob. “These editors don’t know any more
than anybody else. Why should they? In the first place the man who
wrote this is not acquainted with our circumstances; and in the next,
he is not so well posted on the price of some things as I am. He says
a rifle will cost twenty-five dollars. Pat Smith has a cart-load of them,
good ones, too, that you can buy for twelve dollars apiece.”
“Is that so?” asked Guy.
“Yes; and after we get through with our sail we’ll go around and
look at them. He has hunting-knives, which he holds at a dollar and
a quarter. I know, because I asked the price of them. Blankets are
not worth more than five dollars per pair; and if you take steerage
passage on the steamer and a second-class ticket from Chicago you
can go through to St. Joseph for twenty-five dollars. Then how are
you going to spend the rest of your three hundred? Not for a horse,
certainly; for I have heard father say that when he went to California
in ’49 he bought a very good mustang for thirty dollars. However,”
added Bob, “it will be well enough to have plenty of money, for we
don’t want to get strapped, you know.”
“But where is it to come from?” asked Guy.
“I know. I have been thinking it over during the last week, and I
know just how to go to work. Perhaps you won’t like it, and if you
don’t you can go your way and I’ll go mine. Here, smoke a cigar
while I tell you about it.”
“No, no! I can’t smoke.”
“What will you do when we are in the mountains? There’ll be
plenty of stormy days when we can’t hunt or trap, and you’ll need a
pipe or cigar for company.”
“It will be time enough for me to learn after I get to be a hunter.”
“Perhaps it is just as well,” returned Bob, after a moment’s
reflection. “If I carry out my plans you will have to help me, and you
will need a clear head to do it. Listen now and I will tell you what
they are.”
Bob once more settled back on his elbow, and to Guy’s intense
amazement proceeded to unfold the details of the very scheme for
raising funds which he himself had had in contemplation when he
came to Mr. Buck’s boat-house, and which Bob proposed should be
put into execution at once, that very day.
Guy trembled with excitement and apprehension while he listened,
and nothing but the coolness and confidence with which his
companion spoke kept him from backing out. He had always
imagined that the day for the carrying out of his wild idea was in the
far future, and from a distance he could think of it calmly; but if
Bob’s plans were successful they would be miles and miles away ere
the next morning’s sun arose, and with the brand of thief upon their
brows.
He begun to realize now what running away meant. He did not
once think of his home—there was scarcely a pleasant reminiscence
connected with it that he could recall—but now that the great world
into which he had longed to throw himself seemed so near, he
shrunk back afraid. This feeling quickly passed away.
The wild, free life of which he had so often dreamed seemed so
bright and glorious, and his present manner of living seemed so
dismal by contrast that, feeling as he did, he could not be long in
choosing between them. He fell in with Bob’s plans and caught not a
little of his enthusiasm. He even marked out the part he was to play
in the scene about to be enacted, making some suggestions and
amendments that Bob was prompt to adopt.
The matter was all settled in half an hour later, and the Quail
came about and stood toward the pier. When she landed and the
boys entered the boat-house, Bob reminded Guy that it was his turn
to stand treat. The latter was prompt to respond, and won a nod of
approval from his companion by calling for a glass of beer.
Having settled their bill at the boat-house the boys started for the
gunsmith’s. There they spent twenty minutes in looking at the
various weapons and accouterments they thought they might need
during their career in the mountains, and Bob excited the
astonishment of his friend by selecting a couple of rifles, as many
hunting-knives, powder-horns, bullet-pouches and revolvers, and
requesting the gunsmith, with whom he seemed to be well
acquainted, to put them aside for him, promising to call in an hour
and pay for them.
“Isn’t that carrying things a little too far?” asked Guy when they
were once more on the street. “What if we should slip up in our
arrangements?”
“But I don’t intend to slip up,” returned Bob confidently. “There’s
no need of it. Why, Guy, what makes your face so pale?”
 “I feel nervous,” replied the latter honestly.
“Now don’t go to giving away to such feelings, for if you do you
will spoil everything. Remember that our success depends entirely
upon you. If I fail in doing my part the fault will be yours. But I must
leave you here, for it won’t be safe for us to be seen together. If you
are going to back out do it now before it is too late.”
“I’m not going to do anything of the kind. I’ll stick to you through
thick and thin.”
“All right. Remember now that when the South Church clock
strikes one I will be on the corner above your father’s store, and
shall expect to find you there all ready to start.”
“You may depend upon me,” replied Guy. “I’ll be there if I live.”
The two boys separated and moved away in nearly opposite
directions, their feelings being as widely different as the courses
they were pursuing. Bob, cool and careless, walked off whistling,
stopping now and then to exchange a pleasant nod with an
acquaintance, while Guy was as pale as a sheet and trembled in
every limb. It seemed to him that every one he met looked sharply
at him, and with an expression which seemed to say his secret was
known. He felt like a criminal; and actuated by a desire to get out of
sight of everybody, and that as speedily as possible, he broke into a
run, and in a few minutes reached his home.