Comments
Description
Transcript
COMANDI BASE HTML COLORI E SFONDI
COMANDI BASE HTML Ogni documento HTML è contraddistinto dai seguenti comandi di base, che ne definiscono la struttura: <HTML> <HEAD> <TITLE>Nome del documento</TITLE> </HEAD> <BODY> </BODY> </HTML> All'interno del body è contenuto tutto il documento, ciò che è all'interno dell'head viene letto dal browser, ma non figurerà nella pagina aperta. COLORI E SFONDI All'interno del body possiamo inserire dei comandi che regolano il colore di fondo della pagina o un eventuale sfondo, il colore del testo, dei links e così via. <BODY background="nome_file.*" BGCOLOR="#XXXXXX" BGSOUND="nome.file" TEXT="#XXXXXX" LINK="#XXXXXX" VLINK="#XXXXXX" ALINK="#XXXXXX"> Chiaramente i due comandi BACKGROUND e BGCOLOR sono alternativi nel senso che o si usa l’uno o l’altro, non è possibile impostare contemporaneamente un colore e un’immagine come sfondo. Background indica il file in formato jpg o gif che il browser utilizzerà come sfondo per la pagina. Bgcolor indica il colore di fondo della pagina. I colori sono espressi in RGB (red, green, blue) in formato esadecimale. Ad esempio #000000 corrisponde a red=0 green=0 blue=0 cioè nero, mentre #FFFFFF corrisponde a red=255 green=255 blue=255 cioè bianco, #00FF00 corrisponde al verde ecc.. Bgsound serve per inserire una musica di sottofondo. Text indica il colore del testo. Link indica il colore del testo cliccabile. Vlink indica il colore dei collegamenti già visitati. Alink il colore del testo cliccabile mentre viene cliccato. FORMATTAZIONE DEL TESTO Line Break <BR> forza il testo su una nuova linea Paragraph <P> oltre a mandare a capo lascia una linea vuota. I contrassegni <P> e <BR> sono utilizzati perché il linguaggio HTML non è sensibile alla formattazione con la quale è scritto (tranne che per un caso); inoltre questi due tags non hanno il corrispondente </...> visto che si possono inserire solo a fine linea. L'intestazione di una pagina, che figurerà come titolo si chiama header. I tags di intestazione determinano la grandezza dei caratteri dell'header Headers <Hn> </Hn> dove 'n' è un numero compreso fra 6 e 1 (dal più piccolo al più grande). Dopo l'header non è necessario inserire il tag di paragrafo o di Line Break. Digitando il documento invece bisogna ricordarsi di utilizzarli ogni qual volta si voglia andare a capo o saltare una riga (come già detto il browser non è sensibile alla formattazione utilizzata in fase di creazione). Il linguaggio HTML 3.2 permette di variare la dimensione dei caratteri anche nel documento oltre che negli header, permette il grassetto, il corsivo ed il sottolineato da la possibilità di utilizzare alcune font predefinite. Gli effetti ottenibili e le sintassi da utilizzare sono contenute in questa tabella: Dimensione dei caratteri <FONT SIZE = -2>... </FONT> Dimensione dei caratteri <FONT SIZE=+1>...</FONT> Corsivo <I>... </I> Grassetto <B>... </B> Sottolineato <U>... </U> Typewriter <TT>... <TT> Enfasi <EM>... </EM> Strong <STRONG>... </STRONG> Sample <SAMP>... <SAMP> Code <CODE>... /CODE> Keyboard <KBD>... </KBD> Variabile <VAR>... </VAR> Definition <DFN>... </DFN> Citatzione <CITE>... </CITE> Address <ADDRESS>... </ADDRESS> I tags sopraelencati possono essere combinati fra loro per ottenere vari effetti. HTML 3.2 supporta i font true type (sempre che questi siano supportati dal sistema, altrimenti vengono ignorati) per utilizzarli si utilizza <FONTFACE="nome_font">...</FONT> Sempre utilizzando il tag font oltre alla dimensione (con SIZE da -2 a +4) ed il font (con FACE) è possibile cambiare il colore di solo alcune parole del testo <FONT COLOR="#xxxxxx">...</FONT> il colore è espresso in esadecimale secondo lo stesso criterio utilizzato nel tag BODY. IMMAGINI Il comando per inserire un'immagine (foto, disegno, simbolo) all'interno di una pagina html è il seguente: <IMG SRC="foto.jpg"> E' importante ricordarsi di segnare anche l'estensione del file e il percorso esatto che il browser deve compiere a partire dalla directory di residenza del documento. Nota bene: windows visualizza di solito solo il nome del file e non la sua estensione. In realtà tutti i files sono contraddistinti oltre che dal loro nome da una sigla composta da tre lettere che il computer segna, preceduta da un punto, dopo il nome del file. Ad esempio in un file denominato manuale.doc, l'estensione (.doc) indica che si tratta di un documento di testo, il file foto.jpg è invece un'immagine in formato Jpeg. Nel linguaggio di programmazione HTML bisogna sempre ricordarsi di scrivere i nomi dei files completi della loro estensione. Inoltre, se il file a cui ci si riferisce non si trova nella stessa cartella del nostro documento, bisogna segnare l'esatto percorso che il browser deve compiere per trovare il file in questione: ad esempio se l'immagine che si vuole caricare si trova nella sottocartella "immagini" della cartella "documenti" dovremo dare il comando <img src="documenti/immagini/foto.jpg">. Altre opzioni che abbiamo a disposizione sono: <IMG ALT=”testo alternativo” ALIGN=BOTTOM BORDER="3" WIDTH="150" HEIGHT="100" SRC="foto.jpg"> Dove alt contiene il testo alternativo che viene visualizzato prima di caricare l’immagine oppure se ci si pone con il mouse sopra l’immagine stessa, align=bottom indica che il fondo dell'immagine si deve allineare con un eventuale testo presente nella stessa pagina (altre opzioni di allineamento sono: top, middle), border disegna un bordo intorno all'immagine dello spessore definito (in pixel), width e height regolano rispettivamente la larghezza e l'altezza dell'immagine, espresse sempre in pixel LINKS Il comando per costruire delle hot word, cioè dei tratti di testo cliccabili che si collegano ad un altro documento HTML è il seguente: <A HREF="nomefile.xxx"> testo cliccabile </A> Anche in questo caso è importante ricordarsi di segnare anche l'estensione del file e il percorso esatto che il browser deve compiere a partire dalla directory di residenza. E' possibile creare dei link anche utilizzando delle immagini. Ad esempio il comando <A ALT=”clicca sull’immagine per aprire la pagina” HREF="nomefile.xxx"> <IMG SRC="foto.jpg"></A> farà si che l'immagine foto.jpg diventi cliccabile funzionando così come "link" per un'altra pagina html o un altro tipo di file, come per la foto il tag ALT riporta un testo alternativo. COME COSTRUIRE DELLE TABELLE Il comando base per costruire una tabella è <TABLE> </TABLE> All'interno della tabella dobbiamo poi inserire i vari righi e all'interno dei righi varie celle. Il comando per inserire righi è <TR> </TR> Il comando per inserire celle è <TD> </TD> Ad esempio questa tabella (Esempio1): sarà una tabella con due righe, ciascuna suddivisa in due celle. Il comando <caption> serve per dare un titolo alla tabella e può anche non essere usato. Altre opzioni a nostra disposizione sono: <TABLE width=70% height=70% border=3 cellpadding=15 cellspacing=15> Il comando width ci da la larghezza complessiva della tabella espressa in percentuale o in pixel (es. width =300) Il comando height ci da l'altezza complessiva della tabella espressa in percentuale o in pixel. Il comando border ci da lo spessore in pixel dei bordi della tabella. Il comando cellpadding ci da lo spazio tra il contenuto delle celle e i bordi della tabella. Il comando cellspacing distanzia le varie celle una dall'altra. Altre opzioni per la formattazione delle celle sono (Esempio 2): Il comando colspan=2 indica che quella cella dovrà avere una larghezza doppia rispetto al normale Un altro comando è rowspan=* che indica un'altezza doppia tripla ecc.. Altri comandi per la formattazione delle celle sono: <TD align=center align=left align=right align=top align=bottom> Servono per allineare nel modo voluto il testo all'interno delle celle. <TD bgcolor="FFFFFF" background="nome_file.*" width=10%> Questi danno un colore o uno sfondo alla cella e la larghezza della cella rispetto al totale della tabella. All'interno di ogni cella potremo naturalmente inserire oltre a testo immagini, liks ecc.. tutto con i consueti comandi.