Questa pagina contiene un errore di script. Nell’attesa che venga corretto dagli editori del sito, è possibile visualizzare qui di seguito una versione provvisoria dei contenuti.
Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.
In questo articolo impareremo come creare una semplice pagina web con il {{Glossario("HTML")}}.
| Prerequisiti: | Hai bisogno di un editore di testo e di sapere come aprire un file in un browser. |
|---|---|
| Obiettivo: | Creare una pagina web che puoi visualizzare con il browser. |
Sommario
La semplice pagina web è solo un documento {{Glossario("HTML")}}.Le uniche cose del quale hai bisogno sono un documento HTML valido sul tuo computer e un web browser.Vediamo come usare HTML {{Glossario("Tag","tags")}} e potrai essere in grado di vedere la pagina che hai creato nel browser.
Apprendimento attivo
Prima di tutto accertiamoci di avere un editore di testo che sia comodo e un web browser funzionante. Praticamente qualsiasi editore di testo può farlo, ad esempio Notepad in Windows o TextEdit sul Mac, ma assicurati di avere creato un semplice documento di testo (solo caratteri senza alcun supporto di formattazione). Se vuoi usare TextEdit sul MAc scegli "Make Plain Text" dal menu "Format.
Primo passo: Un file
una singola pagina web è fatta (almeno) da un file HTML, così inziamo a creare una di quelle che lo comporranno. Apri il tuo editore di testo e crea un nuovo file di testo poi scrivi qualcosa come nell'esempio:
<!DOCTYPE html> <html> <head> <title>Hi there</title> </head> <body> This is a page a simple page </body> </html>
Se vuoi puoi apportare delle modifiche rispetto all'esempio sentiti libero di aggiungere o cambiare il testo nel body o nel title e poi salva il file. Assicurati in fine di dare un nome al file con estensione ".html". Per esempio, potresti nominarla "my_page.html".
Adesso dovresti avere un file sul tuo computer che assomiglia a questo esempio nella cartella (lla somiglianza dipende dal tuo sistema opertivo):
Facendo un doppio click sul file si aprirà nel browser, per aprire il file direttamente sull' editore di testo al fine di modificarlo puoi: fare click con il tasto destro e scegliere di aprire il documento nell'editore di testo; oppure trascinare il documento all'interno dell'editore od aprire il documento scegliendo "Open" dal menu dell'editore "File". La somiglianza all'esempio che vedi sotto dipende dall'editore che utilizzi:
Secondo passo: Un web browser
All'interno del file explorer (come Windows Explorer, Finder sul Mac, o Files in Ubuntu), trovi il documento che hai appena creato e lo apri con il browser (fai doppio click o lo trascini nell'icona del browser). Adesso il browser mostra il testo dal file HTML che hai creato e il tab mostra il titolo della pagina il tutto potrebbe assomigliare all'esempio che visualizzi sotto ,fermo restando che la visalizzazione cambia a seconda della piattaforma e del browser da te utilizzati:
Come puoi vedere il contenuto del tag body corrisponde al contenuto della pagina e il contenuto del tag title da te scelto è mostrato nel tab, ma le due linee di testo non sono scritte su due differente ma su un'unica linea. Interessante.
Terzo passo: Sperimenta e impara
Prova a rimuovere parti dell' HTML e guarda cosa accade. Alcuni cambiamenti ti permetteranno di mostrare la pagina nel browser ed altri daranno risultati sbagliati.Ciò Accade perchè il browser cerca di compensare alcuni errori comuni.
La prima cosa da notare è che l'unica cosa che vedi sullo schermo è il testo che non è all'interno delle parentesi angolate (altrimenti conosciute come i simboli di maggiore e minore ma che chiamiamo parentesi angolate quando parliamo di HTML). Ogni cosa all'interno delle parentesi angolate è un{{Glossario("tag")}}, che rappresenta una struttura o scheletro della pagina web.Tutti i contenuti mostrati sono racchiusi tra i tags.
Il nostro esempio di pagina HTML ha due grandi sezioni: un intestazione contenuta all'interno {{dell' Elemento HTML("head")}} elemento blocco "block", ed un corpo, contenuto {{nell'Elemento HTML("body")}}. Il corpo contiene il testo mostrato all'interno della pagina web.
Ogni tag ha un significato specifico e può essere usato di conseguenza. Per esempio {{l'elemento HTML("title")}} è usato per indicare il titolo della pagina che può differire dal nome del file, nota che anche che i tag possono presentaresi all'interno del contenuto di altri tags. L'{{Elemento HTML("title")}} è contenuto all'interno {{dell'Elemento HTML("head")}}, per esempio.
Se vuoi inserire qualcosa come un immagine hai bisogno di aggiungere un tag per l'immagine e la stessa immagine all'interno.Per esempio:
<!DOCTYPE html> <html> <head> <title>Hi there</title> </head> <body> This is a page a simple page <img src="unicorn_pic.png" alt="Unicorn picture :)" /> now with a unicorn </body> </html>
Modifica il file per includere il tag {{HTML("img")}} come questo:
<img src="unicorn_pic.png" alt="Unicorn picture :)" />
Può essere inserito in qualsiasi parte {{dell'Elemento HTML("body")}} non dimenticare di salvare i cambiamenti apportati alla pagina!
Poi inserisci un file nominato "unicorn_pic.png" nella stessa cartella del documento HTML.Quando avrai aggiornato la finestra del browser o riaperto il documento, vedrai i cambiamenti di contenuto, completa con unicorno!(non dimenticare di salvare la pagina).
Nota: Puoi prendere una copia dell'immagine dell'unicorno per usarla nei tuoi sperimenti cliccando con il tasto destro sopra l'immagine e scegliendo "Save image As..." dal menu che appare.
I documenti necessari perchè questa pagina funzioni adesso assomigliano a qualcosa di questo genere nel desktop:
Il risultato mostrato nel browser è questo:
Come hai notato il tag{Elemento HTML("img")}} ha {{Glossario("attribute","attributes")}} che dà informazioni addizionali necessarie a costruire l'oggetto richiesto in questo caso il nome del file dell'immagine da mostrare e il testo alternativo qualora l'immagine non possa essere caricata.
Questo è un esempio di come aggiungere un'immagine alla pagina, ma puoi usare una tecnica similare per aggiungere musica, video e molto altro tutto usando nient'altro che l'HTML.
Più in profondità
Questa non è una pagina web molto carina
Come avrai notato questa pagina non è certo un miracolo di design e bellezza, questo perchè HTML è tutto ciò che riguarda il contenuto e ciò che il contenuto significa (in termini del suo contesto e la relazione tra i blocchi di contenuto), piuttosto che design.
{{Glossario("CSS")}} ti permette di fare contenuti scintillanti aggiungendo layout, colore, font e così via. Un puro HTML è buono abbastanza per costruire semplici pagine web, ma pagine più complesse (o sebbene semplici con un design accattivante) hanno bisogno del CSS e possibilmente {{Glossario("JavaScript")}}. HTML costruisce il contenuto, CSS gli stili e JavaScript rende il contenuto dinamico.
Sperimentiamo un poco con il CSS trasformando il testo contenuto nel tag body da nero a blue:
<!DOCTYPE html>
<html>
<head>
<title>Hi there</title>
<style>
body {
color: blue;
}
</style>
</head>
<body>
<p>This is a some blue text</p>
<img src="unicorn_pic.png" alt="Unicorn picture :)" />
</body>
</html>
Nota l'aggiunta{{dell'ElementoHTML("style")}} alla pagina all'interno{{dell'ElementoHTML("head")}}. Questo specifica quale caratteristica CSS sarà da applicare al testo contenuto nel tag body.
Vuoi il testo sottolineato? prova ad aggiungere la regola "text-decoration: underline;" allo style:
body {
color: blue;
text-decoration: underline;
}
Vuoi che il tuo testo abbia una misura ben precisa?Prova aggiungendo "font-size: 42px;" come in esempio:
body {
color: blue;
text-decoration: underline;
font-size: 42px;
}
Il risultato finale sarà questo:
<html>
<head>
<title>Hi there</title>
<style>
body {
color: blue;
text-decoration: underline;
font-size: 42px;
}
</style>
</head>
<body>
<p>This is a blue underlined big text</p>
<img src="unicorn_pic.png" alt="Unicorn picture :)" />
</body>
</html>
e se salvi la pagina nel tuo editore e poi riaggiorni il browser la pagina che vedrai sarà la seguente:
Andiamo alla seconda pagina
Quando navighi nel Web spesso incontri {{Glossario("hyperlink","links")}}, il modo più utile per navigare da una pagina all'altra. Dal momento in cui l'HTML si occupa del contenuto e i link sono il modulo del contenuto, puoi creare collegamenti tra le pagine utilizzando soltanto l'HTML.
Collega due pagine locali
Per questo esercizio abbiamo bisogno di creare un secondo documento HTML sul computer aggiungiamo un link ad ogni pagina così possiamo passare velocemente avanti e indietro tra esse.
Nel primo documento possiamo tenere la stessa struttura di prima, la cosa importante è aggiungere un nuovo tag {{l'ElementoHTML("a")}}, così:
<!DOCTYPE html> <html> <head> <title>Page 1 to ground control</title> </head> <body> This is page 1. <a href="page2.html" title="to page 2">What is going on on page 2?</a> </body> </html>
La seconda pagina avrà un link che ci fa tornare alla prima pagina:
<!DOCTYPE html>
<html>
<head>
<title>Page 2 :)</title>
</head>
<body>
This is a page 2.
<a href="page1.html" title="to page 1">Want to go back to page 1? Click here</a>
</body>
</html>
Nota:Assicurati che il nome del file {{nell'ElementoHTML("a")}} tag con attributo href sia lo stesso nome del documento creato nel tuo computer.
Puoi adesso navigare tra i due documenti HTML apri la page 1 nel browser e fai click nel link per aprire la page 2 e viceversa. Puoi inoltre testare il bottone "previous" nel tuo browser esso dovrebbe portarti all'ultima pagina visitata.
Il documento principale dovrebbe avere i due documenti nella stessa cartella, in questa maniera:
La Page 1 sarà così visualizzata nel browser:
e la Page 2 sarà così visualizzata nel browser dopo aver fatto click sul link di Page 1:
Nota:Il link che torna alla page 1 è violetto perchè il browser "sa" che in precedenza avevamo visitato la Page 1
Se vuoi puoi fare la prova creando più pagine o passare alla prossima sezione per portare tutto questo al lvello successivo.
Collegamento ad un altra pagina web
In questo esercizio aggiungiamo un link al documento HTML così che il lettore possa velocemente prendere alcune pagine utili nel Web. Puoi collegare qualsiasi cosa sia disponibile nel Web pubblico, prova a creare un collegamento con Wikipedia:
<!DOCTYPE html>
<html>
<head>
<title>My page</title>
</head>
<body>
One day,...Unicorns are great...See you.
<a href="https://en.wikipedia.org/wiki/Unicorn" title="Unicorn page on Wikipedia">Want to go know more about unicorns? Wikipedia is right here</a>
</body>
</html>
Potrebbe più o meno assomigliare a questo nel browser:
Passando il puntatore del mouse sopra il link vedrai l'attributo{{htmlattrxref("title")}} mostrato in un tooltip.Questo può essere usato per dare maggiori informazioni sul link così che l'utente possa fare una scelta formazioni tra il cliccare su esso o meno.
Ricorda: Ogni volta che modifichi la pagina non dimenticare di salvare il documento sull'editor e di aggiornare la pagina sul browser così che possa vedere i cambiamenti fatti.
Prossimi passi
- Come usare un tag HTML: Ci sono molti tag in HTML qui abbiamo visto solo i base, puoi trovare delle ulteriori risorse qui.
- Anatomia della pagina web: HTML ha alcune regole e una pagina può avere molto contenuto questo può aiutare a comprendere pagine più complesse come quelle usate in alcuni dei più famosi siti nel Web!
- Comprendere i link: Abbiamo usato esempi molto semplici con i link questo articolo è per te se vuoi capire perchè i "links" sono l'origine del nome del "Web".
- Usare le immagini and aggiungere audio e video sono utili per aggiungere del contenuto multimediale con il semplice HTML.