Copy Link
Add to Bookmark
Report

HTML (parte II)

eZine's profile picture
Published in 
bakunin
 · 16 Aug 2022

BAKUNIN
bakunin@meganmail.com

Questa guida serve agli esperti di HTML. Vi insegnerò a fare ciocchi col testo che voi manco vi immaginate di fare. Sfondi, testi colorati. DI TUTTO E DI PIU'.

Quindi tagliamo corto e incominciamo!

Io vi insegno ora a creare e a gestire i "FOGLI DI STILE" che sono quei file (o comandi interni!) che permettono di giocare con le scritte.
Il principio base è il modificare comandi esistenti nell'HTML.

INDICE

  1. Differenze
  2. Interni
  3. Esterni
  4. Comandi
  5. Box e margini
  6. Sfondi & C.
  7. Raggruppare
  8. Classi
  9. Posizionamento
  10. Mouse
  11. Immagini
  12. Carattere e posizione
  13. Mouse e link

1. Differenze

Le differenze nette con l'HTML standard sono 4:

  • Tutti i comandi non sono circondato da <>, ma da { }.
  • Il segno = è sostituito da : ESEMPIO HTML: <FONT size=5>
  • Non esiste più la , ma i ;
  • I nomi o i comandi che hanno - (tipo ciao-mario) diventano: (ciaoMario). Quindi lettera maiuscola e via il trattino

2. Interni

Esistono 2 tipi di fogli di stili: INTERNI o ESTERNI.
Non c'è nessuna differenza tranne che quelli interni sono contenuti nei file HTML, mentre gli altri no!

Facciamo subito un'esempio di interno:

--------INZIO----------------- 
<HTML>
<HEAD>

<style type="text/css">

H1 { font-size:17px; font-family:verdana; color:green }
H2 { font-size:18px; font-family:arial; color:red }

</style>

</HEAD>
<BODY>

<H1>Questo testo e' di colore verde, impostato su verdana di 17 pixel</H1>
<H2>Questo testo e' di colore rosso, impostato su arial di 18 pixel</H2>

</BODY>

</HTML>
-------------------FINE------------------

Vediamo subito qualche cosuccia!
Il comando STYLE apre una sezione (type="text/css") CSS (che sta appunto per i fogli!)

Creo 2 comandi H1 e H2 caratterizzati:

H1 { font-size:17px; font-family:verdana; color:green } 
H2 { font-size:18px; font-family:arial; color:red }

che vuol dire:

font-size:17px 		GRANDEZZA 17 
font-family:verdana CARATTERE
color:green COLORE

Questi comandi poi sono stati messi all'interno del corpo (BODY) come tags normali (quindi con <H1></H1> e <H2></H2>)

Bisogna dire che il blocco STYLE va messo tra i 2 HEAD. Aggiungo anche che il "TYPE=..." può essere anche cambiato per altri linguaggi. Se io volessi creare un comando in JAVA dovrei fare "text/jass"

Se io volessi, potrei anche non metterlo STYLE poichè mediamente vengono impostati da soli da browser, ma meglio non rischiare (qualcuno potrebbe non visualizzarli se ha un browser vecchio!).
Sappiate che mediamente si usano quelli esterni poichè con quelli interni bisogna sempre aggiungere per ogni pagina HTML questi comandi. Negli altri no!

3. Esterni

Gli esterni sono "ermeglio!" perché sono file separati che vengono richiamati con 1 riga tranquillamente dalla pagina interessata.

Esempio pratico:

Salva queste due righe nel file style.css:

H1 { font-size:17px; font-family:verdana; color:green } 
H2 { font-size:18px; font-family:arial; color:red }

Questo file (style.css) conterrà i comandi che ci interessano.

Ora apriamo una pagina HTML e aggiungiamo, al posto di tutta la papardella di prima, questa riga:

<link rel=stylesheet href="style.css" type="text/css">

Questa riga unisce automaticamente alla pagina un foglio di stile (rel=stylesheet).

Ora se usiamo i comandi:

<H1>CIAO MAMMA!</H1> 
<H2>Qui dove il mare luccica e tira forte il vento!</H2>

Compariranno le scritte che abbiamo voluto noi nel file style.css
Addirittura basta aggiungere questa riga nella prima pagina e tutte le altre collegate saranno a posto (credo!)!

MICA MALE!

4. Comandi

Incominciamo con font-family:

BODY { font-family:arial }

Questo regola il tipo di carattere.

Ah! Uso BODY come comando, ma potete cambiarlo a vostro piacimento. Ho usato questo comando perché imposta queste caratteristiche a tutto il documento, ma se volete potete usare un'altro comando!

Se io creo una pagina:

<HTML> 
<BODY>
Mi elimino un comando da aggiungere, e con un comando solo (appunto BODY), mi
sono fatto, sia il comando HTML, e sia il comando CSS! Capito?
</BODY>
</HTML>

Esiste poi questa opzione:

BODY { font-family:arial, "courier new", impact }

Faccio scegliere al browser che carattere vuole mettere. Il che vuol dire che se non possiede il primo, usa il secondo, e così via!

Esistono poi famiglie di carattere ove il browser può scegliere:

Times new roman o garamond: BODY { font-family:serif }

  • Arial o helvetica: BODY { font-family:"sans serif" }
  • Cursive Font corsivi: BODY { font-family:cursive }
  • Comic sans e simili: BODY { font-family:fanct }
  • Monospace e simili: BODY { font-family:monospace }


font-size:

Indica la grandezza del carattere. Non ha limitazioni (al contrario dell'HTML!)

Bisogna dare un'unità di misura:
Punti: sigla pt. Classica grandezza!

       BODY { font-size:12pt }

Pixel: Sigla px. La grandezza sullo schermo in base ai pixel

       BODY font-size:12px }

Pollici: Sigla in.

       BODY { font-size:1in }

Centimetri: Sigla cm.

       BODY { font-size:3cm }

Percentuale: Sigla %. Dipende dalla grandezza dei caratteri del Browser.
Ingrandisce o no in base ai caratteri standard

       BODY { font-size:200% }

Esistono poi anche:

       BODY { font-size:smaller } 
BODY { font-size:larger }

che ovviamente ingrandiscono o rimpiccioliscono.


font-style:

Indica lo stile grafico (normale, italic o oblique):

BODY { font-style:normal }

Questo è lo standard!

Poi esistono:

BODY { font-style:italic }

Capite se lo vedete!

BODY { font-size:oblique }

Come l'italic ma un po' più corsivo!


font-variant

Può essere normal o small-caps (il classico maiuscoletto!)

BODY { font-variant: small-caps }

Attributo font-weight

Regola la grandezza della scrittura nel grassetto. Può essere di 7 tipi:

  • BODY { font-weight: extra-light }
  • BODY { font-weight: demi-light }
  • BODY { font-weight: light }
  • BODY { font-weight: medium }
  • BODY { font-weight: extra-bold }
  • BODY { font-weight: demi-bold }
  • BODY { font-weight: bold }

Ci sono quindi 7 tipi di grassetto!


text-decoration

Sottolineature & C. Può essere:

  • BODY { text-decoration: none }
  • BODY { text-decoration: underline }
  • BODY { text-decoration: italic }
  • BODY { text-decoration: line-height }

Può essere utile per eliminare sottolineature di link:

A { text-decoration: none }

Che si può utilizzare anche così nella pagina HTML

<A HREF="http://go.to/tankcommandos" STYLE="text-decoration: none">TANK COMMANDOS</A>

o così:

A:link, A:visited { text-decoration: none } 
A:hover { text-decoration: underline }

BOX E MARGINI

Questi sono una delle cose più interessanti!

E' possibile creare margini attorno ad un testo e poi modificarli. Oppure creare box e metterci dentro quello che vogliamo senza dover per forza fare una tabella.
Tutto questo si farà in pollici (in), centimetri (cm), pixel (px), punti (pt) e unita' (em). Poichè bisogna fare e brigrare con dati.


Margini:

Possono essere 4: margin-left, margin-right, margin-top, margin-bottom

BODY { margin-top: 10px; margin-right; 10px; margin-bottom: 10px; margin-left: 10px }

o uno solo:

BODY { margin: 10px 10px 10px 10px }

Questi comandi regolano i margini e poi ci mettono il testo dentro. Esistono altri che intorno al testo fanno i margini: padding-top, padding-bottom, padding-right, padding-left

BODY { padding-top: 10pt; padding-right; 10px; padding-bottom: 10px; 
padding-left: 10px }

oppure con un solo comando:

BODY { padding: 10pt 10px 10px 10px }

I colori nei BOX:

border-top, border-bottom, border-right, border-left
che possono essere: none, dotted, dashed, solid, double, groove, ridge, inset e i vari colori.

BODY { border-top: dotten green; border-left: dashed black; border-right: solid blue; border-bottom: groove yellow }

Stili nei bordi: border-style

Può essere: none, dotted, dashed, solid, double, groove, ridge, inset, outset.

BODY { border-style: groove }

