Mod1 WEB

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>

</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/

Mod1 WEB

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Mod1 WEB

Caricato da

Copyright:

Formati disponibili

Modulo 1– Linguaggi Formali e Software per la elaborazione ed

Internet, Web e Linguaggi del Web

Prof.ssa Beatrice Miotti

• Una rete di calcolatori è costituita da dispositivi

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

Insieme dei servizi supportati da Internet

APPROFONDIMENTO: Sir Tim Berners-Lee

• Si basa sulla architettura Client/Server

HEADER: titoli, sottotitoli ecc.

<h1>Testo di dimensione H1</h1>

<html> file di esempio: stilitesto.html

<title>Uso degli header</title>

</head> file di esempio: contenitori.html

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

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

Aliquam erat volutpat […]</p>

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

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

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

Tabella come struttura fisica per la disposizione ordinata di testo

Lunedì Mercoledì Giovedì

file di esempio: tabelle.html

file di esempio: tabelle.html

Per inserire dei link esterni al testo:

Per inserire link interni al testo:

Per inserire immagini nel testo:

file di esempio: ipertesti.html

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

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

file di esempio: stili.html

Testo della pagina

file di esempio: css.html e css2.html

Potrebbero piacerti anche