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
Esercizio
Facciamo il seguente esercizio scrivendolo con blocco note
Esercizio
Come Inserire un orologio nel sito personale
Orologio in HTML: copia il seguente codice se lo vuoi nel tuo sito:
Rome |
Il linguaggio HTML per i siti WEB
Font dei caratteri
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"
Colori RGB
Colori con la lettera A
tabella ISO-8859-1
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.
Istruzioni del linguaggio HTML
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
Istruzione body
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)
Istruzione FONT
<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>
<sup> apice </sup>
<sub> pedice </sub>
TAG LOGICI
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
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
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
Inserire immagioni
<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
INSERIRE LINK
<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
Primo esercizio con testo scorrevole
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.
Esercizio testo scorrevole secondo esempio
TESTO grassetto colore blu taglia 12
Secondo esercizio con testo scorrevole
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)
Esercizio 3
Prova di scrittura con colori differenti
ELETTRONICADOC
sito Web
di
Maria Rosa Malizia
BENVENUTO
Programmi FTP
Esercizio 4: Creare una tabella
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:
computer | Software | frequenza |
compaq | windows XP | 4GHz |
Pachard Bell | windows 95 | 2MHz |