ciao a tutti ecco la guida:
GUIDA ALL HTML
I PRIMI PASSI:
1) cos'è l'html?
HTML significa "Hyper Text Markup Language" e non è comparabile ad un vero e proprio linguaggio di programmazione, ma è più vicino ad uno script, cioè una serie di istruzioni testuali che vengono interpretate da un programma esterno, in questo caso il browser.
Quando si naviga in internet il browser che utilizziamo invia continuamente dati e ne riceve (cioè comunica con il server dove si trovano le pagine web), quando riceve un codice HTML il browser lo legge, lo interpreta e visualizza il contenuto della pagina a seconda delle istruzioni che il codice HTML gli fornisce, in definitiva quindi il codice HTML è in realtà una serie di descrizioni su come la pagina web deve essere visualizzata nel browser.
Il codice HTML e' composto da diversi "Tag", questi Tag rappresentano le parole chiave che i browser riconoscono ed intepretano, e servono a "marcare" per esempio un testo in modo che questo abbia una parola in grassetto.
Per esempio se volessi scrivere la frase "Confronta i nostri prezzi utilizzando i listini." in modo che "nostri prezzi" sia scritto in grassetto, scriverò il seguente codice:
Confronta i <b>nostri prezzi</b> utilizzando i listini.
Il Tag "<b>" serve per il grassetto; il risultato sarà:
Confronta i nostri prezzi utilizzando i listini.
Come e' possibile vedere sopra, tutti i Tag HTML si scrivono tra i caratteri "<" e ">", e tutti quanti (a parte alcuni) hanno un inizio ed una fine, in questo caso la parte del codice "<b>nostri prezzi</b>" indica al broswer, che interpreta il codice, di scrivere in grassetto tutto quel che si trova fra il Tag "<b>" (inizio grassetto) e il Tag "</b>" (fine grassetto), tutto il resto viene visualizzato con il carattere predefinito.
Il codice HTML non è case sensitive, cioe' si può scrivere sia tutto maiuscolo che tutto minuscolo, cioè il codice "<B>nostri prezzi</B>" e "<b>nostri prezzi</b>" verrà intepretato allo stesso modo ed avrà lo stesso risultato. E' consigliabile però scrivere tutto in minuscolo in quanto il testo maiuscolo è fastidioso alla lettura e, a lungo andare, più laborioso da scrivere, ed inoltre è buona norma nel web scrivere tutto quanto in minuscolo, specialmente i nomi dei file, per esempio è meglio scrivere "indice.htm" che "INDICE.HTM" o peggio ancora "Indice.HTM", oppure "Logo.JPG" va scritto "logo.jpg", e così via; questo per pure ragioni tecniche legate ai differenti tipi di server che sono utilizzati, se fate largo uso di nomi di file e link scritti in maiuscolo (totalmente o in parte) è possibile che cambiando spazio web, oppure se l'amministratore del server passa da sistemi Windows a sistemi Unix a vostra insaputa, vi potreste ritrovare con lo spiacevole risultato che la metà del vostro sito risulti irraggiungibile o con le pagine web che di colpo e senza apparente motivo non visualizzano più le immagini, oppure con link malfunzionanti; questo perchè, in poche parole, i sistemi Unix fanno distinzione fra un file scritto in maiuscolo ed uno scritto in minuscolo, in pratica il file "Logo.JPG" e "logo.jpg", anche se si chiamano esattamente uguale, sono visti come differenti file e quindi non riconosciuti. E' molto importante inoltre dare dei nomi semplici ai file che si utilizzano, evitando caratteri strani e spaziature, per esempio è sconsigliabile nominare un file "Foto mare Luglio '01.jpg", oppure "$contenuto[1].htm" e così via, in quanto questi caratteri vengono tradotti con codici particolari che in alcuni casi compromettono la visualizzazione corretta della pagina mandando in tilt il browser o il server, oppure facendovi perdere tempo negli aggiornamenti futuri; chiunque abbia un'esperienza di sviluppo web si è già scontrato inevitabilmente più volte con problemi (e ore perse) riguardanti nomi di file scritti con caratteri strani o spaziature. Quando si nomina un file, che sia un'immagine o un file HTML, utilizzare solamente lettere dell'alfabeto e numeri, evitando assolutamente simboli e spazi, scrivendo tutto minuscolo.
2) il primo file html
Create una cartella sul destop e nominatela come preferite (es. "sitoweb"), aprite il Blocco Note (o qualsiasi editor di testo puro, come Edit del DOS, VI di Unix, SimpleText del Mac, ecc), fate un nuovo documento e scrivete quanto segue:
<html>
</html>
e salvatelo, nella cartella creata in precedenza, dando come nome del file "index.htm" oppure "index.html". I file HTML possono essere salvati sia con l'estensione *.htm che con *.html, non fa differenza, ma è consigliabile scegliere una delle due e salvare ogni file, per praticità, sempre con la stessa estensione.
Questi due Tag HTML rappresentano l'inizio e la fine di una pagina web, il browser sa che quando legge il Tag "<html>" è l'inizio di una pagina web, e quando arriva a "</html>" ne è la fine.
Ora fate doppio clic sul file "index.htm" che avete salvato, se è andato tutto bene dovrebbe aprirsi il browser visualizzando una pagina vuota (in quanto non c'è ancora nessun contenuto), se invece si apre il Blocco Note di nuovo vuol dire che avete salvato un file con un nome sbagliato, per esempio "index.htm.txt", se così fosse rinominate il file con il nome giusto; se facendo doppio clic non succede nulla, o si apre qualche altro programma, controllate che nel vostro computer tutto sia installato correttamente e che le estensioni dei file siano assegnate in modo corretto; provate eventualmente ad aprire il browser e tramite il menu File>Apri aprire il file HTML che avete salvato.
3) tag body e colori (la parte che preferisco xD)
Ora procederemo con l'aggiungere il contenuto alla nostra pagina web, per far questo (sempre utilizzando lo stesso file di prima) scrivere in mezzo a "<html>" e "</html>" i seguenti Tag:
<body>
Ciao mondo!
</body>
ottendendo in totale il seguente codice:
<html>
<body>
La mia pagina web personale.
</body>
</html>
Salvate e visualizzate la pagina facendo doppio clic sul file o premendo il tasto "Aggiorna" del vostro browser. Il risultato sarà una pagina vuota con la semplice scritta:
La mia pagina web personale.
Nel Tag "<body>" è possibile specificare molte informazioni utili, quali il colore del testo, il colore dei link, lo sfondo della pagina, sia inteso come colore che come immagine (texture).
I colori in HTML
I colori in HTML si specificano utilizzando il sistema RGB (Red, Green, Blu, cioe' rosso, verde, blu) scrivendoli in esadecimale, con il prefisso "#", miscelando questi valori è possibile ottenere tutta la scala cromatica.
Per esempio il colore rosso e' rappresentato dai valori RGB 255,0,0. La scala RGB va da 0 a 255, quindi il valore 255,0,0 significa che il rosso e' in quantità massima e che il verde e il blu sono completamente assenti, quindi il risultato è che avremo un colore rosso acceso, e questo in esadecimale di scrive "#ff0000". Il blu in RGB è uguale a 0,0,255 e in esadecimale lo 0 si scrive con "00" e il 255 di scrive con "ff", quindi si traduce in "#0000ff", e così via.
Per le varie sfumature e colori fare riferimento ad una tabella colori in esadecimale, oppure potete utilizzare programmi appositi che miscelano i colori e restituiscono il valore esadecimale.
Colore del testo
Il colore del testo (se non differentemente specificato) è preimpostato su nero, per specificare un colore diverso, per esempio giallo, bisogna aggiungere, al Tag "<body>" il seguente attributo "text":
<body text="#ffff00">
Colore dello sfondo
Il colore dello sfondo preimpostato è bianco, ma possiamo sia cambiarlo che utilizzare una texture, o una foto, come immagini di sfondo. E' consigliabile evitare di scegliere colori molto forti come sfondo in quanto potrebbero infastidire l'utente che visita il vostro sito, quindi ridurre la sua permanenza o addirittura spingere gli utenti ad andare altrove quasi subito.
Per semplicemente il colore di sfondo, per esempio azzurro chiaro, dobbiamo aggiungere l'attibuto "bgcolor":
<body bgcolor="#ccffff">
Se si visualizza la pagina nel browser si vedrà che lo sfondo ha assunto un colore azzurro chiaro.
Per impostare invece una texture di sfondo abbiamo bisogno di un'immagine, questa non deve essere troppo grande o pesante altrimenti aumenterà il tempo di scaricamento. Uno sfondo adatto è rappresentato dall'immagine sotto riportata, se non hai nulla a portata di mano puoi scaricarla e salvarla nella cartella che hai creato precedentemente insieme al file HTML che hai creato.
Per inserire questo sfondo nella tua pagina bisogna inserire la specifica "background" al Tag "<body>", come sotto riportato:
<body background="sfondo.jpg">
Salva e visualizza la pagina, vedrai che ora questa presenterà uno sfondo uniforme composto da tante copie, affiancate in righe e colonne all'infinito, di questa immagine scelta e, scorrendo in basso nel caso in cui la pagina abbia un lungo testo) lo sfondo scorrera' insieme alla pagina, cioè il testo sembrerà stampato sullo sfondo come se questo fosse una carta, se invece vogliamo ottenere l'effetto che il testo sembri stampato su un lucido che scorre sullo sfondo fisso dobbiamo aggiungere un'ulteriore specifica, cioè "bgproperties", quindi:
<body background="sfondo.jpg" bgproperties="fixed">
Questo è molto comodo quando, per esempio, come sfondo ultilizziamo una grande immagine che rimane fissa e non scorre, però è sconsigliabile utilizzare quest'ultima specifica per lo sfondo in quanto non tutti i browser la supportano, e il fine del buon sviluppatore web è di realizzare siti che siano visibili ugualmente da differenti browser in modo da rendere un'immagine unica per tutti i visitatori.
Nota: è possibile mettere lo sfondo in una sottocartella, per esempio al fine di organizzare meglio i files nel sito, in questo caso si dovrà specificare il percorso relativo dalla directory dove si trova il file html alla directory e al filename che rappresenta lo sfondo. Poniamo il caso che lo sfondo si trovi nella cartella "images", nel valore dell'attributo "background" dovremo specificare, al posto di "sfondo.jpg", il seguente valore: "images/sfondo.jpg".
Nota: se si utilizzano contemporaneamente sia il colore di sfondo (bgcolor) che una texture (background) quest'ultima andra' a coprire completamente il colore di sfondo, pertanto se decidiamo di utilizzare una texture di sfondo è inutile specificare anche il colore in quanto non cambierà nulla nella visualizzazione finale della pagina.
Colore dei link
I link (o collegamenti) verranno trattati più avanti, tuttavia nel tag "<body>" è possibile specificarne i colori in quanto è proprio qui che si impostano gli attributi generali di una pagina web.
Le proprietà dei colori dei link hanno 3 diverse specifiche relative ad un link visitato, ad un link non visitato, e ad un link attivo, cioè mentre lo si clicca, e queste 3 differenti specifiche sono: "link" per i link non visitati, "vlink" per i link visitati, "alink" per i link attivi o mentre si cliccano.
Nell'esempio vogliamo far si che i link nella nostra pagina siano blu intenso quando non sono mai stati cliccati, blu dopo che sono stati cliccati, e neri mentre si cliccano, quindi aggiungeremo questi attributi al Tag "<body>":
<body link="#0000ff" vlink="#000080" alink="000000">
Nota: Se non viene specificato nessun colore i colori saranno: blu primario per i link non visitati, viola per i link visitati e rosso per i link attivi.
Riassumendo...
Ora scriveremo un file html contenente tutte queste specifiche sopra descritte, quindi:
<html>
<body text="#ffff00" bgcolor="#ccffff" link="#0000ff" vlink="#000080" alink="000000">
La mia pagina web personale.
</body>
</html>
Salva e visualizza il file nel browser, avrai una pagina azzurra con una scritta gialla e nessun link in quanto non è stato ancora inserito. La scritta gialla è illeggibile quindi cambiamola in nera sostituendo: text="#ffff00" con text="#000000" quindi salva e visualizza, ora la scritta è leggibile, ma cambiamo anche lo sfondo con la texture, per far questo eliminiamo la specifica: bgcolor="#ccffff" e sostituiamola con: background="sfondo.jpg"
Il codice HTML definitivo è questo:
<html>
<body text="#000000" background="sfondo.jpg" link="#0000ff" vlink="#000080" alink="000000">
La mia pagina web personale.
</body>
</html>
Se viene visualizzato nel browser si vedrà una pagina con una texture di sfondo uniforme e la scritta sopra in nero.
Il prossimo passo sarà di aggiungere un titolo e formattare il testo.
4)formattazione del testo
In HTML esistono molti differenti Tag per scrivere il testo in tutte le maniere possibili, per titoli, paragrafi, giustificazioni, citazioni, grassetto, corsivo, e molti altri. Analizziamo i più utili.
Headers
I Tag "headers" sono specifici per i titoli e titoletti, infatti sono già pronti, per così dire, all'utilizzo, senza che si specifichino direttive per grandezza del carattere, grassetto, ecc. In tutto sono sei Tag e la sintassi è la seguente "<hX>...testo...</hX>", dove X viene sostituito da un numero da 1 a 6, dove 1 è il titolo più grande e 6 il più piccolo, per esempio:
<h1>Titolo grandezza 1</h1>
<h2>Titolo grandezza 2</h2>
<h3>Titolo grandezza 3</h3>
<h4>Titolo grandezza 4</h4>
<h5>Titolo grandezza 5</h5>
<h6>Titolo grandezza 6</h6>
Se scriviamo questo all'interno di un file html, poi lo salviamo e lo visualizziamo, il risultato è questo:
Titolo grandezza 1
Titolo grandezza 2
Titolo grandezza 3
Titolo grandezza 4
Titolo grandezza 5
Titolo grandezza 6
Formattazione del carattere
Ovviamente, oltre alle specifiche per il testo che si inseriscono nel Tag "<body>" della pagina, ne esistono altri, per permettere di ottenere testi multicolori, con grassetti, corsivi, sottolineati, piu' grandi e piu' piccoli, questi si ottiene con il Tag "<font>"
Se scriviamo in un file html la seguente linea:
<font face="verdana" size="2" color="#0000ff">Ultime novità</font>
Otterremo il risultato:
Ultime novità
Come si può vedere la scritta "Ultime novità" si trova fra il Tag "<font>" e "</font>" che delimitano la porzione di testo da formattare. L'attributo "face" specifica il tipo di carattere e fra virgolette deve essere scritto il nome del font, per esempio "verdana", "arial", "times", ecc. L'attributo "size" specifica la dimensione, che va da un massimo di 6 ad un minimo di 1, praticamente l'inverso del comportamento degli "headers" (vedi su)
E' possibile specificare più colori o più dimensioni utilizzando sempre il Tag "<font>" per delimitare il testo a cui si devono applicare gli attributi di colore e dimensioni, per esempio:
<font face="verdana" size="2" color="#0000ff">Questo testo di colore blu e grandezza 2 contiene una parola <font color="#ff0000">rossa</font> e una parola <font color="#00ff00">verde</font>, alcune parole <font size="3">più grandi</font> e alcune <font size="1">più piccole</font>.</font>
Il risultato sarà:
Questo testo di colore blu e grandezza 2 contiene una parola rossa e una parola verde, alcune parole più grandi e alcune più piccole.
A capo
Per andare a capo si utilizza il Tag "<br>" e il suo utilizzo e' molto semplice, infatti questo Tag si usa da solo e non c'e' bisogno di scrivere il corrispondente "</br>" come tutti gli altri Tag, ma semplicemente, ogni volta che vogliamo andare a capo, scriviamo "<br>" nel punto desiderato, per esempio la frase:
<font face="verdana" size="2" color="#000000">Sopra la panca la capra campa, sotto la panca la capra crepa.</font>
viene scritto tutto in una riga, se proviamo a scriverlo in HTML e visualizzarlo, ma se vogliamo mettere delle mandate a capo possiamo scrivere:
<font face="verdana" size="2" color="#ff0000">Sopra la panca <br>la capra campa, <br>sotto la panca <br>la capra crepa.</font>
il risultato sarà:
Sopra la panca
la capra campa,
sotto la panca
la capra crepa.
Stili per arricchire il testo
Esistono svariati Tag che servono per abbellire e arricchire il testo, o per renderlo più chiaro e versatile, eccone un elenco dei più utilizzati:
<font face="verdana" size="2" color="#0000ff">
<b>questo testo è grassetto</b><br>
<u>questo testo è sottolineato</u><br>
<i>questo testo è corsivo</i><br>
<strike>questo testo è barrato</strike><br>
<pre>questo testo è preformattato</pre><br>
questa <sup>parola</sup> è allineata in alto<br>
questa <sub>parola</sub> è allineata in basso
</font>
Ancora una volta, se scriviamo questo codice in un file HTML e poi lo visualizziamo, otterremo questo risultato:
questo testo è grassetto
questo testo è sottolineato
questo testo è corsivo
questo testo è barrato
questo testo è preformattato
questa parola è allineata in alto
questa parola è allineata in basso
Esistono molti altri Tag per formattare il testo ma sono più che altro riproposizioni dei Tag basilari sopra descritti.
5) paragrafi e allineamenti
Il testo, oltre che ad essere formattato, può, ovviamente, anche essere allineato a destra, al centro e a sinistra.
Ci sono svariati modi per allineare un testo, tramite il Tag "<p>", "<div>" e "<center>" ma mentre i primi due servono per allineare il testo in tutti i modi, l'ultimo serve solo per centrarlo ed è stato dichiarato obsoleto, anche se è tuttora supportato grazie alla sua grande diffusione in rete.
Per allineare un testo a destra è possibile farlo tramite il seguente codice:
<p align="right">Testo allineato a destra</p>
oppure con:
<div align="right">Testo allineato a destra</div>
in entrambi i casi si otterrà questo:
Testo allineato a destra
Testo allineato a destra
Se al posto di "right" scriviamo "left" il testo verrà allineato a sinistra, se al posto di "right" scriviamo "center" il testo verrà allineato al centro, per esempio:
<p align="center">Testo allineato al centro</p>
<div align="center">Testo allineato al centro</div>
<p align="left">Testo allineato a sinistra</p>
<div align="left">Testo allineato a sinistra</div>
si otterra:
Testo allineato al centro
Testo allineato al centro
Testo allineato a sinistra
Testo allineato a sinistra
Ovviamente questi testi possono essere formattati utilizzando il Tag "<font>" e gli stili come descritto nella sezione precedente, per esempio
<p align="right"><font size="2" color="#ff0000">Testo rosso allineato a destra</font></p>
<div align="right"><font size="2" color="#0000ff">Testo blu allineato a destra</font></div>
<p align="center"><font size="2" color="#00ff00">Testo verde allineato al centro</font></p>
<div align="center"><font size="2"><b>Testo grassetto allineato al centro</b></font></div>
<p align="left"><font size="2" color="#0000ff"><i>Testo blu corsivo allineato a sinistra</i></font></p>
<div align="left"><font size="3" color="#00ff00">Testo verde piu' grande allineato a sinistra</font></div>
si otterrà:
Testo rosso allineato a destra
Testo blu allineato a destra
Testo verde allineato al centro
Testo grassetto allineato al centro
Testo blu corsivo allineato a sinistra
Testo verde piu' grande allineato a sinistra
Come è possibile notare, l'uso di "<div>" o "<p>" e' completamente indifferente.
Per allineare al centro è possibile scrivere anche:
<center>Testo allineato al centro</center>
e si otterrà:
Testo allineato al centro
ma come abbiamo detto, questo Tag è obsoleto anche se ancora supportato, quindi se ne sconsiglia l'utilizzo.
Per giustificare un paragrafo di un lungo testo si usano le stesse istruzioni sopra descritte, in questo caso useremo per praticità il Tag "<p>", il codice è il seguente:
<p align="left">
SINISTRA Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia dixisset ‘Deus’.
</p>
<p align="right">
DESTRA Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia dixisset ‘Deus’.
</p>
<p align="center">
CENTRATO Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia dixisset ‘Deus’.
</p>
<p align="justify">
GIUSTIFICATO Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia dixisset ‘Deus’.
</p>
Se scriviamo questo codice in unfile HTML, salviamo e visualizziamo, il risultato sarà il seguente:
SINISTRA Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia dixisset ‘Deus’.
DESTRA Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia dixisset ‘Deus’.
CENTRATO Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia dixisset ‘Deus’.
GIUSTIFICATO Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia dixisset ‘Deus’.
6) elenchi puntati
In HTML ci sono molti tipi di elenchi puntati e numerati in diverse maniere, i Tag per ottenere questo sono: "<ol>...<li>...</ol>", dove "<ol>" si mette all'inizio dell'elenco, "<li>" si mette davanti ad ogni nuova voce e "</ol>" si mette alla fine dell'elenco puntato, nel caso di elenchi numerati. Nel caso di elenchi puntati senza alcun tipo di ordinazione al posto di "ol" si mette "ul".
Elenchi numerati
Gli elenchi numerati sono quelli in cui all'inizio è presente una numerazione o un'ordinazione con lettere o numeri romani; vediamo alcuni esempi:
con il codice:
<ol>
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
si ottiene un elenco numerato con numeri:
Voce numero 1.
Voce numero 2.
Voce numero 3.
con il codice:
<ol type="A">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
si ottiene un elenco ordinato con lettere maiuscole:
Voce numero 1.
Voce numero 2.
Voce numero 3.
con il codice:
<ol type="a">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
si ottiene un elenco ordinato con lettere minuscole:
Voce numero 1.
Voce numero 2.
Voce numero 3.
con il codice:
<ol type="I">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
si ottiene un elenco ordinato con numeri romani maiuscoli:
Voce numero 1.
Voce numero 2.
Voce numero 3.
con il codice:
<ol type="i">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
si ottiene un elenco ordinato con numeri romani minuscoli:
Voce numero 1.
Voce numero 2.
Voce numero 3.
Elenchi puntati non numerati
Questo tipo di elenchi sono, come dice il titoletto, solamente puntati e non hanno un ordinazione di alcun tipo, possiamo però scegliere il tipo di punto che verrà messo ad ogni voce, ma vediamo alcuni esempi:
Con il codice:
<ul type="disc">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ul>
si otterrà:
Voce numero 1.
Voce numero 2.
Voce numero 3.
Con il codice:
<ul type="circle">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ul>
si otterrà:
Voce numero 1.
Voce numero 2.
Voce numero 3.
Con il codice:
<ul type="square">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ul>
si otterrà:
Voce numero 1.
Voce numero 2.
Voce numero 3.
Elenchi puntati e numerati nidificati.
E' ovviamente possibile creare elenchi puntati che contengono elenchi numerati che a loro volta ne contengono altri e cosi' via, per esempio il codice:
<ol type="disc">
<li>Voce numero 1.
<li>Voce numero 2.
<ul type="disc">
<li>Voce numero 1.
<li>Voce numero 2.
<ol type="A">
<li>Voce numero 1.
<ol type="I">
<li>Voce numero 1.
<li>Voce numero 2.
</ol>
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
<li>Voce numero 3.
</ul>
<li>Voce numero 3.
</ol>
genera il seguente risultato:
Voce numero 1.
Voce numero 2.
Voce numero 1.
Voce numero 2.
Voce numero 1.
Voce numero 1.
Voce numero 2.
Voce numero 2.
Voce numero 3.
Voce numero 3.
Voce numero 3.
7) inserimento e uso delle imaginozze
Per inserire un'immagine in un qualunque punto della pagina web si utilizza il seguente Tag: "<img src="nomefile">", il suo utilizzo è alquanto semplice, infatti se utilizziamo il codice:
<img src="fiore.jpg">
otterremo il seguente risultato:
E' possibile inoltre specificare con l'attributo "border" un bordo colorato intorno all'immagine, per esempio:
<img src="fiore.jpg" border="3">
si otterrà:
E' possibile anche specificare, con l'attributo "alt", un'etichetta di testo che verrà visualizzata quando ci soffermeremo con il mouse sopra all'immagine, come nell'esempio sotto riportato:
<img src="fiore.jpg" border="3" alt="questo è un fiore di loto">
Tramite gli attributi "height" e "width" si possono modificare le dimensioni di un'immagine, ma questo e' sconsigliabile in quanto questa perderà di qualità, si consiglia di preparare l'immagine già nelle dimensioni desiderate.
Con il codice:
<img src="fiore.jpg" width="50" height="50">
si ottiene
Con il codice:
<img src="fiore.jpg" width="250" height="250">
si ottiene:
Con il codice:
<img src="fiore.jpg" width="400" height="60">
si ottiene:
Tramite gli attributi "hspace" e "vspace" è possibile specificare una distanza in pixel dagli altri oggetti che si trovano lungo i quattro lati dell'immagine. Per esempio scrivendo il seguente codice:
<div align="center">
<img src="fiore.jpg" width="50" height="50"><br>
<img src="fiore.jpg" width="50" height="50">
<img src="fiore.jpg" width="50" height="50" hspace="10" vspace="5">
<img src="fiore.jpg" width="50" height="50"><br>
<img src="fiore.jpg" width="50" height="50">
</div>
otterremo:
Dove la spaziatura orizzontale, intorno all'immagine al centro, è di 10 pixel, e la spaziatura verticale e' di 5 pixel.
Tramite l'attributo "align" infine e' possibile specificare l'allineamento dell'immagine rispetto ad altre immagini o al testo; vediamo alcuni esempi:
Con il codice:
<p><img src="fiore.jpg" align="top">questo è un testo</p>
otterremo il testo allineato in alto rispetto all'immagine:
questo è un testo
Con il codice:
<p><img src="fiore.jpg" align="middle">questo è un testo</p>
otterremo il testo allineato al centro rispetto all'immagine:
questo è un testo
Con il codice:
<p><img src="fiore.jpg" align="bottom">questo è un testo</p>
otterremo il testo allineato in basso rispetto all'immagine:
questo è un testo
I prossimi due attributi sono molti utili per l'inserimento di immagini all'interno di un testo lungo:
Con il codice:
<p><img src="fiore.jpg" align="left">questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo </p>
otterremo l'immagine inglobata nel testo e allineata a sinistra:
questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo
Con il codice:
<p><img src="fiore.jpg" align="right">questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo </p>
otterremo l'immagine inglobata nel testo e allineata a destra:
questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo
8) link
Il link rappresenta in realtà l'anima del web in quanto senza di esso non sarebbe possibile alcuna navigazione, e tutte le funzioni principali del web (motori di ricerca, portali, ecc) sarebbero impossibili da gestire.
Per aggiungere un link dalla nostra pagina web ad un altra pagina, o sito, e' necessario utilizzare il Tag "<a href=link>...testo e/o immagine</a>", per esempio se volessimo linkare un sito web dal nostro sito, scriveremo:
<a href="http://www.linux.org">Sito web ufficiale del sistema operativo Linux</a>
otterremo:
Sito web ufficiale del sistema operativo Linux
Se facciamo clic su questo link andremo nel sito Linux, come specificato, ma questo andrà a sostituire il nostro sito, quindi perchè non farlo aprire in una nuova finestra, affinchè l'utente non vada via dal nostro sito? Questo è possibile tramite l'attributo "target", come nel seguente esempio:
<a href="http://www.linux.org" target="_blank">Sito web ufficiale del sistema operativo Linux</a>
e il risultato sara':
Sito web ufficiale del sistema operativo Linux
però in questo caso quando faremo clic su di esso si aprirà una nuova finestra con il link da noi specificato.
Se si vuole scrivere un testo corto ma allo stesso tempo si vuole fornire una descrizione del link, è possibile farlo con l'attributo "title", per esempio:
<a href="http://www.linux.org" target="_blank" title="Sito web ufficiale del sistema operativo Linux">Linux</a>
otterremo:
Linux
e quando andremo con il mouse sopra al link apparirà il testo specificato.
Ovviamente è possibile sostituire l'indirizzo web
E' possibile inoltre utilizzare un'immagine come link cliccabile, scrivendo il seguente codice:
<a href="http://www.linux.org" target="_blank" title="Sito web ufficiale del sistema operativo Linux"><img src="fiore.jpg"></a>
otterremo:
Questa è un'immagine cliccabile e funziona esattamente con il link testuale descritto sopra. Nel caso che si voglia rimuovere il bordo blu basta specificare "border=0" nel Tag dell'immagine.
Bookmark (segnalibri)
Un bookmark non è altro che un collegamento ad una sezione specifica della stessa pagina dove si trova il link, questo si ottiene inserendo un Tag particolare all'interno della pagina, cioe' "<a name=nome>", che ne segnala la posizione (come una bandierina o un segnalibro), poi utilizzando la solita sintassi per creare il collegamento.
Ad esempio, all'inizio di questa sezione, è stato inserito il tag:
<a name="collegamenti"></a>
quindi utilizzando il codice:
<a href="collegamenti">Torna all'inizio della sezione</a>
si otterrà:
Torna all'inizio della sezione
e cliccando su questo link l'utente verrà sbalzato all'inizio del capitolo.
Link ad email
E' possibile anche inserire un collegamento ad un indirizzo email, in modo che l'utente, cliccando sopra, si ritrovi con il proprio client di posta aperto pronto per spedire un messaggio di posta elettronica all'indirizzo email che verrà specificato, questo aggiungendo "mailto:" nell'url, come nell'esempio:
<a href="mailto:indirizzo@email">Contattaci</a>
si otterrà:
Contattaci
cliccando su questo link ci ritroveremo il nostro client di posta aperto con l'indirizzo email già preimpostato.
Target
L'attributo "target" è molto utile alla navigazione quando abbiamo la necessità di far aprire una pagina web o un URL esterno in una nuova finestra o in un determinato frame (che sono trattati più avanti).
Si utilizza così:
<a href="pagina.htm" target="nome">link</a>
Nel valore di "target" va specificato un nome di un frame, al clic quella determinata pagina si aprirà nel nome del frame specificato nel valore di "target, oppure in questo valore è possibile anche specificare una delle parole chiave predefinite per far aprire, per esempio, la pagina in una nuova finestra del browser. Le principali parole chiave sono:
"_self" per aprire la pagina nello stesso frame.
"_top" per annullare i frame.
"_blank" per aprire la pagina in una nuova finestra del browser.
c'era altro ma lascio stare
scusate per la guida cosi lunga ciao a tutti e scusate ancora
spero che pero per la sua lunghezza un po renda se vi piace alzatemi reputazione o abbasatemela scrivetemi se volete fare commenti ciaooooooooooooo
fonte:
asciitable e io (e un mix ) xD
GUIDA ALL HTML
I PRIMI PASSI:
1) cos'è l'html?
HTML significa "Hyper Text Markup Language" e non è comparabile ad un vero e proprio linguaggio di programmazione, ma è più vicino ad uno script, cioè una serie di istruzioni testuali che vengono interpretate da un programma esterno, in questo caso il browser.
Quando si naviga in internet il browser che utilizziamo invia continuamente dati e ne riceve (cioè comunica con il server dove si trovano le pagine web), quando riceve un codice HTML il browser lo legge, lo interpreta e visualizza il contenuto della pagina a seconda delle istruzioni che il codice HTML gli fornisce, in definitiva quindi il codice HTML è in realtà una serie di descrizioni su come la pagina web deve essere visualizzata nel browser.
Il codice HTML e' composto da diversi "Tag", questi Tag rappresentano le parole chiave che i browser riconoscono ed intepretano, e servono a "marcare" per esempio un testo in modo che questo abbia una parola in grassetto.
Per esempio se volessi scrivere la frase "Confronta i nostri prezzi utilizzando i listini." in modo che "nostri prezzi" sia scritto in grassetto, scriverò il seguente codice:
Confronta i <b>nostri prezzi</b> utilizzando i listini.
Il Tag "<b>" serve per il grassetto; il risultato sarà:
Confronta i nostri prezzi utilizzando i listini.
Come e' possibile vedere sopra, tutti i Tag HTML si scrivono tra i caratteri "<" e ">", e tutti quanti (a parte alcuni) hanno un inizio ed una fine, in questo caso la parte del codice "<b>nostri prezzi</b>" indica al broswer, che interpreta il codice, di scrivere in grassetto tutto quel che si trova fra il Tag "<b>" (inizio grassetto) e il Tag "</b>" (fine grassetto), tutto il resto viene visualizzato con il carattere predefinito.
Il codice HTML non è case sensitive, cioe' si può scrivere sia tutto maiuscolo che tutto minuscolo, cioè il codice "<B>nostri prezzi</B>" e "<b>nostri prezzi</b>" verrà intepretato allo stesso modo ed avrà lo stesso risultato. E' consigliabile però scrivere tutto in minuscolo in quanto il testo maiuscolo è fastidioso alla lettura e, a lungo andare, più laborioso da scrivere, ed inoltre è buona norma nel web scrivere tutto quanto in minuscolo, specialmente i nomi dei file, per esempio è meglio scrivere "indice.htm" che "INDICE.HTM" o peggio ancora "Indice.HTM", oppure "Logo.JPG" va scritto "logo.jpg", e così via; questo per pure ragioni tecniche legate ai differenti tipi di server che sono utilizzati, se fate largo uso di nomi di file e link scritti in maiuscolo (totalmente o in parte) è possibile che cambiando spazio web, oppure se l'amministratore del server passa da sistemi Windows a sistemi Unix a vostra insaputa, vi potreste ritrovare con lo spiacevole risultato che la metà del vostro sito risulti irraggiungibile o con le pagine web che di colpo e senza apparente motivo non visualizzano più le immagini, oppure con link malfunzionanti; questo perchè, in poche parole, i sistemi Unix fanno distinzione fra un file scritto in maiuscolo ed uno scritto in minuscolo, in pratica il file "Logo.JPG" e "logo.jpg", anche se si chiamano esattamente uguale, sono visti come differenti file e quindi non riconosciuti. E' molto importante inoltre dare dei nomi semplici ai file che si utilizzano, evitando caratteri strani e spaziature, per esempio è sconsigliabile nominare un file "Foto mare Luglio '01.jpg", oppure "$contenuto[1].htm" e così via, in quanto questi caratteri vengono tradotti con codici particolari che in alcuni casi compromettono la visualizzazione corretta della pagina mandando in tilt il browser o il server, oppure facendovi perdere tempo negli aggiornamenti futuri; chiunque abbia un'esperienza di sviluppo web si è già scontrato inevitabilmente più volte con problemi (e ore perse) riguardanti nomi di file scritti con caratteri strani o spaziature. Quando si nomina un file, che sia un'immagine o un file HTML, utilizzare solamente lettere dell'alfabeto e numeri, evitando assolutamente simboli e spazi, scrivendo tutto minuscolo.
2) il primo file html
Create una cartella sul destop e nominatela come preferite (es. "sitoweb"), aprite il Blocco Note (o qualsiasi editor di testo puro, come Edit del DOS, VI di Unix, SimpleText del Mac, ecc), fate un nuovo documento e scrivete quanto segue:
<html>
</html>
e salvatelo, nella cartella creata in precedenza, dando come nome del file "index.htm" oppure "index.html". I file HTML possono essere salvati sia con l'estensione *.htm che con *.html, non fa differenza, ma è consigliabile scegliere una delle due e salvare ogni file, per praticità, sempre con la stessa estensione.
Questi due Tag HTML rappresentano l'inizio e la fine di una pagina web, il browser sa che quando legge il Tag "<html>" è l'inizio di una pagina web, e quando arriva a "</html>" ne è la fine.
Ora fate doppio clic sul file "index.htm" che avete salvato, se è andato tutto bene dovrebbe aprirsi il browser visualizzando una pagina vuota (in quanto non c'è ancora nessun contenuto), se invece si apre il Blocco Note di nuovo vuol dire che avete salvato un file con un nome sbagliato, per esempio "index.htm.txt", se così fosse rinominate il file con il nome giusto; se facendo doppio clic non succede nulla, o si apre qualche altro programma, controllate che nel vostro computer tutto sia installato correttamente e che le estensioni dei file siano assegnate in modo corretto; provate eventualmente ad aprire il browser e tramite il menu File>Apri aprire il file HTML che avete salvato.
3) tag body e colori (la parte che preferisco xD)
Ora procederemo con l'aggiungere il contenuto alla nostra pagina web, per far questo (sempre utilizzando lo stesso file di prima) scrivere in mezzo a "<html>" e "</html>" i seguenti Tag:
<body>
Ciao mondo!
</body>
ottendendo in totale il seguente codice:
<html>
<body>
La mia pagina web personale.
</body>
</html>
Salvate e visualizzate la pagina facendo doppio clic sul file o premendo il tasto "Aggiorna" del vostro browser. Il risultato sarà una pagina vuota con la semplice scritta:
La mia pagina web personale.
Nel Tag "<body>" è possibile specificare molte informazioni utili, quali il colore del testo, il colore dei link, lo sfondo della pagina, sia inteso come colore che come immagine (texture).
I colori in HTML
I colori in HTML si specificano utilizzando il sistema RGB (Red, Green, Blu, cioe' rosso, verde, blu) scrivendoli in esadecimale, con il prefisso "#", miscelando questi valori è possibile ottenere tutta la scala cromatica.
Per esempio il colore rosso e' rappresentato dai valori RGB 255,0,0. La scala RGB va da 0 a 255, quindi il valore 255,0,0 significa che il rosso e' in quantità massima e che il verde e il blu sono completamente assenti, quindi il risultato è che avremo un colore rosso acceso, e questo in esadecimale di scrive "#ff0000". Il blu in RGB è uguale a 0,0,255 e in esadecimale lo 0 si scrive con "00" e il 255 di scrive con "ff", quindi si traduce in "#0000ff", e così via.
Per le varie sfumature e colori fare riferimento ad una tabella colori in esadecimale, oppure potete utilizzare programmi appositi che miscelano i colori e restituiscono il valore esadecimale.
Colore del testo
Il colore del testo (se non differentemente specificato) è preimpostato su nero, per specificare un colore diverso, per esempio giallo, bisogna aggiungere, al Tag "<body>" il seguente attributo "text":
<body text="#ffff00">
Colore dello sfondo
Il colore dello sfondo preimpostato è bianco, ma possiamo sia cambiarlo che utilizzare una texture, o una foto, come immagini di sfondo. E' consigliabile evitare di scegliere colori molto forti come sfondo in quanto potrebbero infastidire l'utente che visita il vostro sito, quindi ridurre la sua permanenza o addirittura spingere gli utenti ad andare altrove quasi subito.
Per semplicemente il colore di sfondo, per esempio azzurro chiaro, dobbiamo aggiungere l'attibuto "bgcolor":
<body bgcolor="#ccffff">
Se si visualizza la pagina nel browser si vedrà che lo sfondo ha assunto un colore azzurro chiaro.
Per impostare invece una texture di sfondo abbiamo bisogno di un'immagine, questa non deve essere troppo grande o pesante altrimenti aumenterà il tempo di scaricamento. Uno sfondo adatto è rappresentato dall'immagine sotto riportata, se non hai nulla a portata di mano puoi scaricarla e salvarla nella cartella che hai creato precedentemente insieme al file HTML che hai creato.
Per inserire questo sfondo nella tua pagina bisogna inserire la specifica "background" al Tag "<body>", come sotto riportato:
<body background="sfondo.jpg">
Salva e visualizza la pagina, vedrai che ora questa presenterà uno sfondo uniforme composto da tante copie, affiancate in righe e colonne all'infinito, di questa immagine scelta e, scorrendo in basso nel caso in cui la pagina abbia un lungo testo) lo sfondo scorrera' insieme alla pagina, cioè il testo sembrerà stampato sullo sfondo come se questo fosse una carta, se invece vogliamo ottenere l'effetto che il testo sembri stampato su un lucido che scorre sullo sfondo fisso dobbiamo aggiungere un'ulteriore specifica, cioè "bgproperties", quindi:
<body background="sfondo.jpg" bgproperties="fixed">
Questo è molto comodo quando, per esempio, come sfondo ultilizziamo una grande immagine che rimane fissa e non scorre, però è sconsigliabile utilizzare quest'ultima specifica per lo sfondo in quanto non tutti i browser la supportano, e il fine del buon sviluppatore web è di realizzare siti che siano visibili ugualmente da differenti browser in modo da rendere un'immagine unica per tutti i visitatori.
Nota: è possibile mettere lo sfondo in una sottocartella, per esempio al fine di organizzare meglio i files nel sito, in questo caso si dovrà specificare il percorso relativo dalla directory dove si trova il file html alla directory e al filename che rappresenta lo sfondo. Poniamo il caso che lo sfondo si trovi nella cartella "images", nel valore dell'attributo "background" dovremo specificare, al posto di "sfondo.jpg", il seguente valore: "images/sfondo.jpg".
Nota: se si utilizzano contemporaneamente sia il colore di sfondo (bgcolor) che una texture (background) quest'ultima andra' a coprire completamente il colore di sfondo, pertanto se decidiamo di utilizzare una texture di sfondo è inutile specificare anche il colore in quanto non cambierà nulla nella visualizzazione finale della pagina.
Colore dei link
I link (o collegamenti) verranno trattati più avanti, tuttavia nel tag "<body>" è possibile specificarne i colori in quanto è proprio qui che si impostano gli attributi generali di una pagina web.
Le proprietà dei colori dei link hanno 3 diverse specifiche relative ad un link visitato, ad un link non visitato, e ad un link attivo, cioè mentre lo si clicca, e queste 3 differenti specifiche sono: "link" per i link non visitati, "vlink" per i link visitati, "alink" per i link attivi o mentre si cliccano.
Nell'esempio vogliamo far si che i link nella nostra pagina siano blu intenso quando non sono mai stati cliccati, blu dopo che sono stati cliccati, e neri mentre si cliccano, quindi aggiungeremo questi attributi al Tag "<body>":
<body link="#0000ff" vlink="#000080" alink="000000">
Nota: Se non viene specificato nessun colore i colori saranno: blu primario per i link non visitati, viola per i link visitati e rosso per i link attivi.
Riassumendo...
Ora scriveremo un file html contenente tutte queste specifiche sopra descritte, quindi:
<html>
<body text="#ffff00" bgcolor="#ccffff" link="#0000ff" vlink="#000080" alink="000000">
La mia pagina web personale.
</body>
</html>
Salva e visualizza il file nel browser, avrai una pagina azzurra con una scritta gialla e nessun link in quanto non è stato ancora inserito. La scritta gialla è illeggibile quindi cambiamola in nera sostituendo: text="#ffff00" con text="#000000" quindi salva e visualizza, ora la scritta è leggibile, ma cambiamo anche lo sfondo con la texture, per far questo eliminiamo la specifica: bgcolor="#ccffff" e sostituiamola con: background="sfondo.jpg"
Il codice HTML definitivo è questo:
<html>
<body text="#000000" background="sfondo.jpg" link="#0000ff" vlink="#000080" alink="000000">
La mia pagina web personale.
</body>
</html>
Se viene visualizzato nel browser si vedrà una pagina con una texture di sfondo uniforme e la scritta sopra in nero.
Il prossimo passo sarà di aggiungere un titolo e formattare il testo.
4)formattazione del testo
In HTML esistono molti differenti Tag per scrivere il testo in tutte le maniere possibili, per titoli, paragrafi, giustificazioni, citazioni, grassetto, corsivo, e molti altri. Analizziamo i più utili.
Headers
I Tag "headers" sono specifici per i titoli e titoletti, infatti sono già pronti, per così dire, all'utilizzo, senza che si specifichino direttive per grandezza del carattere, grassetto, ecc. In tutto sono sei Tag e la sintassi è la seguente "<hX>...testo...</hX>", dove X viene sostituito da un numero da 1 a 6, dove 1 è il titolo più grande e 6 il più piccolo, per esempio:
<h1>Titolo grandezza 1</h1>
<h2>Titolo grandezza 2</h2>
<h3>Titolo grandezza 3</h3>
<h4>Titolo grandezza 4</h4>
<h5>Titolo grandezza 5</h5>
<h6>Titolo grandezza 6</h6>
Se scriviamo questo all'interno di un file html, poi lo salviamo e lo visualizziamo, il risultato è questo:
Titolo grandezza 1
Titolo grandezza 2
Titolo grandezza 3
Titolo grandezza 4
Titolo grandezza 5
Titolo grandezza 6
Formattazione del carattere
Ovviamente, oltre alle specifiche per il testo che si inseriscono nel Tag "<body>" della pagina, ne esistono altri, per permettere di ottenere testi multicolori, con grassetti, corsivi, sottolineati, piu' grandi e piu' piccoli, questi si ottiene con il Tag "<font>"
Se scriviamo in un file html la seguente linea:
<font face="verdana" size="2" color="#0000ff">Ultime novità</font>
Otterremo il risultato:
Ultime novità
Come si può vedere la scritta "Ultime novità" si trova fra il Tag "<font>" e "</font>" che delimitano la porzione di testo da formattare. L'attributo "face" specifica il tipo di carattere e fra virgolette deve essere scritto il nome del font, per esempio "verdana", "arial", "times", ecc. L'attributo "size" specifica la dimensione, che va da un massimo di 6 ad un minimo di 1, praticamente l'inverso del comportamento degli "headers" (vedi su)
E' possibile specificare più colori o più dimensioni utilizzando sempre il Tag "<font>" per delimitare il testo a cui si devono applicare gli attributi di colore e dimensioni, per esempio:
<font face="verdana" size="2" color="#0000ff">Questo testo di colore blu e grandezza 2 contiene una parola <font color="#ff0000">rossa</font> e una parola <font color="#00ff00">verde</font>, alcune parole <font size="3">più grandi</font> e alcune <font size="1">più piccole</font>.</font>
Il risultato sarà:
Questo testo di colore blu e grandezza 2 contiene una parola rossa e una parola verde, alcune parole più grandi e alcune più piccole.
A capo
Per andare a capo si utilizza il Tag "<br>" e il suo utilizzo e' molto semplice, infatti questo Tag si usa da solo e non c'e' bisogno di scrivere il corrispondente "</br>" come tutti gli altri Tag, ma semplicemente, ogni volta che vogliamo andare a capo, scriviamo "<br>" nel punto desiderato, per esempio la frase:
<font face="verdana" size="2" color="#000000">Sopra la panca la capra campa, sotto la panca la capra crepa.</font>
viene scritto tutto in una riga, se proviamo a scriverlo in HTML e visualizzarlo, ma se vogliamo mettere delle mandate a capo possiamo scrivere:
<font face="verdana" size="2" color="#ff0000">Sopra la panca <br>la capra campa, <br>sotto la panca <br>la capra crepa.</font>
il risultato sarà:
Sopra la panca
la capra campa,
sotto la panca
la capra crepa.
Stili per arricchire il testo
Esistono svariati Tag che servono per abbellire e arricchire il testo, o per renderlo più chiaro e versatile, eccone un elenco dei più utilizzati:
<font face="verdana" size="2" color="#0000ff">
<b>questo testo è grassetto</b><br>
<u>questo testo è sottolineato</u><br>
<i>questo testo è corsivo</i><br>
<strike>questo testo è barrato</strike><br>
<pre>questo testo è preformattato</pre><br>
questa <sup>parola</sup> è allineata in alto<br>
questa <sub>parola</sub> è allineata in basso
</font>
Ancora una volta, se scriviamo questo codice in un file HTML e poi lo visualizziamo, otterremo questo risultato:
questo testo è grassetto
questo testo è sottolineato
questo testo è corsivo
questo testo è barrato
questo testo è preformattato
questa parola è allineata in alto
questa parola è allineata in basso
Esistono molti altri Tag per formattare il testo ma sono più che altro riproposizioni dei Tag basilari sopra descritti.
5) paragrafi e allineamenti
Il testo, oltre che ad essere formattato, può, ovviamente, anche essere allineato a destra, al centro e a sinistra.
Ci sono svariati modi per allineare un testo, tramite il Tag "<p>", "<div>" e "<center>" ma mentre i primi due servono per allineare il testo in tutti i modi, l'ultimo serve solo per centrarlo ed è stato dichiarato obsoleto, anche se è tuttora supportato grazie alla sua grande diffusione in rete.
Per allineare un testo a destra è possibile farlo tramite il seguente codice:
<p align="right">Testo allineato a destra</p>
oppure con:
<div align="right">Testo allineato a destra</div>
in entrambi i casi si otterrà questo:
Testo allineato a destra
Testo allineato a destra
Se al posto di "right" scriviamo "left" il testo verrà allineato a sinistra, se al posto di "right" scriviamo "center" il testo verrà allineato al centro, per esempio:
<p align="center">Testo allineato al centro</p>
<div align="center">Testo allineato al centro</div>
<p align="left">Testo allineato a sinistra</p>
<div align="left">Testo allineato a sinistra</div>
si otterra:
Testo allineato al centro
Testo allineato al centro
Testo allineato a sinistra
Testo allineato a sinistra
Ovviamente questi testi possono essere formattati utilizzando il Tag "<font>" e gli stili come descritto nella sezione precedente, per esempio
<p align="right"><font size="2" color="#ff0000">Testo rosso allineato a destra</font></p>
<div align="right"><font size="2" color="#0000ff">Testo blu allineato a destra</font></div>
<p align="center"><font size="2" color="#00ff00">Testo verde allineato al centro</font></p>
<div align="center"><font size="2"><b>Testo grassetto allineato al centro</b></font></div>
<p align="left"><font size="2" color="#0000ff"><i>Testo blu corsivo allineato a sinistra</i></font></p>
<div align="left"><font size="3" color="#00ff00">Testo verde piu' grande allineato a sinistra</font></div>
si otterrà:
Testo rosso allineato a destra
Testo blu allineato a destra
Testo verde allineato al centro
Testo grassetto allineato al centro
Testo blu corsivo allineato a sinistra
Testo verde piu' grande allineato a sinistra
Come è possibile notare, l'uso di "<div>" o "<p>" e' completamente indifferente.
Per allineare al centro è possibile scrivere anche:
<center>Testo allineato al centro</center>
e si otterrà:
Testo allineato al centro
ma come abbiamo detto, questo Tag è obsoleto anche se ancora supportato, quindi se ne sconsiglia l'utilizzo.
Per giustificare un paragrafo di un lungo testo si usano le stesse istruzioni sopra descritte, in questo caso useremo per praticità il Tag "<p>", il codice è il seguente:
<p align="left">
SINISTRA Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia dixisset ‘Deus’.
</p>
<p align="right">
DESTRA Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia dixisset ‘Deus’.
</p>
<p align="center">
CENTRATO Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia dixisset ‘Deus’.
</p>
<p align="justify">
GIUSTIFICATO Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia dixisset ‘Deus’.
</p>
Se scriviamo questo codice in unfile HTML, salviamo e visualizziamo, il risultato sarà il seguente:
SINISTRA Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia dixisset ‘Deus’.
DESTRA Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia dixisset ‘Deus’.
CENTRATO Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia dixisset ‘Deus’.
GIUSTIFICATO Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia dixisset ‘Deus’.
6) elenchi puntati
In HTML ci sono molti tipi di elenchi puntati e numerati in diverse maniere, i Tag per ottenere questo sono: "<ol>...<li>...</ol>", dove "<ol>" si mette all'inizio dell'elenco, "<li>" si mette davanti ad ogni nuova voce e "</ol>" si mette alla fine dell'elenco puntato, nel caso di elenchi numerati. Nel caso di elenchi puntati senza alcun tipo di ordinazione al posto di "ol" si mette "ul".
Elenchi numerati
Gli elenchi numerati sono quelli in cui all'inizio è presente una numerazione o un'ordinazione con lettere o numeri romani; vediamo alcuni esempi:
con il codice:
<ol>
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
si ottiene un elenco numerato con numeri:
Voce numero 1.
Voce numero 2.
Voce numero 3.
con il codice:
<ol type="A">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
si ottiene un elenco ordinato con lettere maiuscole:
Voce numero 1.
Voce numero 2.
Voce numero 3.
con il codice:
<ol type="a">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
si ottiene un elenco ordinato con lettere minuscole:
Voce numero 1.
Voce numero 2.
Voce numero 3.
con il codice:
<ol type="I">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
si ottiene un elenco ordinato con numeri romani maiuscoli:
Voce numero 1.
Voce numero 2.
Voce numero 3.
con il codice:
<ol type="i">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
si ottiene un elenco ordinato con numeri romani minuscoli:
Voce numero 1.
Voce numero 2.
Voce numero 3.
Elenchi puntati non numerati
Questo tipo di elenchi sono, come dice il titoletto, solamente puntati e non hanno un ordinazione di alcun tipo, possiamo però scegliere il tipo di punto che verrà messo ad ogni voce, ma vediamo alcuni esempi:
Con il codice:
<ul type="disc">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ul>
si otterrà:
Voce numero 1.
Voce numero 2.
Voce numero 3.
Con il codice:
<ul type="circle">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ul>
si otterrà:
Voce numero 1.
Voce numero 2.
Voce numero 3.
Con il codice:
<ul type="square">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ul>
si otterrà:
Voce numero 1.
Voce numero 2.
Voce numero 3.
Elenchi puntati e numerati nidificati.
E' ovviamente possibile creare elenchi puntati che contengono elenchi numerati che a loro volta ne contengono altri e cosi' via, per esempio il codice:
<ol type="disc">
<li>Voce numero 1.
<li>Voce numero 2.
<ul type="disc">
<li>Voce numero 1.
<li>Voce numero 2.
<ol type="A">
<li>Voce numero 1.
<ol type="I">
<li>Voce numero 1.
<li>Voce numero 2.
</ol>
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
<li>Voce numero 3.
</ul>
<li>Voce numero 3.
</ol>
genera il seguente risultato:
Voce numero 1.
Voce numero 2.
Voce numero 1.
Voce numero 2.
Voce numero 1.
Voce numero 1.
Voce numero 2.
Voce numero 2.
Voce numero 3.
Voce numero 3.
Voce numero 3.
7) inserimento e uso delle imaginozze
Per inserire un'immagine in un qualunque punto della pagina web si utilizza il seguente Tag: "<img src="nomefile">", il suo utilizzo è alquanto semplice, infatti se utilizziamo il codice:
<img src="fiore.jpg">
otterremo il seguente risultato:
E' possibile inoltre specificare con l'attributo "border" un bordo colorato intorno all'immagine, per esempio:
<img src="fiore.jpg" border="3">
si otterrà:
E' possibile anche specificare, con l'attributo "alt", un'etichetta di testo che verrà visualizzata quando ci soffermeremo con il mouse sopra all'immagine, come nell'esempio sotto riportato:
<img src="fiore.jpg" border="3" alt="questo è un fiore di loto">
Tramite gli attributi "height" e "width" si possono modificare le dimensioni di un'immagine, ma questo e' sconsigliabile in quanto questa perderà di qualità, si consiglia di preparare l'immagine già nelle dimensioni desiderate.
Con il codice:
<img src="fiore.jpg" width="50" height="50">
si ottiene
Con il codice:
<img src="fiore.jpg" width="250" height="250">
si ottiene:
Con il codice:
<img src="fiore.jpg" width="400" height="60">
si ottiene:
Tramite gli attributi "hspace" e "vspace" è possibile specificare una distanza in pixel dagli altri oggetti che si trovano lungo i quattro lati dell'immagine. Per esempio scrivendo il seguente codice:
<div align="center">
<img src="fiore.jpg" width="50" height="50"><br>
<img src="fiore.jpg" width="50" height="50">
<img src="fiore.jpg" width="50" height="50" hspace="10" vspace="5">
<img src="fiore.jpg" width="50" height="50"><br>
<img src="fiore.jpg" width="50" height="50">
</div>
otterremo:
Dove la spaziatura orizzontale, intorno all'immagine al centro, è di 10 pixel, e la spaziatura verticale e' di 5 pixel.
Tramite l'attributo "align" infine e' possibile specificare l'allineamento dell'immagine rispetto ad altre immagini o al testo; vediamo alcuni esempi:
Con il codice:
<p><img src="fiore.jpg" align="top">questo è un testo</p>
otterremo il testo allineato in alto rispetto all'immagine:
questo è un testo
Con il codice:
<p><img src="fiore.jpg" align="middle">questo è un testo</p>
otterremo il testo allineato al centro rispetto all'immagine:
questo è un testo
Con il codice:
<p><img src="fiore.jpg" align="bottom">questo è un testo</p>
otterremo il testo allineato in basso rispetto all'immagine:
questo è un testo
I prossimi due attributi sono molti utili per l'inserimento di immagini all'interno di un testo lungo:
Con il codice:
<p><img src="fiore.jpg" align="left">questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo </p>
otterremo l'immagine inglobata nel testo e allineata a sinistra:
questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo
Con il codice:
<p><img src="fiore.jpg" align="right">questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo </p>
otterremo l'immagine inglobata nel testo e allineata a destra:
questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo
8) link
Il link rappresenta in realtà l'anima del web in quanto senza di esso non sarebbe possibile alcuna navigazione, e tutte le funzioni principali del web (motori di ricerca, portali, ecc) sarebbero impossibili da gestire.
Per aggiungere un link dalla nostra pagina web ad un altra pagina, o sito, e' necessario utilizzare il Tag "<a href=link>...testo e/o immagine</a>", per esempio se volessimo linkare un sito web dal nostro sito, scriveremo:
<a href="http://www.linux.org">Sito web ufficiale del sistema operativo Linux</a>
otterremo:
Sito web ufficiale del sistema operativo Linux
Se facciamo clic su questo link andremo nel sito Linux, come specificato, ma questo andrà a sostituire il nostro sito, quindi perchè non farlo aprire in una nuova finestra, affinchè l'utente non vada via dal nostro sito? Questo è possibile tramite l'attributo "target", come nel seguente esempio:
<a href="http://www.linux.org" target="_blank">Sito web ufficiale del sistema operativo Linux</a>
e il risultato sara':
Sito web ufficiale del sistema operativo Linux
però in questo caso quando faremo clic su di esso si aprirà una nuova finestra con il link da noi specificato.
Se si vuole scrivere un testo corto ma allo stesso tempo si vuole fornire una descrizione del link, è possibile farlo con l'attributo "title", per esempio:
<a href="http://www.linux.org" target="_blank" title="Sito web ufficiale del sistema operativo Linux">Linux</a>
otterremo:
Linux
e quando andremo con il mouse sopra al link apparirà il testo specificato.
Ovviamente è possibile sostituire l'indirizzo web
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
con un file HTML del nostro sito che avremmo realizzato in precedenza, ad esempio "news.htm", oppure ad un'immagine, ad esempio "fiore.jpg", cliccando sul link si aprirà il collegamento specificato.E' possibile inoltre utilizzare un'immagine come link cliccabile, scrivendo il seguente codice:
<a href="http://www.linux.org" target="_blank" title="Sito web ufficiale del sistema operativo Linux"><img src="fiore.jpg"></a>
otterremo:
Questa è un'immagine cliccabile e funziona esattamente con il link testuale descritto sopra. Nel caso che si voglia rimuovere il bordo blu basta specificare "border=0" nel Tag dell'immagine.
Bookmark (segnalibri)
Un bookmark non è altro che un collegamento ad una sezione specifica della stessa pagina dove si trova il link, questo si ottiene inserendo un Tag particolare all'interno della pagina, cioe' "<a name=nome>", che ne segnala la posizione (come una bandierina o un segnalibro), poi utilizzando la solita sintassi per creare il collegamento.
Ad esempio, all'inizio di questa sezione, è stato inserito il tag:
<a name="collegamenti"></a>
quindi utilizzando il codice:
<a href="collegamenti">Torna all'inizio della sezione</a>
si otterrà:
Torna all'inizio della sezione
e cliccando su questo link l'utente verrà sbalzato all'inizio del capitolo.
Link ad email
E' possibile anche inserire un collegamento ad un indirizzo email, in modo che l'utente, cliccando sopra, si ritrovi con il proprio client di posta aperto pronto per spedire un messaggio di posta elettronica all'indirizzo email che verrà specificato, questo aggiungendo "mailto:" nell'url, come nell'esempio:
<a href="mailto:indirizzo@email">Contattaci</a>
si otterrà:
Contattaci
cliccando su questo link ci ritroveremo il nostro client di posta aperto con l'indirizzo email già preimpostato.
Target
L'attributo "target" è molto utile alla navigazione quando abbiamo la necessità di far aprire una pagina web o un URL esterno in una nuova finestra o in un determinato frame (che sono trattati più avanti).
Si utilizza così:
<a href="pagina.htm" target="nome">link</a>
Nel valore di "target" va specificato un nome di un frame, al clic quella determinata pagina si aprirà nel nome del frame specificato nel valore di "target, oppure in questo valore è possibile anche specificare una delle parole chiave predefinite per far aprire, per esempio, la pagina in una nuova finestra del browser. Le principali parole chiave sono:
"_self" per aprire la pagina nello stesso frame.
"_top" per annullare i frame.
"_blank" per aprire la pagina in una nuova finestra del browser.
c'era altro ma lascio stare
scusate per la guida cosi lunga ciao a tutti e scusate ancora
spero che pero per la sua lunghezza un po renda se vi piace alzatemi reputazione o abbasatemela scrivetemi se volete fare commenti ciaooooooooooooo
fonte:
asciitable e io (e un mix ) xD
Ultima modifica:
