Linii și paragrafe

Această secțiune descrie HTML asociat cu linii și paragrafe. Începem cu și <P> etichete.

< DIV > Element

<DIV>, a element de nivel bloc, definește pur și simplu un bloc de conținut în pagină. Dincolo de definirea unui bloc, <DIV> în sine nu face nimic. De exemplu, următorul cod creează un element <DIV> cu două paragrafe în interiorul acestuia. Observați că puteți pune <P> elemente în interiorul unui <DIV>.

Ceea ce ne oferă:

Atributul ALIGN

ALIGN setează alinierea conținutului elementului <DIV>. Toate cele patru valori, LEFT, CENTER, RIGHT și , toate sunt bine acceptate. LEFT este valoarea implicită.
Acest cod arată valoarea implicită:

Ceea ce ne oferă:

Elementul paragraf

<P> indică începutul unui nou paragraf. Acest lucru este de obicei redat cu două retururi de căruță, producând o singură linie goală între cele două paragrafe:

Care produce acest lucru:

Atributul ALIGN

ALIGN indică alinierea paragrafului.

Care produce acest lucru:

Atributul CLEAR

CLEAR este recunoscut de unele browsere și funcționează foarte mult ca <BR>. Cu toate acestea, nu este HTML standard și încă nu este acceptat pe scară largă, așa că utilizați <BR> în schimb.

Este necesară eticheta finală P?

W3C spune despre </P>: „Eticheta de final este opțională, deoarece poate fi întotdeauna dedusă de analizor.” Aceasta înseamnă că un nou <P> implică sfârșitul <P> anterior (și orice aliniere setată de ).

Orice alt element la nivel de bloc, cum ar fi <HR> sau <BLOCKQUOTE> paragraful. Cu toate acestea, nu funcționează întotdeauna așa. Unele browsere, de exemplu, vor alinia textul la dreapta chiar și după un tabel. În exemplul următor, MSIE redă partea „după masă” ca fiind aliniată la dreapta, în timp ce Netscape îl redă ca aliniat la stânga:

Redarea MSIE	Redarea Netscape

Dacă setați alinierea sau altă proprietate de stil pentru un element de paragraf, este mai bine să o utilizați </P>. Dacă nu utilizați niciodată seturi de stiluri, atunci puteți ignora în general </P>.

Consultați specificațiile W3C pentru paragrafe pentru mai multe informații despre acest subiect.

Alinierea textului

Puteți seta alinierea oricărui element HTML utilizând regula stilului text-align. text-align poate fi utilizat pentru a seta alinierea pentru un paragraf, o secțiune a documentului sau chiar întregul document. text-align poate fi utilizat pentru a seta alinierea la stânga, la dreapta, la centru sau justificată.

De exemplu, să presupunem că dorim să centrăm un paragraf.Mai întâi, vom crea o clasă de stiluri numită centeralign introducând următorul cod în „secțiunea documentului:

Acum putem seta orice paragraf la clasa centeralign astfel:

Ceea ce ne oferă acest lucru:

Putem aplica aceeași clasă unui element <DIV> pentru a centra o secțiune a pagina:

Ceea ce ne oferă:

Justificare

În mod implicit , majoritatea browserelor redau text cu o margine dreaptă zimțată.

Dacă doriți ca tot textul să fie redat ca într-o carte cu o margine dreaptă uniformă, puteți utiliza o singură regulă de stil. Pentru a seta tot textul în mod justificat copiați următoarele codul i n „secțiunea documentului dvs.

Problema cu justificarea este că multe browsere se confundă cu privire la locul unde este ultima linie de text (ceea ce nu ar trebui să fie justificat). De exemplu, MSIE 4.x este confuz atunci când un bloc de text este urmat imediat de un tabel. Observați în această imagine că ultimul rând de text întinde cuvintele „unul dintre agenții noștri” pe o linie completă:

Pentru a remedia această situație, înconjurați toate blocurile de text cu <P> și </P>:

Acum, MSIE-ul nostru eronat redă lucrurile mai mult sanely:

Indentare

Există mai multe moduri de a indenta paragrafe și secțiuni întregi ale paginii dvs. web Următoarele secțiuni descriu cele patru tehnici principale pentru indentare:

• Indentarea unui paragraf
• Indentarea unei secțiuni a paginii
• Indentarea întregii pagini
• Indentarea primului rând al fiecărui paragraf

Cu toate acestea, înainte de a începe, merită să spunem câteva cuvinte despre <BLOCKQUOTE> . Există o concepție greșită populară că <BLOCKQUOTE> ar trebui utilizat pentru a indenta secțiunile paginii. Această credință provine din faptul că majoritatea browserelor web vizuale redau textul citat ca indentat. Amintiți-vă, totuși, că HTML nu este un limbaj de formatare și oferă rezultate imprevizibile atunci când încercați să îl utilizați ca unul. Utilizați <BLOCKQUOTE> dacă aveți un bloc de text citat, altfel utilizați tehnicile descrise în următoarele câteva paragrafe.

Indentarea unui paragraf

Puteți indenta un singur paragraf folosind stiluri. De exemplu, să presupunem că vrem să indentăm un paragraf 50 de puncte. În primul rând, creăm o clasă numită indentată cu următoarele reguli de stil. Puneți acest cod în „secțiunea documentului dvs.

Acum setăm clasa paragrafului la indentată adăugând un atribut CLASS la <P> tag:

Ceea ce ne oferă acest paragraf indentat:

Indentarea unei secțiuni a unei pagini

Pentru a indenta mai mult de o par agraph vom folosi același stil pe care l-am setat în exemplul anterior. Puneți acest cod în „secțiunea paginii dvs.:

Apoi vom folosi clasa indentată într-un <DIV> element:

Ceea ce ne oferă o secțiune indentată ca aceasta:

Indentarea întregii pagini

Dacă doriți ca întreaga pagină să fie indentată, setați o regulă de stil care setează umplutura dreapta și stânga pentru elementul „. De exemplu, acest stil setează umplutura dreaptă și stângă la 100 de pixeli:

Această tehnică este populară atunci când este utilizată în combinație cu o imagine de fundal. De exemplu, să presupunem că vrem ca această imagine să ruleze în partea stângă a paginii.

Această imagine are o lățime de 56 de pixeli, deci să setăm umplutura la 60.Următorul stil setează imaginea de fundal, setează repetarea la repeat-y (repetați doar vertical în partea stângă a paginii) și setați padding-ul din stânga la 60 (nu vom seta padding-ul drept).

Iată cum ar putea arăta acest lucru:

Indentarea primei linii a fiecărui paragraf

Pentru a indenta prima linie a fiecărui set de paragrafe o regulă de stil folosind text-indent. De exemplu, următorul cod indentează primul rând al fiecărui paragraf 30 de puncte. Copiați acest cod în „secțiunea paginii dvs.:

Acest cod indentează prima linie a fiecărui <P> element, dar probabil veți întâlni o problemă enervantă. Dacă sunteți ca majoritatea designerilor, probabil că nu puneți un P înainte de primul paragraf sau între un antet precum <H1> și textul care îl urmează. Din păcate, exact asta va trebui să faceți dacă doriți alinierea paragrafului. Textul din aceste situații face parte din ceva numit „blocuri anonime” și nu poate fi referit direct. Pentru a-l indenta trebuie să puneți textul într-un element <P>.

Deci, de exemplu, următorul cod nu are un <P> între antet și text, deci textul nu este indentat:

Ceea ce ne oferă:

Acest cod are un <P> între antet și text, deci textul este indentat:

< BR > Element

<BR> inserează o singură retur de transport . În timp ce <P> indică începutul unui nou paragraf, <BR> implică doar o returnare a transportului în cadrul aceluiași paragraf. <BR> este, de obicei, redat cu o singură întoarcere de carucior.

De exemplu, acest cod:

Care produce acest lucru:

Deoarece <BR> nu pornește un nou paragraf, toate atributele de paragraf curent rămân aceleași:

Care produce acest lucru:

Atributul CLEAR

CLEAR spune că, pe lângă inserarea unei întreruperi de linie, dacă există o imagine sau alt obiect în dreapta sau în stânga, treceți și pe lângă asta. De exemplu, acest cod spune că imaginea trebuie aliniată în partea stângă a paginii. Apoi, există un text, apoi LEFT. Următorul text care depășește imaginea:

Care produce acest lucru:

Vino la petrecerea de Halloween! să te distrezi foarte bine.
20:00 până la miezul nopții. Poartă un costum sau vino ca sinele tău înfricoșător!

BOTH este același lucru cu ALL, dar nu este acceptat pe cât mai multe browsere, deci utilizați ALL în schimb.

Elementul CENTER

Recomandare de utilizare: utilizați <DIV> în schimb.

Ceea ce ne oferă:

Care este la fel ca:

Ceea ce ne oferă:

Elementul < HR > Element

<HR> trasează o linie orizontală (o „regulă orizontală”) pe pagină. Asta e. Pentru un concept atât de simplu, regulile orizontale sunt surprinzător de populare. Să începem cu elementele de bază. <HR> nu are etichetă finală și nu necesită atribute:

Care creează această regulă:

<HR> indică de obicei o diviziune în pagină. Lucrurile înainte de regulă se află într-o „secțiune” diferită de lucrurile de după. Din acest motiv, mulți designeri consideră <HR> o etichetă logică, nu o etichetă de aspect.

Atributul NOSHADE

NOSHADE indică faptul că regula ar trebui să fie prezentată ca plană, nu ca tridimensională.Comparați această regulă orizontală regulată:

Cu o regulă NOSHADE:

Ceea ce ne oferă:

NOSHADE este adesea utilizat împreună cu SIZE:

Produce această regulă:

NOSHADE este popular deoarece browserele nu redau regulile tridimensionale foarte bine. Într-adevăr, în multe circumstanțe regula este prezentată în aceeași culoare ca fundalul, făcându-l aproape invizibil.

Atributul SIZE

SIZE indică înălțimea regulii. (Bănuiesc că numirea „HEIGHT” ar fi fost prea ușor.) Pentru lățimea orizontală, consultați WIDTH. Comparați unele dintre aceste dimensiuni:

Ceea ce ne oferă aceste reguli:

În general, browserele nu vor reda un <HR> mai mare de 100 .

Atributul WIDTH

WIDTH setează lățimea orizontală a regulii. Puteți exprima dimensiunea în pixeli sau procentual.

Aceste <HR> sunt setate cu lățimi de pixeli:

Ceea ce ne oferă aceste reguli:

WIDTH este de obicei exprimat ca procent. Dacă utilizați o lățime procentuală, asigurați-vă că includeți valoarea în ghilimele.

Produce aceste reguli:

Implicit este 100%. În mod implicit regula este centrat. Pentru a seta o aliniere diferită, utilizați ALIGN.

Lățimile procentuale utilizați procentul o f lățimea disponibilă, nu lățimea totală a paginii. De exemplu, dacă regula se află într-un tabel, lățimea este un procent din lățimea celulei tabelului.

Care produce acest tabel:

Atributul ALIGN

ALIGN setează alinierea regulă. ALIGN este util numai dacă utilizați și WIDTH.

Dă-ne acest lucru:

< PRE > Element

<PRE> este una dintre cele mai bune etichete din caseta de instrumente HTML. <PRE> marchează textul ca „preformatat” – toate spațiile și returnările de căruțe sunt redate exact așa cum le tastați.

Care produce acest lucru:

<PRE> textul este redat într-un font cu lățime fixă, ceea ce înseamnă că toate caracterele și spațiile sunt aceeași lățime. Lățimea fixă facilitează așezarea textului așa cum doriți, așa că <PRE> este excelent pentru crearea de tabele „rapide și murdare”, precum cea de mai sus. p>

<PRE> NU determină browserul să ignore etichetele. Puteți crea în continuare linkuri și alte bunătăți:

Produce acest lucru:

Când începeți să adăugați markup , devine mai greu să vezi cum apare textul (distanțarea etichetelor în mod egal, așa cum ajută tabelul de mai sus). <PRE> este adesea folosit pentru a cita blocuri mari de text pe care nu doriți să le „HTMLizați”, dar un „ar putea deranja textul. Pentru un tabel mai mare decât câteva linii, este de obicei mai ușor pe termen lung să folosiți codul de tabel.

„Elementul

” împiedică să se producă o întoarcere a căruciorului. De exemplu, următorul cod produce o poezie fără sens de un singur rând lung:

Care produce acest lucru:

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:

Care produce acest lucru:

„Elementul

is for the situation where you have used pentru a preveni întreruperile de linie într-o secțiune de text, apoi vrei să spui „dar poți rupe AICI dacă vrei”.„nu forțează o întrerupere de linie, ci doar permite:

Produce:

După ce am inventat , Netscape now seems to have abandoned it. It"s better to stick to grouping non-breakable sets of words within, astfel:

Ceea ce ne oferă acest paragraf:

Adam este un scriitor tehnic specializat în documentația pentru dezvoltatori și tutoriale.