Etichete font (chip, dimensiune și culoare), blockquote și pre

Tag-uri Font (Face, Dimensiune și Culoare), Blockquote și Formatul de text pre-depășite în HTML pur (fără a utiliza CSS)

Etichete font (chip, dimensiune și culoare), blockquote și pre

Am învățat cum să adăugăm o masă. precum și cum să inserați o imagine în codul HTML prin intermediul etichetei Img. creați un formular web sau o listă prin intermediul etichetelor UL, OL, LI, DL. bine și totuși, în timp util, am reușit să atingem elementele de bază ale aspectului site-urilor populare. Astăzi vom continua să luăm în considerare diferite etichete, și anume Font, Blockquote, Pre, Strong, Em, B, I și altele, care permit efectuarea formatării textului.







Blockquote și formatare pre-HTML

Anterior (înainte de apariția CSS) tag-ul în ghilimele cod HTML blockquote folosit destul de des, pentru că o bucată de text închis în ea, obtinerea de umplutură orizontală, care nu a fost atât de ușor de făcut la momentul din cauza incapacității de a utiliza proprietățile CSS. Elementul Blockquote este unul asociat și pot fi atât etichete inline, cât și etichete bloc (de exemplu, paragrafe P) din interiorul acestuia.

Etichete font (chip, dimensiune și culoare), blockquote și pre

Acum, eticheta Blockquote este încă utilizată pentru formatarea textului, dar apariția citărilor din timpul nostru este deja stabilită, de obicei, utilizând proprietățile CSS care sunt create special pentru aceasta în fișierul cu foile de stil ale șablonului de design. De exemplu, în cazul blogului meu, în stil.css puteți găsi următoarele linii:

Ei bine, după cum veți vedea în acest caz citate, prizonieri în Blockquote, puteți vedea în textul articolului cu un interviu cu șeful schimbului GoGetLinks.

În plus față de citarea în Html, înainte (înainte de apariția CSS), o altă etichetă de formatare, Centrul, a fost utilizată pe scară largă. Este o pereche (un fel de container) și blocată. În acesta, puteți introduce orice elemente de text (atât litere mici cât și bloc), care, ca urmare a acestei acțiuni, vor fi aliniate în centru.

Acum, această etichetă de la Centrul nu este recomandată de validatorul WC3 pentru utilizare, dar poate fi utilizată pentru formatare, de exemplu, în lista de abonamente. atunci când designul de stil va fi dificil de aplicat.

Deci, acum să ne uităm la eticheta Pre. care vă permite să transferați formatarea textului specificat direct în codul sursă. Amintiți-vă, am spus că toate caracterele spațiului alb (spațiu, tabulare și înfășurare linie) în codul HTML vor fi înlocuite cu un singur gol când se analizează codul în browser.

Astfel, elementul Pre interzice reducerea spațiului alb în secțiunea de text care va fi inclusă în ea. Ceea ce este demn de remarcat, pentru fragmentul inclus în Pre, browserul nu va efectua înfășurarea automată a liniei pe caracterele spațiului alb.

Ie toate liniile din elementul Pre vor fi considerate inseparabile de browser - așa cum ați scris în cod, acesta va fi afișat în browser. Mai mult decât atât, în browser pentru a afișa o porțiune de text, formatat folosind tag-ul Pre va fi folosit font monospace, Courier tip nou sau similar cu acesta.

Eticheta Pre este ea însăși blocată, iar în interiorul ei (această etichetă este asociată) poate fi închis numai conținutul liniei (paragrafele P, anteturile H1-H6 etc. nu trebuie plasate în interiorul acesteia).

În Html există încă un nume de tag bloc care este destinat formatării textului - Adresa. În cadrul acestei etichete, numai conținutul liniei poate fi plasat în conformitate cu standardele de validare, care vor fi afișate cu caractere cursive în browser.

Font - lucrează cu font color și text în Html pur

Amintiți-vă, am vorbit despre culorile din codul HTML. Deci, mai devreme în limbajul de marcare hipertext, atunci când nu a existat nici o discuție despre CSS, pentru a seta culoarea textului într-un document folosind un atribut special de text, care este prescris în tag-ul body (și prin bgcolor atribut ar putea seta culoarea de fundal a documentului):

