Posibilitatea formatării informațiilor text în html. Formatarea textului HTML. Citate și definiții

Cuprins:

Bună ziua, dragi cititori ai blogului. În ultimul articol, m-am uitat la etichetele bloc pentru structurarea textului. Astăzi ne vom uita la design text html-pagini, adică Să ne uităm la etichetele care vor ajuta la evidențierea fragmentelor importante de text pentru a atrage atenția vizitatorilor asupra lor. De asemenea, vom învăța cum să inserăm caractere speciale în pagină.

Selectarea fragmentelor de text. Etichete puternice și em.

Cel mai important instrument HTML folosit pentru a evidenția părți importante de text este eticheta. Evidențiază textul cu aldine. Eticheta poate evidenția și textul cu font aldine. Deși etichetele sunt similare ca efect, nu sunt echivalente. Eticheta este o etichetă de marcare fizică și pur și simplu face ca textul să pară aldine. A este o etichetă de marcare logică și marchează importanța textului selectat. Eticheta are mai multe important la Optimizare motor de căutare site-ul și conținutul său au mai multă greutate pentru motoarele de căutare.

Etichetele sunt folosite pentru a evidenția fragmente de text cu caractere cursive. Și . Conținutul acestor etichete este afișat într-un unghi, simulând un font scris de mână.
Când dezvoltați site-uri web, etichetele și sunt mai des folosite pentru a evidenția text decât etichetele și . Exemplu de utilizare a etichetelor , , și pentru formatarea textului:

HTML (din limba engleză HyperText Markup Language - „hipertext markup language”; pronunțat h-ti-em-el) - standard limbajul de marcare a documentelor pe World Wide Web.

Și arată așa:

Să aplicăm etichetele pe pagina noastră din articolele anterioare:

Site despre mașini.

Bine ați venit pe site-ul nostru auto. Aici veți găsi multe articole interesante și utile despre mașini, lor specificatii tehniceși caracteristici.

În limbajul științific, o mașină este:

Un vehicul rutier mecanic, motorizat, fără șenile, cu cel puțin 4 roți.

Clasificarea mașinilor

Mașinile sunt de următoarele tipuri:

Autoturism;

Marfă;

SUV;

Buggy;

Ridica;

Sport;

Curse.

Rezultat:

Pe lângă elementele , , și HTML are multe etichete pentru formatarea textului. document html. eu aduc lista finaliștilor astfel de etichete:

— Abreviere. implicit apare subliniat în browser;

— Acronim. În schimb, o abreviere denotă o abreviere stabilită. Apare subliniat;

— un mic citat, afișat cu caractere cursive;

— fragment din codul sursă al programului, afișat în font monospace;

— marchează textul care a fost eliminat dintr-o pagină Web și apare tăiat;

— denotă un termen nou în document, afișat cu caractere cursive;

- folosit pentru a evidenția textul la care a fost adăugat versiune noua documentul apare subliniat;

— folosit pentru a evidenția datele introduse de la tastatură sau pentru numele tastelor, afișate într-un font monospațiu;

— folosit pentru a evidenția ghilimele, conținutul este plasat automat între ghilimele;

— indică datele ieșite de un program, afișate într-un font monospațiu;

- de fapt, la fel ca , doar că este o etichetă de markup fizică și una logică. afișat în font monospace;

— evidențierea numelui variabilei în cod sursa programele sunt afișate cu caractere cursive.

Și așa apar în browser:

Rupere de linie
După cum am aflat din articolele anterioare, elementele bloc sunt folosite pentru a traduce șiruri, în special eticheta
Un paragraf important.

Să punem informații despre drepturile de autor pe pagina noastră web:

Toate drepturile rezervate. anul 2013.

Site despre mașini.

Rezultat:

Și după cum vedem și liniile sunt separate distanta lunga de parcă n-ar avea nimic de-a face unul cu celălalt. În acest caz, este mai bine să folosiți eticheta pentru a rupe liniile
. Această etichetă setează o întrerupere de linie, dar spre deosebire de
Nu setează indentarea liniei. Să aplicăm eticheta
pe pagina noastra:

Toate drepturile rezervate. anul 2013.
Site despre mașini.

Asta e mult mai bine:

Prin urmare, în unele cazuri, la formatarea textului pagini html nu uitați de etichetă
.
Introduce caractere speciale. Literale.
Uneori trebuie să inserați un caracter special într-o pagină web, de exemplu următoarele caractere: , ©. Literalele sunt folosite pentru a insera caractere speciale în HTML. este o secvență de caractere care începe cu & și se termină cu ; , iar între ele este plasată o succesiune de litere - codul simbolului. Deci, pentru a insera simbolurile , ©, se folosesc, respectiv, următoarele literale: Toate programele->Accesorii->Utilități->Tabel de simboluri” sau apăsați WIN+R și tastați în fereastra „execute charmap”. Apare fereastra Tabel de simboluri.

Dacă selectați un caracter din lista de simboluri care nu poate fi introdus de la tastatură, o inscripție precum „Tasta: Alt+” va apărea în linia de stare din partea stângă. Luați acest cod de caracter și inserați-l într-un literal. De exemplu, să introducem simbolul © în pagina noastră folosind codul simbolului. Selectăm acest simbol în „Tabelul de simboluri” și în linia de stare din partea stângă vedem inscripția „Tasta: Alt+0169”. Luăm codul „0169” și introducem © în loc de literal în pagina noastră web:

Toate drepturile rezervate. © 2013.
Site despre mașini.

