Lecția 5.

În această lecție:
1. Să aflăm cum să o facem cod html a fost mai convenabil și mai ușor de citit pentru noi.
2. Să vedem cum să împachetăm corect o linie de text.

Facerea codului html convenabil.

Acum codul nostru este clar și ușor de citit, deoarece există puțin text și practic nu există etichete. Când creăm o pagină mai complexă, vor fi multe etichete, așa că va fi dificil să o găsim pe cea potrivită.

Pentru a evita dezordinea de etichete, trebuie să aranjați inițial etichetele și liniile, astfel încât acestea să fie mai ușor de perceput vizual. Când browserul citește informații de la pagini html, nu contează pentru el câte spații și câte linii goale sunt în cod.

Am schimbat textul din codul paginii în raport cu cel creat de noi, dar nu contează. Imaginile din stânga și din dreapta arată același cod. Ambele opțiuni vor fi afișate de browser pe ecranul monitorului exact la fel. De acord, lucrul cu codul afișat în dreapta va fi mult mai ușor decât cu cel din stânga.

Codul la care ne uităm este foarte simplu, dar și acum diferența de percepție vizuală este vizibilă. Nu există reguli specifice pentru „a pune lucrurile în ordine”; fiecare maestru decide singur cum este mai convenabil pentru el să lucreze.

ruptură de linie HTML. Etichetați <br>.

Fii atent la imagine. În prima versiune textul este scris pe un rând, în a doua versiune pe două rânduri.

Browserul va afișa ambele opțiuni la fel. Textul va fi scris pe un singur rând:

Te întrebi de ce este asta? Într-adevăr, într-unul dintre coduri, o parte a textului este mutată pe o altă linie. Ar fi logic ca în browser să fie mutat și o parte din text pe altă linie, dar html are propria logică în acest sens. Dacă facem o întrerupere de linie în codul html, atunci pentru browser aceasta este echivalentă cu un spațiu(ca un spațiu regulat între cuvintele din text). Dacă mutăm o parte a textului nu cu un rând în jos, ci 2 sau 3 (orice număr), atunci browserul va considera în continuare această distanță ca un spațiu obișnuit între cuvinte și atunci când este afișat pe ecran, textul va fi scris într-o singură linie. .

Etichetați <br>

Când ne-am familiarizat cu etichetele în a treia lecție, am menționat că există etichete care nu necesită închidere. Etichetă <br> una dintre ele este folosită pentru întreruperi de linie.
Să-l aplicăm în cod:

Am introdus o etichetă <br>în codul nostru html și acum, când lansați fișierul prin browser, o parte a textului va fi transferată la următoarea linie.
* Nu uitați să salvați modificările în Notepad (Ctrl + S) și să reîmprospătați pagina în browser (F5).

Toate sau aproape toate sunt folosite în aspect. Câți dintre noi am pus în cod
Mă întreb: chiar este nevoie de el aici? Printre designerii de layout fără experiență puteți vedea adesea machete de această natură: aspectul meniului

Și puteți găsi, de asemenea, aceste paragrafe minunate:

Poate apărea întrebarea: dacă site-ul afișează totul după design, ce este în neregulă? Dar nu este cazul aici - acest cod teribil, strâmb, șchiop, care vorbește despre calificările foarte scăzute ale designerului de layout, care nici măcar nu s-a obosit să înțeleagă sarcinile.

aplica
pentru a forma paragrafe, este același lucru cu ciocanul cuielor cu o șurubelniță (acesta este, de asemenea, un instrument, de ce să nu batem un alt cui).

Pentru ce este eticheta?
?

actualizare 23/02/10 - cu „trucuri” cu spații albe: înainte trebuie să fii atent, pentru că Cu această formatare, liniile care nu se încadrează în bloc nu sunt transferate automat la linie nouă. Acest lucru este valabil mai ales pentru modelele din cauciuc. În astfel de cazuri, mai trebuie să utilizați
.

P (spațiu alb: pre; )

Nota

Comunitatea de fani ai layout-ului semantic nu a fost inclusă deloc
V .

Unde nu ar trebui să fie
?

• utilizați etichete pentru scopul propus: pentru paragrafe - aceasta< >, pentru liste și -< >, < >, < >etc.;
• pentru a formata textul și a seta indentări, utilizați , cum ar fi , ;
• utilizare elemente individuale pentru a crea șiruri de caractere (elementele de marcare neutre sunt cele mai bune pentru aceasta< >Și< >).

Să ne uităm la câteva exemple practice. Paragrafe:

Soluția de înaltă performanță are grozav debitului- până la 6,2 Gbps și este ideal nu numai pentru transmisia de voce și video, ci și pentru aplicații noi care necesită lățime de bandă, cum ar fi jocurile online.

SGSN este capabil să accepte până la 1,5 milioane de sesiuni PDP active.

P (marja-jos: 12px; )

Mai multe linii de numere de telefon:

Când este afișat documente textÎn browser, locația întreruperii de linie în cadrul unui paragraf este determinată automat în funcție de dimensiunea fonturilor și de dimensiunea ferestrei de vizualizare. Întrerupțiile de linie pot fi efectuate numai folosind caractere separatoare de cuvinte (de exemplu, spații). Uneori, în documente, trebuie să setați un avans de linie forțat, care este implementat indiferent de setările browserului. Acest lucru se face folosind eticheta de alimentare forțată a liniilor.
, care nu are o etichetă de închidere corespunzătoare. Activarea unei etichete
în textul documentului se va asigura că textul ulterior este plasat la începutul unei noi linii. De exemplu, această abordare poate fi folosită pentru a crea structuri de tip listă fără a utiliza etichete speciale de marcare a listei. Sau, de exemplu, această etichetă nu poate fi folosită pentru a afișa poezii etc.

Iată un exemplu de utilizare a avansului de linie forțat (Fig. 1.8):

Petrograd peste întunecat

Noiembrie a respirat frigul de toamnă.

Stropind cu un val zgomotos

Până la marginile gardului tău subțire,

Neva se zvârcoli ca o persoană bolnavă

Neliniștit în patul meu.

A.S. Pușkin. Călăreț de bronz

Orez. 1.8. Etichetă
poate fi folosit pentru a forța un avans de linie

Spre deosebire de eticheta de paragraf

Când utilizați eticheta
nu va fi generat un șir gol.

Folosind o etichetă
necesită prudență - este posibil ca browserul să fi făcut deja o întrerupere de rând cu unul sau două cuvinte înainte de a întâlni eticheta dvs.
. Acest lucru se întâmplă dacă lățimea ferestrei de vizualizare a cititorului este mai mică decât aceeași setare a programului cu care ați testat documentul. În acest caz, se poate dovedi că un singur cuvânt rămâne pe o linie în mijlocul unui paragraf, ruinând astfel frumusețea aspectului documentului.

Notă

Când utilizați eticheta
Pentru a întrerupe textul în jurul unei imagini sau unui tabel, puteți seta parametrul CLEAR pentru a opri împachetarea textului. Puteți citi despre acest lucru în capitolele 3 și 4.

Etichete u

Există situații în care trebuie să efectuați operația opusă - dezactivați avansul de linie. Există o etichetă de container pentru asta . Textul marcat cu această etichetă este garantat să se potrivească pe o singură linie, indiferent de lungimea acestuia. Dacă linia rezultată se extinde dincolo de fereastra de vizualizare a browserului, va apărea o bară de defilare orizontală.

Marcarea textului cu o etichetă de linie care nu se întrerupe poți obține șiruri foarte lungi. Pentru a evita acest lucru, puteți indica browserului cititorului locația unui posibil line feed, care va fi efectuat doar atunci când este necesar (așa-numitul line feed „soft”). Acest lucru se poate face prin plasarea unei etichete în locul potrivit în text (Word BReak), care este același cu eticheta
, nu are nevoie de o etichetă de închidere.

Notă

Etichetă nu este acceptat deloc de browserul Netscape. Browser Microsoft Internet Explorer recunoaște această etichetă numai în textul etichetat .