Mengenal HTML

byM Yusuf allanza -
0


Apa itu HTML ?

Di tahun 1989, Tim Berners Lee dari organisasi European Organization for Nuclear Research (CERN) mencetuskan ide untuk menciptakan suatu script bahasa pemrograman pada suatu dokumen yang kemudian dikenal sebagai HTML. Tim Berners Lee diketahui sebagai penemu HTML. Saat ini penggunaan dan pengembangan HTML diatur oleh World Wide Web Consortium (W3C) dan versi terakhir dari HTML yang sekarang digunakan adalah HTML5. Versi ini memiliki fitur yang lebih baik dari versi HTML sebelumnya. HTML adalah kepanjangan dari HyperText Markup Language, merupakan bahasa interpretasi yang digunakan pada sebuah halaman web. HTML itu sendiri bukanlah sebuah bahasa pemrograman pada umumnya, seperti Java, C, C++, visual basic dan sejenisnya. HTML mendeskripsikan struktur halaman web yang ditulis dengan elemen atau tag yang yang mengapit konten atau teks di dalamnya yang akan ditampilkan pada sebuah halaman web oleh browser. Jadi apapun website yang kita lihat pasti awalnya dibangun menggunakan HTML.

Apa Kegunaan HTML ?

HTML berguna untuk menampilkan konten, menghubungkan (link) antar halaman, memberi struktur dan informasi terkait dengan sebuah halaman web. Konten sebuah web tidak hanya terbatas pada teks saja, melainkan konten interaktif lainnya seperti video, audio, gambar dan animasi dapat disisipkan dan ditampilkan pada halaman web.
Struktur dasar HTML memiliki susunan file seperti berikut ini :
    

  1. <html>
    2. 

  2.     <head>
    3. 

  3.         <title>Judul halaman</title>
    4. 

  4.     </head>
    5. 

  5.     <body>
    6. 

  6.         <!-- semua yang akan di tampilkan di web disimpan di dalam body -->
    7. 

  7.         <h1>Selamat datang</h1>
    8. 

  8.     </body>
    9. 

  9. </html>
    10.

Struktur HTML

Struktur HTML terdiri dari 3 konsep dasar yaitu tag, elemen dan atribut.

Tag HTML

Tag HTML adalah suatu penanda untuk menandai elemen-elemen dalam suatu dokumen HTML. Fungsi tag adalah untuk memberikan instruksi atau memberitahu kepada browser bagaimana suatu objek ditampilkan berdasarkan tag yang digunakan, objek di sini bisa berupa teks, video, audio dan gambar.
Tag HTML pada umumnya dibuat berpasangan, ada tag pembuka dan ada tag penutup. Tag pembuka ditulis seperti ini:
<nama_tag>
Dan tag penutup ditulis seperti ini:
</nama_tag>
*Catatan* : Perbedaan antara tag pembuka dan tag penutup adalah tag penutup memiliki karakter garis miring sebelum nama tag-nya.

Elemen HTML

Rangkaian dari tag pembuka, konten dan tag penutup disebut dengan elemen HTML. Contoh berikut ini adalah elemen heading 1 dan elemen paragraf:
    

  1. <h1>Selamat Datang</h1>
    2. 

  2. <p>Selamat belajar pemrograman web.</p>
    3.
Pada contoh kode di atas, kita memiliki elemen heading 1 yang tersusun dari tag pembuka <h1>, konten elemen berupa teks bertuliskan Selamat Datang dan tag penutup </h1>. Kita juga memiliki elemen paragraf yang tersusun dari tag pembuka <p>, konten teks dan tag penutup </p>. Perbedaan dari kedua elemen ini adalah, elemen heading digunakan untuk menampilkan judul halaman, sedangkan elemen paragraf digunakan untuk menampilkan konten paragraf. Bila kita buka di browser, maka elemen heading akan dicetak lebih besar dan lebih tebal daripada elemen paragraf.
Bila kita memiliki contoh kode seperti ini:
    

  1. <body>
    2. 

  2.     <h1>Selamat datang</h1>
    3. 

  3.     <p>Selamat belajar pemrograman web di <b>CodePolitan</b></p>
    4. 

  4. </body>
    5.
Maka:
  • <body> disebut tag body (atau tag pembuka body), <h1> adalah tag h1 dan <p> adalah tag p atau paragraf.
  • <h1>Selamat datang</h1> disebut elemen h1.
  • <p>Selamat belajar pemrograman web di <b>CodePolitan</b></p> disebut elemen p atau paragraf.
  • <b>CodePolitan</b> disebut elemen b atau bold, <b> itu sendiri disebut tag b atau bold
  • semua bagian mulai dari tag pembuka body, berikut sub-element diantara tag pembuka dan penutup body, hingga tag tutup body disebut dengan elemen body.

