3-Elementi Blocco Inline

Programmazione Web 1
Elementi di blocco ed inline

KARIM MOUSSALLI – SCUOLA SPECIALIZZATA SUPERIORE D’ARTE APPLICATA
2022 - 2023
<!doctype html> L’elemento <body>
<html> ➢ Nelle scorse lezioni, abbiamo
<head> visto diversi elementi che si
</head> potrebbero annidare
nell’elemento body:
<body> ➢ <p>...</p>
</body> ➢
➢
<u>...</u>
<b>...</b>
</html> ➢
➢
<a href="risorsa/esterna.html">...</a>
<img src="risorsa/esterna.png" />
➢ <br /> (break = andare a capo)
➢ <hr />
Elementi di ➢ Gli elementi del body si dividono
in due grandi categorie:
blocco ed ➢ Elementi di blocco
elementi inline ➢ Elementi inline
➢ Si dicono di tipo blocco quegli
Elementi di elementi che vengono visualizzati
blocco isolati dal resto del contenuto di
una pagina con un’andata a
capo e una riga vuota
➢ Per esempio <p> è un elemento
di tipo blocco, perchè isola una
porzione di testo, creando un
paragrafo separato
Elementi di ➢ Gli elementi di blocco vanno ad
occupare tutta l’area ad esso
blocco adiacente, da sinistra a destra
➢ Qualsiasi altro tag dichiarato
dopo un elemento di blocco,
verrà visualizzato sulla riga
successiva
Elementi di blocco
<p> </p>
<p> </p>
<p> </p>
<hr />
<hr />
<p> </p>
<p> </p>
Elementi di blocco
<p>Primo paragrafo</p><p>Secondo paragrafo</p>
<p>Stessa riga</p><u>Nuova riga</u>
<p>Hello world!!</p><hr /><p>come va?</p>
<p>ciao, mi chiamo <u>Karim</u></p><b>e tu?</b>
Vediamo un esempio insieme

Elementi inline ➢ Si dicono di tipo inline quegli
elementi che vengono visualizzati
all’interno di un flusso di testo,
senza interromperlo con
un’andata a capo
➢ Per esempio <u> è un elemento
di tipo inline, perchè non separa il
testo sottolineato dal resto della
frase
➢ Tutti gli elementi inline sono
elementi di tipo contenitore o
vuoto
Elementi inline ➢ Gli elementi inline vanno in linea
con il resto del contenuto, senza
occupare tutta l’area ad esso
adiacente
➢ Gli elementi inline possono
contenere soltanto altri elementi
inline
➢ N.B. Gli elementi di blocco
possono contenere sia gli
elementi inline, che gli elementi di
blocco
Elementi inline
<u> </u> <b> </b> <i> </i> <a> </a> <img />
Elementi inline e di blocco
<p>ciao, mi chiamo <u>Karim</u> <b>e tu?</b></p>

<u><b>Questo testo resta </b>in linea</u>
<p><u>Io studio presso</u> <b>la SSSAA</b></p>

Paragrafo ➢ Descrizione: identifica un paragrafo
➢ Tipo: elemento contenitore di blocco
<p>Questo è un paragrafo</p>
➢ Il tag <p>, oltre ad individuare un

