Per un primo test nell'editor di vostra scelta, create un nuovo file. Chi utilizza l'editor di Windows, può aprirlo tramite Start>Tutti i programmi>Accessori>Editor.
Successivamente selezionate File>Salva con nome. Cruciale è il campo Tipo file.
Qui è assolutamente necessario impostare Tutti i file. Nel campo Nome file inserite quindi index.htm. Ora potete salvare il file nella posizione desiderata. Questo file sarà quello con cui lavorerete, ovvero il vostro primo file HTML, attualmente però ancora vuoto. Presto cambierà.
Se state utilizzando Dreamweaver, è meglio impostare direttamente all'avvio del programma che volete creare un file HTML.
L'impalcatura HTML
Prima di iniziare con l'impalcatura HTML, un importante avvertimento riguardo alla semantica utilizzata all'interno di questa serie - e anche nel mondo dell'HTML - che spesso viene interpretata erroneamente. Un esempio:
<a href="news.htm">Per le ultime notizie</a>
Questa sintassi mostra un elemento a, cioè <a href="news.htm">Per le ultime notizie</a>. Questo elemento è composto da un tag a di apertura, quindi <a> ossia <a href="news.htm">, il contenuto dell'elemento Per le ultime notizie e il tag di chiusura a </a>. Inoltre, l'elemento a ha l'attributo href con il valore dell'attributo news.htm.
L'esempio precedente mostra la definizione di un collegamento ipertestuale in HTML mediante l'elemento a. Questo elemento a è contrassegnato dall'apertura <a> e la chiusura </a>. Quindi vedete che non è così difficile utilizzare correttamente i termini elemento e tag.
Ma ora cominciamo. Aprite il file HTML salvato in precedenza nel vostro editor. Ogni documento HTML ha una determinata impalcatura.
Ecco innanzitutto l'impalcatura menzionata nella sua interezza:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> </body> </html>
Cosa significano ora le singole voci? Si inizia con la cosiddetta dichiarazione del tipo di documento.
<!DOCTYPE html>
Attraverso una tale dichiarazione del tipo di documento, informate il browser in cui il vostro sito web sarà visualizzato in seguito, su quale standard HTML state utilizzando. Nel caso specifico si tratta di HTML5. Se invece utilizzaste HTML 4.01, l'indicazione del DOCTYPE sarebbe la seguente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Proprio la questione della dichiarazione del tipo di documento spesso confonde i principianti di HTML, poiché esistono diverse varianti. Tuttavia, in realtà è molto semplice: immaginate una dichiarazione del tipo di documento come una sorta di istruzione di montaggio che descrive quali elementi possono essere contenuti in un documento.
Vi consiglio in linea di principio di optare per la breve specifica HTML5.
<!DOCTYPE html>
I browser moderni la riconoscono e visualizzano le pagine in cui viene utilizzata in modalità standard. Tuttavia, dovreste effettivamente definire solo quegli elementi HTML che sono consentiti in HTML5. Ma ne parleremo più avanti.
Proseguiamo con l'elemento html.
<html lang="de"> … </html>
Questo elemento racchiude il documento. Quello che salta all'occhio è l'attributo lang. Grazie a questo attributo viene indicata la lingua utilizzata nel documento. Ecco alcuni abbreviazioni lang per l'area di lingua tedesca.
• de – Tedesco (Standard)
• de-ch – Tedesco (Svizzera)
• de-at – Tedesco (Austria)
• de-lu – Tedesco (Lussemburgo)
• de-li – Tedesco (Liechtenstein)
• en-us – Inglese (USA)
• en-gb – Inglese (Regno Unito)
• en-au – Inglese (Australia)
• en-ca – Inglese (Canada)
• en-nz – Inglese (Nuova Zelanda)
• en-ie – Inglese (Irlanda)
• en-z – Inglese (Sudafrica)
• en-jm – Inglese (Giamaica)
• en – Inglese (Isole caraibiche)
Se preferite usare abbreviazioni a due lettere come de, gb ecc., o se preferite utilizzare le abbreviazioni composite mostrate precedentemente, alla fine spetta a voi deciderlo. Io preferisco le due lettere.
All'interno dell'elemento head troviamo le informazioni di testa del documento.
<head> … </head>
I dati dell'intestazione sono un po' complessi, lo ammetto, ma sono spiegati rapidamente. Qui vengono inclusi, tra le altre cose, elementi che descrivono più dettagliatamente il documento. Questi includono ad esempio il titolo e il set di caratteri utilizzato. Qui è inoltre possibile incorporare script e fogli di stile e definire metadati generali. Ma ne parleremo più avanti.
Particolarmente importante è l'elemento title.
<title>Tutorial per il fotoritocco con Photoshop, web design & fotografia - PSD-Tutorials.de</title>
In questo modo si definisce il titolo, che è necessario in diversi contesti.
• Nella barra del titolo del browser.
• Quando viene aggiunto un segnalibro nel browser.
• E naturalmente il titolo svolge un ruolo fondamentale per l'ottimizzazione dei motori di ricerca.
Quindi vedete quanto sia importante il titolo. Scegliete un titolo il più conciso e chiaro possibile.
Per una descrizione dettagliata della pagina, è possibile utilizzare i metadati. Ulteriori informazioni a riguardo seguiranno.
Proseguiamo con il set di caratteri utilizzato.
<meta charset="UTF-8" />
Questo dato è importante per i browser. Solo così sanno come codificare i caratteri affinché vengano visualizzati correttamente. Solo specificando il set di caratteri corretto, ad esempio UTF-8, caratteri speciali verranno visualizzati correttamente. Ora passiamo al contenuto effettivo della pagina web, ovvero ciò che i visitatori vedono. Tutto ciò viene definito nell'elemento body.
<body> … </body>
Aggiungete per scopi dimostrativi quanto segue tra il tag di apertura e chiusura del <body>:
<h1>PSD-Tutorials.de</h1>
Il documento dovrebbe quindi apparire come segue:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Struttura base dell'HTML5 - www.html-seminar.de</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>PSD-Tutorials.de</h1>
</body>
</html>Salvate le modifiche e aprite il file in un browser.
Come potete vedere, PSD-Tutorials.de viene effettivamente visualizzato. Avete quindi creato il vostro primo documento HTML personale.
