[GUIDA Html: un linguaggio, una pagina, una rete]

Ultima modifica di 28Luke il Dom 27 Apr 2014 - 17:44 - modificato 1 volta.

L'Html è il più vecchio linguaggio web. In questo tutorial ne analizzeremo le basi in modo che dopo possiate approfondire come più vi piace.
In pratica un file in formato HTML è un file che, oltre a contenere il testo che verrà visualizzato dal browser, contiene anche dei comandi (racchiusi sempre tra i simboli "<" e ">" chiamati "tag") che associano al testo un particolare attributo.
Generalmente l'aspetto di un tag è il seguente
<nome tag>Testo influenzato dal tag</nome tag>

Cioè è composto da un comando di apertura e da uno di chiusura che includono il testo influenzato dal tag.

Ad esempio in questa pagina nella prima riga il termine "HTML" viene visualuzzato in grassetto perchè è stato incluso tra il tag e il tag .

I tag possono essere scritti sia in maiuscolo che in minuscolo.

STRUTTURA

La struttura base di un file in formato HTML è la seguente:
<HTML>
<HEAD>
.
. testata delk file
.
</HEAD>
<BODY>
.
. contenuti vari
.
</BODY> Corpo del file
</HTML>

Tutto il file è compreso tra i tag <HTML> e </HTML> che indicano l'inizio e la fine dello stesso.
Il file si divide poi in due parti:
- la testata nella quale possono essere inseriti solo alcuni particolari tag per fornire informazioni sui contenuti del file (come ad esempio il titolo e le parole chiave per i motori di ricerca)
- il corpo nel quale sono compresi tutti i tag di formattazione del file HTML.

I comandi della testata

Nel campo compreso tra i tag <HEAD> e </HEAD> possono essere inclusi i seguenti comandi:
<TITLE></TITLE>

Serve per assegnare un titolo alla pagina Web.
Può contenere solo stringhe di testo.
Possibilmente dovrebbe essere indicativo sul contenuto della pagina in quanto è l'unica parte della testata visibile con un browser, normalmente appare sul bordo della finestra (con Netscape in alto sulla sinistra).

Il corpo del file
Tutti gli altri comandi HTML sono compresi tra i tag <BODY> e </BODY>.
In questo tag è possibile impostare alcune caratteristiche globali del file come: lo sfondo, il colore del testo e i colori dei link.
I colori in HTML si possono esprimere tramite un codice esadecimale, che specifica i valori in formato RGB (Red Green Blue), o indicandone il nome (solo con Netscape e Internet Explorer).
Per maggiori informazioni sulla selezione dei colori si veda il paragrafo I colori in HTML.

L'attributo "Bgcolor=" consente di modificare il colore dello sfondo, mentre con "Background=" è possibile visualizzare un'immagine di sfondo, specificando il nome dell'immagine con il relativo path (directory o cartella in cui si trova).
Gli attributi: "Text=", Link=", "Vlink=" e "Alink="; consentono di impostare rispettivamente: il colore del testo (link esclusi), il colore dei link, il colore dei link a pagine già visitate e il colore dei link attivati (cioè quelli su cui è stato puntato il mouse ma non si è ancora rilasciato il pulsante.
ESEMPI
<BODY Bgcolor="#00AA00"
Text="#FFFFFF" Link="#0000FF"
Vlink="#FF0000" Alink="FFFF00">

Continua in un altro post...

Formattazione del testo

L'aspetto del testo, o di alcune sue parti, può essere modificato utilizzando i tag per la formattazione o selezionando un font particolare.
I tag per stili logici.
Questi tag specificano la caratteristica del testo che racchiudono e non il modo in cui deve essere visualizzato.
La visualizzazione dipende dal browser che assegna a ciascuno stile una formattazione particolare.
Esempi:
 Evidenziato 
 Molto evidenziato 
<CITE> Citazione </CITE>
<CODE> Codice </CODE>
<SAMP> Esempio </SAMP>
<KBD> Immissione da tastiera </KBD>
<VAR> Variabile </VAR>
<DFN> Definizione </DFN>
<ADDRESS> Indirizzo </ADDRESS>

È bene quindi non fare affidamento su questi tag per impostare una particolare formattazione, in quanto con un altro browser potrebbero essere visualizzati in modo differente.
I tag per stili fisici.
Indicano esattamente il modo in cui il testo deve essere formattato (grassetto, corsivo etc.).
Nella versione standard dell'HTML 2.0 erano definiti i seguenti tag
 Grassetto 
 Corsivo 
<TT> Font monospazio </TT>

- Netscape: Guida HTML _ X
Grassetto
Corsivo
Font monospazio

con la versione 3.2 sono stati inseriti anche i tag
 Sottolineato 
<S> Barrato </S>
<BIG> Più grande </BIG> testo normale
 Più piccolo testo normale
 Pedice testo normale
 Apice testo normale

- Netscape: Guida HTML _ X
Sottolineato
Barrato
Più grande testo normale
Più piccolo testo normale
Pedice testo normale
Apice testo normale
(Si ricorda che non tutti i browser supportano tutti i comandi della versione 3.2).

I tag possono anche essere combinati tra loro ad esempio
 Grassetto Corsivo 

- Netscape: Guida HTML _ X
Grassetto Corsivo

Testo preformattato

Dagli esempi fino a qui visti, si può osservare come la disposizione del testo nel file sorgente HTML non ha nessuna influenza su come tale testo viene visualizzato dal browser.
È possibile costringere il browser a visualizzare il testo cosi come viene editato utilizzando il tag

<PRE> ... </PRE>

l'unico inconveniente è che il testo preformattato viene visualizzato con un font monospazio.
Es:
<PRE>
questo
è un esempio
di testo preformattato
</PRE>

