„Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Velit esse cillum dolore eu fugiat nulla pariatur. Okrem sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Odsek 1.10.32 „de Finibus Bonorum et Malorum“, ktorý napísal Cicero v roku 45 po Kr. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabops i autmait volutem auto voluptam git, sedquia Consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora et doloremat amlupeni ut minima veniam quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? iatur?" Anglický preklad 1914, H. Rackham „Musím vám však vysvetliť, ako sa zrodila celá táto mylná predstava odsudzovania rozkoše a chválenia bolesti, a poskytnem vám úplný prehľad o systéme a vysvetlím skutočné učenie veľkého objaviteľa. pravdy, majstra-budovateľa ľudského šťastia. Nikto neodmieta, nemá rád a nevyhýba sa potešeniu samotnú, pretože je to potešenie, ale pretože tí, ktorí nevedia, ako dosiahnuť potešenie, racionálne narážajú na následky, ktoré sú mimoriadne bolestivé. je tu každý, kto miluje alebo prenasleduje alebo túži získať bolesť samej od seba, pretože je to bolesť, ale preto, že sa občas vyskytnú okolnosti, za ktorých mu olej a bolesť môžu priniesť veľké potešenie. Aby sme si vzali triviálny príklad, kto z nás niekedy podstupuje namáhavé fyzické cvičenie , okrem toho, že z toho získa nejakú výhodu? Ale kto má právo hľadať chyby na mužovi, ktorý sa rozhodne užívať si rozkoš, ktorá nemá nepríjemné následky, alebo na mužovi, ktorý sa vyhýba bolesti, ktorá neprináša žiadne potešenie?" Odsek 1.10.33 „de Finibus Bonorum et Malorum“, ktorý napísal Cicero v roku 45 po Kr. „V spoločnosti Vero eos et acusamus et iusto Odio Dignissimos ducimus qui qui blandnitiis praesentium skoruptatum deleniti atque corrupti quos dolores et quas molestias samituri sint sint accati cupidate neosident, similique sunt v culpa qui qui qui qui úradník rerum facilis est et expedita differentio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo mínus id quod maximum placeat facere possimus, omnis voluptas advancenda est, omnis dolor repellendus. t "ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat." Anglický preklad 1914, H. Rackham „Na druhej strane so spravodlivým rozhorčením a nechuťou odsudzujeme mužov, ktorí sú tak očarení a demoralizovaní kúzlom rozkoše okamihu, takí zaslepení túžbou, že nedokážu predvídať bolesť a problémy, ktoré musia nasledovať; a rovnaká vina patrí tým, ktorí zlyhajú vo svojich povinnostiach slabou vôľou, čo je to isté, ako povedať, že sa zbavia driny a bolesti. Tieto prípady sú úplne jednoduché a ľahko rozlíšiteľné. Vo voľnej hodine, keď naša sila voľby je neobmedzená, a keď nám nič nebráni v tom, aby sme mohli robiť to, čo máme najradšej, každé potešenie je vítané a každá bolesť sa vyhýba. Ale za určitých okolností a kvôli nárokom na povinnosti alebo povinnostiam obchodu to často bude sa stáva, že pôžitky treba zavrhnúť a mrzutosti akceptovať. Múdry človek sa preto v týchto veciach vždy drží tohto princípu selekcie: odmieta pôžitky, aby si zabezpečil iné väčšie pôžitky, alebo znáša bolesti, aby sa vyhol horším bolestiam."

Bloky textu sú spravidla oddelené odsekmi (odsekmi). Štandardne je medzi odsekmi malá vertikálna medzera, ktorá sa nazýva medzera. Syntax vytvárania odsekov je nasledovná.

odsek 1

odsek 2

Každý odsek začína značkou

A končí voliteľnou uzatváracou značkou

V každej knihe sa na zvýraznenie nasledujúceho odseku používa odsadenie prvého riadku, nazývané aj „červená čiara“. To umožňuje čitateľovi ľahko hľadať Nový riadok a tým zvyšuje čitateľnosť textu. Na webovej stránke sa táto technika zvyčajne nepoužíva, ale na oddelenie odsekov sa používa výplň.

Príklad 7.1 ukazuje použitie odsekov na vytvorenie zarážok medzi riadkami.

Príklad 7.1. Používanie odsekov

Niekde je ešte február, inde už apríl.

Čas plynie, večné počítanie: rok po roku, storočie po storočí...

Vo všetkom – jeho neuspěchané tempo, jeho čiernobiely beh.

V roku je dvadsaťpäť týždňov radosti a smútku.

Mám dvadsaťpäť týždňov do februára a dvadsaťpäť týždňov do apríla.

Na dvadsaťpäť týždňov prejdú storočia do hmly.

Moja zvučná fraška letí kamsi k oblakom.

M. Ščerbakov

Výsledok tohto príkladu je znázornený na obr. 7.1.

Ryža. 7.1. Odsadenie na webovej stránke pri použití odsekov

Ako je zrejmé z obrázku, pri použití značky

Medzi odsekmi je príliš veľa medzier. Môžete sa ich zbaviť, ak pridáte značku na zalomenia riadkov:
. Na rozdiel od odseku značka zalomenia riadku
nevytvára ďalšie zvislé medzery medzi riadkami a dá sa použiť takmer v akomkoľvek texte.

Text príkladu 7.1, berúc do úvahy zalomenia riadkov, bude teda transformovaný nasledovne (príklad 7.2).

Príklad 7.2. Tag

V niektorých záhradách kvitnú mandľové stromy, v iných zase fúkajú snehové búrky.
Niekde je ešte február, inde už apríl.
Čas plynie, večné počítanie: rok po roku, storočie po storočí...
Vo všetkom – jeho neuspěchané tempo, jeho čiernobiely beh.
V roku je dvadsaťpäť týždňov radosti a smútku.
Mám dvadsaťpäť týždňov do februára a dvadsaťpäť týždňov do apríla.
Na dvadsaťpäť týždňov prejdú storočia do hmly.
Moja zvučná fraška letí kamsi k oblakom.

M. Ščerbakov

Výsledok príkladu je znázornený na obr. 7.2. Je vidieť, že vzdialenosť medzi riadkami textu sa zmenšila a nadobudol kompaktnejší vzhľad.

Aby ste mu dali špecifický štýl, musíte text umiestniť do príslušného kontajnera.

Všetky formátovacie značky možno rozdeliť do troch skupín:

1. Značky názvu ( h1-h6).

2. Značky dizajnu hlavného textu ( , , ,

, 
 atď.).
3. Zoskupovanie značiek ( 

, 

, 

)

Značky titulkov
Premieňajú bežný text na nadpis určitej úrovne.  Tag 

 vytvorí nadpis prvej úrovne – najväčší a najdôležitejší (zvyčajne názov článku na stránke), 

 je zodpovedný za nadpis šiestej úrovne – najmenší a najnenápadnejší.  Tieto značky sú dôležité pre používateľov aj vyhľadávače – obaja milujú nadpisy s podnadpismi.  Je potrebné dodržiavať hierarchiu úrovní, tj. 

 musieť ísť 

, a nie naopak.

Ak chcete pochopiť, ako to funguje, zadajte nasledujúci kód do súboru html:
 
Hlavička prvej úrovne
Nadpis druhej úrovne
Nadpis tretej úrovne
Nadpis štvrtej úrovne
Nadpis úrovne 5
Nadpis šiestej úrovne

V prehliadači to bude vyzerať takto:
Značky dizajnu textu tela
Umožňuje formátovanie na úrovni znakov.  Pozrime sa, čo s nimi môžete robiť.
Tučné písmo
Je potrebné zamerať pozornosť na text.  Je to dôležité aj pre vyhľadávače, ktoré dokážu zvýrazniť kľúčové slová.
Zodpovedá za značky v tučnom štýle 
 A .

Horný a dolný index
Môžu byť použité vo vzorcoch, rovniciach a pri označovaní určitých veličín.
Značka je zodpovedná za vytváranie dolných indexov 
, pre vrchné sa používa značka 
.
X 1= 32 m 2
Zmenšovanie
Ak potrebujete, aby bol text o jeden menší, než je nastavená hodnota na celej stránke, musíte použiť značku 

Obyčajný text. Redukovaný text.
Podčiarknite
Tento typ zvýraznenia možno použiť na označenie zmien vykonaných v dokumente alebo jednoducho na upútanie pozornosti na text.
Obyčajný text. Podčiarknutý text.
Prečiarknuté
Informácie môžete prečiarknuť, ak už stratili význam.  Toto je značka pre toto 
.
Kurzíva
Je potrebné zamerať pozornosť na text a môže byť vytvorený pomocou značky 
 alebo 
.

Počítačové zadávanie textu
Stáva sa, že potrebujete pridať zdrojový kód programu a výsledky jeho práce na webovú stránku.  Na uľahčenie vizuálneho odlíšenia rôznych častí textu od seba vývojári HTML zaviedli značky tejto skupiny.
Do kontajnera 
 obsahuje kód programu a jeho premenné sú zvýraznené značkou 
, a výsledkom exekúcie je 
.  Kontajner 
 obsahuje text, ktorý musí užívateľ zadať z klávesnice pri práci s programom, a všetko uzavreté v tagoch 
, zachová pôvodný formát vrátane nadbytočných medzier a zalomení riadkov.

  Teda a, b, c, Tu výsledok vykonávania programu , a toto je text zadaný používateľom 
zobrazil niečo takéto
.

Citáty a definície
Kód programu bude vyzerať takto 
 Teda 
, premenné sú označené takto: 
 a, b, c 
, Tu 
 výsledok vykonávania programu 
, a toto je 
 text zadaný používateľom 
.  Ponechajte pôvodné formátovanie 
 zobrazil niečo takéto 

.

 
Citácia v značke blockquote.
Citácia v kontajneri citácie.Krátky citát s označením q.Vyhradená definícia.Skratka (NPO, IP).

Všeobecný príklad
Aby ste lepšie pochopili, za čo sú jednotlivé značky zodpovedné a ako fungujú, pozrite si nasledujúci kód a výsledok jeho vykonania.
 
Mastný z textu možno vytvoriť značky silný A b.  vzadu kurzíva odpoveď em A i.
Tagy sub A súp použité na vytvorenie nižšie(X 1…X n) A horný (42=16) indexy. Del prečiarkne, ins - zdôrazňuje.
Tagy kód, kbd, var A samp sa používajú zriedka a sú potrebné na zobrazenie výpisov programov
 skr potrebné uviesť skratky ( HTML).  Značky blockquote, cit a q sa používajú na formátovanie úvodzoviek ( Obloha už dýchala jeseňou)
Predznačka zachováva pôvodné formátovanie textu bez odstránenia medzier alebo zlomov riadkov.

Prehliadač interpretuje tento kód takto:

Zoskupovanie značiek
Je potrebné, aby text neplynul v jednom súvislom riadku, ale bol členený na logické zložky.
Vo vnútri značiek je odsek.
 
Prvý odsek
Druhý odsek


Tag 

 presunie sa na ďalší riadok v rámci odseku (pred riadkom nebude žiadne odsadenie).

 umožňuje nakresliť vodorovnú čiaru.  Môžete ho použiť na jasnejšie oddelenie textu.  Atribúty šírka, veľkosť, farba, zarovnať A noshade nastaviť šírku, hrúbku, farbu, zarovnanie a absenciu 3D efektu čiary, resp.
 
Čiara nad čiarou. 
Riadok pod riadkom.

Úloha
Zmeňte vzdialenosť medzi odsekmi textu vytvoreného pomocou značky 
Riešenie
Pri použití značky 
Nad a pod textový odsek sa automaticky pridávajú zarážky.  Toto sa robí s cieľom vizuálne oddeliť jeden blok textu od druhého.  Je jasné, že predvolené hodnoty odsadenia nie sú vždy vyhovujúce, takže sa niekedy musia znížiť alebo zvýšiť.  Na to môžete použiť univerzálnu vlastnosť margin , ktorá určuje zarážky na všetkých stranách odseku alebo margin-top pre zarážku hore a margin-bottom pre zarážku dole (príklad 1).
Príklad 1. Zmena hodnoty odsadenia odseku
HTML5 CSS 2.1 IE Cr Op Sa Fx

 

 
 
 
 
 
 
 
Slnko jasne svietilo, 
Vietor sa ukázal byť spravodlivý - 
Cestovatelia dostali 
Cesta je príjemná a nenáročná. 
Zrazu je v diaľke pirátska loď 
Ukázal sa s dlhou vlajkou; 
Bol naň umiestnený baran, 
Pripravený na útoky.
 
Hlasné zavýjanie do potrubia, 
Lupiči sa blížili 
Kričali hrozivým hlasom, 
Volanie všetkých na meč. 
Stavitelia lodí sú vystrašení 
Zbeleli ako krieda. 
Len rytier bol pokojný, 
Len on nebol bojazlivý.
 

Výsledok príkladu je znázornený na obr.  1.
Ryža.  1. Medzery medzi odsekmi textu
V tomto príklade sú v hornej a dolnej časti odseku použité rôzne zarážky.  Toto je obzvlášť dôležité, ak sú v texte obrázky a podnadpisy.
Každý text má svoju vlastnú jedinečnú štruktúru: knihy sú rozdelené na časti, sekcie a kapitoly, noviny a časopisy majú samostatné nadpisy a podnadpisy, ktoré zase obsahujú fragmenty textu, ktoré majú tiež svoju vlastnú štruktúru: odseky, zarážky atď.
 
Výnimkou nie je ani text zverejnený na webových stránkach, ktorý musí mať aj logickú štruktúru, ktorá je zrozumiteľná pre každého používateľa.  Koniec koncov, veľa závisí od toho, ako pohodlne a jednoducho je text na stránke vnímaný: v prvom rade, aký dojem získa návštevník o vašej stránke.
 
Na vytvorenie štruktúrnych textových jednotiek, ako sú odseky, používajú HTML dokumenty značku 
, ktorý oddeľuje fragmenty textu zvislým odsadením (pred a za odsek sa pridá prázdny riadok).
Poznámka: predvolene je vzdialenosť medzi odsekmi 1 em (em je merná jednotka rovnajúca sa výške písma), to znamená, že vzdialenosť medzi odsekmi priamo závisí od veľkosti písma.
Ak chcete zmeniť okraje medzi odsekmi bez zmeny veľkosti písma, môžete použiť vlastnosť margin CSS.
 
Nezabudnite na záverečný štítok
 
Väčšina prehliadačov vykreslí HTML dokument správne, aj keď zabudnete uzatváraciu značku.

 
Odsek 
Ďalší odsek
 
Tento kód bude fungovať vo väčšine prehliadačov, ale nespoliehajte sa naň.  Zabudnutá koncová značka môže viesť k neočakávaným výsledkom alebo chybám.
 
červená čiara
 
Čo je to červená čiara?  Podľa definície ide o začiatočný riadok odseku, ktorý býval zvýraznený červenou farbou (odtiaľ názov).  Pred vynájdením tlače sa knihy písali ručne – kapitola alebo časť textu, prvé slovo alebo písmeno sa písalo červenou farbou.  Takto sa objavil pojem „písanie od červenej čiary“ - to znamená začiatok novej myšlienky, kapitoly alebo časti.
 
Pri vytváraní webových stránok sa však dizajn červenej čiary používa pomerne zriedka, napriek tomu, že umožňuje oveľa pohodlnejšie vnímať text vizuálne, čo je pre tradičného čitateľa dosť dôležité - nie každému vyhovuje čítanie elektronickej verzie text.
 
Ak chcete do odsekov pridať červenú čiaru, musíte použiť vlastnosť CSS text-indent, ktorá vám umožňuje odsadiť prvú vetu:

 
 
 
 
 
 
 
 Skúste »
Vo vyššie uvedenom príklade bude prvý riadok každého odseku na stránke začínať zarážkou 25 pixlov.  Príklad nižšie ukazuje, ako môžete nastaviť červenú čiaru len pre konkrétny odsek na strane.

 
Ako v každom skutočnom umení, ani v dobrých textoch nie sú žiadne maličkosti, ku ktorým niektorí zaraďujú červenú čiaru, pretože veria, že jej použitie nie je také dôležité.  Musíme však pochopiť, že každá čiarka nesie estetickú aj sémantickú záťaž a nie je len poctou pravidlám gramatiky - to platí aj pre formátovanie.
 Skúste »
Poznámka: nie je potrebné nastavovať odsadenie na 25px, optimálnu veľkosť odsadenia si môžete zvoliť sami a pomocou vlastnosti text-indent je možné urobiť riadok vyčnievajúci nad zvyšok textu, na to je potrebné nastaviť zápornú hodnotu vlastnosti (napríklad: -30px).