Informatica di base - costruzione di una pagina web

• Componenti multimediali esterni diversi dalle immagini (per esempio audio, video o applicazioni) sono

<object>.

inserite nella pagina attraverso il tag Tra gli attributi ci sono:

- : che specifica il tipo dell’oggetto, per esempio indica un file di audio in formato .

type "audio/mp3" mp3

: che specifica l’oggetto attraverso il suo URL.

- data

• Le tabelle HTML sono definite riga per riga e, all’interno di ogni riga, cella per cella.

I principali tag con cui si descrivono le tabelle sono i seguenti:

<table></table>

- è il tag che inserisce una tabella ed è composto da più elementi che descrivono le

righe. ha numerosi attributi che consentono di definire l’allineamento, i colori, le spaziature e i

<table>

bordi della tabella;

<tr></tr>

- (table row) è il tag che inserisce una riga ed è composto da più elementi che descrivono le

celle. All’interno di ogni tabella possono esistere più righe definite da . Ogni

<table></table> <tr></tr>

riga è una sequenza di celle (di intestazione o normali)

<th></th>

- (table header) è il tag che inserisce una cella di intestazione deve essere all’interno di

e

righe dichiarate da .

<tr></tr>

<td></td>

- (table data) è il tag che inserisce una cella normale e deve essere all’interno di righe

dichiarate da .

<tr></tr> LISTE:

• <ul>

La lista puntata viene definita mediante l’uso del tag (unordered list) all’interno del quale devono

<li>

essere inseriti tanti elementi (list item) quanti sono i punti della lista.

• <ol>

La lista numerata viene invece definita mediante l’uso del tag (ordered list) all’interno del quale

<li>

devono essere inseriti tanti elementi (list item) quanti sono gli elementi ordinati della lista.

• Blocchi di testo: permettono di organizzare la resa grafica Menu/Contenuto

<div class="menu"> parte del codice relativa al menu </div>

<div class="contenuto"> parte del codice relativa al contenuto </div>

Marcatura dei cambi di lingua nel testo

<span lang="en"> Home </span>

Abbreviazioni e Acronimi <abbr>,

Il tag che viene utilizzato per indicare un’abbreviazione è mentre il tag per gli acronimi

<acronym> title

è Entrambi fanno uso dell’attributo per esprimere il testo dell’abbreviazione

.

o dell’acronimo in modo completo.

Esempio: "HTML" <acronym title="HyperText Markup Language">HTML</acronym>

"dott." <abbr title="dottore">dott.</abbr>

< &lt;

> &gt;

& &amp;

à &agrave;

è &egrave;

è &eacute;

ì &igrave;

ò &ograve;

ù &ugrave;

GESTIONE DI DOCUMENTI HTML

L’ambiente di lavoro di NVU si compone principalmente di quattro aree:

1. la barra degli strumenti, che offre comandi per creare nuove pagine HTML, aprire file già esistenti, salvarli

e inserire gli elementi nella pagina (testo, titoli, immagini, oggetti, eccetera)

2. Il site manager, che permette di gestire le pagine HTML, le immagini e eventuali altri file relativi ad un unico

sito, guidando l’utente nelle operazioni di pubblicazione sul server Web.

3. La finestra di editing, che è di fatto la vera e propria area di lavoro, sulla quale si potrà modificare la pagina

operando attraverso diverse modalità di visualizzazione che possono essere scelte attraverso la barra degli

strumenti "Edit Mode":

- visualizzazione "Normal" permette di operare sulla pagina in modo WYSIWYG. Questo significa che

è possibile inserire e modificare tutti gli elementi che compongono una pagina avendo direttamente a

disposizione la sua resa grafica (senza dunque dover operare direttamente sul codice HTML).

- visualizzazione "HTML Tags" permette di operare sulla pagina visualizzandone la resa grafica ma

contemporaneamente anche il codice HTML.

- visualizzazione "Source" permette di operare direttamente sul codice HTML della pagina, ovvero

andando ad inserire o modificare i tag e gli attributi HTML, come in un editor di testi. Lavorando in

questa modalità, ogni volta che si porta a termine un’operazione di salvataggio viene mostrata la pagina in

modalità di visualizzazione "Normal", per consentire all’utente di controllare immediatamente l’effetto

che le modifiche fatte al codice hanno sull’aspetto della pagina

- visualizzazione "Preview" mostra la pagina HTML come la visualizzerebbe il browser e consente di

operare sulla pagina in modo WYSIWYG

4. La barra di stato, che fornisce informazioni sul particolare tag HTML sul quale si sta operando in un

determinato momento.