Membuat Desain Halaman Web Sederhana dengan HTML dan CSS

Pendahuluan

Halo Sobat Pembaca, terima kasih telah mengunjungi artikel kami hari ini yang akan membahas cara membuat desain halaman web sederhana menggunakan HTML dan CSS. Dalam era digital saat ini, memiliki pengetahuan dasar tentang pembuatan halaman web adalah hal yang penting. Baik itu untuk keperluan pribadi maupun profesional, kemampuan untuk membuat desain halaman web akan memberikan Anda keuntungan dalam dunia digital yang terus berkembang.

Dalam artikel ini, kami akan memberikan panduan langkah-demi-langkah tentang cara membuat desain halaman web sederhana dengan HTML dan CSS. Kami akan menjelaskan setiap langkah dengan detail dan memberikan contoh-contoh kode yang mudah diikuti. Jadi, jika Anda tertarik untuk belajar bagaimana membuat halaman web yang menarik dan fungsional, tetaplah bersama kami!

Sebelum kita mulai, pastikan Anda telah menginstal editor teks seperti Sublime Text atau Visual Studio Code. Kemudian, buatlah file HTML baru dengan ekstensi .html. Selain itu, pastikan Anda juga memiliki pemahaman dasar tentang HTML dan CSS sebelum melanjutkan ke langkah-langkah berikutnya.

Siap? Mari kita mulai!

Persiapan

