Tutorial HTML 16 : Cara Membuat Website Sederhana
Java Script java HTML Python css

Tutorial HTML 16 : Cara Membuat Website Sederhana
Admin
Admin
ID • 1 year ago • 15 min read • 3382 views
Tutorial HTML 16 : Cara Membuat Website Sederhana

Tutorial HTML 16 : Cara Membuat Website Sederhana

id • 15 min read • 3382 views

Tutorial HTML 16 : Cara Membuat Website Sederhana

Di era digital saat ini, kemampuan untuk membuat dan mengelola website menjadi keterampilan yang sangat berharga. Memiliki pengetahuan dasar tentang HTML (HyperText Markup Language) dapat membuka banyak peluang, baik dalam karier profesional maupun hobi pribadi. HTML adalah bahasa dasar yang digunakan untuk membuat struktur dan konten sebuah halaman web. Dalam artikel ini, kita akan membahas cara membuat web sederhana dengan HTML, mulai dari struktur dasar hingga elemen-elemen penting yang diperlukan untuk membangun halaman web yang fungsional dan menarik. Artikel ini dirancang untuk pemula yang ingin memahami dasar-dasar HTML dan memulai perjalanan mereka dalam dunia web development.

Table of Contents

1.Membuat Struktur Dasar HTML

Penjelasan tentang Struktur Dasar Dokumen HTML

HTML (HyperText Markup Language) merupakan bahasa markah standar yang digunakan untuk membuat dan menyusun halaman web. Setiap halaman HTML terdiri dari elemen-elemen yang mendefinisikan berbagai bagian dari halaman tersebut, seperti judul, paragraf, gambar, dan tautan. Struktur dasar dari dokumen HTML membantu browser memahami dan menampilkan konten dengan benar.

Contoh Kode HTML Dasar

Berikut adalah contoh kode HTML dasar:

 

```html
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Web Sederhana</title>
</head>
<body>
    <h1>Selamat Datang di Halaman Web Sederhana</h1>
    <p>Ini adalah paragraf pertama di halaman web Anda.</p>
</body>
</html>
```

 

