Belajar HTML dan CSS untuk Pemula: Buat 'Hello, World!' dan Biodata Diri

Belajar HTML dan CSS untuk Pemula: Buat Hello World! dan Biodata Diri Assalamualaikum wr wb hai teman-teman berjumpa lagi dengan saya di dailamiahmad.my.id. Pada artikel kali ini saya akan membahas tentang praktek pertama belajar HTML dan CSS untuk pemula yaitu tentang cara membuat hello world dan biodata diri.

Khusus hello world, setiap developer web dalam percobaan pertama membuat halaman website pasti membuat hello world. Karena meskipun tidak diharuskan pembuatan halaman hello world ini seperti sudah menjadi hukum yang tidak tertulis untuk siapa saja yang memulai belajar bahasa pemrograman. Untuk praktek membuat biodata hanya untuk menambah pembahasan saja agar artikelnya tidak terlalu pendek. hee

Tapi sebelum kita lanjut ke pembahasan pembuatan hello world dan biodata diri, saya sarankan teman teman membaca artikel terkait dengan pembahasan ini.

Tanpa menunggu lama lagi, yuk teman teman kita lanjutkan pembahasan mengenai membuat halaman hello world dan biodata dirinya.

Belajar HTML dan CSS untuk Pemula: Buat 'Hello, World!' dan Biodata Diri

Membuat Halaman "Hello, World!"

Untuk praktek pertama dalam belajar HTML adalah menampilkan teks "Hello, World!" di browser. Silahkan teman-teman untuk mengikuti langkah-langkah berikut:

Membuat File HTML

Buka teks editor yang sudah terinstal di komputer teman-teman seperti VS Code atau Notepad++, lalu buat file baru dengan nama index.html. Setelah itu, masukkan kode berikut

	<!DOCTYPE html>
	<html lang="id">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Belajar HTML</title>
	</head>
	<body>
	<h1>Hello, World!</h1>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

Simpan file tersebut dan buka di browser. Jika teman-teman melihat tulisan "Hello, World!", itu tanda yang baik karena kita telah berhasil membuat halaman hello world!

Membuat Halaman Biodata Diri

Nah teman-teman untuk latihan HTML yang kedua, kita akan membuat sebuah halaman yang menampilkan biodata diri. Latihan ini sedikit lebih rumit dari latihan pertama yaitu membuat hello world, karena ada beberapa baris ditambahkan dan tag html yang mungkin teman-teman baru pertama kali melihatnya. Kita langsung saja ke latihan kedua nya yaitu membuat halaman boodata diri.

Struktur HTML untuk Biodata Diri

Buat sebuah file dengan nama biodata.html

	<!DOCTYPE html>
	<html lang="id">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Biodata Diri</title>
	</head>
	<body>
	<h1>Biodata Diri</h1>
	<p><strong>Nama:</strong> Ibnu Ahmad</p>
	<p><strong>Usia:</strong> 15 tahun</p>
	<p><strong>Email:</strong> ibnuahmad@example.com</p>
	<p><strong>Alamat:</strong> Cianjur, Indonesia</p>
	</body>
	</html>

view raw biodata.html hosted with ❤ by GitHub

Simpan file biodata.html tersebut dan buka di browser. Lihat bagaimana hasilnya.

Menambahkan CSS untuk Mempercantik Tampilan

Selanjutnya kita tambahkan sedikit style css untuk mempercantik tampilan halaman biodata diri kita, Yang harus kita lakukan adalah membuat file baru dengan nama styles.css lalu tambahkan kode berikut

	body {
	font-family: Arial, sans-serif;
	background-color: #f4f4f4;
	text-align: center;
	}

	h1 {
	color: #333;
	}

	p {
	color: #555;
	}

view raw styles.css hosted with ❤ by GitHub

Menghubungkan HTML dan CSS

Hal penting lainnya yang harus kita lakukan adalah menghubungkan file html dan css. Dalam latihan ini kita memakai metode CSS External untuk menghubungkan file html dan css. Karena itu kita harus menambahkan sebuah kode di biodata.html dibagian tengah kode buka <head> dan tutup </head>. Masukan potongan kode seperti berikut

<link rel="stylesheet" href="styles.css">

File biodata.html akan berubah menjadi seperti dibawah ini.

	<!DOCTYPE html>
	<html lang="id">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css"> <!-- simpan kode disini -->
	<title>Biodata Diri</title>
	</head>
	<body>
	<h1>Biodata Diri</h1>
	<p><strong>Nama:</strong> Ibnu Ahmad</p>
	<p><strong>Usia:</strong> 15 tahun</p>
	<p><strong>Email:</strong> ibnuahmad@example.com</p>
	<p><strong>Alamat:</strong> Cianjur, Indonesia</p>
	</body>
	</html>

view raw perubahan kode biodata.html hosted with ❤ by GitHub

Simpan perubahan dan buka kembali halaman di browser. Lihat perubahan yang terjadi setelah kita menambahkan style css.

Kesimpulan

Oke teman-teman, memang tidak ada aturan tertulis untuk seseorang yang baru belajar bahasa pemrograman untuk membuat halaman hello world. Tapi kebiasaan ini selalu diturunkan oleh siapa pun yang mengajarkan bahasa pemrograman. Ya kita anggap hal wajar lah ya ! hee.

Jadi dalam artikel ini kita mendapat bebrapa latihan yang kedepannya akan menambah keahlian kita dalam belajar bahasa pemrograman. Sekarang kita sudah tahu bagaimana cara membuat halaman "Hello, World!" dan biodata diri.

Tapi Ingat ini baru permulaan! Masih banyak hal menarik lainnya yang bisa teman-teman pelajari dalam HTML dan CSS. Jadi, teruslah bereksperimen dan jangan ragu untuk mencoba hal baru. Semangat belajar dan selamat coding!