Contoh Coding HTML Website

admin 30 April 2023pendidikan60 Views

Apakah kamu ingin membuat website sendiri? Kamu bisa melakukannya dengan mudah dengan menggunakan bahasa pemrograman HTML. Dalam artikel ini, kami akan memberikan contoh coding HTML untuk membuat website yang sederhana. Yuk simak!

Persiapan Sebelum Mulai Coding

Sebelum memulai coding, pastikan kamu sudah memiliki teks editor seperti Notepad++ atau Sublime Text. Selain itu, pastikan juga kamu sudah memiliki gambar atau konten yang ingin kamu tampilkan di website.

Membuat Header

Header merupakan bagian terpenting dari website. Untuk membuat header, kamu bisa menggunakan tag <header>. Isi konten header bisa kamu tulis dalam tag <h1>.

Membuat Menu Navigasi

Menu navigasi adalah bagian dari website yang berisi daftar halaman atau menu yang bisa diklik oleh pengguna. Untuk membuat menu navigasi, kamu bisa menggunakan tag <nav> dan tag <ul> untuk membuat daftar menu. Setiap menu bisa kamu tulis dalam tag <li>.

Membuat Konten Utama

Konten utama adalah bagian dari website yang berisi informasi yang ingin kamu sampaikan kepada pengguna. Untuk membuat konten utama, kamu bisa menggunakan tag <main>. Isi konten bisa kamu tulis dalam tag <p>.

Membuat Sidebar

Sidebar adalah bagian dari website yang berisi informasi tambahan atau menu tambahan. Untuk membuat sidebar, kamu bisa menggunakan tag <aside>. Isi konten sidebar bisa kamu tulis dalam tag <p>.

Membuat Footer

Footer adalah bagian terakhir dari website. Footer berisi informasi tambahan seperti hak cipta dan sitemap. Untuk membuat footer, kamu bisa menggunakan tag <footer>. Isi konten footer bisa kamu tulis dalam tag <p>.

Menggunakan Gambar

Untuk menambahkan gambar ke website, kamu bisa menggunakan tag <img>. Kamu perlu menambahkan atribut src untuk menunjukkan tempat di mana gambar tersebut tersimpan.

Menggunakan Link

Untuk membuat link di website, kamu bisa menggunakan tag <a>. Kamu perlu menambahkan atribut href untuk menunjukkan halaman yang ingin kamu tuju.

Menggunakan CSS

CSS adalah bahasa pemrograman yang digunakan untuk mengatur tampilan website. Untuk menggunakan CSS, kamu perlu menambahkan tag <style> di dalam tag <head>.

Menggunakan Font Google

Google menyediakan banyak pilihan font yang bisa kamu gunakan di website. Untuk menggunakan font Google, kamu perlu menambahkan tag <link> di dalam tag <head>.

Menggunakan Responsive Design

Responsive design adalah teknik yang digunakan untuk membuat website yang dapat menyesuaikan ukuran layar pengguna. Untuk menggunakan responsive design, kamu perlu menambahkan tag <meta> di dalam tag <head>.

Contoh Coding HTML Website Sederhana

Berikut adalah contoh coding HTML untuk membuat website sederhana:

<html>
<head><title>Judul Website</title><link rel="stylesheet" href="style.css"><link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap" rel="stylesheet"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body><header><h1>Judul Header</h1></header><nav><ul><li><a href="#">Menu 1</a></li><li><a href="#">Menu 2</a></li><li><a href="#">Menu 3</a></li></ul></nav><main><p>Konten utama website.</p><img src="gambar.jpg" alt="Gambar"><p>Isi konten tambahan.</p><a href="#">Link menuju halaman lain.</a></main><aside><p>Sidebar website.</p></aside><footer><p>Hak cipta © 2021 Judul Website</p></footer>
</body>
</html>

Kesimpulan

Dalam membuat website, kamu bisa menggunakan bahasa pemrograman HTML. Dalam artikel ini, kami telah memberikan contoh coding HTML untuk membuat website sederhana. Semoga bermanfaat!