Sabtu, November 17, 2018

Belajar HTML (02): Elemen dan Atribut

HTML Tutorial Web

Jika Anda baru membaca tulisan ini, sebaiknya Anda kenalan dulu dengan HTML. Dan akan lebih baik lagi jika Anda sudah menggunakan Server2Go, Webserver Portabel yang tersedia gratis. 

Baiklah, kita lanjutkan belajar web bersama kita, tentang HTML, kali ini kita bahas mengenai elemen dan atribut pada HTML. Secara umum, elemen sama dengan tag, dan tag itu adalah elemen dalam HTML. Sedangkan atribut adalah properti yang melekat atau menempel pada sebuah elemen atau tag. 😐

Anda bingung? Oke, tenang, jangan khawatir, Anda tidak sendirian, saya juga bingung 😀

Supaya lebih mudah silahkan buka kembali file latihan pertama, file 01-html-struktur.html menggunakan editor teks kesayangan Anda. Masih ingat di mana lokasi penyimpanan file tersebut kan? Kalau lupa Anda harus kenalan lagi dengan HTML 😉 Berikut adalah kode HTMLnya.

<!DOCTYPE html>
<html>
<head>
   <title>Titel Halaman</title>
</head>
<body>
   <h1>Ini Contoh Judul</h1>
   <p>Ini adalah contoh sebuah paragraf yang dibentuk melalui tag HTML.</p>
</body>
</html>

Elemen dalam HTML

Pada kode di atas, yang disebut sebagai elemen adalah tag, misalnya <html> , <head> , <h1> , dll, yang mana masing-masing tag itu membentuk sebuah bagian (elemen) dalam HTML. Misal tag <h1> dan </h1> akan membentuk elemen berupa heading untuk tulisan Ini Contoh Judul, demikian juga tag <p> dan </p> akan membentuk elemen paragraf dalam halaman HTML.

Sebuah elemen boleh barada pada elemen lainnya, misalnya, dalam elemen paragraf ada bagian dari kata atau kalimat yang dicetak tebal, miring atau pakai garis bawah, atau menjadi link yang akan membuka halaman lain, dan sebagainya. Hal seperti ini boleh terjadi, tetapi harus diingat posisi untuk penutup tag dari masing-masing elemen. Untuk lebih jelasnya silahkan ketik kode berikut ini, simpan di folder belajar-html dengan nama 02-html-elemen.html.

<!DOCTYPE html>
<html>
<head>
   <title>Elemen dalam HTML</title>
</head>
<body>
   <h1>Elemen dalam HTML</h1>
   <p>
      Ini adalah contoh sebuah paragraf yang dibentuk melalui tag HTML. Paragraf ini berisi kalimat atau kata yang dicetak <b>tebal</b>, dicetak <i>miring</i> dan ada yang dicetak dengan <u>garis bawah</u>.
   </p>
</body>
</html>

Jika dijalankan, file tersebut akan menghasilkan tampilan seperti gambar ini.

Tampilan file 02-html-elemen.html

Contoh di atas menunjukkan elemen dalam elemen 😀 . Perlu diperhatikan agar berhati-hati supaya tidak terjadi kesalahan dalam penempatan tag penutup untuk masing-masing elemen. jangan pula Anda sampai kelupaan memberikan tag penutup karena hasilnya tentu akan berbeda, kecuali jika Anda memang ingin yang seperti itu 😉 .

Sebagai gambaran, silahkan ketik kode berikut ini, simpan dengan nama 03-html-elemen-lupa-tag-penutup.html.

<!DOCTYPE html>
<html>
<head>
   <title>Elemen dalam HTML</title>
</head>
<body>
   <h1>Elemen dalam HTML #2, Lupa Tag Penutup</h1>
   <p>
      Ini adalah contoh sebuah paragraf yang dibentuk melalui tag HTML. Paragraf ini berisi kalimat atau kata yang dicetak <b>tebal, dicetak <i>miring</i> dan ada yang dicetak dengan <u>garis bawah.
   </p>
   <p>
      Ini adalah paragraf yang kedua.
   </p>
</body>
</html>

Selanjutnya →

Halaman : 1 2

Mari sebarkan manfaat kepada orang lain...

4 thoughts on “Belajar HTML (02): Elemen dan Atribut

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *