Piccola guida all'Html
Piccola guida all'HTML
Eccomi, il mio primissimo txt... spero di scriverlo bene! Ora tratteremo di un argomento molto interessante, ossia il linguaggio html. Quando in una pagina web cliccate col destro e andate in html, oppure dal browser visualizza / html vi uscirà una trafila di codici, all'interno dei quali si riescono a notare facilmente le parole che compaiono nella pagina. Bene, ora impareremo a capire questo codice per crearci una bella pagina tutta nostra,,,
Bando alle ciance, cominciamo!
Questa è una pagina semplice intitolata SITODIPROVA che come sfondo ha l'immagine dragon ball.jpg che si trova in C:/documenti/immagini.
N.B.:Quando l'immagine ha spazi fra le parole è necessaria la scrittura
%20 fra le parole separate.
<html>
<head>
<title>SITODIPROVA</title>
</head>
<body>
<body background="file:///C:/Documenti/cartella_del_sito/dragon%20ball%20.jpg">
</body>
</html>
N.B.:
Un browser non andrà mai a visualizzare le immagini che si trovano nei vostri documenti, così all'interno del vostro sito mettete una cartella chiamata "immagini" (esempio) e la scrittura sarà:
<body background="file:///cartella_del_sito/immagini/dragon%20ball%20.jpg">
Se si vuole andare a capo basta digitare la scrittura <p> </p>
nella riga "nuova" per poi inserire nella riga sottostante le scritture
che vogliono essere visualizzate a capo. Per inserire un testo si deve
digitare <p>Testo da scrivere</p> (se il testo è semplice e nero) oppure
una scrittura del genere <p><b><i><u><font color="#FFFF00">CIAO</font></u></i></b></p>
se il testo è: CIAO scritto in giallo (#FFFOOO è uno dei tanti codici dei colori)
e grassetto (<b>) corsivo (<i>) e sottolineato (<u>). Font color non indica altro che
il colore del testo (font). Una nota importante: per "chiudere" il comando
è necessario scrivere ciò che si vuole fra due tag: il primo è <html>
(per esempio, ma ci sono anche <p> e <body>) e il secondo è </html> (il <> apre il comando e il </>
lo chiude).
Per inserire un'immagine si digita:
<p align="center"><img border="0" src="file:///C:/Documenti/immagini/quellochevuoitu/tu%20ed%20io%20.jpg" align="left" width="269" height="580"></p>
Abbiamo inserito quindi l'immagine "tu ed io" all'estrema sinistra (align="left"), con misure di
269 per 580 pixel. Se l'immagine vuol'essere spostata, al posto di align="left"
si metterà align="center" (al centro) o align="right" (a destra).
Per inserire una tabella (questa ha due righe e due colonne con in tutte
la scritta "ciao") si dovrà inserire la seguente scrittura:
<div align="left">
<table border="1" width="59" height="1">
<tr>
<td width="18" height="1">ciao</td>
<td width="34" height="1">ciao</td>
</tr>
<tr>
<td width="18" height="1">ciao</td>
<td width="34" height="1">ciao</td>
</tr>
</table>
</div>
Notiamo che compare la scrittura align="left" come per l'immagine.
Per distinguere le righe dalle colonne basta vedere sopra:
la prima sezione (quella dal primo <tr> al primo </tr> si riferisce alla prima riga
mentre la sezione sottostante si riferisce ala seconda riga.
I valori widht (lunghezza) ed height (altezza) sono modificabili a piacere.
Border indica lo spessore del bordo, e se compaiono le scritte cellpadding e cellspacing sono valori che indicano la distanza fra ce celle e la loro spaziatura interna. Ovvio che per impostare un'immagine al posto della scritta "ciao"
basterà inserire la stessa scrittura che abbiamo usato per l'inserimento di un'immagine.
Per inserire un testo scorrevole sarà necessaria la seguente scrittura:
<p>
<marquee>CIAO</marquee>
</p>
dove ciao è il testo da noi inserito. Apportiamo modififche al testo scorrevole:
<p>
<marquee behavior="alternate" direction="right">CIAO</marquee>
</p>
Behavior="alternate" significa che il testo scorrerà alternandosi (se compare "slide" lo
scorrimento sarà bloccato) direction="right" è la
direzione che ora va verso destra (prima non era annotata la scrittura "left" ma solo
perchè è impostata come predefinita).
Se poi modifichiamo il testo (colore e stile) dovremo inserire le scritture <i> <u>...etc accanto
alla <p> e alla </p> di chiusura. Se avete dubbi guardate sopra.
Per inserire una linea orizzontale di interruzione digiteremo,
nel posto desiderato, la scrittura <hr align="left">
Per un collegamento ipertestuale associato ad un testo si inserirà:
<p><a href="https://www.virgilio.it">https://www.virgilio.it</a></p>
Al posto di www.virgilio.it metterete ciò che volete. Il testo apparirà blu e sottolineato.
Se volete cambiare stile o colore inserirete le scritture appropriate (guardate sopra) prima della seconda scritta http:... (subito dopo la >)
<p><a href="https://www.virgilio.it"><font color="#000000"><b><i><u>https://www.virgilio.it</u></i></b></font></p>
Questo corrisponderà ad un collegamento a Virglio, color nero, grassetto, corsivo e sottolineato.
Una cosa... Per impostare un carattere predefinito di una pagina (esempio: voglio che tutta la mia pagina sia scritta in arial) si dovrà fare così:
<body style="font-family: Arial">
N.B. la scritta style=....:Arial dovrà essere aggiunta al body che già c'è all'inizio.
Se però volete solo modificare una parte sola di testo allora:
<p><font face="Times New Roman">testodacambiare</font></p>
Ora vi riporterò i codici per modificare i colori di un testo, o di uno sfondo, a piacimento:
#FFFFFF BIANCO
#008000 VERDE SCURO
#800000 BORDEAUX
#808000 VERDE OLIVA
#000080 BLU SCURO
#800080 VIOLA
#808080 GRIGIO
#FFFF00 GIALLO
#00FF00 VERDE LIMONE
#00FFFF VERDE ACQUA
#FF00FF FUCSIA
#C0C0C0 GRIGIO CHIARO
#FF0000 ROSSO
#0000FF BLU
#008080 GRIGIO-VERDE
#000000 NERO
Per inserire un recapito e-mail:
<a href="mailto:utente@provider.it">mandatemi e-mail</a>
Questo non è altro che un particolare collegamento ipertestuale (vedi sopra)
che al posto di condurre ad un sito invia e-mail. Il testo "mandatemi e-mail
può essere sostituito con un'altra scritta o con un immagine.
Per inserire un suono si sottofondo (formato MIDI):
<bgsound src="file:///C:/Documenti/suonochevouitu.mid" loop="-1"
La scritta loop sta per i cicli di ripetizione della musica.
Con -1 il ciclo è infinito, se fosse 2 la musica si ferma dopo
due cicli.
Ecco!! Ora ho elencato più o meno tutte le funzioni che anch'io ho usato per la mia prima pagina (però io ho usato frontpage :-p). Ovviamente esistono altre decine di combinazioni, ma quelle le capirete man mano che vi avvicinerete all'html, non è poi così difficile. Anche se può sembrare molto più semplice costruire un sito con dei programmi tipo Frontpage, o comunque con qualsiasi programma che semplifica la vita, vi assicuro che avrete molta più soddisfazione nel vedere la vostra creazione "sudata" fatta con notepad, che nel codice visualizzato non avrà altro che quello che è uscito dalla vostra mente diabolica...:-p.
Forse proseguirò l'argomento con una seconda guida...non so...però credo di sì!
Indi aspettatemi, non si sa mai...
^Hopehack^
andr3www@interfree.it
www.newbieteam.f2s.com