*Catatan* Penulisan elemen harus Penulisan elemen harus lengkap, mulai dari tag pembuka, konten dan tag penutup. Apa yang sudah dibuka wajib ditutup kembali!

Ada banyak tag yang dapat kita gunakan di dalam HTML untuk menampilkan konten. Bila kita bagi ke dalam dua area, maka ada tag-tag yang digunakan di dalam elemen head dan ada tag yang digunakan di dalam elemen body.

Tag di dalam Elemen Head

Elemen yang ada di dalam head berfungsi sebagai informasi dari dokumen HTML dan tidak akan ditampilkan di layar browser. Beberapa tag yang dapat digunakan di dalam elemen head di antaranya adalah <meta>, <title>, <style>, <script> dan <link>.
    

  1. <head>
    2. 

  2.     <meta charset="utf-8">
    3. 

  3.     <title>Judul halaman</title>
    4. 

  4.     <style> Style </style>
    5. 

  5.     <script> Javascript </script>
    6. 

  6. </head>
    7.

Tag di dalam Elemen Body

Ada banyak tag yang dapat kita gunakan untuk menampilkan konten di dalam elemen body.
Ada tag yang berfungsi untuk menampilkan teks, seperti <h1>, <h2>, <h3>, <h3>, <h4>, <h5>, <p> dan sebagainya.
Ada juga tag untuk memformat teks, seperti <b>, <i>, <strong>, <em>, <mark>, <del> dan sebagainya.
Untuk menampilkan gambar, Anda dapat menggunakan tag <img>, dan untuk membuat tautan dapat menggunakan tag <a>.
Di dalam HTML, Anda dapat membuat elemen table dengan menggunakan kombinasi dari tag <table>, <thead>, <tbody>, <tr>, <th>, dan <td>. Anda juga dapat membuat list dengan menggunakan kombinasi dari tag <ul>, <ol>, <li>, <dl>, <dd>, dan <dt>. Terkait pembuatan table dan list akan dibahas secara khusus di bagian selanjutnya.
Anda juga dapat memasukkan video, audio atau format media lainnya menggunakan sejumlah tag seperti <object>, <video>, <audio>, <embed>, dan <iframe>.

Sampai pembahasan ini Anda cukup perlu paham terkait tag dan elemen. Adapun cara penggunaan tag-tag di atas akan dibahas di bagian khusus setelah ini. Bila Anda ingin tahu lebih lengkap tag HTML apa saja yang tersedia dapat dilihat di https://www.w3schools.com/tags/. Jangan kaget bila Anda menemukan banyak tag di HTML. Anda tidak harus menghafal semuanya, cukup pelajari tag-tag yang akan Anda gunakan saat membuat web nantinya.

Attribute HTML

Atribut memiliki tugas khusus untuk memberikan informasi tambahan pada sebuah tag.
    

  1. <namatag nama-atribut="nilai-atribut"></namatag>
    2.

Dari contoh kode di atas yang dimaksud dengan atribut adalah tambahan yang ditulis di dalam tag pembuka. Contohnya bila kita hendak membuat tautan atau link, Anda akan perlu menulis minimal seperti ini:
    

  1. <a href="login.html">Login</a>
    2.

Pada contoh kode di atas, kita membuat tautan menggunakan tag <a>. Namun menggunakan tag <a> saja tidak cukup, karena kita perlu memberi tahu kepada browser kemana halaman akan dialihkan bila pengguna mengklik tautan Login. Oleh karena itu, tag <a> dilengkapi dengan atribut href yang harus diisi dengan nama URL tujuan dari tautan tersebut. Pada contoh di atas, href adalah nama atribut, dan "login.html" adalah nilai atribut. Nama dan nilai atribut dipisahkan dengan tanda sama dengan (=).

Selain tag <a> ada banyak tag lain yang memerlukan atribut. Bila dikelompokkan, ada dua jenis atribut, yakni atribut global dan atribut spesifik. Atribut global adalah atribut yang dapat diterapkan pada tag apapun karena sifatnya yang umum. Contoh atribut global di antaranya adalah class, id, lang, title, style dan sebagainya. Sedangkan atribut spesifik adalah atribut yang hanya berfungsi pada tag-tag tertentu, seperti atribut href yang hanya berlaku pada tag <a> dan <link>, atribut src yang hanya berlaku pada tag <img> dan <script>, dan sebagainya.
Tags

Post a Comment

Previous Post Next Post