The My Project

Beranda
HTML

HTML | BAB 13 Membuat halaman web sederhana

 


Membuat Halaman Web Sederhana

Berikut adalah contoh kode HTML untuk membuat halaman web sederhana yang menggabungkan beberapa konsep HTML yang telah dipelajari sebelumnya: 

<!DOCTYPE html>
<html>
  <head>
    <title>Halaman Web Sederhana</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <h1>Selamat Datang di Halaman Web Sederhana</h1>

      <nav>
        <ul>
          <li><a href="#">Beranda</a></li>
          <li><a href="#">Tentang</a></li>
          <li><a href="#">Kontak</a></li>
        </ul>
      </nav>
    </header>

    <section>
      <h2>Tentang Kami</h2>
      <p>
        Ini adalah halaman web sederhana yang dibuat menggunakan HTML. Kami
        menyediakan informasi tentang berbagai topik menarik.
      </p>
    </section>

    <section>
      <h2>Kontak</h2>
      <form>
        <label for="nama">Nama:</label>
        <input type="text" id="nama" name="nama" required />

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required />

        <label for="pesan">Pesan:</label>
        <textarea id="pesan" name="pesan" required></textarea>

        <input type="submit" value="Kirim" />
      </form>
    </section>

    <footer>
      <p>Hak Cipta &copy; 2022 the my project</p>
    </footer>
  </body>
</html>

Dalam contoh di atas, kita memiliki beberapa konsep HTML yang telah dipelajari sebelumnya:

  1. Menggunakan tag untuk bagian header halaman.
  2. Menggunakan tag dan untuk membuat menu navigasi.
  3. Menggunakan tag untuk membagi halaman menjadi beberapa bagian.
  4. Menggunakan tag untuk membuat formulir kontak dengan input teks dan textarea.
  5. Menggunakan atribut "required" untuk memastikan pengisian bidang formulir.
  6. Menggunakan tag untuk bagian footer halaman.

File CSS eksternal juga dapat ditambahkan untuk mengatur tampilan halaman web secara lebih rinci. Misalnya, dengan menambahkan file "style.css" dan menghubungkannya dengan tag di dalam elemen seperti yang telah dijelaskan sebelumnya. 

<!DOCTYPE html>
<html>
  <head>
    <title>Halaman Web Sederhana</title>
    <link rel="stylesheet" href="style.css" />     
  </head>
 
// ini adalah file css    
    

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header {
  background-color: #000;
  color: #fff;
  padding: 20px 0;
}

h1 {
  font-size: 2em;
  font-weight: bold;
  padding: 10px;
}

nav {
  background-color: #fff;
  padding: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  margin-right: 20px;
}

a {
  color: #000;
  text-decoration: none;
}

/* Section */

section {
  padding: 20px 0;
}

h2 {
  font-size: 1.5em;
  font-weight: bold;
  padding: 10px;
}

p {
  line-height: 1.5;
  padding: 10px;
  text-align: justify;
}

/* Form */

form {
  width: 500px;
  margin: 0 auto;
}

label {
  display: block;
  margin-bottom: 10px;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
}

input[type="submit"] {
  background-color: #000;
  color: #fff;
  padding: 10px;
  border: none;
  cursor: pointer;
}

/* Footer */

footer {
  background-color: #000;
  color: #fff;
  padding: 20px 0;
}