Membuat Halaman Web Pertama Anda dengan HTML dan CSS
Selamat datang di tutorial pertama YukNgoding Di tutorial ini, kami akan membantu Anda membuat halaman web pertama Anda menggunakan HTML dan CSS. HTML dan CSS adalah dua bahasa pemrograman dasar yang digunakan untuk membuat halaman web. Dalam tutorial ini, Anda akan belajar cara membuat struktur dasar halaman web menggunakan HTML, serta bagaimana menambahkan gaya dan desain menggunakan CSS.
Langkah 1: Buat File HTML
Langkah pertama adalah membuat file HTML. Buka teks editor favorit Anda (misalnya Notepad atau Visual Studio Code) dan buat file baru. Beri nama file tersebut “index.html”. File ini akan menjadi halaman utama situs web Anda. Di dalam file tersebut, tuliskan kode HTML dasar berikut:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman Anda</title>
</head>
<body>
<h1>Selamat Datang di Situs Web Saya!</h1>
<p>Ini adalah halaman web pertama saya.</p>
</body>
</html>
Langkah 2: Tambahkan CSS
Sekarang, kita akan menambahkan CSS untuk membuat halaman web kita terlihat lebih menarik. Tambahkan kode CSS berikut ke dalam tag <head> di file HTML Anda:
<style type="text/css">
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: #2d3e50;
}
p {
color: #34495e;
}
</style>
Kode CSS di atas menentukan warna latar belakang halaman (background-color), jenis font yang digunakan (font-family), dan warna teks (color) untuk elemen HTML yang berbeda.
Langkah 3: Tampilkan Hasil
Sekarang, kita sudah selesai menulis kode HTML dan CSS. Simpan file HTML dan buka halaman web di browser Anda. Anda akan melihat halaman web pertama Anda, dengan judul “Judul Halaman Anda” dan beberapa teks sebagai pengantar.
Itulah tutorial pertama YukNgoding tentang cara membuat halaman web pertama Anda menggunakan HTML dan CSS. Dalam tutorial ini, Anda telah belajar bagaimana membuat struktur dasar halaman web menggunakan HTML dan bagaimana menambahkan gaya dan desain menggunakan CSS. Teruslah belajar dan berlatih, dan jangan lupa bergabung dengan komunitas YukNgoding untuk mendapatkan bantuan dan dukungan dalam perjalanan Anda belajar coding!
No Comments