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.
- Mengenal HTML dan CSS: Pengertian, Sejarah, Fungsi, dan Cara Penggunaannya
- Panduan Langkah Demi Langkah: Cara Menggunakan Heading dan Link HTML untuk pemula
- Cara Membuat Tabel dengan HTML: Panduan Lengkap
- Tutorial Membuat Form HTML dan CSS
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
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
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
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.
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!
