LEZIONE 3 L'HTML di base e esercitazioni Questa lezione completa le nozioni di HTML anticipate nelle lezioni 1 e 2, definisce a carattere generale i TAG più comuni e propone una esercitazione che può servire da spunto per eseguire "esperimenti" con le prime informazioni riguardo l'HTML. Il linguaggio HTML verrà approfondito nelle successive lezioni. HTML DI BASE IMPOSTARE MARGINI E COLORI DELLA PAGINA Per una pagina è possibile impostare sia i margini, ovvero la distanza degli elementi dal bordo del browser, che alcuni aspetti cromatici. In questa lezione vedremo velocemente gli aspetti di definizione per gli elementi della pagina, perché verranno approfonditi e messi in pratica durante le prossime lezioni. Le seguenti impostazioni relative alla pagina vengono scritte come attributi all'interno del tag di apertura di BODY. Esempio La sintassi che si untilizza è la seguente: nome dell'attributo = "valore" MARGINI Per inserire i margini scrivere nel body: leftmargin="1" topmargin="1" marginwidth="1" marginheight="1" COLORE DI SFONDO Per inserire il colore di sfondo della pagina si digita nel body: bgcolor="colore" I colori utilizzano valori esadecimali (esempio: #ffff99) in modo da regolare la definizione del colore a nostro piacimento . Il carattere # (detto cancelletto) significa che i caratteri successivi vanno considerati valori esadecimali. La scala esadecimale va dal numero 0 a 9 e dalla lettera a fino alla f . (vedi capitolo sui colori di questa lezione) IMMAGINE DI SFONDO La sintassi è la seguente: altrimenti si deve specificare il percorso . Esempi di Margini, colore e immagine di sfondo Gli attributi sul BODY possono essere anche utilizzati insieme: COLORI I colori vengono referenziati utilizzando il modello RGB secondo la seguente sintassi: #RRGGBB dove RR ,GG e BB sono numeri di due cifre in notazione esadecimale che rappresentano rispettivamente i valori delle componenti rossa, verde e blu del colore. Con questa notazione è possibile rappresentare 16777216 colori diversi. Esistono 16 colori predefiniti dei quali è possibile scrivere il nome anziché il valore esadecimale e sono: Black = "#000000" Green = "#008000" Silver = "#C0C0C0" Lime = "#00FF00" Gray = "#808080" Olive = "#808000" White = "#FFFFFF" Yellow = "#FFFF00" Maroon = "#800000" Navy = "#000080" Red = "#FF0000" Blue = "#0000FF" Purple = "#800080" Teal = "#008080" Fuchsia = "#FF00FF" Aqua = "#00FFFF" Per gli altri colori sarà necessario, invece, inserire il valore esadecimale. I TAG HTML Vengono di seguito elencati i principali TAG relativi al linguaggio HTML TAG DI BASE Definisce un documento Html. Definisce le informazione di intestazione come il titolo. Definisce il titolo che appare sulla barra della finestra di browser. Definisce il corpo del documento Html. CORPO DI UN DOCUMENTO HTML È possibile anche qui fare un esempio esplicito del tipo voglio dare alla mia pagina come colore di sfondo il blue. Definisce il colore di sfondo del documento. Definisce l'immagine come sfondo. Definisce il colore del testo del documento. Definisce il colore dei collegamenti ipertestuali. Definisce il colore dei collegamenti ipertestuali attivi. Definisce il colore dei collegamenti ipertestuali già visitati. FORMATTAZIONE

Definisce un nuovo paragrafo.

Allineare un paragrafo a destra, sinistra e a centro. (left, center, right)
Inserire una interruzione di riga.

Inserire una riga orizzontale.
Indentare il testo da entrambi i lati. TESTO
Testo preformattato. Da

a
Definisce i titoli. Testo in grassetto. Testo in corsivo. Citazione, generalmente in corsivo. Enfatizzare una parola (grassetto o corsivo). Enfatizzare una parola (grassetto o corsivo). Testo pedice. Testo apice.
Tag usato per allineare grossi blocchi di testo. CARATTERI Attributi dei caratteri. Grandezza dei caratteri con valori da 1 (più piccolo) a 7 (più grande). Tipo di caratteri. Colore dei caratteri. ELENCHI
Elenco definizioni.
Precede ogni termine di definizione.
Precede ogni definizione.
Elenco ordinato. Elenco non ordinato.
    • Precede ogni voce dell'elenco. IMMAGINI Inserire un'immagine. testo Immagine con testo descrittivo. Allineare l'immagine. Grandezza del bordo attorno all'immagine. Altezza dell'immmagine. Larghezza dell'immmagine Spazio orizzontale attorno all'immagine. Spazio verticale attorno all'immagine Mappare un'immagine. COLLEGAMENTI Origine e destinazione di un collegamento ipertestuale. Collegamento ipertestuale. Collegamento ad un'ancora nel documento stesso. Collegamento ad un'ancora in un altro documento. Ancora in un documento. Collegamento ad una e-mail. TABELLE
    Creare una tabella. Grandezza del bordo della tabella.
    Spazio tra le celle di una tabella.
    Spazio tra il bordo e il contenuto delle celle di una tabella.
    Altezza di una tabella.
    Larghezza di una tabella. Righe di una tabella. Tabella d'intestazione con il testo in grassetto, allineato al centro. Colonne di una tabella. o o
    Estendere la cella attraverso il numero di colonne specificato Estendere la cella attraverso. Forzare il testo di una cella affinché non vada mai a capo.
    Allineare il contenuto di una cella (destra, sinistra o centro).
    Allineamento verticale di una cella a centro, sotto o sopra. CARATTERI SPECIALI Alcuni caratteri non possono essere scritti direttamente ma devono essere dati come una sequenza di caratteri (con codici alfanumerici preceduti dal simbolo & e seguiti dal ; e sono detti escape sequence), che il browser traduce in un determinato carattere ASCII. Per OTTENERE questo simbolo Scrivere questo codice < < > > & & " " à à è è é é ì ì ò ò ù ù À À È È É É Ì Ì Ò Ò Ù Ù ß ß (r) ® (c) © € € ± ± ° ° ä ä ë ë ï ï ö ö ü ü Ä Ä Ë Ë Ï Ï Ö Ö Ü Ü ã ã ñ ñ õ õ Ã Ã Ñ Ñ Õ Õ Œ å Ç Ç Nelle prossime lezioni avremo modo di utilizzare tutte le informazioni generali riguardo l'HTML. ESERCITAZIONE Copiare all'interno di un file di testo creato con un blocco note il seguente codice, salvare il file come .html e aprirlo con il browser per verificarne il risultato. Aggiungere alla prima pagina web così creata ulteriori TAG o altri elementi traendo spunto dalla presente lezione. Corso HTML IRiFoR

    Titolo realizzato usando il TAG H1

    Testo formattato in paragrafo

    Il principale problema dei non vedenti è quello della integrazione completa nel tessuto sociale, e tutti gli sforzi dell'Unione Italiana Ciechi si sono diretti per il raggiungimento di questo obiettivo.

    Il primo sforzo è stato per l'integrazione scolastica, togliere cioè i giovani minorati della vista dalla emarginazione degli istituti speciali, per immetterli nelle scuole normali. I risultati, per la verità, non sono ancora ottimali, poichè gli intoppi burocratici rendono ancora troppo difficile la piena disponibilità dei supporti necessari: gli insegnanti di sostegno non sono nel numero necessario, l'assistenza domiciliare è carente, i libri in Braille vengono forniti spesso ad anno scolastico inoltrato, e la loro qualità non è delle migliori.

    Nota come sono scritti nel codice i caratteri accentati e confrontali con la visualizzazione nel browser

    Gli elenchi

    Elenco non ordinato
    • Elenco non ordinato, prima voce
    • Elenco non ordinato, seconda voce
    • Elenco non ordinato, terza voce
    Elenco ordinato
    1. Elenco ordinato, prima voce
    2. Elenco ordinato, seconda voce
    3. Elencoordinato, terza voce