Definisce una citazione Definisce una citazione corta 9

Il codice TESTO VISUALIZZATO inserisce un tooltip in una porzione di testo della pagina.

ELENCHI E LISTE

Gli elenchi e le liste sono principalmente di tre tipi 1. Elenchi ordinati 2. Elenchi non ordinati 3. Liste di definizione

ELENCHI NON ORDINATI Il codice di esempio di un elenco ordinato è il seguente

• Primo elemento
• Secondo elemento
• Terzo elemento

Ciascun elemento avrà un cerchietto nero alla sua sinistra. I tag utilizzati sono

e

per inizio e fine elenco e

e

per inizio e fine di ciascun elemento

ELENCHI ORDINATI Il codice di esempio di un elenco ordinato è il seguente

1. Primo elemento
2. Secondo elemento
3. Terzo elemento

10

I tag utilizzati sono

e

per l’elenco e

e

per ciascun elemento. In questo caso ciascun elemento della lista sarà preceduto da un numero. Si può inserire un elenco anche all’interno di un altro elenco in questo modo

1. Primo elemento
• Elemento 1.1
• Elemento 1.2
2. Secondo elemento
3. Terzo elemento

Con questo risultato

LISTE DI DEFINIZIONE Il codice di esempio di una lista di definizione è il seguente:

Caffè

macchiato e molto caldo

Succo di frutta

Albicocca e lime

e produce questo risultato

11

I tag utilizzati sono

e

per l’inizio e la fine della lista,

e

per l’inizio e la fine di ciascun elemento,

e

per l’inizio e la fine della descrizione del singolo elemento. Per visualizzare come il browser interpreta il codice hop utilizzato lo strumento online Real Time HTML Editor. Gli Elenchi possono essere personalizzati inserendo icone, numeri romani o greci e immagini di sfondo. Per approfondire l’argomento vi consiglio di leggere il post sugli stili degli elenchi.

TABELLE Le tabelle sono una parte importante dell’HTML e possono essere usate anche per fini diversi da quelli soliti come per esempio modo efficace per allineare immagini o bottoni. Il codice di esempio di una tabella è il seguente

Intestazione 1	Intestazione 2
Cella 1.1	Cella 1.2
Cella 2.1	Cella 2.2

Dove I tag utilizzati sono stati 1. 2. 3. 4.

e per l’inizio e la fine della tabella border per la dimensione in pixel del bordo cellspacing per la distanza in pixel tra cella e cella cellpadding per la distanza tra contenuto e bordo della cella 12

5. 6. 7. 8.

widht per la larghezza della tabella e definiscono l’inizio e la fine di una riga e per inizio e fine dell’header della tabella e per inizio e fine di una singola cella

Si possono usare anche i seguenti tag: 1. per la descrizione della tabella 2. gruppo di header nella tabella 3. gruppo di contenuti nella tabella Si possono inserire anche dei CSS usando l’attributo style per inserire colore di sfondo o per determinare i vari colori dei singoli elementi. Per facilitare l’utilizzo delle tabelle consiglio di usare un Editor come Windows Live Writer che consente di creare e personalizzare tabelle in modo molto semplice.

IMMAGINI

Le immagini si inseriscono nell’HTML con il tag che è vuoto cioè non ha bisogno di tag di chiusura. Ha cioè lo stesso comportamento di
che indica un salto di riga e

---

che invece introduce una riga orizzontale. Il codice da usare è il seguente 13

Dove deve essere inserito l’URL della immagine. Gli altri attributi sono opzionali ma molto importanti e riguardano i seguenti elementi 1. Alt è il testo alternativo vale a dire quello che si legge quando il browser non apre l’immagine 2. Title è il testo del tooltip che si visualizza quando si punta l’immagine con il mouse 3. Width e Height sono la larghezza e l’altezza. Nel caso ci sia un solo valore l’altro verrà di conseguenza mantenendo invariate le proporzioni della immagine Se si vuole mettere un collegamento a una immagine si usa il codice dove sono stati omessi per brevità alcuni attributi dell’immagine.

LAYOUT E TAG DIV

Il layout è uno degli aspetti più importanti di una pagina web. E’ essenziale il contenuto che vi è postato ma anche il modo in cui viene presentato. In questa sede non si possono certo affrontare tutte le tematiche che riguardano l’aspetto di una pagina. Se siamo utenti di piattaforme quali Blogger o Wordpress sono gli stessi modelli o temi che attraverso i CSS o fogli di stile determinano il layout del sito. C’è il codice per la forma e la dimensione dell’header, quello per la sidebar di sinistra e la sidebar di destra, quello per il footer e quello per lo sfondo. Nel caso in cui avessimo una pagina bianca in cui incollare codice senza che sia presente una sovrastruttura potremo creare un HTML di questo tipo

Titolo della pagina

MENU
GUIDE
HTML
CSS

Quì ci va il contenuto della pagina. Si possono usare tag di formattazione quali il grassetto o il corsivo. E' anche possibile usare dei fogli di stile per personalizzare il testo

14

Copyright © www.ideepercomputeredinternet.com

che produce questo risultato

Per dare un aspetto particolare a una parte del contenuto di una pagina si utilizza il tag

che permette attraverso appropriati fogli di stile di determinare sfondo, colori del testo, margini esterni (margin) e margini interni (padding). Ecco un esempio

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lorem turpis. Aliquam mauris quam, facilisis at egestas quis, fringilla id leo. Nam ac nisi nisl. Vestibulum in sagittis eros. Pellentesque gravida ornare ultrices. Integer at sapien sem. Curabitur at lorem risus, vitae mattis eros. Vestibulum suscipit elementum tortor at suscipit. Nam nec diam ac ante lobortis tincidunt sit amet ac sem. Vestibulum laoreet, elit ac laoreet imperdiet, justo diam porta felis, interdum congue turpis dolor vitae risus. Aliquam pellentesque eros non justo gravida et venenatis tortor hendrerit.

Che genera un blocco di testo con questo aspetto

15

MODULI E BOTTONI

Una delle ragioni dei successi del web è stata la possibilità di immettere o raccogliere informazioni tramite la compilazione di moduli o form. E’ evidente che questa sezione dell’HTML può essere solo accennata. La sintassi di un modulo generico è la seguente

elementi del modulo

Gli elementi del modulo possono essere text field, checkbox, password, radio button, submit button e molti altri ancora. Ci limiteremo a vedere dei semplici esempi usando il tag per gli elementi

Nome:
Cognome:

produce questo effetto

Si possono inserire degli attributi quali la larghezza che di default è di 20 caratteri. Il codice seguente

Password:

serve per la digitazione di password

16

mentre quello del tipo radio buttons permette di selezionare solo una tra varie scelte

Maschio
Femmina

in questo modo

I form del tipo Checkboxes permettono invece di selezionare più opzioni tra quelle proposte

Possiedo una bici
Possiedo una auto

che genera questo modulo

I moduli del tipo Drop Down List vengono creati con questo codice

FIAT BMW AUDI YAMAHA ONDA DUCATI 17

Che danno poi questa risultanza

Il tag

rappresenta l’inizio e la fine del modulo, e l’inizio e la fine di una lista e ciascun elemento della lista. Per i bottoni si può usare questo codice NOME DEL BOTTONE Se si vuole inserire anche un collegamento si può usare quest’altro dove gli attributi da inserire li abbiamo già trattati nei precedenti capitoli. Un modo per creare un bottone con un campo per inviare un dato a un server è quello di usare il codice seguente Indirizzo email:

Dove al posto del cancelletto si incolla l’URL della pagina a cui inviare il modulo. E’ evidente che se non si ha la disponibilità di un sito web a cui accedere questi codici non possono servire per ottenere informazioni ma solo come mera curiosità.

18

Concludo questo capitolo indicando alcuni tag che fanno parte della stessa categoria di

e . 1. 2. 3. 4.

Textarea per la creazione di aree di input Label che definisce una etichetta per un elemento input Fieldset per la creazione di un bordo intorno a un form Legend per la descrizione di un elemento fieldset

IFRAME

Gli IFrame sono degli elementi che servono per richiamare una pagina web all’interno di un’altra pagina web. In sostanza si crea una finestra all’interno della quale si può vedere un’altra pagina di cui si è immesso l’URL. Se ne possono settare le dimensioni e inserire altri attributi quali scrolling="no" per non mostrare le barre di scorrimento oppure frameborder="0" per eliminare il bordo. Gli IFrame vengono usati anche da servizi di video-sharing quali Youtube per incorporare il filmato nei siti web.

APPENDICE

In questa sezione inserirò un po’ alla rinfusa alcune cose che non ho avuto modo di affrontare nel resto dell’ebook ma che sono importanti anche per una conoscenza elementare dell’HTML

19

HTML5 E CCS3 Sono già disponibili le versioni più recenti dell’HTML, vale a dire HTML5, e dei fogli di stile cioè il CSS3. Si tratta della introduzione di nuovi tag che potranno via via essere interpretati dai vari browser per dare una esperienza di navigazione ancora migliore. Verranno notevolmente aumentate le prestazioni dei browser per quello che riguarda i filmati e verranno introdotte delle trasformazioni quali le rotazioni.

TEXTAREA La textarea è un codice che serve per visualizzare un’area con barre di scorrimento. Il codice di base è TESTO DA VISUALIZZARE NEL BOX

In cui si possono settare il numero delle colonne (50) e il numero delle righe (6) oltre a colore di sfondo, immagine di sfondo, grassetto e dimensione del testo.

COME ALLINEARE O CENTRARE UN TESTO E UNA IMMAGINE Per centrare un oggetto HTML quale un testo o un video si utilizzano due tag

in questo modo

Codice dell’elemento da centrare

Se si vuole allineare a sinistra si sostituisce center con left, se si vuole allineare a destra si mette right e infine si usa justify se si vuole giustificare un testo. Per centrare una immagine si usa quest’altro codice dove al solito codice è stato aggiunta la riga colorata di rosso.

20

CODICI DEI COLORI I codici dei colori sono individuati da una terna ordinata di numeri da 0 a 255 che ne indicano la quantità rispettivamente di Rosso, Verde e Blu. Per esempio (0,255,0) è il colore verde. Si può usare anche la notazione esadecimale in cui un colore è determinato da sei cifre esadecimale che vanno da 0 a F. Per esempio #7B0C15. Per saperne di più si può leggere il codice dei colori.

Ebook scritto da Ernesto Tirinnanzi - Firenze lì, 19 Settembre 2012 Copyright © http://www.ideepercomputeredinternet.com Il contenuto di questo libro può essere distribuito gratuitamente senza essere modificato soltanto citandone il nome dell’autore e linkando il sito web di cui sopra.

21