dskweb@dskweb.net
LEZIONE 3°
Dunque cominciamo cercando di capire come lavorano i browser.
Ad esempio se noi scriviamo
<body
brcolor=”#FFFFFF”>
Qualcosa
di divertente
Come ammalarsi quando si è in ferie!
</body>
<body
bgcolor=”#FFFFFF”>
Ehi !
Ma
Che
Sta
Succedendo??
</body>
Semplice il browser non riconosce la formattazione. Se non viene indicato diversamente, il browser visualizza i caratteri uno dietro l’altro. Se vuoi andare a capo devi utilizzare un tag specifico.
<body
bgcolor=”#FFFFFF”>
Ehi!<br>
Ma<br>
Che<br>
Sta<br>
Succedendo?
</body>
<BR> dice al browser di andare a capo. Simile a <br> è<p>. E’ esattamente la stessa cosa, ma oltre ad andare a capo, aggiunge un’inerlinea.
<body
bgcolor=”#FFFFFF”>
Ehi!<p>
Ma<p>
Che<p>
Sta<p>
Succedendo??
</body>
Questi sono esempi di tags che non hanno bisogno di chiusure. Un altro aspetto importante: non puoi usarne più di uno alla volta. In altre parole, specificando <p><p><p> non otterrai tre interlinee, ma soltanto una. Come fare allore per aggiungere altre linee vuote? Te lo dico subito.
Guarda qui …..
<body
bgcolor=”#FFFFFF”>
Qualcosadidivertente
</body>
il Browser non riconosce più di uno spazio, se questo da un lato può sembrare scomodo (oltre che stupido), dall’altro ti permette di avere un controllo assoluto sull’aspetto del documento.
Questo è un piccolo codice che significa “spazio” per il browser =
Prova questo…..
<body bgcolor=”#FFFFFF”>
Qualcosa
di&n bsp;
divertente
</body>
Vedi
l'effetto che fà.
L’& indica l’inizio di un carattere speciale, mentre ; ne indica la fine e le lettere tra questi due caratteri sono una specie di abbreviazione. Ecco un esempio di caratteri speciali. (Nota: devono essere scritti in minuscolo)
(spazio)
< (minore)
> (maggiore)
& (&)
" (virgolette)
­ (trattino)
Non hai bisogno di utilizzarli sempre, ma solo quando scrivere il carattere reale può confondere il browser. Come capire quando usarli? ….con l’esperienza e un po’ di pratica.
Qualche considerazione sugli errori: ci sono un sacco di persone convinte che sbagliare sia errato. Hanno paura di provare qualcosa di nuovo per timore di sbagliare. Fare gli stessi errori ripetutamente può essere frustante, ma specialmente quando si sta imparando qualcosa, non bisogna aver paura degli errori. Gli sono nostri amici.
Bene torniamo a noi. Il browser visualizza il tuo testo una parola dietro l’altra finchè non gli dai altre indicazioni. Riduce un’area vuota ad uno spazio. Se vuoi maggiore spaziatura devi usare il carattere speciale ( ). Quindi se premi Returno o Enter mentre stai scrivendo un testo nella tua pagina, il browser lo interpreta come uno spazio.
Un altro esempio veloce.
<body
bgcolor=”#FFFFFF”>
Qualcosa<br>di<br>divertente<br>
Come<br>ammalarsi<br>in ferie!
</body>
E’ chiaro? Spero di si, perché non saprei come altro spiegartelo.
Il prossimo è un utilissimo tag ed è piuttosto intuitivo.
<body
bgcolor=”#FFFFFF”>
<center>Qualcosa di divertente</center>
</body>
Puoi centrare una parola oppure tutta la pagina. Tutto quello che si trova tra i tags <CENTER>sarà centrato.
Come inserire più righe vuote.E’ davvero semplice. Lascia uno spazio vuoto prima del tag <BR>per ogni riga vuota che vuoi lasciare.
<body
bgcolor=”#FFFFFF”>
qualcosa di <br>
<br>
<br>
<br>
<br>
<br>
di divertente
</body>
Ora vediamo come inserire immagini in una pagina web. Useremo quest’immagine.
Ovviamente tu potrai usare una immagine qualsiasi salvata sul tuo PC, cerca di sceglierne una non troppo grossa, in modo che le prove che farai risulteranno più veloci.
Il nome che io userò per l'immagine in esempio e "copper.gif", tu sostituirai questo nome col nome dell'immagine da te usata.
Il tag specifico per inserire un’immagine è questo <IMG>.
Dobbiamo specificare il percorso (dove si trova fisicamente l’immagine) e la grandezza.
<body
bgcolor=”#FFFFFF”>
<img
src=”copper.gif” width=82 height=68>
</body>
 |
SCR=”copper.gif” significa che l’immagine si Trova nella stessa cartella in cui si trova il Documento html che la richiede.
|
 |
SCR=”image/copper.gif” significa che L’immagine si trova in una cartella posizionata Sotto quella in cui si trova il documento html Che la richiama. Ovviamente, si può scendere (o salire) di tanti livelli quanto sono necessari.
|
 |
SRC=”../copper.gif” significa che l’immagine si Trova in una cartella posizionata sopra quella in Cui si trova il documento html che la richiama.
|
 |
SCR=”../../copper.gif” significa che L’immagine si trova sue cartelle sopra quella in Cui si trova il documento html che la richiama.
|
C’è un altro modo in cui questo può essere fatto. Ogni riferimento ad un’immagine può avere nel codice l’URL completa. Ad esempio:
http://www.hair.net/images/copper.gif
C’è una ragione per utilizzare un percorso completo? Ovviamente si: quando l’immagine risiede su un server diverso.
Parliamo ora di qualcosa di carino sulle immagini e le loro dimensioni.
Vediamo qualcosa di divertente sulle immagini. Prova questo……….
<body
bgcolor=”#FFFFFF”>
<img
src=”copper.gif”>
</body>
Come puoi vedere, anche se non sono state specificate le dimensioni, l’immagine viene visualizzata correttaemente. E’ importante però inserire le dimension dell’immagine,perché in questo modo il browser predispone già lo spazio necessario ad ospitarla e rende lo scaricamento della pagina più veloce.
Ma bisogna fare attenzione a non stravolgere le misure della grandezza dell’immagine altrimenti si rischia di deformarla, come nell’esempio che segue. Quindi impostare WIDTH e HEIGHT con i valore reali dell’immagine in uso.
Guarda cosa posso fare modificando WIDTH e HEIGHT di una immagine. Prendiamo ad esempio un punto >.< il punto rosso che vedi è un quadrato di 2X2 pixel,( puoi crearlo con qualsiasi programma di grafica), guarda cosa ci posso fare.
<body
bgcolor=”#FFFFFF”>
<img
src=”red_punto.gif” widht=510 height=2><p>
<img
src=”red_punto.gif” width=510 height=5><p>
<center><img src=”red_punto.gif” width=2 height=200><p></center>
</body>
Come vedi con un po di fantasia WIDTH e HEIGHT possono diventare veramente divertenti.