width regola la grandezza del BOX

BODY { width: 300px }

float: regola il testo a sinistra, a destra niente: left, right e none

BODY { float: right }


6. SFONDI & C.

Sapete che in HTML si fa così:

<BODY background="sfondo.gif">

color regola il colore del testo.


ESEMPIO:

<DIV STYLE="position:absolute; top:100px; left:100px; width:200px; color:blue"> 
La zona di programmazione nel sito TANK COMMANDOS è fatta da BAKUNIN. Quindi
anche questa guida, credo! Se no, visitate il sito go.to/tankcommandos!
</DIV>

I colori possono essere messi a nomi:

black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal e aqua

o a numeri (vedi la guida HTML-I).

background-color regola il colore dello sfondo:

<DIV STYLE="position:absolute; top:100px; left:100px; width:200px; background-color:blue"> 
La zona di programmazione nel sito TANK COMMANDOS è fatta da BAKUNIN. Quindi
anche questa guida, credo! Se no, visitate il sito go.to/tankcommandos!
</DIV>

background-image mette un'immagine come sfondo:

<DIV STYLE="position:absolute; top:100px; left:100px; width:200px; background-image: 
url(sfondo.jpg)">
La zona di programmazione nel sito TANK COMMANDOS è fatta da BAKUNIN. Quindi
anche questa guida, credo! Se no, visitate il sito go.to/tankcommandos!
</DIV>

E' indifferente se jpg o gif.

background-repeat se abbinato al comando di prima regola la ripetizione dell'immagine. Può essere:

  • repeat ripetuta ovunque
  • repeat-x ripetuta sono in orizzontale
  • repeat-y solo in verticale

<DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:400px; 
background-image: url(sfondo.jpg); background-repeat: repeat-y">
La zona di programmazione nel sito TANK COMMANDOS è fatta da BAKUNIN. Quindi
anche questa guida, credo! Se no, visitate il sito go.to/tankcommandos!
</DIV>


7. Raggruppare

Fondamentale è raggruppare comandi con caratteristiche simili. Si fa così:

H1, H2, H3 { font-family:arial; font-size:14px; color:blue; }

Lo stesso con i font vari:

BODY { font: bold normal 15px verdana red}


8. Classi

Semplicemente servono per creare di un comando più:

H1.CIAO {...} 
H1.COME {...}

Ora ho 2 comandi H1.
Per richiamarli basta fare:

<H1 class=ciao>Quello che vuoi!</H1>


9. Posizionamento

Voi dovreste sapere che quando create una pagina con l'HTML è poi il browser a gestire come vuole lui la grafica e mettendo il titolo il quel punto al posto che in un altro. Questo tipo di posizionamento si chiama STATICO.

Con i Fogli di Stile, e quindi con la programmazione CSS, si può mettere gli oggetti (titoli, scritte e immagini) in modo ASSOLUTO.

Esiste poi un terzo e ultimo tipo che è detto RELATIVO che dipende dagli altri oggetti, ma lo vedremo dopo.

Incominciamo con quello ASSOLUTO:

<DIV STYLE="position:absolute; top:100px; left:100px"><DIV TTYLE="position:absolute; top:100px; left:100px"> 
<IMG SRC="elemento01.gif" border=0>
</DIV>

  • Spiegazione: "position:absolute" imposto la posizione assoluta
  • Top:100px e left... imposto le posizioni in Pixel (Ma possono essere anche tutte le altre che abbiamo visto)

Si può fare anche coi i testi:

La TC diventa

<DIV STYLE="position:relative; top:10px; left:10px"><DIV TTYLE="position:relative; top:10px; left:10px"><B>capo del mondo</B></DIV>

La notizia sconvolge il mondo!

Oppure si può usare un altro metodo:

La TC diventa <SPAN STYLE="position:relative; top:10px; left:10px"><SPAN TTYLE="position:relative; top:10px; left:10px"><B>capo del mondo</B></SPAN>

La notizia sconvolge il mondo!

Per i testi però (per evitare la bruttura di prima!) è meglio racchiudere tutto in caselle di testo:

<DIV STYLE="position:absolute; top:100px; left:100px; width:150px; 
height:150px"><DIV TTYLE="position:absolute; top:100px; left:100px; width:150px;
height:150px"> Spesso mi dimentico della potenza divina che ho nelle mie
mani! Sarà vero? Forse sì, forse che no! Spesso è meglio non parlarne.</DIV>

Per le immagini si può fare così:

<DIV STYLE="position:absolute; top:100px; left:100px; width:150px; height:150px; visibility:hidden"><DIV TTYLE="position:absolute; top:100px; left:100px; width:150px; height:150px; visibility:hidden"> 
<IMG SRC="immagine1.gif" border=0>
</DIV>

<DIV STYLE="position:absolute; top:100px; left:150px; width:200px; height:150px; visibility:visible"><DIV TTYLE="position:absolute; top:100px; left:150px; width:200px; height:150px; visibility:visible">
<IMG SRC="immagini2.gif" border=0>
</DIV>

Ecco qui! Vi ho spaventato? Spero di no!

10. Mouse

Poco da dirvi (funziona solo con Explorer e windoz):

 --------------------------------------------- 
| Auto | Automatico |
| Crosshair | Mirino |
| Default | Freccia standard |
| Hand | Mano |
| Move | Trascina oggetti |
| e-resize | Ridimensionamento oggetti |
| ne-resize | Freccia |
| nw-resize | Altra freccia |
| n-resize | Ennesima reccia |
| se-resize | Freccia in basso e a destra |
| sw-resize | Freccia basso e sinistra |
| s-resize | Freccia verso il basso |
| w-resize | Freccia a sinista |
| text | Come sui testi |
| wait | Clessidra |
| help | Punto interrogativo |
---------------------------------------------

Si utilizza così:

<DIV STYLE="cursor: crosshair; font-size:16; font-family:arial"> 
CIAO MAMMA!
</DIV>


11. Immagini

Ecco a voi un po' di ciocchi con le immagini:

Transparency: Immagine trasparente finchè non ci si passa il mouse sopra

  • Blur Sfuocato a sinistra
  • Light Ombreggiato
  • Wave Ondulatorio
  • Flip horizontal Invertita
  • Flip vertical Capovolta

Sono tutti quanti script JAVA quindi ve li do così:

------------INIZIO------------- 
<HTML>
<HEAD>
<SCRIPT>
function alphaon(x)
{document[x].filters.alpha.opacity +=50;}
function alphaoff(x){
test=x
provatimer=setInterval("prova(test)", 100)}
function prova(x){
if(document[x].filters.alpha.opacity>50){
document[x].filters.alpha.opacity -= 10
}
else{clearInterval(provatimer)}
}
</script>
</HEAD>
<BODY>
<IMG name="immagine1" SRC="immagine1.jpg" BORDER=0 STYLE="filter:alpha(opacity=50)" onmouseover="alphaon('immagine1')"onmouseout="alphaoff('immagine1')">
</BODY></HTML>
----------------FINE---------------

Poi:

-------------INIZIO--------------- 
<HTML>
<HEAD>
<SCRIPT>
function bluron(x)
{document[x].filters.blur.enabled=1;}
function bluroff(x)
{document[x].filters.blur.enabled=0;}
</script>
<IMG name="immagine1" SRC="immagine1.jpg" BORDER=0 STYLE="filter:blur(enabled=0)" onmouseover="bluron('immagine1')"onmouseout="bluroff('immagine1')">
</BODY>
</HTML>
--------------FINE----------------

Poi:

-------------INIZIO------------- 
<HTML>
<HEAD>
<SCRIPT>
function lighton(x)
{document[x].filters.light.enabled=1;
document[x].filters.light.addpoint(50,50,40,255,255,255,100);}
function lightoff(x)
{document[x].filters.light.enabled=0;}
</SCRIPT>
</HEAD>
<BODY>
<IMG name="immagine1" SRC="immagine1.jpg" BORDER=0 STYLE="filter: light(enabled=0)" onmouseover="lighton('immagine1')" onmouseout="lightoff('immagine1')">
</BODY>
</HTML>
-----------FINE---------------

Poi:

-------------INIZIO------------- 
<HTML>
<HEAD>
<SCRIPT>
function waveon(x)
{document[x].filters.wave.enabled=1;}
function waveoff(x)
{document[x].filters.wave.enabled=0;}
</SCRIPT>
</HEAD>
<BODY>
<IMG name="imagine1" SRC="immagine.jpg" BORDER=0 STYLE="filter: wave(freq=3, lightstrength=40, strength=4,enabled=0)" onmouseover="waveon('immagine1')" onmouseout="waveoff('immagine1')">
</BODY>
</HTML>
-----------FINE---------------

Poi:

------------INIZIO----------- 
<HTML>
<HEAD>
<SCRIPT>
function fliphon(x)
{document[x].filters.fliph.enabled=1;}
function fliphoff(x)
{document[x].filters.fliph.enabled=0;}
</SCRIPT>
</HEAD>
<BODY>
<IMG name="immagine1" SRC="immagine1.jpg" BORDER=0 STYLE="filter:fliph(enabled=0)" onmouseover="fliphon('immagine1')"onmouseout="fliphoff('immagine1')">
</BODY>
</HTML>
--------------FINE------------

