Etichetați noul paragraf. Cum pot adăuga o liniuță pe primul rând pentru fiecare paragraf? Crearea listelor html

Etichete care definesc paragraf, spațiu, bloc HTML și paragraf

Să ne uităm la asta în detaliu Blocuri și paragrafe HTML ca elemente ale unei pagini web.

Paragraf HTML definite de etichete.
Paragrafe HTML de obicei conțin text, etichete de formatare și imagini.
Paragraf HTML nu poate conține elemente de bloc, cum ar fi anteturi

-
, bloc

si alte paragrafe.
Bloc HTML definite 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 au indentări verticale - aceasta este o caracteristică a etichetelor. blocuri HTML

astfel de spații nu sunt create pentru că nu poartă nicio încărcătură, ci sunt pur și simplu containere.

Etichetele nu pot conține alte sau

. Elementele liniare pot fi plasate în interior, cum ar fi sau, de exemplu, etichete responsabile pentru formatarea textului.

Etichetele și , în principiu, sunt același lucru, dar consorțiul W3C recomandă folosirea literelor mici. În noua versiune de HTML, ca și în XHTML modern, este interzisă utilizarea majusculelor la scrierea etichetelor.

bloc

poate conține câte doriți

si alte elemente HTML document. Este ideal pentru aspect, dar mai multe despre asta mai târziu - în lecțiile tutorialului CSS.

Spațiu HTML din tabelul cu caractere speciale

Spațiu HTML vă permite să măriți distanța dintre cuvinte și caractere.

Cât despre spațiile dintre cuvinte, oricâte sunt în Notepad, adică în codul sursă, pe pagina web va fi afișat doar unul. Dacă trebuie să măriți distanța, utilizați caracterul spațiu din tabelul cu simboluri. Vă puteți întreba: De ce sunt necesare aceste semnificații 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 etichete pe ecran, în editorul meu scriu: . Etichete , după cum ne amintim, convertiți textul în monospațiu (dactilografiat).

Modalități de afișare a unui paragraf HTML

Exemple de ieșire de paragraf.

Pentru a-i da un stil specific, trebuie să plasați textul în containerul corespunzător.

Toate etichetele de formatare pot fi împărțite în trei grupuri:

1. Etichete de titlu ( h1-h6).

2. Etichete de design pentru textul corpului ( , , ,

, 
 etc.).
3. Etichete de grupare ( 

, 

, 

)
Etichete de titlu
Ele transformă textul obișnuit într-un titlu de un anumit nivel.  Etichetă 

 creează un titlu de prim nivel - cel mai mare și cel mai important (de obicei, titlul articolului de pe pagină), 
 este responsabil pentru al șaselea nivel al titlului - cel mai mic și mai discret.  Aceste etichete sunt importante atât pentru utilizatori, cât și pentru motoarele de căutare - ambilor le plac titlurile cu subtitluri.  Trebuie respectată ierarhia nivelurilor, adică 
 trebuie sa plec 
, și nu invers.
Pentru a înțelege cum funcționează, introduceți următorul cod în fișierul html:
 
Antet de primul nivel
Titlu de al doilea nivel
Titlu de nivel al treilea
Al patrulea nivel al titlului
Titlu de nivel 5
Titlu de nivel șase

În browser va arăta așa:
Etichete de design pentru textul corpului
Permite formatarea la nivel de caracter.  Să ne uităm la ce poți face cu ele.
Font aldine
Este necesar să se concentreze atenția asupra textului.  De asemenea, este important pentru motoarele de căutare, acestea pot evidenția cuvintele cheie.
Responsabil pentru etichetele îndrăznețe 
Și .

Superscript și indice
Ele pot fi utilizate în formule, ecuații și desemnarea anumitor cantități.
Eticheta este responsabilă pentru crearea indicelor , pentru cele de sus se folosește eticheta .
X ₁=32 m ²
Reducerea personalului
Dacă trebuie să faceți textul cu o valoare mai mică decât valoarea setată pe toată pagina, atunci trebuie să utilizați eticheta 

Text simplu. Text redus.
Sublinia
Acest tip de evidențiere poate fi folosit pentru a indica modificările aduse unui document sau pur și simplu pentru a atrage atenția asupra textului.
Text simplu. Text subliniat.
Striat
Puteți tăia informații dacă acestea și-au pierdut deja relevanța.  Aceasta este eticheta pentru asta 
.
Cursive
Este necesar să se concentreze atenția asupra textului și poate fi creat cu o etichetă 
 sau 
.

Introducerea textului pe computer
Se întâmplă că trebuie să adăugați codul sursă al unui program și rezultatele muncii sale pe o pagină web.  Pentru a facilita distingerea vizuală a diferitelor părți ale textului una de cealaltă, dezvoltatorii HTML au introdus etichete ale acestui grup.
În recipient 
 conține codul programului, iar variabilele acestuia sunt evidențiate cu eticheta 
