Etichete care definesc paragraful, spațiul, blocul HTML și paragraful
Să luăm în considerare în detaliu Blocuri HTML și paragrafe ca elemente ale unei pagini web.
- Paragraf HTML definit de etichete.
- Paragrafe HTML conțin de obicei text, etichete de formatare, imagini.
- Paragraf HTML nu poate conține elemente de blocare precum anteturi
- , bloc
și alte paragrafe. - Bloc HTML definit de etichete .
- Bloc HTML poate conține orice elemente ale unei pagini web, în orice cantitate.
- Blocuri HTML excelent pentru pagini web și ușor de manipulat.
Luați în considerare codul de mai jos:
Rezultat:
Putem vedea asta Paragrafe HTML sunt indentate vertical - aceasta este particularitatea etichetelor. Blocuri HTML
Etichetele nu pot conține altele sau
Etichete și, în principiu, același lucru, dar consorțiul W3C a recomandat utilizarea literelor mici. V versiune noua HTML ca în XHTML-ul modern, utilizarea literelor majuscule la scrierea etichetelor este interzisă.
bloc
Spațiu HTML din tabelul de caractere special
Spațiu HTML vă permite să măriți spațiul dintre cuvinte și caractere.
În ceea ce privește spațiile dintre cuvinte, indiferent cât de multe dintre acestea există în Notepad, adică în codul sursă, doar unul va fi afișat pe pagina web. Dacă trebuie să măriți distanța, utilizați caracterul spațial din tabelul de simboluri. Întrebați: De ce avem nevoie de aceste valori codificate ale caracterelor obișnuite? - Voi răspunde: sunt necesare pentru a afișa, de exemplu, astfel de paranteze< >... Cu alte cuvinte, pentru a afișa etichetele, în editorul meu scriu: ... Etichete: , după cum ne amintim, convertiți textul în monospațiat (dactilografiat).
Modalități de afișare a unui paragraf HTML
Exemple de ieșire de paragraf.
Buna! Să continuăm să analizăm elementele de bază ale programării site-ului web. Este greu de imaginat pe vreunul dintre ei fără o etichetă de paragraf în codul lor. Astăzi vom analiza cum să-l scriem corect și o descriere a mai multor acțiuni suplimentare cu textul.
Exemplu
Să luăm un exemplu despre cum să faci un paragraf în cod HTML.
Una sau mai multe propoziții.
O condiție prealabilă este prezența unei etichete de deschidere și închidere. Apropo, totul se poate face direct în blocnotes, tocmai atunci va trebui să salvați fișierul în formatul corespunzător.
Formatare
Destul de des observ că oamenii sunt interesați de modul în care puteți face o linie roșie. Este foarte simplu pentru un anumit paragraf.
Activarea acestor opțiuni va indenta prima linie la 15 pixeli de la marginea din stânga. Dacă astfel de modificări trebuie aplicate tuturor etichetelor P, atunci în Fișier CSS, care se conectează la paginile site-ului, puteți scrie codul prezentat mai jos.
Personal, de obicei nu fac linii roșii când editez codul în blocnotes sau în alt editor.
Includ doar umplutura între casetele de text. Pentru a face acest lucru, trebuie să scrieți în CSS parametrii speciali.
p (marginea de jos: 25 px;)
Dacă utilizați această construcție, atunci după fiecare paragraf va exista o liniuță de 25 de pixeli.
De fapt, există o mulțime de opțiuni pentru lucrul cu HTML și diverse stiluri. Am descris doar câteva dintre ele, este foarte dificil să acoperiți totul într-un singur articol.
Vrei să afli mai multe? Poate că postările mele anterioare despre următoarele subiecte vor fi utile:
Aici voi termina articolul și, cred, acum nu va fi dificil să faci paragrafe în HTML și să le stilizezi frumos cu ajutorul etichetelor speciale.
Vă doresc mult succes în masterizarea programării. Apropo, v-ați gândit vreodată să câștigați bani pe site-uri informaționale necomerciale? Informații pur și simplu superbe oferite speciale pentru cititorii săi din.
Afacerile online și finanțele sunt subiectele cheie ale acestui blog. Vă puteți familiariza cu potențialii individuali din rețea chiar din materialele publicate. Continuă să pregătesc și să public conținut nou și, cel mai important, cu adevărat util. Abonați-vă la actualizările Workip de pe e-mail... Pana data viitoare.
- în procesul de creare a unui site web, trebuie să lucrăm mult cu blocuri de text sau fraze text. Odată, a trebuit să adaug o frază text, astfel încât înainte de această frază text să existe unele text de indentare de la marginea html blocul la care a fost adăugat textul dat.
Deci, prima metodă este cea mai naturală și simplă. Pentru a indenta înainte de text, adăugați înainte de text cod html spații - Puteți adăuga cod de spațiu html în orice editor html.
Iată un exemplu de cod de lucru pentru setarea indentării pentru text, folosind codul de spațiu:
HTML text de indentare în stânga, folosiți codul spațial
În acest exemplu, înainte de textul pe care l-am selectat, codul spațial este -& nbsp; adăugat de patru ori, ca rezultat, obținem liniuța de care avem nevoie.
Știm că codul spațiului alb este gestionat de orice browser. Prin urmare, adăugând numărul necesar de spații înainte de text, puteți obține indentarea necesară pentru text.
Partea bună a acestei metode este că va fi garantat să funcționeze în orice browser.
Dar ai aceasta metoda există un dezavantaj semnificativ. Pentru a face indentarea textului suficient de mare în lungime, în codul html, înainte de text va trebui să adăugați un numar mare de personaje spațiale, care ar putea să nu pară drăguțe, greoaie și nu profesionale.
Una dintre opțiunile pentru rezolvarea acestei probleme este următoarea cale sarcini de indentare.
Indentare text HTML, metoda a doua - această metodă se bazează pe proprietățile etichetei blockquote. Această etichetă setează indentarea de aproximativ 40 de pixeli la stânga și la dreapta, pentru textul plasat în ea. În plus, căptușeala este setată în partea de sus și de jos. Exemplu HTML codul pentru utilizarea acestei metode este dat mai jos:
în stânga, utilizați eticheta blockquote
După cum puteți vedea, această metodă de setare a indentării textului este foarte ușor de utilizat, dar această metodă are și un dezavantaj semnificativ. Indentarea setată de etichetă cotatie bloc, este fix și întotdeauna egal cu aceeași valoare - 40px.
Pentru a remedia situația și atunci când adăugați html indent si pentru text pentru a putea seta orice valoare, vom folosi a treia metodă.
Indentare text HTML, metoda trei.
Aici vom folosi proprietatea de indentare text a foilor de stil în cascadă CSS.
Dacă deschidem referința CSS, pe pagina cu descrierea proprietăților text-indent, vom vedea că, cu ajutorul text-indent, putem seta cantitatea de indentare a primei linii sau a primului paragraf din orice bloc de text.
Luăm în considerare un exemplu cu un bloc de text scurt, astfel încât proprietățile de indentare a textului sunt bune pentru cazul nostru.
Mai jos este codul html care indentează textul folosind indentarea textului. Din exemplu, puteți vedea că, prin setarea diferitelor valori ale argumentelor pentru indentarea textului, putem schimba cantitatea de indentare a textului:
HTMLindentaretext stilul CSS funcționează - text-indent
În opinia mea, această metodă de setare a indentării pentru text este cea mai optimă, dar, totuși, luați în considerare un alt mod de stabilire a indentării, folosind imagini.
Indentare text HTML, a patra metodă - aici vom folosi o imagine pentru a seta indentarea.
Ca exemplu de lucru, să aruncăm o privire asupra codului html care demonstrează modul în care funcționează această metodă:
în stânga, utilizați imaginea
Din exemplul dat se vede clar că, modificând lățimea imaginii, putem schimba poziția textului, adică putem seta indentarea necesară pentru text.
Ca imagine, puteți utiliza o imagine a cărei lățime și înălțime sunt egale cu un pixel. Pentru a preveni vizibilitatea imaginii pe care o folosim, setați culoarea exact la fel ca fundalul paginii site-ului.
În opinia mea, metodele de mai sus pentru setarea indentărilor textului sunt destul de suficiente pentru a organiza indentarea de care aveți nevoie în orice situație, atunci când adăugați conținut pe pagina site-urilor dvs.
Orice text are propria sa structură unică: cărțile sunt împărțite în părți, secțiuni și capitole, ziarele și revistele au titluri și subtitluri separate, care, la rândul lor, includ fragmente de text care au și structura lor proprie: paragrafe, liniuțe etc.
Textul plasat pe paginile web nu face excepție; trebuie să aibă, de asemenea, o structură logică care să fie ușor de înțeles de către fiecare utilizator. La urma urmei, multe depind de cât de convenabil și de simplu va fi perceput textul de pe pagină: în primul rând, ce impresie va avea vizitatorul despre site-ul dvs.
Pentru a crea unități structurale de text, cum ar fi paragrafe, documentele HTML folosesc eticheta
, care separă fragmente de text cu indentare verticală (se adaugă o linie goală înainte și după paragraf).
Notă: în mod implicit, distanța dintre paragrafe este 1em (em este o unitate de măsură egală cu înălțimea fontului), adică distanța dintre paragrafe depinde direct de dimensiunea fontului.
Pentru a schimba indentările dintre paragrafe fără a modifica dimensiunea fontului, puteți utiliza Proprietate CSS marjă.
Nu uitați eticheta finală
Majoritatea browserelor vor reda corect documentul HTML, chiar dacă uitați de eticheta finală.
Paragraf
Un alt paragraf
Acest cod va funcționa în majoritatea browserelor, dar nu vă bazați pe el. O etichetă finală uitată poate duce la rezultate sau erori neașteptate.
linie rosie
Care este linia roșie? Prin definiție, aceasta este linia de deschidere a unui paragraf care anterior a fost evidențiat în roșu (de aici și titlul). Înainte de a fi inventată tipografia, cărțile erau scrise manual - un capitol sau o parte a unui text, primul cuvânt sau o literă era scris cu vopsea roșie. Așa a apărut conceptul de „scriere din linia roșie” - înseamnă începutul unui nou gând, capitol sau parte.
Cu toate acestea, atunci când creați pagini web, designul liniei roșii este rar folosit, în ciuda faptului că vă permite să percepeți textul vizual cu mult mai mare confort, ceea ce este destul de important pentru cititorul tradițional - nu toată lumea este confortabilă citind electronicul versiunea textului.
Pentru a adăuga o linie roșie la paragrafe, trebuie să utilizați proprietatea CSS cu indentare text, care vă permite să indentați prima frază:
Încerca "
În exemplul de mai sus, primul rând al fiecărui paragraf de pe pagină va începe cu o liniuță de 25 px. Exemplul de mai jos arată cum puteți seta o linie roșie numai pentru un anumit paragraf de pe o pagină.
Ca în orice artă reală, nu există fleacuri în textele bune, la care unii includ linia roșie, crezând că utilizarea sa nu este atât de importantă. Cu toate acestea, trebuie să înțelegem că orice virgulă are atât o încărcătură estetică, cât și o sarcină semantică, și nu numai că este un tribut adus regulilor gramaticale - acest lucru se aplică și formatării.
Încerca "Notă: nu este necesar să setați umplutura la 25 px, puteți alege dimensiunea optimă indentare în sine, de asemenea, cu ajutorul proprietății text-indent este posibil să faceți o linie care să iasă deasupra restului textului, pentru aceasta trebuie să setați o valoare negativă pentru proprietate (de exemplu: -30px).
Sarcină
Indentați primul rând al fiecărui paragraf.
Soluţie
Când trebuie să setați o indentare de paragraf, care se numește și linie roșie, cel mai bine este să utilizați proprietatea stilului de indentare text. Valoarea sa determină cât de mult trebuie să deplasați textul primei linii spre dreapta poziția de plecare... În acest caz, lățimea blocului de text nu se modifică și rămâne setată inițial. Cantitatea de indentare poate fi specificată în pixeli, procente sau alte unități disponibile (exemplu 1).
Exemplul 1. Indentarea primei linii
HTML5 CSS 2.1 IE Cr Op Sa Fx
Pandemoniul babilonian, conform tradiției biblice, este încercarea eșuată a regelui Nimrod de a construi un stâlp în Babilon până la cer. Dumnezeu, supărat pe oameni pentru dorința lor nesăbuită, a decis să-i pedepsească pe constructori: le-a amestecat limba astfel încât aceștia să înceteze să înțeleagă fiecare, au fost nevoiți să oprească construcțiile și puțin câte puțin împrăștiate prin lume. Prin urmare, după cum au explicat anticii, a apărut diferența de limbi.
În conceptul obișnuit, pandemoniul babilonian înseamnă tulburare, confuzie cu o mulțime mare de oameni.
Rezultatul acestui exemplu este prezentat în Fig. 1.
