Translate!

English Chinese (Simplified) French German Japanese

Newsletter: iscriviti!

Devi prima registrarti per poterti iscrivere ad una newsletter.
No account yet? Register

Statistiche

statistiche contatore

Siti Amici

Alla scoperta della "programmazione" HTML
Valutazione attuale: / 0
ScarsoOttimo 
Scritto da Administrator   
Sabato 13 Dicembre 2008 14:31

html intro

Questo breve articolo tratterà i principi base per poter iniziare a destreggiarci con pagine HTML elementari. Verranno esaminati i principali aspetti di tale linguaggio visuale, trattando a grandi linee le potenzialità che è in grado di offrire per creare da zero un sito web statico molto molto semplice.

Cos'è l'HTML? Non usiamo definizioni complicate ma veniamo al sodo: l'’HTML (HyperText Marker Language) è un linguaggio di presentazione visuale, non di programmazione, che ci dice come le scritte devono essere visualizzate sullo schermo: il browser è l’interprete del linguaggio HTML (e di altri).

Oggi più che ipertesto, si parla di ipermedia, un ipertesto evoluto che contiene dei media (video, suoni, animazioni, immagini,…).

All'interno di ogni pagina HTML è presente una serie di marcatori (i TAG), a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione. I tag vanno inseriti tra parentesi uncinate (<TAG>), la chiusura del tag viene indicata con una "/" (è il simbolo comunemente detto "slash". Quindi: </TAG>). Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma: <nome_TAG attributi>contenuto</nome_TAG>
Spesso i tag hanno degli attributi, e non tutti i tag si chiudono necessariamente.

L'HTML è "case unsensitive", cioè indipendente dal formato. Questo significa che è del tutto indifferente se scrivere i tag in maiuscolo o in minuscolo.

html code

I tre tag fondamentali di una pagina HTML sono:

  • <HTML>…</HTML> : comprende tutti gli altri tag;
  • testa  <HEAD>…</HEAD> : contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove scrivere - ad esempio - i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, fogli di stile, eccetera.
  •  corpo <BODY>…</BODY> : qui è racchiuso il contenuto vero e proprio del documento
html head body

I tag principali sono i seguenti, da inserire tutti nel BODY a meno che non diversamente specificato:

  • La struttura base per creare un link è la seguente:
    <a href="http://www.sito.com">vai al sito</a>
    Nel parametro href="/ " viene inserito il link che si vuole raggiungere al click sulla scritta "vai al sito".
    Fra i tag <a> e </a> si inserisce il testo che diverrà cliccabile.
    Per creare il link su un'immagine, la sintassi è simile: <a href="/ "><img src="/cerchio.jpg"></a>
    E' infine possibile creare un link che permetta di inviare una mail al click: <a href="mailto: nome@casellamail"> contattami </a> 
  • <BR> serve per andare a capo e non necessita di chiusura;
  • <P> e </P> serve ad aprire e chiudere un paragrafo. Riaprendo un <P> viene creato automaticamente, a capo, un nuovo paragrafo; il tag può anche non essere chiuso;
  • Tag per la realizzazione delle tabelle: per ottimizzare il contenuto di una pagina HTML, si crea una tabella, quindi una struttura di celle, righe e colonne, in cui predisporre tutti gli elementi, in modo che, quando si ridimensiona la finestra del browser, anche la tabella si ridimensiona automaticamente. La tabella è delimitata dal tag <TABLE> e </TABLE> ; questo tag può avere parametri aggiuntivi che ad esempio servono a specificare il colore dei bordi della tabella. All’interno di questa struttura, per aprire una riga si usa il tag <TR> e si richiude il tag con </TR>. Tra i tag riga, è possibile specificare le varie colonne con i tag <TD> e </TD>.

          Ad esempio:

          <TABLE>
               <TR>
                    <TD>
                         Mucca
                    </TD>

                    <TD>
                         Topo
                    </TD>
               </TR>

               <TR>
                    <TD>
                         Elefante
                    </TD>

                    <TD>
                         Cavallo
                    </TD>
               </TR>
          </TABLE>

          Il risultato prodotto sarà il seguente:

Mucca Topo
 ElefanteCavallo

           E’ anche possibile unire delle celle usando l’attributo COLSPAN, con la sintassi

<TD COLSPAN=“numero:_celle_unite”>

          oppure unire celle anche in verticale, usando invece la sintassi

<TR COLSPAN=“numero:_celle_unite”>

  • Per scrivere del testo in corsivo (italico) si usa il tag <I>…</I>; per scrivere del testo in grassetto si usa il tag <B>…</B>; per scrivere del testo sottolineato si usa il tag <U>…</U>;
  • Per far sì che venga visualizzato, come titolo della finestra del browser, uno specifico, si usa il tag <TITLE>…</TITLE> da inserire nell’HEAD e non nel BODY;
  • Per inserire un commento, la sintassi è la seguente: <!-- questo è un commento -->
  • Il tag che indica uno stile o una colorazione del contenuto è il segnuente: <font color="red">testo</font>
  • Per impostare lo sfondo di una pagina web (<body bgcolor="blue">), è preferibile in molti casi utilizzare la corrispondente codifica esadecimale del colore, che ci permette – tra le altre cose – di scegliere anche tonalità di colore non standard. Con la notazione esadecimale il nostro esempio diventa: <body bgcolor="#0000FF">. Il numero di colori che l’utente ha a disposizione dipende dalla scheda video. Ecco una tabella con la notazione di alcuni colori (molti di essi sono disponibili anche nelle varianti "dark" e "light", ad esempio: "darkblue", "lightblue"):

colore

parola chiave

notazione esadecimale

arancione

orange

#FFA500

blu

blue

#0000FF

bianco

white

#FFFFFF

giallo

yellow

#FFFF00

grigio

gray

#808080

marrone

brown

#A52A2A

nero

black

#000000

rosso

red

#FF0000

verde

green

#008000

viola

violet

#EE82

In conclusione, la struttura base di una pagina HTML è la seguente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title>Titolo della pagina web</title>
</head>

<body>
   <!-- Scriveremo qui -->
   Qui il nostro contenuto
</body>

</html>

Questa è solamente una piccolissima introduzione all'HTML: è possibile scendere molto più nel dettaglio. Ad esempio, è possibile creare pulsanti, campi, form e addirittura effettuare il controllo sulla correttezza delle informazioni immesse dall'utente in una pagina HTML: in questo caso interviene JavaScript a complicare le cose. E' infine possibile integrare l'HTML in pagine dinamiche PHP.

html first page
Commenti (0)add comment

Scrivi commento
più piccolo | più grande

busy

Articoli correlati:
Articoli più recenti:
Articoli meno recenti:

 
Copyright © 2009 InformaticaEasy. Tutti i diritti riservati.
E' vietata la riproduzione di qualunque contenuto del sito senza aver richiesto autorizzazione.
  Le recensioni e gli articoli sono scritti e di esclusiva proprietà di Paolo Vinella; se presenti su altri siti/forum, sono stati inseriti dallo stesso
 
Sito realizzato e gestito da Paolo Vinella.