Informatica per la comunicazione: il linguaggio HTML, seconda parte
Slide dalla Lumsa sul linguaggio HTML, seconda parte. Il Pdf, pensato per studenti universitari di Informatica, illustra concetti chiave come la dichiarazione DOCTYPE, la codifica UTF-8 e l'associazione delle regole CSS agli elementi HTML.
Mostra di più49 pagine
Visualizza gratis il Pdf completo
Registrati per accedere all’intero documento e trasformarlo con l’AI.
Anteprima
Lumsa: Informatica per la Comunicazione
Lumsa
Dipartimento di Scienze umane
Corso di studi in Scienze della Comunicazione, Marketing e Digital media
Informatica per la comunicazione
(Gruppi A-F e P-Z)
Il linguaggio HTML
(seconda parte)
Prof.ssa Alessandra Musolino
A.A. 2024-25
13/04/2025
HTML - testo- Liste - Link - Immagini
Informazioni per il Browser
1Informazioni per il Browser
. <! DOCTYPE html> : Dichiarazione, stringa di codice che apre il documento
HTML con una serie di informazioni tecniche (doc pubblico, versione, ... )
· Codifica UTF 8: perché il browser possa mostrare correttamente una pagina
HTML, deve conoscere la codifica dei caratteri o "charset" da essa utilizzata.
· È richiesto in particolare per le lettere accentate ed i caratteri speciali
< ! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
13/04/2025
HTML - testo- Liste - Link - Immagini
Link HTML
2LINK
· Elemento caratteristico dell'ipertesto con comportamento variabile come ad es.
· Indirizzamento:
· ad un altro punto della stessa pagina, precedente o successivo
· verso un sito web diverso da quello di partenza
· ad una pagina diversa ma appartenente al sito web di partenza
· Può aprire una nuova finestra del browser
· Se necessario si attiva l'apertura dell'applicazione per la gestione della
risorsa linkata, come ad esempio il programma di posta elettronica per
l'invio di messaggi, oppure attiva il download della risorsa.
13/04/2025
HTML - testo- Liste - Link - Immagini
Sintassi dei Link
3LINK
Indirizzo al quale il link trasferisce Tag di chiusura del link
<A HREF="http : / /www. cern. ch">CERN</A>
Tag di apertura del link
Testo
visualizzato
13/04/2025
HTML - testo- Liste - Link - Immagini
Esempi di Link
4LINK
Nome del file
Tag di chiusura del link
<a href="Liste.html">Link al file nella stessa cartella</a>
Tag di apertura del link
Testo visualizzato
Nome del path/file
Tag di chiusura del link
<a href="page01/index.html">Link al file in una cartella figlia</a>
Tag di apertura del link
Testo visualizzato
13/04/2025
HTML - testo- Liste - Link - Immagini
Struttura delle Directory
5Struttura delle directory
· È opportuno organizzare il sito web in cartelle e sottocartelle per distribuire
adeguatamente le risorse utilizzate e le pagine appartenenti al sito.
- La cartella di livello più alto è detta root (radice)
- Collocheremo ogni sezione del sito in una cartella diversa per organizzare i file
- Per definire la gerarchia delle cartelle e dei file si usa una terminologia tipica dell'albero
genealogico
· Genitore
- indica la cartella che contiene una o più sottocartelle
· Figlia
- indica la cartella contenuta in una cartella genitore
· Nonna
- indica la cartella che contiene il genitore (la relazione in oggetto è con la cartella figlia)
· Nipote
- indica la cartella che contenuta nella cartella a sua volta figlia (la relazione in oggetto è
con la cartella nonna)
13/04/2025
HTML - testo- Liste - Link - Immagini
Esempio di Struttura delle Directory
6Struttura delle directory
Genitore
Nonna
Sito di esempio
index.html
doc1.html
Sezione1
Tabelle
Nipote
immagini
Logo1.png
Image01.png
Sezione 2
Figlia
13/04/2025
HTML - testo- Liste - Link - Immagini
Attributo ID
7L'attributo id
· È utilizzato per specificare un identificativo univoco per un elemento HTML
· Ad esempio, utilizzando l'attributo id nell'elemento h1
- < h1 id="_top">Benvenuti nel sito di esempio</h1>
- Il tag di apertura dell'elemento <h1> contiene l'attributo id il cui valore è
"_top"
- Il valore di un attributo id è univoco all'interno di una pagina
- Deve iniziare o con una lettera o con un simbolo di sottolineatura (_)
- Non sono quindi permessi numeri o altri simboli
- Viene utilizzato per far riferimento, nel codice, a quell'elemento (anche
ad esempio nelle istruzioni in javascript)
13/04/2025
HTML - testo- Liste - Link - Immagini
Attributo Class
8L'attributo class
· Serve per identificare un insieme di elementi, a differenza dell'attributo id
che ne identifica uno soltanto
•
Esempi
- < p class="1k1">
- < p class="1k1 space1">
· Il primo esempio indica l'appartenenza dell'elemento <p> alla classe "Ik1"
· Il secondo esempio indica l'appartenenza dell'elemento <p> a due classi
diverse "lk1" e "space1"
· Molto utile perché se abbinata a regole CSS permette di modificare
agevolmente l'aspetto dell'elemento
13/04/2025
HTML - testo- Liste - Link - Immagini
Elementi di Blocco
9Elementi di blocco
· Quando un elemento crea una nuova riga si dice che è un "elemento di
blocco "
· Elementi di blocco sono ad esempio
- < p>
- < h1>, <h2> .... < h6>
- < ul>, <ol> <li>
13/04/2025
HTML - testo- Liste - Link - Immagini
Elementi in Linea
10Elementi in linea
· Quando un elemento non crea una nuova riga ma continua sulla stessa
riga si dice che è un «elemento in linea»
· Elementi in linea sono ad esempio
- < a>
- < b>
- < i>
13/04/2025
HTML - testo- Liste - Link - Immagini
Elemento Div
11<div>
· Elemento di blocco
· Permette di raggruppare più elementi in uno stesso blocco
· Influenza la visualizzazione solo in quanto elemento di blocco (nuova riga)
· Se utilizziamo l'attributo id oppure class si può gestire l'aspetto di tutti gli
elementi contenuti nel <div> attraverso regole CSS
13/04/2025
HTML - testo- Liste - Link - Immagini
Elemento Span
12<span>
· Elemento in linea
· Permette di raggruppare più elementi su una stessa linea
· Non influenza la visualizzazione se è privo di attributi che ne modificano
l'aspetto
· Se utilizziamo l'attributo id oppure class si può gestire l'aspetto di tutti gli
elementi contenuti in <span> attraverso regole CSS
13/04/2025
HTML - testo- Liste - Link - Immagini
Visualizzazione delle Immagini
13Visualizzazione delle immagini: elemento img
· Link all'immagine <img src="Immagine.png">
· Scegliere il formato corretto in funzione della tipologia di immagini
- jpeg
- gif
- png
- svg
· scegliere le dimensioni all'interno della pagina
· agevolare il caricamento delle pagine
· Anche per la gestione delle immagini potremo utilizzare le istruzioni CSS
che vedremo nelle lezioni successive
13/04/2025
HTML - testo- Liste - Link - Immagini
Attributi delle Immagini
14Visualizzazione delle immagini: attributi
· src - localizzazione dell'immagine, url nella maggior parte dei casi si tratta
di un URL relativo (cartella all'interno del sito)
· alt - testo alternativo che descrive i contenuti in caso di mancata
visualizzazione
· title - ulteriori informazione sull'immagine. Molti browser visualizzano il
contenuto di title in un piccolo riquadro quando il puntatore del mouse
passa sull'immagine
13/04/2025
HTML - testo- Liste - Link - Immagini
Esempi di Visualizzazione Immagini
15Esempi di visualizzazione di immagini
· < img src="Immagine.png" alt="Definizioni per la strutturazione dei link"
title="albero genealogico con dimensioni" width="200" height="150" />
<p>Immagine prima del paragrafo</p>
· < p>Immagine contenuta <img src="Immagine.png" alt="Definizioni per la
strutturazione dei link" title="albero genealogico con dimensioni"
width="200" height="150" /> nel paragrafo</p>
· < p><img src="Immagine.png" alt="Definizioni per la strutturazione dei
link" title="albero genealogico con dimensioni" width="200" height="150"
/>Immagine all'inizio del paragrafo</p>
13/04/2025
HTML - testo- Liste - Link - Immagini
Introduzione a Box e Layout
16Lumsa
Dipartimento di Scienze umane
Corso di studi in Scienze della Comunicazione, Marketing e Digital media
Informatica per la comunicazione
(Gruppi A-F P-Z)
HTML e CSS - introduzione Box e Layout
Prof.ssa Alessandra Musolino
A.A. 2024-25
13/04/2025
HTML - testo- Liste - Link - Immagini
Generatore di Testi Segnaposto
17https://it.lipsum.com/
(generatore di testi segnaposto)
Lorem Ipsum
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit ... "
"Non c'è nessuno a cui piaccia il dolore in sé, che lo ricerchi e che voglia riceverlo, semplicemente perché è dolore ... "
Lorem Ipsum è un testo segnaposto
utilizzato nel settore della tipografia e
della stampa.
Lorem Ipsum è considerato il testo
segnaposto standard
Cos'è Lorem Ipsum?
Lorem Ipsum è un testo segnaposto utilizzato nel settore della
tipografia e della stampa. Lorem Ipsum è considerato il testo
segnaposto standard sin dal sedicesimo secolo, quando un
anonimo tipografo prese una cassetta di caratteri e li assemblò per
preparare un testo campione. È sopravvissuto non solo a più di
cinque secoli, ma anche al passaggio alla videoimpaginazione,
pervenendoci sostanzialmente inalterato. Fu reso popolare, negli
anni '60, con la diffusione dei fogli di caratteri trasferibili "Letraset",
che contenevano passaggi del Lorem Ipsum, e più recentemente
da software di impaginazione come Aldus PageMaker, che
includeva versioni del Lorem Ipsum.
Da dove viene?
Al contrario di quanto si pensi, Lorem Ipsum non è semplicemente
una sequenza casuale di caratteri. Risale ad un classico della
letteratura latina del 45 AC, cosa che lo rende vecchio di 2000 anni.
Richard Mcclintock, professore di latino al Hampden-Sydney
College in Virginia, ha ricercato una delle più oscure parole latine,
consectetur, da un passaggio del Lorem Ipsum e ha scoperto tra i
vari testi in cui è citata, la fonte da cui è tratto il testo, le sezioni
1.10.32 and 1.10.33 del "de Finibus Bonorum et Malorum" di
Cicerone. Questo testo è un trattato su teorie di etica, molto
popolare nel Rinascimento. La prima riga del Lorem Ipsum, "Lorem
ipsum dolor sit amet .. ", è tratta da un passaggio della sezione
1.10.32.
Il brano standard del Lorem Ipsum usato sin dal sedicesimo secolo
è riprodotto qui di seguito per coloro che fossero interessati.
Anche le sezioni 1.10.32 e 1.10.33 del "de Finibus Bonorum et
Malorum" di Cicerone sono riprodotte nella loro forma originale,
accompagnate dalla traduzione inglese del 1914 di H. Rackham.
Perchè lo utilizziamo?
È universalmente riconosciuto che un lettore che osserva il layout
di una pagina viene distratto dal contenuto testuale se questo è
leggibile. Lo scopo dell'utilizzo del Lorem Ipsum è che offre una
normale distribuzione delle lettere (al contrario di quanto avviene
se si utilizzano brevi frasi ripetute, ad esempio "testo qui"),
apparendo come un normale blocco di testo leggibile. Molti
software di impaginazione e di web design utilizzano Lorem Ipsum
come testo modello. Molte versioni del testo sono state prodotte
negli anni, a volte casualmente, a volte di proposito (ad esempio
inserendo passaggi ironici).
Dove posso trovarlo?
Esistono innumerevoli variazioni dei passaggi del Lorem Ipsum, ma
la maggior parte hanno subito delle variazioni del tempo, a causa
dell'inserimento di passaggi ironici, o di sequenze casuali di
caratteri palesemente poco verosimili. Se si decide di utilizzare un
passaggio del Lorem Ipsum, è bene essere certi che non contenga
nulla di imbarazzante. In genere, i generatori di testo segnaposto
disponibili su internet tendono a ripetere paragrafi predefiniti,
rendendo questo il primo vero generatore automatico su intenet.
Infatti utilizza un dizionario di oltre 200 vocaboli latini, combinati
con un insieme di modelli di strutture di periodi, per generare
passaggi di testo verosimili. Il testo così generato è sempre privo di
ripetizioni, parole imbarazzanti o fuori luogo ecc.
paragrafi
Inizia con 'Lorem ipsum dolor sit amet ... '
parole
5
byte
elenchi
Genera Lorem Ipsum
4/13/2025
HTML - Link - Immagini - div - span - iframe
Non hai trovato quello che cercavi?
Esplora altri argomenti nella Algor library o crea direttamente i tuoi materiali con l’AI.