Penjelasan tentang Elemen-elemen HTML

  • `<!DOCTYPE html>`: Deklarasi doctype ini digunakan untuk memberi tahu browser bahwa dokumen ini adalah dokumen HTML5. Deklarasi tersebut harus diposisikan di baris pertama dokumen HTML.
  • `<html lang="id">`: Elemen `<html>` adalah elemen root dari dokumen HTML. Atribut `lang` digunakan untuk mendefinisikan bahasa utama dokumen, dalam hal ini bahasa Indonesia (`id`).
  • `<head>`: Bagian `<head>` berisi meta-informasi tentang dokumen, seperti judul dokumen, charset, dan pengaturan tampilan responsif.
  • `<meta charset="UTF-8">`: Elemen ini mendefinisikan set karakter yang digunakan dalam dokumen. UTF-8 adalah set karakter yang mendukung hampir semua karakter yang digunakan di seluruh dunia.
  • `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: Elemen ini mengatur viewport agar sesuai dengan lebar perangkat dan skala awal 1.0, memastikan tampilan responsif pada perangkat seluler.
  • `<title>Halaman Web Sederhana</title>`: Elemen `<title>` menetapkan judul dokumen yang akan ditampilkan di tab browser.
  • `<body>`: Bagian `<body>` berisi semua konten yang akan ditampilkan di halaman web, seperti teks, gambar, video, dan elemen interaktif lainnya.
  • `<h1>Selamat Datang di Halaman Web Sederhana</h1>`: Elemen `<h1>` adalah heading utama di halaman. Heading memberikan struktur dan hierarki konten.
  • `<p>Ini adalah paragraf pertama di halaman web Anda.</p>`: Elemen `<p>` digunakan untuk membuat paragraf teks.

Dengan memahami struktur dasar HTML ini, Anda dapat mulai membuat dan menyusun halaman web sederhana. Selanjutnya, Anda dapat memperluas keterampilan Anda dengan menambahkan lebih banyak elemen dan gaya untuk membuat halaman web yang lebih kompleks dan menarik.

 

Baca Juga

 

2.Membuat Header dan Footer

Pentingnya Header dan Footer dalam Sebuah Website

Header dan footer adalah komponen penting dari sebuah website karena mereka menyediakan navigasi dan informasi konsisten yang muncul di seluruh halaman. Header biasanya berisi logo, judul situs, dan menu navigasi utama, sedangkan footer sering kali menyertakan informasi tambahan seperti kontak, hak cipta, dan tautan ke kebijakan privasi atau halaman penting lainnya. Dengan menggunakan header dan footer, pengguna dapat dengan mudah mengakses bagian utama dari website, menciptakan pengalaman pengguna yang lebih baik dan navigasi yang lebih intuitif.

Contoh Kode untuk Membuat Header dan Footer

Berikut adalah contoh kode HTML untuk membuat header dan footer sederhana:

 

```html
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website dengan Header dan Footer</title>
    <style>
        header, footer {
            background-color: #f8f9fa;
            padding: 20px;
            text-align: center;
        }
        nav ul {
            list-style-type: none;
            padding: 0;
        }
        nav ul li {
            display: inline;
            margin: 0 10px;
        }
        nav ul li a {
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>
    <header>
        <h1>Nama Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Beranda</a></li>
                <li><a href="#about">Tentang</a></li>
                <li><a href="#services">Layanan</a></li>
                <li><a href="#contact">Kontak</a></li>
            </ul>
        </nav>
    </header>


    <main>
        <h2>Selamat Datang!</h2>
        <p>Ini adalah contoh konten utama dari halaman web Anda.</p>
    </main>


    <footer>
        <p>&copy; 2024 Nama Website. Semua hak cipta dilindungi.</p>
        <p><a href="#privacy">Kebijakan Privasi</a> | <a href="#terms">Syarat dan Ketentuan</a></p>
    </footer>
</body>
</html>
```

 

Penjelasan tentang Elemen-elemen HTML

  • `<header>`: Elemen `<header>` digunakan untuk mendefinisikan bagian header dari sebuah dokumen atau bagian dari dokumen. Ini biasanya berisi elemen-elemen seperti logo, judul, dan menu navigasi.
  • `<footer>`: Elemen `<footer>` digunakan untuk mendefinisikan bagian footer dari sebuah dokumen atau bagian dari dokumen. Ini biasanya berisi informasi tambahan seperti hak cipta, tautan ke halaman penting, dan kontak.
  • `<nav>`: Elemen `<nav>` digunakan untuk mendefinisikan blok navigasi. Ini biasanya berisi daftar tautan yang mengarahkan pengguna ke bagian-bagian berbeda dari situs web.
  • `<ul>` dan `<li>`: Elemen `<ul>` (unordered list) dan `<li>` (list item) digunakan untuk membuat daftar item. Dalam konteks navigasi, daftar ini sering digunakan untuk menyusun tautan menu.
  • `<main>`: Elemen `<main>` digunakan untuk mendefinisikan konten utama dari dokumen. Ada baiknya hanya ada satu elemen `<main>` di setiap dokumen HTML, dan elemen ini tidak boleh bersarang di dalam elemen lain seperti `<article>`, `<aside>`, `<footer>`, atau `<header>`.

Dengan menggunakan elemen-elemen ini, Anda dapat membuat header dan footer yang terstruktur dengan baik, sehingga memudahkan navigasi dan meningkatkan pengalaman pengguna di website Anda.

 

3.Menambahkan Konten ke Halaman Web

Membuat Judul dan Paragraf

Untuk membuat judul dan paragraf dalam halaman web, Anda dapat menggunakan elemen `<h1>` hingga `<h6>` untuk judul dengan tingkat kepentingan yang berbeda, dan elemen `<p>` untuk paragraf teks.

Contoh Kode:

 

```html
<h1>Judul Utama</h1>
<p>Ini adalah paragraf pertama.</p>
```

 

Penjelasan:

  • `<h1>`: Digunakan untuk judul utama atau heading level 1.
  • `<p>`: Digunakan untuk menampilkan paragraf teks.

 

Menambahkan Gambar dan Media Lainnya

Anda dapat menambahkan gambar dan media lainnya menggunakan elemen `<img>` untuk gambar dan elemen `<video>` untuk video.

Contoh Kode:

 

```html
<img src="gambar.jpg" alt="Deskripsi Gambar">
<video src="video.mp4" controls>
    Video tidak didukung.
</video>
```

 

Penjelasan:

  • `<img>`: Digunakan untuk menampilkan gambar. Atribut `src` adalah URL gambar, dan atribut `alt` adalah deskripsi gambar yang akan ditampilkan jika gambar tidak dapat dimuat.
  • `<video>`: Digunakan untuk menampilkan video. Atribut `src` adalah URL video, dan atribut `controls` menampilkan kontrol pemutaran video.

 

Membuat Daftar (Ordered List dan Unordered List)

Anda dapat membuat daftar terurut (ordered list) dan daftar tidak terurut (unordered list) menggunakan elemen `<ol>` untuk daftar terurut dan `<ul>` untuk daftar tidak terurut. Setiap item dalam daftar ditandai dengan elemen `<li>`.

Contoh Kode:

 

```html
<h2>Daftar Terurut</h2>
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>


<h2>Daftar Tidak Terurut</h2>
<ul>
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ul>
```

 

Penjelasan:

  • `<ol>`: Digunakan untuk membuat daftar terurut.
  • `<ul>`: Digunakan untuk membuat daftar tidak terurut.
  • `<li>`: Digunakan untuk setiap item dalam daftar.

Dengan menggunakan elemen-elemen tersebut, Anda dapat menambahkan berbagai jenis konten ke halaman web Anda, termasuk teks, gambar, video, dan daftar, untuk membuatnya lebih interaktif dan informatif.

 

4.Mengatur Tata Letak dengan CSS Sederhana

Pengenalan Singkat tentang CSS

CSS (Cascading Style Sheets) merupakan bahasa yang digunakan untuk mengatur tampilan dan gaya halaman web. Dengan menggunakan CSS, Anda dapat mengontrol warna, font, ukuran, tata letak, dan berbagai aspek lain dari elemen HTML di halaman web Anda.

 

Menyisipkan CSS ke dalam HTML

Anda dapat menyisipkan CSS ke dalam dokumen HTML Anda dengan menggunakan tag `<style>` di dalam elemen `<head>`. Anda juga dapat menyimpan kode CSS dalam file terpisah dan menyambungkannya ke dalam dokumen HTML menggunakan tag `<link>`.

Contoh Kode:

 

```html
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman dengan CSS Sederhana</title>
    <style>
        /* Kode CSS disini */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            color: #333;
            margin: 0;
            padding: 0;
        }
        h1 {
            color: #007bff;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Halaman dengan CSS Sederhana</h1>
        <p>Ini adalah contoh teks dalam halaman web dengan tata letak yang disesuaikan menggunakan CSS.</p>
    </div>
</body>
</html>
```

 

Penjelasan:

  • `body`: Menetapkan gaya untuk seluruh halaman web, termasuk font, warna latar belakang, dan warna teks.
  • `h1`: Menetapkan warna teks untuk judul h1.
  • `.container`: Menetapkan tata letak untuk elemen dengan kelas "container", termasuk lebar maksimum, penempatan di tengah, dan padding.

Contoh Sederhana untuk Mengatur Warna, Font, dan Tata Letak Dasar

Dalam contoh di atas, kami menetapkan warna teks, font, dan tata letak dasar untuk halaman web. Anda dapat menyesuaikan properti-properti CSS ini sesuai kebutuhan Anda untuk menciptakan tampilan yang diinginkan untuk halaman web Anda. Dengan memahami konsep dasar CSS ini, Anda dapat membuat tata letak yang menarik dan sesuai dengan kebutuhan desain Anda.

 

5.Membuat Formulir Kontak

Pentingnya Formulir Kontak

Formulir kontak adalah elemen penting dalam sebuah website karena memberikan cara bagi pengguna untuk berinteraksi dengan pemilik website. Melalui formulir kontak, pengguna dapat mengirim pesan, pertanyaan, atau umpan balik kepada pemilik website dengan mudah. Ini membuka jalur komunikasi yang penting dan dapat meningkatkan keterlibatan pengguna dengan website.

 

Contoh Kode untuk Membuat Formulir Kontak

Berikut adalah contoh kode HTML untuk membuat formulir kontak sederhana:

 

```html
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulir Kontak</title>
</head>
<body>
    <h1>Hubungi Kami</h1>
    <form action="proses_formulir.php" method="post">
        <label for="nama">Nama:</label>
        <input type="text" id="nama" name="nama" required><br><br>
       
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>
       
        <label for="pesan">Pesan:</label><br>
        <textarea id="pesan" name="pesan" rows="4" cols="50" required></textarea><br><br>
      
        <input type="submit" value="Kirim Pesan">
    </form>
</body>
</html>
```

 

Penjelasan tentang Elemen-elemen Form

  • `<form>`: Elemen `<form>` digunakan untuk membuat formulir. Atribut `action` menentukan URL tempat data formulir akan dikirim, dan atribut `method` menentukan metode pengiriman data (biasanya "post" atau "get").
  • `<input>`: Elemen `<input>` digunakan untuk membuat kotak input. Atribut `type` menentukan jenis input, seperti teks, email, atau kata sandi. Atribut `name` memberikan nama untuk data yang akan dikirimkan.
  • `<textarea>`: Elemen `<textarea>` digunakan untuk membuat area teks yang lebih besar yang pengguna dapat isi dengan pesan atau komentar.
  • `required`: Atribut `required` digunakan untuk menandai bahwa suatu input harus diisi sebelum formulir dapat dikirim.
  • `<label>`: Elemen `<label>` digunakan untuk memberikan label pada input, yang membantu pengguna memahami apa yang diharapkan dari input tersebut.

Dengan menggunakan elemen-elemen form ini, Anda dapat membuat formulir kontak yang memungkinkan pengguna untuk mengirim pesan atau umpan balik kepada Anda dengan mudah. Pastikan untuk memproses data formulir dengan aman di sisi server untuk melindungi privasi dan keamanan pengguna.

Series: HTML
Published on June 08, 2024
Last updated on June 03, 2026
Tutorials
Java Script java HTML Python css
Previous Rekomendasi 4 Smart Gadget Untuk Bayi
Next Menguak Teknologi di Balik Speech Recognition: Bag...

If you like this post and want to support us, you can support us via buymeacoffee or trakteer.

trakteer divisidev divisidev: buy me a coffee