e l'ultimo:

------------INZIO------------- 
<HTML>
<HEAD>
<SCRIPT>
function flipvon(x)
{document[x].filters.flipv.enabled=1;}
function flipvoff(x)
{document[x].filters.flipv.enabled=0;}
</SCRIPT>
</HEAD>
<BODY>
<IMG name="immagine1" SRC="immagine1.jpg" BORDER=0 STYLE="filter: flipv(enabled=0)" onmouseover="flipvon('immagine1')" onmouseout="flipvoff('immagine1')">
</BODY>
</HTML>
------------FINE--------------

FINE DEI COMANDI PER IMMAGINI! Il principio è copiate ciò che vi serve! Oppure imparate lo JAVA!

12. Carattere e posizione

letter-spacing: indica lo spazio tra una lettera e l'altra:

<DIV STYLE="font-family:arial; letter-spacing:1em"><DIV TTYLE="font-family:arial; letter-spacing:1em"> 
Bakunin e la TC conquistano il mondo!
</DIV>

text-transform: maiuscole e minuscole per tutta la frase:

  • uppercase Maiuscole
  • capitalize La prima lettera di ogni parola
  • uppercase Minuscole


ESEMPIO:

<DIV STYLE="font-family:arial; text-transform:uppercase"><DIV 
TTYLE="font-family:arial; text-transform:uppercase"> Bakunin conquista il MONDO!!
</DIV>

<DIV STYLE="font-family:arial; text-transform:capitalize"><DIV TTYLE="font-family:arial; text-transform:capitalize">
Bakunin conquista il MONDO!!
</DIV>

<DIV STYLE="font-family:arial; text-transform:lowercase"><DIV TTYLE="font-family:arial; text-transform:lowercase">
Bakunin conquista il MONDO!!
</DIV>

text-align: l'orientamento del testo può essere:

  • left
  • center
  • right
  • justify

<DIV STYLE="font-family:arial; text-align: right"><DIV TTYLE="font-family:arial; text-align: right"> 
Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin!
Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin!
</DIV>

<DIV STYLE="font-family:arial; text-align: center"><DIV TTYLE="font-family:arial; text-align: center">
Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin!
Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin!
</DIV>

<DIV STYLE="font-family:arial; text-align: justify"><DIV TTYLE="font-family:arial; text-align: justify">
Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin!
Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin!
</DIV>

text-indent: lo spazio iniziale tipo:

	Quel ramo del lago di como...

Cioè la TAB iniziale:

<DIV STYLE="font-family:arial; text-indent: 5em"><DIV TTYLE="font-family:arial; text-indent: 5em"> 
Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin!
Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin!
</DIV>

line-height: distanza tra le righe:

<DIV STYLE="font-family:arial; font-size:14px; width:400px; line-height: 2em"><DIV TTYLE="font-family:arial; font-size:14px; width:400px; line-height: 2em"> 
Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin!
Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin! Bakunin! Vota Bakunin!
</DIV>


13. Mouse e link

Abbiamo già visto la "non sottolineatura". Questo è il codice per la sottolineatura solo quando passa il mouse:

<style type="text/css"> 
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</style>

Ovviamente tra i 2 HEAD.

Cambio colore al passaggio del mouse:

<style type="text/css"> 
A:hover { color: red }
</style>

Cambio colore di sfondo al passaggio del mouse:

<style type="text/css"> 
A:hover { color: white; background:blue }
</style>

Cambio della grandezza del carattere:

<style type="text/css"> 
A:link { font-size: 15px }
A:visited { font-size: 15px }
A:hover { font-size: 16px }
</style>

-----------------------FINE-------------------------

Basta! Mi sono rotto!
Nella prossima guida facciamo un po' di DHTML!

Michael Bakunin
bakunin@meganmail.com

← previous
next →
loading
sending ...
New to Neperos ? Sign Up for free
download Neperos App from Google Play
install Neperos as PWA

Let's discover also

Recent Articles

Recent Comments

Neperos cookies
This website uses cookies to store your preferences and improve the service. Cookies authorization will allow me and / or my partners to process personal data such as browsing behaviour.

By pressing OK you agree to the Terms of Service and acknowledge the Privacy Policy

By pressing REJECT you will be able to continue to use Neperos (like read articles or write comments) but some important cookies will not be set. This may affect certain features and functions of the platform.
OK
REJECT