/ +421 2 5010 6700 Po – Pi: 8.00 – 18.00 hod.

Základy HTML pre prekladateľov

Lucia Švecová Ciferník09.10.2019 Pre prekladateľov Čas čítania: 5 min.
muž sediaci za počítačom programuje stránku v HTML

HTML je lingua franca internetu – tento jazyk totiž používajú všetky web stránky. Ak ešte nemáte vlastnú web stránku, kde by ste prezentovali svoje prekladateľské či tlmočnícke služby, práve dnes sa vám naskytá príležitosť pustiť sa do nej. Náš článok vás prevedie základmi HTML a naučí vás vytvoriť jednoduchú stránku.

Čo je HTML?

Skôr ako sa ponoríme do tajov vytvárania web stránok, musíme si vysvetliť, čo to HTML vlastne je.

nápis I know html: how to meet ladiesZdroj: www.teepublic.com

HTML  je hypertextový značkovací jazyk (z angl. hypertext markup language), ktorý využíva kombináciu bežného textu a značiek. Nemýľte si ho s programovacími jazykmi (ako sú Javascript, C++ a pod.), oproti ktorým má HTML iba obmedzené možnosti.

Ako vytvoriť  HTML súbor

Hoci sa web stránky upravujú pomocou rôznych HTML editorov, na začiatok vám úplne postačí klasický textový editor, napríklad aplikácia Poznámkový blok alebo TextEdit ak máte Mac. Pri ukladaní zmeňte formát na Všetky súbory a k názvu súboru doplňte príponu .html. Nezabudnite zmeniť kódovanie na UTF-8, aby sa všetky znaky zobrazovali správne (o tom budeme hovoriť aj nižšie). V názve súboru nepoužívajte medzery ani špeciálne znaky – mohlo by to spôsobiť problém.

Značky

Každá web stránka obsahuje tzv. tagy alebo značky, resp. dvojice značiek, ktoré slúžia na vytváranie štruktúry stránky – delia ju na nadpisy, odseky či zoznamy s odrážkami, ale umožňujú aj zvýraznenie častí textu kurzívou či tučným písmom. Všetky značky sú ohraničené znamienkami nerovnosti a v editoroch sa zväčša zobrazujú farebne. Takto vyzerá napríklad dvojica značiek zodpovedná za tučné písmo:

ukážka tučného písma HTML

Prvá z dvojice značiek sa nazýva začiatočná značka (v našom prípade <b>) a druhá – ktorá vždy obsahuje znak lomky – zas koncová značka (</b>).

Sú prípady, keď netreba použiť dvojicu značiek, ale len jednu. Ide napríklad o zlom riadka <br> (line break) alebo vodorovnú čiaru <hr> (horizontal rule).

Štruktúra HTML stránky

Každý HTML dokument sa začína označením typu dokumentu pomocou značky <!DOCTYPE  html>, za ňou nasleduje značka <html> a dokument sa končí koncovou značkou </html>. Celý obsah, ktorý chcete mať na danej stránke, musíte vložiť medzi tieto dve značky.

Stránka spravidla pozostáva z hlavičky (head) a z tela (body) a od toho sa odvíja aj štruktúra HTML kódu. To, čo zapíšete do hlavičky, používateľ priamo na stránke neuvidí. Zobrazí sa mu iba titulok, ako názov stránky na karte prehliadača. Titulok sa zapisuje do hlavičky medzi značky <title> </title>. Všetok obsah, ktorý má byť na stránke viditeľný je potrebné zapísať do tela (body) stránky.

Ak bude obsah stránky v slovenčine, je potrebné špecifikovať kódovanie podľa UTF-8 pomocou príkazu <meta charset="UTF-8">. Ten sa vkladá do hlavičky nad titulok. Vďaka tomu sa na vašej stránke správne zobrazia diakritické znamienka.

ukážka štruktúry stránky v HTML kóde HTML štruktúra stránky

 

Základné HTML značky

Text stránky môžeme ďalej rozdeliť na nadpisy (headings) a odseky (paragraphs). Na odlíšenie nadpisov a odsekov nám poslúžia dvojice značiek <h1> </h1> a <p> </p>. Ako vo Worde, aj tu môžeme vytvoriť viacero úrovní nadpisov použitím značiek <h2> </h2>, <h3> </h3> atď.

formátovanie nadpisov v HTMLukážka nadpisov v HTML kóde

 

Pri formátovaní si môžeme zvoliť tučné písmo (bold), kurzívu (italics) alebo podčiarknutie (underlined). Jednotlivé riadky sa oddeľujú zlomami riadkov (line breaks).

formátovanie textu v HTML ukážka nadpisov v HTML kóde

 

Okrem toho možno text zarovnať (align): na stred (center), vpravo (right) a vľavo (left).

zarovnanie textu v HTMLukážka zarovnania textu v HTML

 

Do textu sa dá vložiť aj link alebo hypertextový odkaz. Na vloženie potrebujeme medzi začiatočnú a koncovú značku vložiť tzv. atribút, v našom prípade href, ktorý značku bližšie špecifikuje. Za atribútom nasleduje samotná adresa URL a po nej text, ktorý sa zobrazí používateľovi.

vloženie hyperlinku do HTML kódu ukážka hyperlinku v HTML

 

Zísť sa vám môžu aj zoznamy s odrážkami, ktoré sa vytvárajú pomocou značky <ul> (unordered list). Každá nová položka zoznamu začína značkou <li> (list item). Ak chcete použiť číslovaný zoznam nahraďte značku <ul> za značku <ol> (ordered list).
Na pridanie napríklad štvorcových odrážok môžeme použiť nasledujúcu syntax:

formátovanie odrážkového zoznamu v HTML kódeukážka odrážkového zoznamu v HTML

 

V neposlednom rade môžeme text spestriť obrázkami pomocou značky <img> a ďalších atribútov. Atribút src špecifikuje umiestnenie obrázka. Najjednoduchšie je pridať obrázok, ktorý sa nachádza v tom istom priečinku ako html súbor. V takom prípade stačí uviesť názov obrázka aj s príponou (.jpg, .png, .gif). Bežnejšie je použitie obrázkov s vlastnou URL adresou. Zápis vyzerá nasledovne: <img src="url-adresa-obrázka.jpg">.

Atribút alt obsahuje popis obrázka, ktorý sa používateľovi zobrazí, napríklad ak sa obrázok nenačíta. Vždy preto voľte výstižný popis obrázka.

Napokon treba špecifikovať výšku a šírku obrázka v pixeloch pomocou atribútov widthheight. Ak tak neurobíte, môže sa stať, že bude stránka pri načítavaní obrázka blikať. Okrem nevyhnutných atribútov môžeme ešte zarovnať obrázok napríklad na stred.

Pri výbere sa radšej vyhnite obrázkom s veľkými rozmermi, resp. ich zmenšite ešte pred vložením na stánku. V opačnom prípade by to mohlo spomaliť načítavanie vašej stránky.

formátovanie obrázka v HTML kóde ukážka obrázka v HTML

Vytvorte si vlastnú stránku

Po teoretickom úvode nastal čas vyskúšať si nové vedomosti v praxi. Na začiatok si skúste vytvoriť jednoduchú stránku, ako napríklad táto. Ak si nebudete vedieť rady stiahnite si riešenie.

Môžete si vyskúšať aj online editor, ktorý farebne odlíši značky a atribúty a ponúka možnosť hneď zobraziť výsledok vášho kódu.

Toto bol samozrejme iba stručný úvod do HTML, ktorý slúži na pochopenie fungovania tohto značkovacieho jazyka. Ak vás téma zaujala a radi by ste sa oboznámili s ďalšími funkciami HTML, odporúčame vzdelávaciu stránku W3Schools.

Páči sa vám čo píšeme?
Povedzte to ďalej!

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *