UNMAHA – Membuat website ternyata tidak sesulit yang kamu bayangkan, terutama jika kamu mulai memahami dasar-dasar HTML. HTML atau Hypertext Markup Language adalah bahasa pemrograman dasar yang digunakan untuk membangun struktur sebuah halaman web. Jika kamu baru memulai, jangan khawatir! Kamu bisa mengikuti contoh coding HTML dalam pembuatan website yang mudah berikut ini. Setelah memahami konsep dasar HTML, kamu bisa mulai membuat website impian kamu dalam waktu singkat.
Di artikel ini, kita akan membahas bagaimana contoh coding HTML dalam pembuatan website yang mudah dapat membantu kamu memahami cara menyusun konten di halaman web. HTML memungkinkan kamu untuk membuat struktur seperti teks, gambar, dan tautan dengan cara yang sederhana. Tanpa harus menjadi seorang ahli pemrograman, kamu bisa membuat website dengan pengetahuan dasar HTML. Yuk, simak langkah-langkah berikut ini agar kamu bisa mulai menulis kode dan membuat website pertama kamu!
Struktur Dasar Coding HTML untuk Pembuatan Website
Untuk memulai, kamu harus memahami struktur dasar HTML. Setiap website berbasis HTML dimulai dengan elemen-elemen dasar berikut:
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Website Pertama</title>
</head>
<body>
<h1>Selamat Datang di Website Pertamamu!</h1>
<p>Ini adalah paragraf pertama kamu.</p>
<a href=”https://pmb.unmaha.ac.id/”>Daftar di Universitas Mahakarya Asia</a>
</body>
</html>
Pada kode di atas, kita mulai dengan mendeklarasikan DOCTYPE html yang memberi tahu browser bahwa ini adalah dokumen HTML5. Kemudian, di dalam tag <html>, ada dua bagian utama, yaitu <head> dan <body>. Bagian <head> berisi informasi tentang halaman, seperti set karakter dan judul halaman. Sedangkan bagian <body> adalah tempat kamu menambahkan konten halaman seperti heading, paragraf, dan tautan. Misalnya, di atas ada elemen heading <h1> untuk judul besar dan <p> untuk menambahkan paragraf.
Menambahkan Konten pada Website
Setelah memahami struktur dasar, kamu bisa mulai menambahkan konten lain ke website dengan menggunakan elemen HTML lainnya. Berikut beberapa contoh elemen yang bisa kamu gunakan:
1. Menambahkan Gambar
Untuk menambahkan gambar ke dalam halaman, kamu bisa menggunakan tag <img>. Berikut contohnya:
<img src=”gambar.jpg” alt=”Deskripsi Gambar”>
Pastikan kamu mengganti “gambar.jpg” dengan nama file gambar yang kamu inginkan. Jangan lupa juga memberikan deskripsi pada atribut alt, yang berguna jika gambar tidak muncul atau bagi pembaca layar.
2. Menambahkan Tautan
Untuk membuat halaman website kamu lebih interaktif, kamu bisa menambahkan tautan dengan tag <a>. Berikut contoh sederhana membuat tautan:
<a href=”https://pmb.unmaha.ac.id/”>Daftar di Universitas Mahakarya Asia</a>
Tautan ini mengarah ke situs pendaftaran Universitas Mahakarya Asia, tempat kamu bisa mendaftar sebagai mahasiswa baru. Jangan ragu untuk memanfaatkan peluang belajar lebih lanjut di universitas ini melalui tautan tersebut!
3. Menambahkan Daftar
Untuk membuat daftar, kamu bisa menggunakan elemen <ul> (unordered list) atau <ol> (ordered list). Berikut contohnya:
<ul>
<li>HTML Dasar</li>
<li>CSS untuk Desain</li>
<li>JavaScript untuk Interaktivitas</li>
</ul>
Baca Juga: Rekomendasi Editor Kode HTML Terbaik yang Wajib Kamu Coba!
Menyempurnakan Website dengan CSS
Selain HTML, kamu bisa menggunakan CSS untuk mendesain tampilan website. Kamu bisa menambahkan CSS langsung di dalam file HTML dengan menggunakan tag <style> atau menghubungkannya dengan file CSS eksternal. Berikut contoh penggunaan CSS:
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
p {
font-size: 16px;
}
</style>
Dengan sedikit sentuhan CSS ini, kamu bisa membuat website tampak lebih menarik. CSS memberikan fleksibilitas dalam mendesain layout, warna, dan elemen lainnya di halaman.
Menggunakan HTML untuk Membuat Formulir
HTML juga memungkinkan kamu untuk menambahkan formulir ke dalam website. Formulir ini bisa digunakan untuk mengumpulkan informasi dari pengunjung. Berikut adalah contoh dasar formulir HTML:
<form action=”/submit” method=”POST”>
<label for=”name”>Nama:</label>
<input type=”text” id=”name” name=”name”>
<br>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”>
<br>
<input type=”submit” value=”Kirim”>
</form>
Formulir ini berisi dua input untuk nama dan email serta tombol kirim untuk mengirimkan data.
Dengan contoh coding HTML dalam pembuatan website yang mudah di atas, kamu kini memiliki gambaran dasar tentang bagaimana membuat website pertama kamu. HTML adalah fondasi penting dalam pengembangan web, dan dengan sedikit latihan, kamu bisa membuat berbagai halaman yang menarik dan fungsional.
Kalau kamu tertarik mendalami lebih dalam mengenai pengembangan web dan teknologi, kamu bisa memulai dengan pendidikan di Universitas Mahakarya Asia. Kuliah di sana akan memberikan kamu pengetahuan yang kuat dalam bidang ini. Jangan lewatkan kesempatan untuk menjadi mahasiswa di Universitas Mahakarya Asia. Daftar sekarang di PMB Universitas Mahakarya Asia dan mulailah perjalanan akademik kamu!***
Editor: Mahfida Ustadhatul Umma