Se stai progettando un sito Web, magari per la tua azienda, la creazione di pagine Web fittizie può essere un modo utile per esplorare le tue idee. Le pagine Web utilizzano una combinazione di tecnologie, in particolare HTML. All’interno delle tue pagine Web, puoi definire il contenuto che desideri che i tuoi utenti vedano quando visitano il tuo sito. Questo contenuto può includere testo, immagini e altre forme di media. Non è necessario caricare la pagina Web fittizia su un server; come puoi visualizzarlo aprendolo nel browser Web del tuo computer.
1
Crea un file HTML. Apri un nuovo file in un programma di modifica del testo; Su un computer Windows, puoi utilizzare Blocco note, che crea automaticamente un nuovo file quando lo apri. Una volta aperto il nuovo file, salvalo come HTML scegliendo “File”, quindi “Salva con nome” e inserendo il nome del file scelto. Per la home page del tuo sito, è standard scegliere il nome “index.html” poiché questa è la pagina che il browser Web dell’utente presenterà automaticamente quando accede all’indirizzo del tuo sito web.
2
Inserisci la struttura della tua pagina. Usa la seguente struttura:
Questa è la struttura di base di qualsiasi pagina HTML. La prima riga è la definizione del tipo di documento, che puoi copiare senza preoccuparti dei dettagli. Il codice della pagina è contenuto nei tag di apertura e chiusura. Ogni pagina ha una sezione principale e una sezione del corpo. Il contenuto della tua pagina apparirà tra i tag del corpo di apertura e di chiusura. Si noti che un tag di chiusura è lo stesso della sua controparte di apertura tranne che per la barra all’inizio.
3
Decidi quale contenuto presenterà la tua pagina. La pagina può includere testo, immagini e elementi multimediali come video. Prepara il contenuto che intendi utilizzare, digitando il contenuto del testo e preparando i file immagine di cui hai bisogno, ad esempio, immagini di intestazione di pagina o immagini informative che desideri presentare all’interno del corpo della pagina. Potresti anche trovare utile abbozzare il contenuto della pagina su carta prima di tentare di implementarlo nel codice.
4
Inserisci il tuo contenuto di testo. L’HTML utilizza la codifica del markup, il che significa che i tuoi elementi di contenuto sono circondati da tag che indicano come dovrebbero essere strutturati. Ad esempio, il codice seguente rappresenta un elemento di paragrafo:
Ecco il testo del paragrafo.
Quando l’utente visualizza una pagina con questo contenuto, vedrà solo il testo all’interno dell’elemento paragrafo. I tag di apertura e chiusura “p” vengono utilizzati dal browser per presentare il contenuto del testo come un paragrafo, con uno spazio prima e dopo di esso. Puoi includere testo all’interno di vari elementi tra cui
e, che possono essere visualizzati più volte. Assicurati di posizionare il contenuto del testo tra i tag di apertura e chiusura del corpo della pagina.
5
Inserisci le immagini della tua pagina. Per includere un’immagine in una pagina HTML, è necessario utilizzare un file elemento come segue:
Questo markup HTML utilizza attributi all’interno dell’elemento immagine. Gli attributi vengono visualizzati all’interno del tag, con il nome dell’attributo seguito da un segno di uguale e quindi dal suo valore, racchiuso tra virgolette. Questo codice visualizza un’immagine JPEG salvata come “immagine.jpg” e archiviata nella stessa directory sul computer della pagina HTML. Il browser visualizzerà il testo all’interno dell’attributo “alt” se l’immagine non può essere trovata. Questo è un elemento a chiusura automatica, poiché non esiste un tag di chiusura.
6
Salva il tuo file HTML. Individua il percorso del file sul tuo computer utilizzando Esplora risorse. Da Explorer è possibile aprire il file in un browser Web facendo doppio clic su di esso. Questo aprirà qualsiasi file HTML nel tuo browser predefinito, che è Internet Explorer a meno che tu non abbia impostato un altro browser come predefinito. In Internet Explorer, dovresti vedere il contenuto della pagina fittizia.
Referenze
- W3Schools: HTML5 Introduzione
- W3Schools: HTML5 Giorno
- W3Schools: HTML5 Giorno
- W3Schools: HTML5 Giorno
Risorse
- W3Schools: tutorial HTML
- W3Schools: tutorial CSS
- W3C: a partire da HTML e CSS
Tip
- La maggior parte dei siti utilizza una varietà di tecnologie aggiuntive, in particolare CSS (Cascading Style Sheets) per lo stile dei contenuti delle pagine.
Avvertenze
- Il caricamento di un file HTML sul tuo sito web live senza controllarlo prima sul tuo computer potrebbe causare errori ai tuoi visitatori.
Scrittore Bio
Sue Smith ha iniziato a scrivere nel 2000. Ha prodotto tutorial per aziende tra cui Apex Computer Training Software e articoli su argomenti di informatica per vari siti web. Smith ha un Master of Arts in lingua e letteratura inglese, nonché un Master of Science in information technology, entrambi presso l’Università di Glasgow.