Lai izveidotu interaktīvas tīmekļa saskarnes, ir svarīgi pievienot saites uz HTML pogām. Šajā rakstā mēs izpētīsim dažādas metodes, tostarp iekļautos notikumus, veidlapu atribūtus un CSS stilu, kā arī praktiskus piemērus un koda fragmentus.
Vispirms izveidosim HTML pogas paraugu ar pamata stilu:
HTML
Izveidojiet HTML pogu, kas darbojas kā saites nosaukums><style>.GFG { platums: 100 pikseļi; augstums: 50 pikseļi; fons: zaļš; robeža: nav; krāsa: balta; } style> head> <body> <h1>techcodeview.comh1> <button>Noklikšķiniet šeit poga> body> html>>></tag> <p dir='ltr'><span>Tagad izpētīsim katru metodi kopā ar nepieciešamo</span> <b> <strong>sintakse</strong> </b> <span>un</span> <b> <strong>piemērs</strong> </b> <span>kodiem.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/sql-dialects-hibernate">ziemas guļas dialekts</a>
</blockquote> <h2><span>Metodes, kā pievienot saiti HTML pogai</span></h2><h3> <b> <strong>1. Iekļauts</strong> </b> <b><code class='hljs'> onclick></pre> </code></b> <b> <strong>Pasākums:</strong> </b> </h3><p dir='ltr'><span>Iekļautā onclick notikuma izmantošana. Tas saista JavaScript funkciju ar pogas elementa onclick atribūtu. Noklikšķinot, funkcija novirza lietotāju uz norādīto URL, izmantojot window.location.href.</span></p> <p dir='ltr'> <b> <strong>Sintakse:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/binary-tree-vs-binary-search-tree">binārais koks vs bst</a>
</blockquote> <tag data-text-3='Click Here></code><p dir='ltr'> <b> <strong>Piemērs</strong> </b> <span>: šajā piemērā mēs izveidojam HTML pogu, kas veidota ar CSS. Noklikšķinot, tas novirza uz techcodeview.com IDE, izmantojot iekļautu onclick notikumu.</span></p>HTML<tag data-text-1=' <html> <head> <title>Izmantojot iekļauto onclick Event title><style>.GFG {fona krāsa: balta; apmale: 2 pikseļi vienkrāsains melns; krāsa: zaļa; polsterējums: 5 pikseļi 10 pikseļi; kursors: rādītājs; } style> head> <body> <button>Noklikšķiniet šeit poga> body> html>>></tag> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-sort-tuple-python">pitonu šķirošanas korteži</a>
</blockquote> <img src='//techcodeview.com/img/picked/45/how-add-link-html-button.webp' alt="ButtonLink"><p>Iekļauts onclick notikuma piemēra izvade</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h3> <b> <strong>2. Izmantojot pogu tagu iekšpusē <a>tags:</a> </strong> <a> </a> </b> <a> </a> </h3><p dir='ltr'> <a><span>Šī metode izveido pogu enkura tagā. Enkura tags novirza tīmekļa lapu uz norādīto vietu.</span> <b> <strong>Aizstājiet tālāk redzamo fragmentu ar pogas elementu, kas norādīts iepriekš redzamajā pogas koda paraugā.</strong> </b> </a> </p> <a> <p dir='ltr'> <b> <strong>Sintakse:</strong> </b> </p> </a> <tag data-text-3=' Syntax: Example : HTML <html> <head> <title>Izveidojiet HTML pogu, kas darbojas kā saites nosaukums><style>.GFG { platums: 100 pikseļi; augstums: 50 pikseļi; fons: zaļš; robeža: nav; krāsa: balta; } style> head> <body> <h1>techcodeview.comh1> <a href='https://ide.techcodeview.com>Noklikšķiniet uz mea> body> html> Output : Enkura taga izmantošana kā pogas saite 4. Formas tagu izmantošana Vēl viena pieeja ir elementā izmantot darbības vai formācijas atribūtu. Šī metode ir semantiski pareizāka un labi darbojas pat formās. Aizstājiet tālāk norādīto fragmentu body tagā ar pogas elementu, kas norādīts iepriekš minētajā pogas koda paraugā. Noklikšķiniet uz manis Piemērs: HTML<html> <head> <title>Izveidojiet HTML pogu, kas darbojas kā saites nosaukums><style>.GFG { platums: 100 pikseļi; augstums: 50 pikseļi; fons: zaļš; robeža: nav; krāsa: balta; } style> head> <body> <h1>techcodeview.comh1><form action='https://ide.techcodeview.com> <button type='submit'>Noklikšķiniet uz pogas mebutton> forma> body> html> Output : Formas tagu izmantošana Piezīme: Izvade būs vienāda visām metodēm. Izvade:>></tag></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/python-numpy-indexing/">Python Numpy-Indeksēšana</a> </li><li> <a href="/compiler-tutorial/">Kompilatora Apmācība</a> </li><li> <a href="/linux-shell-commands/">Linux Shell Komandas</a> </li><li> <a href="/python-numpy-statistics-functions/">Python Numpy-Statistikas Funkcijas</a> </li><li> <a href="/groovy-tutorial/">Groovy Apmācība</a> </li><li> <a href="/jfreechart-tutorial/">Jfreechart Apmācība</a> </li><li> <a href="/java-array-programs/">Java-Masīvs-Programmas</a> </li><li> <a href="/digital-electronics-implementations/">Digitālā Elektronika – Realizācijas</a> </li><li> <a href="/min-heap/">Min-Kaudze</a> </li><li> <a href="/javascript-questions/">Javascript — Jautājumi</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Naivi Bayes klasifikatori</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Datorzinātņu portāls dīķiem. Tajā ir labi uzrakstīti, pārdomāti un labi izskaidroti raksti par datorzinātnēm un programmēšanu, viktorīnas un prakses/konkurētspējīgas programmēšanas/uzņēmuma intervijas jautājumi.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/naive-bayes-classifiers"> <i class="fa fa-external-link"></i> Lasīt Vairāk</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interesanti Raksti</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/advantages-disadvantages-industry">Nozares priekšrocības un trūkumi</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/7-aquarius-traits-you-need-know-131196">7 Ūdensvīra iezīmes, kas jums jāzina</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/julia-dictionary-methods/">Julia-Vārdnīca-Metodes</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-convert-binary-decimal">Java konvertēt bināro uz decimālo</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/binary-search-tree-vs-avl-tree">Binārās meklēšanas koks pret AVL koku</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Populārākas Posts</h2>
<div class="content">
<ul class="list"> <li><a href="/what-is-f5">kas ir f5 uz tastatūras</a>
</li><li><a href="/javascript-window-open-method">javascript window.open</a>
</li><li><a href="/performance-testing">veiktspējas pārbaude</a>
</li><li><a href="/abs-function-c">c kods abs</a>
</li><li><a href="/java-oops-concepts">java oops jēdzieni</a>
</li><li><a href="/java-string-compare">salīdziniet java virknes</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Visas Tiesības Aizsargātas | <a href="//nl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atruna</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Par Mums</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privātuma Politika</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>