Landing page merupakan halaman web khusus yang dirancang untuk tujuan tertentu, seperti mempromosikan produk, layanan, atau mengumpulkan data pengunjung. Dalam artikel ini, saya akan membahas langkah-langkah untuk membuat project landing page menggunakan HTML.


  1. Menentukan tujuan landing page Sebelum membuat landing page, kita perlu menentukan tujuan dari halaman tersebut. Apakah untuk mempromosikan produk, mengumpulkan email, atau tujuan lainnya. Hal ini akan mempengaruhi desain dan konten landing page yang akan dibuat.

  2. Membuat struktur HTML Setelah menentukan tujuan landing page, kita perlu membuat struktur HTML yang akan menjadi dasar dari landing page. Berikut adalah contoh struktur HTML dasar untuk landing page:

    php
    <!DOCTYPE html>
<html>
<head>
	<title>Judul Halaman</title>
</head>
<body>
	<header>
		<nav>
			<ul>
				<li><a href="#">Link Menu 1</a></li>
				<li><a href="#">Link Menu 2</a></li>
				<li><a href="#">Link Menu 3</a></li>
			</ul>
		</nav>
	</header>
	<section>
		<h1>Judul Landing Page</h1>
		<p>Deskripsi singkat mengenai tujuan landing page.</p>
		<form>
			<label for="email">Masukkan email anda:</label>
			<input type="email" id="email" name="email" placeholder="Email" required>
			<button type="submit">Daftar</button>
		</form>
	</section>
	<footer>
		<p>Hak Cipta © 2023 | Nama Perusahaan</p>
	</footer>