questo
è un esempio
di testo preformattato

Testo lampeggiante

Un'ulteriore possibilità per evidenziare parte di un testo è offerta dal tag

<BLINK> ... </BLINK>

Questo tag crea un effetto di lampeggio sul testo racchiuso.
Es:
<BLINK>
Testo lampeggiante
</BLINK>

È da notare che il testo lampeggiante attira notevolmente l'attenzione dell'osservatore, distogliendola dal resto della pagina, per questo motivo alcuni browser non lo supportano più (ad esempio le ultime versioni di Explorer).
Modifica dei font

Il tag per la modifica dei font è stato introdotto nella versione 3.2 dell'HTML.
Con l'ausilio degli attributi size=, face= e color= è possibile modificare le dimensioni, il tipo di font e il colore.

L'attributo size= può assumere valori compresi tra 1 e 7 (dove 3 rappresenta le dimensioni standard). È possibile specificare la dimensione assoluta o relativa.
Esempio:
Dimensioni normali
Dimensione 1
Dimensione 4
Dimensione 6

Dimensioni normali
Dimensione 1
Dimensione 4
Dimensione 6

L'attributo face= consente di impostare il tipo di font con cui il testo deve essere visualizzato.
Quando il browser trova una pagina che contiene questo comando, legge la lista di font specificati nell'attributo face= e cerca nel sistema un font con tale nome.
Se lo trova visualizza il testo utilizzando quel font altrimenti prova con il secondo e cosi via. Nel caso in cui non venga trovato nessun font, il testo viene visualizzato con il font standard.
Il problema principale è che non tutti i sistemi usano gli stessi nomi per i font, quindi anche in questo caso il risultato è variabile da sistema a sistema.
Esempio:
 Arial, Helvetica 
 Utopia, Symbol 

L'attributo color= consente di impostare il colore del testo.
I colori in HTML si possono esprimere tramite un codice esadecimale, che specifica i valori in formato RGB (Red Green Blue), o indicandone il nome (solo con Netscape e Internet Explorer).
Esempio:
 Testo Rosso 
 Testo Blu

IMMAGINI...

Nelle pagine Web è possibile inserire immagini in formato GIF o JPEG tramite il commando <IMG>. Questo tag, come pure <HR> e , non ha il corrispondente tag di chiusura.
L'HTML fornisce una serie di parametri che permettono di impostare la visualizzazione dell'immagine nella pagina.
Il parametro fondamentale è SRC che specifica la directory in cui si trova l'immagine e il nome del file (per l'indicazione del percorso valgono le stesse regole viste per i link).
Esempio:
<IMG SRC="gif/28LUKE.gif">

... E LISTE
L'HTML consente la formattazione di tre diversi tipi di liste.

Liste non ordinate
Liste numerate

Ad esempio l'elenco qua sopra è stato realizzato utilizzando il primo tipo.
Ciascuna lista ha un suo tag di apertura e chiusura, e un tag per l'inserimento degli elementi. Il primo serve per specificare che tipo di lista si vuole adottare, il secondo per differenziare tra loro gli elementi della stessa lista.
Le liste non ordinate
I tag di apertura e chiusura della lista sono <UL> e </UL> e ciascun elemento della lista deve essere preceduto dal tag <LI>.
Esempio:
<UL>
<LI>primo elemento
<LI>secondo elemento
<LI>terzo elemento
</UL>

Il simbolo prima di ciascun elemento può essere modificato usando l'attributo TYPE= nel tag di apertura della lista. Le opzioni disponibili per questo attributo sono: "disc" "circle" "square"
Esempio:
<UL TYPE="square">
<LI>primo elemento
<LI>secondo elemento
<LI>terzo elemento
</UL>

Le liste numerate
I tag di apertura e chiusura della lista sono <OL> e </OL> e ciascun elemento della lista deve essere preceduto dal tag <LI>.
Esempio:
<OL>
<LI>primo elemento
<LI>secondo elemento
<LI>terzo elemento
</OL>

In questo tipo di lista è possibile specificare, tramite le opzioni TYPE= e VALUE=, il tipo di numerazione che si vuole adottare e il numero di partenza.

TABELLE
L'HTML fornisce inoltre la possibilità di inserire il titolo della tabella e l'intestazione delle righe e delle colonne.
Il tag per il titolo è <CAPTION> e deve essere inserito subito dopo il tag <TABLE>.
Il tag per le intestazioni è <TH> e deve essere inserito:
nella prima riga se si vuole dare un'intestazione alle colonne;
prima del primo elemento di ogni riga se si vogliono intestare le righe.
Esempi:
<TABLE>
<CAPTION>
Titolo: Intestazione colonne
</CAPTION>
<TR>
<TH>Prima colonna</TH>
<TH>Seconda colonna</TH>
</TR>
<TR>
<TD>(1,1)</TD>
<TD>(1,2)</TD>
</TR>
<TR>
<TD>(2,1)</TD>
<TD>(2,2)</TD>
</TR>
</TABLE>

Bene, io qui ho finito! Spero di essere stato chiaro! win

(lo so, all'inizio non ci si capisce niente)

dovrò leggere tutto perché non so praticamente nulla di HTML. Grazie luke, mi sarà utile Razz

JLK_perry2000_ ha scritto:: dovrò leggere tutto perché non so praticamente nulla di HTML. Grazie luke, mi sarà utile

Di niente !

Bellissimo, una domanda: quanto tempo ci hai messo a scriverlo tuto??

Piu di mezz'ora, ho modificato una guida esistente

» [Guida: Mod per Skyrim]
» [Guida: Che cos'è l'ftp?]
» Guida ai Mob di Minecraft.
» [Guida: Come giocare al DS sul PC]
» [Guida: Navigare anonimi sul web]