1 Politecnico Politecnico di Milano di Milano Esercizi Esercizi Introduzione Introduzione all’HTML all’HTML -2- Il WWW Il WWW Il World Wide Web: una “rete” di pagine connesse tra loro e distribuite su diverse macchine Il server Web contiene le pagine Web da visualizzare Il client (il browser Web) visualizza le pagine Web Rete Client Server Web www.elet.polimi.it www.elet.polimi.it/docenti.htm
17
Embed
Esercizi - Politecnico di Milanocorsi.dei.polimi.it/infoA/Slide13.pdf1 Politecnico di Milano Esercizi Introduzione all’HTML-2-Il WWW Il World WideWeb: una “rete” di pagine connesse
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
PolitecnicoPolitecnicodi Milanodi Milano
EserciziEsercizi
IntroduzioneIntroduzione all’HTMLall’HTML
-- 22 --
Il WWWIl WWW
Il World Wide Web: una “rete” di pagine connesse tra loro e distribuite su diverse macchine
Il server Web contiene le pagine Web da visualizzare
Il client (il browser Web) visualizza le pagine Web
Rete
ClientServer Web
www.elet.polimi.it
www.elet.polimi.it/docenti.htm
2
-- 33 --
L’HTML e le pagine WebL’HTML e le pagine Web
Il linguaggio HTML (Hyper-Text Markup Language) serve per definire l’impaginazione e l’aspetto grafico delle pagine Web
Non è un linguaggio di programmazione!E’ un linguaggio di impaginazione detto “a marcatura”
Una pagina HTML è un file composto da puro testoLo standard supporta diverse codifiche
La più comune: ISO 8859-1 (è una variante ASCII)
Elementi quali immagini, suoni, filmati, ecc. sono contenuti in file separati
Pagina Web: pagina HTML + ulteriori file (immagini, suoni, ecc.)
-- 44 --
I I tagtag. Il processo di . Il processo di renderingrendering
Si usano particolari comandi (detti tag), inseriti nel testo, per indicare al browser come deve impaginare e visualizzate la pagina Web nel suo insieme
Il browser interpreta i tag, formatta la pagina Web e ne genera la rappresentazione grafica (il rendering)
HTML
Il motore di renderingdel browser
Immag.audio,ecc.
La finestra del browser
3
-- 55 --
La mia prima pagina HTMLLa 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
-- 66 --
La mia prima pagina HTMLLa mia prima pagina HTML
Non va a capo!
Titolo
Nome del file
4
-- 77 --
La sintassi dei La sintassi dei tagtag
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>
-- 88 --
Formattazione “logica”Formattazione “logica”
L’idea iniziale dell’HTML: esprimere il significato “logico” del testo, non la rappresentazione grafica
La traduzione verso una certa rappresentazione grafica è lasciata interamente al browser
Per alcuni di questi tag è possibile specificare degli attributi.
5
-- 99 --
Formattazione “logica”Formattazione “logica”
<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 Ponzio 34/5,
Milano </address></p></body>
</html>
-- 1010 --
Formattazione “logica”Formattazione “logica”
6
-- 1111 --
Formattazione “fisica”Formattazione “fisica”
Specifica la rappresentazione graficaAlcuni tag:
Neretto: <b>Italico: <i>Apice: <sup>Pedice: <sub>Barrato: <del>Sottolineato: <u>Forza il ritorno a capo: <br>Specifica il carattere tipografico: <font>
Gli attributi permettono di variare l’impaginazione standard: <h1 align="center">
-- 1212 --
Formattazione “fisica”Formattazione “fisica”
<html><head>
<title>Questo è un esempio </title></head><body bgcolor="yellow">