Definice značky HTML

Co potřebujete vědět o značkách HTML

HTML je jazyk webu. Webové stránky, které si prohlížíte v počítači nebo v telefonu, včetně tohoto, jsou napsány v Hypertext Markup Language pomocí takzvaných "tagů HTML". Můžete si představit HTML jako "kód pod kapotou", který řídí strukturu webové stránky.

Nakonec, když se naučíte nějaký nový jazyk, začnete s jednoduchými frázemi a postavíte se odtud. Učení o HTML se nijak neliší. Začnete osvojením běžných značek HTML. To je ekvivalent učení "jednoduchých frází" v mluveném jazyce. Tyto fráze se stanou základem, na kterém stavíte své znalosti a řeč, stejně jako značky HTML jsou základem, na kterém budeme vytvářet své znalosti o rozvoji webu.

Formát HTML tagů

Značku HTML můžete rozpoznat, protože je obklopena znaky na začátku a na konci značky. Mezi těmito dvěma znaky by byl jiný text, který definuje, jaký typ značky HTML je napsán. Například, pokud víte, že "hr" znamená horizontální pravidlo (nebo řádek), zapište to pro tag HTML:


Právě jste napsali značku HTML, která na webové stránce kreslí horizontální pravidlo.

Většina tagů HTML je ve dvojicích. Jsou umístěny na začátku a na konci části textu a diktují obsah, který budou obsahovat. Tyto tagy vytvářejí prvky HTML . Když se dozvíte a jsou značky pro otevírání a zavírání, aby se text stal tučným písmem, začnete chápat, jak HTML značky ovlivňují vzhled textu na webové stránce.

Tato věta se objeví ve všech tučkách kvůli značkám.

Všimněte si, že uzavírací silná značka (což znamená "silný důraz a která ve výchozím nastavení vykresluje text jako tučné) je totožná se značkou otevření tučné, s výjimkou, že v tagu obsahuje lomítko. Je to formát, který následuje nejvíce HTML značky. Otevírací značka a zavírací značky jsou stejné, s přidáním lomítka v závěru, který následuje po prvním znaku.

Kombinace značek HTML

Značky HTML se často používají v kombinaci. Otevírací a uzavírací značky pro zdůrazněný (kurzíva) text jsou a . Přidáním kurzívních značek do jediného slova v příkladu věty všeho tučného, ​​které způsobí, že se slovo objeví, je na webové stránce tučné i kurzíva.

Tato věta se objeví ve všech tučkách kvůli značkám.

Kdykoli se v prvku webové stránky používá několik značek společně, některé tagy se objevují uvnitř jiných, označují se jako vnořené značky HTML. Musíte mít na paměti, že vnořená značka, která jsou tagy uvnitř ostatních, musí být uzavřena, dokud se jejich tagy, které obsahují, mohou zavřít. Podívejte se na tento příklad:

Jedná se o text, který je zdůrazněn z určitého důvodu.

Měli byste si všimnout, že značka se otevře uvnitř

, což znamená, že musí být zavřeno před zavřením značky uzavření . Přemýšlejte o vnořených štítcích jako o krabicích uvnitř jiných políček. Interiérové ​​krabice musí být uzavřeny před jejich exteriérem, obsahujícími krabice.

HTML tagy a webové stránky

Existuje desítky HTML tagů v platném HTML. Některé značky HTML diktují velmi běžné, základní prvky, jako jsou odstavce, zatímco jiné jsou komplikovanější a přidávají další funkcionality, jako jsou značky odkazů nebo "ukotvení". Seznam značek HTML poskytuje snímek mnoha funkcí, které mohou tagy provádět na webové stránce pomocí značek.

K dispozici jsou také některé značky, které jsou vyžadovány ze všech webových stránek. Při vytváření první stránky použijete značku , která začíná na webové stránce; , který informuje prohlížeč, co se má zobrazit v horní části podokna prohlížeče, a <body>, kde se nacházejí všechny informace o webové stránce a největší část vaší stránky. </p> <p> Seznam značek HTML není moc nápovědou, dokud neprocházíte tutoriálem HTML, ale poté, co jste tak učinili, můžete k vytvoření vlastní webové stránky použít značky HTML. Jedna poznámka, neomezujte počet možných HTML tagů. Zatímco existují stovky možných značek, které je třeba použít, je pravděpodobné, že je pravděpodobné, že budete používat jen pár hrstků z nich znovu a znovu. Ve skutečnosti existují některé HTML značky, které jsem nikdy nepoužil ani jednou v mých desetiletích práce s webdesignem! </p> <h3> Zrušené značky </h3><p> <a href="https://cs.eyewated.com/html-5-reference-html-5-tagy-abecedne/">HTML5</a> je aktuální standard značení. Některé značky, které byly použity v dřívějších verzích kódu HTML, jsou nyní zpracovávány podle stylů HTML5. Zodpovězené značky HTML byly odebrány ze specifikací HTML. Nejlepší je nepoužívat žádné zastaralé značky. </p> <p> Původní článek Jennifer Krynin. Upraveno Jeremy Girardem ze 5/2/17 </p> </div> <div class="amp-related-wrapper"> <h2>Alike posts</h2> <div class="amp-related-content"> <a href="https://cs.eyewated.com/seznamy/"> <amp-img src="https://exse.eyewated.com/pict/fd0694f36f7534bf-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/seznamy/">Seznamy</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/znacky-zdurazneni-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://cs.eyewated.com/znacky-zdurazneni-html/">Značky zdůraznění HTML</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/psani-html-pomoci-macintosh-textedit/"> <amp-img src="https://exse.eyewated.com/pict/fbd3e2632d2f3693-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/psani-html-pomoci-macintosh-textedit/">Psaní HTML pomocí Macintosh TextEdit</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/pomoci-funkce-html5-shiv-povolite-html-5-ve-starsich-verzich-aplikace-internet-explorer/"> <amp-img src="https://exse.eyewated.com/pict/39003905e0773027-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/pomoci-funkce-html5-shiv-povolite-html-5-ve-starsich-verzich-aplikace-internet-explorer/">Pomocí funkce HTML5 Shiv povolíte HTML 5 ve starších verzích aplikace Internet Explorer</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/naucte-se-zobrazit-html-zdroj-v-aplikaci-internet-explorer-s-lehkosti/"> <amp-img src="https://exse.eyewated.com/pict/07331c3aefad30df-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/naucte-se-zobrazit-html-zdroj-v-aplikaci-internet-explorer-s-lehkosti/">Naučte se zobrazit HTML zdroj v aplikaci Internet Explorer s lehkostí</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/existuje-znacka-velikosti-html/"> <amp-img src="https://exse.eyewated.com/pict/1df222961db733e0-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/existuje-znacka-velikosti-html/">Existuje značka velikosti HTML?</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/jak-pridat-zvuk-na-webovou-stranku-html5/"> <amp-img src="https://exse.eyewated.com/pict/ffef621a2d4b3361-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/jak-pridat-zvuk-na-webovou-stranku-html5/">Jak přidat zvuk na webovou stránku HTML5</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/nove-atributy-html5-prvku-iframe/"> <amp-img src="https://exse.eyewated.com/pict/aec03ac5bab7342b-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/nove-atributy-html5-prvku-iframe/">Nové atributy HTML5 prvku IFRAME</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://cs.eyewated.com/prvky-html-elementy-na-urovni-bloku-vs-prvky-inline/">Prvky HTML: elementy na úrovni bloku vs. prvky Inline</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://cs.eyewated.com/recenze-prenosny-dvd-prehravac-philips-pet7402a/"> <amp-img src="https://exse.eyewated.com/pict/dea00f77e42431e0-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/recenze-prenosny-dvd-prehravac-philips-pet7402a/">Recenze: Přenosný DVD přehrávač Philips PET7402A</a></h3> <div class="amp-related-meta"> Recenze produktů </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/radio-siriusxm-nabizi-vanocni-a-svatecni-hudbu/"> <amp-img src="https://exse.eyewated.com/pict/d9864522879d529f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/radio-siriusxm-nabizi-vanocni-a-svatecni-hudbu/">Rádio SiriusXM nabízí vánoční a sváteční hudbu</a></h3> <div class="amp-related-meta"> Webové vyhledávání </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/web-developer/"> <amp-img src="https://exse.eyewated.com/pict/c404746d4c6a3ead-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/web-developer/">Web Developer</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/jak-povolit-blokovani-vyskakovacich-oken-v-programu-safari/"> <amp-img src="https://exse.eyewated.com/pict/330e819a7105342a-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/jak-povolit-blokovani-vyskakovacich-oken-v-programu-safari/">Jak povolit blokování vyskakovacích oken v programu Safari</a></h3> <div class="amp-related-meta"> Prohlížeče </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/ultimate-windows-a-ubuntu-dual-boot-pruvodce/"> <amp-img src="https://exse.eyewated.com/pict/14c70b13e91930f7-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/ultimate-windows-a-ubuntu-dual-boot-pruvodce/">Ultimate Windows a Ubuntu Dual Boot Průvodce</a></h3> <div class="amp-related-meta"> Linux </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/6-nejdulezitejsich-pameti-z-roku-2018/"> <amp-img src="https://exse.eyewated.com/pict/d83799d20f7a3164-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/6-nejdulezitejsich-pameti-z-roku-2018/">6 nejdůležitějších pamětí z roku 2018</a></h3> <div class="amp-related-meta"> Sociální média </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>Sapid posts</h2> <div class="amp-related-content"> <a href="https://cs.eyewated.com/videoprojektor-benq-w1080st-dlp-recenze/"> <amp-img src="https://exse.eyewated.com/pict/a3244826fe44391a-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/videoprojektor-benq-w1080st-dlp-recenze/">Videoprojektor BenQ W1080ST DLP - recenze</a></h3> <div class="amp-related-meta"> Recenze produktů </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/jak-ziskat-pristup-k-uctu-inbox-com-v-e-mailovem-programu/"> <amp-img src="https://exse.eyewated.com/pict/3dc566c301b833fe-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/jak-ziskat-pristup-k-uctu-inbox-com-v-e-mailovem-programu/">Jak získat přístup k účtu Inbox.Com v e-mailovém programu</a></h3> <div class="amp-related-meta"> E-mail a zasílání zpráv </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/co-je-to-ubernet/"> <amp-img src="https://exse.eyewated.com/pict/0c192732ecf62f92-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/co-je-to-ubernet/">Co je to Ubernet?</a></h3> <div class="amp-related-meta"> Webové vyhledávání </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/zaklady-barev-pro-tisk-a-web/"> <amp-img src="https://exse.eyewated.com/pict/ac46b63de29b3546-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/zaklady-barev-pro-tisk-a-web/">Základy barev pro tisk a web</a></h3> <div class="amp-related-meta"> Software </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/pridejte-jeden-zlomek-cary-v-navrhovem-zobrazeni-aplikace-dreamweaver/"> <amp-img src="https://exse.eyewated.com/pict/45d76d2ae49b33ab-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/pridejte-jeden-zlomek-cary-v-navrhovem-zobrazeni-aplikace-dreamweaver/">Přidejte jeden zlomek čáry v návrhovém zobrazení aplikace Dreamweaver</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/zmena-rychlosti-vypalovani-disku-v-programu-windows-media-player-12/"> <amp-img src="https://exse.eyewated.com/pict/2f99047eb0643702-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/zmena-rychlosti-vypalovani-disku-v-programu-windows-media-player-12/">Změna rychlosti vypalování disku v programu Windows Media Player 12</a></h3> <div class="amp-related-meta"> Software a aplikace </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/co-je-twitter-auto-sledovat-a-jak-to-funguje/">Co je Twitter Auto-sledovat a jak to funguje?</a></h3> <div class="amp-related-meta"> Sociální média </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/roku-rozsiruje-linku-media-streamer-s-5-modely/"> <amp-img src="https://exse.eyewated.com/pict/6caf7c46050c33c8-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/roku-rozsiruje-linku-media-streamer-s-5-modely/">Roku rozšiřuje linku Media Streamer s 5 modely</a></h3> <div class="amp-related-meta"> Recenze produktů </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/8-nejlepsich-mist-koupit-televizi-online-v-roce-2018/">8 nejlepších míst koupit televizi online v roce 2018</a></h3> <div class="amp-related-meta"> Nákupní příručky </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/jak-odstranit-aplikace-z-vaseho-iphone/"> <amp-img src="https://exse.eyewated.com/pict/eaa3abe748a0326e-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/jak-odstranit-aplikace-z-vaseho-iphone/">Jak odstranit aplikace z vašeho iPhone</a></h3> <div class="amp-related-meta"> IPhone a iPod </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/nejnovejsi-ukazky-her-pro-pc-hry/"> <amp-img src="https://exse.eyewated.com/pict/1a62a4a46bc63041-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/nejnovejsi-ukazky-her-pro-pc-hry/">Nejnovější ukázky her pro PC hry</a></h3> <div class="amp-related-meta"> Hry </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/nebezpeci-nechat-deti-hackovat-sve-psp/"> <amp-img src="https://exse.eyewated.com/pict/5e060785a790355b-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/nebezpeci-nechat-deti-hackovat-sve-psp/">Nebezpečí nechat děti hackovat své PSP</a></h3> <div class="amp-related-meta"> Herní konzole </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/jak-odeslat-obycejnou-textovou-postu-v-programu-windows-live-mail/"> <amp-img src="https://exse.eyewated.com/pict/98fd75bd36df35cd-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/jak-odeslat-obycejnou-textovou-postu-v-programu-windows-live-mail/">Jak odeslat obyčejnou textovou poštu v programu Windows Live Mail</a></h3> <div class="amp-related-meta"> E-mail a zasílání zpráv </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/nejchytrejsi-veci-o-wii-u/"> <amp-img src="https://exse.eyewated.com/pict/de8c684f15703185-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/nejchytrejsi-veci-o-wii-u/">Nejchytřejší věci o Wii U</a></h3> <div class="amp-related-meta"> Hry </div> </div> </div> <div class="amp-related-content"> <a href="https://cs.eyewated.com/vse-co-potrebujete-vedet-si-muzete-vychutnat-podcasty-na-apple-tv/"> <amp-img src="https://exse.eyewated.com/pict/525336bc78233ff3-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/vse-co-potrebujete-vedet-si-muzete-vychutnat-podcasty-na-apple-tv/">Vše, co potřebujete vědět, si můžete vychutnat podcasty na Apple TV</a></h3> <div class="amp-related-meta"> Domácí kino </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://cs.eyewated.com/8-nejlepsich-monopodu-k-nakupu-v-roce-2018/">8 nejlepších monopodů k nákupu v roce 2018</a></h3> <div class="amp-related-meta"> Nákupní příručky </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 cs.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> <!-- Dynamic page generated in 1.253 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-10-03 21:49:08 --> <!-- 0.002 -->