Guida all’HTML per la

localizzazione linguistica di
siti web.
Manuale e video tutorial
di Barbara Mennella (consulente e docente di informatica)

Prefazione di Edma Vernieri Cotugno (direttrice della SSIT di Pescara)

Il manuale illustra ai traduttori la creazione di una pagina web, la sua struttura e l’aspetto
grafico offrendo una chiara ed esaustiva comprensione degli elementi testuali da tradurre e
quelli da lasciare inalterati.

Permette, inoltre, di cambiare in piena autonomia qualche elemento grafico della pagina web
(es: un’immagine o icona, un elenco, un colore), sempre nell’ottica di una politica di
adattamento del contenuto e della forma al Paese di destinazione.

Perché un manuale sull’HTML?

Cosa c’entra la traduzione con l’HTML, il linguaggio informatico di interpretazione?

Non è necessario essere degli esperti informatici né abili “smanettoni” per familiarizzare con
esso, non è altro che un linguaggio e come tale è assimilabile alla semiotica, la scienza dei
segni.

Mentre il segno che rappresenta il linguaggio è la parola, il segno che identifica l’HTML è il
tag, ossia il simbolo di marcatura che identifica un elemento della pagina web.

Così come la parola veicola un senso che muta in base all’ordine e al costrutto delle lettere
utilizzate, l’HTML veicola un progetto costituito da logiche tese a contenere parole (ma anche
contenuti non verbali).

Comprendere la logica dell’HTML è dunque indispensabile per imparare a inserire le parole

tradotte all’interno delle pagine web in piena autonomia effettuando, cioè, il primo passaggio
del processo definito “localizzazione di siti web”

Ma che significa localizzare?

“Localizzare un prodotto”, nel gergo del marketing, è un complesso processo che richiede
una serie di conoscenze teoriche e pratiche tese a renderlo attraente per il Paese a cui è
destinato, tenendo conto di una serie di variabili definite dalla differenza culturale tra un
Paese e l’altro. Abitudini, tradizioni, modi di dire, estetica, ironia ... sono davvero tanti i
fattori che influiscono nella scelta di un colore, di una forma, di uno slogan. Succede così che
lo stesso identico prodotto viene venduto in un modo completamente diverso in Cina rispetto
che a Roma, ma gli esempi sarebbero infiniti.

Localizzare un sito web richiede una serie di competenze che coinvolgono l’informatica, il
design, il marketing, ecc.

Va da sé che si supera di gran lunga il concetto di trasposizione linguistica e ci si addentra in

un complesso labirinto di vicoli che devono convergere coerentemente nella stessa piazza
virtuale.

Localizzare linguisticamente un sito web significa trasformarlo in modo tale che il messaggio
teso a interessare o affascinare il lettore multimediale sia adeguato alla lingua/cultura del
suo Paese, rassicurando il lettore ma al contempo sorprendendolo.

Detto questo si comprende bene che inserire un testo tradotto (o adattato) all’interno di una
pagina web sia solo una parte del processo detto localizzazione; tuttavia è un tassello
fondamentale che permette al traduttore di aggiungere con poco sforzo competenze tecniche
a competenze teoriche e linguistiche per accrescere le sue competenze e, di conseguenza, il
suo onorario.

Le spiegazioni contenute nel Manuale sono molto semplici e permettono anche ai neofiti una
immediata comprensione, resa ancora più chiara e intuitiva dal video tutorial corredato da
voce e immagini.

Buona lettura!
Iniziamo:
L’HTML è un linguaggio informatico che non prevede istruzioni da eseguire, come invece
accade per i linguaggi di programmazione formali (C++, Java). È un linguaggio interpretato
dai browser. La sua sintassi è relativamente semplice, i tag hanno lo scopo di creare gli
elementi di una pagina definendo le caratteristiche che devono avere.

È importante sapere preliminarmente che:

✓ Un elemento è contenuto tra due tag: un tag di apertura e un tag di chiusura, solo
pochissimi tag non si chiudono mai.

<tag>contenuto </tag>

✓ I tag si possono annidare uno dentro l’altro e devono essere esattamente chiusi
nell’ordine inverso in cui sono stati aperti.

<tag1>contenuto <tag2>contenuto </tag2>contenuto </tag1>

✓ Un file HTML contiene la struttura logica di una pagina web, non l’aspetto che deve
avere, il quale si decide con i CSS (Cascading Style Sheets).

✓ Per iniziare a creare delle piccole pagine web o per esercitarsi con l’HTML consiglio di
usare il BLOCCO NOTE di Windows o il TEXT EDIT di MAC, scrivere il codice e poi
salvare il file con estensione .html. Il file, così salvato, avrà l’icona del browser
predefinito del tuo Sistema Operativo (Google Chrome, Safari, Opera, Mozilla ecc…),
per continuare a lavorarci, questo file deve essere aperto in due modalità:

1. Clic con il destro e dal menu contestuale selezionare APRI CON➔Blocco Note o Text
Edit.

2. Doppio clic per aprirlo direttamente con il browser e vedere il risultato finale di ciò
che si è creato. In seguito, basta aggiungere codice nel file aperto con il Blocco Note
e salvare, poi aggiornare la pagina web e si vedranno istantaneamente tutte le
modifiche apportate. Se questi passaggi non ti sono chiari puoi guardarli nel video
tutorial che ho preparato.

Un commento è una porzione di pagina web che non deve mai essere letta dai browser;
contiene, di solito, informazioni per gli sviluppatori. La sua sintassi è la seguente:

<!--Contenuto del commento -->

I commenti sono importanti, come in qualsiasi altro linguaggio di programmazione, rendono

più leggibile il codice, possono contenere informazioni aggiuntive sulla pagina stessa.
H= Hyper L’HTML è un linguaggio di marcatura che si basa
T= Text su una semplice sintassi che ogni browser può
interpretare, visualizzandone il contenuto.
M= Markup I suoi punti di forza sono l’ipertestualità e
l’universalità.
L= Language

Tag e MetaTag

Il contenuto di una pagina web non è totalmente visibile all’utente finale, poiché ci
sono informazioni che non necessariamente interessano i visitatori del sito.
Possiamo distinguere:
✓ tag per produrre contenuto
✓ tag per produrre formattazione
✓ tag contenenti informazioni per i motori di ricerca e i browser.

Tag obbligatori di apertura e chiusura

Affinché i browser leggano in maniera corretta il codice HTML, dobbiamo
inserire dei tag obbligatori:

<!DOCTYPE html>
<html>
<head>
meta tag - script - css
</head>
<body>
contenuti e altri tag
</body>
</html>
 Tag per creare paragrafi

I marcatori di paragrafo sono 3, si dividono in tag block-level e in-line a

seconda se vanno a capo su una nuova riga o no.

<p>→ è block-level, va a capo e lascia una riga vuota.

<div>→ è block-level, va a capo ma non lascia una riga vuota.

<span>→ è in-line, qualsiasi cosa verrà posta dopo starà sulla stessa riga.

Esempio di codice HTML Risultato finale visualizzato dal browser

 Tag per formattare il testo

<b>testo</b> grassetto
<i>testo</i> corsivo
^testo per creare apici
_testo per creare pedici
<center>testo</center> per centrare il testo
<mark>testo</mark> per evidenziare di giallo

Esempio di codice HTML Risultato finale visualizzato dal browser

 Tag per creare intestazioni

<h1>testo</h1>
Questi tag servono per creare delle
<h2>testo</h2>
intestazioni a vario livello con diverse
<h3>testo</h3>
grandezze, di solito si usano per piccole
<h4>testo</h4>
quantità di testo
<h5>testo</h5>
<h6>testo</h6>

Esempio di codice HTML Risultato finale visualizzato dal browser

 Tag per formattare il testo

<u>testo</u> si usano per sottolineare

<ins>testo</ins>

<q>testo</q> serve per virgolettare

<strike>testo</strike>
si usano per barrare il testo
<del>testo</del>

<code>testo</code> si usa per avere il testo con la

grafica delle macchine per scrivere
del passato
<bdo dir=‘’rtl’’>testo</bdo> testo scritto al contrario

Risultato finale visualizzato dal browser

Esempio di codice HTML
 serve per visualizzare il testo così come lo
<pre>testo</pre> abbiamo digitato, rispettando gli spazi e le
righe di separazione

<abb title=spiegazione>testo</abb> Questo tag permette di scrivere abbreviazioni

e acronimi applicando una etichetta
esplicativa che ne spiega il significato quando
si passa con il mouse al di sopra

<big>testo</big> per ingrandire il testo

<small>testo</small> per diminuire il testo

Risultato finale visualizzato dal browser

Esempio di codice HTML
 </br>
Si usa quando si vuole interrompere una riga e portare a capo del testo
senza dover generare un paragrafo nuovo

<hr/>
Generalmente si usa questo tag quando vogliamo inserire una linea orizzontale
separatrice. Si può utilizzare semplice oppure arricchirlo con 4 attributi:
align=left-right-center ci permette di posizionarla a sinistra-destra-centro
width= n% stabilisce la lunghezza della linea
color= red stabilisce il colore della linea
size= n stabilisce lo spessore della linea

Risultato finale visualizzato dal browser

Esempio di codice HTML
 Tag per creare liste
Le liste possono essere di 2 tipi:
<ol> per liste numerate.
<ul> per liste non ordinate ma puntate.
Entrambe usano il tag <li>per elencare gli elementi della lista e hanno un attributo
“type” per stabilire che tipo di lista vogliamo usare. I valori da assegnare a type sono i
seguenti:
type=1 - a – A – i - I per liste numerate
type= disc - circle - square per liste puntate

<ol> <ul>
<li>elemento 1</li> <li>elemento 1</li>
<li>elemento 2</li> <li>elemento 2</li>
</ol> </ul>

Esempio di codice HTML Risultato finale visualizzato dal browser

Esistono altri attributi per i tag delle liste puntate e numerate:

start → per iniziare una lista da un numero diverso da 1 e va messo in <ol>

value → valore dal quale vogliamo riprendere una numerazione interrotta in

precedenza e va messo in <li>

reversed=‘’reversed’’ → permette di mostrare l'elenco in ordine decrescente e va

messo in <ol>

Se inseriamo del testo dopo il tag <ol>oppure <ul> verrà “rientrato” e allineato alla
lista ma senza il punto elenco - molto comodo quando non ci servono delle liste ma
vogliamo semplicemente rientrare del testo.

Esempio di codice HTML Risultato finale visualizzato dal browser

 Tag per creare glossari

<dl>
dl = definition list
<dt>voce del glossario </dt>
dt = definition term
<dd>elenco della definizione dd = definition description
</dd>
</dl>

Esempio di codice HTML Risultato finale visualizzato dal browser

 Tag per cambiare lo stile del testo

Per cambiare la grafica standard del testo usiamo il tag <font>:

<font face="Georgia" color="red" size="+1"/>

Nell’attributo face inseriamo il tipo di font che vogliamo il browser visualizzi, in

size possiamo inserire le misure da 1 a 7, oppure possiamo usare una grandezza
relativa alle impostazioni dei browser utilizzando +n e in color scriviamo il colore
del font.

Esempio di codice HTML Risultato finale visualizzato dal browser

 Tag per creare menu a discesa

<details>
<summary> menu principale </summary>
<p>1 voce di menu </p>
<p>2 voce di menu </p>
<p>3 voce di menu </p>
</details>

Risultato finale visualizzato dal browser

Esempio di codice HTML prima e dopo aver visualizzato il menu
scomparsa
 Attributi del tag <body>
Il tag <body> identifica e definisce il corpo della pagina cioè tutti gli elementi visibili di cui è
composto un documento HTML. Ha parecchi attribuiti che ne definiscono l’aspetto e sono
tutti deprecati dagli standard attuali.
Nell’HTML5 tutto ciò che riguarda lo stile di una pagina è definito con i CSS, ogni sviluppatore
dovrebbe tenerne conto per cui se ne sconsiglia l’uso. Tali attributi sono:
bgcolor ➔ definisce il colore di sfondo di una pagina
background ➔ imposta un’immagine di sfondo
text ➔ definisce il colore del testo
link ➔ definisce il colore dei link nell’intera pagina
alink ➔ definisce il colore per i link attivi cioè mentre lo clicchi
vlink ➔ definisce il colore dei link già visitati

Risultato finale visualizzato dal browser

Esempio di codice HTML
 Tag speciali
Il tag DOCTYPE indica che stiamo utilizzando le specifiche del World Wide
Web Consortium che riguardano il codice HTML, possiamo usare 3 diversi tipi
di specifiche:
Transitional: se non vogliano rinunciare all’opportunità di usare i tag
deprecati.
Strict: se abbiamo intenzione di attenerci allo standard dell’W3C e quindi non
usare i tag deprecati.
Frameset: se la nostra pagina web è suddivisa in finestre separate.

A seconda di quale delle 3 specifiche vogliamo utilizzare, le seguenti sono le

dichiarazioni adatte:

<!DOCTYPE HTML PUBLIC (-//W3C//DTD XHTML 1.0 Transitional//EN(

(http://www.w3.org/TR/xhtml1//DTD/ xhtml1-transitional.dtd(>

<!DOCTYPE HTML PUBLIC (-//W3C//DTD XHTML 1.0 Strict//EN(

(http://www.w3.org/TR/xhtml1/strict.dtd (>

<!DOCTYPE HTML PUBLIC (-//W3C//DTD XHTML 1.0 Frameset//EN(

(http://www.w3.org/TR/xhtml1/frameset.dtd (>

Il DOCTYPE dichiara che tipo di XHTML usiamo e comunica ai browser come

devono gestire e interpretare la pagina. Qualsiasi sia la codifica che vogliamo
usare deve essere il primo tag a comparire, ancor prima di <html>.

Con le ultime specifiche del W3C possiamo usare semplicemente

<!DOCTYPE html>
 I meta Tag

I meta tag sono un ottimo strumento a disposizione dei webmaster per fornire ai
motori di ricerca e ai browser informazioni sui propri siti, vengono aggiunti nella
sezione <head> della pagina HTML.
Sono in genere analizzati e utilizzati per mezzo di sistemi automatici che li
possono elaborare per fornire servizi o funzionalità specifiche.
A meno che non elaborati appositamente, sono generalmente invisibili all'utente,
se non attraverso la visualizzazione del codice sorgente della pagina oppure
tramite le finestre di proprietà dei browser, possono essere utilizzati a discrezione
del webmaster secondo le proprie necessità.
Gli unici elementi richiesti dalla grammatica formale sono l'utilizzo degli attributi
"name" e "content".

Il meta tag <description>

Nel meta tag “description” si inserisce una breve descrizione del contenuto della
pagina (dai 300 ai 325 caratteri), esso appare come riassunto del sito nella SERP
(Search Engine Results Page)di alcuni motori di ricerca ad esempio:

<meta name=“description” content=“SSIT Scuola Superiore per Interpreti e

Traduttori - sede di Pescara ... Diventa traduttore e/o interprete senza muoverti
da casa, oppure specializzati con un ...”>
 Il meta tag <Keyword>
Nel meta tag “keywords” invece vanno elencate le parole chiave, quelle essenziali,
per il posizionamento nei risultati dei motori di ricerca, ad esempio:

<meta name=“keywords” content=“corso traduzione, master online, traduzione

settoriale, interpretazione, SDL Trados’’>

Il meta tag <charset>

Il tag meta ci permette di chiarire al browser come dovrà interpretare i caratteri che
abbiamo usato, ad esempio il set di caratteri occidentali, giapponesi, cirillici ecc……
Va inserito sempre nella sezione <head>

<meta http-equiv=Content-Type content=text/html; charset=iso-8859-1>

oppure più semplicemente

<meta charset="utf-8">

Il meta tag <title>

Il tag <title> indica il titolo della pagina, quello che appare nella barra superiore
della finestra del browser. Dovrebbe essere breve e coinciso perché è anche su
questo che si basa l’indicizzazione dei motori di ricerca, infine è quello che appare
sia nella cronologia che nei preferiti di un browser. Va inserito nel tag <head>
<title>mio_sito</title>
È fortemente consigliato non avere un <title> unico per ogni pagina, e che non ci sia
un’estrema forzatura per quanto riguarda le parole chiave.
 Tag per creare Link

<a href=https://www.google.it>testo su cui cliccare </a>

Con questo tag si creano link alla pagina di Google, cioè ad una pagina esterna al nostro
sito, ma qualsiasi sia l’Url (Uniform Resource Locator) indicato, il browser lo visualizzerà.

<a href=mia_pagina.html>testo su cui cliccare </a>

Facciamo un link ad una pagina web all’interno del nostro sito. Facciamo attenzione alla
pagina scelta perché se essa è contenuta nella stessa directory della pagina web allora va
bene un riferimento relativo, se è posizionata altrove allora dobbiamo usare un
riferimento assoluto alla sua posizione con un percorso completo che ne descrive la sua
esatta collocazione.

<a href=stipendi.xlsx>testo su cui cliccare</a>

Possiamo “linkare” non solo pagine web ma anche file di qualsiasi tipo: foto, presentazioni
PowerPoint, fogli di calcolo di Excel, ecc……
è un ottimo trucco per creare un download veloce ed efficace.

Risultato finale visualizzato dal browser

Esempio di codice HTML
 Ancore
Servono per creare riferimenti e link all’interno di una stessa pagina; sono utili soprattutto
quando vogliamo evitare di scorrere una pagina in tutta la sua lunghezza. Si crea prima il
sommario con le varie voci e poi si ancorano alla parte del testo a cui si riferiscono.

<a href="#primo">vai al capitolo 1 </a>

<a href="#secondo">vai al capitolo 2 </a>
<a href="#terzo">vai al capitolo 3 </a> <a href="#">inizio pagina</a>

Altro testo o immagini della pagina Con questo tag creiamo un link per
<a name="primo">Capitolo 1 </a> ritornare all’inizio della pagina web
<a name="secondo">Capitolo 2</a> perché l’ancora non è stata

<a name="terzo">Capitolo 3</a></br> specificata.

Risultato finale visualizzato dal browser

Esempio di codice HTML

 I colori HTML
Quando vogliamo inserire un colore possiamo usare il nome che lo identifica, in questo
modo abbiamo a disposizione poco più di 120 combinazioni

I colori esprimibili in HTML sono svariati milioni e possiamo usarli usando la codifica
esadecimale che si basa su una rappresentazione di sei numeri preceduti da un cancelletto

#aaff55
rappresentano la rappresentano la
componente rossa componente blu

rappresentano la
componente verde
 Convertitori online per trovare colori esadecimali

http://www.sitiwebgallery.it/blog/tabella-colori.php

https://toolset.mrwebmaster.it/colori/hex-to-rgb.html

https://it.wikipedia.org/wiki/Aiuto:Tavolozza_dei_colori

http://www.domynex.com/strumenti/tabella-colori-esadecimali.php

Risultato finale visualizzato dal browser

Esempio di codice HTML

 Tag per inserire le immagini
Le immagini sono una parte importante del web; bisogna però tener presente
che immagini troppo grandi rallentano la visualizzazione della pagina e quindi il
caricamento da parte del browser. I formati più utilizzati sono:

➢ Gif riescono a gestire al massimo 256 colori

➢ Jpg se non compresse è un formato un po’ ingombrante
➢ png è un formato leggero e versatile

<img src="nome_del_file" />

Risultato finale visualizzato dal browser

Esempio di codice HTML

 Gli attributi di questo tag sono:
width= n
height= n
possiamo usare anche un valore percentuale in modo
border= n
che l’immagine si adatti al monitor dell’utente
hspace= n
vspace=n
è importante usare questo attributo poiché i
align= left – right 
motori di ricerca, come Google, non leggono
title= descrizione della foto le immagini e i video, per cui è il solo modo
che abbiamo per farle indicizzare

Il punto chiave è posizionare ogni immagine subito prima del testo che deve
influenzare, l’immagine deve sempre precedere il testo che le deve scorrere intorno.
L’attributo align decide la posizione dell’immagine sarà il testo a ridisporsi intorno.

Risultato finale visualizzato dal browser

Esempio di codice HTML

width
vsapce

border height

vspace

hspace hspace
Si possono inserire titoli o didascalie su una immagine o un gruppo di immagini
usando il tag <figcaption>.

<figcaption>Intestazione</figcaption>

<img src="immagine_1.jpg"/>

<img src="immagine_2.jpg"/>

<figcaption>Didascalia</figcaption>

Risultato finale visualizzato dal browser

Esempio di codice HTML

 Usare un’immagine come link
Se volessimo creare un link ad una pagina web o un file usando un’immagine o
un bottone come parte cliccabile e non del semplice testo possiamo usare il
seguente codice.

<a href=indirizzo_web><img src=nome_immagine/ ></a>

Se volessimo creare un link ad una pagina web o un file usando un’immagine o

un bottone come parte cliccabile e non del semplice testo possiamo usare il
seguente codice.

Usare un’immagine mappa come link

Le mappe immagini sono fotografie che usiamo come link, ogni suo settore può
essere usato per linkare pagine o file diversi, si chiamano Mappe lato client .
Sono utili da usare se i link sono molti e la loro rappresentazione grafica rende
meglio l’idea rispetto ad un semplice testo.

✓ Usiamo il tag <img>per inserire l’immagine nella pagina web e includiamo

l’attributo “usemap” per dare un nome all’immagine mappata
✓ Usiamo il tag <map>per richiamare il nome e l’identificativo della mappa
✓ Usiamo il tag <area>tante volte quante sono le aree in cui vogliamo suddividere la
mappa

<img src="immagine.jpg" usemap="#mappa"/>

<map name="mappa" id="mappa">

<area shape="circle" coords="173,174,80" href="www.google.it" >

<area shape="rect" coords="270,75,405,210" href="www.yahoo.it" >

<area shape="poly" coords="270,75,405,210,55,77" href="www.ilmeteo.it" ></map>

 Favicon
Le Favicon sono delle piccole immagini da inserire vicino al titolo di tutte le
pagine del nostro sito come simbolo identificativo o logo distintivo.

Alcuni esempi sono: android yahoo Google

Per inserire una favicon dobbiamo usare tag simili a questi nella sezione <head>:

<link rel="icon" href="android.ico” />

<link rel="icon" href="android.gif" type="image/gif" />

<link rel="icon" href="android.png" type="image/png" />

 Tag per creare Tabelle
Le tabelle sono lo strumento per eccellenza dell’HTML perché sono versatili,
facili da usare, risolvono problemi di layout e permettono di gestire la grafica.

<table>
<tr>
<td>prima cella </td> <table>crea una tabella
<td>seconda cella </td>
</tr> <tr>table row = crea una riga
<tr> <td>table data= crea una colonna
<td>terza cella</td>
<td>quarta cella</td>
</tr>
</table>

Attributi del tag <table>

border=numero in px Spessore del bordo

bordercolor=colore Colore del bordo

width=numero in % Larghezza della tabella

height=numero in % Altezza della tabella

bgcolor=colore Coloro di sfondo

background=nome immagine Immagine di sfondo

align=left – right - center Posizione della tabella

cellspacing=numero Spazio tra le celle

cellpadding=numero Spazio tra le celle e il testo

frame=above – void – below – Aspetto dei bordi esterni

hsides – vsides – lhs - -rhs

rules =none – groups – rows – cols Aspetto dei bordi interni

– vsides – all
 Risultato finale visualizzato dal browser

Esempio di codice HTML

Risultato finale visualizzato dal browser

Esempio di codice HTML

 Attributi del tag <tr> e <td>
align=left – right - center

valign=top – middle - bottom
width=numero in %
height=numero in %
anche se sono gli stessi attributi del tag <table>
hanno un effetto diverso se inseriti in <tr> o in
<td>, nel primo caso influenzano l’intera riga,
nel secondo, invece, influenzano solo la cella.

bgcolor=colore

Risultato finale visualizzato dal browser

Esempio di codice HTML

 Il tag <caption>

<caption>Intestazione della tabella </caption>

È utile quando vogliamo dare un nome alla tabella; possiamo inserirlo dovunque
all’interno del tag <table>, il titolo apparirà sempre sopra la tabella in
posizione centrale.

<thead> Il tag <thead> permette di inserire una prima riga

<tr> dove le celle hanno la funzione di intestazioni di
<th>intes. 1 </th> colonne. Si può ottenere lo stesso risultato
<th>intes. 2 </th> inserendo un <td>al posto di <th>, ma il contenuto
</tr> della cella non sarebbe stato né grassetto né
</thead> centrato.

<tfoot>
<tr> Il tag <tfoot>rappresenta la riga finale della
<th>intes. 1 </th> tabella, ci consente di inserire le conclusioni o
<th>intes. 2 </th> eventualmente i risultati delle formule. Anche
</tr> in questo caso usiamo i tag <tr>e <th>.
</tfoot>
 Tag per creare Form

I Form sono moduli da compilare e inviare, possono contenere vari tipi di controlli.
A seconda delle esigenze, possiamo includere campi da spuntare, da riempire o da
completare.

Per essere creato correttamente un modulo deve essere costituito da 3 parti:

1. il tag iniziale e finale <form> …. </form> con all’interno tutte le informazioni

per accogliere e processare i dati.
2. gli elementi interni al modulo: caselle e controlli.
3. un bottone per inviare i dati o resettare.

Gli attributi del tag form sono molto importanti perché determinano come il
modulo sarà inviato, processato e archiviato sul server.

<form name="..." style="..." action="..." method="..." enctype="..."

target="...">

attributo necessario per distinguere

name="nome identificativo del modulo"
un modulo da un altro
attributo usato per inserire CSS in
style= "per inserire regole di stile CSS"
modo locale

action= "nome dello script" questo attributo ha 2 scopi: il nome

"indirizzo mail"
i valori possono essere:
script.php o mailto:mariorossi@xxx.it
dello script che lo deve analizzare
oppure l’indirizzo mail al quale
saranno reindirizzati tutti i dati in
esso contenuto

i valori possono essere Post o Get:

method="metodo con cui si inviano i dati"
Get limita il numero di informazioni
che possono essere raccolte e inviate,
non devono superare i 255 caratteri
per cui è molto poco usato, meglio
usare Post

enctype="tipo di codifica del form" text/plain: se i dati da processare sono

i valori possono essere: solo di tipo testuale.
text/plain o multipart/form-data multipart/form-data se invece i dati
sono più complessi e si prevede
anche l'invio di un file o
addirittura un'immagine.
 Il tag <fieldset>
Il tag <fieldset> consente di creare un'area con un'etichetta esplicativa, dove
raggruppare i controlli, la grandezza dell'area dipende dalla quantità di testo, se
quest'ultimo è breve possiamo inserire dei tag </br> per ingrandirla oppure usare i CSS.

<fieldset>
<legend> nome etichetta </legend>
• testo
• etichette
• controlli
</fieldset>

nel tag <legend> possiamo usare l'attributo deprecato align="left – center – right" per
spostare l'etichetta dove vogliamo.

Risultato finale visualizzato dal browser

Esempio di codice HTML

 Il tag <label>
I nomi che precedono il tag <input>
<label> nome etichetta </label> possono essere etichettati in maniera
formale per poi essere richiamati con i CSS

Il tag <input>
Inserisce delle caselle di testo compilabili

<input name="..." type="…" size="…" value="..." maxlength="…" >

name="nome che identificherà i dati sul server"

size="lunghezza della casella di testo", il valore di default è 20

value="testo di default" testo contenuto all’interno della casella

text
qualora l'utente non compili il campo password
maxlength="numero massimo di caratteri che si possono inserire" radio
checkbox
type="tipo di dato che il controllo richiede", possiamo scegliere tra: file
image
button
submit
reset

Risultato finale visualizzato dal browser

Esempio di codice HTML

 Per creare una lista di voci, dove l'opzione selezionabile deve essere solo una
usiamo sempre il tag <input> seguito però dall’attributo type="radio"

<label> seleziona una sola opzione: </label>

<input name=" " type="radio" value=""> opzione 1 </input>

<input name=" " type="radio" value=""> opzione 2 </input>

<input name=" " type="radio" value=""> opzione 3 </input>

<input name=" " type="radio" value=""> giorno </input>

</br>

<input name=" " type="radio" value=""> mattina </input>

</br>

Risultato finale visualizzato dal browser

Esempio di codice HTML

name="nome che identifichi i dati inviati al server" devono essere tutti uguali così collega tra
loro i pulsanti e contemporaneamente permette una singola scelta.

value="testo che sarà inviato al server qualora il pulsante venga attivato" può bastare anche
solo una iniziale. È fondamentale perché se manca al server sarà inviato un semplice ON che
non ci permetterà di capire quale bottone è stato realmente attivato".

checked="checked" per attivare in automatico uno dei pulsanti per default.

 Per creare una lista di voci che permette una selezione multipla, usiamo il tag
<input> seguito dall’attributo type="chekbox", il quale ci permetterà di creare
delle caselle spuntabili in corrispondenza delle voci desiderate

<label> Seleziona più di una opzione: </label> </br>

<input name=" " type="checkbox" value=""> opzione multipla 1 </input></br>

<input name=" " type="checkbox" value=""> opzione multipla 2 </input></br>

<input name=" " type="checkbox" value=""> opzione multipla 3 </input></br>

Risultato finale visualizzato dal browser

Esempio di codice HTML

name="nome che identifichi i dati inviati al server" devono essere tutti uguali, così collega
tra loro i pulsanti.

value="testo che sarà inviato al server qualora il pulsante venga attivato" può essere
uguale al nome del pulsante ma non è necessario, può bastare anche solo l'iniziale.

checked="checked" per attivare in automatico uno dei pulsanti per default.

Il tag <input> serve anche per creare bottoni che ci permettano sia di inviare al
server i dati compilati nel form sia di annullare tutte le scelte per ricominciare,
gli attributi che possiamo usare sono 3:

<input type="submit" name=" " value="invia i dati">

<input type="reset" name=" " value="Cancella i dati">

<input type="button" name=" " value="testo sul bottone">

Risultato finale visualizzato dal browser

Esempio di codice HTML

Se nell’attributo value viene omesso, il testo di

default che apparirà sui bottoni sarà rispettivamente
"Invia", "Ripristina" e un “bottone vuoto”, invece,
se non inseriamo l’attributo name i dati non saranno
raccolti dallo script e inviati al server.
 Se, invece, di usare un classico bottone grigio per compiere un’azione sul form
volessimo usare un’immagine, possiamo utilizzare sia il tag <input> che il tag <button>

<input type="image" src="immagine.jpg" name="… " title="…" width="…"

height="…" align="…">

<button name="…" type="submit" value="info">

<img src="immagine.jpg" width="…" height="…"/>

</button>

Risultato finale visualizzato dal browser

Esempio di codice HTML

Per eseguire l’upload di un file e caricarlo sul server usiamo sempre il
tag <input> con l’attributo type=”file”

<input type="file" name="sfoglia" size="30" value="sfoglia">

Risultato finale visualizzato dal browser

Esempio di codice HTML

 I tag <select> e <option>
Questi due tag usati insieme permettono di creare un elenco a discesa di
voci prestabilite e selezionabili

<select name=" ">

<option name="lingua" value="EN"> Inglese </option>
<option name="lingua" value="ES"> Spagnolo </option>
<option name="lingua" value="FR"> Francese </option>
<option name="lingua" value="DE"> Tedesco </option>
<option name="lingua" value="RU"> Russo </option>
</select>

Risultato finale visualizzato dal browser

Esempio di codice HTML

facendo clic sul triangolino nero

si espande il menu
 Nel tag <select> possiamo inserire gli attributi:

size="n" per l'altezza in righe dell'elenco

multiple="multiple" per consentire all'utente di selezionare più voci dall'elenco
tenendo premuto il tasto ctrl

Nel tag <option> possiamo inserire gli attributi:

selected="selected" se volessimo una voce selezionata in automatico
value=" nome identificativo inviato al server dallo script"

Nel caso le voci dell'elenco siano tante possiamo anche racchiuderle in

sottocategorie con il tag <optgroup>

<select name=" ">

<option value="html"> HTML </option>
<option value="java"> JAVA </option>
<option value="office"> OFFICE </option>
<optgroup label="pacchetto_office">
<option value="word"> word </option>
<option value="excel "> excel </option>
<option value="powerp">powerpoint </option>
</optgroup>
</select>
 Risultato finale visualizzato dal browser

Esempio di codice HTML

facendo clic sul triangolino nero

si espande il menu
Scuola Superiore per Interpreti e Traduttori di Pescara

Piazza Duca D'Aosta 34, 65121 Pescara

tel. 08527754
www.scuolainterpretionline.com
info@scuolainterpreti.it

Numero Verde 800 68 14 71

Seguici su LinkedIN

Seguici su Facebook

Iscrivi al Gruppo ATI – Associazione per Traduttori e Interpreti