{"id":49311,"date":"2024-08-29T08:09:00","date_gmt":"2024-08-29T01:09:00","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=49311"},"modified":"2024-08-30T16:25:33","modified_gmt":"2024-08-30T09:25:33","slug":"belajar-html-part-4","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-html-part-4\/","title":{"rendered":"Belajar HTML Part 4: Membuat List dan Hyperlink"},"content":{"rendered":"\n<p>Setelah belajar <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-html-part-3\/\" target=\"_blank\" rel=\"noopener\" title=\"\">membuat form HTML<\/a> di sesi sebelumnya, pada series belajar HTML bagian 4 ini, kami akan membahas cara membuat list dan <em>hyperlink <\/em>dengan kode HTML dasar. <\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Membuat List<\/h2>\n\n\n\n<p>Series belajar HTML bagian 4 ini akan kami awali dengan belajar membuat list. List atau yang kita kenal sebagai daftar berurutan, adalah salah satu fungsi pada HTML yang digunakan untuk menampilkan data berurutan kebawah. <\/p>\n\n\n\n<p>List pada HTML biasanya dibuat menggunakan bullet\/numbering untuk menyajikan informasi atau data dalam bentuk yang terstruktur dan mudah dibaca.<\/p>\n\n\n\n<p>Pada HTML terdapat dua jenis type list, yaitu Ordered List dan Unordered List. Seperti contoh dibawah ini:<\/p>\n\n\n\n<p>Unordered HTML List<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First item<\/li>\n\n\n\n<li>Second item<\/li>\n\n\n\n<li>Third item<\/li>\n\n\n\n<li>Fourth item<\/li>\n<\/ul>\n\n\n\n<p>Ordered HTML list<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>First item<\/li>\n\n\n\n<li>Second item<\/li>\n\n\n\n<li>Third item<\/li>\n\n\n\n<li>Fourth item<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Unordered HTML List<\/strong><\/h3>\n\n\n\n<p>Berfungsi untuk menampilkan list data berupa poin-poin atau bulatan hitam kecil didepan data. Unordered list dimulai dengan tag &lt;ul&gt;, dan setiap item dimulai dengan tag &lt;li&gt;. Untuk lebih mudah memahami, perhatikan contoh berikut ini:<\/p>\n\n\n\n<p>Contoh kode tag <em>unordered <\/em>HTML list sebagai berikut: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;body&gt;\n\n&lt;h2&gt;Tag Unordered HTML List&lt;\/h2&gt;\n&lt;p&gt;Paket Shared Hosting di Rumahweb&lt;p&gt;\n\n&lt;ul&gt;\n  &lt;li&gt;Unlimited S&lt;\/li&gt;\n  &lt;li&gt;Unlimited M&lt;\/li&gt;\n  &lt;li&gt;Unlimited L&lt;\/li&gt;\n&lt;\/ul&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-Unordered-HTML-List-Journal-Rumahweb.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"715\" height=\"221\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-Unordered-HTML-List-Journal-Rumahweb.jpg\" alt=\"Tag Unordered HTML List Journal Rumahweb - belajar html\" class=\"wp-image-49319\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-Unordered-HTML-List-Journal-Rumahweb.jpg 715w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-Unordered-HTML-List-Journal-Rumahweb-300x93.jpg 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-Unordered-HTML-List-Journal-Rumahweb-370x114.jpg 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-Unordered-HTML-List-Journal-Rumahweb-270x83.jpg 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-Unordered-HTML-List-Journal-Rumahweb-570x176.jpg 570w\" sizes=\"auto, (max-width: 715px) 100vw, 715px\" \/><\/a><figcaption class=\"wp-element-caption\">Tag Unordered HTML List<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Ordered HTML list<\/h3>\n\n\n\n<p>Berfungsi untuk menampilkan list data berupa huruf atau angka didepan data. Ordered HTML list dimulai dengan tag &lt;ol&gt;, dan setiap item dimulai dengan tag &lt;li&gt;. Untuk lebih mudah memahami, perhatikan contoh berikut ini:<\/p>\n\n\n\n<p>Contoh kode tag ordered HTML list sebagai berikut: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;body&gt;\n\n&lt;h2&gt;Tag Ordered HTML List&lt;\/h2&gt;\n&lt;p&gt;Paket Shared Hosting di Rumahweb&lt;p&gt;\n\n&lt;ol&gt;\n  &lt;li&gt;Unlimited S&lt;\/li&gt;\n  &lt;li&gt;Unlimited M&lt;\/li&gt;\n  &lt;li&gt;Unlimited L&lt;\/li&gt;\n&lt;\/ol&gt;  \n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-Ordered-HTML-List-Journal-Rumahweb.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"731\" height=\"226\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-Ordered-HTML-List-Journal-Rumahweb.jpg\" alt=\"Tag Ordered HTML List Journal Rumahweb - belajar html\" class=\"wp-image-49333\" style=\"width:650px;height:auto\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-Ordered-HTML-List-Journal-Rumahweb.jpg 731w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-Ordered-HTML-List-Journal-Rumahweb-300x93.jpg 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-Ordered-HTML-List-Journal-Rumahweb-370x114.jpg 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-Ordered-HTML-List-Journal-Rumahweb-270x83.jpg 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-Ordered-HTML-List-Journal-Rumahweb-570x176.jpg 570w\" sizes=\"auto, (max-width: 731px) 100vw, 731px\" \/><\/a><figcaption class=\"wp-element-caption\">Tag Ordered HTML List<\/figcaption><\/figure>\n\n\n\n<p>Dengan contoh diatas, kita bisa dengan mudah membedakan masing-masing penggunaan list pada HTML.<\/p>\n\n\n\n<p>Apakah hanya dua list seperti diatas didalam HTML? Tentu tidak, ada beberapa list lain dengan fungsi bermacam-macam. Kami akan melanjutkan pembahasanya.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">HTML Description Lists<\/h3>\n\n\n\n<p>Description List digunakan untuk menambahkan deskripsi didalam masing-masing item. Tag yang digunakan &lt;dl&gt; untuk mendefinisikan list, tag &lt;dt&gt;mendefinisikan nama, dan tag &lt;dd&gt; mendeskripsikan setiap nama.<\/p>\n\n\n\n<p>Agar lebih mudah dipahami, lihat contoh berikut ini:<\/p>\n\n\n\n<p>Tag HTML Description List<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;body&gt;\n\n&lt;h2&gt;Tag HTML Description List&lt;\/h2&gt;\n&lt;p&gt;Layanan Shared Hosting di Rumahweb&lt;\/p&gt;\n\n&lt;dl&gt;\n  &lt;dt&gt;Unlimited S&lt;\/dt&gt;\n  &lt;dd&gt;- Rp17.900\/bln&lt;\/dd&gt;\n  &lt;dt&gt;Unlimited M&lt;\/dt&gt;\n  &lt;dd&gt;- Rp29.900\/bln&lt;\/dd&gt;\n  &lt;dt&gt;Unlimited L&lt;\/dt&gt;\n  &lt;dd&gt;- Rp49.900\/bln&lt;\/dd&gt;\n&lt;\/dl&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-HTML-Description-List-Journal-Rumahweb.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"791\" height=\"276\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-HTML-Description-List-Journal-Rumahweb.jpg\" alt=\"Tag HTML Description List Journal Rumahweb\" class=\"wp-image-49334\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-HTML-Description-List-Journal-Rumahweb.jpg 791w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-HTML-Description-List-Journal-Rumahweb-300x105.jpg 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-HTML-Description-List-Journal-Rumahweb-768x268.jpg 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-HTML-Description-List-Journal-Rumahweb-370x129.jpg 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-HTML-Description-List-Journal-Rumahweb-270x94.jpg 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-HTML-Description-List-Journal-Rumahweb-570x199.jpg 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Tag-HTML-Description-List-Journal-Rumahweb-740x258.jpg 740w\" sizes=\"auto, (max-width: 791px) 100vw, 791px\" \/><\/a><figcaption class=\"wp-element-caption\">Tag HTML Description List<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Menambahkan CSS dalam HTML List<\/h2>\n\n\n\n<p>Kita bisa menambahkan CSS dalam List HTML, untuk mengubah jenis bullet, warna, dan ukuran font.<\/p>\n\n\n\n<p>Contoh lengkapnya:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;title&gt;Contoh List&lt;\/title&gt;\n  &lt;style&gt;\n \n     ul {\n      list-style: none;\n      padding-left: 0;\n    }\n    ul li::before {\n  content: \"\";\n  display: inline-block;\n  width: 10px;\n  height: 10px;\n  background-color: red;\n  margin-right: 5px;\n    }\n \n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h2&gt;Sebelum Membuat Website&lt;\/h2&gt;\n  &lt;ul&gt;\n    &lt;li&gt;Domain&lt;\/li&gt;\n    &lt;li&gt;Hosting&lt;\/li&gt;\n    &lt;li&gt;Template&lt;\/li&gt;\n  &lt;\/ul&gt;\n\n  &lt;h2&gt;Langkah-langkah Membuat Website&lt;\/h2&gt;\n  &lt;ol&gt;\n    &lt;li&gt;Memesan Domain &amp; Hosting&lt;\/li&gt;\n    &lt;li&gt;Install WordPress&lt;\/li&gt;\n    &lt;li&gt;Klaim Bonus free Theme &amp; Plugins Premium&lt;\/li&gt;\n    &lt;li&gt;Desain&lt;\/li&gt;\n  &lt;\/ol&gt;\n\n  &lt;h2&gt;Layanan Shared Hosting di Rumahweb&lt;\/h2&gt;\n&lt;dl&gt;\n  &lt;dt&gt;Unlimited S&lt;\/dt&gt;\n  &lt;dd&gt;- Rp17.900\/bln&lt;\/dd&gt;\n  &lt;dt&gt;Unlimited M&lt;\/dt&gt;\n  &lt;dd&gt;- Rp29.900\/bln&lt;\/dd&gt;\n  &lt;dt&gt;Unlimited L&lt;\/dt&gt;\n  &lt;dd&gt;- Rp49.900\/bln&lt;\/dd&gt;\n&lt;\/dl&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Menambahkan-CSS-dalam-HTML-List-Journal-Rumahweb.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"927\" height=\"515\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Menambahkan-CSS-dalam-HTML-List-Journal-Rumahweb.jpg\" alt=\"Menambahkan CSS dalam HTML List Journal Rumahweb\" class=\"wp-image-49335\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Menambahkan-CSS-dalam-HTML-List-Journal-Rumahweb.jpg 927w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Menambahkan-CSS-dalam-HTML-List-Journal-Rumahweb-300x167.jpg 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Menambahkan-CSS-dalam-HTML-List-Journal-Rumahweb-768x427.jpg 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Menambahkan-CSS-dalam-HTML-List-Journal-Rumahweb-370x206.jpg 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Menambahkan-CSS-dalam-HTML-List-Journal-Rumahweb-270x150.jpg 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Menambahkan-CSS-dalam-HTML-List-Journal-Rumahweb-570x317.jpg 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Menambahkan-CSS-dalam-HTML-List-Journal-Rumahweb-740x411.jpg 740w\" sizes=\"auto, (max-width: 927px) 100vw, 927px\" \/><\/a><figcaption class=\"wp-element-caption\">contoh menambahkan CSS dalam HTML List<\/figcaption><\/figure>\n\n\n\n<p>Selanjutnya, kami akan membahas tentang hyperlink dalam HTML. Anda dapat menambahkan hyperlink ke dalam daftar yang telah dibuat sebelumnya. Namun, sebelum itu, kami akan menjelaskan apa itu hyperlink dalam seri belajar HTML bagian 4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu <em>Hyperlink<\/em>?<\/h2>\n\n\n\n<p><em><a href=\"https:\/\/blog.rumahweb.com\/hyperlink-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"hyperlink adalah\">Hyperlink<\/a> <\/em>atau yang disebut HTML link adalah fungsi yang digunakan untuk mengarahkan sebuah teks\/gambar menuju dokumen lain. Misalnya, dalam situs www.rumahweb.com ketika kita klik menu &#8216;Domain&#8217;, kita akan diarahkan ke halaman Domain.<\/p>\n\n\n\n<p>Hyperlink ditulis dengan tag &lt;a&gt; atau yang kenal sebagai anchor (jangkar). Tag &lt;a&gt; selalu diikuti oleh atribut href, di mana dalam href (<em>hypertext reference<\/em>) kita akan mengisikan alamat yang akan dituju ketika teks\/gambar di klik. Berikut penulisan tag secara lengkap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href\"#\"&gt; teks atau gambar &lt;\/a&gt;;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/www.rumahweb.com\"&gt;Klik Disini&lt;\/a&gt; Untuk menuju ke situs Rumahweb.com<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Pengertian-Hyperlink-Journal-Rumahweb.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"753\" height=\"98\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Pengertian-Hyperlink-Journal-Rumahweb.jpg\" alt=\"Pengertian Hyperlink Journal Rumahweb\" class=\"wp-image-49369\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Pengertian-Hyperlink-Journal-Rumahweb.jpg 753w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Pengertian-Hyperlink-Journal-Rumahweb-300x39.jpg 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Pengertian-Hyperlink-Journal-Rumahweb-370x48.jpg 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Pengertian-Hyperlink-Journal-Rumahweb-270x35.jpg 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Pengertian-Hyperlink-Journal-Rumahweb-570x74.jpg 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Pengertian-Hyperlink-Journal-Rumahweb-740x96.jpg 740w\" sizes=\"auto, (max-width: 753px) 100vw, 753px\" \/><\/a><figcaption class=\"wp-element-caption\">Contoh hyperlink<\/figcaption><\/figure>\n\n\n\n<p>Secara default, link akan muncul sebagai berikut di semua <em>browser<\/em>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Link yang belum dikunjungi diberi garis bawah berwarna biru<\/li>\n\n\n\n<li>Link yang telah dikunjungi diberi garis bawah berwarna ungu<\/li>\n\n\n\n<li>Yang terakhir, link yang aktif diberi garis bawah berwarna merah<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Jenis Hyperlink pada HTML<\/h2>\n\n\n\n<p>Ada dua jenis <em>hyperlink <\/em>pada HTML, yaitu <em>Absolute <\/em>URL dan <em>Relative <\/em>URL. Berikut penjelasan selengkapnya:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><em>Absolute <\/em>URL<\/h3>\n\n\n\n<p>Yaitu penulisan alamat link yang dituju secara lengkap (menyertakan nama website lengkap <code>https:\/\/rumahweb.com\/<\/code>) di dalam attribut href. Sebagai contoh:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2&gt;Absolute URL&lt;\/h2&gt;\n&lt;p&gt;&lt;a href=\"https:\/\/www.rumahweb.com\/\"&gt;Rumahweb.com&lt;\/a&gt;&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><em>Relative <\/em>URL<\/h3>\n\n\n\n<p>Yaitu penulisan alamat link yang dituju tidak perlu lengkap. Jika berada di folder yang sama cukup ditulis nama file, contohnya:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;&lt;a href=\"info.php\"&gt;Melihat PHPinfo&lt;\/a&gt;&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>Ketika kita klik &#8220;Melihat PHPinfo&#8221;, kita akan menuju ke halaman \/info.php pada domain utamanya. Sedangkan jika ingin menuju ke file yang berada didalam folder, kita tulis nama folder\/namafile. Sebagai contoh:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;&lt;a href=\"folder\/info.php\"&gt;Melihat PHPinfo&lt;\/a&gt;&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>Ketika kita klik &#8220;Melihat PHPinfo&#8221;, kita akan menuju ke https:\/\/www.namadomain.com\/folder\/info.php<\/p>\n\n\n\n<p>Cukup mudah bukan belajar Hyperlink pada HTML? Selanjutnya, kita akan menambahkan <em>attribut <\/em>target pada <em>hyperlink<\/em>. Berikut beberapa <em>attribut <\/em>yang dapat digunakan.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>_self &#8211; Default. Membuka dokumen di jendela\/tab yang sama dengan saat diklik<\/li>\n\n\n\n<li>_blank &#8211; Membuka dokumen di jendela atau tab baru<\/li>\n\n\n\n<li>_parent &#8211; Membuka dokumen di bingkai induk<\/li>\n\n\n\n<li>_top &#8211; Membuka dokumen di seluruh badan jendela<\/li>\n<\/ul>\n\n\n\n<p>Berikut contoh penerapannya:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/www.rumahweb.com\/\" target=\"_blank\"&gt;Rumahweb.com&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Hyperlink menggunakan gambar<\/h3>\n\n\n\n<p>Selain membuat hyperlink dari teks, kita juga bisa membuat <em>hyperlink <\/em>dari gambar dengan style. Sebagai contoh:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/rumahweb.com\"&gt;\n&lt;img src=\"https:\/\/img.rwbcdn.net\/logo\/logo-rumahweb_900x178.png\" alt=\"Rumahweb Indonesia\" style=\"width:320px;height:auto;\"&gt;\n&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Contoh-Hyperlink-menggunakan-gambar-Journal-Rumahweb.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"953\" height=\"366\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Contoh-Hyperlink-menggunakan-gambar-Journal-Rumahweb.jpg\" alt=\"Contoh Hyperlink menggunakan gambar Journal Rumahweb\" class=\"wp-image-49370\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Contoh-Hyperlink-menggunakan-gambar-Journal-Rumahweb.jpg 953w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Contoh-Hyperlink-menggunakan-gambar-Journal-Rumahweb-300x115.jpg 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Contoh-Hyperlink-menggunakan-gambar-Journal-Rumahweb-768x295.jpg 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Contoh-Hyperlink-menggunakan-gambar-Journal-Rumahweb-370x142.jpg 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Contoh-Hyperlink-menggunakan-gambar-Journal-Rumahweb-270x104.jpg 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Contoh-Hyperlink-menggunakan-gambar-Journal-Rumahweb-570x219.jpg 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/Contoh-Hyperlink-menggunakan-gambar-Journal-Rumahweb-740x284.jpg 740w\" sizes=\"auto, (max-width: 953px) 100vw, 953px\" \/><\/a><figcaption class=\"wp-element-caption\">contoh hyperlink menggunakan gambar<\/figcaption><\/figure>\n\n\n\n<p><strong>Keterangan<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>a href<\/strong>: adalah tag hyperlink<\/li>\n\n\n\n<li><strong>img src<\/strong>: tag untuk memanggil sumber berupa gambar<\/li>\n\n\n\n<li><strong>alt<\/strong>: digunakan memberikan deskripsi teks alternatif, ketika gambar tidak bisa dimuat.<\/li>\n\n\n\n<li><strong>style<\/strong>: tag untuk menambah style gambar<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Kesimpulan<\/h2>\n\n\n\n<p>List adalah elemen pada HTML yang sangat berguna bagi kita untuk menyajikan informasi atau data dalam bentuk yang terstruktur dan mudah dibaca. Sedangkan hyperlink berfungsi untuk memberikan tautan pada text atau gambar, agar ketika diakses mengarah ke URL yang dituju.<\/p>\n\n\n\n<p>Dengan memahami cara membuat list dan hyperlink, kita akan dapat membuat halaman web yang lebih informatif dan menarik.<\/p>\n\n\n\n<p>Demikian tadi series belajar HTML bagian ke 4 yang membahas tentang list dan hyperlink. Simak terus series belajar HTML selanjutnya yang segera kami terbitkan. Semoga bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Setelah belajar membuat form HTML di sesi sebelumnya, pada series belajar HTML bagian 4 ini, kami akan membahas cara membuat list dan hyperlink dengan kode HTML dasar. Membuat List Series belajar HTML bagian 4 ini akan kami awali dengan belajar membuat list. List atau yang kita kenal sebagai daftar berurutan, adalah salah satu fungsi pada [&hellip;]<\/p>\n","protected":false},"author":321,"featured_media":49620,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[1697,56,2278],"class_list":{"0":"post-49311","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-programming","8":"tag-belajar-html","9":"tag-html","10":"tag-html-dasar"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/49311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/321"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=49311"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/49311\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/49620"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=49311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=49311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=49311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}