Come Scrivere una Pagina HTML

Info sull'Autore

HTML (HyperText Markup Language) è un linguaggio di base per lo sviluppo di pagine web.^{[1]
X
Fonte di ricerca} È stato creato per essere un linguaggio di programmazione semplice e flessibile. Quasi tutte le pagine presenti su Internet sono state sviluppate con qualche forma di questa codifica (ColdFusion, XML, XSLT). Con l’introduzione elementare descritta in questo articolo potrai acquisire le basi dell'HTML, per poi ampliare le tue competenze sfruttando le altre guide di wikiHow. Consulta comunque altri tutorial online per tenerti aggiornato.

Metodo 1

Metodo 1 di 1:

Scrivere una Pagina HTML

1
Prima di iniziare con i passaggi seguenti, è preferibile che tu legga la sezione Cose che ti Serviranno.
2
Ecco ciò che bisogna conoscere prima di addentrarsi nell’argomento:
- I tag sono importanti. Di che cosa si tratta? Sono pezzetti di testo che facilitano la comprensione umana e della macchina. I tag vengono chiusi tra parentesi uncinate quando sono utilizzati nell’HTML. A volte posseggono attributi descrittivi utili sia per il computer che per l’utente. Esiste un attributo chiamato href che specifica il link della pagina che si può visitare cliccandoci sopra.
  <a href="http://www.wikihow.com/">WikiHow</a>
  La maggior parte dei tag deve essere chiusa con un tag dallo stesso nome preceduto da uno slash, come nell'esempio qui sopra. Esistono alcune eccezioni, come i tag META o DOCTYPE.
3
DOCTYPE
- Solitamente, la maggior parte delle pagine Web viene identificata dal tag DOCTYPE. È d’aiuto nell’identificare il codice così come viene interpretato dal browser. La maggior parte delle pagine funziona anche senza questo tag, ma è necessario per ottenere la validazione del World Wide Web Consortium.^{[2]
  X
  Fonte di ricerca} Tale consorzio aiuta a regolare la vastità delle diverse tipologie di codifiche Internet e specifica come possono/debbono essere usate. Un DOCTYPE per la versione HTML 4.01 è mostrato di seguito:
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  È spesso usato in Internet. Specifica il tipo di pagina 'html', poi offre una definizione pubblica della codifica della pagina e, in ultimo, specifica la posizione del DOCTYPE che meglio descrive al browser la pagina.
- Esistono delle differenze tra le tante tipologie di HTML sviluppatesi negli anni, ad esempio nell’uso dei tag specifici. Alcuni vengono definiti “deprecated”, cioè non più usati perché sostituiti da tag più utili.
- I tag <b> e <i> vengono sostituiti da altri tag perché servono ad abbellire il testo, ma non ne specificano le caratteristiche. Il tag <strong> rimpiazza <b>, così come <em> sostituisce<i>.
- Bisogna sottolineare che i tag precedenti sono stati rimpiazzati da altri che rappresentano più che una semplice formattazione. Se il testo viene tradotto, il suo significato rimane inalterato e non solo la sua formattazione. È semanticamente corretto.
- Nella versione 2.0 XHTML i tag <b> e <i> vengono considerati superati, così come nella versione 3 dell’HTML.
4
"Encapsulation Rule" dell’HTML
- Vediamo quali sono i tag più importanti utilizzati adesso. Quando una pagina viene costruita, la sua struttura è molto semplice. Ogni volta che si apre un tag deve essere chiuso. Bisogna prendere in considerazione l’intero layout. Questo potrebbe essere un valido layout XHTML:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html>
- Ogni sistema di codice ha costruito un esempio di linguaggio per scrivere il messaggio Hello World. È il cosiddetto test Hello World.
5
Header
- L’header di una pagina Web è il contenuto che esiste all’interno del tag <head>. Questo contenuto non è visibile all’utente, ad eccezione del titolo della pagina che è ben evidente. Le informazioni all’interno del tag <head> possono essere altri tag, ad esempio:
  - Il META tag, usato per specificare le informazioni di testo che vengono in aiuto ai motori di ricerca.
  - Il LINK tag, che inserisce una connessione a documenti, quali i fogli di stile Stylesheets (CSS).
  - Lo SCRIPT tag, contenente del codice a cui accede la pagina da remoto.
  - Lo STYLE tag, che è semplicemente un foglio di stile codificato direttamente su quella pagina all’interno dei tag stessi.
  - Il TITLE tag, che fornisce un titolo posizionato nella barra in cima al browser.
- Vediamo una dimostrazione di alcuni di essi in un’intestazione (header) d’esempio estratta, in maniera condensata, da questo sito:
  <head> <title> ... </title> <meta name="description" content=" ... " /> <link rel="stylesheet" type="text/css" href=" ... " /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <style type="text/css" media="all"> ... </style> <script type="text/javascript" src=" ... "></script> </head>
  Per essere chiari: sono state eliminate tutte le informazioni vere da ciascun tag per riunirli e rendere ben visibili tutti quelli che possono essere contenuti nell'header, ad eccezione del commento (di cui si discuterà nel passaggio dedicato ai tag di base).
6
Tag di Base
- Andiamo avanti, facendo attenzione al loro uso e ricordando l’incapsulamento.
  - <strong> segnala testo di una certa importanza.
  - <small> decrementa la dimensione del font rispetto al testo regolare. La dimensione viene misurata da un valore compreso tra 1 e 7; il testo normale è 3 di default.^{[3]
    X
    Fonte di ricerca}.
  - <pre> definisce un blocco di testo formattato. Questo testo viene normalmente scritto con un font a spaziatura singola e con degli spazi fra le parole.
  - <em> dà enfasi al testo, non come stile, ma come significato.
  - <del> mette una riga sopra il testo per eliminarlo.
  - <ins> sottolinea il testo per mostrare che è stato aggiunto, talvolta proprio dopo il tag <del>.
  - <h1> è uno dei tanti tag d’intestazione che esistono, tutti con ‘h’ seguita da un numero. Il tag deve essere chiuso con lo stesso numero.
  - <p> definisce un gruppo di frasi che sono contenute in un paragrafo.
  -  contiene delle informazioni visibili solo leggendo il codice sorgente. Diversamente da altri tag, il contenuto del commento HTML deve essere inserito al suo interno.
  - <blockquote> definisce un testo citato da una fonte che può essere descritta da un tag <cite>.
  - Fai riferimento al sito HTML Dog^{[4]
    X
    Fonte di ricerca} per una rassegna completa dei tag esistenti.
- Tale sito offre anche delle ottime spiegazioni corredate da esempi.
7
Costruire una Struttura
- Le pagine vengono costruite per contenere dati in un semplice insieme di tag in modo da avere delle intestazioni che introducono i paragrafi. Il computer capisce solo che ci sono dei dati, ma non può sapere che sono collegati tra loro, poiché non è in grado di mettere in relazione le idee. Bisogna costruire delle pagine HTML suddivise in sezioni riconoscibili dal computer, e tale obiettivo viene raggiunto con l’uso del tag <div>, che aiuta a costruire un’ampia quantità di pagine. Può essere supportato da fogli di stile CSS in modo da evitare grosse tabelle di codice per creare un layout.
  - <div> può essere usato per separare blocchi d’intestazione in modo da renderli comprensibili sia alle macchine che agli utenti.
- Guardiamo un esempio molto semplice di layout HTML che include l’uso del tag <div>.
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> <div id="contentOne"> <p>This is some text in div#contentOne.</p> <div class="subSection"> <p>A paragraph in a sub-section of div#contentOne</p> </div> </div> </body> </html>
- Attribuire un nome ai tag <div> aiuta a trovarli e utilizzarli nello stile in maniera ottimale rispetto all’uso di CSS e Javascript.
Pubblicità

Consigli

Non limitarti a leggere quest’articolo e rivolgiti a qualcuno che ti possa insegnare. C’è sempre qualcosa di nuovo da imparare, soprattutto nel vasto mondo della tecnologia.
Datti da fare e impara, prendi in prestito e crea del codice.
Nota che alcuni tag vengono aperti, ma non chiusi, come ad esempio < p > (Paragraph) e < br > (Line Break). Altri tag vengono aperti e poi chiusi con un </>.
<body></body> ne sono esempi.
Contribuisci anche tu a inventare, progettare o codificare cose nuove.
Come passaggio successivo, cerca di occuparti del Server Coding.
Impara CSS e Javascript.

Avvertenze

Ricordati che l’HTML serve solo a codificare del contenuto in un formato universale. Bisogna sforzarsi di renderlo semanticamente corretto, anche se gli altri potrebbero non notarlo. Esistono altri linguaggi di supporto, quali CSS, Javascript e XML, a cui si demanda la correttezza della rappresentazione.

Cose che ti Serviranno

Un editor di testo che supporti la codifica ANSI
Un browser Web come Internet Explorer o Mozilla Firefox
Un editor wysiwyg come Adobe Dreamweaver, Aptana Studio o Microsoft Expression Web (facoltativo)