Corso HTML e CSS (lezione 4)

Impariamo a costruire un sito Web

Lezione 4: La struttura : La nostra prima pagina (Parte 2^).

Visto nella lezione precedente cosa inserire nella <head> della nostra pagina web, dobbiamo affrontare la struttura del <body>. Questo sarà praticamente l’argomento di tutto il corso da qui in avanti.

Come detto i tag <body> .. </body> includono tutto il contenuto che vogliamo mostrare nella nostra pagina. Per inserire il contenuto, data la struttura del linguaggio ancora una volta troveremo dei tag che hanno il compito di istruire il browser circa come presentare a video ciò che è inserito al loro interno.

Facciamo due semplici esempi per chiarire il concetto.

Con:

<p>Questo è un paragrafo</p>

diciamo al browser che la frase scritta tra <p> e </p> è un paragrafo e va trattato come tale (con le regole definite per il paragrafo, se lo avremo fatto).

Con:

<b>Questo ci permette di scrivere in grassetto</b>

diciamo invece al browser che la frase all’interno dei tag <b> e </b> deve essere visualizzata in grassetto. Semplice, no? E se volessimo scrivere un paragrafo in grassetto? Naturalmente basta combinare i due tag:

<p><b>Paragrafo in grassetto</b></p>

Questo ci permette di enunciare una regola da tener ben presente nella costruzione della pagina.

I tag vanno chiusi nell’ordine inverso a quello con cui sono stati aperti, cioè vanno annidati.

La figura 1  aiuta a comprendere il concetto:

Fig.1

 

Guardiamo adesso il primo esempio <p>Questo è un paragrafo</p> In questa frase abbiamo inserito  la e accentata, com’è tipico della nostra lingua. Questo è corretto se usiamo il set di caratteri UTF-8 che per l’appunto è quello tipico per l’italiano, ma se il charset fosse ISO-8859-1 il carattere è non sarebbe contemplato ed andrebbe specificato con una particolare sequenza che inizia con ‘&’ e finisce con ‘;’ cosi è andrebbe scritto &egrave; mentre per esempio à andrebbe scritto &agrave;

Come specificare il set di caratteri è stato detto nella lezione precedente. La sintassi è:

<meta http-equiv=”Content-Type” content=”text/; charset=utf-8″ />

e va inserito tra <head> e </head>.

Questo esempio ci introduce in un discorso più ampio che non riguarda solo i caratteri non contemplati nel set di caratteri scelto, ma più in generale riguarda tutti quei caratteri che sono riservati come per esempio i segni < e > che sono usati per racchiudere il nome di un tag.

I caratteri riservati che non possono essere usati nel testo sono:

Carattere Specifica numerica Specifica col nome Descrizione
&#34; &quot; virgolette
&#39; &apos; apostrofo
& &#38; &amp; E commerciale
< &#60; &lt; minore
> &#62; &gt; maggiore

Al posto del carattere riservato andrà scritta la corrispondente specifica numerica o la specifica per nome; diciamo che &amp; (ampersand) è più facile da ricordare che &#38;

Quindi se nel testo che deve apparire nella nostra pagina compare per esempio ‘a < b questo andrà scritto così: ‘a&lt;b’.

Con la stessa modalità si potranno scrivere simboli particolari non in tastiera. Un elenco completo dei simboli e relativi codici lo potete trovare qui.

Per chiudere questa lezione riportiamo di seguito lo scheletro di pagina che potremo utilizzare come base per le nostre pagine.

 

<!DOCTYPE PUBLIC “-//W3C//DTD X 1.0 Strict//EN” “http://www.w3.org/TR/x1/DTD/x1-strict.dtd”>

< xmlns=”http://www.w3.org/1999/x”>

<head>

     <meta http-equiv=”Content-Type” content=”text/; charset=utf-8″ />

     <title>Titolo della pagina</title>

     <meta name=”keywords” content=”Keyword1, Keyword2″ />

     <meta name=”description” content=”Descrizione della pagina” />

     <meta name=”robots” content=”index,follow” />

</head>

<body>

</body>

</>

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.