Nauč sa HTML od základov – 2. diel: Práca s textom a základné formátovanie

Reklama

V druhom dieli nášho seriálu o HTML sa budeme zaoberať prácou s textom a základnými technikami formátovania. Naučíme sa, ako používať HTML značky na vytváranie nadpisov, odsekov, tučného textu, kurzívy a podčiarknutého textu. Tieto techniky vám umožnia vytvárať zrozumiteľné a dobre štruktúrované webové stránky, ktoré budú pre používateľov vizuálne atraktívne a prehľadné.

Nadpisy v HTML

HTML umožňuje vytvárať nadpisy rôznych veľkostí pomocou značiek od <h1> po <h6>. Nadpisy slúžia na logické usporiadanie obsahu stránky, pričom <h1> je najväčší a najdôležitejší nadpis, zatiaľ čo <h6> je najmenší.

Príklad:

<h1>Hlavný nadpis stránky</h1>
<h2>Druhý úroveň nadpisu</h2>
<h3>Tretia úroveň nadpisu</h3>

• <h1>: Používa sa pre hlavný nadpis stránky alebo sekcie. Na stránke by sa mal nachádzať iba jeden nadpis <h1>, pretože ten reprezentuje hlavný obsah.
• <h2> až <h6>: Používajú sa pre nadpisy nižších úrovní, ktoré delia obsah na menšie časti.

Tip: Nadpisy sú dôležité nielen pre vizuálnu stránku, ale aj pre SEO (optimalizáciu pre vyhľadávače). Správne používanie nadpisov pomáha vyhľadávačom pochopiť štruktúru vašej stránky.

Odstavce v HTML

Na vytváranie textových odsekov v HTML slúži značka <p>. Každý blok textu, ktorý je obklopený touto značkou, bude zobrazený ako samostatný odstavec.

Príklad:

<p>Toto je prvý odstavec textu na mojej stránke.</p>
<p>A toto je druhý odstavec. Odseky pomáhajú rozdeliť text na čitateľnejšie časti.</p>

• <p>: Definuje odstavec textu. Všetko, čo sa nachádza medzi otváracou a zatváracou značkou <p>, bude interpretované ako jeden textový blok.

Formátovanie textu

HTML umožňuje formátovanie textu pomocou špeciálnych značiek. Toto formátovanie môže byť využité na zvýraznenie určitých častí textu, čím sa zlepší jeho čitateľnosť alebo dôraz na dôležité informácie.

Tučný text (<b> alebo <strong>)

Ak chcete, aby bol text tučný, môžete použiť značku <b> alebo <strong>. Z hľadiska dizajnu obe značky zmenia vzhľad textu na tučný, ale <strong> nesie aj semantický význam, ktorý hovorí prehliadačom a vyhľadávačom, že text je dôležitý.

Príklad:

<p>Toto je <b>tučný text</b> pomocou značky <code>&lt;b&gt;</code>.</p>
<p>Toto je <strong>dôležitý text</strong> pomocou značky <code>&lt;strong&gt;</code>.</p>

• <b>: Používa sa na zmenu vzhľadu textu na tučný bez ďalšieho významu.
• <strong>: Rovnako ako <b>, ale zároveň informuje prehliadače, že text má vyššiu dôležitosť.

Kurzíva (<i> alebo <em>)

Text môžete zobraziť v kurzíve pomocou značiek <i> alebo <em>. Značka <i> slúži na vizuálne zvýraznenie, zatiaľ čo <em> zdôrazňuje, že text má vyšší význam (emfáza).

Príklad:

<p>Toto je <i>kurzíva</i> pomocou značky <code>&lt;i&gt;</code>.</p>
<p>Toto je <em>dôležitý text v kurzíve</em> pomocou značky <code>&lt;em&gt;</code>.</p>

• <i>: Používa sa na zobrazenie textu v kurzíve bez ďalšieho významu.
• <em>: Okrem vizuálneho zobrazenia v kurzíve tiež značí text, ktorý má byť zvýraznený.

Podčiarknutý text (<u>)

Ak potrebujete podčiarknuť text, môžete použiť značku <u>:

<p>Tento text je <u>podčiarknutý</u>.</p>

• <u>: Zobrazí text s podčiarknutím.

Zoznamy v HTML

HTML podporuje dva hlavné typy zoznamov: nečíslované a číslované zoznamy. Zoznamy sú užitočné pre štruktúrovanie informácií, ako sú kroky v návode alebo zoznamy úloh.

Nečíslovaný zoznam (<ul>)

Nečíslované zoznamy používajú značku <ul> (unordered list) a jednotlivé položky sú zabalené do značky <li>.

<ul>
  <li>Prvá položka zoznamu</li>
  <li>Druhá položka zoznamu</li>
  <li>Tretia položka zoznamu</li>
</ul>

Číslovaný zoznam (<ol>)

Číslovaný zoznam používa značku <ol> (ordered list) a jednotlivé položky sú tiež zabalené do značky <li>. Rozdiel je v tom, že prehliadač automaticky pridá číslovanie k jednotlivým položkám.

<ol>
  <li>Prvá položka</li>
  <li>Druhá položka</li>
  <li>Tretia položka</li>
</ol>

• <li>: Definuje jednotlivé položky zoznamu. Používa sa v oboch typoch zoznamov.

Horizontálna čiara (<hr>)

Značka <hr> slúži na vloženie horizontálnej čiary do stránky, ktorá sa používa na vizuálne oddelenie obsahu.

Príklad:

<p>Toto je prvý odstavec.</p>
<hr>
<p>Toto je druhý odstavec, oddelený horizontálnou čiarou.</p>

Úloha pre vás

Teraz, keď už viete, ako formátovať text a vytvárať zoznamy, skúste vytvoriť HTML dokument s nasledujúcimi prvkami:

• Nadpis (<h1> až <h3>): Hlavný nadpis a dva podnadpisy.
• Odseky (<p>): Aspoň dva odseky textu.
• Formátovaný text: Použite tučný text, kurzívu a podčiarknutie v rámci odstavcov.
• Nečíslovaný a číslovaný zoznam: Vytvorte zoznamy vašich obľúbených kníh alebo filmov.
• Horizontálna čiara (<hr>): Vložte medzi jednotlivé sekcie horizontálnu čiaru.

Záver 2. časti

V tomto dieli sme sa naučili pracovať s textom a základným formátovaním v HTML. Teraz dokážete vytvárať webové stránky so štruktúrovaným obsahom, ktorý je čitateľný a vizuálne zaujímavý. V ďalšej časti sa pozrieme na to, ako pridávať obrázky a ďalšie médiá do webových stránok.

Pokračujte v seriáli:

• 3. diel: Obrázky a médiá v HTML.

Učenie sa HTML je krok za krokom jednoduchšie, pretože už teraz máte pevný základ. Experimentujte s textom, zoznamami a ďalšími formátovacími prvkami, aby ste získali ešte lepší prehľad o tom, ako funguje HTML.

Reklama