Css e Html

Materie:Riassunto
Categoria:Informatica
Download:882
Data:08.07.2009
Numero di pagine:7
Formato di file:.doc (Microsoft Word)
Download   Anteprima
css-html_1.zip (Dimensione: 21.55 Kb)
trucheck.it_css-e-html.doc     108 Kb
readme.txt     59 Bytes



Testo

L'HTML e i CSS

In un documento ipermediale si può facilmente individuare il contenuto, ossia l’insieme di parti testuali, immagini, suoni, ecc. che contribuiscono a trasmettere informazioni all’utente che lo sta leggendo o navigando. Oltre al contenuto distinguiamo anche: la struttura e la presentazione.
Per struttura intendiamo l’organizzazione logica interna del documento, mentre per presentazione intendiamo il modo in cui il contenuto di un documento viene visualizzato graficamente.
Affinché i documenti ipermediali siano di facile lettura, ricerca e navigazione, devono essere scritti in un linguaggio, cioè l’HTML.
L’HTML è:
• Un linguaggio, riconosciuto da tutti i computer che possono collegarsi ad internet e da tutti i browser (Internet Explorer, Mozilla,ecc…);
• Acronimo di Hyper Text Markup Language;
• Come un documento ipermediale è costitutuito da: contenuto, struttura e presentazione;
Un documento html non è nient'altro che un file di testo con delle indicazioni sul colore delle scritte, sulla posizione delle immagini all'interno della pagina, ecc..
L'organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML (il W3C: World Wide Web Consortium) ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0); e - da un certo punto in poi - l'HTML si è evoluto in XHTML (si tratta dell'HTML riformulato come linguaggio XML - ne sono già state rilasciate due versioni).
Anche se abbiamo detto che l'HTML si è evoluto in XHTML ci sono delle ottime ragioni per incominciare a studiare l'HTML e non l'XHTML:
• di fatto l'HTML verrà utilizzato ancora per diversi anni come linguaggio principe delle pagine web.
• alcuni concetti dell'XHTML richiedono già una certa comprensione dei problemi che si acquisisce solo con l'esperienza. L'HTML è più immediato e consente di incominciare subito a produrre documenti web .
• chi conosce l'XHTML non può non conoscere l'HTML. La conoscenza dell'HTML è infatti il prerequisito essenziale di ogni webmaster. Comunque le differenze tra i due linguaggi non sono così marcate e passare dall'uno all'altro non dovrebbe richiedere molta fatica.

Istruzioni o elementi HTML
Le istruzioni in HTML vengono espresse racchiuse in parentesi triangolari (< e >), che prendono il nome di tag o marcatori. La maggior parte istruzione possiede una coppia di tag, che serve per delimitare la parte di documento su cui il comando ha effetto. Esempio:
inizio istruzione
National Geografic parte documento su cui ha effetto
fine istruzione
L’HTML è un linguaggio formato, ovvero un linguaggio che serve a dichiarare la struttura che un documento ipermediale deve assumere. Infatti, è anche considerato un linguaggio dichiarativo, perché definisce cosa l’istruzione deve o non deve fare, ma non è un linguaggio case-sensitive (è indifferente scrivere il codice in maiuscolo o in minuscolo) ne un linguaggio di programmazione (come può essere C o C++). Ciò significa che l'HTML non ha meccanismi che consentono di prendere delle decisioni ("in questa situazione fai questo, in quest'altra fai quest'altro"), e non è in grado di compiere delle iterazioni ("ripeti questa cosa, finché non succede questo"), né ha altri costrutti propri della programmazione.
Il linguaggio HTML, pur essendo dotato di una sua sintassi, non presuppone la logica ferrea e inappuntabile dei linguaggi di programmazione: se vi dimenticate di chiudere un tag, non verranno prodotti dei messaggi di errore; se non rispettate la sintassi probabilmente non otterrete la visualizzazione della pagina che desiderate, ma nient'altro. A volte vi troverete persino a dover adottare dei "trucchetti", non proprio da manuale, pur di visualizzare la pagina correttamente con ogni browser.
È consigliabile utilizzare l’indentazione (allineare tutto il codice con i tab), e grazie ad essa il codice HTML risulta più leggibile (vedi esempio: elementi di base di un documento HTML).

Che cosa occorre per visualizzare documenti HTML?
Per visualizzare un documento in HTML basta aver installato sul proprio pc un browser, che interpreta e visualizza gli elementi del HTML. La visualizzazione di un file html da parte del browser prende il nome di rendering della pagina. Motore di rendering è dunque quella sezione del browser che si occupa di mostrare sul video la pagina.

Che cosa occorre per scrivere documenti HTML?
Per scrivere un documento HTML basta aprire un file di Blocco Note o qualunque programma di word processing. I file codificati in HTML hanno estensione .html o .htm (per il DOS). Tali documenti sono quindi dei normali file ASCII ai quali vengono aggiunte le istruzioni HTML per la struttura e per la presentazione di un documento. Per scrivere un documento HTML si possono utilizzare anche dei software come ISt Page (anche se si legge First Page).

Elementi di base di un documento HTML
Le istruzioni di base indispensabili per la visualizzazione di un browser di semplici documenti HTML.

è un elemento contenitore, cioè che può contiene altri elementi al suo interno.
Altri elementi fondamentali dell’HTML sono: HEAD e BODY (che comunque possono anche essere omessi).
• HEAD, contiene le informazioni dichiarative, o informative o di impostazione globale del documento (es. , fogli di stile).
• BODY, contiene il documento vero e proprio, ovvero informazioni testuali, immagini e altri oggetti multimediali, visualizzabili con un browser (es. ).

Commenti
I commenti devono essere scritti come quanto riportato in seguito: .

Contenuto, struttura e presentazione di un documento
L’HTML è un linguaggio per la descrizione della struttura di un documento, composto da elementi. Più formalmente, possiamo considerare un documento HTML come un contenitore di elementi, dove un elemento può essere:
• Un elemento semplice (es.
);
• Un contenitore di elementi (es. );
• Un link (es. );
• Un oggetto multimediale (es. ).
Ogni elemento ha degli attributi o proprietà e da un eventuale contenuto. La presentazione degli elementi, cioè una rappresentazione grafica, viene fatta con un altro linguaggio, CSS (Cascading Style Sheets).
I CSS sono linguaggi di formato di tipo dichiarativo, che serve per definire lo stile di presentazione di un documento HTML.

Cominciamo a utilizzare il CSS
Premettiamo che la presentazione degli elementi viene genericamente chiamata stile e viene implementata da una delle più importanti proprietà degli elementi: la proprietà STYLE.
I comandi CSS possono essere inseriti:
• Fogli di stile in linea quando è contenuto nel BODY;
• Fogli di stile incorporati quando è contenuto nella HEAD e BODY;
• Fogli di stile esterni quando non è contenuto in qualsiasi elemento fondamentale, come HEAD e BODY.

Fogli di stile in linea
Sono contenuti nel BODY con la seguente scrittura:
testo

Un altra struttura particolare è il titolo, identificato da una lettera H e un numero progressivo, da 1 a 6 (……). Aumentando il numero progressivo il titolo diminuisce di grandezza.
Inserendo in quest’ultimo un foglio di stile possiamo evidenziare il testo, cambiare colore del testo, ecc…, come nell’esempio:
testo
BACKGROUND
Sfondo del testo
FOREGROUND
Carattere del testo
Le tabelle
Una tabella viene costruita come nell’esempio:

testo
………………

testo
………………

È possibile inserire un codice per la visualizzazione grafica della tabella, quest’ultima deve essere inserita nella .

table.risultati {border-style: double; border-width: 5pt; border-color: green }

Bisogna in seguito richiamare nella , questo collega il foglio di stile con la tabella.
Si può inserire il nome della tabella, inserendo all’interno della il codice:

nome tabella

Come definire un area
Per definire un’area si utilizzano gli elementi DIV o SPAN, infatti, il testo inserito in uno di questi elementi subisce lo stile, senza intaccare quello della pagina. Esempio codice:
testo

Gli elenchi
Gli elenchi possono essere ordinate o non ordinate:
• Gli elenchi non ordinati sono utilizzati per rappresentare un insieme di voci, legate in qualche modo tra di loro, ma che non richiedono di seguire un ordine specifico. Questo è caratterizzato dall’elemento contenitore UL, che può contenere più elementi semplici LI. Esempio di codice:

Puglia
………………

• Gli elenchi ordinati sono utilizzati per rappresentare un insieme di voci, legate tra di loro da priorità o azioni da seguire in un ordine specifico. L’elemento contenitore è OL, che contiene elementi più semplici come LI. Esempio codice:

UL{ list-style-type: circe}
OL{ list-style-type: upper-roman}

Italia

Lombardia
Lazio

…………………

Link
I collegamenti ipertestuali o link sono riferimenti ad altri documenti o ad altri elementi HTML. Con i tag e si può realizzare un link. Possiamo avere due tipi di link: link esterni e link interni.
I link esterni sono collegamenti ad altri documenti HTML o oggetti multimediali; esempio codice:
testo
testo
Se il file da richiamare è un documento che si trova in un’altra cartella occorre specificare il path-name, se devo aprire una pagina internet devo specificare l’URL.
I link interni è un collegamento ad una determinata posizione dello stesso documento HTML. Il codice di un link interno è uguale a quello dei link esterni.
Non tutti però sanno che i link testuali hanno diversi stati:
Status
Codifica in HTML 4.01
Descrizione
Collegamento normale
link
Normalmente il link quando si trova "a riposo" viene evidenziato all’interno della pagina HTML, in modo che sia facile per l’utente individuarlo. Nell’HTML tradizionale il link è sempre sottolineato (è possibile eliminare la sottolineatura soltanto usando i CSS). Di default i link sono blu (#0000FF).
Collegamento visitato
visited
Un link è visitato, quando l’URL della pagina compare nella cronologia dell’utente. Di default i link visitati sono di color violetto (più esattamente: #800080).
Collegamento attivo
active
Il collegamento è attivo nel momento in cui il link è stato cliccato e sta avvenendo il passaggio da una pagina all’altra.
Collegamento al passaggio del mouse
non presente
("hover" nei CSS)
Con l’HTML 4.01 al passaggio del mouse sul link si può fare ben poco, coi fogli di stile invece è possibile creare qualche effetto di visualizzazione.
Immagini
Per inserire delle immagini nella pagina HTML basta inserire il seguente codice nel Body:

Esempio



  



Come usare