Sei sulla pagina 1di 25

Modulo 1– Linguaggi Formali e Software per la elaborazione ed

impaginazione di testi

Internet, Web e Linguaggi del Web

Prof.ssa Beatrice Miotti


PARTE 1
Internet e reti di calcolatori
Internet e reti di calcolatori

• Una rete di calcolatori è costituita da dispositivi


capaci di comunicare tra loro
• 1969 - ARPANET è stato il primo tentativo

FONTE: http://robotlandblog.blogspot.com/2014/06/40-mappe-che-spiegano-internet.html
Caratteristiche di Internet

• INFRASTRUTTURA: Scambio di informazioni tra dispositivi tramite la commutazione di pacchetto


(opposta alla commutazione di circuito)
• PROTOCOLLO: Definizione delle regole di comunicazione (IP, TCP)
• TRASMETTITORI: I gateway sono dispositivi per la trasmissione di informazioni tra sottoreti

Insieme dei servizi supportati da Internet


Client/Server - Peer to Peer
Client/Server
- Client riceve input da utente
- Client invia input a Server
- Server elabora la richiesta e invia la risposta
- Client mostra a schermo la risposta

Da definire:
Mezzo di trasmissione (canale)
Protocollo di comunicazione (TCP/HTTP)

Peer to Peer
FONTE: https://sq.wikipedia.org/wiki/Modeli_Klient-Server
hZps://commons.wikimedia.org/wiki/File:P2P-network.svg
EVOLUZIONE DEL WEB

APPROFONDIMENTO: Sir Tim Berners-Lee


Image Credit: Research Hubs
STRUTTURA DEL WEB

• Si basa sulla architettura Client/Server


• Protocollo di comunicazione: HTTP
INDIRIZZI DEL WEB

•URL
http://hostname:porta/path?attributi#posizione

es:
http://codingerobotica.indire.it/documentazione/index.php?action=page#home
Tim Berners-Lee
ed il web prossimo venturo

https://www.ted.com/talks/tim_berners_lee_the_next_web?language=it#t-334574

FONTE:https://www.ted.com/talks/tim_berners_lee_the_next_web?language=it#t-334574
PARTE 2
Linguaggi del WEB
HTML - Struttura della pagina
Contenitore HTML
<TAG APERTURA>
<!DOCTYPE html>
</TAG CHIUSURA>
<html>
Intestazione
<head>
<meta charset=“utf-8”>
<title></title>
Javascript
<script></script>
Fogli di stile
<style></style>

</head>
Testo della pagina
<body>
Qua va il testo
</body>
</html>
HTML

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>La mia prima pagina html</title>
<script>
{Some Javascript stuff}
</script>

<style>
{Some style stuff}
</style>
</head>

<body>

Qua va il testo
</body>
</html>
HTML - Contenitori

Contenitori di testo:
- <div></div>
Creano uno spazio per il testo e poi lo mandano a capo
- <p></p>
- <span></span> Crea uno spazio per il testo ma senza mandarlo a capo

<html>
<head>
<title>Titolo della pagina...</title>
</head>
<body>

<p>Testo...</p>
<div>Testo...</div>
<div>Testo... <span>Testo...</span></div>

</body>
</html>
HTML - Header

HEADER: titoli, sottotitoli ecc.


- <hX></hX>
con X in (1,2,3,4,5,6)
<html>
<head>
<title>Uso degli header</title>
</head>
<body>

<h1>Testo di dimensione H1</h1>


<h2>Testo di dimensione H2</h2>
<h3>Testo di dimensione H3</h3>
<h4>Testo di dimensione H4</h4>
<h5>Testo di dimensione H5</h5>
<h6>Testo di dimensione H6</h6>

</body>
</html>
HTML - Stili del testo
Stili di testo:
logici:
fisici:
- grassetto: <strong></strong>
- grassetto: <b></b>
- corsivo: <em></em>
- corsivo: <i></i>
- sottolineato: <ins></ins>
- sottolineato: <u></u>
- barrato: <del></del>
- barrato: <strike></strike>
- apice/pedice: <sup></sup>; <sub></sub>

<html> file di esempio: stilitesto.html


<head>
<title>Uso degli stili</title>
</head>
<body>

