Font html alb. Setați fontul textului. Atributul feței etichetei fontului
Mărimea fontului de pe site poate fi setată după cum urmează: Ajutor HTML, și folosind CSS. Să luăm în considerare ambele opțiuni.
Setarea dimensiunii fontului folosind HTML
Mărimea fontului de pe pagină poate fi determinată folosind eticheta font HTML. În articol ne-am uitat deja la etichetă fontși atributele sale. Unul dintre atributele acestei etichete este mărimea, care vă permite să setați dimensiunea fontului. Se aplică după cum urmează:
Creator de site-uri web "Nubex"
mărimea poate lua valori de la 1 la 7 (valoarea implicită este 3, ceea ce corespunde la 13,5 puncte pentru fontul Times New Roman). O altă opțiune pentru specificarea atributului este „+1” sau „-1”. Aceasta înseamnă că dimensiunea va fi modificată față de bază cu 1 punct mai mult sau, respectiv, mai puțin.
Această metodă este destul de ușor de utilizat și este indispensabilă dacă trebuie să modificați dimensiunea fontului unei bucăți mici de text. În caz contrar, este recomandat să stilați textul folosind CSS.
Setarea dimensiunii fontului folosind CSS
În CSS, puteți modifica dimensiunea fontului folosind proprietatea marimea fontului, care se aplică după cum urmează:
În exemplul de mai jos, dimensiunea fontului este setată în pixeli. Dar există și alte moduri de a seta dimensiunea:
- mare, mic, mediu- setați dimensiunea absolută (mică, medie, mare). Pot fi utilizate și valorile extra-mic (x-small, xx-small), extra-mari (x-mari, xx-mari).
- mai mare, mai mic- setați dimensiunea relativă (mai mică sau mai mare în raport cu elementul părinte).
- 100% - se stabilește dimensiunea relativă (ca procent față de părinte). De exemplu: h1 ( font-size: 180%; ) Aceasta înseamnă dimensiunea etichetei H1 va fi 180% din dimensiunea bazei font.
- Alte opțiuni pentru setarea dimensiunii relative:
- 5ex- înseamnă că dimensiunea va fi de 5 litere înălțimi X din fontul de bază;
- 14 pt- 14 puncte;
- 22px- 22 pixeli;
- 1vw- 1% din lățimea ferestrei browserului;
- 1vh- 1% din înălțimea ferestrei browserului;
Pentru a schimba fontul utilizați o etichetă cu atributul FACE. Puteți specifica fontul după nume (Arial, Tahoma, Verdana) sau tip (de exemplu, monospace). Este recomandabil să enumerați mai multe nume de fonturi pentru a evita situația în care se dovedește că utilizatorul nu are instalat fontul necesar. Recomand să folosiți cel puțin unul dintre fonturile general acceptate (de exemplu Arial). Nu recomand să folosiți mai mult de 2-3 fonturi diferite pe o pagină, altfel pagina va arăta stângace și neprofesională.
Exemplu:
Modificarea dimensiunii fontului unei pagini html
Pentru a modifica dimensiunea fontului, utilizați atributul SIZE. Cum font mai mare, cu atât textul devine mai ușor de înțeles. In orice caz, font mic vă permite să încadrați mai multe informații în ecran. Folosind acest atribut cu eticheta
Puteți schimba fontul folosind etichete Și . mărește fontul fragmentul specificatîn raport cu textul anterior, și , în consecință, reduce.
Schimbând dimensiunea literelor individuale, puteți obține efecte interesante. De exemplu, în acest fel puteți obține un drop cap - o literă mare mare la începutul unui paragraf.
Exemplu:
Selectarea culorii fontului unei pagini html
Afișarea secțiunilor de text pe o pagină Web în fonturi culoare diferita o face atractivă.
Utilizarea atributului TEXT în contextul unei etichete
, puteți schimba întreaga culoare a textului unei pagini web. Aplicație Atributul COLOR cu eticheta (are o prioritate mai mare) vă permite să interacționați cu aspectul unei singure bucăți de text.Pentru a schimba culoarea textului, trebuie să cunoașteți numele culorii sau a acesteia cod hexazecimal. Codul este format din simbolul lire sterline # și un număr care reprezintă intensitatea componentelor roșii, verzi și albastre ale culorii. Numai 16 culori standard pot fi menționate prin nume.
Denumirea culorilor Cod aqua ##00FFFF negru ##000000 albastru ##0000FF fuchsia ##FF00FF gri ##808080 verde ##008000 lime ##00FF00 maroon ##800000 bleumarin ##000080 olive ##808080008 ##808008008 #FF0000 argintiu ##C0C0C0 teal ##008080 alb ##FFFFFF galben ##FFFF00
S-ar părea, de ce să știți etichetele HTML pentru text, dacă acum aproape orice panou de administrare are unul convenabil care le setează automat?
Faptul este că formatarea conținutului de pe un site web este fundamental diferită de a lucra în el aplicații de birou. Aici nu este suficient doar să dai textului un aspect atractiv, pentru că design corect Nu depinde doar afișarea unei pagini web, ci și promovarea acesteia în motoarele de căutare.
Etichete și atribute HTML: Sintaxă de bază
Orice text are cod ascuns, care „explicează” computerului ce și cum să se afișeze pe ecran. Toate informațiile sunt înregistrate folosind un set de elemente universale.
În esență, etichetele de text HTML sunt comenzi care adaugă anumite blocuri la o pagină sau le modifică aspectul. Format corect intrarea arata asa:
Vă rugăm să rețineți că nu toate etichetele sunt asociate. De exemplu,
(sărire de rând) sau
(plus linie orizontală) nu trebuie deloc închis.
De ce nu puteți copia articole din Word și din alte programe în editorul site-ului web
Deși modernă programe de birou utilizați aceleași etichete HTML pentru text, în 99% din cazuri codul nativ este inutilizabil pentru paginile web. Chiar dacă documentul este afișat normal în aplicația însăși, atunci când este introdus pe un site web, formatarea se poate pierde. Mai mult, din cauza cantitate mare etichete și atribute suplimentare, motoarele de căutare nu pot analiza în mod adecvat conținutul paginii. Ceea ce, la rândul său, face dificilă promovarea resursei tale.
Pentru a obține un cod curat și relevant, mai întâi trebuie să ștergeți textul etichetelor HTML create de un editor obișnuit. Există mai multe moduri de a face acest lucru:
- „Rulați” articolul prin Notepad și abia apoi introduceți-l pe site. Aplicația șterge tot HTML, așa că după aceea va trebui să formatați din nou textul (folosind instrumentele editorului sau manual).
- Scrieți și publicați articole folosind LiveWriter. Popularul editor de blog generează imediat codul corect. Si in filă separată Puteți vedea cum va arăta textul pe site.
- Utilizați HTML Cleaner. Acest serviciu online nu distruge întregul cod, ci doar fragmente inutile. Folosind filtre, alegeți ce etichete doriți să salvați. Există, de asemenea, un puternic editor vizual pentru formatare, care adaugă la cod comenzi deja optimizate.
Paragrafe
Acest element este prezent în aproape toate articolele. Fiecare paragraf ar trebui să fie amplasat în interiorul unui astfel de container - acest lucru simplifică formatarea și vă permite să salvați stil uniform pe toate paginile site-ului. Pentru comoditate, eticheta
Scrieți întotdeauna pe o linie nouă.
Aliniere
Eticheta HTML separată „Aliniere text” nu a fost folosită de mult timp. În schimb, a fost creat un atribut ALIGN generic. Pentru a schimba poziția unui bloc de text pe pagină, trebuie să selectați una dintre cele 3 valori - CENTRU, DREAPTA sau STÂNGA. Puteți seta alinierea pentru alte elemente, cum ar fi titluri, în același mod.
În unele situații, alte etichete sunt folosite pentru aliniere, de exemplu, puteți poziționa folosind elementul
Titluri și subtitluri
Sistemul de subtitluri vă permite să creați o structură logică de conținut. Când textul este împărțit în blocuri semnificative, este mult mai ușor pentru cititor să se concentreze și să absoarbă informație nouă. Motoarele de căutare analizează și titlurile pentru a înțelege pentru ce interogări să promoveze pagina. Acesta este motivul pentru care experții SEO recomandă utilizarea cuvintelor cheie de actualitate în ele.
HTML folosește șase nivele de subtitluri - de la
inainte de . Există o ierarhie clară în acest sistem:...
. Articolul principal, produs dintr-un magazin online etc.). Nu poate fi decât unul în text . De regulă, conține cuvântul cheie principal.
...
. Subtitlurile de al doilea nivel împart textul în blocuri semnificative. De exemplu, dacă evaluați laptopurile, puteți face mai multe cu numele diferitelor modele.
...
. Al treilea nivel este necesar dacă textul este între doi este, de asemenea, împărțit în blocuri mici. În exemplul nostru, acestea ar putea fi criterii de evaluare - „Performanță”, „Memorie”, „Placă video”, etc. pentru fiecare model.
, ,
. În practică sunt extrem de rare. Dar principiul general este același - ar trebui să fie „imbricate” într-un bloc cu un subtitlu de nivel superior.
...
. Articolul principal, produs dintr-un magazin online etc.). Nu poate fi decât unul în text. De regulă, conține cuvântul cheie principal.
...
. Subtitlurile de al doilea nivel împart textul în blocuri semnificative. De exemplu, dacă evaluați laptopurile, puteți face mai multecu numele diferitelor modele.
...
. Al treilea nivel este necesar dacă textul este între doieste, de asemenea, împărțit în blocuri mici. În exemplul nostru, acestea ar putea fi criterii de evaluare - „Performanță”, „Memorie”, „Placă video”, etc. pentru fiecare model.
,
. În practică sunt extrem de rare. Dar principiul general este același - ar trebui să fie „imbricate” într-un bloc cu un subtitlu de nivel superior.,
Asigurați-vă că mențineți ierarhia corectă. Revenind la exemplul nostru, aceasta înseamnă că nu puteți introduce imediat numele modelului ca
sau . Și cu atât mai mult, folosiți subtitluri de diferite niveluri pentru blocuri cu semnificație omogenă (de exemplu, evidențiați un laptop care a ocupat ultimul loc în clasament folosind ).
).
Iată o diagramă care vă va ajuta să înțelegeți și să vă amintiți instantaneu structura corectă a titlurilor în HTML.
Liste
Este mai bine să formatați orice listări și instrucțiuni sub formă de liste, folosind etichete HTML speciale pentru text ( greseala tipica- doar câteva paragrafe
Care încep cu o cratimă sau un număr).
Structura unor astfel de blocuri este foarte simplă. În primul rând, determinăm tipul de listă - marcate sau numerotate.
Toate elementele se află între etichetele de deschidere și de închidere. Fiecare element din listă începe pe o linie nouă și are formatul . Numărul de elemente nu este limitat.
Alegerea și atributele sale
Ce poate fi schimbat folosind acest font și culoare - și fără a adăuga noi clase la CSS. Acest lucru este foarte convenabil atunci când trebuie să evidențiați o singură propoziție sau fragment.
are mai multe atribute:
- Față. Vă permite să schimbați fontul textului. Puteți enumera mai multe opțiuni separate prin virgule (Tahoma, Verdana). Dacă utilizatorul nu are instalat primul font, sistemul folosește pur și simplu o alternativă.
- mărimea. Pentru a mări sau mai mic textul, introduceți o valoare între 1 și 7 între ghilimele.
- Culoare. În funcție de design, puteți alege una dintre nuanțele standard (roșu, verde, albastru) sau puteți introduce un cod pentru orice culoare la alegere.
Nu utilizați paragrafe formatate cu , în loc de subtitluri. Este mai bine să setați aceiași parametri de design cu eticheta corectă.
Modalități de evidențiere a textului
Textul monoton este obositor, chiar descompus în paragrafe. Pentru a atrage atenția și a stârni interesul cititorului, se recomandă evidențierea grafică a punctelor cheie. Iată câteva comenzi care vă vor ajuta să faceți față acestei sarcini.
... . Extrem etichetă HTML populară. Miniatură atrage imediat atenția și, prin urmare, cu ajutorul său este convenabil să evidențiem teze și fapte importante.
Mulți oameni confundă etichetele Și . Nu există nicio diferență vizuală, dar funcționează diferit. Primul schimbă pur și simplu aspectul textului, iar al doilea servește drept „index” și evidențiază cele mai importante fragmente (tematice Cuvinte cheieși fraze pentru SEO).
... . Literele cursive elegante și stricte sunt ideale pentru proiectarea termenilor științifici, a cuvintelor străine și a unei varietăți de citate. În publicațiile serioase, numele operelor de artă sunt evidențiate și în text italic.
... . Poate că nicio altă etichetă HTML nu a provocat atât de multe controverse. Sublinierea textului este rar folosită deoarece aceasta metodaÎn trecut, punctele importante au fost atribuite hyperlinkurilor. Dacă utilizați în articole, vă rugăm să rețineți că acest lucru este potrivit doar pentru fragmente scurte - nu mai mult de 1 rând.
...
. O etichetă interesantă care vă permite să faceți o parte Foarte relevantă în publicitate - de exemplu, pentru a sublinia contrastul dintre prețurile vechi și noi.
... . Cel mai simplu mod de a mări dimensiunea fontului fără opțiuni suplimentare.
... . Funcționează pe același principiu ca eticheta anterioară. Textul situat în interior este redus față de cel principal.
... . Nume corect acest format este un superscript. Mai ales această etichetă destinate gradelor matematice și notelor de subsol. Reduce dimensiunea fontului și mută textul selectat în sus.
... . Indicele se găsesc adesea în diverse formule. Fragmentul selectat se află sub textul principal.
Containere semnificative
Deoarece unele blocuri au fost găsite în multe texte, au început să fie create etichete speciale pentru ele. Acest lucru simplifică formatarea, deoarece dacă fiecare tip de conținut are propriul său set de stiluri, trebuie doar să evidențiați o bucată de text și să indicați ce informații conține.
...
. Etichetă pentru adăugarea codurilor computerului. Indispensabil în articolele despre programare cu exemple - comenzile nu sunt executate, ci afișate ca text simplu.
... . Conceput pentru formatarea citatelor - de exemplu, extrase cheie dintr-un interviu.
. Plasează o parte a textului într-un bloc separat. În mod implicit, selecția are mai multă umplutură din stânga, dar puteți modifica și dimensiunea, stilul fontului și culoarea textului în CSS.
... . O etichetă suplimentară care conține informații despre autor, inclusiv linkuri.
Linia de demarcație
O linie simplă poate fi folosită pentru a marca sfârșitul logic al unei secțiuni mari.
nu se aplică etichetelor asociate. Aceasta înseamnă că elementul de format de închiderenu e necesar.
Folosind atributul WIDTH, puteți face separatorul mai scurt, specificând o dimensiune adecvată în pixeli sau un procent din lățimea ferestrei.
Învățând cum să utilizați corect etichetele pentru a formata textul în HTML, nu numai că vă veți face articolele mai ușor de citit, dar veți crește și eficiența SEO.
Unele site-uri atrag utilizatorii nu prin animație, nu prin imagini sau fotografii, nu prin videoclipuri, ci doar prin conținutul lor text. Textul este o parte integrantă a conținutului multor site-uri populare. În lecțiile anterioare, ne-am uitat la proprietățile CSS care vă permit să schimbați culoarea textului, să îi adăugați o umbră, să o aliniați și să adăugați o subliniere, supraliniere sau chiar baraj. Această lecție va analiza ce familii de fonturi există și cum să schimbați fontul implicit al textului.
Diferența dintre familiile de fonturi Sans-serif și Serif
site web - font sans-serif
site - font serif
Familii de fonturi în CSS
În CSS, fonturile sunt împărțite în familii, fiecare familie constând dintr-un set de fonturi care au caracteristici comune. Există doar cinci familii de fonturi:
- sans-serif - fonturi sans-serif, sunt considerate a fi mai ușor de citit pe ecranul computerului decât fonturile din familia serif.
- serif este o familie de fonturi serif. Mulți oameni le asociază cu articole din ziare. Serifurile sunt linii decorative și liniuțe de-a lungul marginilor literelor.
- monospace este o familie de fonturi ale căror caractere au aceeași lățime fixă. Astfel de fonturi sunt folosite în principal pentru a afișa exemple de coduri de program.
- cursive - fonturi care imită textul scris de mână.
- fantezie - fonturi artistice și decorative. Ele nu sunt foarte răspândite, nu sunt disponibile pe toate computerele și sunt rareori utilizate în design web.
Proprietatea font-family vă permite să schimbați fontul implicit. De obicei, conține o listă de fonturi interschimbabile, separate prin virgulă, aparținând aceleiași familii. Dacă numele fontului este format din mai multe cuvinte, acesta trebuie specificat între ghilimele. Numele de familie este de obicei indicat la sfârșitul listei:
Corp (familie de font: Verdana, Helvetica, Arial, sans-serif; )
Să ne uităm la modul în care browserul procesează lista de fonturi specificate în proprietatea noastră font-family:
- Mai întâi verifică dacă fontul Verdana este instalat pe computer și, dacă da, îl folosește ca font pentru textul din interiorul elementului (în cazul nostru, în interiorul elementului )
- Dacă Verdana nu este instalat, caută fontul Helvetica. Dacă căutarea are succes, folosește-o în interior .
- Dacă Helvetica nu este instalată, caută fontul Arial. Dacă este disponibil pe computer, îl aplică intern .
- În cele din urmă, dacă niciunul dintre fonturile specificate nu este găsit, se folosește primul font din familia sans-serif găsit de browser pe computer. În acest fel, browserul poate determina independent fontul potrivit din familie.
proprietate CSS familie de fonturi
Paragraf folosind fontul Times New Roman.
Paragraf folosind fontul Arial.
Încerca "
Notă: Când selectați un singur font specific, este important să înțelegeți că browserul îl va afișa numai dacă fontul este instalat pe computerul utilizatorului. Dacă fontul nu este găsit, textul va fi afișat în fontul „Times New Roman”, care este fontul implicit în toate browserele.
Cu toții am folosit renumitul editor Text cuvânt. Și știm că este foarte ușor să schimbi fontul, dimensiunea și culoarea textului. Deci, în html puteți seta și acești parametri fără prea multe dificultăți. Există o etichetă pentru asta . Este împerecheat și, prin urmare, are o etichetă de închidere, deoarece browserul trebuie să înțeleagă unde sunt începutul și sfârșitul textului pentru care modificăm parametrii. Etichetă are trei atribute: față, dimensiune și culoare, care specifică fontul, dimensiunea și respectiv culoarea textului. În acest tutorial vom arunca o privire mai atentă asupra fonturilor.
La schimba fontul textului în html– fișier, trebuie să includem textul în etichete Șiși asigurați-vă că aplicați atributul feței. Arata cam asa:
textul nostru
Numele fonturilor pot fi găsite în Editor de cuvinte. Există o listă destul de lungă. Să luăm un exemplu despre cum să schimbați fontul textului în html și să scriem următorul cod:
Acest text va fi scris cu fontul implicit
Acest text va fi scris cu fontul Batang
Acest text va fi scris cu font Comics Sans MS
Să salvăm fișierul sub orice nume și să vedem ce se întâmplă:
După cum vedem, totul a funcționat: primul paragraf are fontul implicit, în al doilea paragraf setăm fontul Batang, iar în al treilea textul este afișat în fontul Comic Sans MS. În principiu, totul este ușor și de înțeles, dar există o singură remarcă. Deoarece fontul specificat nu este salvat în fișierul HTML, nu există nicio garanție că va fi afișat așa cum era de așteptat în browser. Nu putem fi 100% siguri că computerul vizitatorului are fontul pe care l-am specificat, mai ales dacă acest font nu este standard. Prin urmare, în atributul față este mai bine să indicați aproximativ trei nume de fonturi, care sunt enumerate separate prin virgule, astfel încât cel puțin unul dintre ele să fie afișat cu siguranță. Să ne uităm la un exemplu:
Acest text ar trebui să apară în Batang sau Comic Sans MS, sau cu siguranță în Arial.
Să ne uităm la rezultat:
Textul a fost afișat în fontul Batang, pe care l-am specificat mai întâi în atributul face. Dacă acest font nu funcționează în browserul vizitatorului, atunci va funcționa al doilea font - Comic Sans MS, iar dacă acest font nu funcționează, atunci textul va fi afișat cu siguranță în font Arial.
Alte opțiuni de font
Și pentru început, să ne uităm la alte opțiuni de font. În prima lecție, ne-am uitat deja la etichetele care stabilesc caractere aldine și cursive, acestea sunt etichete Și respectiv. Să ne uităm la câteva etichete care stabilesc stilul fontului:
Să subliniem textulSă tăiem această parte
și setați indicele pentru cuvânt top
Sa vedem rezultatul:
Am setat întregul text la fontul Comic Sans MS, prima linie a fost subliniată folosind eticheta , amintiți-vă de la prima lecție că eticheta
face un transfer la linie nouă, a doua linie este tăiată datorită etichetei iar în ultimul rând punem cuvântul „top” în superscript. Nimic complicat! Puteți experimenta singur cu restul etichetelor. Dacă totul este clar pentru tine, poți trece la următoarea lecție, în care vom vedea cum să setezi dimensiunea textului, dar dacă mai ai întrebări, aruncă o privire video detaliat această lecție.