</body>
</html>

    Penjelasan kode di atas:

  • Tag <header> digunakan untuk menampilkan header halaman, yang berisi navigasi atau menu.
  • Tag <nav> digunakan untuk menampilkan menu navigasi.
  • Tag <ul> dan <li> digunakan untuk menampilkan daftar menu navigasi.
  • Tag <section> digunakan untuk menampilkan konten utama halaman, seperti judul, deskripsi, atau form pendaftaran.
  • Tag <form> digunakan untuk menampilkan form pendaftaran atau pengisian data.
  • Tag <label> digunakan untuk menampilkan label pada input form.
  • Atribut "for" pada tag <label> digunakan untuk menghubungkan label dengan input form.
  • Atribut "type" pada tag <input> digunakan untuk menentukan tipe input, seperti email, text, atau password.
  • Atribut "placeholder" pada tag <input> digunakan untuk menampilkan placeholder pada input form.
  • Atribut "required" pada tag <input> digunakan untuk memastikan input form tidak kosong.
  • Tag <footer> digunakan untuk menampilkan footer halaman, yang berisi informasi hak cipta atau kontak perusahaan.
  1. Desain dan styling CSS Setelah membuat struktur HTML, kita dapat mengatur desain dan styling landing page menggunakan CSS (Cascading Style Sheets). Berikut adalah contoh CSS dasar untuk landing page: 
    2. php
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      font-size: 16px;
      line-height: 1.5;
      color: #333;
      background-color: #fff;
    }

    header {
      background-color: #fd6d6;
      padding: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }
      
      nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      }
      
      nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      }
      
      nav li {
      margin: 0 10px;
      }
      
      nav a {
      display: block;
      padding: 10px;
      text-decoration: none;
      color: #333;
      }
      
      nav a:hover {
      background-color: #333;
      color: #fff;
      }
      
      section {
      padding: 50px 20px;
      text-align: center;
      }
      
      h1 {
      font-size: 48px;
      margin-bottom: 20px;
      }
      
      p {
      font-size: 24px;
      margin-bottom: 40px;
      }
      
      form {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      }
      
      label {
      display: block;
      margin-right: 10px;
      font-size: 20px;
      }
      
      input[type="email"] {
      flex: 1;
      padding: 10px;
      font-size: 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
      }
      
      button[type="submit"] {
      padding: 10px 20px;
      font-size: 20px;
      color: #fff;
      background-color: #333;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      }
      
      button[type="submit"]:hover {
      background-color: #666;
      }
      
      footer {
      padding: 20px;
      background-color: #333;
      color: #fff;
      text-align: center;
      }

    Penjelasan kode di atas: - Pada bagian body, kita mengatur margin, padding, font-family, font-size, line-height, color, dan background-color untuk seluruh halaman. - Pada bagian header, kita mengatur background-color, padding, dan box-shadow untuk header. - Pada bagian nav, kita menggunakan display: flex untuk mengatur posisi menu navigasi. - Pada bagian section, kita mengatur padding dan text-align untuk konten utama. - Pada bagian form, kita menggunakan display: flex untuk mengatur posisi input form dan label. - Pada bagian input[type="email"], kita mengatur flex, padding, font-size, border, dan border-radius untuk input email. - Pada bagian button[type="submit"], kita mengatur padding, font-size, color, background-color, border, border-radius, dan cursor untuk tombol submit. - Pada bagian footer, kita mengatur padding, background-color, color, dan text-align untuk footer.

  2. Menghubungkan CSS ke HTML

    3. Setelah membuat CSS, kita perlu menghubungkan CSS tersebut ke HTML. Caranya adalah dengan menambahkan tag <link> pada bagian <head> di HTML, seperti berikut: 

    css
    <!DOCTYPE html>
    <html>
    <head>
      <title>Judul Halaman</title>
      <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
      <!-- Isi Halaman -->
    </body>
    </html>
    1. Menambahkan gambar dan elemen visual Selain teks dan form, kita juga dapat menambahkan gambar dan elemen visual lainnya untuk memperkuat pesan dan tujuan dari landing page. Caranya adalah dengan menggunakan tag <img>, <video>, atau tag HTML lainnya.
    css
    <section>
      <h1>Judul Landing Page</h1>
      <img src="gambar.jpg" alt="Deskripsi Gambar">
      <p>Deskripsi singkat mengenai tujuan landing page.</p>
      <form>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" placeholder="Masukkan email anda...">
      <button type="submit">Submit</button>
      </form>
      
      </section>

    Pada kode di atas, kita menambahkan gambar dengan menggunakan tag <img> dan menambahkan deskripsi gambar dengan menggunakan atribut alt. Selain itu, kita juga menambahkan form yang sudah dibuat sebelumnya.

    1. Menambahkan navigasi Pada landing page, navigasi sangat penting untuk memudahkan pengunjung dalam berpindah halaman. Kita dapat menambahkan navigasi dengan menggunakan tag <nav> dan menambahkan link menuju halaman lain dengan tag <a>.
    php
    <header>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</header>

    Pada kode di atas, kita menambahkan navigasi dengan tag <nav> dan menambahkan link menuju halaman Home, About, dan Contact dengan tag <a>.

    1. Menambahkan footer Footer pada landing page digunakan untuk memberikan informasi tambahan mengenai website atau bisnis yang ingin dipromosikan. Kita dapat menambahkan footer dengan menggunakan tag <footer>.
    css
    <footer>
	<p>&copy; 2023 Nama Website. All rights reserved.</p>
</footer>

    Pada kode di atas, kita menambahkan footer dengan informasi hak cipta tahun 2023 dan nama website.

    1. Menyimpan dan Membuka Halaman Web Setelah selesai membuat landing page, kita dapat menyimpan file HTML dan CSS tersebut dengan ekstensi .html dan .css. Kemudian, kita dapat membuka halaman web dengan menggunakan browser seperti Google Chrome atau Mozilla Firefox. Caranya adalah dengan mengklik dua kali pada file HTML yang sudah dibuat.

    Demikianlah tutorial cara membuat project landing page menggunakan HTML. Dengan menguasai dasar-dasar HTML, kita dapat membuat website dengan desain yang menarik dan fungsional. Selamat mencoba!