Sebelum kita mulai membuat desain halaman web, hal pertama yang perlu Anda lakukan adalah mempersiapkan struktur dasar HTML. Struktur dasar ini akan menjadi kerangka halaman web Anda dan terdiri dari elemen-elemen dasar seperti , , dan <body>. Berikut adalah contoh struktur dasar HTML:</p> <p><code><!DOCTYPE html><html><head><title>Judul Halaman Web</title></head><body><h1>Selamat Datang di Halaman Web Saya</h1><p>Ini adalah contoh halaman web sederhana.</p></body></html></code></p> <p>Dalam contoh di atas, </p> <h1> adalah judul utama halaman web, sedangkan </p> <p> adalah paragraf yang berisi teks. Anda dapat mengubah teks dalam elemen-elemen ini sesuai dengan kebutuhan Anda.</p> <h2>Tambahkan CSS</h2> <p>Sekarang, kita akan menambahkan CSS untuk mengatur tampilan desain halaman web kita. CSS adalah singkatan dari Cascading Style Sheets dan digunakan untuk mengontrol tampilan elemen-elemen HTML. Berikut adalah contoh kode CSS sederhana yang dapat Anda gunakan:</p> <p><code><style>h1 {color: blue;font-size: 24px;}p {color: green;font-size: 18px;}</style></code></p> <p>Dalam contoh di atas, kita menggunakan selector h1 untuk mengatur warna teks judul utama menjadi biru dan ukuran fontnya menjadi 24px. Selain itu, kita menggunakan selector p untuk mengatur warna teks paragraf menjadi hijau dan ukuran fontnya menjadi 18px. Anda dapat mengubah properti CSS sesuai dengan preferensi desain Anda.</p> <h2>Menambahkan Gambar</h2> <p>Untuk membuat desain halaman web Anda lebih menarik, Anda juga dapat menambahkan gambar. Untuk melakukannya, Anda perlu menambahkan elemen <img> ke dalam file HTML Anda. Berikut adalah contoh kode untuk menambahkan gambar:</p> <p><code><img src="gambar.jpg" alt="Deskripsi Gambar"></code></p> <p>Dalam contoh di atas, kita menggunakan atribut src untuk menentukan lokasi gambar yang ingin ditampilkan, dan atribut alt untuk memberikan deskripsi alternatif tentang gambar tersebut. Pastikan Anda mengganti “gambar.jpg” dengan lokasi dan nama file gambar yang ingin Anda tampilkan.</p> <h2>Menambahkan Link</h2> <p>Selain gambar, Anda juga dapat menambahkan link ke halaman web lain atau ke bagian yang berbeda dalam halaman web yang sama. Untuk melakukannya, Anda perlu menggunakan elemen <a>. Berikut adalah contoh kode untuk menambahkan link:</p> <p><code><a href="https://www.contohlink.com">Teks Link</a></code></p> <p>Dalam contoh di atas, kita menggunakan atribut href untuk menentukan URL tujuan link, dan teks di antara tag <a> adalah teks yang akan ditampilkan sebagai link. Pastikan Anda mengganti “https://www.contohlink.com” dengan URL yang ingin Anda tautkan dan “Teks Link” dengan teks yang ingin Anda tampilkan sebagai link.</p> <h2>Menambahkan Tabel</h2> <p>Jika Anda ingin menampilkan data dalam bentuk tabel, Anda dapat menggunakan elemen </p> <table> dalam HTML. Berikut adalah contoh kode untuk membuat tabel sederhana:</p> <p><code><table><tr><th>Judul Kolom 1</th><th>Judul Kolom 2</th></tr><tr><td>Data Baris 1, Kolom 1</td><td>Data Baris 1, Kolom 2</td></tr><tr><td>Data Baris 2, Kolom 1</td><td>Data Baris 2, Kolom 2</td></tr></table></code></p> <p>Dalam contoh di atas, kita menggunakan elemen </p> <tr> untuk mendefinisikan baris dalam tabel, dan elemen </p> <th> dan </p> <td> untuk mendefinisikan kolom. Pastikan Anda mengganti teks di dalam tag </p> <th> dan </p> <td> sesuai dengan data yang ingin ditampilkan dalam tabel.</p> <h2>Menambahkan Formulir</h2> <p>Jika Anda ingin membuat halaman web dengan formulir untuk mengumpulkan data dari pengguna, Anda dapat menggunakan elemen </p> <form> dalam HTML. Berikut adalah contoh kode untuk membuat formulir sederhana:</p> <p><code><form><label for="nama">Nama:</label><input type="text" id="nama" name="nama"><br><label for="email">Email:</label><input type="email" id="email" name="email"><br><input type="submit" value="Kirim"></form></code></p> <p>Dalam contoh di atas, kita menggunakan elemen <label> untuk memberikan label pada input, elemen <input> untuk mendefinisikan input dari pengguna, dan elemen <br /> untuk membuat baris baru. Pastikan Anda mengganti atribut id, name, dan value sesuai dengan kebutuhan formulir Anda.</p> <h2>Menambahkan Efek Hover</h2> <p>Jika Anda ingin menambahkan efek hover pada elemen-elemen dalam halaman web, Anda dapat menggunakan CSS. Efek hover akan memungkinkan Anda mengubah tampilan elemen saat pengguna mengarahkan kursor ke elemen tersebut. Berikut adalah contoh kode CSS untuk menambahkan efek hover:</p> <p><code><style>h1:hover {color: red;}p:hover {font-weight: bold;}</style></code></p> <p>Dalam contoh di atas, kita menggunakan pseudo-class :hover untuk memilih elemen yang ingin diberikan efek hover. Kemudian, kita menggunakan properti CSS untuk mengubah tampilan elemen saat pengguna mengarahkan kursor ke elemen tersebut. Anda dapat mengubah properti CSS sesuai dengan preferensi desain Anda.</p> <h2>Menambahkan Responsifitas</h2> <p>Membuat desain halaman web yang responsif adalah hal yang penting dalam era mobile saat ini. Responsifitas akan memastikan bahwa halaman web Anda dapat ditampilkan dengan baik di berbagai perangkat, mulai dari desktop hingga smartphone. Untuk membuat desain halaman web responsif, Anda dapat menggunakan media query dalam CSS. Berikut adalah contoh kode CSS untuk membuat desain halaman web responsif:</p> <p><code><style>@media screen and (max-width: 600px) {body {background-color: lightblue;}}</style></code></p> <p>Dalam contoh di atas, kita menggunakan media query untuk mengubah tampilan halaman web saat lebar layar maksimum mencapai 600px. Dalam hal ini, kita mengubah warna latar belakang body menjadi lightblue. Anda dapat mengubah properti CSS sesuai dengan preferensi desain Anda.</p> <h2>Menambahkan Animasi</h2> <p>Jika Anda ingin membuat halaman web Anda lebih menarik dengan animasi, Anda dapat menggunakan CSS dan JavaScript. Dalam contoh ini, kita akan menggunakan CSS untuk membuat animasi sederhana. Berikut adalah contoh kode CSS untuk membuat animasi:</p> <p><code><style>@keyframes example {0% {background-color: red;}50% {background-color: yellow;}100% {background-color: blue;}}div {width: 100px;height: 100px;background-color: red;animation-name: example;animation-duration: 4s;}</style><div></div></code></p> <p>Dalam contoh di atas, kita menggunakan at-rule @keyframes untuk mendefinisikan animasi dengan tiga langkah: dari warna latar belakang merah, ke kuning, ke biru. Kemudian, kita menggunakan properti CSS animation-name dan animation-duration untuk menerapkan animasi pada elemen div. Anda dapat mengubah properti CSS sesuai dengan preferensi desain Anda.</p> <h2>Menambahkan Footer</h2> <p>Terakhir, jangan lupa untuk menambahkan footer pada halaman web Anda. Footer biasanya berisi informasi tambahan seperti hak cipta, tautan ke halaman terkait, atau kontak. Berikut adalah contoh kode HTML untuk menambahkan footer:</p> <p><code><footer><p>Hak Cipta © 2022 Nama Anda. All rights reserved.</p><p>Kunjungi <a href="https://www.contohlink.com">halaman terkait</a> untuk informasi lebih lanjut.</p><p>Hubungi kami di email@example.com atau 123-456-789 untuk pertanyaan atau kerjasama.</p></footer></code></p> <p>Dalam contoh di atas, kita menggunakan elemen </p> <footer> untuk mengelompokkan konten footer, dan elemen </p> <p> dan <a> untuk menambahkan teks dan tautan. Pastikan Anda mengganti teks dan URL tautan sesuai dengan informasi yang ingin Anda sertakan dalam footer.</p> <h2>FAQ (Frequently Asked Questions)</h2> <h3>1. Apa itu HTML?</h3> <p>HTML adalah singkatan dari HyperText Markup Language. HTML adalah bahasa markup standar untuk membuat halaman web dan menentukan struktur dan konten halaman web.</p> <h3>2. Apa itu CSS?</h3> <p>CSS adalah singkatan dari Cascading Style Sheets. CSS digunakan untuk mengontrol tampilan elemen-elemen HTML dan memberikan desain visual pada halaman web.</p> <h3>3. Apa perbedaan antara HTML dan CSS?</h3> <p>HTML digunakan untuk menentukan struktur dan konten halaman web, sedangkan CSS digunakan untuk mengontrol tampilan dan desain visual halaman web.</p> <h3>4. Apakah saya perlu menguasai HTML dan CSS untuk membuat desain halaman web?</h3> <p>Ya, pengetahuan dasar tentang HTML dan CSS sangat diperlukan untuk membuat desain halaman web. Dengan menguasai kedua bahasa ini, Anda akan dapat membuat halaman web yang menarik dan fungsional.</p> <h3>5. Bagaimana cara membuat desain halaman web responsif?</h3> <p>Anda dapat membuat desain halaman web responsif dengan menggunakan media query dalam CSS. Media query memungkinkan Anda mengubah tampilan halaman web berdasarkan lebar layar pengguna.</p> <h3>6. Apakah saya perlu menginstal perangkat lunak khusus untuk membuat desain halaman web?</h3> <p>Anda tidak perlu menginstal perangkat lunak khusus untuk membuat desain halaman web. Anda dapat menggunakan editor teks biasa seperti Sublime Text atau Visual Studio Code.</p> <h3>7. Apakah saya harus menjadi seorang programmer untuk membuat desain halaman web?</h3> <p>Tidak, Anda tidak perlu menjadi seorang programmer untuk membuat desain halaman web. Namun, pengetahuan dasar tentang HTML dan CSS sangat diperlukan.</p> <h3>8. Apakah saya dapat menggunakan template siap pakai untuk desain halaman web saya?</h3> <p>Tentu saja! Jika Anda tidak memiliki keterampilan desain atau waktu untuk membuat desain halaman web dari awal, Anda dapat menggunakan template siap pakai yang dapat Anda temukan secara online.</p> <h3>9. Bagaimana cara memvalidasi kode HTML saya?</h3> <p>Anda dapat menggunakan layanan validasi HTML online seperti W3C Markup Validation Service untuk memvalidasi kode HTML Anda dan memastikan bahwa tidak ada kesalahan atau kesalahan sintaks.</p> <h3>10. Apakah saya perlu menguasai JavaScript untuk membuat desain halaman web?</h3> <p>Tidak, JavaScript tidak diperlukan untuk membuat desain halaman web sederhana dengan HTML dan CSS. Namun, jika Anda ingin menambahkan interaksi atau fitur dinamis ke halaman web Anda, pengetahuan tentang JavaScript akan sangat berguna.</p> <h3>11. Apakah saya dapat menggunakan gambar dan konten dari internet dalam desain halaman web saya?</h3> <p>Anda harus berhati-hati saat menggunakan gambar dan konten dari internet dalam desain halaman web Anda. Pastikan Anda memiliki izin atau lisensi yang sah untuk menggunakan gambar dan konten tersebut.</p> <h3>12. Bagaimana cara membuat desain halaman web yang SEO-friendly?</h3> <p>Untuk membuat desain halaman web yang SEO-friendly, Anda harus memperhatikan faktor-faktor seperti penggunaan tag heading yang tepat, penggunaan meta tag yang relevan, kecepatan loading halaman, dan keberlanjutan konten yang berkualitas.</p> <h3>13. Bagaimana cara memastikan desain halaman web saya kompatibel dengan berbagai</p> </div> <!-- post single content body END --> </article> <div class="single-nav z-depth-1 font-bold clearfix" role="navigation" id="sidebar-anchor-btm"> <nav class="navigation post-navigation" aria-label="Posts"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-links"><div class="nav-previous"><a href="https://learn-css-tutorial.com/html-dan-elemen-multimedia-audio-video-dan-gambar.html" rel="prev"><span class="screen-reader-text">Previous Post</span><span class="silk-blog-nav-icon nav-left-icon"><i class="fa fa-angle-left"></i></span><span class="nav-left-link">HTML dan Elemen Multimedia: Audio, Video, dan Gambar</span></a></div><div class="nav-next"><a href="https://learn-css-tutorial.com/html-dan-url-pentingnya-struktur-url-yang-seo-friendly.html" rel="next"> <span class="screen-reader-text">Next Post</span><span class="nav-right-link">HTML dan URL: Pentingnya Struktur URL yang SEO-Friendly</span><span class="newspaper-nav-icon nav-right-icon"><i class="fa fa-angle-right"></i></span></a></div></div> </nav> </div> <div class="single-box-author card z-depth-1"> <div class="grid-x "> <div class="cell large-6 medium-6 small-24 align-self-middle medium-text-left text-center"> <div class="author-thumb-wrap"> <img alt='' src='https://secure.gravatar.com/avatar/068680470cdfe0f96f886de70b273108?s=200&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/068680470cdfe0f96f886de70b273108?s=400&d=mm&r=g 2x' class='avatar avatar-200 photo' height='200' width='200' decoding='async'/> </div> </div> <div class="cell large-18 medium-18 small-24 align-self-middle medium-text-left text-center card-section"> <div class="author-content-wrap padding-left-lg"> <div class="author-title"> <a href="https://learn-css-tutorial.com/author/fahrajig754" title="FahrajiG754"> <h3>FahrajiG754</h3> </a> </div> <div class="author-description"> </div> <div class="silkblog-author-bttom"> <button class="floating-action raised-button button secondary radius"> <a class="font-bold" href="https://learn-css-tutorial.com/author/fahrajig754" title="FahrajiG754"> View all posts </a> </button> </div> </div> </div> </div> </div> <div class="single-post-box-related"> <div class="block-title"> <h4 class="blog-title">Related Posts</h4> </div> <div class="post-wrap-layout-2 "> <div class="grid-x grid-margin-x "> <div class="cell large-12 medium-12 small-24 "> <div class="card card-blog"> <div class="card-image"> <a class="img-link" href="https://learn-css-tutorial.com/html-dan-optimasi-gambar-meningkatkan-kecepatan-dan-seo.html" title="HTML dan Optimasi Gambar: Meningkatkan Kecepatan dan SEO" rel="nofollow"><span class="thumbnail-resize" ><img width="540" height="370" src="https://learn-css-tutorial.com/wp-content/uploads/2024/02/html-dan-optimasi-gambar-meningkatkan-kecepatan-dan-seo_62-540x370.jpg" class="img wp-post-image" alt="" link_thumbnail="1" decoding="async" srcset="https://learn-css-tutorial.com/wp-content/uploads/2024/02/html-dan-optimasi-gambar-meningkatkan-kecepatan-dan-seo_62-540x370.jpg 540w, https://learn-css-tutorial.com/wp-content/uploads/2024/02/html-dan-optimasi-gambar-meningkatkan-kecepatan-dan-seo_62-400x275.jpg 400w" sizes="(max-width: 540px) 100vw, 540px" /></span></a> </div> <div class="card-content"> <h6 class="category text-info"> <a class="hollow small button secondary radius " href="https://learn-css-tutorial.com/category/uncategorized" alt="View all posts in Uncategorized">Uncategorized</a> </h6> <div class="card-title no-thumb"> <h3 class="post-title is-font-size-4"><a class="post-title-link" href="https://learn-css-tutorial.com/html-dan-optimasi-gambar-meningkatkan-kecepatan-dan-seo.html" rel="bookmark">HTML dan Optimasi Gambar: Meningkatkan Kecepatan dan SEO</a></h3> </div> </div> </div> </div> <div class="cell large-12 medium-12 small-24 "> <div class="card card-blog"> <div class="card-image"> <a class="img-link" href="https://learn-css-tutorial.com/membuat-halaman-tentang-kami-yang-mengesankan-dengan-html.html" title="Membuat Halaman “Tentang Kami” yang Mengesankan dengan HTML" rel="nofollow"><span class="thumbnail-resize" ><img width="540" height="370" src="https://learn-css-tutorial.com/wp-content/uploads/2024/02/membuat-halaman-tentang-kami-yang-mengesankan-dengan-html_61-540x370.jpg" class="img wp-post-image" alt="" link_thumbnail="1" decoding="async" loading="lazy" srcset="https://learn-css-tutorial.com/wp-content/uploads/2024/02/membuat-halaman-tentang-kami-yang-mengesankan-dengan-html_61-540x370.jpg 540w, https://learn-css-tutorial.com/wp-content/uploads/2024/02/membuat-halaman-tentang-kami-yang-mengesankan-dengan-html_61-400x275.jpg 400w" sizes="(max-width: 540px) 100vw, 540px" /></span></a> </div> <div class="card-content"> <h6 class="category text-info"> <a class="hollow small button secondary radius " href="https://learn-css-tutorial.com/category/uncategorized" alt="View all posts in Uncategorized">Uncategorized</a> </h6> <div class="card-title no-thumb"> <h3 class="post-title is-font-size-4"><a class="post-title-link" href="https://learn-css-tutorial.com/membuat-halaman-tentang-kami-yang-mengesankan-dengan-html.html" rel="bookmark">Membuat Halaman “Tentang Kami” yang Mengesankan dengan HTML</a></h3> </div> </div> </div> </div> <div class="cell large-12 medium-12 small-24 "> <div class="card card-blog"> <div class="card-image"> <a class="img-link" href="https://learn-css-tutorial.com/membuat-galeri-gambar-sederhana-dengan-html-dan-css.html" title="Membuat Galeri Gambar Sederhana dengan HTML dan CSS" rel="nofollow"><span class="thumbnail-resize" ><img width="540" height="370" src="https://learn-css-tutorial.com/wp-content/uploads/2024/02/membuat-galeri-gambar-sederhana-dengan-html-dan-css_60-540x370.jpg" class="img wp-post-image" alt="" link_thumbnail="1" decoding="async" loading="lazy" srcset="https://learn-css-tutorial.com/wp-content/uploads/2024/02/membuat-galeri-gambar-sederhana-dengan-html-dan-css_60-540x370.jpg 540w, https://learn-css-tutorial.com/wp-content/uploads/2024/02/membuat-galeri-gambar-sederhana-dengan-html-dan-css_60-400x275.jpg 400w" sizes="(max-width: 540px) 100vw, 540px" /></span></a> </div> <div class="card-content"> <h6 class="category text-info"> <a class="hollow small button secondary radius " href="https://learn-css-tutorial.com/category/uncategorized" alt="View all posts in Uncategorized">Uncategorized</a> </h6> <div class="card-title no-thumb"> <h3 class="post-title is-font-size-4"><a class="post-title-link" href="https://learn-css-tutorial.com/membuat-galeri-gambar-sederhana-dengan-html-dan-css.html" rel="bookmark">Membuat Galeri Gambar Sederhana dengan HTML dan CSS</a></h3> </div> </div> </div> </div> <div class="cell large-12 medium-12 small-24 "> <div class="card card-blog"> <div class="card-image"> <a class="img-link" href="https://learn-css-tutorial.com/belajar-menggunakan-tag-canvas-dalam-html5-untuk-grafis-interaktif.html" title="Belajar Menggunakan Tag Canvas dalam HTML5 untuk Grafis Interaktif" rel="nofollow"><span class="thumbnail-resize" ><img width="540" height="370" src="https://learn-css-tutorial.com/wp-content/uploads/2024/02/belajar-menggunakan-tag-canvas-dalam-html5-untuk-grafis-interaktif_59-540x370.jpg" class="img wp-post-image" alt="" link_thumbnail="1" decoding="async" loading="lazy" srcset="https://learn-css-tutorial.com/wp-content/uploads/2024/02/belajar-menggunakan-tag-canvas-dalam-html5-untuk-grafis-interaktif_59-540x370.jpg 540w, https://learn-css-tutorial.com/wp-content/uploads/2024/02/belajar-menggunakan-tag-canvas-dalam-html5-untuk-grafis-interaktif_59-400x275.jpg 400w" sizes="(max-width: 540px) 100vw, 540px" /></span></a> </div> <div class="card-content"> <h6 class="category text-info"> <a class="hollow small button secondary radius " href="https://learn-css-tutorial.com/category/uncategorized" alt="View all posts in Uncategorized">Uncategorized</a> </h6> <div class="card-title no-thumb"> <h3 class="post-title is-font-size-4"><a class="post-title-link" href="https://learn-css-tutorial.com/belajar-menggunakan-tag-canvas-dalam-html5-untuk-grafis-interaktif.html" rel="bookmark">Belajar Menggunakan Tag Canvas dalam HTML5 untuk Grafis Interaktif</a></h3> </div> </div> </div> </div> </div> </div> </div> </div> <!-- End of the loop. --> <div class="cell small-24 medium-22 large-7"> <div class="sticky sidebar-stic"> <div id="sidebar" class="sidebar-inwrap"> <div class="grid-x grid-margin-x "> <div id="block-2" class="widget widget_block widget_search sidebar-item cell small-24 medium-12 large-24"><div class="widget_wrap "><form role="search" method="get" action="https://learn-css-tutorial.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></div></div><div id="block-3" class="widget widget_block sidebar-item cell small-24 medium-12 large-24"><div class="widget_wrap "> <div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <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://learn-css-tutorial.com/html-dan-optimasi-gambar-meningkatkan-kecepatan-dan-seo.html">HTML dan Optimasi Gambar: Meningkatkan Kecepatan dan SEO</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://learn-css-tutorial.com/membuat-halaman-tentang-kami-yang-mengesankan-dengan-html.html">Membuat Halaman “Tentang Kami” yang Mengesankan dengan HTML</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://learn-css-tutorial.com/membuat-galeri-gambar-sederhana-dengan-html-dan-css.html">Membuat Galeri Gambar Sederhana dengan HTML dan CSS</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://learn-css-tutorial.com/belajar-menggunakan-tag-canvas-dalam-html5-untuk-grafis-interaktif.html">Belajar Menggunakan Tag Canvas dalam HTML5 untuk Grafis Interaktif</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://learn-css-tutorial.com/html-dan-bahasa-menggunakan-tag-lang-dan-alt-untuk-seo.html">HTML dan Bahasa: Menggunakan Tag Lang dan Alt untuk SEO</a></li> </ul></div></div> </div></div> </div> </div> </div> </div> </div> </div> </div> </div><!-- .site-mask --> <footer id="footer" class="footer-wrap"> <div id="footer-copyright" class="footer-copyright-wrap"><div class="grid-container"><div class="callout margin-vertical-0 border-none copy-text"><a target="_blank" href="https://www.silkthemes.com">Theme by Silk Themes</a></div></div></div> <a href="#0" class="scroll_to_top cd-top floating-action button secondary" data-smooth-scroll> <i class="fa fa-angle-up "></i> </a> </footer> </div><!-- #site-wrapper --> <script type="text/javascript" src="https://learn-css-tutorial.com/wp-includes/js/comment-reply.min.js?ver=6.4.3" id="comment-reply-js" async="async" data-wp-strategy="async"></script> </body> </html> <!-- Page cached by LiteSpeed Cache 5.6 on 2024-02-21 05:00:30 -->