caracter de filă HTML. Spații și caractere albe în HTML

Bună ziua, dragi cititori ai blogului. Puțin mai devreme, am reușit deja să vorbim despre asta și am aflat și despre designul din acesta. Astăzi avem la rândul său conceptul de spațiu alb în HTML, precum și formatarea codului asociată atunci când îl scriem (pentru comoditatea citirii și percepției sale ulterioare).

Ei bine, din cauza faptului că vom atinge subiectul spațiului nerupere și a silabei soft, va trebui să ne concentrăm atenția asupra așa-numitelor caractere speciale sau mnemonice folosite în limbaj HTML, care vă va permite să adăugați la cod document web o multime de caractere suplimentare, ca cel deja menționat mai sus. Dar mai întâi lucrurile.

Spații și caractere albe în HTML

Înainte de a trece la problema formatării textului folosind etichete special concepute pentru acest lucru (paragraf, titluri etc.), vreau să mă opresc asupra modului în care sunt interpretate spațiile, întrerupțiile de rând (Enter) și tabularea în limbajul HTML și cum este ruperea. a efectuat text în fereastra browserului când este redimensionat.

Adevărat, pentru acest tip de formatare vizuală (care nu va fi vizibilă pe pagina web), cel mai adesea nu spațiile în sine sunt folosite, ci mai degrabă caracterele de tabulație și de ruptură de linie. Există o astfel de regulă - atunci când începeți să scrieți o etichetă HTML imbricată, atunci indentare folosind file(Tasta Tab de pe tastatură), iar când închideți această etichetă, eliminați indentarea (combinația de taste Shift+Tab de pe tastatură).

Acest lucru trebuie făcut astfel încât etichetele de deschidere și de închidere să fie la același nivel vertical (la același număr de file din marginea dreaptă a paginii în editorul dvs. HTML, de exemplu, Notepad++, despre care am scris). În plus, vă sfătuiesc să faceți imediat după ce ați scris elementul de deschidere să faceți mai multe întreruperi de linie și să o scrieți imediat pe cea de închidere la același nivel (număr de file), astfel încât să nu uitați să faceți acest lucru mai târziu.

Acestea. elementele de deschidere și de închidere ar trebui să fie la același nivel pe verticală, iar etichetele interne ar trebui să fie deplasate cu un caracter de filă, iar elementele de închidere și deschidere ar trebui să fie plasate din nou la același nivel.

Pentru web simplă documentele acest lucru poate părea exagerat, dar atunci când se creează altele mai mult sau mai puțin complexe, acestea codul va deveni mult mai clarși lizibilă datorită abundenței de spații și, de asemenea, va fi mult mai ușor de detectat erorile datorită dispoziției simetrice a etichetelor.

Caractere speciale sau mnemonice în codul HTML

Deci, acum să vorbim despre așa-numitul caractere speciale, a cărui ușurință în utilizare am anunțat-o la începutul acestui articol. Caracterele speciale sunt uneori numite mnemonice sau substituții. Acestea sunt menite să rezolve o problemă care a apărut în limbajul de marcare hipertext de destul de mult timp, legată de codificările folosite.

Când introduceți text de la tastatură, caracterele limbii dvs. sunt codificate în avans algoritm stabilit, iar apoi sunt afișate pe site folosind fonturile pe care le utilizați (unde să găsiți și cum să instalați pentru site) datorită decodării.

Există o mulțime de codificări, dar pentru limbajul HTML a fost adoptată implicit o versiune extinsă a codificărilor.

În această codificare a textului, a fost posibil să se înregistreze doar 256 de caractere - 128 din ASCII și alte 128 pentru litere rusești. Ca urmare, a apărut o problemă cu utilizarea pe site-uri a caracterelor care nu sunt incluse în ASCII și nu sunt litere rusești incluse în codificări Windows 1251 (CP1251). Ei bine, ați decis să utilizați o tildă sau un apostrof, dar astfel de posibilități sunt inerente limbajului folosit Codificare HTML nu ipotecat.

Pentru astfel de cazuri au fost inventate substituțiile sau, cu alte cuvinte, mnemonicii. Inițial caracterele speciale aveau vizualizare digitalăînregistrări, dar apoi pentru cele mai comune au fost adăugate omologii lor de scrisori pentru a le face mai ușor de reținut.

ÎN înţelegere generală, un mnemonic este un caracter care începe cu un „&” și se termină cu un punct și virgulă „;”. Pe baza acestor caracteristici browserul, atunci când analizează codul HTML, extrage caractere speciale din acesta. Ampersand dintr-un cod wildcard numeric trebuie să fie imediat urmat de semnul lire sterline „#”, numit uneori hash. Și abia apoi urmează codul digital al caracterului dorit în codificarea Unicode.

Mai mult de 60.000 de caractere pot fi scrise în Unicode - principalul lucru este că simbolul mnemonic de care aveți nevoie este susținut de fontul folosit pe site-ul dvs. Există fonturi care acceptă aproape toate caracterele Unicode și există opțiuni doar cu un anumit set de caractere.

Lista completă a personajelor speciale va fi pur și simplu uriașă, dar cele mai frecvent utilizate mnemonice puteți împrumuta de exemplu din acest tabel:

Există destul de interesant modalitate de a obține codul Mnemonic HTML pentru semnul de care ai nevoie. Pentru a face acest lucru, va fi suficient să deschideți Editor Microsoft Cuvânt, creează document nou si alege din meniul de sus„Inserare” - „Simbol” (folosesc versiunea 2003, deci nu știu cum să fac o operație similară în versiunile ulterioare).

În fereastra care se deschide, trebuie să selectați un font, de exemplu, Times New Roman (sau orice altul care va fi prezent în mod evident pe majoritatea computerelor vizitatorilor site-ului dvs. - Courier sau Arial, de exemplu).

Adaugă din lista care se deschide la a ta document Word toate caracterele speciale de care aveți nevoie și salvați acest document Word ca pagină web (selectat din lista derulantă „.html” la salvare). Ei bine, atunci tot ce trebuie să faceți este să deschideți această pagină web în orice Editor HTML(același Notepad++ va face) și vei vedea totul coduri digitale mnemonice de care aveți nevoie:

Metoda este puțin complicată, dar dacă doriți să utilizați un caracter special rar pe pagina site-ului dvs., atunci va fi mai ușor decât să căutați pe Internet tabele precum cel prezentat mai sus. Va trebui să lipiți codul de caractere speciale rezultat în Locul potrivit iar în loc de acesta pe pagina web, browserul va afișa caracterul de care aveți nevoie (de exemplu, un spațiu neîntrerupt).

Spațiu care nu se rupe și cratima moale în exemple

După cum am menționat deja mai sus și după cum puteți vedea din tabelul de caractere speciale dat chiar mai sus, unele mnemonice în HTML au primit, pe lângă digital, și o desemnare simbolică pentru mai mult. memorare simplă. Acestea. În loc de semnul hash „#” (hash), cuvintele sunt folosite în variante simbolice. De exemplu, același spațiu neîntrerupt poate fi scris fie ca (mnemonic digital), fie ca (caracter).

Când scrieți articole, dacă trebuie să introduceți un ampersand (&) sau un parantez unghiular deschis (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.

Adică, dacă scrieți un articol în care va trebui să inserați, de exemplu, afișarea unei etichete în text< body>sau trebuie doar să inserați un semn mai puțin decât (<), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.

Prin urmare, va trebui să introduceți următoarea construcție pentru a rezolva o problemă similară:

Același lucru este valabil și pentru afișarea codului mnemotecilor, deoarece acestea încep cu un ampersand. Va trebui să inserați codul în text, înlocuind semnul ampersand cu înlocuirea acestuia (caracter special):

Acest lucru va trebui făcut pentru a ajunge pe pagină<, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.

Cel mai probabil vei folosi, de asemenea, un spațiu care nu se întrerupe, care pe o pagină web va arăta ca un spațiu obișnuit, dar browserul nu îl va trata deloc ca un caracter de spațiu și nu va efectua transferuri pe acesta(de exemplu, acest lucru va fi potrivit pentru expresii precum 1400 GB etc., pe care nu ar fi recomandabil să le împărțiți cu silabe în linii diferite):

1400 GB.

Uneori poate apărea situația inversă, când textul conține cuvinte foarte lungi și doriți să vă asigurați că, dacă este necesar, browserul Aș putea sparge aceste cuvinte cu silabe. În astfel de scopuri, este furnizat un simbol special „transfer soft” -

Cuvânt lung, lung;

Când devine necesar să treceți la o altă linie, browserul va folosi o cratimă în loc de mnemonicul cu cratima moale și va trimite restul cuvântului la linia următoare. Dacă există suficient spațiu pentru a plasa întreg acest cuvânt pe o singură linie, atunci browserul nu va desena nicio linie nouă. Este atat de simplu.

Multă baftă! Ne vedem curând pe paginile site-ului blogului

Puteți viziona mai multe videoclipuri accesând

S-ar putea să fiți interesat

MailTo - ce este și cum se creează un link în Html pentru a trimite un e-mail
Etichete și atribute ale titlurilor H1-H6, linie orizontală Hr, întrerupere de linie Br și paragraful P conform standardului Html 4.01
Cum să inserați un link și o imagine (foto) în etichetele HTML - IMG și A

Bună ziua, dragi cititori ai blogului! Cei care s-au familiarizat cel puțin superficial cu ea probabil că au luat deja notă, deși în termeni generali. Aceasta înseamnă că au o idee despre ce simboluri HTML sunt utilizate în general în codul documentului.

În articolul de astăzi vom încerca să ne dăm seama ce este un spațiu în HTML și în ce cazuri poate fi folosit caractere cu spații albe atunci când formatați codul în sine pentru o citire ușoară. Vom afla când este necesar să folosim un spațiu care nu se întrerupe și, de asemenea, vom face cunoștință cu alte personaje speciale (sau, așa cum sunt numite și mnemonice).

De fapt, v-aș sfătui să nu ignorați subiectul utilizării diferitelor caractere speciale, deoarece aceasta este o componentă importantă care vă permite să finalizați studiul limbajului de marcare hipertext. În general, informațiile furnizate în această publicație cu siguranță nu vor fi de prisos. Ei bine, acum la obiect.

Spații și caractere albe în HTML

În primul rând, este o notă importantă de făcut. Există taste speciale pe tastatura computerului care vă permit să separați text (mai multe despre asta mai jos). Cu toate acestea, doar o bară de spațiu largă oferă separare între cuvinte nu numai în editor, ci și în fereastra browserului. Există nuanțe la ruperea liniilor și la indentarea de la margini.

După cum știți, afișarea anumitor elemente într-un browser web este determinată de etichete. Pentru a formata textul, se folosește binecunoscutul , care este bazat pe blocuri. Adică, conținutul său este situat pe toată lățimea disponibilă.

La înfășurați liniile din paragraful P, trebuie să utilizați o singură etichetă BR, cu care puteți face acest lucru. Să presupunem că trebuie să inserăm în text câteva rânduri dintr-o poezie pe care o scriem într-un editor de text:

În ciuda faptului că rândurile versetului sunt localizate corect și că cratimele sunt făcute în locurile potrivite, totul va arăta diferit în browser:

Pentru a obține aceeași afișare într-o fereastră de browser web, trebuie să scrieți BR la fiecare întrerupere de linie:

Acum am îndeplinit sarcina și liniile poetice vor fi afișate complet corect în browser:

Astfel, pauzele de linie necesare sunt finalizate. O altă caracteristică care trebuie remarcată aici este că mai multe spații care vin unul după altul sunt afișate de browserul web ca unul singur. Puteți verifica acest lucru dacă în același editor încercați să puneți nu unul, ci mai multe spații între două cuvinte și, făcând clic pe butonul „Salvare”, priviți rezultatul în browser.

Spațiu, tabulație și întrerupere de linie

Practic, cu astea caractere cu spații albe Ne cunoaștem imediat ce începem să lucrăm cu textul în editor și îl formatăm în forma necesară. Pentru a implementa o astfel de sarcină, există chei speciale, fiecare dintre ele corespunde caracterului său spațial:

• Bara de spațiu este cea mai largă tastă de pe tastatura unui computer (fără etichetă);
• Tab - o tastă în stânga cu inscripția „Tab” și două săgeți îndreptate în direcții diferite;
• Rupere de linie - tasta „Enter”.

Totuși, așa cum am spus mai sus, obținem rezultatul final dorit nu numai într-un editor de text, ci și într-un browser, doar atunci când folosim prima cheie. Toate cele trei taste (inclusiv tab și ruptură de linie sunt utile atunci când formatați codul HTML. Să presupunem că așa arată un fragment de cod în NotePad++ (există o mulțime de informații despre acest editor) când se afișează toate caracterele spațiilor albe:

Obținem cod ușor de citit și de înțeles datorită spațiilor. Săgețile portocalii indică indentări create folosind tasta Tab, iar simbolurile CR și LF indică rupturi de linie create folosind tasta Enter.

Containerele imbricate unul în celălalt sunt vizualizate, iar etichetele de deschidere și de închidere sunt clar vizibile. În această formă, acest cod poate fi editat cu ușurință. Acum compară-l cu același cod, care nu are o astfel de împărțire a textului:

În același mod, folosind caractere cu spații albe, puteți scrie reguli CSS care vor arăta vizual clare și digerabile:

După ce aduceți toate stilurile la un numitor comun și finalizați complet editarea fișierului de stiluri, puteți efectua editarea eliminând toate spațiile din cod. Acest lucru este necesar pentru a crește, ceea ce este foarte important atunci când promovați o resursă.

Caractere speciale (sau mnemonice) în codul HTML

Acum să ne uităm la cazurile în care este necesar să folosim caracterele speciale pe care le-am menționat la începutul articolului. Caracterele speciale HTML, uneori numite mnemonice, au fost introduse pentru a rezolva o problemă de lungă durată cu codificările apărute în limbajul de marcare hipertext.

Când introduceți text pe tastatură, caracterele limbii pe care o utilizați sunt codificate. În browserul web, textul tastat va fi afișat folosind fonturile pe care le-ați selectat ca urmare a operației de decodare inversă.

Faptul este că există multe astfel de codificări, acum nu avem scopul de a le analiza în detaliu. Doar că fiecăruia dintre ele poate lipsi anumite simboluri, care, totuși, trebuie afișate. Să presupunem că simți nevoia de a scrie ghilimele simple sau un semn de accent, dar aceste pictograme pur și simplu nu sunt incluse în set.

Pentru a elimina această problemă, a fost introdus un sistem de simboluri speciale, care include un număr mare de mnemonice diferite. Toate încep cu un ampersand „&” și de obicei se termină cu punct și virgulă „;”. La început, fiecare personaj special avea propriul său cod digital. De exemplu, pentru un spațiu care nu se rupe, pe care îl vom analiza mai detaliat mai jos, va fi valabilă următoarea intrare:

Dar după ceva timp, celor mai comune simboluri li s-au atribuit analogi cu litere (mnemonice) pentru a le face mai ușor de reținut. Să presupunem că pentru același spațiu care nu se rupe arată așa:

Ca rezultat, browserul afișează simbolul corespunzător. Lista mnemotecilor este foarte voluminoasă, caracterele speciale utilizate cel mai frecvent în HTML puteti descoperi din tabelul de mai jos:

Cazuri de utilizare a unor caractere speciale, inclusiv spațiu care nu se întrerupe și cratima moale

Dacă ați studiat deja puțin tabelul, ați primit confirmarea a ceea ce am spus mai sus, că pentru a afișa toate caracterele speciale, se folosește un cod digital () sau analogul său alfabetic (mnemonice simbolică), unde în loc de un set de hash se scriu semne și cifre, litere ().

Acum să vedem când să folosim aceste coduri. Să presupunem că într-un articol trebuie să indicați o etichetă HTML în scop informativ, de exemplu,