Corso di HTML. Prerequisiti. Modulo L3 3 Blocchi di testo

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Corso di HTML. Prerequisiti. Modulo L3 3 Blocchi di testo"

Chiara Palmisano
6 anni fa
Visualizzazioni

1 Corso di HTML Modulo L3 3 Blocchi di testo 1 Prerequisiti Formattazione di un testo Struttura a titoli di un testo Giustificazione e allineamento del testo 2 1

2 Introduzione In questa Unità vediamo altri strumenti per la gestione del testo, in particolare quando si vuole trattare un blocco di testo, ossia un insieme di righe (paragrafo). 3 Formattazione blocchi di testo La formattazione dei blocchi di testo opera a livello di paragrafo e: si differenzia dalla formattazione dei caratteri che opera sui singoli caratteri; i tag relativi si trovano sempre nel corpo dei documenti. (<body> ). 4 2

3 Formattazione blocchi di testo La formattazione dei blocchi di testo riguarda: paragrafi allineamento e giustificazione interruzione di linea 5 Formattazione blocchi di testo - paragrafi Il tag <p> </p> (paragraph) identifica un paragrafo. È sempre obbligatoria anche la clausola di chiusura </p> fino alla versione 4.0 era facoltativa poiché deducibile dal browser. Le specifiche W3C l hanno resa obbligatoria dalla versione 5.0 I paragrafi non possono essere annidati, né contenere elementi di formattazione di blocco. Il browser inserisce un interruzione di linea prima e dopo il paragrafo. 6 3

paragrafo è allineato a destra</p> <p align="center"> <font color=red> Questo in rosso invece è centrato</p> </html> 7 Formattazione blocchi di

4 Formattazione blocchi di testo - allineamento e giustificazione <!- Allineamento paragrafi.html --> <title>allineamento paragrafi</title> <body> <p align="left">questo paragrafo è allineato a sinistra</p> <p align="right">questo paragrafo è allineato a destra</p> <p align="center"> <font color=red> Questo in rosso invece è centrato</p> </html> 7 Formattazione blocchi di testo - allineamento e giustificazione Allineamento a sinistra <p align= left > Allineamento centrale <p align= center > Allineamento a destra <p align= right > Giustificazione <p aling= justify > 8 4

5 Formattazione blocchi di testo - allineamento e giustificazione <!- Giustificazione.html --> <title>giustificazione paragrafi</title> <body> <p align="justify"> <font color=green>la maggior parte dei comandi HTML sono contenitori e hanno un tag di inizio ed uno di fine, con il testo all'interno. Il comando era originariamente definito come un tag standalone che definiva lo spazio tra i paragrafi. </html> 9 Formattazione blocchi di testo - interruzione di linea Il tag <br/> (break) permette di inserire un interruzione di linea senza interrompere il blocco corrente. Non necessita di tag di chiusura (notare il carattere / posto dopo il marcatore br). 10 5

6 Informazioni sull autore <address> </address> definisce un blocco di testo che fornisce informazioni quali l autore e le modalità di contatto per il documento corrente, ed è posto generalmente all inizio o alla fine del documento. Il testo specificato è presentato in corsivo. Esempio: <address>copyright di Mario Rossi<br>mario.rossi@tin.it</address> Risultato a video: Copyright di Mario Rossi mario.rossi@tin.it 11 Titoli Il tag <hn> </hn> definisce i livelli di titolo (header) dove n è un numero intero compreso tra 1 e 6 dal più importante (h1) al meno importante (h6). I livelli di titolo più importanti sono visualizzati in un carattere più grande di quelli meno importanti. 12 6

7 Titoli <!- Titoli 1.html <title>titoli</title> <body> <h1><font color=red>primo titolo</h1> <h2><font color=green>secondo titolo</h2> <h3><font color=blue>terzo titolo</h3> </html> 13 Riga orizzontale Il tag <hr> (horizontal row) inserisce una linea orizzontale nel punto indicato. Tale linea può essere usata per indicare un cambiamento in un argomento. Gli attributi del tag <hr> sono: align = left center right size = n specifica lo spessore della linea in pixel. width = n specifica la lunghezza della linea color = nomecolore indica il colore della riga 14 7

8 Riga orizzontale <!- Righe orizzontali.tml --> <title>righe orizzontali</title> <body bgcolor=red> <h1>primo titolo</h1> <hr size=10 width=200 color="yellow" align="left"> <h2><p align="right">secondo titolo</h2> <hr size=20 width=350 color="pink" align="right"> <h3>terzo titolo</h3> </html> Questo esempio mostra la fusione di testo e righe orizzontali, con allineamento, colore e spessore variabili. 15 Testo scorrevole Il tag <marquee> </marquee> permette di inserire un testo scorrevole nel documento. Gli striscioni di testo scorrevole come le immagini possono essere allineati a sinistra o a destra e avere una varietà di attributi che ne definiscono le caratteristiche. 16 8

9 Testo scorrevole <!- marquee.html --> <title>testo scorrevole</title> <body bgcolor = green> <marquee><font color="#ffffcc" size="4" face="arial, Helvetica, sans-serif">nome alunno</font> </marquee> Questo esempio mostra l effetto del testo scorrevole. 17 Testo scorrevole Il tag <marquee> presenta le seguenti opzioni: behavior = scroll slide alternate specifica comportamento del testo; con scroll il testo entra da un lato, attraversa lo striscione ed esce completamente dall altro; con slide entra da una parte, attraversa lo striscione e si ferma non appena tocca il margine opposto; con alternate il testo rimbalza tra i due margini dello striscione. bgcolor = nomecolore specifica il colore del carattere del testo incluso direction = left right imposta il verso di scorrimento loop = n oppure infinite stabilisce il numero di cicli che il testo deve effettuare 18 9

Immagini Le immagini possono essere inserite nel corpo tramite img src = percorso e possono trovarsi in un paragrafo (centrate o allineate a destra o sinistra).

10 Immagini Le immagini possono essere inserite nel corpo tramite img src = percorso e possono trovarsi in un paragrafo (centrate o allineate a destra o sinistra). Gli attributi di img src sono: alt = testo il testo alternativo da visualizzare se l immagine non viene caricata width = n larghezza immagine height = n altezza immagine border = n bordo (0 indica nessun bordo) vspace = n posizione orizzontale nel paragrafo hspace = n posizione verticale rispetto al paragrafo 19 Immagini Esempio di pagina web con immagine. <!- Immagini.html --> <title>immagini</title> <body> <img src = Tramonto.jpg width=200 border=2 hspace=150> Il vostro testo qui </html> 20 10

11 Argomenti Formattazione blocchi di testo paragrafi allineamento e giustificazione interruzione di linea Informazioni sull autore Titoli Riga orizzontale Testo scorrevole Immagini 21 Altri testi di riferimento HTML 4.0 Paolo S.Asioli

Documenti analoghi

APPUNTI DI INFORMATICA IL LINGUAGGIO HTML

APPUNTI DI INFORMATICA IL LINGUAGGIO HTML Vediamo le seguenti istruzioni dell HTML link permette di dare un colore alla nostra "parola calda", se questo attributo non viene esplicitato