paragrafo, indica al browser la
necessità di rendere visibile e
separato questo elemento di
blocco
➢ Solitamente i browser realizzano
questa suddivisione inserendo
una linea vuota prima e dopo il
paragrafo
Paragrafo ➢ Proprio perchè il tag <p> è un
<p>Questo è un paragrafo</p> elemento di blocco, il testo di un
paragrafo può essere allineato in
tre modi:
➢ A sinistra (left: questo è il modo predefinito
➢ Al centro (center)
➢ A destra (right)
➢ Giustificato (justify: il testo riempie
interamente lo spazio adiacente
Attributi generali ➢ Per allineare il testo di un
style paragrafo, bisogna usare
l’attributo di nome style
➢ L’attributo style può essere
applicato a qualsiasi elemento
del body di una pagina
<p style="text-align:right;">Testo allineato a destra</p>

Attributo paragrafo
Il valore dell’attributo di nome style

dipende da quale stile si vuole dare
all’elemento
Attributo paragrafo
In questo caso stiamo dando un allineamento del testo (text-align:)

A destra (right;)
Nel caso in cui vogliamo dare un allineamento del testo centrato:
text-align:center;
Paragrafo ATTENZIONE: pur essendo un elemento
di blocco, il tag <p> è l’unico elemento
di blocco che non può contenere altri
elementi di blocco
Intestazioni ➢ Descrizione: identifica un titolo di diverso livello
➢ Tipo: elemento contenitore di blocco
<h1>Titolo 1</h1> ➢ Spesso le pagine web, soprattutto
<h2>Titolo 2</h2> quelle con molto testo (ad
<h3>Titolo 3</h3> esempio quelle di wikipedia),
<h4>Titolo 4</h4> potrebbero risultare difficili da
<h5>Titolo 5</h5> leggere
<h6>Titolo 6</h6>
➢ Sarebbe quindi opportuno
interrompere il flusso del testo con
delle opportune intestazioni
Intestazioni ➢ Il linguaggio html prevede sei
livelli di intestazioni:
<h1>Titolo 1</h1>
da <h1>...</h1> a <h6>...</h6>
<h2>Titolo 2</h2> ➢ Dove <h1> ha un livello di
<h3>Titolo 3</h3> importanza maggiore rispetto ad
<h4>Titolo 4</h4>
<h2>, <h2> ha maggiore
<h5>Titolo 5</h5>
<h6>Titolo 6</h6> importanza rispetto ad <h3>, e
via dicendo
Attributi ➢ Per allineare il testo di un
intestazione, usiamo lo stesso
intestazioni attributo che abbiamo usato
precedentemente: style
<h1 style="text-align:center;">Titolo centrato</h1>

Attributi
intestazioni
<h1 style="text-align:center;">Titolo centrato</h1>
Stessa cosa vista prima:

Un testo allineato (text-align:)
Al centro (center;)
Intestazioni ATTENZIONE: le intestazioni vanno
inserite con ordine. Il tag <h1> non
può essere inserito in un documento
successivamente ad un tag <h2>,
come un tag <h2> non può essere
inserito successivamente ad un tag
<h3>, e così via
<h2>Titolo 2</h2> <h1>Titolo 1</h1> <h3>Titolo 3</h3>

<h1>Tilolo 1</h1> <h2>Tilolo 2</h2> <h2>Tilolo 2</h2>
<h1>Titolo 1</h1> <h1>Titolo 1</h1>
Ordine intestazioni
<h1> Menu </h1>
<h2>Antipasti</h2>
<h3>Zuppe</h3>
<h3>Insalate</h3>
<h2>Piatti principali</h2>
<h3>Bistecche</h3>
<h3>Paste</h3>
<h2>Dessert</h2>
<h3>Torte</h3>
<h3>Gelati</h3>
Ordine intestazioni
<h1> Menu </h1> Il tag <h1> è considerato il titolo
principale della nostra pagina.
<h2>Antipasti</h2> Il tag <h1> viene inserito una sola
<h3>Zuppe</h3> volta per pagina
<h3>Insalate</h3>
Altri esempi:
➢ Libro: rappresenta il titolo
➢ C.V: Curriculum vitae
<h3>Bistecche</h3>
<h3>Paste</h3>
<h2>Dessert</h2>
<h3>Torte</h3>
<h3>Gelati</h3>
Ordine intestazioni
<h1> Menu </h1>
I tags <h2> vengono considerati i
titoli delle principali sezioni della
<h2>Antipasti</h2> pagina
<h3>Zuppe</h3>
<h3>Insalate</h3>
I tags <h2> vengono inseriti
successivamente al tag <h1>
<h2>Piatti principali</h2> ➔ Cerchiamo di evitare di saltare un
<h3>Bistecche</h3> livello di importanza nell’ordine delle
<h3>Paste</h3> intestazioni
<h2>Dessert</h2> Altri esempi:

<h3>Torte</h3>
➢ Libro: rappresentano i capitoli
➢ C.V: Informazioni personali; esperienze
<h3>Gelati</h3>
di studio; esperienze lavorative; ...
Ordine intestazioni
<h1> Menu </h1>
I tags dal <h3> al <h6> sono
considerati come:
<h2>Antipasti</h2>
sotto-titoli, sotto-sotto-titoli, etc.
<h3>Zuppe</h3>
➔ Ricordiamoci di evitare di saltare un
<h3>Insalate</h3> livello di importanza nell’ordine delle
intestazioni
<h3>Bistecche</h3>
<h3>Paste</h3> Altri esempi:
➢ Libro: paragrafi e sottoparagrafi
<h2>Dessert</h2> ➢ C.V: Nome: Karim
<h3>Torte</h3> Cognome: Moussalli
<h3>Gelati</h3> ...
Anchor ➢ Descrizione: identifica un collegamento (link)
<a href="risorsa/esterna.html">...</a> fra la pagina corrente e altre pagine
➢ Tipo: elemento contenitore inline
➢ L’elemento <a> (anchor)
consente di collegare fra loro
diverse pagine html
➢ Il collegamento viene applicato
ad una porzione di testo (il
contenuto del tag<a>), che
diviene in tal modo "Cliccabile"
Anchor ➢ Il link può essere anche fatto su
un’immagine (in questo caso
cliccando sull’immagine si viene
indirizzati alla pagina)
<a href="animali.html"><img src="immagini/gatto.jpeg" /></a>

Attributi link ➢ L’attributo href specifica l’indirizzo
href della pagina di destinazione e
deve essere indicato
obbligatoriamente
<a href="contatti.html">Contatti</a>
➢ Elementi di struttura
Riassunto ➢ Elementi di blocco ed elementi
inline
➢ Attributi obbligatori
➢ Attributi facoltativi
➢ Paragrafo, intestazione, anchor,
image,

3-Elementi Blocco Inline

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

3-Elementi Blocco Inline

Caricato da

Copyright:

Formati disponibili

Programmazione Web 1

Elementi di blocco ed inline

Vediamo un esempio insieme

<p>ciao, mi chiamo <u>Karim</u> <b>e tu?</b></p>

Vediamo un esempio insieme

➢ Il tag <p>, oltre ad individuare un

<p style="text-align:right;">Testo allineato a destra</p>

Il valore dell’attributo di nome style

In questo caso stiamo dando un allineamento del testo (text-align:)

<h1 style="text-align:center;">Titolo centrato</h1>

<h1 style="text-align:center;">Titolo centrato</h1>

Stessa cosa vista prima:

<h2>Titolo 2</h2> <h1>Titolo 1</h1> <h3>Titolo 3</h3>

<h2>Dessert</h2> Altri esempi:

<a href="animali.html"><img src="immagini/gatto.jpeg" /></a>

Vediamo un esempio insieme

Potrebbero piacerti anche