Extinderea posibilităților HTML prin crearea de etichete personalizate

In acest tutorial voi arăta procesul de creare a propriilor lor tag-uri HTML. tag-uri personalizate rezolvă multe probleme: documente HTML devin mai ușor, iar liniile de cod devine mai mică.

Ce este HTML tag-ul personalizat?

Atunci când avem nevoie pentru a face textul „grăsime“, atunci vom folosi tag-ul HTML . Dacă doriți să listați, ne sunt susceptibile de a utiliza în tandem

și
• . Browserele utilizează foi de marcare și de stil CSS, în scopul de a atrage aspectul paginii, iar în unele cazuri, un mic funcțional.

  În mod ideal, soluția ar trebui să arate propria etichetă de - între caractere <>. care va fi înțeles de către browser. Ca și în cazul tag-uri HTML convenționale ar trebui să fie în continuare tag-uri reutilizabile capabile. Să ne uităm la un exemplu real!

  Exemplu # 1: Creați tag-ul HTML pentru Gravatar

  Numele tag-ul poate fi orice. În acest caz, eticheta începe cu prefixul codingdude-. Prefixele trebuie să fie scrise pentru a evita conflictele cu numele altor tag-uri personalizate. De asemenea, evita alte conflicte, nu selectați numele identic cu setul curent de tag-uri HTML.

  Pentru a construi și testa propriile noastre tag-ul trebuie să urmați câțiva pași:

  Să editați fișierul index.html și completați-l cu următorul cuprins:

  Dacă deschideți fișierul index.html într-un browser, rezultatul nu este prea impresionant, pentru că nu am implementat funcția podgruzki Imagine:

  Acum vom trece la punerea în aplicare a tag-ul nostru. Prima provocare: să scrie cod care va identifica tag-ul nostru, iar al doilea - pentru a pune în aplicare tag-ul în sine. Toate codul pus în fișierul codingdude-gravatar.js:

  Codul poate fi văzut funcția customTag (). care caută toate instanțele tag-ul nostru (prin parametrul tagName) și determină funcționale (prin parametrul fn).

  Call document.createElement (tagName) este necesar pentru astfel de browsere, cum ar fi IE, pentru a raporta despre prezența în pagina cu etichete personalizate. În caz contrar, etichetele cu numele tagname pur și simplu nu va funcționa.

  Opțiunea fn - o caracteristică care va fi toată „magia“. În cazul nostru, fn - apel funcția codingdudeGravatar (). Această funcție are ca argument un link către tag-ul nostru. Dacă această etichetă va apărea atributul de e-mail, atunci l-am aruncat prin funcția MD5 () din biblioteca deschisă. Rezultatul va fi utilizat pentru a forma o adresă URL de imagine, în care am pus elementul .

  La sfârșitul anului există o funcție de apel customTag () cu numele tag-ul nostru. Această funcție poate fi utilizată în mod repetat; trebuie doar să pună în aplicare o funcție cu funcțional.

  În acest moment vă încărcați fișierul index.html în browser-ul, putem vedea Gravatar pentru un anumit e-mail-in:

  Exemplu # 2: HTML diagramă radială tag

  Ultimul exemplu de creare a unui tag personalizat HTML a fost destul de ușor. Același principiu poate fi aplicat pentru a crea o etichetă de orice complexitate.

  Acum, să pună în aplicare ceva mai complicat: o diagramă radială. Pentru aceasta avem nevoie de:

  Rectificat fișier codingdude-piechart.js și puneți funcția de lecție a spus:

  Acum, editați fișierul index.html și scrie tag-ul său de pe site-ul care va diagramă:

  Lățimea și înălțimea graficului vom obține de la lățimea și înălțimea atributelor. Culorile atributelor pentru a pune o listă de culori care vor fi vopsite cota.

  Așa cum am menționat mai devreme, această etichetă este anterioară mai dificilă, și toate în detrimentul tag-uri imbricate. În sub-tag-uri vom enumera datele care vor fi reprezentate grafic. Acum, să ne uităm la codul.

  Editare fișier codingdude-piechart.js și după grafic inserați următorul cod:

  Funcții customTag () este aceeași ca în Exemplul # 1. tag-ul de punere în aplicare plasat în funcția PiechartTag (). În special, această funcție:

  • Se creează un element în cazul în care vor fi trase grafic. Lățimea și înălțimea elementului de pânză este eliminat din atributele tag-ul nostru personalizat.
  • Culorile care caută atribut. convertește valoarea sa în elementele de culoare matrice pentru plăcintă.
  • Secvențial încarcă elementele și le pune în diagrama de aspect. Textul din elementele de date vor fi afișate de către browser. Noi nu vrem asta, așa că eliminăm elemente din pagină după izvlechom acestor valori.
  • La final este PieChart () constructor cu parametrii necesari și îndeplinește funcția de egalitate () pentru a desena grafic.

  Dacă te duci la pagina index.html. puteți vedea următorul Graficul circular:

  

  La sfârșitul

  In acest tutorial, ne-am uitat la două exemple de a crea tag-uri HTML personalizate de complexitate diferite. Cu funcția customTag (), puteți crea cu ușurință propriile etichete.

  

  Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!

  
  

  Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!

  

  Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.

  

  Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!