Sebelumnya kita telah melihat struktur dasar sebuah dokumen HTML, dimana ternyata isi dokumen HTML adalah semua tentang Elemen.
Sekarang saya akan mencoba menuliskan untuk anda contoh-contoh sebagai dasar pemahaman HTML yang akan anda pelajari selanjutnya.
Tentang bagaimana cara menulis, menyimpan, dan menjalankan contoh-contoh script HTML yang akan kita pelajari pada chapter ini, silahkan anda baca kembali chapter sebelumnya disini :
Baiklah, kita coba mengingat kembali struktur HTML yang sudah kita baca pada bagian yang telah lalu.
Yang pertama tentang deklarasi <!DOCTYPE html>.
Setiap dokumen HTML harus dimulai dengan tag <!DOCTYPE html>, deklarasi <!DOCTYPE> ini menggambarkan tipe dokumen yang akan ditulis di dalamnya. Selain itu, deklarasi <!DOCTYPE> ini akan membantu browser menampilkan halaman web secara benar.
Deklarasi <!DOCTYPE> ini hanya ditulis sekali saja didalam sebuah dokumen HTML, yaitu di bagian paling atas halaman. Penulisan <!DOCTYPE> tidak bersifat case sensitive, artinya huruf besar dan kecil tidak masalah. Misalnya <!DocTyPe> sama saja dengan <!DOCTYPE>, namun disarankan untuk menuliskannya dengan huruf kapital.
Khusus untuk HTML 5, deklarasi <!DOCTYPE> ditulis sbb :
<!DOCTYPE html>
Selanjutnya, dokumen HTML itu sendiri dimulai dengan start tag <html> dan diakhiri dengan end tag </html>, dengan bagian dokumen yang akan ditampilkan pada web page berada di dalam tag <body> dan </body>.
Seperti ini contoh nya :
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My First Paragraph</p>
</body>
</html>
HEADING HTML
Heading atau judul didalam HTML didefinisikan dengan tag <h1> sampai dengan tag <h6>. Bagian paling utama misalnya judul biasanya menggunakan tag <h1> sedangkan untuk sub-judul di bawah nya menggunakan tag <h2>, <h3>, dan seterusnya.
contoh :
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
PARAGRAF HTML
Didefinisikan dengan tag <p>, contohnya seperti ini :
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
LINK
Sering kita jumpai dalam sebuah halaman web, kita temukan link atau tautan yang saat kita klik link tersebut kita akan dihubungkan dengan halaman lain atau bagian lain dari dokumen.
Dalam dokumen HTML bagaimana penulisannya ?
Dalam sebuah dokumen HTML, link didefinisikan dengan tag <a> seperti ini :
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://easyclasstutorial.blogspot.com">This is a link</a>
</body>
</html>
Saat dokumen tersebut dibuka, jika anda klik link pada tulisan “This is a link” maka anda akan dialihkan ke halaman easyclasstutorial.blogspot.com. Artinya, browser akan membuka halaman utama blog kelas tutorial ini untuk anda.
Sekarang mari kita lihat pada elemen link dari dokumen diatas, yaitu pada :
<a href="https://easyclasstutorial.blogspot.com">This is a link</a>.
Target link ditulis di dalam atribut href : href="https://easyclasstutorial.blogspot.com". Nah ini namanya atribut, digunakan untuk menyediakan informasi tambahan bagi sebuah elemen HTML.
Anda bingung dengan istilahnya ?, tenang saja, kita akan bahas nanti pada bagian khusus.
IMAGE
Image, atau untuk menampilkan gambar pada dokumen HTML menggunakan tag <img>.
Contohnya begini :
<img src="easyclasstutorial.jpg" alt="easyclasstutorial.blogspot.com" width="104" height="142">
Dari elemen image tersebut kita bisa melihat beberapa atribut sbb :
- src : sebagai source file
- alt : sebagai alternatif jika image tidak bisa ditampilkan
- width : lebar image yang ditampilkan
- height : tinggi image yang akan ditampilkan
| Prev. Chapter | Next Chapter |
|---|---|
| EDITOR HTML | ELEMEN-ELEMEN DASAR HTML |
Tidak ada komentar:
Posting Komentar