Și ne asigurăm că totul este afișat corect pe pagină.

Asta e tot ce am pentru azi. Ca întotdeauna, voi rezuma:

Pentru a rupe linii fără indentări, utilizați eticheta
;

iar pentru a insera caractere speciale folosim literale precum: &; sau & .

În următorul articol vă voi spune cum să inserați imagini pe o pagină, așa că vă recomand
Ori de câte ori este posibil, explicați codul dvs. acolo unde este necesar.
Folosiți comentarii pentru a explica codul dvs.: ce face, ce face și de ce este utilizată soluția pe care o alegeți.
(Acest punct este opțional, deoarece nu are rost să ne așteptăm ca codul să fie întotdeauna bine documentat. Utilitatea comentariilor depinde de complexitatea proiectului și poate diferi pentru codul HTML și CSS.)
Sarcini Bifați sarcinile pentru lista dvs. de activități folosind TODO.
Marcați sarcinile folosind cuvântul cheie TODO. Nu utilizați alte formate utilizate în mod obișnuit, cum ar fi @@ .
Introduceți contactele (nume de utilizator sau listă de corespondență) între paranteze: TODO(contact) .
Descrieți sarcina după două puncte, de exemplu: TODO: Task.
Recomandat: (# TODO(Ivan Ivanov): Tratează cu alinierea #) Test
Recomandat:

castraveți

rosii

Reguli de formatare HTML Tip document Utilizați HTML5.
(Este recomandat să utilizați HTML cu tipul de conținut text/html. Nu utilizați XHTML, deoarece aplicația/xhtml+xml are suport slab pentru browser și limitează opțiunile de optimizare.)
Valabilitate HTML Folosiți HTML valid ori de câte ori este posibil.
Utilizați cod HTML valid, cu excepția cazului în care utilizarea nu vă permite să atingeți dimensiunea fișierului necesară pentru nivelul dorit de performanță.
Validator HTML W3C (engleză) pentru a verifica validitatea codului.
Validitatea este o calitate importantă și măsurabilă a codului. Scrierea HTML valid promovează învățarea cerințelor și limitărilor tehnice și asigură utilizarea corectă a HTML.
Nerecomandat: Verificați Doar verificați
Recomandat: Verificare Doar o verificare.
Semantică Utilizați HTML așa cum a fost intenționat.
Folosiți elemente (uneori numite incorect „etichete”) pentru scopurile propuse: titluri pentru titluri, p pentru paragrafe, a pentru linkuri etc.
Acest lucru face codul mai ușor de citit, editat și întreținut.
Media alternativă Includeți întotdeauna conținut media alternativ.
Încercați să oferiți conținut alternativ pentru media: de exemplu, pentru imagini, videoclipuri sau animații specificate cu folosind pânza. Pentru imagini, acesta este un text alternativ semnificativ (alt), iar pentru video și audio, o transcriere a textului și legenda, dacă este posibil.
Conținutul alternativ poate ajuta persoanele cu dizabilități. De exemplu, este dificil pentru o persoană cu vedere scăzută să înțeleagă ce este în imagine dacă @alt nu este setat pentru asta. Alte persoane pot avea dificultăți în a înțelege ceea ce se spune într-o înregistrare video sau audio.
(Dacă valoarea alternativă a imaginii este redundantă sau este folosită doar în scopuri decorative în locuri în care CSS nu poate fi utilizat, utilizați un alt text alt gol alt="" )
Separarea responsabilităților Structură, design și comportament separat.
Mențineți structura (marcarea), aspectul (stilurile) și comportamentul (scripturile) separate și încercați să mențineți interacțiunile dintre ele la minimum.
Asigurați-vă că documentele și șabloanele conțin numai HTML și că HTML servește doar la definirea structurii documentului. Mutați tot codul responsabil pentru design în fișiere de stil și codul responsabil pentru comportament în scripturi.
Încercați să reduceți intersecțiile lor la minimum incluzându-le în șabloane cantitate minimă fișiere de stil și scripturi.
Separarea structurii de prezentare și comportament ajută la întreținerea codului mai ușor. Schimbarea șabloanelor și a documentelor HTML durează întotdeauna mai mult decât schimbarea fișierelor de stil sau a scripturilor.
Nerecomandat: HTML este nasol HTML Sucks
Am mai citit despre asta undeva, dar acum totul este clar: HTML este un gunoi complet!!1 Nu pot să cred că, pentru a schimba designul, trebuie să refaci totul din nou de fiecare dată.
Recomandat: prima mea reproiectare numai CSS Noul meu design CSS
Am citit despre asta înainte, dar în cele din urmă am făcut-o singur: folosesc principiul separării preocupărilor și nu introdu designul în HTML
Cat de cool!
Legături mnemonice Nu utilizați legături mnemonice.
Singura excepție de la această regulă sunt caracterele de serviciu HTML (de exemplu< и & ) а так же вспомогательные и “невидимые” символы (например spatiu de nerupere).
Etichete opționale Nu utilizați etichete opționale. (nu este necesar)
Pentru a reduce dimensiunea fișierului și a îmbunătăți lizibilitatea codului, puteți omite etichetele opționale. Specificația HTML5 are o listă de etichete opționale.
(Poate dura ceva timp pentru ca această abordare să devină utilizată pe scară largă, deoarece este foarte diferită de ceea ce sunt învățați de obicei dezvoltatorii web. Din punct de vedere al coerenței, codului și simplității, cel mai bine este să omiteți toate etichetele opționale, mai degrabă decât unele dintre ele).
Nerecomandat: risipim octeți - risipim bani.
Recomandat: octeții sunt bani!
Astfel încât
Atributul „type” Nu specificați atributul tip atunci când adăugați stiluri și scripturi la un document.
Nu utilizați atributul type atunci când conectați stiluri (cu excepția cazului în care utilizați altceva decât CSS) și scripturi (cu excepția cazului în care utilizați altceva decât JavaScript).
Specificarea atributului tip în acest caz nu este necesară deoarece HTML5 utilizează text/css (engleză) și text/javascript (engleză) în mod implicit. Acest lucru va funcționa chiar și în browserele mai vechi.
Nu se recomandă:
Recomandat:
Nu se recomandă:
Recomandat:
Reguli de formatare HTMLFormat Evidențiere linie nouă pentru fiecare element de bloc, tabel sau listă și indentați fiecare element copil.
Indiferent de stilurile specificate pentru element (CSS vă permite să schimbați comportamentul elementului folosind proprietatea de afișare), înfășurați fiecare bloc sau element de tabel pe o nouă linie.
De asemenea, indentați toate elementele imbricate într-un element bloc sau tabel.
(Dacă întâmpinați probleme cu spațiul alb între lista elementelor, este permisă plasarea tuturor elementelor li pe o singură linie. Lintu [utilitate pentru verificarea calității codului cca. trad.] se recomandă în acest caz să se emită un avertisment în loc de o eroare.

Recomandat:

Masha
Glasha
Cheburash

Recomandat: Impozite pe profit

$ 5.00 $ 4.50

Reguli de stil CSS Validitate CSS Folosiți cod CSS valid ori de câte ori este posibil.
Cu excepția cazurilor în care este necesar un cod dependent de browser sau erori de validare, utilizați cod CSS valid.
Utilizați instrumente precum Validatorul CSS W3C pentru a vă valida codul.
Validitatea este o calitate importantă și măsurabilă a codului. Scrierea CSS valide ajută la eliminarea codului redundant și asigură utilizarea corectă a foilor de stil...
Identificatori și nume de clasă Utilizați nume și identificatori de clasă cu caractere wildcard sau semnificative.
În loc să utilizați coduri sau să descrieți aspectul unui element, încercați să exprimați semnificația creării acestuia în numele unei clase sau al unui identificator sau dați-i un nume de șablon...
Numele wildcard sunt pur și simplu nume variante pentru elemente care nu au un scop special sau care nu se pot distinge de frații lor. De obicei, sunt necesari ca „Ajutor”.
Utilizarea numelor funcționale sau șabloane reduce nevoia de modificări inutile la document sau șabloane.
Învechit: /* Învechit: fără sens */ #yee-1901 () /* Învechit: descrierea aspectului */ .button-green() .clear()
Recomandat: /* Recomandat: precis și la obiect */ #galerie () #login () .video () /* Recomandat: nume șablon */ .aux () .alt ()
Nume de identificatori și clase Pentru identificatori și clase, utilizați după cum urmează nume lungi, cât este necesar, dar cât se poate de scurt.
Încercați să formulați exact ce ar trebui să faceți acest element, dar să fie cât mai scurt posibil.
Această utilizare a claselor și a identificatorilor contribuie la a face codul mai ușor de înțeles și mai eficient.
Selectoare de tip Evitați utilizarea numelor de clase sau a identificatorilor cu selectoare de tip de element (etichetă).
Cu excepția cazului în care este absolut necesar (de exemplu, cu clase helper), nu utilizați nume de elemente cu nume de clasă sau identificatori.
Comenzi rapide pentru proprietăți Folosiți comenzi rapide pentru proprietăți ori de câte ori este posibil.
CSS oferă multe forme de prescurtare diferite (cum ar fi fontul), care sunt recomandate a fi utilizate ori de câte ori este posibil, chiar dacă este specificată doar una dintre valori.
Utilizarea notării prescurtatoare a proprietăților este utilă pentru o mai mare eficiență și o mai bună înțelegere a codului dvs.
Nerecomandat: /* Nerecomandat */ border-top-style: none; font-family: palatino, georgia, serif; dimensiunea fontului: 100%; înălțimea liniei: 1,6; captuseala-fond: 2em; umplutura-stânga: 1em; umplutura-dreapta: 1em; padding-top: 0;
Recomandat: /* Recomandat */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; umplutură: 0 1em 2em;
0 și unități Nu specificați unități pentru valori zero
Nu specificați unități pentru valori zero decât dacă există un motiv pentru a face acest lucru.
0 în toată partea unei fracții Nu pune „0” în întreaga parte a fracțiilor.
Nu pune 0 în partea întreagă în valori între -1 și 1.
Citate în linkuri Nu utilizați ghilimele în linkuri
Nu folosiți ghilimele ("" , "") cu url() .
Nume de culori hexazecimale Utilizați notația hexazecimală de trei caractere ori de câte ori este posibil.
Notația hexazecimală de trei caractere pentru culori este mai scurtă și ocupă mai puțin spațiu.
Prefixe Selectoare de prefixe cu prefixe unice pentru aplicația curentă. (nu este necesar)
În proiectele mari, precum și în codul care va fi folosit pentru alte proiecte sau pe alte site-uri, utilizați prefixe (ca spații de nume) pentru identificatori și nume de clasă. Folosiți titluri scurte, unice, urmate de o cratimă.
Utilizarea spațiilor de nume ajută la prevenirea conflictelor de nume și poate face site-ul dvs. mai ușor de întreținut. De exemplu, când căutați și înlocuiți.
Separatoare în clase și identificatori Separați cuvintele în identificatori și nume de clase folosind o cratimă.
Evitați să utilizați altceva decât o cratimă pentru a conecta cuvinte și abrevieri în selectoare pentru a îmbunătăți lizibilitatea și înțelegerea ușoară a codului.
Nerecomandat: /* Nerecomandat: cuvintele „demo” și „imagine” nu sunt separate */ .demoimage () /* Nerecomandat: se folosește liniuța de subliniere în locul unei cratime */ .error_status ()
Recomandat: /* Recomandat */ #video-id().ads-sample()
Hackuri Evitați utilizarea informațiilor despre versiunea browserului sau a hackurilor CSS - încercați mai întâi alte metode.
Pare tentant să lupți împotriva diferențelor la locul de muncă. browsere diferite folosind filtre CSS, hack-uri sau alte soluții. Toate aceste abordări ar trebui considerate doar ca ultimă soluție dacă doriți o bază de cod eficientă și ușor de întreținut. Pur și simplu, permiterea hackurilor și a detectării browserului va afecta proiectul pe termen lung, deoarece înseamnă că proiectul ia calea cu cea mai puțină rezistență. Ceea ce ușurează utilizarea hack-urilor și le permite să fie folosite din ce în ce mai des, ceea ce va duce la utilizarea prea des.
Reguli de formatare CSSComandarea anunțurilor Sortați anunțurile în ordine alfabetică.
Definiți declarațiile în ordine alfabetică pentru a asigura un cod consecvent cu care este ușor de lucrat.
Când sortați, ignorați prefixele browserului. Mai mult, dacă sunt folosite mai multe prefixe de browser pentru o proprietate, acestea trebuie, de asemenea, sortate (de exemplu -moz ar trebui să fie înainte de --webkit)
Indentări în blocuri. Întotdeauna indentați conținutul blocului.
Indentați întotdeauna orice conținut de bloc, cum ar fi regulile din reguli sau declarații, pentru a afișa ierarhia și a face codul mai ușor de înțeles.
După declarații Puneți un punct și virgulă după fiecare declarație.
Utilizați un punct și virgulă după fiecare declarație pentru consistența codului și pentru a facilita adăugarea de noi proprietăți.
După numele proprietăților Folosiți spații după două puncte în declarații.
Utilizați întotdeauna un spațiu după două puncte (dar nu înainte) în declarații, pentru ordinea în cod.
Separarea selectoarelor și a declarațiilor Separați selectoarele și declarațiile cu o întrerupere de linie.
Începeți fiecare selector sau declarație pe o linie nouă.
Reguli de separare Reguli separate cu întreruperi de linie.
Pune întotdeauna o întrerupere de linie între reguli.
Reguli meta CSSGreguli de grupare Reguli de grup și indicați grupurile printr-un comentariu. (nu este necesar)
Ori de câte ori este posibil, grupați regulile împreună. Indicați grupurile cu comentarii și separați-le cu întreruperi de rând.
Concluzie Fii consistent
Dacă editați cod, luați câteva minute pentru a înțelege cum este scris. Dacă operatorii matematici sunt separați prin spații, procedați la fel. Dacă comentariile sunt înconjurate de paranteze sau liniuțe, procedați la fel cu comentariile dvs.
Ideea acestui ghid este de a crea dicționar general, care ar permite dezvoltatorilor să se concentreze pe ceea ce doresc să exprime, mai degrabă decât pe modul.
Noi oferim reguli uniforme modele care vă permit să scrieți cod într-un singur stil, dar stilul de cod deja folosit în proiect este de asemenea important.
Dacă codul dvs. este foarte diferit de codul existent, acesta poate arunca ritmul cititorului și poate îngreuna citirea. Încercați să evitați acest lucru.
Notă de la traducător Aș dori, de asemenea, să remarc faptul că Google se concentrează în primul rând pe proiecte mari, cu încărcare mare, în care fiecare octet este scump, așa că merită să luați în considerare faptul că dacă recomandă pornirea fiecărui selector pe o linie nouă sau folosirea spațiilor în loc de file, atunci acest lucru implică în primul rând că codul va fi neapărat redus și comprimat înainte de a fi utilizat pe site.
Mulțumesc tuturor celor care au citit până aici.
Etichete:
css

html

ghiduri de stil

Adaugă etichete
Pentru a proiecta vizual și a evidenția textul în HTML, sunt utilizate următoarele elemente:
PUTERNIC
Face textul aldine:
Între aceste etichete, textul va fi îngroșat EM (Subliniere)
Setează textul dintre etichetele de deschidere și de închidere să fie italice:
Acest text va fi scris cu caractere cursive U (subliniat)
Afișează textul plasat între etichetele de deschidere și de închidere, așa cum este subliniat:
Acest text este subliniat SUB
Afișează textul cuprins între etichetele de deschidere și de închidere ca un indice din textul principal.
Formula propanului C3H8
Rezultat: C3H8
CINA
Folosit pentru a crea un superscript. De exemplu:

Va arăta ca 2 5 = 32.
FONT
Folosit pentru a schimba culoarea, fontul și dimensiunile și textul.
Atribute:
DIMENSIUNE - îl puteți folosi pentru a schimba dimensiunea fontului. Valorile posibile sunt 1, 2, 3, 4, 5, 6, 7.
CULOARE - setează culoarea textului.
FACE - pentru a determina fontul (Times New Roman, Arial, Tahoma)

De exemplu:
Acest text nu este formatat

Font galben mărit

Text roșu 3 dimensiuni
Când vizualizați într-un browser vom vedea:

SIZE="+2" înseamnă că fontul este mărit cu 2 unități față de cel standard. Dimensiunea standard a fontului este 3.
HR
Folosit pentru inserarea în text linie orizontală. O caracteristică distinctivă este că nu există etichetă de închidere.
Atribute:
ALIGN – determină alinierea liniei orizontale. Atributul poate accepta următoarele valori:
stânga – se aliniază la marginea stângă a documentului.
dreapta – se aliniază la dreapta.
center – aliniați la centrul documentului (implicit).
WIDTH – folosit pentru a determina lungimea liniei în pixeli sau procentul din lățimea paginii.
SIZE – grosimea liniei in pixeli.
NOSHADE – cu acest atribut linia este vopsită ca solidă. Fără el, linia pare voluminoasă.
CULOARE – setați culoarea liniei.

De exemplu:
Text înainte de rând Text după rând
Și aceasta este o linie groasă de 3 px fără noshade
Și iată o linie cu noshade colorată în roșu
Rezultat:

Pagina următoare -
Evidențierea textului folosind etichete html
Acest articol nu pretinde a fi o carte de referință cu drepturi depline despre etichetele html, dar dacă sunteți interesat de subiect, atunci vă sugerez să înțelegeți semnificația majorității etichetelor de care avem nevoie pentru a evidenția textul.

Cel mai adesea, textul de pe pagină este evidențiat cu caractere aldine sau cursive. Pentru aceasta există etichete speciale și (evidențiate cu aldine), precum și (cu caractere inclinate). Toate sunt împerecheate, adică cuvintele necesare trebuie plasate între etichetele de deschidere și de închidere. S-ar părea, de ce au venit cu două etichete pentru aceeași acțiune?

De fapt, în html îndeplinesc nu doar un rol de design, ci și unul semantic. Deci, eticheta b pur și simplu face eticheta îndrăzneață, fără a-i da mai multă semnificație, dar puternică, pe lângă simpla evidențiere, oferă și cuvintelor o importanță deosebită. Prin urmare, această etichetă nu trebuie să evidențieze jumătate din text, ci trebuie folosită cu înțelepciune.

CSS are și proprietăți care au același efect ca etichetele enumerate. De exemplu, proprietatea font-weight: bold face textul bold, iar proprietatea font-style: italic îl face italic.
Sublinierea și eliminarea textului
Există, de asemenea, etichete pentru subliniere și baraj. subliniază cuvintele și le taie. Pentru a obține același efect prin css, utilizați proprietatea text-decoration. Are mai multe semnificații:

Subliniere – subliniază de jos;

Overline – subliniază în partea de sus;

Line-through - barat;

Și totuși, pentru această proprietate, puteți specifica mai multe valori separate printr-un spațiu. De fapt, ai putea chiar să-i dai toate cele trei tipuri de subliniere, dar nu văd rostul în asta.

HTML 5 a introdus o altă etichetă - marca, care vă permite pur și simplu să evidențiați textul. În mod implicit, este evidențiat cu galben, deși prin css puteți să îl înlocuiți cu ușurință și să creați o evidențiere personalizată care să se potrivească cu designul site-ului dvs.
Afișarea textului în indice și indice
Ne-am dat seama puțin, dar ce se întâmplă dacă trebuie să scrieți o formulă sau altceva în care trebuie să afișați câteva cifre sau litere în indexul superior sau inferior. Desigur, html ne oferă instrumentele necesare pentru aceasta. Eticheta secundară afișează fontul ca indice și eticheta sup ca indice. Acest lucru se poate face și prin css. Pentru a face acest lucru, trebuie să scrieți textul necesar:

vertical-align: sub | super

vertical - aliniere : sub | super

Dimensiunea fontului: dimensiunea fontului este puțin mai mică decât textul obișnuit
Cum să stilați textul folosind CSS?
Dacă trebuie să proiectați un font cu folosind css, atunci trebuie să îl accesați cumva folosind un selector. Un lucru este dacă trebuie să evidențiați un întreg paragraf sau un link, atunci aveți un selector, dar ce se întâmplă dacă trebuie să evidențiați un cuvânt undeva la mijlocul articolului? Există unul minunat pentru asta etichetă asociată span, care nu are niciun efect asupra aspect conținutul său și nu îi atașează niciun sens.

În consecință, anexăm fragmentul de care aveți nevoie pentru proiectare într-un interval, legăm o clasă de stil arbitrară la acesta și scriem stiluri fără probleme!
Textul de ieșire păstrând spațiile.
În html există o etichetă pre, care vă permite să afișați informații așa cum sunt scrise într-un editor de text. Acest lucru poate fi util dacă scrieți o poezie sau trebuie să adăugați câteva spații. De asemenea, puteți controla formatarea textului prin CSS. Există o proprietate de spațiu alb pentru aceasta. Semnificațiile sale:

Nowrap – cuvintele sunt afișate pe o linie fără cratime. Dacă nu se încadrează în linie, va apărea derulare orizontală.

Pre – acționează similar cu eticheta pre

Pre-wrap - similar cu valoarea anterioară, dar înfășoară automat textul pe o nouă linie atunci când nu se mai potrivește (poate cea mai bună valoare)
Alinierea textului
Am acoperit deja câteva etichete HTML pentru text, dar merită menționată și alinierea. Este setat nu prin etichete, ci prin proprietatea text-align CSS:

Dreapta – pe marginea dreaptă.

Stânga - la stânga.

Centru – în centru (de exemplu, pentru titluri)

Justificare – în lățime. Această valoare înseamnă că cuvintele din linie vor fi întinse pentru a ocupa întreaga lățime a liniei.
Culoarea textului și fundalul
Din nou, acest lucru nu mai poate fi setat folosind etichete html, dar se poate face prin css. Ajungem din nou la concluzia că folosirea etichetelor pentru a edita textul html nu este foarte convenabilă. Pentru culoarea textului în sine, există o proprietate de culoare care are multe semnificații. Culoarea poate fi setată folosind Cuvinte cheie(portocaliu, negru, roșu) și cu o indicație explicită a modului de culoare: color: rgb(130, 100, 12). Fundalul este setat exact în același mod, dar numai folosind proprietatea de fundal.
Dimensiunea textului și fontul
Proprietatea Font-size specifică dimensiunea fontului, iar proprietatea font-family vă permite să selectați fontul în sine sau familia acestuia. De exemplu.

După cum știți, conținutul principal al paginilor Web este textul. Cu excepția rară a galeriilor speciale. Prin urmare, nu este surprinzător faptul că HTML are atât de multe controale diferite de afișare a textului.
De fapt, pentru a afișa un șir de text în fereastra de vizualizare a browserului, nu trebuie să utilizați nicio etichetă: trebuie doar să scrieți textul în sine. Dar atunci când trebuie să o despărțiți cel puțin în paragrafe, aici trebuie să folosiți etichete. Cert este că în diverse sisteme informatice Sunt folosite diverse caractere pentru a împărți textul în paragrafe, iar documentele HTML ar trebui să fie întotdeauna afișate cât mai consistent posibil pe o mare varietate de platforme de computer. De aceea a trebuit să introducem etichete pentru a desemna paragrafele.

La începutul fiecărui paragraf există o etichetă , iar la final, eticheta de închidere . În același timp, eticheta are în mod natural niște parametri. Acestea includ parametrii generali de identificare deja cunoscuți de noi clasăȘi id, parametru de stil stil, pe care ne vom uita în al doilea capitol, și parametrul de aliniere alinia. Ar trebui să vorbim puțin mai detaliat despre ultimul parametru.
În HTML, termenul „aliniere” se referă atât la poziționarea orizontală, cât și la cea verticală a unui element. Dar în cazul paragrafelor de text, este logic să vorbim doar despre alinierea orizontală sau, așa cum este numită și „justificare”.
Justificarea vă permite să apăsați un paragraf la marginea stângă sau dreaptă a ferestrei de vizualizare a browserului, să-l centrați sau să întindeți cuvintele, astfel încât textul să umple uniform întreaga lățime a spațiului alocat acestuia. În aceste scopuri sunt utilizate valorile stânga, dreapta, centruȘi justifica, respectiv. Să luăm în considerare utilizarea lor folosind exemplul unui alt document HTML.

Lista 1.4

Alinierea orizontală a63acev

Paragraf apăsat pe marginea din stânga
Paragraf apăsat pe marginea din stânga
Paragraf centrat

Paragraf întins pe lățime

Rezultatul vizualizării unui fișier cu un astfel de cod folosind browser-ul Internet Explorer este prezentat în Fig. 1.4. După cum puteți vedea, ultimul paragraf, care conform codului nostru ar fi trebuit să fie întins în lățime, este afișat de browser Internet Explorer la fel ca primul. Acest caz poate servi ca un exemplu clar al modului în care browserele percep codul HTML în mod diferit. În cazul nostru, Internet Explorer a ignorat pur și simplu parametrul necunoscut, folosind opțiunea de afișare standard.

Orez. 1.4. Fereastra browserului care arată rezultatul fișierului afișat în Lista 1.4

Uneori, pentru a separa mai mult un paragraf de altul, creatorii de pagini Web încearcă să folosească paragrafe goale, adică nu există nimic între etichetele de început și de sfârșit ale paragrafului. Conform specificațiilor, browserele ar trebui pur și simplu să ignore astfel de construcții. Prin urmare, pentru a separa paragrafele sau pentru a forța o întrerupere de linie într-un paragraf, ar trebui să utilizați eticheta
. Aceasta este o etichetă directivă. Pur și simplu marchează locul în care afișajul trebuie mutat pe o altă linie. Un exemplu despre modul în care această etichetă poate fi utilizată pentru a atinge ambele obiective este prezentat în documentul HTML al cărui cod este prezentat în Lista 1.5.

Lista 1.5

„http://www.w3.org/TR/html4/strict.dtd”>
.

Rupere forțată de linie

Paragraful pe care noi
Sfâșiat forțat
Următorul paragraf

Paragraf după pauză forțată

Cum arată acest fișier când este vizualizat din folosind un browser, prezentată în Fig. 1.5.

Orez. 1.5. Fereastra browserului care arată rezultatul fișierului afișat în Listarea 1.5

Etichetă
pe langa parametrii generali de identificare are si parametrul clar, care este folosit pentru a alinia mai precis textul atunci când se înfășoară în jurul unui obiect, de exemplu, imagine grafică, încorporat ca parte a unei pagini Web. Valoarea acestui parametru poate fi unul dintre cele patru cuvinte cheie predefinite: niciunul, stânga, dreapta, toate.
Valoarea none este implicită și indică faptul că următoarea linie va începe acolo unde ar începe în mod normal fără acest parametru. Sens stânga indică faptul că următoarea linie va începe la marginea din stânga a obiectului împachetat în text. Dacă trebuie să utilizați marja corectă în aceste scopuri, atunci ar trebui să utilizați valoarea dreapta. Și sensul toate spune browserului că poate folosi atât marginile din stânga, cât și din dreapta ale obiectului, atâta timp cât textul este afișat cât mai compact posibil.
Acum să trecem la luarea în considerare a designului fontului textului. În orice moment al unui paragraf, putem folosi o etichetă cu un anumit set de parametri, care va determina aspectul fontului care va fi folosit pentru afișarea textului aflat după această etichetă. Încetarea acestei etichete se realizează folosind perechea de închidere .
Etichetă are următorii parametri inerenți: mărimea, folosit pentru a indica dimensiunea fontului de utilizat, culoare- pentru a seta culoarea caracterelor fontului și față, indicând ce font va fi folosit pentru afișarea textului. Să ne uităm la acești parametri.
După cum tocmai am spus, parametrul dimensiune este folosit pentru a specifica dimensiunea caracterelor din fontul utilizat. Valorile acestui parametru sunt numere de la unu la șapte. Ele indică o anumită dimensiune relativă a caracterelor. Cert este că în HTML nu puteți seta dimensiunea absolută a caracterelor în puncte, așa cum ne-am obișnuit să facem în aplicațiile de birou obișnuite. Utilizatorul va vizualiza o pagină Web pe computerul său și nu știm dinainte ce fonturi poate avea instalat și ce dimensiuni sunt disponibile. Prin urmare, putem specifica doar dimensiunea relativă a fontului, iar browserul utilizatorului însuși va selecta dimensiunea cea mai potrivită.
De asemenea, putem specifica o modificare a dimensiunii fontului ca valoare a parametrului dimensiune. De exemplu, pentru a mări dimensiunea fontului cu un nivel, utilizați următoarea construcție:

Și pentru a reduce dimensiunea caracterelor cu două niveluri, utilizați următorul cod:

Cu toate acestea, pentru a utiliza astfel de structuri, este necesar să începeți de la o anumită dimensiune de bază. Pentru a seta această dimensiune, utilizați eticheta cu acelasi parametru mărimea. Dacă această etichetă nu este utilizată, atunci al treilea nivel va fi folosit ca dimensiune de bază a caracterului. Să dăm un exemplu de utilizare a acestor etichete.

Lista 1.6.

Mărimea simbolului

Stiluri de caractere

Textul este aldin sau cursiv

Și poate în același timp bold și italic
Se întâmplă accentuatși nebarit.
sau monospațial.
Putem crește și micșora dimensiunea caracterelor.

După cum puteți vedea din exemplu, putem combina diferite stiluri între ele. Dar ar trebui să fii atent la ordinea în care plasezi etichetele. Etichetele de deschidere și de închidere trebuie să se încadreze în alte etichete care au fost aplicate anterior. Un exemplu în acest sens poate fi văzut în a zecea linie a listării. Și cum arată acest document HTML atunci când este vizualizat folosind un browser este prezentat în Fig. 1.7.
Am analizat modurile în care sunt setați diferiți parametri de afișare a textului. Cu toate acestea, HTML oferă câteva modalități de bază de a afișa text care nu trebuie să fie specificat cu o mulțime de etichete. Au propriile etichete, adică sunt definite anumite categorii de text care sunt afișate într-un mod predefinit. Toate aceste categorii sunt cel mai des folosite în industria științifică și în industria informatică. Să le enumerăm.

Un termen este evidențiat în text folosind o pereche de etichete și .

Evidențierea „îmbunătățită”, concepută pentru a atrage și mai mult atenția, este creată folosind o etichetă și geamul de închidere.

Folosind și etichete, se indică faptul că textul situat între ele este un citat.

Definiția unui anumit termen este evidențiată cu ajutorul etichetelor și .

O pereche de etichete este folosită pentru a evidenția codul sursă în orice limbaj de programare.

Informațiile text transmise de program sunt formatate folosind etichete AND.

Textul introdus de utilizator este indicat prin și etichete. P Variabilele din codul sursă al programelor sunt desemnate folosind o pereche de etichete și .

Etichete și evidențiază abrevierile.

Și combinațiile de litere stabilite care nu sunt abrevieri, adică acronime, sunt evidențiate cu etichete și .

Cu toate acestea, nu este suficient să cunoașteți numele etichetelor; de asemenea, trebuie să înțelegeți clar modul în care acestea format textul. Și aici nu te poți lipsi de un exemplu.

Orez. 1.7. Fereastra browserului care arată rezultatul fișierului afișat în Listarea 1.7

Lista 1.8

Opțiuni de afișare standard
Acesta este un text normal
Aceasta este o selecție. Și evidențierea mai vizibilă

Acesta este un citat și aceasta este o definiție.

Putem scrie cod de program, text, de către utilizator,
text de ieșire și nonvariabile
Așa sunt afișate abrevierile. Și așa - acronime.

Rezultatul afișării unui astfel de document HTML este prezentat în Fig. 1.8.

Orez. 1.8. Fereastra browserului care arată rezultatul fișierului afișat în Lista 1.8

Foarte des este nevoie de a plasa text pe o pagină Web care a fost pregătită în prealabil folosind un editor de text care a formatat deja textul în mod independent. În acest caz format text, cratimele și plasarea acesteia depind direct de lungimea liniei în caractere care a fost setată în acest editor de text. Dacă textul este plasat pe o pagină Web folosind mijloace convenționale, această formatare va fi în mod natural întreruptă. Prin urmare, a fost introdusă o etichetă personalizată pentru aceste fragmente preformatate. Această etichetă are un parametru de lățime, a cărui valoare este lungimea liniei în caractere. Desigur, este recomandabil să forțați fontul exact care a fost folosit la formatarea textului înainte de a utiliza această etichetă. Deci, pentru a insera text preformatat, putem folosi următorul fragment de cod:
text.
ÎN în acest exemplu precizăm că textul trebuie afișat pe baza ipotezei că rândul are șaizeci de caractere. Cu toate acestea, în textul preformatat, nu se aplică nici regulile pentru „reducerea spațiilor”. Faptul este că atunci când browserul întâlnește mai multe spații consecutive în textul simplu al unei pagini Web, le restrânge într-un singur spațiu. Dar textul preformatat nu este supus unei astfel de transformări, ceea ce vă permite să păstrați formatarea acestuia, ceea ce în cel mai simplu editori de text se face folosind caractere cu spații albe. În HTML, apropo, caracterul tabulator este considerat și un caracter spațiu.
De asemenea, trebuie remarcat faptul că HTML oferă posibilitatea de a folosi etichete pentru a afișa ghilimele superioare, care sunt de obicei folosite pentru a evidenția vorbirea directă și unele ghilimele. Citatele sunt furnizate cu o etichetă cu geamănul său final . Și pentru a încadra vorbirea directă, se folosesc de obicei etichete și. În același timp, eticheta are parametrul cite, a cărui valoare este adresa de rețea, numită și URL, a resursei de Internet pe care a fost localizat inițial textul citat. Și împreună cu eticheta, se folosește de obicei parametrul lang, a cărui valoare este desemnarea codului limbii, conform regulilor de punctuație ale căror ghilimele limitatoare sunt plasate. Nu este un secret că în limbi diferite Este obișnuit să folosiți ghilimele diferite.
Trebuie menționată și problema transferurilor. De obicei, creatorii de pagini web nici măcar nu se gândesc la această problemă, iar browserele nu se ocupă de împachetarea cuvintelor. Dacă un cuvânt nu se potrivește pe o linie, este pur și simplu mutat pe o altă linie. Dar aceasta nu este singura modalitate corectă de afișare a textului. Poate apărea o situație când trebuie să afișați text utilizând separarea în silabe. HTML oferă două tipuri de cratime - explicite și așa-numitele „soft”. Separarea explicită în silabe este creată folosind simbolul liniuță, care este de obicei înlocuit cu substituții numerice de text „-”. Cu toate acestea, separarea explicită în silabe este incomod, deoarece atunci când dimensiunea ferestrei de vizualizare a browserului se modifică, lungimea liniei se poate modifica și ea, dar semnul de silabe va rămâne în continuare vizibil. Chiar dacă se află la mijlocul liniei. Prin urmare, folosesc adesea transferuri „soft”. Acestea sunt create folosind substituția textului „-”. În acest caz, simbolurile cratimele moi nu sunt vizibile în text și numai în cazul în care orice cuvânt în care au fost introduse aceste simboluri nu se încadrează în întregime în rând, acesta este cratimă, împărțit în silabe, conform textului inserat „ cratime moi”. Și doar unul dintre simbolurile de silabe moale din acest cuvânt devine vizibil.
HTML vă permite, de asemenea, să afișați indicele și indicele folosind etichetele sale. O pereche de etichete și sunt folosite pentru a crea un superscript, iar un indice trebuie să fie înconjurat de etichete and. Să ne uităm la un exemplu de utilizare a acestor etichete.

Lista 1.9

Bepx și indicele

Apa este H20

Raportul dintre masă și energie - E = mc2

În Fig. 1.9.

Orez. 1.9. Fereastra browserului care arată rezultatul fișierului afișat în Listarea 1.9

De asemenea la design text Acestea sunt linii orizontale care separă adesea părți semnificative ale conținutului text al paginilor Web. O linie este inserată în textul unui document HTML folosind eticheta. Eticheta are mai mulți parametri care vă permit să reglați fin aspectul liniei orizontale.

Parametrul de aliniere vă permite să specificați alinierea orizontală a liniei. Parametrul poate avea una dintre cele trei valori presetate: stânga, dreapta și centru, care împing linia orizontală spre marginea stângă sau dreaptă a ferestrei de vizualizare, sau, respectiv, o centrează. Valoarea implicită este centru. Dacă eticheta include parametrul noshade, atunci linia orizontală afișată nu va avea umbră. Și ultimul parametrul de lățime vă permite să setați lungimea liniei orizontale. Valoarea implicită este „100%”. Și înălțimea liniei în pixeli este setată folosind parametrul dimensiune. Să ne uităm la utilizarea tuturor acestor parametri folosind un exemplu.

Lista 1.10

Aceasta este o linie normală afișată implicit

Aceasta este o linie scurtată apăsată spre stânga

Aceasta este o linie scurtată situată în centru

Aceasta este o linie scurtată apăsată la dreapta

Aceasta este o linie groasă fără umbră

Cum arată un astfel de document HTML atunci când este vizualizat folosind un browser este prezentat în Fig. 1.10.
Și aici, poate, putem încheia considerația noastră asupra capacităților de formatare a textului inerente HTML.

Orez. 1.10. Fereastra browserului care arată rezultatul fișierului afișat în Lista 1.10