Tag

Tag

digunakan untuk membungkus seluruh tabel. Setiap baris dalam tabel akan didefinisikan dengan tag

, sedangkan setiap sel atau kolom dalam baris akan didefinisikan dengan tag

. Contoh penggunaan tag adalah sebagai berikut: <table><tr><td>Data 1</td><td>Data 2</td></tr><tr><td>Data 3</td><td>Data 4</td></tr></table> Tag Tag digunakan untuk mendefinisikan baris dalam tabel. Setiap sel atau kolom dalam baris akan didefinisikan dengan tag adalah sebagai berikut: <tr><td>Data 1</td><td>Data 2</td></tr> Tag . Contoh penggunaan tag . Contoh penggunaan tag Tag digunakan untuk mendefinisikan sel header dalam tabel. Sel header biasanya digunakan untuk menampilkan judul atau nama kolom. Contoh penggunaan tag adalah sebagai berikut: <tr><th>Nama</th><th>Email</th></tr> Tag Tag digunakan untuk mendefinisikan sel data dalam tabel. Setiap sel data akan berada di dalam tag adalah sebagai berikut: <tr><td>Data 1</td><td>Data 2</td></tr> Atribut rowspan dan colspan Atribut rowspan dan colspan pada tag digunakan untuk menggabungkan sel-sel dalam tabel. Atribut rowspan digunakan untuk menggabungkan beberapa baris, sedangkan atribut colspan digunakan untuk menggabungkan beberapa kolom. Contoh penggunaan atribut rowspan dan colspan adalah sebagai berikut: <tr><td rowspan="2">Data 1</td><td>Data 2</td><td colspan="2">Data 3</td></tr><tr><td>Data 4</td><td>Data 5</td><td>Data 6</td></tr> Membuat Formulir Formulir digunakan untuk mengumpulkan data dari pengguna melalui halaman web. Dalam HTML, kita menggunakan tag , , , dan <button> untuk membuat formulir. Berikut adalah penjelasan lebih lanjut mengenai tag-tag tersebut:</p> <h3>Tag </p> <form></h3> <p>Tag </p> <form> digunakan untuk membungkus seluruh formulir. Setiap elemen formulir akan didefinisikan dengan tag <input>, <textarea>, atau <button>. Contoh penggunaan tag </p> <form> adalah sebagai berikut:</p> <pre><form action="proses.php" method="post"><!-- Elemen formulir --></form></pre> <h3>Tag <input></h3> <p>Tag <input> digunakan untuk membuat elemen formulir seperti input teks, checkbox, radio button, dan lain-lain. Contoh penggunaan tag <input> adalah sebagai berikut:</p> <pre><input type="text" name="nama" placeholder="Masukkan Nama"><input type="checkbox" name="hobi" value="berenang"> Berenang<input type="radio" name="gender" value="pria"> Pria<input type="submit" value="Kirim"></pre> <h3>Tag <textarea></h3 <h3>Tag <textarea></h3> <p>Tag <textarea> digunakan untuk membuat elemen formulir berupa area teks yang lebih besar. Pengguna dapat menulis teks dalam area ini. Contoh penggunaan tag <textarea> adalah sebagai berikut:</p> <pre><textarea name="komentar" rows="4" cols="50">Isi komentar Anda di sini</textarea></pre> <h3>Tag <select></h3> <p>Tag <select> digunakan untuk membuat elemen formulir berupa dropdown atau daftar pilihan. Pengguna dapat memilih satu pilihan dari daftar ini. Contoh penggunaan tag <select> adalah sebagai berikut:</p> <pre><select name="negara"><option value="ID">Indonesia</option><option value="US">Amerika Serikat</option><option value="JP">Jepang</option></select></pre> <h3>Tag <button></h3> <p>Tag <button> digunakan untuk membuat tombol dalam formulir. Tombol ini dapat digunakan untuk mengirimkan formulir atau menjalankan aksi tertentu. Contoh penggunaan tag <button> adalah sebagai berikut:</p> <pre><button type="submit">Kirim</button><button type="reset">Reset</button></pre> <h2>Menyusun Halaman dengan CSS</h2> <p>CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan gaya halaman web. Dalam HTML, kita menggunakan tag </p> <style> atau menghubungkan file eksternal CSS untuk menerapkan gaya pada elemen-elemen HTML. Berikut adalah penjelasan lebih lanjut mengenai penerapan CSS:</p> <h3>Tag </p> <style></h3> <p>Tag </p> <style> digunakan untuk menuliskan kode CSS secara langsung di dalam halaman HTML. Anda dapat menentukan gaya dan properti untuk elemen-elemen HTML di dalam tag </p> <style>. Contoh penggunaan tag </p> <style> adalah sebagai berikut:</p> <pre><style>h1 {color: blue;font-size: 24px;}p {color: red;}</style></pre> <h3>Menghubungkan File CSS Eksternal</h3> <p>Anda juga dapat membuat file CSS terpisah dan menghubungkannya dengan halaman HTML. Untuk menghubungkan file CSS eksternal, Anda perlu menggunakan tag <link> dan menentukan atribut href dengan URL atau lokasi file CSS. Contoh penggunaan tag <link> untuk menghubungkan file CSS adalah sebagai berikut:</p> <pre><link rel="stylesheet" href="style.css"></pre> <p>Dalam file CSS, Anda dapat menuliskan kode CSS secara terpisah. Contoh penggunaan kode CSS dalam file style.css adalah sebagai berikut:</p> <pre>h1 {color: blue;font-size: 24px;}p {color: red;}</pre> <h3>Penggunaan Selector</h3> <p>Selector digunakan dalam CSS untuk memilih elemen atau kelompok elemen tertentu yang ingin diberi gaya. Anda dapat menggunakan tag, class, id, atau kombinasi dari semuanya sebagai selector. Contoh penggunaan selector dalam CSS adalah sebagai berikut:</p> <pre>h1 {color: blue;font-size: 24px;}<p>.container {background-color: gray;}</p><p>#judul {text-align: center;}</pre> </p> <h3>Mengatur Warna dan Latar Belakang</h3> <p>Anda dapat mengatur warna teks, latar belakang, dan warna latar belakang elemen-elemen HTML menggunakan CSS. Contoh penggunaan properti untuk mengatur warna dan latar belakang adalah sebagai berikut:</p> <pre>h1 {color: blue;background-color: yellow;}<p>p {color: red;background-color: lightgray;}</pre> </p> <h3>Mengatur Margin dan Padding</h3> <p>Mengatur margin dan padding dalam CSS digunakan untuk mengatur jarak antara elemen-elemen HTML. Margin adalah jarak di sekeliling elemen, sedangkan padding adalah jarak antara konten elemen dengan batas elemen itu sendiri. Contoh penggunaan properti untuk mengatur margin dan padding adalah sebagai berikut:</p> <pre>h1 {margin-top: 20px;margin-bottom: 20px;padding: 10px;}<p>p {margin: 10px;padding: 5px;}</pre> </p> <h3>Mengatur Tata Letak</h3> <p>Mengatur tata letak elemen-elemen HTML dalam CSS digunakan untuk mengatur posisi dan penempatan elemen. Anda dapat menggunakan properti seperti position, float, display, dan lain-lain untuk mengatur tata letak. Contoh penggunaan properti untuk mengatur tata letak adalah sebagai berikut:</p> <pre>.container {position: relative;}<p>#sidebar {float: left;width: 200px;}</p><p>#content {float: right;width: 600px;}</pre> </p> <h2>Menambahkan Efek Animasi</h2> <p>Dalam desain halaman web, efek animasi dapat memberikan pengalaman interaktif yang menarik bagi pengguna. Dengan menggunakan CSS, Anda dapat menambahkan efek animasi seperti transisi, perubahan warna, dan pergerakan. Berikut adalah penjelasan lebih lanjut mengenai penggunaan efek animasi dalam CSS:</p> <h3>Transisi</h3> <p>Transisi dalam CSS digunakan untuk mengatur perubahan antara dua keadaan elemen. Anda dapat mengatur durasi, jenis transisi, dan properti yang berubah. Contoh penggunaan transisi dalam CSS adalah sebagai berikut:</p> <pre>button {transition: background-color 0.5s ease-in-out;}<p>button:hover {background-color: red;}</pre> </p> <h3>Perubahan Warna</h3> <p>Anda dapat menggunakan CSS untuk mengatur perubahan warna elemen saat diinteraksi dengan pengguna. Misalnya, saat pengguna mengarahkan kursor ke elemen, warna dapat berubah. Contoh penggunaan perubahan warna dalam CSS adalah sebagai berikut:</p> <pre>button {background-color: blue;transition: background-color 0.5s ease-in-out;}<p>button:hover {background-color: red;}</pre> </p> <h3>Pergerakan</h3> <p>Anda juga dapat menggunakan CSS untuk mengatur pergerakan elemen dalam halaman web. Misalnya, Anda dapat membuat elemen bergerak saat dihover atau saat halaman dimuat. Contoh penggunaan pergerakan dalam CSS adalah sebagai berikut:</p> <pre>@keyframes move {0% { transform: translateX(0); }50% { transform: translateX(100px); }100% { transform: translateX(0); }}<p>button {animation: move 5s infinite;}</pre> </p> <h2>Menyematkan Video dan Audio</h2> <p>Menyematkan video dan audio ke dalam halaman web dapat meningkatkan pengalaman pengguna dalam menonton konten multimedia. Dalam HTML, kita menggunakan tag <video> dan <audio> untuk menyematkan video dan audio. Berikut adalah penjelasan lebih lanjut mengenai tag-tag tersebut:</p> <h3>Tag <video></h3> <p>Tag <video> digunakan untuk menyematkan video ke dalam halaman web. Anda dapat menentukan sumber video, kontrol pemutaran, dan atribut lainnya. Contoh penggunaan tag <video> adalah sebagai berikut:</p> <pre><video src="video.mp4" controls>Browser tidak mendukung pemutaran video.</video></pre> <h3>Tag <audio></h3> <p>Tag <audio> digunakan untuk menyematkan audio ke dalam halaman web. Anda dapat menentukan sumber audio, kontrol pemutaran, dan atribut lainnya. Contoh penggunaan tag <audio> adalah sebagai berikut:</p> <pre><audio src="audio.mp3" controls>Browser tidak mendukung pemutaran audio.</audio></pre> <h3>Menambahkan Kontrol Pemutaran</h3> <p>Anda dapat menambahkan kontrol pemutaran seperti play, pause, dan volume ke elemen video atau audio menggunakan atribut controls pada tag <video> atau <audio>. Contoh penggunaan atribut controls adalah sebagai berikut:</p> <pre><video src="video.mp4" controls>Browser tidak mendukung pemutaranvideo.</video><p><audio src="audio.mp3" controls>Browser tidak mendukung pemutaran audio.</audio></pre> </p> <h3>Mengatur Ukuran Video dan Audio</h3> <p>Anda dapat mengatur ukuran video dan audio menggunakan atribut width dan height pada tag <video> atau <audio>. Contoh penggunaan atribut width dan height adalah sebagai berikut:</p> <pre><video src="video.mp4" width="640" height="360" controls>Browser tidak mendukung pemutaran video.</video><p><audio src="audio.mp3" controls width="300">Browser tidak mendukung pemutaran audio.</audio></pre> </p> <h2>Menyematkan Peta dan Lokasi</h2> <p>Anda dapat menyematkan peta dan lokasi ke dalam halaman web menggunakan Google Maps API. Berikut adalah penjelasan lebih lanjut mengenai penyematan peta dan lokasi:</p> <h3>Google Maps API</h3> <p>Google Maps API adalah platform yang disediakan oleh Google untuk menyematkan peta dan lokasi ke dalam halaman web. Anda perlu mendaftar dan mendapatkan API key dari Google untuk menggunakan fitur ini. Contoh penggunaan Google Maps API adalah sebagai berikut:</p> <pre><script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script></pre> <h3>Menyematkan Peta</h3> <p>Anda dapat menyematkan peta ke dalam halaman web menggunakan Google Maps API dengan menentukan koordinat atau alamat yang ingin ditampilkan. Contoh penggunaan Google Maps API untuk menyematkan peta adalah sebagai berikut:</p> <pre><div id="map" style="width: 100%; height: 400px;"></div><p><script>function initMap() {var mapOptions = {center: {lat: -6.1754, lng: 106.8272},zoom: 12};var map = new google.maps.Map(document.getElementById("map"), mapOptions);}initMap();</script></pre> </p> <h3>Menandai Lokasi</h3> <p>Anda dapat menandai lokasi tertentu di peta menggunakan Google Maps API dengan menambahkan marker atau penanda. Contoh penggunaan Google Maps API untuk menandai lokasi adalah sebagai berikut:</p> <pre><div id="map" style="width: 100%; height: 400px;"></div><p><script>function initMap() {var mapOptions = {center: {lat: -6.1754, lng: 106.8272},zoom: 12};var map = new google.maps.Map(document.getElementById("map"), mapOptions);</p><p>var marker = new google.maps.Marker({position: {lat: -6.1754, lng: 106.8272},map: map,title: "Lokasi Saya"});}initMap();</script></pre> </p> <p>Dengan mempelajari contoh-contoh script HTML ini, Anda telah memperoleh pemahaman yang lebih mendalam mengenai dasar-dasar HTML dan berbagai elemen yang dapat digunakan untuk membuat halaman web yang menarik dan interaktif. Selanjutnya, Anda dapat mengembangkan keterampilan Anda dengan mempelajari lebih lanjut tentang CSS, JavaScript, dan kerangka kerja web lainnya. Selamat belajar dan semoga sukses dalam perjalanan Anda dalam dunia pemrograman web!</p> <h2>Related video of Contoh Script HTML: Panduan Lengkap untuk Pemula</h2> <p><iframe title="Cara bikin jam digital dengan HTML & Javascript" width="855" height="481" src="https://www.youtube.com/embed/J28Y89LlS5s?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></p> </div> <footer class="entry-meta" aria-label="Entry meta"> <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">Categories </span><a href="https://celeroo.com/category/blog/" rel="category tag">Blog</a></span> </footer> </div> </article> </main> </div> <div class="widget-area sidebar is-right-sidebar" id="right-sidebar"> <div class="inside-right-sidebar"> <aside id="block-2" class="widget inner-padding widget_block widget_search"><form role="search" method="get" action="https://celeroo.com/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search" ><label class="wp-block-search__label" for="wp-block-search__input-1" >Search</label><div class="wp-block-search__inside-wrapper " ><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="Search" class="wp-block-search__button wp-element-button" type="submit" >Search</button></div></form></aside><aside id="block-3" class="widget inner-padding widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Recent Posts</h2><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://celeroo.com/2-cara-menyadap-wa-pacar-tanpa-diketahui/">2 Cara Menyadap Wa Pacar Tanpa Diketahui</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://celeroo.com/cara-melihat-backlink-kompetitor/">Cara Praktis Melihat Backlink Kompetitor</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://celeroo.com/cara-download-video-tiktok-tanpa-watermark-no-2-paling-mudah/">Cara Download Video TikTok Tanpa Watermark, No 2 Paling Mudah!</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://celeroo.com/strategi-pemasaran-social-media-untuk-bisnis-anda/">Strategi Pemasaran Social Media untuk Bisnis Anda</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://celeroo.com/web-proxy/">Web Proxy: Mengenal dan Memahami Penggunaan serta Manfaatnya</a></li> </ul></div></div></aside> </div> </div> </div> </div> <div class="site-footer"> <footer class="site-info" aria-label="Site" itemtype="https://schema.org/WPFooter" itemscope> <div class="inside-site-info grid-container"> <div class="copyright-bar"> volume - a <a href="https://flintskin.com">Flint Skin</a> Site powered by GeneratePress </div> </div> </footer> </div> <a title="Scroll back to top" aria-label="Scroll back to top" rel="nofollow" href="#" class="generate-back-to-top" data-scroll-speed="400" data-start-scroll="300" role="button"> <span class="gp-icon icon-arrow-up"><svg viewBox="0 0 330 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="M305.863 314.916c0 2.266-1.133 4.815-2.832 6.514l-14.157 14.163c-1.699 1.7-3.964 2.832-6.513 2.832-2.265 0-4.813-1.133-6.512-2.832L164.572 224.276 53.295 335.593c-1.699 1.7-4.247 2.832-6.512 2.832-2.265 0-4.814-1.133-6.513-2.832L26.113 321.43c-1.699-1.7-2.831-4.248-2.831-6.514s1.132-4.816 2.831-6.515L158.06 176.408c1.699-1.7 4.247-2.833 6.512-2.833 2.265 0 4.814 1.133 6.513 2.833L303.03 308.4c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero" /></svg></span> </a> <nav id="generate-slideout-menu" class="main-navigation slideout-navigation" itemtype="https://schema.org/SiteNavigationElement" itemscope> <div class="inside-navigation grid-container grid-parent"> </div><!-- .inside-navigation --> </nav><!-- #site-navigation --> <div class="slideout-overlay"> <button class="slideout-exit has-svg-icon"> <span class="gp-icon pro-close"> <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"> <path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z" /> </svg> </span> <span class="screen-reader-text">Close</span> </button> </div> <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><script id="generate-offside-js-extra"> var offSide = {"side":"left"}; </script> <script src="https://celeroo.com/wp-content/plugins/gp-premium/menu-plus/functions/js/offside.min.js?ver=2.5.0-alpha.1" id="generate-offside-js"></script> <script src="https://celeroo.com/wp-includes/js/dist/hooks.min.js?ver=2810c76e705dd1a53b18" id="wp-hooks-js"></script> <script src="https://celeroo.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script id="wp-i18n-js-after"> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); </script> <script src="https://celeroo.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=5.9.8" id="swv-js"></script> <script id="contact-form-7-js-extra"> var wpcf7 = {"api":{"root":"https:\/\/celeroo.com\/wp-json\/","namespace":"contact-form-7\/v1"},"cached":"1"}; </script> <script src="https://celeroo.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.9.8" id="contact-form-7-js"></script> <!--[if lte IE 11]> <script src="https://celeroo.com/wp-content/themes/generatepress/assets/js/classList.min.js?ver=3.5.1" id="generate-classlist-js"></script> <![endif]--> <script id="generate-menu-js-extra"> var generatepressMenu = {"toggleOpenedSubMenus":"1","openSubMenuLabel":"Open Sub-Menu","closeSubMenuLabel":"Close Sub-Menu"}; </script> <script src="https://celeroo.com/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.5.1" id="generate-menu-js"></script> <script id="generate-navigation-search-js-extra"> var generatepressNavSearch = {"open":"Open Search Bar","close":"Close Search Bar"}; </script> <script src="https://celeroo.com/wp-content/themes/generatepress/assets/js/navigation-search.min.js?ver=3.5.1" id="generate-navigation-search-js"></script> <script id="generate-back-to-top-js-extra"> var generatepressBackToTop = {"smooth":"1"}; </script> <script src="https://celeroo.com/wp-content/themes/generatepress/assets/js/back-to-top.min.js?ver=3.5.1" id="generate-back-to-top-js"></script> </body> </html> <!-- Page cached by LiteSpeed Cache 6.5.2 on 2024-10-20 22:01:15 -->