La sintassi definisce, mediante convenzioni normative, il modo in cui i tag, gli attributi e i valori devono essere applicati agli elementi di una pagina web. Non rispettare queste regole significa non avere documenti validi e ben formati. L’obiettivo della sintassi è di vincolare le definizioni mediante usi ben definiti.
Un documento ben formato significa che rispetta le regole della sintassi XML, mentre un documento è ritenuto valido se usa un linguaggio in modo corretto.
Per XHTM le regole sono definite nel DTD (Document Type Definition) del W3C.
Le principali regole da seguire sono:
·
gli elementi devono essere correttamente annidati <b><i>Testo</i></b>
·
i nomi di elementi e attributi devono essere in minuscolo
·
gli elementi non vuoti (cioè, quelli che contengono testo o altri elementi) devono avere, dopo il tag di apertura anche quello di chiusura: <p>Testo</p>
·
anche gli elementi vuoti devono essere terminare con la dichiarazione />. Es: <br />
·
i valori degli attributi devono essere delimitati da virgolette <img src=”foto.jpg” >
·
ogni attributo deve avere un valore
·
per identificare un elemento occorre usare solo gli attributi id e class.
Documento HTML
L’elemento <html> deve contenere la dichiarazione del namespace XML (spazio dei nomi) mediante l’attributo xmlns.
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
In un document XHTML, <html> deve essere preceduto dall’elemento
<!DOCTYPE>, all’interno del quale occorre indicare la DTD di riferimento e il suo URI.
Un documento HTML è costituito da due sezioni ben distinte:
Nella Head si inseriscono:
i comandi che inviano informazioni al web server e
il codice che deve essere letto prima di costruire la pagina: script, fogli di style, ecc.
Il BODY racchiude il contenuto della pagina web
<html>
<head>
script, fogli di style, ecc.
</head>
<body>
contenuto della pagina web: testo ed immagini, ecc.
</body>
</html>
il browser ignora il vostro modo di scrivere, in quanto si limita a leggere ed interpretare solo gli elementi html validi.
Icona personalizzata
E’ possibile visualizzare, nella barra degli indirizzi URL del Browser e nella directory de dei preferiti, una icona personalizzata, mediante l’inserimento nel tag <head>, della seguente definizione:
<head>
<link rel="shortcut icon" href="http://www.antoniosammartino.it/favicon.ico">
</head>
Il nome dell’icona deve essere “favicon.ico” (i browser più recenti accettano anche un nome diverso), deve avere una dimensione di 16x16 pixel e non deve superare la gamma di 256 colori.
Tag: css
Antonio Sammartino |
0 Commenti 
|
Discussioni |
Integrazioni
03/09/2008 9.34.36 | Social Bookmark
Contenitori di tipo Blocchi
Gli elementi <div>e <span> consentono di definire generici contenitori in grado di contenere elementi HTML. Ad ogni div o span viene associato una sezione della pagina. In genere l’elemento span viene annidato all’interno dei div.
Contenitore di tipo Paragrafo
L’elemento <p> consente di definire un paragrafo entro cui inserire un testo.
La principale differenza fra i tre elementi è la seguente:
·
<div>
crea un ritorno a capo, in genere è usato per contenere interi paragrafi o immagini
·
<span>
è un elemento inline, cioè non crea ritorni a capo e continua sulla stessa linea del tag che lo include. In genere è usato all'interno dei paragrafi al fine di associare effetti visivi a parte di un testo.
·
<p>
crea un ritorno a capo e un’interlinea vuota
Gli elementi <div>, <span> e <p> vengono anche denominati Selettori in quanto consentono di selezionare una parte del documento a cui assegnare specifiche regole.
Header
Un ulteriore contenitore per il testo è l’elemento Header. E’ un elemento di tipo blocco, formattato in grassetto e lascia una riga vuota prima e dopo di sé. Sono disponibili 6 diversi tipi descritti nella tabella che segue:
<h1>titolo 1 </h1>
titolo 1
<h2>titolo 2 </h2> titolo 2
<h3>titolo 3 </h3> titolo 3
<h4>titolo 4 </h4> titolo 4
<h5>titolo 5 </h5> titolo 5
<h6>titolo 6 </h6> titolo 6
Gli elementi <div> e <span> sono elementi neutri, nel senso che non aggiungono nulla al documento. Tuttavia nei CSS possono essere usati per aggiungere effetti a specifiche parti di un testo.
Nell’esempio che segue <span> è usato per assegnare un colore diverso alla parola software:
<p>
IDEA sviluppa
<span class=”
text-special
”>
software
</span>
in windows
</p>
La classe definita nel foglio stile è:
span.text-special {
color:red;
}
La frase visualizzata sarà: IDEA sviluppa
software
in windows
Mentre <span> è un elemento inline, <div> consente di raggruppare diversi elementi inline in un unico blocco
<div id="text-normal">
. . .
</
div>
<div id="text-special">
. . .
</
div>
E nel nostro foglio di stile possiamo utilizzare il raggruppaamento nello stesso modo visto sopra:
# text-normal {
background:blue;
}
# text-special
{
background:red;
}
Tag: css
Antonio Sammartino |
0 Commenti |
Discussioni |
Integrazioni
03/09/2008 9.34.36 | Social Bookmark
Stile di Classi.
Le classi di stile consentono di applicare la stessa formattazione a più elementi della pagina web. La definizione di uno stile viene fatta mediante un identificatore di tipo .nomeclasse (possono essere richiamati più volte all’interno della pagiana)
.field-text {
font-style: italic;
}
Per applicare la classe di stile si utilizza, negli elementi html l’attributo class
<div class=”field-text”> </div>
mentre negli elementi aspx si utilizza l’attributo cssclass
<asp:label cssclass=”field-text” runat=server />
Stile specifico.
E’ possibile creare uno stile da applicare ad uno specifico elemento mediante l’attributo id. In questo caso, le informazioni di formattazione, possono essere applicate ad un solo elemento della pagina mediante l’identificatore #elementID (possono essere richiamati una sola volta all’interno della pagina)
#title-cap {
font-style: italic;
}
Per applicare l’elemento di stile si utilizza, l’attributo id
<div id=”field-text”> </div>
Pseudo Classi.
Le pseudo classi consentono di creare stili per definire particolari comportamenti per gli elementi predefiniti.
Un esempio di pseudo classe per i link è (definire secondo l’ordine indicato):
a:link { color: red; } /* link non visitati. Normali */
a:visited { color: blue; } /* link visitati */
a:hover { color: yellow; } /* mouse sopra */
a:active { color: lime; } /* link attivi */
Un esempio di pseudo classe da applicare alla prima riga di un testo contenuto nell’elemento è:
p:first-line { color: #000044; }
Un esempio di pseudo classe da applicare alla prima lettera di un testo è:
p:first-letter { font-size: 13px; }
Tag: css
Antonio Sammartino |
0 Commenti |
Discussioni |
Integrazioni
03/09/2008 9.34.36 | Social Bookmark
La presentazione dei contenuti mediante i fogli stile CSS si basa sul concetto di Box Model, in cui le informazioni nella pagina, blocco o elemento in linea, devono essere associate ad un box che ha le seguenti caratteristiche:
-
quattro margini indipendenti (superiore, destro, inferiore e sinistro), il cui fine e di definire lo spazio che separa il box dell'elemento da quelli degli altri elementi. I quattro margini sono controllabili in modo indipendenti l’uno dall’altro
-
un contenuto, testo, immaggini o gruppi di elementi
-
uno spazio interno tra il bordo e il contenuto, denominato pudding, in cui i quattro margini sono controllabili in modo indipendenti l’uno dall’altro
-
la larghezza e l’altezza complessiva del box è data dalla somma dei margini, del padding e dalla larghezza del contenuto.
E’ possibile controllare le diverse proprieta del box nel seguenti modi:
-
la definizione dei margini, consente di separare un box dagli altri
-
assegnando il valore zero ai diversi componenti del bordo è possibile eliminare il loro colore, spessore e aspetto
-
mediante il padding è possibile separare il contenuto dal bordo
-
lo sfondo dell’area contenuta all’interno del bordo (contenuto e padding), può essere trasparente, di un colore uniforme o contenere un’immagine che può essere posizionata in modo fisso, in un punto preciso dell’area o ripetuta orizzontalmente/verticalmente
-
l’allineamento a destro o a sinistra rispetto al box che lo circondano.
-
Il posizionamento può essere relativo alla sua posizione all’interno della pagina, assoluto o fisso rispetto al box che lo contiene
Tag: css
Antonio Sammartino |
0 Commenti |
Discussioni |
Integrazioni
03/09/2008 9.34.36 | Social Bookmark
La proprietà Display di un elemento consente di modificare il modo con cui viene visualizzato un elemento. I possibili valori sono:
·
inline
: genera uno o più blocchi in linea
·
block
: forma un blocco
·
table, inline-table, table-row, table-column, table-cell
: l’elemento si comporta come un componente di una tabella
·
none
: l’elemento non viene mostrato e non occupa spazio
Esempi
:
p { display: block; }
em { display: inline; }
li { display: list-item; }
img { display: none; }
Visibility
Specifica se un elemento deve essere visualizzato o nascosto. Se l’elemento non viene visualizzato comunque occupa lo spazio che occuperebbe se mostrato. I valori di visibility sono visible (mostra l’elemento) e hidden (nasconde l’elemento).
Posizionamento
Il posizionamento degli elementi all'interno della pagina è controllato dalle proprietà position e float.
Position
in genere è usato con i valori relative, absolute. Il valore static è quello di default. Relative è un posizionamento relativo all'elemento contenitore. Le proprietà top, bottom, left e right, impostate per posizionare l'elemento, fanno riferimento al contenitore.
Nel posizionamento assoluto l'elemento è distaccato dal resto del documento, in quanto si posiziona nel punto indicato proprietà top, left e bottom, right.
Nel caso in cui l'elemento contenitore abbia un posizionamento diverso da static, il posizionamento assoluto si riferisce (nei top e left) all'elemento contenitore
La proprietà z-index è importante con il posizionamento assoluto in quanto specifica a che livello dovrà trovarsi un dato elemento.
·
Se z-index maggiore di 0 corrisponde un elemento posto SOPRA gli altri.
·
Se z-index è uguale a 0 (valore di default), gli elementi si troveranno nel medesimo ordine in cui sono stati scritti nel codice
·
Se z-index è -1 l'elemento è SOTTO tutti gli altri.
La proprietà float forza un elemento a posizionarsi a sinistra o a destra, mentre il resto del contenuto scivola al suo fianco a meno che non non si impostata la proprietà clear. I valori di float sono left, right, none e inherit.
Inherit rende ereditario il float, cioè passa il valore right, left o none ai blocchi all'interno del blocco che contiene il float:inherit.
La proprietà clear consente di evitare che il resto del contenuto si accosti all'elemento che contiene la proprietà float (toglie l’elemento dal flusso della pagina). I valori di clear sono left, right, both. Il primo evita che il contenuto si accosti a sinistra, il secondo a destra, il terzo li evita entrambi.
Scrolling
La proprietà overflow indica se occorre inserire le barre di scorrimento. I possibili valori sono:
·
hidden, nasconde le barre di scorrimento
·
scroll, le barre di scorrimento sono sempre visibili
·
auto, le barre di scorrimento sono visualizzate solo se necessarie
Tag: css
Antonio Sammartino |
0 Commenti |
Discussioni |
Integrazioni
26/12/2008 9.34.36 | Social Bookmark
Colore
Il colore del testo è assegnato mediante la proprietà color. Il valore può essere espresso mediante il nome del colore (es: blue), mediante un valore rgb (es: rgb(0,0,255)), mediante un valore esadecimale (es: #0000ff), in cui i primi due caratteri rappresentano il rosso, i successivi due il giallo e gli ultimi due il blu.
Sfondo
Nel definire uno sfondo possiamo specificare una immagine oppure un colore. Il colore viene definito con la proprietà
background-color:colore; in cui il colore è specificato in una delle forme precedentemente indicate, mentre per specificare un’immagine si usa la proprietà
background-image:url(“immagine.jpg”)
.
Quando si usa l’immagine è possibile specificare anche un’eventuale sua ripetizione. L’attributo che si usa è background-repeat, i cui valori possono essere:
·
repeat
, l'immagine è ripetuta sia orizzontalmente che verticalmente
·
repeat-x
, l'immagine è ripetuta solo orizzontalmente
·
repeat-y
, l'immagine è ripetuta solo verticalmente
·
no-repeat
, l'immagine non è ripetuta
L’immagine può essere posizionata con la proprietà
background-position: pos-y pos-x, in cui pos-y indica come posizionare l’immagine verticalmente, mentre pos-x indica come posizionarla orizzontalmente. I possibili valori che può assumere sono
top, center, bottom. (es:
background-position: center center;) l’immagine è centrata.
Come valori è possibile indicare delle misure, in questo caso prima la x e poi la y (es: background-position: 30px 70px;) per indicare 30 px da sinistra e 70px dall’alto.
Infine è possibile specificare se lo sfondo debba essere fisso (fixed) o mobile (scroll) mediante l’attributo
background-attachment
. Nel caso in cui sono presenti le barre di scorrimento è possibile scegliere se far scorrere lo sfondo oppure se renderlo fisso (il testo scorrerà sopra).
Tag: css
Antonio Sammartino |
0 Commenti |
Discussioni |
Integrazioni
26/12/2008 9.34.36 | Social Bookmark
Proprietà dei Testi
Le proprietà che definiscono come sarà visualizzato il testo sono diverse. Tuttavia le proprietà di base sono quelle che definiscono l’aspetto a video del testo:
·
font da usare (
font-family: verdana, tahoma, arial; font-style: italic;)
·
dimensione (
font-size: 11px;)
·
consistenza (
font-weight: bold
;)
·
interlinea tra i paragrafi (
line-height: normal;
)
·
allineamento del testo (
text-align: left;)
·
decorazione (
text-decoration: underline;
)
Cursore
Nel definire un cursore è possibile usare uno dei tipi supportati oppure una immagine esterna.
Es.
cursor: crossai
Per usare una propria immagine usare:
cursor: url("immagine.cur");
Tag: css
Antonio Sammartino |
0 Commenti |
Discussioni |
Integrazioni
26/12/2008 9.34.36 | Social Bookmark
Per realizzare un menu di navigazione mediante i fogli stile, si possono utilizzare le seguenti definizioni
:
<div class="nav-menu">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
Definizione dell’elemento
<ul>
Il primo step consiste nel creare una nuova regola per l’elemento <ul>
.
La proprietà list-style: none; consente di rimuovere i bullet predefiniti, mentre gli altri elementi sono utili per centrare il testo e per avere un maggior controllo sull’aspetto del menu:
.nav-menu ul {
list-style: none; padding: 0; margin: 0; text-align: center
}
Definizione dell’elemento
<li>
Il secondo step consiste nel creare una nuova regola per l’elemento <li>
.
La proprietà float:left; consente di allineare gli item del menu sulla medesima linea. L’elemento display:block; consente di specificare la dimensione di ciascun item-menu, diversamente la dimensione di ciascun item-menu coinciderebbe a quello del testo. L’elemento margin: 0 2px; consente di definire nessun margine per il top e bottom dell’ item-menu e 2px di margine per il margine right e left.
.nav-menu li {
float: left; display: block; margin: 0 2px; padding: 0; text-align: center
}
L’elemento che segue immediatamente la definizione del menu potrebbe essere visualizzato a fianco al menu. Per evitare ciò è opportuno inserire subito dopo la seguente dichiarazione
<div style="clear: both">
Definizione dei box
L’ultimo step è la definizione che segue:
.nav-menu li a {
background: url(background.gif) #fff bottom left repeat-x;
height: 2em; line-height: 2em; width: 130px;
float: left; display: block;
border: 1px solid #dcdce9;
color: #0d2474; text-decoration: none; text-align: center; font-weight: bold;
margin: 0; padding: 0;
}
La proprietà background: url(background.gif) #fff bottom left repeat-x; consente di specificare l’URL dell’immagine di sfondo, uno sfondo bianco dietro l’immagine, di posizionarla in basso a sinistra e di ripeterla lungo l’asse x (orizzontalmente).
L’altezza dell’elemento è stata definita come il doppio della dimensione del testo a 2em. Specificando l’altezza in em è possibile ridimensionare il testo sul browser.
Tag: css
Antonio Sammartino |
0 Commenti |
Discussioni |
Integrazioni
26/12/2008 9.34.36 | Social Bookmark
La tabella che segue fornisce i codici dei colori browser-safe, cioè colori che sono garantiti essere disponibile su i PC con Windows e Mac. Ogni colore (o valore RGB) è costituito da tre componenti: rosso, verde e blu, definiti mediante da tre valori esadecimali compresi tra 0 e 255 (0 e FF in esadecimale).
I colori, per essere browser-safe, devono comprendere solo i seguenti sei distinti valori in formato esadecimale: 00, 33, 66, 99, CC, e FF.
| 000000 |
000033 |
000066 | 000099 |
0000CC |
0000FF |
| 003300 |
003333 |
003366 |
003399 |
0033CC |
0033FF |
| 006600 |
006633 |
006666 |
006699 |
0066CC |
0066FF |
| 009900 |
009933 |
009966 |
009999 |
0099CC |
0099FF |
| 00CC00 |
00CC33 |
00CC66 |
00CC99 |
00CCCC |
00CCFF |
| 00FF00 |
00FF33 |
00FF66 |
00FF99 |
00FFCC |
00FFFF |
| 330000 |
330033 |
330066 |
330099 |
3300CC |
3300FF |
| 333300 |
333333 |
333366 |
333399 |
3333CC |
3333FF |
| 336600 |
336633 |
336666 |
336699 |
3366CC |
3366FF |
| 339900 |
339933 |
339966 |
339999 |
3399CC |
3399FF |
| 33CC00 |
33CC33 |
33CC66 |
33CC99 |
33CCCC |
33CCFF |
| 33FF00 |
33FF33 |
33FF66 |
33FF99 |
33FFCC |
33FFFF |
| 660000 |
660033 |
660066 |
660099 |
6600CC |
6600FF |
| 663300 |
663333 |
663366 |
663399 |
6633CC |
6633FF |
| 666600 |
666633 |
666666 |
666699 |
6666CC |
6666FF |
| 669900 |
669933 |
669966 |
669999 |
6699CC |
6699FF |
| 66CC00 |
66CC33 |
66CC66 |
66CC99 |
66CCCC |
66CCFF |
| 66FF00 |
66FF33 |
66FF66 |
66FF99 |
66FFCC |
66FFFF |
| 990000 |
990033 |
990066 |
990099 |
9900CC |
9900FF |
| 993300 |
993333 |
993366 |
993399 |
9933CC |
9933FF |
| 996600 |
996633 |
996666 |
996699 |
9966CC |
9966FF |
| 999900 |
999933 |
999966 |
999999 |
9999CC |
9999FF |
| 99CC00 |
99CC33 |
99CC66 |
99CC99 |
99CCCC |
99CCFF |
| 99FF00 |
99FF33 |
99FF66 |
99FF99 |
99FFCC |
99FFFF |
| CC0000 |
CC0033 |
CC0066 |
CC0099 |
CC00CC |
CC00FF |
| CC3300 |
CC3333 |
CC3366 |
CC3399 |
CC33CC |
CC33FF |
| CC6600 |
CC6633 |
CC6666 |
CC6699 |
CC66CC |
CC66FF |
| CC9900 |
CC9933 |
CC9966 |
CC9999 |
CC99CC |
CC99FF |
| CCCC00 |
CCCC33 |
CCCC66 |
CCCC99 |
CCCCCC |
CCCCFF |
| CCFF00 |
CCFF33 |
CCFF66 |
CCFF99 |
CCFFCC |
CCFFFF |
| FF0000 |
FF0033 |
FF0066 |
FF0099 |
FF00CC |
FF00FF |
| FF3300 |
FF3333 |
FF3366 |
FF3399 |
FF33CC |
FF33FF |
| FF6600 |
FF6633 |
FF6666 |
FF6699 |
FF66CC |
FF66FF |
| FF9900 |
FF9933 |
FF9966 |
FF9999 |
FF99CC |
FF99FF |
| FFCC00 |
FFCC33 |
FFCC66 |
FFCC99 |
FFCCCC |
FFCCFF |
| FFFF00 |
FFFF33 |
FFFF66 |
FFFF99 |
FFFFCC |
FFFFFF |
Tag: css
Antonio Sammartino |
0 Commenti |
Discussioni |
Integrazioni
13/01/2007 9.34.36 | Social Bookmark