Jika anda baru memulai belajar pemrograman web, membuat halaman sederhana yang menampilkan “Hello World” adalah langkah pertama yang tepat. Pada artikel ini akan membantu Anda memahami langkah dasar dalam membuat halaman web sederhana menggunakan HTML, CSS dan JavaScript.
1. HTML: Struktur Dasar Halaman Web
HTML (Hyper Text Markup Language) adalah bahasa markup yang digunakan untuk membuat steruktur dasar dari sebuah halaman web. Berikut adalah kode HTML sederhana untuk menampilkan kata “Hello World”:
Penjelasan Kode:
<!DOCTYPE html> : Menyatakan bahwa ini adalah dokument HTML5,
<html lang=”id”> : menandakan bahwa bahasa dokumen ini adalahIndonesia,
<meta charset=”UTF-8”> : Mengatur karakter encoding menjadi UTF-8,
<meta name=”viewport” conten=”width, initial-scale=1.0”> : Menyesuaikan tampilan agar sesuai dengan ukuran layar perangkat (Responsive),
<title>Hello World”</title> : Menampilkan judul pada tab browser;
<h1>Hello World</h1> : Tag h1 digunakan untuk menampilkan teks “Hello World” sebagai heading.
2. Menambahkan CSS : Styling Halaman
CSS (Cascading Style Sheets) digunakan untuk memberikan gaya pada elemen HTML.
Berikut adalah contoh sederhana untuk mengatur tampilan teks “Hello World” menggunakan CSS:
Penjelasan Kode :
body {background-color: #fofofo;} : memberikan warna latar belakang pada halaman,
text-align: center; : Menyelaraskan teks ke tengah secara horizontal,
margin-top: 100px; : Memberikan jarak dari atas halaman ke teks “Hello World”,
h1 {color: #333;} : Mengubah warna teks menjadi abu-abu gelap.
3. Menambahkan JavaScript : Interaksi Dinamis
Contoh sederhana adalah menampilkan pesan alert saat haaman dimuat.
Penjelasan Kode:
<script> : Digunakan untuk menyisipkan JavaScript ke dalam halaman HTML,
fucntion sayHello() {…} : Fungsi JavaScript yang menampilkan pesan ketika halaman dibuka,
onload=”sayHello()”: Memanggil fungsi sayHello() saat halaman selesai dimuat.
Kesimpulan
Membuat halaman web sederhana yang menampilkan Hello World adalah langkah awal yang sangat penting dalam belajar pemrograman web. Dengan menggunakan HTML, CSS dan JavaScript anda dapat membuat halaman interaktif dan berpenampilan menarik.
Selamat mencoba dan terus eksplorasi dunia web development!!
Tidak ada komentar:
Posting Komentar