01
05

Struttura di un documento html

postato da Administrator, in html, tutorials.

Obiettivo
In questo articolo tratteremo la struttura di un documento html.

Articolo
Un documento HTML è fatto da tre parti

1. Una linea che contiene la versione di HTML
2. Una sezione contenente l'intestazione. (HEAD)
3. Il corpo, che contiene il contenuto del documento. (BODY)

Il mio primo documento HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Il mio primo HTML</title>
</head>
<body>
Hello, World!
</body>
</html>
</HTML>

Analizziamo l'esempio

La dichiarazione

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ci dice quale versione di HTML stiamo utilizzando,in particolare, quale DTD (Document Type Definition) tra quelle
disponibili in HTML 4.01 utilizziamo:

The HTML 4.01 Strict DTD (strict.dtd) : comprende tutti gli elementi e gli attributi che non sono deprecated e che non appaiono nei documenti frameset.

Esempio:

The HTML 4.01 Transitional DTD (loose.dtd): Strict + elementi deprecated

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The HTML 4.01 Frameset DTD (frameset.dtd) Transitional + Frames

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

La struttura del documento
Il nostro documento html, deve avere:

TAG di apertura e chiusura del documento

<html>
</html>

Radice del documento HTML

<head>
</head>

Dichiarazione necessaria
Al browser per identificare
Il tipo di documento
E il set di caratteri

<meta http-equiv="content-type“ content="text/html; charset=ISO-8859-1">

Titolo della pagina

<title>Il mio primo HTML</title>

Corpo del documento

<body>
Hello, World!
</body>

Nel nostro primo documento html, abbiamo visto un esempio di come utilizzare questi tag.

Struttura dei comandi HTML
Un generico TAG HTML (elemento) è del tipo:

<nometag attr1=“val1” attr2=“val2” … >
Parte interna (può contenere altri tag)
</nometag>

Esempio:

<html>
blablabla
</html>

Il Tag "HTML"
Il tag "HTML" inizia il nostro documento html, i suoi attributi sono:

Lang: (it,en)

che specificano la lingua del documento

L’intestazione "<head>"
L’intestazione <head> racchiude informazioni sul documento.

<title> </title> Titolo del documento undica il titolo del documento (si vede nella barra del titolo)

<title>Il mio primo HTML</title>

Anche i tag <script> <style> <link> vanno in questa sezione

Meta Tags

I meta tag contengono le informazioni necessarie ai motori di ricerca. Esempio:

<HEAD>
<TITLE>Il titolo della pagina</TITLE>
<META> NAME="description" CONTENT="Una breve descrizione dei contenuti">
<META> NAME="keywords" CONTENT="parola chiave, parola chiave , parola chiave , parola chiave">
</HEAD>

l'attributo "description" contiente una breve descrizione dei contenuti della pagina mentre keywords una lista di parole
chiavi.

Altri meta tags sono

<META NAME="author" CONTENT="sandro stracuzzi">
<META NAME="copyright" CONTENT="2005, sandro stracuzzi">

che indicano l'autore e il copyright della pagina. Per specificare la lingua del documento

<META HTTP-EQUIV="content-language" CONTENT="it">.

e per specificare il tipo di contenuto della pagina

<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=utf-8">.

L’elemento" BODY"
Nell'elemento <body>, si mette il corpo del documento
Gli attributi per questo tag sono:

ALINK="..." - colore dei link cliccati.
VLINK="..." - Colore dei links visitati.
LINK="..." - Il colore dei link finche' non vengono cliccati.
BGCOLOR="..." - Colore di sfondo della pagina.
BACKGROUND="..." - Specifica una immagine di sfondo per la pagina

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • co.mments
  • del.icio.us
  • De.lirio.us
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Reddit
  • scuttle
  • Smarking
  • Spurl
  • YahooMyWeb
  • DZone
  • Internetmedia
  • Snap2r
  • Technorati

Letto:646 volte

Correlati

    No related posts

Leave a Reply

web tracker