, iar rezultatul executării este 
.  Container 
 conține text pe care utilizatorul trebuie să îl introducă de la tastatură atunci când lucrează cu programul și tot ceea ce este inclus în etichete 
, păstrează formatul original, inclusiv spații suplimentare și întreruperi de linie.
  Prin urmare a, b, c, Aici rezultat al executării programului , și asta este utilizatorul a introdus text 
afisat asa ceva
.
Citate și definiții
Codul programului va arăta ca 
 Prin urmare 
, variabilele sunt desemnate după cum urmează: 
 a, b, c 
, Aici 
 rezultatul executării programului 
, și asta este 
 utilizatorul a introdus text 
.  Păstrați formatarea originală 
 afisat asa ceva 

.
 
Citat în eticheta blockquote.
Citat în interiorul containerului citat.Citat scurt etichetat q.Definiție dedicată.Abreviere (NPO, IP).
Exemplu general
Pentru a înțelege mai bine de ce este responsabilă fiecare etichetă și cum funcționează, priviți următorul cod și rezultatul execuției sale.
 
Gras textul poate fi transformat în etichete puternicȘi b.  In spate cursive Răspuns eiȘi i.
Etichete _subȘi ^cina folosit pentru a crea _inferior(X ₁…X _n) Și ^superior (4²=16) indici. Del taie, ins - subliniază.
Etichete cod, kbd, varȘi mămăligă sunt rar folosite și sunt necesare pentru afișarea listelor de programe
 abr necesare pentru a indica abrevieri ( HTML).  Etichetele blockquote, cite și q sunt folosite pentru a formata ghilimele ( Cerul respira deja toamna)
Eticheta pre păstrează formatarea originală a textului fără a elimina spații sau întreruperi de rând.

Browserul interpretează acest cod după cum urmează:

Etichete de grupare
Este necesar ca textul să nu curgă într-o singură linie continuă, ci să fie rupt în componente logice.
În interiorul etichetelor este un paragraf.
 
Primul paragraf
Al doilea paragraf


Etichetă 

 trece la rândul următor dintr-un paragraf (nu va exista indentație înaintea rândului).

 vă permite să trasați o linie orizontală.  Îl puteți folosi pentru a separa textul mai clar.  Atribute lăţime, mărimea, culoare, aliniaȘi noshade setați lățimea, grosimea, culoarea, alinierea și, respectiv, lipsa efectului 3D al liniei.
 
Linie deasupra liniei. 
Linie de sub linie.


Deci, să trecem direct la învățarea limbajului HTML.  În sfârșit, încă câteva cuvinte în afara subiectului.
În procesul de prezentare a materialului se vor da multe exemple, pe care te sfătuiesc să le faci singur.  După ce ați tastat textul exemplu, asigurați-vă că vă uitați la ce ați primit (cred că veți fi interesat).  Dacă utilizați un editor HTML specializat, atunci, de regulă, un astfel de program are propriul browser încorporat, cu care puteți vedea rezultatele muncii dvs.
Dacă lucrurile sunt cu adevărat dificile și utilizați un blocnotes obișnuit, atunci pentru a-l vizualiza trebuie să salvați textul sursă cu extensia .htm sau .html și apoi să vizualizați fișierul salvat într-un browser.  Dacă aveți Windows, atunci browserul Internet Explorer este încorporat automat la instalarea sistemului.
Ei bine, asta pare să fie tot.
Sa trecem la treaba.
Etichete necesare (etichete)
Există mai multe etichete HTML de bază care trebuie să fie prezente în textul oricărei pagini Web.  Fiecare pagină Web trebuie să conțină o etichetă (etichetă) 

, situat chiar la început.  Această etichetă (etichetă) descrie documentul dvs. ca o pagină Web în format HTML.  Direct în spatele mânerului 

 de obicei urmată de etichetă (etichetă) 

, care indică prezența unui text care conține numele paginii și informații suplimentare despre aceasta.
Secțiunea HEAD conține de obicei o etichetă (etichetă) 
</b>, care servește la indicarea numelui paginii.  Titlurile paginilor apar de obicei în bara de titlu a ferestrei browserului.  Titlul paginii web poate fi introdus numai folosind caractere alfanumerice și spații.</p>
<p>Apoi vine eticheta (eticheta) <b><BODY>
</b>, care indică începutul „corpului” real al paginii Web.  Această secțiune conține tot restul textului, graficelor, tabelelor și altor elemente ale conținutului paginii pe care le va vedea un vizitator al site-ului dvs.</p>
<p>Exemplu:</p><p>
 <html>
<head>
<title>Training online: HTML

Textul site-ului

Un editor HTML normal are deja un set de etichete (etichete) de mai sus atunci când creează o pagină nouă.  Trebuie spus că alegerea numelor pentru paginile Web trebuie luată foarte în serios, pentru că  sunt folosite de motoarele de căutare pentru a crea cataloage de pagini Web.  Un motor de căutare este un site web care ajută utilizatorii să găsească rapid informațiile de care sunt interesați.  Pagina dvs. este mai probabil să fie găsită de un motor de căutare căruia îi este dat un set specific de cuvinte cheie de căutare dacă acele cuvinte apar în titlul paginii.  Printre cele mai populare motoare de căutare se numără Yandex, Google, Aport, Yahoo, Rambler.

Creați paragraf, caractere de spațiu, titlu
Browserele web de obicei nu iau în considerare acele caractere newline care sunt introduse în text de către utilizator în etapa formării acestuia.  Pentru a începe un nou paragraf, utilizați o etichetă (etichetă) 


.
După deschiderea unei pagini într-o fereastră de browser Web, toate paragrafele textului acesteia sunt marcate cu o etichetă (etichetă) 

, separate prin linii goale, ceea ce îi îmbunătățește aspectul și aspectul.
În mod implicit, browserul formatează de obicei paragrafele cu aliniere la stânga.  Pentru a forța alinierea, utilizați atributul align.  Cu ajutorul acestuia, paragrafele pot fi aliniate la stânga, la dreapta, la centru și justificate.
Exemplu:

Cod HTML:

paragraful este aliniat la stânga...

paragraful este aliniat la dreapta...

paragraful este aliniat la centru...

paragraful este justificat...



Afișarea browserului:

paragraf aliniat paragraf stânga aliniat paragraf stânga paragraf aliniat la stânga paragraf aliniat la stânga paragraf aliniat la stânga paragraf aliniat la stânga paragraf aliniat la stânga paragraf aliniat la stânga paragraf aliniat la stânga paragraf aliniat la stânga
paragraf aliniat la dreapta paragraful aliniat la dreapta paragraful aliniat la dreapta paragraful aliniat la dreapta paragraful aliniat la dreapta paragraful aliniat la dreapta paragraful aliniat la dreapta paragraful aliniat la dreapta paragraful aliniat la dreapta
paragraful aliniat la centru paragraful aliniat la centru paragraful paragraful aliniat la centru paragraful aliniat la centru paragraful aliniat la centru paragraful aliniat la centru paragraful paragraful aliniat la centru paragraful aliniat la centru paragraful aliniat la centru
paragraf justificat paragraf justificat paragraf justificat paragraf justificat paragraf justificat paragraf justificat paragraf justificat paragraf justificat paragraf justificat paragraf justificat paragraf justificat paragraf justificat

Browserele web împachetează automat textul în paragrafe pe o nouă linie.  Dacă sarcina este de a plasa orice combinație de cuvinte într-o singură linie, atunci se folosește o etichetă în acest scop. 
.

Pentru a accesa o linie nouă, utilizați o etichetă (etichetă) 
.  Spune browserului să nu mai plaseze text și alte elemente ale paginii în linia curentă și să treacă la o nouă linie.  Această etichetă (etichetă) nu are omologul său slash, așa-numita etichetă de închidere (etichetă).
Utilizarea principală a acestei etichete este aceea de a forța elementele inline să fie plasate într-o anumită locație a paginii.  De asemenea, este convenabil în cazurile în care este necesară creșterea zonelor goale dintre elementele individuale ale paginii.
– în procesul de creare a unui site web, trebuie să lucrăm mult cu blocuri de text, sau fraze de text.  Într-o zi, a trebuit să adaug o frază text în așa fel încât înaintea acestei fraze text să fie ceva indentarea textului din edge html bloc în care a fost adăugat acest text.

Deci, prima metodă este cea mai naturală și cea mai simplă.  Pentru a indenta textul, adăugați un cod de spațiu html înainte de text - Puteți adăuga un 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 indentarea textului din stânga,
utilizați codul de spațiu





 
În acest exemplu, înainte de textul pe care l-am selectat, este codul de spațiu  adăugat de patru ori, ca urmare, obținem indentarea de care avem nevoie.
Știm că codul de spațiu este procesat 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.
Această metodă este bună, deoarece este garantat că va fi procesată de orice browser. 


 

Dar această metodă are un dezavantaj semnificativ.  Pentru a indenta textul suficient de lung în codul html, va trebui să adăugați un număr mare de caractere de spațiu înaintea textului, care poate să nu arate frumos, greoi și neprofesionist. 

O soluție la această problemă este următoarea metodă de setare a indentării.
Indentarea textului HTML, metoda a doua - această metodă se bazează pe proprietățile etichetei blockquote.  Această etichetă stabilește o indentare de aproximativ 40 de pixeli în stânga și dreapta pentru textul plasat în ea.  În plus, indentarea este specificată în partea de sus și de jos.  Un exemplu de cod html pentru utilizarea acestei metode este dat mai jos:

 
din stânga, utilizați eticheta blockquote

După cum puteți vedea, această metodă de setare a indentării pentru text este foarte ușor de utilizat, dar această metodă are și un dezavantaj semnificativ.  Indentarea pe care o setează eticheta blockquote este fix și este întotdeauna egal cu aceeași valoare – 40px.
Pentru a corecta situația, și atunci când adăugați indentare html si pentru text pentru a putea seta orice valoare, vom folosi a treia metoda.
Indentarea textului HTML, metoda trei.
Aici vom folosi proprietatea text-indent a CSS Cascading Style Sheets.
Dacă deschidem cartea de referință CSS, pe pagina cu o descriere a proprietăților text-indent, vom vedea că folosind text-indent, putem seta valoarea de indentare a primului rând sau a primului paragraf, sau a oricărui bloc de text .
Luăm în considerare un exemplu cu un bloc scurt de text, așa că proprietățile text-indent sunt destul de potrivite pentru cazul nostru.
Mai jos este codul html care indentează text folosind text-indent.  Exemplul arată că setând text-indent la diferite valori ale argumentului, putem schimba cantitatea de indentare a textului:

 
 HTMLindentaretext, stilul CSS funcționează - text-indentare
După părerea mea, această metodă de setare a unei indentări pentru text este cea mai optimă, dar, totuși, să luăm în considerare o altă modalitate de a seta o indentație, folosind imagini.
Indentarea textului HTML, a patra metodă - aici vom folosi o imagine pentru a seta indentarea.
Ca exemplu de lucru, să ne uităm imediat la codul html care demonstrează cum funcționează această metodă:
din stânga, folosiți imaginea

Din exemplul de mai sus se vede clar că prin modificarea lățimii imaginii, putem schimba poziția textului, adică setăm indentarea dorită 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 ca imaginea pe care o folosim să fie vizibilă pe pagină, îi vom seta culoarea exact la fel ca fundalul paginii site-ului.
După părerea mea, metodele de mai sus pentru setarea indentărilor pentru text 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 o structură proprie: paragrafe, indentări etc.
 Textul postat pe paginile web nu face excepție; trebuie să aibă, de asemenea, o structură logică care să fie înțeleasă de fiecare utilizator.  La urma urmei, multe depind de cât de convenabil și simplu este perceput textul de pe pagină: în primul rând, ce impresie va avea vizitatorul despre site-ul tău.
 Pentru a crea unități de text structurale, cum ar fi paragrafele, documentele HTML folosesc eticheta 
, care separă fragmentele de text cu o 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 modifica marginile dintre paragrafe fără a modifica dimensiunea fontului, puteți utiliza proprietatea margin CSS.
 Nu uitați de eticheta de închidere
 Majoritatea browserelor vor reda corect documentul HTML chiar dacă uitați eticheta de închidere.

 
Paragraf 
Un alt paragraf
 
Acest cod va funcționa în majoritatea browserelor, dar nu vă bazați pe el.  O etichetă de închidere uitată poate duce la rezultate sau erori neașteptate.
 linie rosie
 Ce este o linie roșie?  Prin definiție, aceasta este linia de început a unui paragraf, care obișnuia să fie evidențiat cu roșu (de unde și numele).  Înainte de inventarea tiparului, cărțile erau scrise de mână - un capitol sau o parte din text, primul cuvânt sau literă era scris cu vopsea roșie.  Așa a apărut conceptul de „scriere de pe linia roșie” - aceasta înseamnă începutul unui nou gând, capitol sau parte.
 Cu toate acestea, atunci când se creează pagini web, designul liniei roșii este folosit destul de rar, în ciuda faptului că face mult mai convenabilă perceperea vizuală a textului, ceea ce este destul de important pentru cititorul tradițional - nu toată lumea este confortabilă să citească versiunea electronică a textul.
 Pentru a adăuga o linie roșie la paragrafele dvs., trebuie să utilizați proprietatea CSS text-indent, care vă permite să indentați prima propoziție:

 
 
 
 
 
 
 
Încerca "
În exemplul de mai sus, primul rând al fiecărui paragraf de pe pagină va începe cu o indentare de 25 de pixeli.  Exemplul de mai jos demonstrează cum puteți seta o linie roșie numai pentru un anumit paragraf dintr-o pagină.

 
Ca în orice artă adevărată, 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ă poartă atât o sarcină estetică, cât și semantică și nu este doar un tribut adus regulilor gramaticale - acest lucru se aplică și formatării.
Încerca "
Notă: nu este necesar să setați indentarea la 25px, puteți alege singur dimensiunea optimă a indentării, iar folosind proprietatea 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).