<p>Paragrafo normale</p>
<p><b>Paragrafo grassetto</b></p>
<p><i>Paragrafo corsivo</i></p>
<p><u>Paragrafo sottolineato</u></p>
<p><strike>Paragrafo barrato</strike></p>
<p>testo <sup>apice</sup></p>
<p>testo <sub>pedice</sub></p>
</body>
</html>
HTML - Elenchi e Liste
Elenchi puntati anche annidati: Elenchi numerati anche annidati:
<ul> <ol>
<li>Primo elemento</li> <li>Primo elemento</li>
<li>Secondo elemento</li> <li>Secondo elemento</li>
<ul> <ol>
<li>Primo elemento del secondo livello</li> <li>Primo elemento del secondo livello</li>
<li>Secondo elemento del secondo livello</li> <li>Secondo elemento del secondo livello</li>
…. ….
</ul> </ol>
</ul> </ol>
<div><h1>Procedimento</h1>
<ol>
<li>Unire la farina con lo zucchero</li>
<li>Unire la buccia del limone grattugiata</li>
<li>unire il burro ed impastare con le mani</
li>
<li>aggiungere le uova</li>
<li>impastare fino ad ottenere una palla
liscia</li>
<li>prendere una tortiera da 24 cm
<ul>
<li>potete ungerla con burro ed
infarinarla </li>
<li>potete riverstirla di carta forno</
li>
</ul>
<li>stendere 3/4 di impasto e creare bordo</li>
<li>stendere marmellata a piacere</li>
<li>decorare con la pasta rimanente</li>
<li>infornare a 180 per circa 30 minuti</li>
</li>
</ol>
</div>
HTML - Esempio

<html>

<head>

<title>Uso degli header</title>

</head> file di esempio: contenitori.html


<body>

<h1>Prima pagina HTML</h1>

<div>Questo è un paragrafo della mia prima pagina HTML che ho

inserito dentro ad i tag div.<br>

Lorem ipsum dolor sit amet, </div>

<h2>Il mio lavoro</h2>

<div>

<p> Donec ac sodales quam. Ut vehicula rutrum tortor at dictum.

Aliquam erat volutpat […]</p>

<h3>La ricerca</h3>

<p>Donec ac sodales quam. Ut vehicula rutrum tortor at dictu.

[…]</p>

<h3>Attività di servizio</h3>

<p>Donec ac sodales quam. Ut vehicula rutrum tortor at dictum. </p>

<h3>Docenza</h3>

<p>Donec ac sodales quam. Ut vehicula rutrum tortor at dictum. </p>

</div>

</body>

</html>
PARTE 3
Tabelle e Ipertesti
HTML - Tabella

Tabella come struttura fisica per la disposizione ordinata di testo

Lunedì Mercoledì Giovedì


Mattina 9-12 8-10
Pomeriggio 14-18 15-17

Tabella come struttura logica che permette una organizzazione razionale dello spazio nella pagina

Immagine

Testo

Immagine

file di esempio: tabelle.html


HTML - Tabella

Tabella:
<table>
<thead>
<tr>
<th></th> …..
</tr
</thead>
<tfoot>
<tr>
<td></td> ….
</tr
</tfoot>
<tbody>
<tr>
<td></td> ….
</tr>
</tbody>
</table>

file di esempio: tabelle.html


HTML - Ipertesti (link, immagini, ancore)

Per inserire dei link esterni al testo:


<a href=“destinazione”>Vai alla destinazione</a>
dove “destinazione” è un indirizzo web ad esempio “www.google.it"

Per inserire link interni al testo:


<a name=“nome”>Elemento di ancora </a> per identificare un punto di ancoraggio a cui il browser deve puntare quando richiamato
<a href=“#nome”>link alla ancora</a> richiamo del punto di ancoraggio

Per inserire immagini nel testo:


<img src=“percorso del file”> (non ha chiusura)

file di esempio: ipertesti.html


HTML - Aggiungere stili

<tag style = “attribute: property;”></tag>

<head>
<title>Gli stili della pagina</title>
</head>
<body>

<div style="background-color: red;">Paragrafo rosso</div>


<p style="text-align: right;">Paragrafo allineato a destra</p>
<p style="font-family: 'Courier New', Courier, monospace; font-size: smaller;">Paragrafo font
diverso e più piccolo</p>
<p style="padding-top: 20px;">Paragrafo con margine superiore di 20px</p>
<img src="foto.jpg" style="min-height: 480px; min-width: 640px; width: 640px;height: 480px;">
<div style="margin-top:20px; border-style: solid; border-color: blue; border-width:
4px;">Suspendisse maximus pellentesque metus, a interdum nisi venenatis eu. Curabitur eu nisl
tellus. In magna felis, malesuada eu arcu sed, porta viverra ex. Fusce lacinia rutrum justo, eu
cursus mauris scelerisque eu.</div>
</body>
</html>

file di esempio: stili.html


HTML - Struttura della pagina
Contenitore HTML
<!DOCTYPE html>
<html>
Intestazione
<head>
<meta charset=“utf-8”>
<title></title>
Javascript
<script></script>
Fogli di stile
<style></style>
</head>

Testo della pagina


<body>
Qua va il testo
</body>
</html>
HTML - Fogli di stile
div {
background-color: red;
}

p {
font-family: 'Courier New', Courier, monospace;
font-size: smaller;
}

p {
text-align: right;
}

p {
padding-top: 20px;
}

img {
min-height: 480px;
min-width: 640px;
width: 640px;
height: 480px;
}

div {
margin-top: 20px;
border-style: solid;
border-color: blue;
border-width: 4px;
}

file di esempio: css.html e css2.html


Approfondimenti online

https://www.w3.org/TR/html52/
https://www.w3schools.com/html/html5_intro.asp

https://www.html.it/