Om du vill bli en frontend-utvecklare är ett av de vanligaste råden du kommer att få att lära dig HTML. Hypertext Markup Language, förkortat HTML, är grunden för de flesta webbsidor.
HTML består av olika saker, såsom taggar, attribut och element. Vårt fokus kommer att vara HTML-taggar. Vi använder HTML-taggar för att berätta för webbläsare hur man strukturerar innehåll i rubriker, titlar, stycken, bilder och så mycket mer. HTML-taggar är alltså som nyckelord som definierar hur webbläsaren ska visa eller formatera innehållet.
Servrar läser HTML-taggar uppifrån och ned. Det finns ingen begränsning på antalet HTML-taggar en webbsida ska ha.
Alla HTML-taggar är inneslutna i <>
Varje HTML-tagg utför en annan funktion
De flesta HTML-taggar har öppnande och avslutande
Innehållsförteckning
Toggle ,
,
,
och
.
H1 är den största rubriktaggen, medan H6 är den minsta.
I ett HTML-dokument kan rubriktaggar representeras enligt följande:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
till
-taggar är inneslutna i -taggen.
Till exempel kommer en ,-tagg att vara innesluten som;
<body>
<h1> This is heading 1 >/h1>
</body>
eller helt enkelt paragraftaggen används när du vill strukturera innehåll till ett stycke. Att trycka på ’enter’-knappen i ett HTML-dokument i din kodredigerare kommer inte att skapa ett nytt stycke.
Om du vill ha mer än ett stycke måste du använda flera
taggar på ditt dokument. Paragraftaggarna ska vara inneslutna i -taggen.
Syntaxen för en stycketagg är;
<p> ….some content here….</p>
Om du vill ha fyra stycken kommer din kod att vara strukturerad som;
<body>
<p>Content for first paragraph.</p>
<p>Content for the second paragraph.</p>
<p>Content for the fourth paragraph.</p>
</body>
Taggen eller helt enkelt fetstil formaterar allt innehåll mellan den inledande och den avslutande som fetstil.
Den fetstilta taggen kan vara mellan en rubrik som H1 eller till och med inom en stycketagg.
Det här är exempel på en fet tagg;
<b> Bold Tag </b>
Frasen ”Bold Tag” kommer att visas i fetstil.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>
Femte upplagan kommer att vara fetstil.
Den kursiverade taggen, betecknad med , kursiverar texten inuti taggarna.
Till exempel, om vi har
<i> These are italics </i>
Orden ”dessa är kursiv” visas i kursiv stil.
Understrykningstaggen, eller , används när du vill stryka under en viss textbit i ett HTML-dokument.
Till exempel, om vi har;
<u> underline these words </u>
Frasen mellan taggarna kommer att vara understruken.
Centertaggen, , används för att centrera innehåll i ett HTML-dokument.
Till exempel, om vi har en h2-tagg skriven som
Centrering av innehåll i HTML
De flesta använder termerna HTML-taggar och element omväxlande. Men är de samma? Tekniskt sett är HTML-element och HTML-taggar olika.
HTML-taggar definierar HTML-element. För att uppnå detta lindas innehållet med ett öppnings- och stängningstaggnamn som matchar innehållet i taggen vi arbetar med.
Det här är ett exempel på ett HTML-element:
<p> This is a paragraph </p>
är ett exempel på en HTML-tagg
HTML-attribut ger ytterligare information om HTML-element i ett dokument. Attribut finns i HTML-element.
Detta är ett exempel på ett HTML-attribut
<button id=" SubmitOrder" class="btn">Order</button>
HTML som märkningsspråk har utvecklats under åren sedan Tim Berners-Lee introducerade det 1993. Den första HTML-versionen hade 18 taggar. Nya taggar läggs till med varje HTML-version; den senaste uppgraderingen var HTML5 2014.
En nära jämförelse av HTML och HTML5 visar att den senare har semantiska taggar som
,
och
som tydligt beskriver innehållet. Vi har nu över 100 HTML-taggar. Följande är några av de mest populära taggarna du bör känna till:
DOCTYPE är inte tekniskt sett en tagg utan en deklaration som talar om för webbläsaren vilken typ av fil som kommer att laddas. Den här taggen talar om för webbläsaren vilken typ av HTML som kommer att laddas.
I HTML5 kan du deklarera din fil som
<!DOCTYPE html>
Eller
<!doctype html>
Obs: Deklarationen har ingen avslutande tagg och är inte skiftlägeskänslig.
Taggen ….. kommer efter DOCTYPE-taggen. Den här taggen definierar dokumentet som en webbsida; vartannat element kommer att kapslas inuti. HTML-taggen anger början och slutet av ett HTML-dokument.
En -tagg representeras som;
<html>Content</html>
Huvuddelen av ett HTML-dokument representeras av en
-tagg. Denna tagg är innesluten i taggen och ger allmän information om webbsidan.
Taggen
innehåller andra taggar som ger information om webbsidan, såsom sidans titel och författare. Innehållet i denna tagg visas inte på webbsidan
Detta är syntaxen för en
-tagg;
<head> …….. </head>
Taggen
deklarerar webbsidans titel. Denna tagg är innesluten i taggen <head>. Taggen <title> kommer att visas i namnlisten eller fliken i webbläsarfönstret men inte på den faktiska webbsidan. </p>
<p>Syntax för taggen <title> är; </p>
<pre class="wp-block-prismatic-blocks"><title>HTML Tags for Beginners</title></pre>
<p>Inne i en <head>-tagg visas den som;</p>
<pre class="wp-block-prismatic-blocks"><head>
<title>HTML Tags for Beginners</title>
</head></pre>
<h3 id="h-body-body"><body> </body></h3>
<p>Taggen <body> visar allt synligt innehåll på en webbsida. Bilder, länkar, vanlig text, videor och mer finns i taggarna <body> och </body>. </p>
<p>Några av de andra taggarna du hittar inuti brödtexten inkluderar </p>
<p>-tagg för stycke, <a>-tagg för bilder, <strong>-tagg för fet text och </p>
<ol>-tagg för en ordnad lista, för att nämna några. </p>
<p>Syntaxen för <body>-taggen är;</p>
<pre class="wp-block-prismatic-blocks"><body> Content </body></pre>
<h3 id="h-h1-to-h6-tags"><span class="ez-toc-section" id="till_Taggar"></span>
<h1> till </p>
<h6> Taggar<span class="ez-toc-section-end"></span></h3>
<p>Det kan finnas upp till 6 rubriktaggar i ett HTML-dokument. Var och en av taggarna representeras av ett nummer som börjar från 1 till 6 som </p>
<h1>, </p>
<h2>, </p>
<h3>, </p>
<h4>, </p>
<h5> och </p>
<h6>. </p>
<p>H1 är den största rubriktaggen, medan H6 är den minsta. </p>
<p>I ett HTML-dokument kan rubriktaggar representeras enligt följande:</p>
<pre class="wp-block-prismatic-blocks"><h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6></pre>
<p><h1> till </p>
<h6>-taggar är inneslutna i <body>-taggen.</p>
<p>Till exempel kommer en ,<H1>-tagg att vara innesluten som;</p>
<pre class="wp-block-prismatic-blocks"><body>
<h1> This is heading 1 >/h1>
</body></pre>
<h3 id="h-p-p">
</h3>
<p> eller helt enkelt paragraftaggen används när du vill strukturera innehåll till ett stycke. Att trycka på ’enter’-knappen i ett HTML-dokument i din kodredigerare kommer inte att skapa ett nytt stycke. </p>
<p>Om du vill ha mer än ett stycke måste du använda flera </p>
<p> taggar på ditt dokument. Paragraftaggarna ska vara inneslutna i <body >-taggen.</p>
<p>Syntaxen för en stycketagg är; </p>
<pre class="wp-block-prismatic-blocks"><p> ….some content here….</p></pre>
<p>Om du vill ha fyra stycken kommer din kod att vara strukturerad som; </p>
<pre class="wp-block-prismatic-blocks"><body>
<p>Content for first paragraph.</p>
<p>Content for the second paragraph.</p>
<p>Content for the fourth paragraph.</p>
</body></pre>
<h3 id="h-b-b"><b> </b></h3>
<p>Taggen <b> </b> eller helt enkelt fetstil formaterar allt innehåll mellan den inledande <b> och den avslutande </b> som fetstil.</p>
<p>Den fetstilta taggen kan vara mellan en rubrik som H1 eller till och med inom en stycketagg. </p>
<p>Det här är exempel på en fet tagg;</p>
<pre class="wp-block-prismatic-blocks"><b> Bold Tag </b></pre>
<p>Frasen ”Bold Tag” kommer att visas i fetstil. </p>
<pre class="wp-block-prismatic-blocks"><h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1> </pre>
<p>Femte upplagan kommer att vara fetstil.</p>
<h3 id="h-i-i"><i> </i></h3>
<p>Den kursiverade taggen, betecknad med <i>, kursiverar texten inuti taggarna. </p>
<p>Till exempel, om vi har </p>
<pre class="wp-block-prismatic-blocks"><i> These are italics </i></pre>
<p>Orden ”dessa är kursiv” visas i kursiv stil. </p>
<h3 id="h-u-u"><u> </u></h3>
<p>Understrykningstaggen, eller <u>, används när du vill stryka under en viss textbit i ett HTML-dokument. </p>
<p>Till exempel, om vi har;</p>
<pre class="wp-block-prismatic-blocks"><u> underline these words </u></pre>
<p>Frasen mellan taggarna kommer att vara understruken. </p>
<h3 id="h-center-center"><center> </center></h3>
<p>Centertaggen, <center>, används för att centrera innehåll i ett HTML-dokument. </p>
<p>Till exempel, om vi har en h2-tagg skriven som </p>
<h2> Centrering av innehåll i HTML </h2>
<p>, kan vi centrera den enligt följande;</p>
<pre class="wp-block-prismatic-blocks"><center>
<h2> Centering Content in HTML </h2>
</center></pre>
<h3 id="h-span-span"><span></span></h3>
<p>Span-tagg, <span>, är en generisk inline-behållare som inte kommer med en standardstil. Du kan använda span-taggen för att gruppera texter som du vill styla. </p>
<p>Du kan span tag inuti andra taggar som rubriker och stycken;</p>
<pre class="wp-block-prismatic-blocks"><h2> Learn HTML <span> from experts </span> and be ready for the market </h2>
</pre>
<pre class="wp-block-prismatic-blocks"><p> Learn HTML <span> from experts </span> and be ready for the market </p></pre>
<h3 id="h-div-div">
<div></div>
</h3>
<p>En divisionstagg, förkortad div, är en tagg som låter dig gruppera olika taggar i ett HTML-dokument. </p>
<p>En div-tagg kan ges en ”klass” för att lägga till extern stil med CSS. </p>
<p>Så här kommer en div som omsluter en h1, h2 och en paragraftagg att representeras. </p>
<pre class="wp-block-prismatic-blocks"><div >
<h1> Learn HTML </h1>
<h2> HTML Tags </h2>
<p> HTML is a markup language……… </p>
</div></pre>
<h3 id="h-em-em"><em></em></h3>
<p>Betoningen, eller <em>-taggen, används för att betona vissa ord i ett HTML-dokument. </p>
<p>Innehåll mellan <em>-taggar visas lutande eller kursivt. </p>
<p>Betonat innehåll i ett stycke kan visas i en kodredigerare visas som;</p>
<pre class="wp-block-prismatic-blocks"><p> The meeting will start at <em> 0800 hrs </em>, please keep time </p></pre>
<h3 id="h-sup-sup"><sup></sup></h3>
<p><sup> eller den upphöjda taggen tillåter att den bifogade texten står ovanför resten. Ett perfekt exempel är när du vill kvadrera ett nummer X och representera det matematiskt för att ge dig X2</p>
<p>Syntaxen för <sup> i en stycketagg kommer att vara;</p>
<pre class="wp-block-prismatic-blocks"><H1> Harveys <sup>TM </sup> Company Limited </H1></pre>
<h3 id="h-sub-sub"><sub></sub></h3>
<p>Den nedsänkta eller <sub>-taggen är motsatsen till den upphöjda taggen. Innehållet i taggen <sub> kommer att visas under den normala textraden. Ett perfekt exempel är när man skriver vattens kemiska formel som H20. </p>
<p>Syntaxen för den nedsänkta taggen kommer att vara;</p>
<pre class="wp-block-prismatic-blocks">Remember that H <sub> 2 </sub> 0 is the chemical formula for water</pre>
<h3 id="h-br"></h3>
<p> är en självstängande tagg som står för en paus. Allt innehåll efter <br /> kommer att börja på en ny rad. </p>
<p>Syntaxen för <br /> i ett stycke blir;</p>
<pre class="wp-block-prismatic-blocks"><p> HTML is the abbreviation of Hypertext Markup Language <br>
There has been an ongoing debate as to whether it is a programming language or not <br>
However, we cannot downplay its importance <br>
HTML has been used in more than 95% of websites today </p></pre>
<h3 id="h-ol-ol-and-li-li"><span class="ez-toc-section" id="och"></span>
<ol></ol>
<p> och </p>
<li> </li>
<span class="ez-toc-section-end"></span></h3>
<p>Den ordnade listtaggen eller </p>
<ol> måste användas med en annan tagg, till exempel </p>
<li>. </p>
<p>De två kan visas i en kodredigerare som;</p>
<pre class="wp-block-prismatic-blocks"><ol>
<li> Asia </li>
<li> Africa </li>
<li> Europe </li>
</ol></pre>
<p>När det renderas i webbläsaren kommer innehållet att visas numrerat. </p>
<h3 id="h-img-src"><img decoding="async" src="”/></h3>
<p>Du kanske vill lägga till en bild för visuell tilltalande eller till och med en logotyp. Den självstängande bildtaggen, <img decoding="async" src="”/>, kommer väl till pass i ett sådant fall. </p>
<p>Syntaxen för bildtaggen blir;</p>
<pre class="wp-block-prismatic-blocks"><img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/></pre>
<p>Innehållet inom citattecken representerar källans URL. </p>
<h3 id="h-wrapping-up"><span class="ez-toc-section" id="Avslutar"></span>Avslutar <span class="ez-toc-section-end"></span></h3>
<p>Det finns över 100 HTML-taggar, men ovanstående är de du bör känna till som nybörjare. HTML stöds i de flesta kodredigerare, och du är därmed säker på att du aldrig kommer att gå fel när du börjar lära dig. </p>
</p></div>
</div>
<footer class="entry-meta" aria-label="Metadata för inlägg">
<span class="cat-links"><span class="gp-icon icon-categories"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0143.592 27.907l12.349 26.791A16 16 0 00228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z" /></svg></span><span class="screen-reader-text">Kategorier </span><a href="https://adminvista.com/adminvista/" rel="category tag">adminvista.com</a></span> <nav id="nav-below" class="post-navigation" aria-label="Inlägg">
<div class="nav-previous"><span class="gp-icon icon-arrow-left"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 138.212c0 2.265-1.133 4.813-2.832 6.512L64.276 256.001l111.317 111.277c1.7 1.7 2.832 4.247 2.832 6.513 0 2.265-1.133 4.813-2.832 6.512L161.43 394.46c-1.7 1.7-4.249 2.832-6.514 2.832-2.266 0-4.816-1.133-6.515-2.832L16.407 262.514c-1.699-1.7-2.832-4.248-2.832-6.513 0-2.265 1.133-4.813 2.832-6.512l131.994-131.947c1.7-1.699 4.249-2.831 6.515-2.831 2.265 0 4.815 1.132 6.514 2.831l14.163 14.157c1.7 1.7 2.832 3.965 2.832 6.513z" fill-rule="nonzero" /></svg></span><span class="prev"><a href="https://adminvista.com/hur-man-skapar-ett-wayfair-professional-konto/" rel="prev">Hur man skapar ett Wayfair Professional-konto</a></span></div><div class="nav-next"><span class="gp-icon icon-arrow-right"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 256.001c0 2.266-1.133 4.815-2.832 6.515L43.599 394.509c-1.7 1.7-4.248 2.833-6.514 2.833s-4.816-1.133-6.515-2.833l-14.163-14.162c-1.699-1.7-2.832-3.966-2.832-6.515 0-2.266 1.133-4.815 2.832-6.515l111.317-111.316L16.407 144.685c-1.699-1.7-2.832-4.249-2.832-6.515s1.133-4.815 2.832-6.515l14.163-14.162c1.7-1.7 4.249-2.833 6.515-2.833s4.815 1.133 6.514 2.833l131.994 131.993c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero" /></svg></span><span class="next"><a href="https://adminvista.com/oka-ditt-resultat-med-dessa-10-gmat-ovningstester/" rel="next">Öka ditt resultat med dessa 10 GMAT-övningstester</a></span></div> </nav>
</footer>
</div>
</article>
</main>
</div>
<div class="widget-area sidebar is-right-sidebar" id="right-sidebar">
<div class="inside-right-sidebar">
<aside id="search-2" class="widget inner-padding widget_search"><form method="get" class="search-form" action="https://adminvista.com/">
<label>
<span class="screen-reader-text">Sök efter:</span>
<input type="search" class="search-field" placeholder="Sök …" value="" name="s" title="Sök efter:">
</label>
<button class="search-submit" aria-label="Sök"><span class="gp-icon icon-search"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z" /></svg></span></button></form>
</aside>
<aside id="recent-posts-2" class="widget inner-padding widget_recent_entries">
<h2 class="widget-title">Senaste inläggen</h2>
<ul>
<li>
<a href="https://adminvista.com/hur-man-installerar-och-konfigurerar-vnc-pa-debian-11/">Hur man installerar och konfigurerar VNC på Debian 11</a>
</li>
<li>
<a href="https://adminvista.com/java-read-text-file/">Java read text file</a>
</li>
<li>
<a href="https://adminvista.com/hur-man-skapar-en-minecraft-server/">Hur man skapar en Minecraft-server</a>
</li>
<li>
<a href="https://adminvista.com/java-sax-parser-exempel/">Java SAX Parser Exempel</a>
</li>
<li>
<a href="https://adminvista.com/3-satt-att-jamfora-strangar-i-c/">3 sätt att jämföra strängar i C++</a>
</li>
<li>
<a href="https://adminvista.com/hur-man-skapar-raid-arrayer-med-mdadm-pa-ubuntu/">Hur man skapar RAID-arrayer med mdadm på Ubuntu</a>
</li>
<li>
<a href="https://adminvista.com/hur-man-inaktiverar-automatiska-uppdateringar-i-adobe-acrobat-reader/">Hur man inaktiverar automatiska uppdateringar i Adobe Acrobat Reader</a>
</li>
<li>
<a href="https://adminvista.com/hur-man-visar-och-konfigurerar-linux-loggar-pa-ubuntu-debian-och-centos/">Hur man visar och konfigurerar Linux-loggar på Ubuntu, Debian och CentOS</a>
</li>
<li>
<a href="https://adminvista.com/java-i18n-internationalisering-i-java/">Java i18n – Internationalisering i Java</a>
</li>
<li>
<a href="https://adminvista.com/hur-man-installerar-openlitespeed-webservern-pa-ubuntu-22-04/">Hur man installerar OpenLiteSpeed-webservern på Ubuntu 22.04</a>
</li>
<li>
<a href="https://adminvista.com/det-gar-inte-att-spara-andringar-foton-appfel-i-windows-11/">Det går inte att spara ändringar Foton appfel i Windows 11</a>
</li>
<li>
<a href="https://adminvista.com/template-method-design-pattern-i-java/">Template Method Design Pattern i Java</a>
</li>
<li>
<a href="https://adminvista.com/hur-man-anvander-operatorer-i-java/">Hur man använder operatorer i Java</a>
</li>
<li>
<a href="https://adminvista.com/inledande-serverinstallation-med-centos/">Inledande serverinstallation med CentOS</a>
</li>
<li>
<a href="https://adminvista.com/hur-man-utfor-grundlaggande-administrativa-uppgifter-for-lagringsenheter-i-linux/">Hur man utför grundläggande administrativa uppgifter för lagringsenheter i Linux</a>
</li>
</ul>
</aside> </div>
</div>
</div>
</div>
<div class="site-footer">
<div id="footer-widgets" class="site footer-widgets">
<div class="footer-widgets-container grid-container">
<div class="inside-footer-widgets">
<div class="footer-widget-1">
<aside id="text-2" class="widget inner-padding widget_text"> <div class="textwidget"><p><a href="https://adminvista.com/integritetspolicy/">Privacy Policy</a></p>
</div>
</aside> </div>
<div class="footer-widget-2">
</div>
<div class="footer-widget-3">
</div>
</div>
</div>
</div>
<footer class="site-info" aria-label="Webbplats" itemtype="https://schema.org/WPFooter" itemscope>
<div class="inside-site-info grid-container">
<div class="copyright-bar">
<span class="copyright">© 2024 adminvista.com</span> • Byggt med <a href="https://generatepress.com" itemprop="url">GeneratePress</a> </div>
</div>
</footer>
</div>
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(87154589, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/87154589" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --><script id="generate-a11y">!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var e=document.body;e.addEventListener("mousedown",function(){e.classList.add("using-mouse")}),e.addEventListener("keydown",function(){e.classList.remove("using-mouse")})}}();</script><!--[if lte IE 11]>
<script src="https://adminvista.com/wp-content/themes/generatepress/assets/js/classList.min.js?ver=3.4.0" id="generate-classlist-js"></script>
<![endif]-->
<script id="generate-menu-js-extra">
var generatepressMenu = {"toggleOpenedSubMenus":"1","openSubMenuLabel":"\u00d6ppna undermeny","closeSubMenuLabel":"St\u00e4ng undermeny"};
</script>
<script src="https://adminvista.com/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.4.0" id="generate-menu-js"></script>
</body>
</html>
<script>(function(){if (!document.body) return;var js = "window['__CF$cv$params']={r:'87fcb819ebfe1403',t:'MTcxNTAzNzgxOC43NDYwMDA='};_cpo=document.createElement('script');_cpo.nonce='',_cpo.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js',document.getElementsByTagName('head')[0].appendChild(_cpo);";var _0xh = document.createElement('iframe');_0xh.height = 1;_0xh.width = 1;_0xh.style.position = 'absolute';_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = 'none';_0xh.style.visibility = 'hidden';document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement('script');_0xj.innerHTML = js;_0xi.getElementsByTagName('head')[0].appendChild(_0xj);}}if (document.readyState !== 'loading') {handler();} else if (window.addEventListener) {document.addEventListener('DOMContentLoaded', handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== 'loading') {document.onreadystatechange = prev;handler();}};}})();</script> 