Creare files HTML

Manuale: 3 passi per il proprio sito web

2. Creare files HTML puliti (corretti) con un editore di testo.

Abbiamo fatto il primo passo “Registrare un dominio e affitto spazio web“. A questo punto diventa ancora più facile.

Chi ha 10 minuti di tempo si impadrona dei pochi elementi HTML di seguito descritti; chi ha soltanto 5 minuti di tempo può scaricare i 3 files HTML del sito esempio che abbiamo preparato.

Download sito esempio (Zip 1,7 Kb)
Sito esempio in rete

Il modello di sito per questo manuale rinuncia ad ogni elemento grafico per rendere più trasparente il linguaggio HTML e l’organizzazione delle singole pagine che formano il sito. Lo possiamo colorare più tardi. A noi per iniziare interessa solo essere presenti in rete e indicizzati dai motori di ricerca.

Per creare un sito pulito, leggibile anche dai robots dei motori di ricerca, non si usano  editori grafici come Dreamweaver o Frontpage Express o altre robe che riempiono il codice HTML di propri attributi e ordini. Usiamo un semplice editore di testo come Blocco note o meglio NoteTab, un editore gratuito con cui si può lavorare molto più comodamente. Aprire i files HTML scaricati con l’editore di testo, inserire i propri testi, fatto. E subito via in rete! Importante è esserci. Alla forma pensiamo dopo, quando abbiamo almeno dieci visitatori al giorno. Cosa si fa prima di sedersi a scrivere un pezzo di teatro? “Si stabilisce la data della prima” dicono molti di quelli che l’hanno fatto più volte. Allora prima si pubblica il sito in rete, dopo lo si riempie di contenuti e solo alla fine ci si occupa del design e della grafica.

Per chi vuole sapere di più:
Ogni file HTML è una sottopagina del sito e consiste da una sezione head con i cosidetti meta tags, il titolo della sottopagina (meta tag title) ed una breve descrizione di 150 caratteri ca. (meta tag description) del contenuto del sito (possiamo tranquilamente dimenticare tutti gli altri meta tags, p. es. il meta tag keywords, che già da anni non viene più letto dai motori di ricerca) e una sezione body con i contenuti visibili.

Il layout classico che utilizziamo per il sito nostro si basa su una tabella con una riga e due colonne. Nella colonna sinistra, con una larghezza fissa, si trova il menu di navigazione. Nella colonna destra, che occupa il resto della finestra,  si trova il testo visibile con un titolo di primo grado <H1> (headline 1) e un paragrafo di testo.

Ogni elemento HTML è formato da un tag iniziale e un tag finale:

<H1>titolo di primo livello</H1>

<p>paragrafo di testo </p>

Come si vede bene dalla tabella i tags HTML possono essere concatenati in modo da costruire una struttura gerarchica.

<html>

<head>
<title>Traduzione italiano tedesco</title>
</head>

<body>

<table> (apri tabella)
<tr> (apri riga)
<td width=”120″ valign=”top”> (apri 1° colonna con larghezza fissa - il menu)
<a href=”index.html”>Home</a><br />
<a href=”profilo.html”>Profilo</a><br />
<a href=”contatti.html”>Contatti</a>
</td> (chiudi 1° colonna)

<td> (apri 2° colonna)
<H1>Traduzione tedesco</H1>
<p>Traduzione italiano tedesco di documentazione tecnica, istruzioni per l’uso …</p>
</td> (chiudi 2° colonna)
</tr> (chiudi riga)
</table> (chiudi tabella)

</body>

</html>

Un link è costruito dal tag iniziale <a> e il tag finale </a> (a = anchor). L’attributo href (href = hyper reference) contenuto nel tag iniziale <a> definisce la destinazione del link. I links nel menu di navigazione rimandano ai files index.html, profilo.html e contatti.html”. Tra <a> e </a> si trova il testo visibile del link:
<a href=”contatti.html”>Contatti</a>

<br /> causa un’interruzione di riga.

I motori di ricerca leggono la parte visibile di una pagina web, traggono conclusioni riguardo alla rilevanza per una determinata parola o frase di ricerca e danno naturalmente molta importanza a parole/frasi di ricerca (keywords) che appaiono nel titolo della pagina. Altri elementi importanti che devono riportare le keywords sono i titoli dei paragrafi da <H1> a <H5>, i testi visibili dei link e testi in <b>grassetto</b> e <em>corsivo</em>.

Ancora due piccole cose!
Nella prima riga del file HTML si deve riportare la dichiarazione del tipo di documento:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
Semplicemente copiare nella prima riga del file HTML e dimenticare.

La sezione head deve riportare la codifica dei caratteri:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8?>
Semplicemente copiare e incollare fra <head> e </head> nel file HTML e dimenticare.

E subito via in rete!

Il proprio sito web in 3 passi

Parte I - Registrare un dominio, affitto spazio web
Punkt HTML Parte II - Creare files HTML
HTML-Dateien erstellen Pfeil Parte III - Pubblicare sito web su internet tramite FTP

Leave a Reply