Corso di Webmaster
HTML
HyperText Markup Language
Linguaggio per marcare un’Ipertesto
Prof. Molteni Jonathan
.HTM o .HTML e le pagine Web
HTML linguaggio interpretato:
il codice sorgente sempre leggibile e modificabile
interpretato “al volo”, volta per volta, dal browser
linguaggio di impaginazione detto “a marcatura”
pagina Web: pagina HTML + ulteriori file (immagini, suoni,video
ecc.)
la pagina HTML contiene i riferimenti a questi file
il browser Web riceve la pagina HTML, legge i riferimenti, chiede e
riceve i file aggiuntivi, infine visualizza il tutto
marcatori, tag, inseriti nel testo, per indicare al browser Web come
deve impaginare e visualizzate la pagina Web
La mia prima pagina HTML
<html>
<head>
<title>Questo è un esempio</title>
</head>
<body>
Ciao! Questo è
un esempio di pagina HTML
</body>
</html>
Scrivete il file con un editor di testo
Salvate il file (con estensione .html o .htm)
Aprite il file con un browser Web
La sintassi dei tag
Quasi tutti i tag sono composti da un tag di apertura e
da un tag di chiusura:
<nome_tag>testo sul quale il tag agisce</nome_tag>
Es.: <title>Questo è un esempio</title>
Alcuni tag non hanno la corrispondente chiusura:
<nome_tag>
Es.: <br>
Per molti tag è possibile specificare degli attributi:
<nome_tag nome_attributo="valore_attributo">
Es.: <body bgcolor="red"> … </body>
Head
Nell’intestazione del documento vengono introdotti i tag
che identificano il titolo del documento e altre
informazioni facoltative circa la natura e il contenuto
della pagina
<META>: mediante questo tag e i suoi attributi si
possono specificare alcune caratteristiche della pagina,
tra cui le parole chiave relative ai contenuti del testo
utilizzate dai motori di ricerca per classificare il sito;
Body
Il corpo del documento ospita il contenuto vero e proprio
della pagina, quello che verrà visualizzato nella finestra del
browser
Il tag <BODY> può essere utilizzato in forma semplice
oppure se ne possono specificare attributi.
<BODY BGCOLOR=”#008000”>
<BODY TEXT=”#FFFF80”>
Attributi del Body
<BODY LINK=”#FFFF00”>: i link appaiono di colore
giallo;
<BODY ALINK=”#FF8000“>: i link attivi (nel
momento in cui li si seleziona con il
mouse) appaiono di colore arancione;
<BODY VLINK=”#808080”>: i link già visitati
appaiono di colore grigio.
<BODY BGCOLOR=”#008000” TEXT=”#FFFF80”
LINK=”#FFFF00”>
<BODY BACKGROUND=”.../immagine.gif ”>
Esempio
<html>
<head>
<title>Questo è un esempio</title>
</head>
<body>
<h1>Titolo principale</h1>
<h2>Titolo secondario</h2>
<p>Testo all'interno <em>di un</em>
<strong>paragrafo</strong></p>
<p>Altro paragrafo</p>
Testo al di fuori di un paragrafo
<p>indirizzo: <address>Via Italia 34/5,
Como</address></p>
</body>
</html>
STRUTTURA “A MATRIOSKA”
I comandi sono contenuti l’uno dentro l’altro e ognuno va a influenzare solo la
porzione di testo racchiusa tra il rispettivo tag di apertura e quello di chiusura.
1. <I> = tutto quello che verrà scritto da qui in poi sarà in corsivo;
2. <U>= tutto quello che verrà scritto da qui in poi sarà sottolineato;
3. <B>= tutto quello che verrà scritto da qui in poi sarà in grassetto;
4. </B>= qui finisce ciò che dev’essere visualizzato in grassetto;
5. </U>= qui finisce ciò che dev’essere visualizzato in sottolineato;
6. </I>= qui finisce ciò che dev’essere visualizzato in corsivo.
Es: Nel mezzo del <B><I>cammin</I></B> di nostra vita…
Es: <I>Nel mezzo del <U>cammin di nostra <B>vita</B></U></I>
Elenchi
I seguenti tag servono per specificare vari tipi di elenchi:
Elenco puntato: <ul>
<ul type="square">
<ul type="disc">
<ul type="circle">
Elenco numerato: <ol>
<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">
Ogni voce dell’elenco è racchiusa da <li>…</li>
Le tabelle
Il testo (e in generale qualsiasi elemento grafico)
può essere formattato sotto forma di tabella:
Tabella: <table>
Titolo: <th>
Riga: <tr>
Colonna: <td>
E’ possibile specificare alcuni attributi: spessore del
bordo, distanza tra le celle, margine ll’interno delle celle
(Vedi esempio: es04tabelle.html)
I link
Servono per creare connessioni navigabili
Link interni alla stessa pagina
Link tra pagine
Link: <a href="indirizzo">qualsiasi cosa</a>
Facendo click su qualsiasi cosa, il browser Web apre la pagina che si trova a
indirizzo
Indirizzo può essere una URL o un’ancora o una combinazione delle due
Ancora: <a name="nome">
Definisce una etichetta alla quale un link può puntare
Di solito è usata per far spostare il browser Web in un altro punto, all’interno
della stessa pagina che contiene il link
Vedi esempio: link.html
Le immagini
Includere immagini:
<img src="indirizzo e nomefile immagine">
Alcuni attributi permettono di modificare le dimensioni
dell’immagine:
<img src="a.gif" height="50" width="70">
<img src="a.gif" height="50%“ width="5%">
Caratteri speciali e commenti
Per inserire caratteri che non si trovano sulla tastiera, per es.
¥, Ç, Ø, .,… la sintassi è: &nome_carattere;
< <
> >
¥ ¥
e tanti, tanti altri…
Per inserire commenti:
<!– questo è un commento -->
Cascading Style Sheets
Formattazioni logica e fisica, separate
Uso due file:
File HTML contiene la formattazione logica
File CSS contiene la formattazione fisica: indica al browser Web
come visualizzare i tag logici
In questo modo è più facile cambiare la formattazione fisica
(lo stile) di una pagina HTML
Esempio CSS: pagina html
<html>
<head>
<title>Pagina con CSS</title>
<link rel="StyleSheet" href="stile.css" type="text/css">
</head>
<body>
<div class="headingscourse">
I.S.I.S Paolo Carcano
</div>
<div class="headingsgest">
Corso di WebMaster
</div>
<div class="headingsprof">
Prof. Jonathan Molteni
</div>
</body>
</html>
Esempio CSS: file stile.css
. .headingscourse{
color: #Red; font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 24px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center
}
.headingsgest{
color: #FF0099;
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 24px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center
}
.headingsprof{
color: #00ff00;
font-style: normal;
font-weight:
bold; font-size: 14px;
DOCUMENTI SENZA CORPO: I
FRAME
Pag 55
Pag 70 tag
http://www.w3.org/MarkUp/Guide/Style.html
http://www.w3.org/MarkUp/Guide/Advanced.html
Scarica
