PRIMI DUBBIO HTML

**pierofix** · 12-10-2005, 09:03

Stai attento ad una cosa: stai creando i tuoi documenti con un editor (probabilmente MS Front Page) che non ne capisce niente di HTML. Ricordi che nei precedenti post si parlava di tag e attributi di stile deprecati? Ecco, questo tuo documento ne è pieno.

Proviamo per un secondo a ragionare sul codice, e non sulla visualizzazione finale della pagina nel browser. Un documento scritto in XHTML 1.1 (ti porto subito al top, tanto il concetto è sempre quello

) deve di base avere sempre una struttura del genere:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

   <head>
      <title>Documento di prova</title>
   </head>

   <body>

   </body>

</html>

Analizziamone gli elementi:

nella prima riga abbiamo il DOCTYPE, ovvero la definizione di tipo documento: essa dice al browser che il documento è scritto in XHTML 1.1; questo pezzo di codice è standard e non va variato;
subito dopo troviamo l'apertura dell'elemento radice, ovvero l'apertura del marcatore html; se guardiamo al documento come ad un albero, <html> è considerato il livello di base, da cui si ramificano gli altri elementi; (Tralasciamo per un attimo l'attributo xmlns chè richiede un separato approfondimento.)
<html> deve obbligatoriamente avere due e solo due elementi figlio (immagina la struttura ad albero), ovvero <head> e <body>: il primo serve a contenere tutte le informazioni sul documento come il titolo (vedi che dentro head c'è l'elemento title?), l'autore, la data, delle parole chiave, una breve descrizione che apparirà nei motori di ricerca, i link ai file CSS e via dicendo);
il secondo figlio è <body> che invece raccoglie tutti gli elementi che appariranno visivamente nella pagina.

Fin qui tutto chiaro?

**urciuoli** · 12-10-2005, 09:11

tutto chiaro.
Non ho utilizzato alcun programma purtroppo non posso dare la colpa a nessuno fuorchè alla mia fantasia...continuiamo la lezione?

**urciuoli** · 12-10-2005, 09:15

Ma ieri ho provato a sperimentare una cosa,io posseggo Dreamweaver che genera il codice un po' come me mi e' parso di vedere..o sbaglio?
Comunque potrebbe essere un'idea alcune parti modificarle con il tanto caro blocco note di Win inserendole in una struttura gia esistente.
Sbaglio?

**pierofix** · 12-10-2005, 09:26

Adesso priviamo un attimo ad usare un linguaggio di markup diverso da XHTML: inventiamocene uno noi.

Questo spero ti aiuti a comprendere meglio l'importanza e il significato di un codice scritto bene. Ti riporto l'esempio del bigliettino fatto nell'articolo di Mibmagazine: www.mibmagazine.it/article.php?id=51 .

Facciamo conto di avere in mano un bigliettino di carta che riporta il seguente messaggio:

Per Lucia
Fatti mandare dalla mamma a prendere il latte.
Firmato: Renzo

Ora facciamo finta di avere una penna rossa in mano. Cominciamo a cerchiare la prima riga: "Per Lucia"; essa rappresenta il destinatario della missiva, giusto? La seconda riga, "Fatti mandare dalla mamma a prendere il latte.", rappresenta il messaggio. In fine, "Firmato: Renzo" rappresenta il destinatario.

Se dai in mano il biglietto ad una persona e chiedi lei quale sia il destinatario, essa non esiterà a risponderti "Lucia". Perchè questo? Sembra banale, ma per convenzione siamo abituati ad associare a "Per nome" l'informazione che identifica il destinatario.

Quando dai in pasto quel biglietto ad un computer, esso lo prenderà come una sequenza indefinita di lettere e parole, non capendo però il significato delle singole informazioni. Ecco che è stato inventato il cosiddetto linguaggio di marcatura. Come funziona? Semplice: si etichettano le informazioni racchiudendole in delle vere e proprie - appunto - etichette.

Proviamo a ricostruire il biglietto con un linguaggio di markup di nostra invenzione:

codice:

<biglietto>
   <mittente>Renzo</mittente>
   <destinatario>Lucia</destinatario>
   <messaggio>Fatti mandare dalla mamma a prendere il latte.</messaggio>
</biglietto>

Proviamo a vederne la struttura ad albero: <biglietto> è l'elemento radice, quello di base, da cui si ramificano i tre figli <mittente>, <destinatario> e <messaggio>.

