HTML e CSS Prima Lezione

 HTML è l'acronimo di Hypertext Markup Language.

Hypertext
Significa ipertesto e indica del testo con caratteristiche speciali, elementi grafici
e collegamenti ad altri documenti

Markup
Indica l'aggiunta di simboli a testo ordinario. Ogni simbolo usato per
contrassegnare (markup) del testo, è un comando HTML che indica al
browser come visualizzare il testo.

Language
Significa linguaggio e si riferisce a HTML

 Il linguaggio HTML non è un linguaggio di programmazione!

Esso non può prendere decisioni, non può compiere iterazioni e non è in grado
di fare cose come i linguaggi di programmazione.
Si tratta quindi di un linguaggio di contrassegno, che permette di indicare come
disporre gli elementi all'interno di una pagina: le indicazioni vengono date
attraverso degli appositi marcatori, detti “TAG".
Un documento HTML è detto trasportabile (“non sempre”) perché esso una volta
scritto verrà visualizzato sempre allo stesso modo con qualunque browser e
su qualsiasi computer.

Per iniziare il ciclo di sviluppo di una pagina web abbiamo bisogno
essenzialmente di due cose nella nostra macchina:
 Un normale Browser come “Google Chrome”
 Un qualsiasi Editor di Testo come “WordPad”
o magari consiglio “Notepad++” reperibile in rete gratuitamente.

I documenti (o File) digitati in linguaggio HTML hanno una propria estensione che
può essere, come le vecchie pagine web, .htm o, come le odierne pagine
web, .html.
In ogni caso che esse siano .htm o .html i browser di oggi leggono ugualmente e
nello stesso modo le pagine web.

Un TAG è un insieme di simboli definiti in HTML con un significato speciale.
I TAG iniziano con il simbolo di minore <, sono seguiti da una parola riservata e
terminano con il segno di maggiore >.

Esempio:
<title> <h1><br></h1></title>

L’HTML è case unsensitive cioè indipendente dal formato.
Nei TAG non c'è distinzione tra lettere maiuscole e minuscole; quindi, i TAG:
<Title>, <title> e <TITLE>
sono equivalenti.

Il linguaggio HTML si è evoluto dal 1997 in XHTML (eXtensible HTML);
per scrivere un documento HTML che sia “ben formato” anche per XHTML
occorre rispettare le seguenti regole:
 i nomi dei TAG devono essere scritti in minuscolo;
 i nomi degli attributi dei marcatori devono essere scritti in
minuscolo;
 i valori degli attributi devono essere sempre racchiusi tra
doppie virgolette.

Esistono due tipi di TAG:
 I TAG di inizio che servono per attivare un’opzione;
 I TAG di fine che servono per concludere un’opzione.

I TAG di fine a differenza di quelli di inizio sono preceduti da una barra “/”.
Esempio:
<title>Questo è un titolo</title>

I TAG possono anche essere usati insieme.
Esempio:
Marco <b><i> mangia </i></b> la mela.
La parola “mangia” verrà visualizzata in grassetto e in corsivo.
<b>= Grassetto; <i>= Corsivo;

Il browser visualizza all’utente solo il significato del TAG, quindi se inseriamo un
TAG sbagliato esso non verrà applicato.

Esempio:
La mela mangiata da <maiusc>Marco<maiusc> è marcia.

In questo caso la parola “Marco” non verrà visualizzata in maiuscolo perché
quel tipo di TAG non esiste.

TAG Significato
<HTML> Si sta iniziando a scrivere una pagina HTML.
<HEAD> Si sta scrivendo nell’intestazione (Head) della pagina.
<TITLE> Si sta scrivendo il titolo della pagina. Posizionarlo dopo l’Head.
</TITLE> Finisco di digitare il titolo.
</HEAD> Finisco di scrivere nell’intestazione.
<BODY> Si sta scrivendo nel corpo della pagina cioè il testo.
<H1> Si sta scrivendo un titolo con grandezza piuttosto alta nel body.
</H1> Finisco di scrivere il titolo nel body.
</BODY> Finisco di scrivere nel corpo.
</HTML> Fine della digitazione della pagina HTML.

Molti TAG di inizio possono essere supportati e arricchiti con degli attributi i quali
agiscono sul TAG stesso.
Essi vengono definiti nel TAG prima del simbolo >.

Esempio:
<body “attributo”> Qui ci scrivo altri TAG </body>

Come potete notare nella chiusura del TAG non c’è bisogno che gli attributi
vengano ripetuti cosi succede per tutti i TAG del linguaggio HTML.

Esistono attributi fondamentali ed essenziali dedicati proprio al TAG <body>,
vediamone alcuni:
 Il TAG “bgcolor”
 Il TAG “background”
 Il TAG “text”

I TAG “bgcolor” e “text” possono assumere valori espressi sia con in nomi dei
colori (in inglese):
 “Blue”, “Black”, “White” ecc.

Sia in esadecimale del tipo #rrggbb (Red-Green-Blue)
 “#FFFFFF”= Azzurro Chiaro, “#000000”= Nero, ecc.

<body bgcolor=“valore”>
Assegnando il valore a questo attributo daremo un colore allo sfondo della
nostra pagina web.
Esempio:
<body bgcolor=“blue”>
Visualizzeremo una pagina in questo modo:

<body background=“percorsoimmagine.jpg”>
Con questo TAG possiamo inserire una immagine come sfondo semplicemente
indicando il suo percorso sul computer (se lavoriamo in locale) o sul server
(se lavoriamo in remoto).
Esempio:
<body background=“immaginisfondo.jpg”>
Visualizzeremo una cosa del genere:

<body text=“valore”>
Assegnando il valore all’attributo test daremo il colore del valore inserito a tutto il
testo presente nel body.
NB: Usiamo questo attributo poiché il colore di default del testo in una pagina è
nero.
Esempio:
<body bgcolor=“blue” text=“white”>
La nostra pagina risulterà così:

Per differenziare le dimensioni dei caratteri nei titoli si usa il TAG
<hn> Titolo</hn>
Dove “h” sta per Header (intestazione) e “n” indica invece il codice numerico
corrispondente alla dimensione del carattere. Ecco un esempio di titoli in
ordine di grandezza decrescente:

TAG Significato
<h1> testo </h1>
testo
<h2> testo </h2>
testo
<h3> testo </h3> testo

A proposito di leggibilità del nostro codice, un’altra buona norma è quella di
inserire dei commenti nei punti più significativi. Sono informazioni significative
per il WebMaster ma invisibili dal browser.
Un commento può essere inserito nel TAG <!‐‐ commento ‐‐>.

Esempio:

Creare una pagina HTML che abbia come titolo: “Questa è la mia prima
pagina”, e come titolo principale nel corpo la seguente stringa: “Ciao,
Mondo. Questa è la mia prima pagina!”.
Lo sfondo deve essere “giallo” e i testi devono essere “rossi”.

HTML e CSS Prima Lezione

More Related Content

What's hot

Similar to HTML e CSS Prima Lezione

HTML e CSS Prima Lezione