Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni...

Corso di Webmaster

HTMLHyperText Markup Language

Linguaggio per marcare un’Ipertesto

Prof. Molteni Jonathan

.HTM o .HTML e le pagine Web

Il linguaggio HTML è interpretato: il codice sorgente resta sempre leggibile e modificabile e viene interpretato “al volo”, volta per volta, dal programma utilizzato per leggere il file (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 fileIl browser Web riceve la pagina HTML, legge i

riferimenti, chiede e riceve i file aggiuntivi, infine visualizza il tutto

tagSi usano particolari marcatori, tag, inseriti

nel testo, per indicare al browser Web come deve impaginare e visualizzate la pagina Web nel suo insieme

Il browser Web interpreta i tag, formatta la pagina Web e ne genera la rappresentazione grafica: il rendering

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 testoSalvate il file (con estensione .html o .htm)Aprite il file con un browser Web

La sintassi dei tagQuasi tutti i tag sono composti da un tag di

apertura eda 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>

HeadNell’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;

BodyIl 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 ilmouse) 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>

ElenchiI 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 tabelleIl 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 linkServono per creare connessioni navigabili

Link interni alla stessa paginaLink 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 dueAncora: <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 commentiPer 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 SheetsFormattazioni logica e fisica, separateUso due file:

File HTML contiene la formattazione logicaFile 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; line-height: 19px;font-family: Verdana, Geneva, Arial, sans-serif;text-align: center

}

DOCUMENTI SENZA CORPO: I FRAMEPag 55Pag 70 tag

http://www.w3.org/MarkUp/Guide/Style.html

http://www.w3.org/MarkUp/Guide/Advanced.html

Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni...

Documents

Transcript of Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni...