Marcaje HTML - Pauza de paragraf

(Bara de instrumente Webdev (Firefox))

Pauza de paragraf

În Capitolul 1, Noțiuni de bază, am acoperit câteva concepte HTML de bază, inclusiv faptul că HTML ignoră spațiile albe. Pare puțin nebunesc, nu-i așa? Cum putem compune o pagină web care poate fi citită fără ca totul să se prăbușească într-un singur glob gigant de text?

Să presupunem că vrem ca site-ul nostru web să afișeze câteva rânduri de la un dramaturg obscur:

Exemplul 2.1. Text neformatat

<html>
<head>
<title>Macbeth: 1, Reckless Youngsters: 0</title>
</head>
<body>
MACBETH: My name’s Macbeth.
YOUNG SIWARD: The devil himself could not pronounce a title
More hateful to mine ear.
MACBETH: No, nor more fearful.
YOUNG SIWARD: Thou liest, abhorred tyrant; with my sword
I’ll prove the lie thou speak’st.
[They fight, and young Seward is slain.]
MACBETH: Thou wast born of woman.–
But swords I smile at, weapons laugh to scorn,
Brandish’d by man that’s of a woman born.
</body>
</html>

Acum, aceasta este o pagină web perfect acceptabilă. Elementele html, head, title și body sunt toate în locurile corecte. De fapt, acest exemplu este la fel ca „Pagină web simplă” de la Să începem, cu excepția faptului că textul este puțin diferit.

Există însă o mică problemă. HTML restrânge spațiile albe, ceea ce înseamnă că tot textul nostru se va restrânge într-un singur paragraf și va arăta cam așa:

Vizualizare:

MACBETH: My name’s Macbeth. YOUNG SIWARD: The devil himself could not pronounce a title More hateful to mine ear. MACBETH: No, nor more fearful. YOUNG SIWARD: Thou liest, abhorred tyrant; with my sword I’ll prove the lie thou speak’st. [They fight, and young Seward is slain.] MACBETH: Thou wast born of woman.– But swords I smile at, weapons laugh to scorn, Brandish’d by man that’s of a woman born.

Acest lucru este groaznic! Să încercăm să facem această pagină mai lizibilă.

Elementul p

Elementul p împarte textul în paragrafe. Orice text pe care îl înconjurați cu un de deschidere și un de închidere devine un bloc separat. Să vedem cum funcționează. Pentru concizie, vom începe să omitem elementele structurale: html, head, și body.

Exemplul 2.2. Paragrafe

MACBETH: My name’s Macbeth.
YOUNG SIWARD: The devil himself could not pronounce a title
More hateful to mine ear.
MACBETH: No, nor more fearful.
YOUNG SIWARD: Thou liest, abhorred tyrant; with my sword
I’ll prove the lie thou speak’st.
[They fight, and young Seward is slain.]
MACBETH: Thou wast born of woman.–
But swords I smile at, weapons laugh to scorn,
Brandish’d by man that’s of a woman born.

Vizualizare:

MACBETH: My name’s Macbeth.

YOUNG SIWARD: The devil himself could not pronounce a title More hateful to mine ear.

MACBETH: No, nor more fearful.

YOUNG SIWARD: Thou liest, abhorred tyrant; with my sword I’ll prove the lie thou speak’st.

[They fight, and young Seward is slain.]

MACBETH: Thou wast born of woman.– But swords I smile at, weapons laugh to scorn, Brandish’d by man that’s of a woman born.

Fiecare bloc este urmat de două întreruperi de linie. Acesta este un început bun!

Fiecare paragraf este înconjurat de o etichetă de deschidere, , și de o etichetă de închidere, . Elementul p este un element bloc; „face ceva” unui bloc de text. Browserul trebuie să identifice unde se termină blocul, așa că eticheta deschisă are nevoie de o etichetă de închidere, .

Din păcate, mulți oameni consideră că elementul p înseamnă „creați un nou paragraf aici” sau „puneți două întreruperi de rând aici”, mai degrabă decât „închideți acest text și transformați-l într-un paragraf”. Și astfel, vedeți o mulțime de cod care arată astfel:

Exemplul 2.3. Utilizare p incorectă

Text Block 1: Blah blah blah…
Text Block 2: Blah blah blah…
Text Block 3: Blah blah blah…

Ce se întâmplă? (Încercați.) Blocurile de text 2 și 3 sunt paragrafe (browserul „inserează” un element de închidere chiar înaintea fiecărui element ). Blocul de text 1 nu este de fapt un paragraf HTML. Cu toate acestea, pagina se afișează cu două întreruperi de rând între fiecare bloc de text, ceea ce pare să aibă ca rezultat același lucru ca și cum se procedează corect.

Deci, care este marea problemă? De ce să nu procedați în modul „nepotrivit” și să evitați să introduceți toate acele etichete de închidere? Ei bine, mai târziu vom vorbi despre cum să folosiți o tehnică numită Cascading Style Sheets (CSS) pentru a controla aspectul tuturor elementelor de un anumit tip. De exemplu, puteți folosi CSS pentru a seta toate paragrafele să fie roșii de 12 puncte Times New Roman. Dar dacă folosești p incorect, vei avea o surpriză neplăcută, deoarece multe dintre paragrafele tale (sau, mai degrabă, ceea ce credeai că sunt paragrafe) nu vor primi stilul potrivit.

Elementul br

Mai trebuie să împărțim dialogul în rânduri, așa cum apar în piesa originală. Acum, am putea face acest lucru cu elementul p, dar apoi toate liniile ar fi distanțate egal. și, prin urmare, nu ar fi clar ce linie îi aparține cărui vorbitor. Cum obținem un control mai fin… să zicem, o întrerupere de linie?

Exemplul 2.4. Rupere de linie

MACBETH: My name’s Macbeth.
YOUNG SIWARD: The devil himself could not pronounce a title
More hateful to mine ear.
MACBETH: No, nor more fearful.
YOUNG SIWARD: Thou liest, abhorred tyrant; with my sword
I’ll prove the lie thou speak’st.
[They fight, and young Seward is slain.]
MACBETH: Thou wast born of woman.–
But swords I smile at, weapons laugh to scorn,
Brandish’d by man that’s of a woman born.

Spre deosebire de elementul p, elementul br nu include niciun alt HTML. Nu există un element de închidere . De asemenea, rețineți că nu trebuie să punem un element br final pe ultima linie a fiecărui schimb de dialog. Elementul se va ocupa de ultima întrerupere de linie pentru noi. Așa că acum am separat fiecare vorbitor cu o linie nouă.

Cum arată asta? (Încercați.) Acum, fiecare linie de dialog este pe linia ei de pe pagină. Rândurile sunt considerabil mai ușor de citit.

Vizualizare:

MACBETH: My name’s Macbeth.YOUNG SIWARD: The devil himself could not pronounce a title
More hateful to mine ear.MACBETH: No, nor more fearful.

YOUNG SIWARD: Thou liest, abhorred tyrant; with my sword
I’ll prove the lie thou speak’st.

[They fight, and young Seward is slain.]

MACBETH: Thou wast born of woman.–
But swords I smile at, weapons laugh to scorn,
Brandish’d by man that’s of a woman born.

Ca și în cazul elementului p, mulți designeri web folosesc br incorect. Veți vedea adesea un cod care arată astfel:

Exemplul 2.5. Utilizare br incorectă

Text Block 1: Blah blah blah…
Text Block 2: Blah blah blah…
Text Block 3: Blah blah blah…

Acest cod este chiar mai rău decât codul din Exemplul 2.3, „Utilizare p incorectă”. Niciunul dintre blocurile de text nu este paragraf HTML, ceea ce le face dificil de stilat. Dacă vrei paragrafe, folosește p, nu br.

De fapt, nu există atât de multe locuri în care să doriți să forțați o întrerupere de linie cu br. Cele mai frecvente cazuri sunt:

Versurile cântecului
Rânduri de poezie
Linii de dialog

În afară de asta, există modalități mai elegante de a controla distanța dintre linii, cum ar fi utilizarea unui element p și ajustarea spațierii folosind CSS. Dar asta este o lecție ulterioară.