Obsah

• Na krok
• Časť 1 z 2: Osvojenie základov jazyka HTML
• Časť 2 z 2: Výučba pokročilého HTML
• Tipy
• Varovania
• Nevyhnutnosť

HTML je skratka pre Hypertextový značkovací jazyk, je to kód alebo Jazyk ktorý sa používa na tvorbu webových stránok. Môže to vyzerať komplikovane, ak ste nikdy predtým neprogramovali, ale vyskúšať si môžete iba jednoduchý program na spracovanie textu a internetový prehliadač. Niektoré HTML môžete poznať z fór, online profilov alebo článkov wikiHow. HTML je užitočný zdroj pre každého, kto používa internet, a učenie sa HTML môže trvať kratšie, ako by ste čakali.

Na krok

Časť 1 z 2: Osvojenie základov jazyka HTML

1. Otvorte dokument HTML. Na tvorbu dokumentov vo formáte HTML je možné použiť väčšinu programov na spracovanie textu, napríklad Poznámkový blok alebo Word pre Windows a Textový editor pre Mac. Otvorte nový dokument a z horného menu vyberte Súbor → Uložiť ako, čím dokument uložíte ako webovú stránku, alebo zmeňte príponu súboru z „.doc“, „.rtf“ alebo čohokoľvek iného na „.html“ alebo „.htm „.
   • Teraz sa môže zobraziť upozornenie, že váš dokument sa mení z formátu RTF (Rich Text Format) na formát „obyčajného textu“ a že niektoré možnosti formátovania a obrázky sa neukladajú správne. Toto varovanie môžete ignorovať; Dokumenty HTML tieto možnosti nevyužívajú.
   • Súbory .html a .htm sú rovnaké. Oboch to funguje.
2. Zobrazte svoj dokument pomocou prehliadača. Uložte prázdny dokument, zatvorte ho a potom dvakrát kliknite na dokument v umiestnení, kde bol uložený, aby ste ho znova otvorili. Váš dokument by teraz mal váš prehliadač otvoriť ako prázdnu webovú stránku. Ak to nefunguje, presuňte ikonu súboru do panela s adresou prehliadača. Ak neskôr upravíte svoj dokument HTML podľa pokynov v tomto článku, budete sa vracať do prehliadača a skontrolovať, ako vyzerajú zmeny v kóde.
   • Poznámka: vaša webová stránka ešte nie je online. Táto stránka nie je prístupná iným a na jej otestovanie nepotrebujete funkčné pripojenie na internet. Pomocou prehliadača „prečítate“ dokument HTML, akoby to bol web.
3. Pochopte, čo sú to „značky“. Značky nie sú viditeľné na výslednej webovej stránke, ako to môže bežný text. Značky informujú váš prehliadač o tom, ako zobraziť stránku a obsah na stránke. Počiatočná značka obsahuje pokyny. Môže napríklad povedať prehliadaču, aby text zobrazil tučne. Koncová značka je potrebná na to, aby informoval prehľadávač, kde platia pokyny: v tomto príklade je všetok text medzi počiatočnou a koncovou značkou tučný. Koncové značky sú tiež umiestnené v zátvorkách, za prvou zátvorkou však nasleduje lomka.
   • Napíšte počiatočné značky do zátvoriek: toto je počiatočný deň>
   • Koncové značky napíšte do zátvoriek, za prvú zátvorku však vložte lomku: /toto je zatváracia značka>)
   • Prečítajte si ďalej v článku, ako písať funkčné značky. V tomto kroku si musíte len spomenúť, akým spôsobom chcete písať značky:> a />.
   • V iných kurzoch HTML sa značky označujú aj ako „prvky“ a text medzi úvodnými a záverečnými značkami sa označuje ako „obsah obsahu“.
4. Napíšte svoju prvú značku HTML>. Každý dokument HTML začína znakom html>značka a končí sa / html>značka. Toto informuje prehliadač, že všetko medzi týmito značkami je napísané v HTML. Pridajte do svojho dokumentu tieto značky:
   • Napíš html> v hornej časti dokumentu.
   • Niekoľkokrát stlačte kláves Enter alebo sa vráťte, aby ste si vytvorili priestor, a potom napíšte / html>
   • Pamätám si ťa všetko v tomto článku medzi týmito dvoma značkami.
5. Vytvorte hlavnú> súčasť vášho dokumentu. Medzi značky html> a / html> napíšete a hlava>začiatočná značka a / hlava>-koncová značka. Medzi týmito značkami znova urobte priestor. Čokoľvek napísané medzi týmito značkami nebude viditeľné na samotnej webovej stránke. Vyskúšajte nasledujúce kroky a uvidíte, či vidíte, kde sa informácie zobrazujú:
   • Píšte medzi značky head> a / head>: nadpis> a / názov>
   • Medzi značky title> a / title> píšete: Ako sa naučiť HTML (s obrázkami) - wikiHow.
   • Uložte dokument a otvorte ho v prehliadači (alebo uložte dokument a obnovte stránku v prehliadači, ak bola stránka stále otvorená). Vidíte to, čo ste práve napísali, v hornej časti stránky nad panelom s adresou?
6. Vytvorte sekciu tela>. Všetko ostatné v tomto dokumente pre začiatočníkov je umiestnené v sekcii body> a je zobrazené na webovej stránke. Po tag / head>, ale pred tag / html> píšete telo> a / telo>. Všetko, o čom v tomto článku hovoríme ďalej, umiestňujeme medzi značky tela. Teraz by ste mali mať dokument, ktorý vyzerá takto (bez odrážok):
   • html>
   • hlava>
   • naučiť sa HTML - wikiHow / názov>
   • / hlava>
   • telo>
   • / telo>
   • / html>
7. Pridajte text v rôznych štýloch. Teraz je čas, aby ste začali písať niečo, čo bude skutočne viditeľné v prehliadači! Všetko, čo napíšete do značiek tela, bude viditeľné v prehliadači po uložení zmien a obnovení stránky v prehliadači. Napíš nie niečo so značkami a >pretože váš prehliadač to bude interpretovať ako inštrukciu HTML namiesto obyčajného textu. Napíš napr Ahoj svet! (Angličtina pre „Hello world!“, Toto je globálny štandardný text ako prvý príklad v ktoromkoľvek kurze programovania v konkrétnom programovacom jazyku) alebo niečo iné, vložte nasledujúce značky pred a za text a uvidíte, čo sa stane:
   • em> Ahoj svet! / em> vyzerá ako kurzíva: Ahoj svet!
   • strong> Ahoj svet! / strong> vyzerá ako tučný text: Ahoj svet!
   • s> Ahoj svet! / s> vyzerá ako preškrtnutý text: Ahoj svet!
   • sup> Ahoj svet! / sup> vyzerá ako horný index:
   • sub> Hello world! / sub> vyzerá ako titulok: _{Ahoj svet!}
   • Vyskúšajte kombinácie: Ako vidí em> strong> Hello world! / strong> / em> vypadnúť?
8. Rozdeľte svoj text na odseky. Ak do dokumentu vložíte rôzne riadky textu, uvidíte, že všetky riadky sú umiestnené jeden za druhým. Nové riadky a prázdne riadky si musíte naprogramovať sami:
   • p> Toto je samostatná časť./p>
   • Táto veta je v prvom riadku a táto veta v ďalšom.
     Toto je prvá značka, s ktorou sa stretneme a ktorá nepotrebuje koncovú značku! Takej značke hovoríme jedna prázdna značka.
   • Vytvorte hlavičky, aby boli názvy častí jasné:
     h1> hlavička / h1>: najväčšia možná hlavička
     h2> hlavicka / h2> (dvojúrovňová hlavička)
     h3> hlavicka / h3> (hlavička 3 úrovní)
     h4> hlavicka / h4> (hlavička 4 úrovne)
     h5> hlavička / h5> (najmenšia možná hlavička)
9. Naučte sa, ako vytvárať zoznamy. Existuje niekoľko spôsobov, ako vytvoriť zoznamy na webovej stránke. Vyskúšajte nasledujúce metódy a zistite, čo sa vám najviac páči. Upozorňujeme, že okolo celého zoznamu je umiestnená jedna dvojica značiek (napríklad značky ul> a / ul> pre neusporiadané zoznamy) a že okolo každej položky v zozname je umiestnená iná dvojica značiek, napríklad li> a / li> .
   • Na vytvorenie zoznamov s odrážkami použite nasledujúci kód:
     ul> li> Jedna položka / li> li> Ďalšia položka / li> li> Ďalšia položka / li> / ul>
   • Alebo tento kód na vytvorenie číslovaných zoznamov:
     ol> li> položka 1 / li> li> položka 2 / li> li> položka 3 / li> / ol>
   • Alebo tento kód na vytvorenie takzvaného zoznamu definícií:
     dl> dt> Káva / dt> dd> - Teplý nápoj / dd> dt> Mlieko / dt> dd> - Studený nápoj / dd> / dl>
10. Skrášlite svoju stránku novými riadkami, vodorovnými čiarami a obrázkami. Teraz je čas začať na svoju stránku pridávať ďalšie veci. Vyskúšajte nasledujúce značky (obrázok musí byť zverejnený online, aby ste mohli použiť odkaz na obrázok):
    • Vložte riadok: br> alebo hr>
    • Vložte obrázky: img src = "the_url_of_your_image">
11. Vložte odkazy na ďalšie miesta na stránke. Tento kód môžete tiež použiť na prepojenie s inými stránkami a webovými stránkami, ale keďže ešte nemáte web, zameriame sa na „ukotvenia“, čo sú konkrétne miesta na stránke, na ktoré môžete odkazovať:
    • Najskôr vytvorte kotvu so značkou> v mieste stránky, na ktorú chcete vytvoriť odkaz. Dajte svojej kotve jasný názov, ktorý si ľahko zapamätáte:
      
      a name = "Tipy"> Toto je text, okolo ktorého umiestnite svoju kotvu./a>
    • Pomocou značky href> môžete odkazovať na svoju kotvu alebo na inú webovú stránku:
      
      a href = "url webovej stránky alebo názov kotvy na tejto stránke"> Sem napíšte text alebo obrázok ako odkaz./a>
    • Ak chcete vytvoriť odkaz na kotvu na inej stránke, pridajte za adresu URL znak # a za ňou názov vašej kotvy. Napríklad http://www.wikihow.com/HTML-leren#Tips vás dovedie priamo do sekcie „Tipy“ na tejto stránke.

Časť 2 z 2: Výučba pokročilého HTML

1. Dozviete sa viac o atribútoch. Atribúty sú umiestnené v značke a používajú sa na vykonanie ďalších úprav „obsahu prvku“ medzi začiatočnou a koncovou značkou. Nikdy nestoja sami. Sú napísané nasledujúcim spôsobom: meno = "hodnota". názov predstavuje názov atribútu (napríklad „farba“) a hodnotu popisuje tento konkrétny prípad (napr. „červený“).
   • Ak ste sa v predchádzajúcej časti tohto článku pozreli pozorne, s atribútmi ste sa už stretli. Značka img> používa tento atribút src, kotva používa atribút názov a odkazy používajú tento atribút href. Môžete povedať, že sú všetky veľké ___='___’ nasledovať.
2. Experimentujte s tabuľkami HTML. Na vytvorenie tabuľky alebo grafu potrebujete niekoľko značiek:
   • Začnite značkami tabuľky (v angličtine „table“) okolo celej tabuľky:stôl> / stôl>
   • Umiestnite značky okolo obsahu každého riadku: tr>
   • Hlavičky stĺpcov umiestnite do prvého riadku: th>
   • Umiestnite bunky do po sebe nasledujúcich riadkov: td>
   • Toto je príklad toho, ako sa to všetko spája:
     
     tabuľka> tr> th> Stĺpec 1: Mesiac / th> th> Stĺpec 2: Ušetrené peniaze / th> / tr> tr> td> Január / td> td> 100 € / td> / tr> / stôl>
3. Naučte sa ďalšie značky použité v hlavnej časti. Už ste sa naučili značku head>, ktorú umiestnite na začiatok každého dokumentu. Okrem značky title> môžu byť v sekcii head ďalšie značky:
   • Na vytváranie sa používajú metaznačky metadáta o webovej stránke. Tieto údaje používajú vyhľadávače na kategorizáciu webových stránok. Aby bola vaša stránka viditeľná pre vyhľadávače, môžete umiestniť jednu alebo viac metaznačiek (koncové značky nie sú potrebné). Každá značka musí obsahovať presne jeden atribút názvu a atribút obsahu, napríklad: meta name = "description" content = "sem description ">; alebo meta name = "keywords" content = "sem napíšte zoznam kľúčových slov, vždy oddeľte čiarkou">
   • tagy link> sa používajú na prepojenie iných súborov so stránkou. Tieto stránky sa zvyčajne používajú na priradenie šablón štýlov CSS k stránkam HTML. Tieto stránky sú skonštruované s iným druhom kódu a používajú sa na určenie celkového štýlu stránky.
   • značky script> sa používajú na priradenie súborov javascript k stránke HTML. Javascript umožňuje zmenu stránky, ak užívateľ na stránke niečo urobí.
4. Hrajte s HTML z existujúcich stránok. Prezeranie zdrojového kódu webových stránok je skvelý spôsob, ako rozšíriť svoje znalosti HTML. Kliknite pravým tlačidlom myši na stránku a vyberte možnosť „Zobraziť zdroj“, „Zobraziť zdroj stránky“ alebo podobne. Zistite, čo robí konkrétna značka, ktorú nepoznáte, alebo vyhľadajte odpoveď online.
   • Nemôžete upravovať webové stránky iných ľudí, ale môžete skopírovať kód HTML do vlastného dokumentu a pohrať sa s ním, aby ste zistili, čo rôzne úpravy robia. Poznámka: pretože veľa webových stránok používa šablóny štýlov CSS, nemusíte vidieť veľa farieb alebo iných štýlov.
5. Dozviete sa viac o HTML prečítaním podrobnejších článkov. Na internete existuje veľa zdrojov na zvládnutie viacerých značiek HTML, napríklad W3Schools alebo Codecademy. K dispozícii je tiež veľa kníh vo formáte HTML, ale uistite sa, že používate nedávne vydanie, pretože štandard HTML sa z času na čas zmení. Po zvládnutí HTML na dobrej úrovni sa môžete obrátiť na CSS, aby ste získali viac kontroly nad dizajnom a štýlom svojej webovej stránky. Potom je ďalším krokom zvyčajne javascript.

Tipy

• Môže byť užitočné nájsť jednoduchú webovú stránku na internete a potom sa začať motať okolo kódu. Skúste presunúť nejaký text, zmeniť písmo, zmeniť obrázky, čo chcete!
• Na zapísanie kódu môžete použiť notebook, aby ste mali z čoho spadnúť, ak si to chvíľu nebudete pamätať. Túto stránku si môžete tiež vytlačiť a uchovať si ju pre prípad potreby.
• V dnešnej dobe sa na webových stránkach čoraz častejšie používajú XML a RSS. Tento kód môže vyzerať pre ľudské oko neprístupne, najmä pri pohľade do zdrojového kódu, ale táto funkcia môže byť užitočná.
• Značky použité v HTML nerozlišujú veľké a malé písmená, predvolené je však používanie malých písmen (ako to robíme v tomto článku). Dôrazne sa odporúčajú malé písmená pre značky, a to aj kvôli kompatibilite s XHTML.

Varovania

• Niektoré značky sa už nepoužívajú a boli nahradené inými značkami, ktoré robia to isté, ale často ponúkajú viac možností.
• Ak sa chcete ubezpečiť, že vaša stránka spĺňa štandard HTML, prejdite na webovú stránku W3 a otestujte svoj kód oproti súčasnému štandardu. Mnoho značiek bolo zastaraných a nahradili ich značky, ktoré v moderných prehľadávačoch fungujú lepšie.

Nevyhnutnosť

• Program na spracovanie textu, napríklad Poznámkový blok (Windows) alebo Textový editor (Mac).
• list papiera alebo zošit (voliteľné)
• Program špeciálne navrhnutý na písanie HTML, napríklad Notepad ++ pre Windows alebo TextWrangler pre Mac (voliteľné)