Dacă doriți să modificați culoarea unei mici fragmente de text, ați folosit atributul Culoare în eticheta Font. care este în prezent depășită și nu este recomandat pentru utilizare de către validator W3C, dar poate fi încă găsite în codul unor site-uri de motoare (sisteme de management al conținutului și CMS, pe care a existat un discurs), și în aceeași listă de discuții poate fi utilizat.

Deși, desigur, acum este mult mai corect să folosim proprietățile CSS în loc de Font. Dar nu este important, vom vorbi despre acest element învechit de dezvoltare generală, ca să spunem așa.

Eticheta Font este un șir de caractere minuscule și, prin urmare, numai elementele mici pot fi închise în interiorul acesteia (nu ar trebui să existe paragrafe și anteturi în interiorul acesteia, altfel codul HTML nu va mai fi valabil). Firește, este o pereche, adică îl utilizați pentru a închide cuvintele într-un fel de container pentru formatarea ulterioară a acestuia.







Formatul învechit - câteva cuvinte roșii colorate utilizând atributul Font și culoarea sa. Dar acest element nu poate numai să schimbe culoarea cuvântului din interiorul acestuia, ci și să-și schimbe dimensiunea (atributul Size) și fața fontului (atributul Face).

Prin setarea dimensiunii fontului utilizând atributul Size al etichetei Font, puteți utiliza doar șapte valori (1 la 7 nu sunt pixeli, ci dimensiuni relative). Și dimensiunea fontului de bază acceptată în browser în mod implicit. a corespuns valorii de dimensiune egală cu trei, iar cele șase au corespuns dimensiunii antetului H1 acceptat în acest browser. Toate celelalte cifre pentru dimensiune au fost la discreția acestui browser particular.

Etichete font (chip, dimensiune și culoare), blockquote și pre

Setați tipul de font în Html pur utilizând elementul Face pentru elementul Font

Acum, să luăm în considerare sarcina de a scrie un font într-un cod Html pur (fără a utiliza tabele de stil în cascadă) cu Face.

În general, toate fonturile sunt împărțite în mai multe grupuri mari:

  1. Serif (serif) sau, într-un alt mod, cu serifi (serifii urmează marginea superioară și inferioară a literelor acestor fonturi). Acest tip se referă la Times New Roman.
  2. Tăiat (sans-serif) sau, altfel, fără serifi, al cărui reprezentant strălucitor este Arial.
  3. Monospace - toate literele din aceste fonturi au aceeași lățime. Un reprezentant tipic este același Curier.

În orice browser, există setări în care puteți specifica fontul implicit și mărimea acestuia pentru fiecare dintre familiile de mai sus. De exemplu, în Firefox pentru a ajunge la aceste setări, prin selectarea elementelor de meniu și fila „Setări“ - „Options“ - „Conținut“ - „Advanced“:

Etichete font (chip, dimensiune și culoare), blockquote și pre

Ie în orice browser va fi dat un font și mărimea acestuia pentru oricare dintre cele trei familii principale (serif, sans-serif și monospace). Dacă în codul HTML sunt specificate în mod explicit fața și dimensiunea, acestea vor fi utilizate de browser pentru a fi afișate.

Dar poate exista o situație în care fontul dorit nu poate fi pur și simplu instalat pe computerul utilizatorului care vizionează site-ul dvs. Ce va face atunci browserul?

Întrebarea este destul de interesantă și nu trebuie să dezamăgi răspunsul, trebuie doar să setați corect fața fontului în atributul Face al etichetei Font sau în proprietatea CSS a tabelului de stil cascadă.

Să vedem asta în exemplul etichetei Font. Așadar, închidem piesa dorită în fonturi și prescriim în elementul de deschidere valorile pentru atributul Face sub forma unei liste de fonturi pe care doriți să o utilizați aici (în ordinea descrescătoare a priorității lor). De exemplu, aceasta:

Ie browserul, atunci când analizează acest cod, se împiedică la o astfel de înregistrare, va încerca să găsească mai întâi fontul instalat pe computerul utilizatorului numit Verdana, iar dacă nu găsește, atunci va încerca să deseneze acest fragment de text utilizând Arial.

Ei bine, dacă se întâmplă cel mai rău și chiar Arial nu pe computerul utilizatorului va fi găsit, atunci browser-ul va face această bucată de font de text, care este specificat în setările de font implicit al browser-ului pentru familie (în acest caz, familia Sans-Serif).

Dar, dacă nu specificați o etichetă Face Font atribut la sfârșitul numelui de familie (în acest exemplu, sans-serif), se va lua fontul pe care browser-ul este implicit pentru toate ocaziile, și el nu poate fi în din familia pe care doriți.

După cum probabil înțelegeți, există o problemă în utilizarea absolut orice font pe site. pe care doriți. De ce? Deoarece este probabil ca unii dintre vizitatorii site-ului dvs. să nu fie instalați pe computerele de pe calculatoarele lor.

Cu toate acestea, există un set de fonturi care se găsesc probabil pe computerele care rulează Windows, precum și pe Linux și Macintosh și care vor face parte din livrarea de bază a tuturor acestor sisteme de operare.

Etichete font (chip, dimensiune și culoare), blockquote și pre

Strong, Em - etichete ale selecțiilor logice și vizuale în text

Dacă acum nu ar exista nici un CSS, atunci ar fi trebuit să descriu scopul acestor sau acele etichete ale formatării textului logic și fizic (vizual). Dar, din moment ce CSS este acum deja utilizat pentru marea majoritate a site-urilor, rolul acestor etichete în codul HTML este redus aproape la zero, asa ca am alerga mai repede prin ele și să explice de ce au fost folosite înainte (și unele utilizate în prezent).

Etichetele vizuale sunt concepute pentru a schimba conturul textului care va fi vizibil pentru vizitatorii site-ului dvs., dar care nu ar trebui să primească o atenție deosebită motoarelor de căutare.

În mod teoretic, aceleași etichete de formatare a aceluiași text sunt orientate pentru a indica orice accent pe motoarele de căutare. Pentru utilizator, selectarea acestor elemente va schimba, de asemenea, aspectul cuvintelor selectate.

Dacă vă amintiți, optimizatori nu atât de mult timp în urmă avizați dedice spațiu semnificativ cuvântului cheie (cum pentru a evidenția cuvinte cheie în text) etichetat format logic puternic și EM, pe care utilizatorul va apărea ca de obicei și cu caractere aldine cursive.

Dar pentru descărcarea de gestiune, fără cuvinte cheie sfătuiți să utilizeze elementele HTML ale «B» și «eu», acel utilizator din nou sa uitat prea ar dori bolding și cursive, dar motoarele de căutare nu iau în considerare, ca acestea nu sunt tag-uri logice de formatare.

Acum, toate acestea practic nu funcționează așa cum a fost intenționat și facem selecția cuvintelor cheie cu Strong și EM mai mult decât obișnuit decât să sperăm cu adevărat anumite dividende din partea motoarelor de căutare.

Deși, cine știe, poate exista un pic de influență Strong și EM pe optimizarea textului rămâne încă (citiți despre promovarea site-urilor pe cont propriu).

Deci, în afară de cele deja menționate "B" și "I" (accentuate în caractere aldine și italice) la categoria de formatare vizuală, vă puteți referi deja revizuit la începutul articolului Font, Pre, precum și etichete:

  1. "U" - sublinierea evidențierii
  2. Strike - strikethrough
  3. "Sup" - superscript
  4. "Sub" - indicele
  5. "Tt" - font monospațiu
  6. «Big» - crește fontul
  7. "Mic" - reduceți fontul

Etichete font (chip, dimensiune și culoare), blockquote și pre

Ei bine, acum să ne uităm la lista elementelor de formatare a textului logic:

Încă o dată, repet că aceste etichete de formatare sunt în mare parte foarte rare atunci când scriu codul acum, dar știind încă că scopul lor nu va fi inutil.

Mult noroc pentru tine! Ne vedem în curând pe paginile blogului KtoNaNovenkogo.ru







Articole similare

Trimiteți-le prietenilor: