Crea sito

 

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

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

<body alink="green">
permette di cambiare colore quando
siamo posizionati su questo link

<body vlink="green">
cambia colore quando abbiamo visitato il link

<body background="sfondo.gif"  bgproperties=fixed>
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
<p>
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:
<p align=left>
<p align=right>
<p align=center>
<p align=justify>

<center>
non ha attributi e permetti di centrare il
testo. Il suo uso e' stato sconsigliato

<br>
il tag br è un tag di interruzione riga e va
usato senza tag di chiusura. Il suo
funzionamento è simile all'invio.

<hr>
Viene utilizzato per creare linee orizzontali
Attributi:
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

<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
 

          hello world (testo scorrevole con sfondo rosa)
         

        

 
  ciao (testo scorrevole di taglia 18 colore rosso)
 

 

 

 

 

 

 

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

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

 

 

 

 

 

 

 

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.