Definícia značky HTML

by Jennifer Kyrnin

Čo potrebujete vedieť o značkách HTML

HTML je jazyk webu. Webové stránky, ktoré si prezeráte vo svojom počítači alebo telefóne, vrátane tohto, sú napísané v Hypertext Markup Language pomocou takzvaných "tagov HTML". Môžete si predstaviť HTML ako "kód pod kapotou", ktorý riadi štruktúru webovej stránky.

Nakoniec, keď sa naučíte nový jazyk, začnete s jednoduchými frázami a budovať odtiaľto. Učenie o HTML nie je iné. Začnete osvojením spoločných značiek HTML. To je ekvivalent učenia "jednoduchých fráz" v hovorenom jazyku. Tieto frázy sa stanú základom, na ktorom budujete svoje vedomosti a reč, rovnako ako HTML tagy sú základom, na ktorom budeme vytvárať svoje zručnosti vývoja webu.

Formát štítku HTML

Značku HTML môžete rozpoznať, pretože je obklopená znakmi na začiatku a konci tagu. Medzi týmito dvoma znakmi by bol iný text, ktorý definuje, aký typ HTML značky sa píše. Ak napríklad viete, že "hr" znamená horizontálne pravidlo (alebo riadok), napíšete to pre značku HTML:

Práve ste napísali značku HTML, ktorá na webovej stránke vytvára horizontálne pravidlo.

Väčšina značiek HTML sa nachádza v pároch. Sú umiestnené na začiatku a na konci časti textu a diktujú obsah, ktorý budú obsahovať. Tieto dvojice značiek tvoria prvky HTML . Keď sa dozviete, že a sú otváracie a zatváracie značky, ktoré robia text tučným, začnete chápať, ako značky HTML ovplyvňujú vzhľad textu na webovej stránke.

Táto veta sa objaví všetkými tučnými značkami.

Všimnite si, že zatváracia silná značka (ktorá označuje výraz "silný dôraz a ktorá v predvolenom nastavení vykresľuje text ako tučný) je totožná s otvorenou tučnou značkou, s výnimkou toho, že v tagu obsahuje lomku. HTML tagy. Značka otvárania a záverečné značky sú rovnaké, pridaním lomítka v závere, ktorý nasleduje po prvom
Kombinácie značiek HTML
Značky HTML sa často používajú v kombinácii. Otváracie a zatváracie značky pre text s diakritikou (kurzívou) sú a . Pridanie kurzívnych značiek do jediného slova v celom tučnom príklade vety, ktoré spôsobí, že sa slovo zobrazí, je na webovej stránke tučné aj kurzíva.

Táto veta sa objaví všetkými tučnými značkami.

Kedykoľvek sa v prvku webovej stránky používa niekoľko značiek, pričom niektoré značky sa objavujú vo vnútri iných, označujú sa ako vnorené značky HTML. Musíte pamätať, že vnorená značka, ktorá je značkou vo vnútri inej, musí byť uzavretá, kým ich obsahové značky môžu byť zatvorené. Pozrite sa na tento príklad:

Toto je text zvýraznený z určitého dôvodu.
Mali by ste si všimnúť, že značka je otvorená vo vnútri
, čo znamená, že musí byť zatvorené, kým sa nezobrazí uzávierka . Premýšľajte o vnorených tagoch ako o škatule vnútri iných políčok. Interiérové boxy musia byť zatvorené pred ich vonkajším obsahom, obsahujú boxy.

HTML tagy a webové stránky
Existuje tucet HTML tagov v platnom HTML. Niektoré značky HTML diktujú veľmi bežné, základné prvky, ako napríklad odseky, zatiaľ čo iné sú komplikovanejšie a pridávajú ďalšie funkcionality, napríklad značky odkazov alebo "anchor". Zoznam značiek HTML dáva snímku mnohých funkcií, ktoré značky môžu vykonávať na webovej stránke pomocou značiek.

Existujú aj niektoré značky, ktoré sa vyžadujú od všetkých webových stránok. Počas vytvárania prvej stránky použijete značku , ktorá začína na webovej stránke. , ktorý informuje prehliadač, čo sa má zobraziť v hornej časti podokna prehliadača a <body>, kde sa nachádzajú všetky informácie o webovej stránke a je najväčšou časťou vašej stránky. </p> <p> Zoznam značiek HTML nie je veľa pomoci, kým neprešielte tutoriál HTML, ale po tom, čo ste urobili, môžete použiť HTML tagy na vytvorenie vlastnej webovej stránky. Jedna poznámka, nie je ohromený počet možných HTML tagov. Zatiaľ čo existujú stovky možných značiek na použitie, skutočnosťou je, že budete pravdepodobne používať len niekoľko z nich znova a znova. V skutočnosti existujú niektoré HTML značky, ktoré som nikdy nepoužil ani raz v mojej desaťročí práce s webovým dizajnom! </p> <h3> Odstránené menovky </h3><p> <a href="https://sk.eyewated.com/html-5-odkaz-html-5-tagy-abecedne/">HTML5</a> je súčasný štandard označovania. Niektoré značky, ktoré boli použité v starších verziách kódu HTML, sú teraz spracované v štýloch HTML5. Zodpovedané značky HTML boli odstránené zo špecifikácií HTML. Najlepšie je nepoužívať žiadne zastarané značky. </p> <p> Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 5/2/17 </p> </div> <div class="amp-related-wrapper"> <h2>Alike posts</h2> <div class="amp-related-content"> <a href="https://sk.eyewated.com/html-kody-a-specialne-znaky/"> <amp-img src="https://exse.eyewated.com/pict/edc554c3ee98325c-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/html-kody-a-specialne-znaky/">HTML kódy a špeciálne znaky</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/dalsie-informacie-o-dynamickom-html-dhtml/"> <amp-img src="https://exse.eyewated.com/pict/2e6355ad942f34bb-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/dalsie-informacie-o-dynamickom-html-dhtml/">Ďalšie informácie o dynamickom HTML (DHTML)</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/co-je-tag-html-verzus-element-html/"> <amp-img src="https://exse.eyewated.com/pict/8d74079c1c6b33e9-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/co-je-tag-html-verzus-element-html/">Čo je tag HTML verzus element HTML?</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/editor-html-a-xml-pre-linux-a-unix/"> <amp-img src="https://exse.eyewated.com/pict/50580a284b573169-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/editor-html-a-xml-pre-linux-a-unix/">Editor HTML a XML pre Linux a Unix</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/ako-previest-word-doc-do-html/"> <amp-img src="https://exse.eyewated.com/pict/aea5b69ee3ce2fdb-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/ako-previest-word-doc-do-html/">Ako previesť Word Doc do HTML</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/ako-zahrnut-html-do-mnohych-dokumentov-pomocou-javascript/">Ako zahrnúť HTML do mnohých dokumentov pomocou JavaScript</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/ako-pridat-komentare-do-vasho-html/">Ako pridať komentáre do vášho HTML</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/znacky-zdoraznenia-html/"> <amp-img src="https://exse.eyewated.com/pict/1934670cd2eb34bc-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/znacky-zdoraznenia-html/">Značky zdôraznenia HTML</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/ziskajte-informacie-o-autorskych-pravach-ktore-sa-tykaju-webovych-navrhov-a-tvorby-html/"> <amp-img src="https://exse.eyewated.com/pict/1aae6339c2733a86-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/ziskajte-informacie-o-autorskych-pravach-ktore-sa-tykaju-webovych-navrhov-a-tvorby-html/">Získajte informácie o autorských právach, ktoré sa týkajú webových návrhov a tvorby HTML</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>See Newest</h2> <div class="amp-related-content"> <a href="https://sk.eyewated.com/ako-skontrolovat-statistiky-sluzby-gmail/"> <amp-img src="https://exse.eyewated.com/pict/dbf7304d68b13444-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/ako-skontrolovat-statistiky-sluzby-gmail/">Ako skontrolovať štatistiky služby Gmail</a></h3> <div class="amp-related-meta"> E-mail a zasielanie správ </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/interaktivne-grafy-ganttov-pre-projektove-timy/"> <amp-img src="https://exse.eyewated.com/pict/9b5c139b2c7a3a4f-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/interaktivne-grafy-ganttov-pre-projektove-timy/">Interaktívne grafy Ganttov pre projektové tímy</a></h3> <div class="amp-related-meta"> Softvér a aplikácie </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/ultimate-dovolenka-nakup-guide-prezitie/"> <amp-img src="https://exse.eyewated.com/pict/d57cf0f7a1483d3f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/ultimate-dovolenka-nakup-guide-prezitie/">Ultimate Dovolenka Nákup Guide prežitie</a></h3> <div class="amp-related-meta"> Web a vyhľadávanie </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/webove-stranky-na-ziskanie-bezplatnych-filmov-pre-deti-a-videa/"> <amp-img src="https://exse.eyewated.com/pict/e3bfa21a9782316e-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/webove-stranky-na-ziskanie-bezplatnych-filmov-pre-deti-a-videa/">Webové stránky na získanie bezplatných filmov pre deti a videá</a></h3> <div class="amp-related-meta"> Web a vyhľadávanie </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/ako-zakazat-sluzbu-wps-v-zaujme-ochrany-vasej-siete/"> <amp-img src="https://exse.eyewated.com/pict/0b8130097b0630ac-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/ako-zakazat-sluzbu-wps-v-zaujme-ochrany-vasej-siete/">Ako zakázať službu WPS v záujme ochrany vašej siete</a></h3> <div class="amp-related-meta"> Internet a sieť </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/najlepsie-adaptery-bezdrotovej-siete-homeplug-av-powerline/"> <amp-img src="https://exse.eyewated.com/pict/90694ff4fbd4300b-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/najlepsie-adaptery-bezdrotovej-siete-homeplug-av-powerline/">Najlepšie adaptéry bezdrôtovej siete HomePlug AV Powerline</a></h3> <div class="amp-related-meta"> Internet a sieť </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>Sapid posts</h2> <div class="amp-related-content"> <a href="https://sk.eyewated.com/casopis-timehop-%E2%80%8B%E2%80%8Bzobrazuje-vase-prispevky-zo-socialnych-medii-uz-niekolko-rokov/"> <amp-img src="https://exse.eyewated.com/pict/f57fc1a94db733b9-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/casopis-timehop-%E2%80%8B%E2%80%8Bzobrazuje-vase-prispevky-zo-socialnych-medii-uz-niekolko-rokov/">Časopis Timehop zobrazuje vaše príspevky zo sociálnych médií už niekoľko rokov</a></h3> <div class="amp-related-meta"> Softvér a aplikácie </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/rozbalit-svoje-bojove-pole-hardline-skusenosti-s-getaway/"> <amp-img src="https://exse.eyewated.com/pict/877a8935baa93154-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/rozbalit-svoje-bojove-pole-hardline-skusenosti-s-getaway/">Rozbaliť svoje bojové pole: Hardline skúsenosti s Getaway</a></h3> <div class="amp-related-meta"> Gaming </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/20-najlepsich-amazon-dash-tlacidiel/"> <amp-img src="https://exse.eyewated.com/pict/e2bef532978438e3-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/20-najlepsich-amazon-dash-tlacidiel/">20 najlepších Amazon Dash tlačidiel</a></h3> <div class="amp-related-meta"> Hodnotenie produktov </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/ako-pouzivat-vyhladavanie-a-nahradit-v-programe-word/"> <amp-img src="https://exse.eyewated.com/pict/8f7a5ec590022f47-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/ako-pouzivat-vyhladavanie-a-nahradit-v-programe-word/">Ako používať vyhľadávanie a nahradiť v programe Word</a></h3> <div class="amp-related-meta"> Nové a ďalšie </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/co-robit-ked-vase-svetlomety-prestane-pracovat/"> <amp-img src="https://exse.eyewated.com/pict/6985b927d9903708-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/co-robit-ked-vase-svetlomety-prestane-pracovat/">Čo robiť, keď vaše svetlomety prestane pracovať</a></h3> <div class="amp-related-meta"> Tech Tech </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/7-najlepsich-grafickych-kariet-na-nakup-pocitacovych-hier-v-roku-2017/">7 najlepších grafických kariet na nákup počítačových hier v roku 2017</a></h3> <div class="amp-related-meta"> Herné konzoly </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/prehlad-produktu-inkscape/">Prehľad produktu Inkscape</a></h3> <div class="amp-related-meta"> Softvér </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/mali-by-ste-tomu-doverovat-v-kniznici-vasich-piesni/"> <amp-img src="https://exse.eyewated.com/pict/84be4528ad353bc2-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/mali-by-ste-tomu-doverovat-v-kniznici-vasich-piesni/">Mali by ste tomu dôverovať v knižnici vašich piesní?</a></h3> <div class="amp-related-meta"> Web a vyhľadávanie </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/ako-restartovat-cokolvek/"> <amp-img src="https://exse.eyewated.com/pict/fef2436bde1d3a45-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/ako-restartovat-cokolvek/">Ako reštartovať čokoľvek</a></h3> <div class="amp-related-meta"> Windows </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/ako-opravit-chyby-kodu-28/"> <amp-img src="https://exse.eyewated.com/pict/21362cfe8988305b-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/ako-opravit-chyby-kodu-28/">Ako opraviť chyby kódu 28</a></h3> <div class="amp-related-meta"> Windows </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/ako-napisat-novy-zavadzaci-oddiel-pre-system-windows-xp/"> <amp-img src="https://exse.eyewated.com/pict/88823746bf2c332d-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/ako-napisat-novy-zavadzaci-oddiel-pre-system-windows-xp/">Ako napísať nový zavádzací oddiel pre systém Windows XP</a></h3> <div class="amp-related-meta"> Windows </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/co-znamena-pomer-kontrastu-k-televizoru/"> <amp-img src="https://exse.eyewated.com/pict/409df3881f555601-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/co-znamena-pomer-kontrastu-k-televizoru/">Čo znamená pomer kontrastu k televízoru?</a></h3> <div class="amp-related-meta"> Domáce kino </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/sims-2-pets-unlockable-codes/"> <amp-img src="https://exse.eyewated.com/pict/1ed08611a87d388a-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/sims-2-pets-unlockable-codes/">"Sims 2 Pets" Unlockable Codes</a></h3> <div class="amp-related-meta"> Gaming </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/fitness-trackery-s-najlepsou-zivotnostou-baterie/"> <amp-img src="https://exse.eyewated.com/pict/76391ef6272b340f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/fitness-trackery-s-najlepsou-zivotnostou-baterie/">Fitness trackery s najlepšou životnosťou batérie</a></h3> <div class="amp-related-meta"> Wearables </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/riesenie-problemov-s-jadrami-systemu-mac-os-x/"> <amp-img src="https://exse.eyewated.com/pict/53f67cadd76132df-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/riesenie-problemov-s-jadrami-systemu-mac-os-x/">Riešenie problémov s jadrami systému Mac OS X</a></h3> <div class="amp-related-meta"> Macs </div> </div> </div> <div class="amp-related-content"> <a href="https://sk.eyewated.com/ako-obalit-text-okolo-obrazka/"> <amp-img src="https://exse.eyewated.com/pict/5253b90fd0763a8e-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sk.eyewated.com/ako-obalit-text-okolo-obrazka/">Ako obaliť text okolo obrázka</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> </div></article> <footer class="amp-wp-footer"> <div class="amp-wp-footer-inner"> <a href="#" class="back-to-top">Back to top</a> <p class="copyright"> © 2024 sk.eyewated.com </p> <div class="amp-wp-social-footer"> <a href="#" class="jeg_facebook"><i class="fa fa-facebook"></i> </a><a href="#" class="jeg_twitter"><i class="fa fa-twitter"></i> </a><a href="#" class="jeg_google-plus"><i class="fa fa-google-plus"></i> </a><a href="#" class="jeg_pinterest"><i class="fa fa-pinterest"></i> </a><a href="" class="jeg_rss"><i class="fa fa-rss"></i> </a> </div> </div> </footer> <div id="statcounter"> <amp-pixel src="https://c.statcounter.com/12022999/0/02d06b5d/1/"> </amp-pixel> </div> </body> </html>