Belajar Koding html Bagian 1: Struktur Utama HTML
.png)
Untuk memulai belajar HTML (HyperText Markup Language) Pertama kali adalah menyiapkah sebuah aplikasi kodingan untuk download terlevih dahulu seperti; Sublime Text, Notepad++. Visual Studio Code, dan Lain Sebagainya.
Langkah pertama adalah memahami
struktur dasar dari sebuah dokumen HTML Berikut adalah contoh sederhana:
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang!</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
 |
| Tampilan Utama Kodingan (Input) Menggunakan Visual Studio Code |
 |
| Tampilan Output / Hasil Keluaran Strukutur Utama HTML |
Penjelasan
dari struktur di atas:
- <!DOCTYPE
html>: Menyatakan
bahwa dokumen ini menggunakan HTML5.
- <html
lang="id">:
Elemen root yang menampung seluruh konten HTML, dengan atribut lang="id" yang menunjukkan bahwa bahasa
yang digunakan adalah Bahasa Indonesia.
- <head>: Bagian yang berisi informasi
meta tentang dokumen, seperti karakter encoding dan judul halaman.
- <title>: Menentukan judul halaman yang
akan ditampilkan pada tab browser.
- <body>: Bagian yang menampung konten
yang akan ditampilkan di halaman web, seperti heading dan paragraf.
Untuk
menulis kode HTML, Anda memerlukan teks editor seperti Notepad, Sublime Text,
atau Visual Studio Code. Setelah menulis kode, simpan file dengan ekstensi .html,
misalnya index.html. Untuk melihat hasilnya, buka file
tersebut menggunakan browser seperti Chrome atau Firefox.
Setelah
memahami struktur dasar, langkah selanjutnya adalah mempelajari elemen-elemen
HTML lainnya, seperti:
- Heading: Digunakan untuk judul atau
subjudul, dengan tingkat dari <h1> hingga <h6>.
- Paragraf: Menggunakan tag <p> untuk menulis teks dalam
bentuk paragraf.
- Tautan
(Hyperlink):
Menggunakan tag <a> dengan atribut href untuk membuat tautan ke
halaman lain atau sumber eksternal.
- Gambar: Menggunakan tag <img> dengan atribut src untuk menampilkan gambar.
Referensi
0 Response to "Belajar Koding html Bagian 1: Struktur Utama HTML"
Post a Comment