Righe e paragrafi
Questa sezione descrive l’HTML associato a righe e paragrafi. Iniziamo con il <DIV> e <P>.
Questo tutorial viene fornito per valore storico. Alcuni dei tag e degli attributi presentati in questo tutorial sono stati deprecati e non devono essere utilizzati. Il supporto del browser per elementi e attributi deprecati potrebbe essere limitato e il loro utilizzo potrebbe produrre risultati imprevisti.
Per uno sguardo dettagliato all’html moderno, fare riferimento ai nostri tutorial su markup semantico, struttura del documento HTML, caratteri e tipografia web.
L ‘< DIV > Elemento
<DIV>, a elemento a livello di blocco, definisce semplicemente un blocco di contenuto nella pagina. Oltre a definire un blocco, <DIV> non fa nulla. Ad esempio, il codice seguente crea un elemento <DIV> con due paragrafi al suo interno. Tieni presente che puoi inserire <P> elementi all’interno di <DIV>.
Il che ci dà:
<DIV ...>.
<DIV ...>. Questa è più roba all’interno di <DIV ...>. Questa è roba dopo <DIV ...>.
L’attributo ALIGN
ALIGN imposta l’allineamento del contenuto dell’elemento <DIV>. Tutti e quattro i valori, LEFT, CENTER, RIGHT e JUSTIFY, sono tutti ben supportati. LEFT è il valore predefinito.
Questo codice mostra il valore predefinito:
Il che ci dà:
L’elemento paragrafo
<P> indica l’inizio di un nuovo paragrafo. Questo di solito viene visualizzato con due ritorni a capo, producendo una singola riga vuota tra i due paragrafi:
Che produce questo:
L’attributo ALIGN
ALIGN indica l’allineamento del paragrafo.
Che produce questo:
Questo è allineato a sinistra. Questo è il valore predefinito.
Questo è allineato al centro.
Questo è allineato a destra.
L’attributo CLEAR
CLEAR è riconosciuto da alcuni browser e funziona in modo molto simile a <BR>. Tuttavia, non è HTML standard ed è ancora ampiamente non supportato, quindi utilizza <BR>.
Il tag finale P è obbligatorio?
W3C dice di </P>: “Il tag di fine è facoltativo in quanto può sempre essere dedotto dal parser.” Ciò significa che un nuovo <P> implica la fine del precedente <P> (e qualsiasi allineamento impostato dal precedente <P>).
Anche qualsiasi altro elemento a livello di blocco, come <HR> o <BLOCKQUOTE> dovrebbe terminare il paragrafo. Tuttavia, non sempre funziona in questo modo. Alcuni browser, ad esempio, allineano a destra il testo anche dopo una tabella. Nell’esempio seguente, MSIE esegue il rendering della parte “dopo la tabella” come allineata a destra, mentre Netscape lo visualizza come allineato a sinistra:
 |
 |
| Rendering di MSIE | Rendering di Netscape |
Se imposti l’allineamento o un’altra proprietà di stile per un elemento di paragrafo, è meglio usare </P>. Se non usi mai alcun set di stili, puoi generalmente ignorare </P>.
Consulta le specifiche del W3C per i paragrafi per ulteriori informazioni su questo argomento.
Allineamento del testo
Puoi impostare l’allineamento di qualsiasi elemento HTML utilizzando la regola di stile text-align. text-align può essere utilizzato per impostare l’allineamento per un paragrafo, una sezione del documento o anche per l’intero documento. text-align può essere utilizzato per impostare l’allineamento a sinistra, a destra, al centro o giustificato.
Ad esempio, supponiamo di voler centrare un paragrafo.Per prima cosa, creeremo una classe di stili chiamata centeralign inserendo il codice seguente nella “sezione del documento:
Ora possiamo impostare qualsiasi paragrafo sulla classe centeralign in questo modo:
Il che ci dà questo:
Get Centered
Possiamo applicare la stessa classe a un elemento <DIV> per centrare una sezione del pagina:
Il che ci dà:
Ogni elemento all’interno del DIV allineato al centro eredita lo stile allineato al centro.
Giustificazione
Per impostazione predefinita , la maggior parte dei browser visualizza il testo con un bordo destro frastagliato.
Se vuoi che tutto il testo sia reso come in un libro con un bordo destro uniforme, puoi usare una singola regola di stile. Per impostare tutto il testo su giustificato copia quanto segue codice i nella sezione “del documento.
Il problema con la giustificazione è che molti browser si confondono su dove si trova l’ultima riga di testo (cosa che non dovrebbe essere giustificato). Ad esempio, MSIE 4.x è confuso quando un blocco di testo è immediatamente seguito da una tabella. Nota in questa immagine che l’ultima riga di testo estende le parole “uno dei nostri agenti” su una riga completa:
Per rimediare a questa situazione, racchiudi tutti i blocchi di testo con <P> e </P>:
Ora il nostro errato MSIE rende le cose di più sanely:
Rientro
Esistono diversi modi per far rientrare paragrafi e intere sezioni della tua pagina web Le sezioni successive descrivono le quattro tecniche principali per il rientro:
- Rientro di un paragrafo
- Rientro di una sezione della pagina
- Rientro dell’intera pagina
- Rientro della prima riga di ogni paragrafo
Prima di iniziare, tuttavia, vale la pena dire alcune parole su <BLOCKQUOTE> . C’è un malinteso comune secondo cui <BLOCKQUOTE> dovrebbe essere utilizzato per indentare le sezioni della pagina. Questa convinzione deriva dal fatto che la maggior parte dei browser web visivi visualizzano il testo citato come rientrato. Ricorda, tuttavia, che l’HTML non è un linguaggio di formattazione e fornisce risultati imprevedibili quando tenti di usarlo come tale. Utilizza <BLOCKQUOTE> se hai un blocco di testo tra virgolette, altrimenti utilizza le tecniche descritte nei prossimi paragrafi.
Rientro di un paragrafo
Puoi far rientrare un singolo paragrafo usando gli stili. Ad esempio, supponiamo di voler far rientrare un paragrafo di 50 punti. Innanzitutto, creiamo una classe chiamata indentata con le seguenti regole di stile. Metti questo codice nella sezione “del tuo documento.
Ora impostiamo la classe del paragrafo come indentata aggiungendo un attributo CLASS a <P> tag:
che ci dà questo paragrafo rientrato:
Non mi conosci senza aver letto un libro intitolato Le avventure di Tom Sawyer; ma non importa. Quel libro è stato realizzato dal sig. . Mark Twain, e ha detto la verità, principalmente. C’erano cose che ha allungato, ma principalmente ha detto la verità. Questo non è niente. Non ho mai visto nessuno ma ho mentito una volta o l’altra, senza che fosse zia Polly, o la vedova , o forse Mary. Zia Polly – la zia Polly di Tom, lei è – e Mary, e la vedova Douglas è tutto raccontato in quel libro, che è per lo più un libro vero, con alcune barelle, come ho detto prima. – Apertura a Huck Finn
Rientro di una sezione di una pagina
Per far rientrare più di un par agraph useremo lo stesso stile che abbiamo impostato nell’esempio precedente. Inserisci questo codice nella “sezione della tua pagina:
Quindi useremo la classe indentata in un <DIV> elemento:
che ci fornisce una sezione rientrata come questa:
Questi articoli possono essere portati al centro di riciclaggio per la ridistribuzione. molto meglio che buttarli via.
- Detergenti per la casa
- Computer e accessori per computer
- Vestiti
Rientro dell’intera pagina
Se vuoi che l’intera pagina sia rientrata, imposta una regola di stile che imposti il riempimento destro e sinistro per l’elemento “. Ad esempio, questo stile imposta il riempimento destro e sinistro su 100 pixel:
Questa tecnica è popolare se utilizzata in combinazione con un’immagine di sfondo. Ad esempio, supponiamo di voler che questa immagine scorra lungo il lato sinistro della pagina.
Questa immagine è larga 56 pixel, quindi impostiamo il riempimento a 60.Lo stile seguente imposta l’immagine di sfondo, imposta la ripetizione su repeat-y (ripeti solo verticalmente lungo il lato sinistro della pagina) e imposta il padding sinistro su 60 (non imposteremo il padding destro).
Ecco come potrebbe apparire:
Rientro della prima riga di ogni paragrafo
Per far rientrare la prima riga di ogni gruppo di paragrafi una regola di stile che utilizza il rientro del testo. Ad esempio, il codice seguente fa rientrare la prima riga di ogni paragrafo di 30 punti. Copia questo codice nella “sezione della tua pagina:
Questo codice fa rientrare la prima riga di ogni <P> elemento, ma probabilmente incorrerai in un fastidioso problema. Se sei come la maggior parte dei designer, probabilmente non metti una P prima del primo paragrafo o tra un’intestazione come <H1> e il testo che lo segue. Sfortunatamente, è esattamente quello che devi fare se vuoi che il paragrafo sia rientrato. Il testo in queste situazioni fa parte di qualcosa chiamato “blocchi anonimi” e non è possibile fare riferimento direttamente. Per indentarlo devi inserire il testo in un <P> elemento.
Quindi, ad esempio, il codice seguente non ha un <P> tra l’intestazione e il testo, quindi il testo non è rientrato:
Il che ci dà:
Questo paragrafo non è rientrato.
Questo codice ha un <P> tra l’intestazione e il testo, quindi il testo è rientrato:
Questo paragrafo è rientrato.
Il < BR > Elemento
<BR> inserisce un singolo ritorno a capo . Mentre <P> indica l’inizio di un nuovo paragrafo, <BR> implica solo un ritorno a capo all’interno dello stesso paragrafo. <BR> viene solitamente visualizzato con un singolo ritorno a capo.
Ad esempio, questo codice:
Il che produce questo:
Che teneva tutti i suoi soldi in un secchio
Sua figlia di nome Nan
È scappata con un uomo
E per quanto riguarda il bucket, Nantucket
Poiché <BR> non inizia un nuovo paragrafo, tutti gli attributi del paragrafo corrente rimangono gli stessi:
Da cui deriva:
C’era una volta un uomo di Nantucket
che teneva tutti i suoi soldi in un secchio
Nome di sua figlia Nan
È scappata con un uomo
E per quanto riguarda il secchio, Nantucket
L’attributo CLEAR
CLEAR dice che oltre a inserire un’interruzione di riga, se c’è un’immagine o un altro oggetto a destra oa sinistra, oltrepassa anche quello. Ad esempio, questo codice dice che l’immagine dovrebbe essere allineata sul lato sinistro della pagina. Poi c’è del testo, quindi LEFT. Il testo che segue è oltre l’immagine:
Che produce questo:
Vieni alla festa di Halloween! buon divertimento. Dalle 20:00 a mezzanotte. Indossa un costume o vieni come te stesso spaventoso!
BOTH è uguale a ALL, ma non lo è supportato su tutti i browser, quindi utilizza ALL.
L’elemento CENTER
Consiglio di utilizzo: utilizza <DIV> invece.
Il che ci dà:
Che è lo stesso di:
Il che ci dà:
L’elemento < HR >
<HR> traccia una linea orizzontale (una “regola orizzontale”) lungo la pagina. È tutto. Per un concetto così semplice, le regole orizzontali sono sorprendentemente popolari. Iniziamo dalle basi. <HR> non ha un tag di fine e non richiede attributi:
Che crea questa regola:
Testo qui sopra
Testo qui sotto
<HR> di solito indica una divisione nella pagina. Le cose prima della regola si trovano in una “sezione” diversa da quelle che seguono. Per questo motivo molti designer considerano <HR> un tag logico, non un tag di layout.
L’attributo NOSHADE
NOSHADE indica che la regola dovrebbe essere presentata come piatta anziché tridimensionale.Confronta questa regola orizzontale regolare:
Con una regola NOSHADE:
Il che ci dà:
NOSHADE viene spesso utilizzato insieme a SIZE:
produce questa regola:
NOSHADE è popolare perché i browser di solito non rendono molto bene le regole tridimensionali. Infatti, in molte circostanze la regola è presentata con lo stesso colore dello sfondo, rendendolo quasi invisibile.
L’attributo SIZE
SIZE indica l’altezza della regola. (Immagino che chiamarlo “ALTEZZA” sarebbe stato troppo facile.) Per la larghezza orizzontale, vedi WIDTH. Confronta alcune di queste dimensioni:
Il che ci fornisce queste regole:
I browser generalmente non renderanno un <HR> maggiore di 100 .
L’attributo WIDTH
WIDTH imposta la larghezza orizzontale della regola. Puoi esprimere la dimensione in pixel o come percentuale.
Questi <HR> sono impostati con larghezze in pixel:
Il che ci fornisce queste regole:
WIDTH è solitamente espresso come percentuale. Se utilizzi una larghezza percentuale, assicurati di racchiudere il valore tra citazioni.
Produce queste regole:
Il valore predefinito è 100%. Per impostazione predefinita la regola è centrato. Per impostare un allineamento diverso utilizzare ALIGN.
Le larghezze percentuali utilizzano la percentuale o f la larghezza disponibile, non l’intera larghezza della pagina. Ad esempio, se la regola è in una tabella, la larghezza è una percentuale della larghezza della cella della tabella.
Che produce questa tabella:
Un punto nel tempo ne fa risparmiare nove
L’attributo ALIGN
ALIGN imposta l’allineamento del regola. ALIGN è utile solo se utilizzi anche WIDTH.
Dacci questo:
L’elemento < PRE >
<PRE> è uno dei tag più utili nella casella degli strumenti HTML. <PRE> contrassegna il testo come “preformattato”: tutti gli spazi e i ritorni a capo vengono visualizzati esattamente come li digiti.
Il che produce questo:
<PRE> il testo viene visualizzato con un carattere a larghezza fissa, il che significa che tutti i caratteri e gli spazi sono stessa larghezza. La larghezza fissa rende facile disporre il testo nel modo desiderato, quindi <PRE> è ottimo per creare tabelle “veloci e sporche” come quella sopra.
<PRE> NON fa sì che il browser ignori i tag. Puoi ancora creare link e altri gadget:
produce questo:
Quando inizi ad aggiungere markup , diventa più difficile vedere come risulta il testo (spaziare i tag in modo uniforme come nella tabella sopra aiuta). <PRE> è spesso utilizzato per citare grandi blocchi di testo che non vuoi “HTMLize”, ma “potrebbe rovinare il testo. Per una tabella più grande di poche righe, di solito è più facile a lungo termine usare il codice della tabella.
L ‘”Elemento
” impedisce che si verifichi un ritorno a capo. Ad esempio, il codice seguente produce una poesia senza senso di una lunga riga:
che produce questo:
is most useful for making the page layout more attractive by disallowing breaks inside logical groups of symbols and words. The poem quoted above breaks in appropriate places if each phrase is surrounded by:
che produce questo:
gira e urla,
sibilo e ruggito,
timore e scherno,
calpestare e urlare,
correre e saltare,
sbucciare e tagliare a cubetti,
cucinare e pesare,
costi e prezzi,
mangiare e bere,
tutto in una giornata di lavoro.
L ‘”Elemento
is for the situation where you have used per evitare interruzioni di riga in una sezione di testo, e poi vuoi dire “ma puoi rompere QUI se vuoi”.”non forza un’interruzione di riga, ne consente semplicemente una:
Produce:
Avendo inventato , Netscape now seems to have abandoned it. It"s better to stick to grouping non-breakable sets of words within, in questo modo:
che ci dà questo paragrafo:
spingere, adattare e stipare quante più parole posso pensare del più possibile