Ecco che adesso una macchina sarebbe in grado di rispondere ad una domanda del tipo "Cosa dice Renzo a Lucia?".

Fin qui chiaro?

**urciuoli** · 12-10-2005, 09:34

chiarissimo,talmete chiaro che ho trovato un erorrorino nella tua risposta.
Renzo non e' il mittente??

**pierofix** · 12-10-2005, 09:36

Originariamente inviato da urciuoli
chiarissimo,talmete chiaro che ho trovato un erorrorino nella tua risposta.
Renzo non e' il mittente??

Nella foga...

Allora, ti è più chiaro il concetto di linguaggio di markup?

**urciuoli** · 12-10-2005, 10:01

si mi e' parecchio più chiaro,per quel discorso che riguarda l'affiancarmi ad un programma come dreamweaver?
magari anche solo per studiare il linguaggio.
Ma e' possibile inserire degli mp3 o un lettore nel sito?
come?

**pierofix** · 12-10-2005, 10:17

Un passo alla volta.

Allora, hai notato come, nell'esempio del biglietto, non ci siamo curati della rappresentazione delle informazioni, ma ci siamo solo concentrati sul dar loro un senso? Ecco, questo concetto dobbiamo riportarlo anche nell'uso di HTML.

Ma diamo un rapido sguardo ai CSS. Un foglio di stile è - solitamente - un file esterno che racchiude tutte le informazioni di stile che riguardano la pagina a cui esso è linkato. La sintassi è molto semplice. Ecco come potremmo dire che il nostro mittente appaia di colore rosso quando visualizzato sullo schermo:

codice:

mittente {
   color:red;
}

Il concetto è semplice: si scrive il nome del tag che su cui si vuole agire, poi si creano delle parentesi graffe e al loro interno inseriamo le proprietà che andranno a dare forma al marcatore interessato. Ovviamente ci sono molte proprietà, alcune delle quali deputate a controllare i colori, altre gli sfondi, altre le dimensione dei caratteri, altre il posizionamento degli elementi e via dicendo.

Per linkare il foglio di stile al biglietto dovremo inserire nella struttura di quest'ultimo un marcatore che dica al browser dove andare a caricare il file. Sempre con il linguaggio di nostra invenzione diremo:

codice:

<biglietto>
   <informazioni>
      <css>sito.it/stili/biglietto.css</css>
   </informazioni>
   <mittente>Renzo</mittente>
   <destinatario>Lucia</destinatario>
   <messaggio>Fatti mandare dalla mamma a prendere il latte.</messaggio>
</biglietto>

Se hai notato ho aggiunto della struttura supplementare, ovvero il tag informazioni: un po' come succede per HTML con il tag <head>, al suo interno compaiono informazioni che non interessano la rappresentazione nel browser quanto dati addizionali sul documento stesso.

Fin qui ci siamo? Hai domande?

**urciuoli** · 12-10-2005, 10:24

cero che ne ho,
<css>sito.it/stili/biglietto.css</css>questa scritta indica semplicemente la presenza di un foglio di stile esatto?
ma come fare ad inserire nel foglio dis tile delle informazioni?
Dunque il foglio di stile e' qualcosa che si adatta a tutta la pagina,se decido che in quella pagina i link che portabo ad altre pagine del sito passandoci sopra con il mouse diventerannno blu allora inseriro nel css la data informazione(scritta in html?)
Ti faro un monumento,grazie.

**urciuoli** · 12-10-2005, 10:32

ecco ui il codice html della mia home page.
attendo un commento.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>PhotofactoryHomepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#333333" text="#CCCCCC" link="#666666" vlink="#999999" alink="#FFFFFF">
<dl>
<dd>
<dl>
<dt>
<div align="right"><font size="3" face="Verdana, Arial, Helvetica, sans-serif">PhotofactoryTorino</font></div>
</dt>
<dd>
<div align="right"> <font size="3" face="Verdana, Arial, Helvetica, sans-serif">
12 Ottobre, 2005 9:59
</font> </div>
</dd>
</dl>
<hr>
</dd>
<dt> </dt></dd></dt>
<div align="center">[img]flyer%20phf.jpg[/img]</div>
<div align="center"></div>
</dl>
<p align="center"><font size="+3" face="Verdana, Arial, Helvetica, sans-serif">Entra</font></p>
<p align="center"></p>
<p align="center"></p>
<p align="center"></p>
</body>
</html>

Discussione: PRIMI DUBBIO HTML

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio