HTML  è l'acronimo di (Hyper-Text Markup Language)

Questo linguaggio utilizzza una serie di istruzioni o marcatori, detti TAG, per definire o marcare la struttura, l’impaginazione e la gestione di un determinato testo all’interno di una pagina WEB.

E' possibile scrivere un file in HTML utilizzando semplicemento un editor di testo non formattato come ad esempio blocco note di windows. L'unica cosa da ricordarsi è di salvare il file con estensione html in una cartella e poi riaprirlo con internet Explorer.

Il primo esercizio che vi propongo è la semplice scrittura della frase HELLO WORLD utilizzata da tutti gli informatici alla stesura del primo programma.

Copiate il testo seguente su un file nuovo di blocco note e riapritelo con Explorer.

Avete già fatto la vostra prima pagina web.

Dopo aver scritto questo file avrete la seguente scritta

Facciamo il seguente esercizio scrivendolo con blocco note

Orologio in HTML: copia il seguente codice se lo vuoi nel tuo sito:

 Il linguaggio HTML  permette di definire il FONT di un testo racchiudendoli nel tag doppio e specificando i suoi attributi.

Esempio :

sullo schermo del coputer si visualizzerà questo:

La scritta inserire frase viene riportata sul video con il carattere Arial di grandezza (size) 6 e di colore dato dal codice RGB #0000FF che corrisponde al colore blu.

Il FACE corrisponde al tipo di FONT da applicare se quel carattere non c'è il browser inserisce il carattere predefinito nel programma di navigazione.

Il SIZE sono le dimensioni da "1" a "7" oppure relativo aumentandolo (+ numeri) 0 diminuendolo (-numero) il valore di default che di solito è 4.

il COLOR ha il formato RGB "#rrggbb" dove rr,gg,bb, rappresentano i livelli ( 8 bit in esadecimale da == a FF) delle tre tinte fondamentali, rispettivamente Red, Green, Blu.

Esempi:

Rosso=    "#FF 00 00"

Verde=     "# 00 FF 00"

Blu=          "# 00 00 FF "

Bianco=   "# FF FF FF"

Nero=       "#00 00 00"

Azzurro=  "# 00 DD FF"

i livelli di grigio che corrispondono a una quantità uguale alle tre tinte primarie è:

Grigio= "# 88 88 88"

CARATTERI SPECIALI

In una pagina INTERNET scritta in HTML ci sono dei comandi speciali scritti in formato testo che comprende i codici ASCII.

Sorge quindi il proglema di inserire dei caratteri speciali , o di punteggiatura particolari. La soluzione è data dalle ENTITIES (entità) che sono dei costrutti sintattici che permettono di visualizzare correttamente simboli e caratteri speciali ai browser. Una entità è formata da 3 elementi:

& codice numerico ;

Vediamo adesso una tabella riassuntiva dei caratteri con il relativo codice entità, secondo la

TABELLA ISO-8859-1

Forse adesso viene da chiedersi: perchè usare questa tabella? ma che differenza c'è? 

Ecco la risposta: se nel testo scriviamo la parola "velocità" invece di "velocità" i browser visualizzeranno correttamente la parola - solo se - tramite intestazioni HTTP o codice HTML riceveranno l'informazione di caricare la giusta tabella-codici (in questo caso ISO 8859-1).

Viceversa, se il web server per qualche motivo invia una tabella-codici differente, o se il browser è settato su una tabella codici-differente da quelle che riproducono correttamente i simboli delle lingue dell'Europa Occidentale, allora è facilissimo che la "à" di "velocità" divenga un'altra cosa. 

Nota: questo discorso è sempre valido, ma in particolare nel caso in cui si ha l’abitudine di scrivere i testi delle proprie pagine web senza l’ausilio di editor WYSIWYG.

Infatti gli editor più diffusi, possono essere impostati per convertire automaticamente, nel codice html rilasciato, i simboli in entità carattere.

Ogni file, scritto in html, può essere suddiviso in una testa cioè HEAD e un corpo cioè BODY.

Queste parole chiavi devono essere racchiusi nei due tag uno di apertura   <    e uno di chiusura     />;

ESEMPIO:

il tag   <   apre ogni file in HTML   e significa l'inizio del file html

il tag    />      e' la  chiusura del file html;

TITLE  vuol dire che possiamo dare un tuitolo al nostro file

HEAD vuol dire testata del file

BODY corpo del file

FONT  selezione del carattere (ESEMPIO ARIAL, TIMES NEW ROMAN, TAHOMA, VERDANA, VIVALDI,...)

COLOR selezione del colore

SIZE selezione della taglia o grandezza del carattere

BGCOLR seleziona il colore dello sfondo

link permette di dare un colore alla
nostra "parola calda",
se questo attributo non viene esplicitato per
default abbiamo il colore blue

permette di cambiare colore quando
siamo posizionati su questo link

cambia colore quando abbiamo visitato il link

permette di dare allo sfondo una posizione
fissa rispetto allo scroller (barretta che
permette lo scorrimento della pagina)

<font>   </font>
il tag "font" ha la funzione di definire il
carattere, il colore e la grandezza del testo
Gli attributi di "font" sono:
<font face="arial" size=5  color"red">
face = tipo di carattere
size = grandeza carattere (da 1 a 7...
                           per default e' 3)
color = colore carattere (o nome del colore o
                          esadecimale)

<b>testo grassetto   </b>
b = bold (grassetto)

<i>   testo corsivo  </i>
i = italic

<u>testo sottolineato</u>
u = underline

<strike>testo barrato</strike>

^apice

_pedice

TAG LOGICI
<comment>
permette di inserire commenti all' interno
del codice html, il browser durante la lettura
della pagina ignora il testo compreso tra i 2
tag

<address>
permette di contrassegnare le info che
indicano un indirizzo, una firma o l'autore
della pagina. Di solito viene utilizzato in
fondo al documento e il testo viene
visualizzato in corsivo

TAG DI ALLINEAMENTO DEL PARAGRAFO:

il tag p definisce un paragrafo del testo in una nuova riga e indica al browser come allinearlo all'interno del documento
Attributi di p:

align="left"

align="right"

align="center"

align="justify"

il tag <center> non ha attributi e permetti di centrare il testo, ma il suo uso e' stato sconsigliato

il tag br è un tag di interruzione riga e va usato senza tag di chiusura. Il suo
funzionamento è simile al tasto invio, dato sulla tastiera, per andare su una nuova linea.

il tag HR

Viene utilizzato per creare linee orizzontali
Attributi del tag HR:
align ("center","right","left")
size   definisce l'altezza della riga in pixel
width   definisce la lunghezza orizzontale della linea 
color  definisce il colore della linea
noshade se presente elimina l'effetto 3d della linea, se omesso produce tale effetto

Il tag marquee

ci permette di far scorrere il testo
Attributi:
bgcolor  da un colore al testo
height   altezza del testo
wieth    larghezza del testo
hspace   spazio libero ai lati
vspace   spazio libero sopra e sotto
behavior=scroll    ci permette di spostare il testo da dx a sx
behavior=slide     fa sparire il testo verso destra
behavior=alternae  rimbalza da dx a sx

CREARE ELENCHI PUNTATI E NUMERATI
<ol>
gli elenchi numerati sono costituiti dal tag
ol. All'inizio di ogni voce del menù si apre
<li>
Nel tag ol esistono due attributi:
type = 1 (1,2,3...)     
type = A (A,B,C...)
type = a (a,b,c...)
type = I (I,II,III)

start = 3   ci permette di sceglire da dove
            voglio far partire il mio elenco

<ul>
usato per gli elenchi puntati
per creare i punti si usa sempre <li>
Attributi:
type=disc (default) punti rotondi pieni
type=circle         punti rotondi vuoti
type=square         punti quadrati pieni

<img>
usato per inserire immagini all'interno di un documento
html la corretta sintassi è <img scr="immagine.jpg">
indica il file o il percorso dove va a recuperare
l'immagine
attributi:
ALIGN   definisce la posizione dell'immagine
        rispetto al testo 
align="left" a sinistra
align="right" a destra
align="top" allinea la prima riga di testo con il bordo
            superiore dell'imm all'inizio di essa
align="middle" allinea la prima riga di testo con il centro
               dell'imm
align="botton" allinea la prima riga di testo con il bordo
               inferiore dell'imm
ALT="testo" permette di inserire un testo alternativo
WIDTH="valore" larghezza imm
HEIGHT="valore" altezza imm
BORDER="valore" assegna un bordo all'imm. I valori sono
                numerici ed espressi in pixel. per default
                il valore é 0 se l'imm è un link il valore
                per default è 1
definiscono la distanza in pixel tre l'imm e gli elementi
che lo circondano
VSPACE="valore" distanza lat superiore inferiore
HSPACE="valore" distanza destra sinistra

<a>
questo tag ci permette di creare i link (a=ancoraggio)
Attributi(obbligatori):
<a href="www.marconi.it">visita il sito itis</a> vai al
sito dell'itis
<a href="pag2.html">clicca qui</a>   vai a pag 2

link interno alla stessa pag html
<a name="link">....</a> documento da raggiungere
<a name="#link">...</a> punto di partenza

In questo nuovo esercizio vogliamo far comparire sullo schermo un testo in grassetto colore blu  taglia 12 (size 12) e un testo scorrevole con sfondo rosa, e un altro testo scorrevole di colore rosso di taglia 18 (size 18).

Come prima copiate su blocco note il testo seguente, di cui potete scaricare il PDF;

 salvate il file con estensione html, e riaprite il file salvato con explorer.

Vedrete l'effetto del testo scorrevole seguente e il relativo sfondo rosa.

TESTO grassetto colore blu  taglia 12
 

          hello world (testo scorrevole con sfondo rosa)
         
        

 
  ciao (testo scorrevole di taglia 18 colore rosso)
 

Vediamo adesso come variando solo alcuni tag possiamo modificare il testo scorrevole.

In questo esercizio ho modificato le frasi da visualizzare e ho aggiunto il tag br
cioè break per andare a capo.

    
         
                   SITO ELETTRONICADOC
   (testo scorrevole in grassetto di colore blu  SIZE 6)
       
       
                      

                   
                    HELLO WORLD

                   (testo NON scorrevole di colore GIALLO in grassetto SIZE 4)
                   
               

                    Hello World 2
               
(senza grassetto)
               

                   
         

    
    
                 BENVENUTI
              

                  (testo  scorrevole di colore rosso in grassetto SIZE 6)
 
        

Prova di scrittura con colori differenti

ELETTRONICADOC

           sito Web

                 di
                
Maria Rosa Malizia

                    BENVENUTO

FTP significa File Transfert Protocol e indica un protocollo per il trasferimento file utilizzato su internet, oltre ai programmi stessi impiegati per trasferire i file con questo protocolllo.

Infatti un client FTP permette agli utenti che hanno acquistato dello spazio web di pubblicare le proprie pagine web sul server, e può essere utilizzato anche per prelevare da server di internet file di vario genere:

--> programmi

--> documenti

--> grafici

--> immagini

--> musica

--> filmati e così via

Alcune versioni di FTP sono facili da utilzzare e si scaricano gratuitamente da internet.

Filezilla (disponibile anche in italiano) è un client FTP semplice e completo. Può gestire trasferimenti simultanei, in upload (invio) e download (ricezzione) di file, cartelle o directory e interi siti; supporta il ripristino dei trasferimenti interrotti.

Quarto esercizio sul linguaggio HTML


Autore Malizia Maria Rosa

Quarta Lezione
 

Facciamo una tabella con tre righe e tre colonne.


Utilizziamo il tag TABLE dove TR vuol dire table row cioè riga della tabella,

mentre TD vuol dire table date cioè dato della tabella.



TABELLA: