Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML
Code

Rozširujeme HTML vytváraním vlastných značiek

by
Difficulty:BeginnerLength:MediumLanguages:

Slovak (Slovenčina) translation by Ryan (you can also view the original English article)

V tomto návode si ukážeme, ako je jednoduché rozšíriť HTML pomocou vlastných značiek. Vlastné značky môžu byť využívané k implementácii rôzneho správania, takže je to pohodlný spôsob, ako písať menej kódu a zjednodušovať HTML dokumenty.

Čo je vlastná HTML značka?

V HTML vieme použiť značku <b> k zvýrazneniu textu. Keď vytvárame zoznam, tak používame značku <ul> spolu so značkou <li> pre každú položku v zozname. Značky sú interpretované prehliadačmi a spolu s CSS určujú, ako je obsah webovej stránky zobrazený a ako sa časti obsahu správajú.

Niekedy použitie jednej HTML značky nie je dosť pre funkcionalitu potrebnú pre webové aplikácie. Zvyčajne je toto riešené použitím viacerých HTML značiek spolu s JavaScriptom a CSS, ale toto riešenie nie je až také elegantné.

Elengantnejším riešením je použitie vlastnej značky – identifikátora, ktorý sa nachádza medzi <>, ktorý je interpretovaný prehliadačmi, ktorý vykresľuje vyžiadanú funkcionalitu. Podobne ako u bežných HTML značiek, mali by sme byť schopní používať vlastné značky na stránke viackrát, taktiež by tieto značky mali prijímať vlastné atribúty a podznačky, ktoré vedia pozmeniť funkcionalitu vlastnej značky. Je čas pozrieť sa na príklad!

Prvý príklad – Vytváranie vlastnej HTML značky pre zobrazenie Gravataru

Teraz vytvoríme vlastnú značku, ktorá zobrazí Gravatar na určenú e-mailovú adresu. Nazvime ju <codingdude-gravatar> a budeme prijímať iba e-mailovú adresu cez atribút pod názvom email.

Vaše vlastné značky si môžete pomenovať tak, ako len chcete, ale všimnite si, že v tomto príklade názov vlastnej značky začína s codingdude-. Pre vlastné značky je osvedčeným postupom používanie podobných predpon, aby sa predišlo konfliktom s ostatnými vlastnými značkami. Samozrejme, je dobrý nápad nepoužívať názvy značiek, ktoré sú definované v HTML.

Aby sme vytvorili a otestovali našu značku, musíme vytvoriť niekoľko vecí:

  • Jeden priečinok, kde budú uložené projektové súbory – nazvime ho gravatar-custom-tag.
  • Jeden HTML súbor index.html vo vnútri priečinka gravatar-custom-tag. Tento súbor bude obsahovať HTML kód.
  • Jeden JavaScriptový súbor codingdude-gravatar.js vo vnútri priečinka gravatar-custom-tag. Tento súbor bude obsahovať JavaScriptový kód, ktorý implementuje vlastnú značku.

Upravte súbor index.html aby kód vo vnútri súbora vyzeral takto:

Ak si teraz v prehliadači načítame súbor index.html, výsledok nebude až tak pôsobivý, pretože sme ešte nezačali s implementáciou našej vlastnej značky:

An example of the custom tag

Všimnite si, že prehliadaču je jedno, že ste do dokumentu dali nejakú neznámu značku. Môže ich tam byť aj niekoľko. Na to, aby naša vlastná značka zobrazila obrázok z Gravataru, musíme najprv pochopiť, ako Gravatar funguje.

Gravatar funguje tak, že prekladá emailovú adresu do URL s PNG obrázkom používateľa. Preklad je urobený tak, že sa vypočíta MD5 hash e-mailovej adresy. URL na Gravatar obrázok vyzerá asi takto: https://www.gravatar.com/avatar/EMAIL_MD5_HASH.png. Najprv musíme získať funkciu, ktorá z reťazca vypočíta MD5 hash. Na to použijeme open-source knižnicu, ktorú zahrnieme v súbore index.html:

Teraz začnime s implementáciou vlastnej značky. Najprv musíme implementovať definíciu našej vlastnej značky v dokumente a až potom jej funkcionalitu. Toto všetko sa udeje v súbore codingdude-gravatar.js. Kód by mal vyzerať takto:

Keď sa pozrieme na kód, vidíme tam funkciu customTag(), ktorá hľadá vlastné značky podľa mena (parameter tagName) a spustí funkcionalitu spojenú s vlastnou značkou (pomocou parametra fn).

Príkaz document.createElement(tagName) je pre niektoré prehliadače potrebný (hlavne Internet Explorer), aby informoval prehliadač, že budeme používať vlastnú značku s názvom z parametra tagName, inak to nebude fungovať.

Parameter fn obsahuje funkciu, ktorá implementuje funkcionalitu vlastnej značky. V tomto prípade fn obsahuje funkciu codingdudeGravatar(). Táto funkcia prijíma parameter, ktorá referuje na element s vlastnou značkou. Ak vlastná značka má atribút email, tak jej hodnota pôjde do funkcie md5() z našej open-source knižnice. Výsledok hashu je použitý k vytvoreniu URL obrázka. URL hodnota pôjde do značky <img> vo vnútri našej vlastnej značky.

Posledným riadkom je funkcia customTag(), ktorá prijíma názov vlastnej značky a jej implementáciu. Táto funkcia môže byť využívaná na akýkoľvek typ vlastných značiek, stačí ju iba implementovať.

Ak teraz v prehliadači načítame súbor index.html, uvidíte Gravatar na môj e-mail:

Viewing the Gravatar with the text

Druhý príklad – Pokročilé vlastné HTML značky pre vykreslenie koláčového grafu

V predchadzajúcom príklade sme si vytvorili jednoduchú implementáciu vlastnej HTML značky. Rovnaký postup viete aplikovať pri akejkoľvek vlastnej značke.

Pozrime sa na to, ako si vytvoriť pokročilejšiu vlastnú značku, ktorá vykresľuje koláčový graf. Vytvorte súbory potrebné pre túto značku:

  • Vytvorte priečinok a nazvite ho piechart-custom-tag. Tento priečinok bude priečinok projektu.
  • Vo vnútri priečinka piechart-custom-tag vytvorte nový HTML súbor a nazvite ho index.html. Tento súbor bude obsahovať HTML kód.
  • Taktiež vytvorte JavaScriptový súbor s názvom codingdude-piechart.js, tento súbor bude obsahovať implementáciu našej vlastnej značky.

Vlastné značky sa často využívajú ako obal pre rôznu funkcionalitu. V tomto prípade použijeme značku <codingdude-piechart> pre vykreslenie koláčového grafu. Ak ste nevideli môj návod na to, ako vykresliť grafy pomocou JavaScriptu a HTML5 canvasu, mohli by ste sa naň pozrieť. V tomto návode budeme používať kód z tohto návodu, aby sme vytvorili vlastnú značku.

Upravte súbor codingdude-piechart.js a pridajte tieto funkcie z návodu:

  • drawLine()
  • drawArc()
  • drawPieSlice()
  • Piechart()

Teraz upravte súbor index.html a vložte vlastnú značku pre vykreslenie koláčového grafu:

Zmyslom je nastaviť šírku a vyšku koláčového grafu pomocou atribútov width a height. Atribút colors nastavuje farby použité v častiach pre koláčový graf.

Ako sme spomenuli vyššie, vlastné značky môžu byť komplexnejšie, pretože pre túto vlastnú značku budeme používať aj podznačky. Pre zobrazenie dát grafu budeme používať podznačky <codingdude-data>. Pozrime sa na to, ako vieme implementovať kód pre vlastnú značku.

Upravte súbor codingdude-piechart.js a po funkciách, ktoré ste skopírovali z mojej príručky vložte tento kód.

Funkcia customTag() je totožná s funkciou z prvého príkladu. Implementácia značky <codingdude-piechart> je zahrnutý vo funkcii PiechartTag(). Táto funkcia sa stará o to, aby:

  • Vytvorila <canvas>, na ktorom bude vykreslený graf a pridá ho do vlastnej značky. Šírka a výška plátna sú získané z atribútov vlastnej značky.
  • Našla atribút colors, aby vytvorila pole s farbami, ktoré budú použité v koláčovom grafe.
  • Načítala po jednom načítala značky <codingdude-data> s dátovou štruktúrou, ktorá bola pridelená koláčovému grafu. Pretože prvky majú textový obsah, prehliadač ho vykreslí a textový obsah sa zobrazí. Pretože toto nechceme, môžeme po vytiahnutí dát tieto prvky odstrániť.
  • Nakoniec si zavoláme funkciu Piechart() s povinnými nastaveniami a spustíme funkciu draw() pre vykreslenie koláčového grafu.

Ak načítate súbor index.html, uvidíte, že vlastná značka vykreslila koláčový graf a vyzerá asi takto:

The custom tag is rendered as a pie chart

A tu to je, krásny koláčový graf. Keď zmeníme atribúty značky <codingdude-data>, tak sa zmení aj koláčový graf. Tieto techniky tvorby vlastných značiek boli použité počas vývoja HTML knižnice pre infografické grafy a grafiku z portálu CodeCanyon.

Infographic charts and graphics HTML tags library
Knižnica pre zobrazenie grafov z CodeCanyon

Knižnica obsahuje vlastné značky nie len na koláčové grafy, ale aj na líniové, stĺpcové a iné typy grafov.

Posledné slová

V tomto návode sme videli dva príklady ako vytvoriť vlastnú HTML značku pre dve rôzne funkcionality. Použitím funkcie customTag() viete začať vyvíjať vlastné značky.

Ak vám tento návod pomohol, ponúkame širokú ponuku iných návodov na HTML5 a podobných technológií, takže neváhajte a pozrite sa na zoznam návodov.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.