Pengertian HTML

Pengertian HTML

Sampai saat ini, masih banyak orang yang salah mengartikan dan tidak tahu apa itu HTML. Bahkan kebanyakan orang mengira bahwa HTML adalah bahasa pemrograman, padahal bukan.

HTML adalah kependekan dari Hypertext Markup Language yang merupakan sebuah bahasa markup. HTML adalah kode untuk membuat struktur halaman suatu website yang menarik, saling terhubung satu dengan yang lainnya, dan yang pasti dapat diakses melalui internet. 

Awalnya html ditemukan oleh Tim Berners-Lee pada tahun 1991. HTML adalah solusi untuk membantu ilmuwan dalam mengakses dokumen, namun kini html semakin berkembang pesat di dunia pemrograman web. 

Bagi pemula yang ingin memulai belajar pemrograman web dan bingung belajar bahasa markup apa, HTML adalah jawabannya. HTML dianggap mudah dipahami oleh orang awam karena tag dasar html mudah dibaca dan diimplementasikan.

HTML biasanya ditempatkan atau disimpan pada sebuah file bernama file HTML. Isi dari file tersebut yaitu kombinasi simbol dan juga teks.

Fungsi HTML

Setelah kamu sudah mulai terbayang mengenai apa itu HTML. Perlu diketahui, bahasa markup ini memiliki beberapa fungsi. Berikut apa saja fungsi-fungsinya:

1. Berfungsi untuk Membuat Website

HTML memiliki fungsi utama untuk membuat halaman website. HTML adalah pondasi utamanya, lalu dalam pembuatan website HTML biasanya berpasangan dengan CSS untuk mempercantik dan Javascript yang berguna untuk memberikan animasi dan kontrol fungsi.

 Dengan kode ini kamu bisa berbagi informasi melalui browserdi internet pada banyak orang. Namun, tentu saja kamu juga harus membeli layanan hosting agar halaman tersebut bisa diakses oleh banyak orang. 

2. Berfungsi sebagai Hyperlink

Hyperlink adalah salah satu fungsi HTML. Apa maksudnya? Jadi hyperlink ini yang akan mengarahkan kamu berpindah antar halaman melalui teks tertentu yang sudah terdapat kondisi di dalamnya. HTML adalah bahasa pemrograman yang juga memiliki peranan yang penting juga dalam ranah SEO (Search Engine Optimization). Karena berkat HTML, pemilik website bisa mengarahkan pengguna atau pembaca ke halaman website lain melalui hyperlink.

3. Sebagai Pondasi Website

HTML dibutuhkan untuk membuat tampilan website yang lebih menarik. Markup language ini juga menjadi pondasi utama pada saat pembuatan website. Karena nantinya, beberapa bahasa pemrograman akan diaplikasikan pada HTML.

4. Berfungsi untuk Menambah Multimedia pada Website

Website yang menarik dan tidak membosankan akan membuat para pengunjung betah. Dengan bahasa markup ini, kamu bisa menampilkan beberapa jenis multimedia pada website. Contohnya seperti menambahkan video, gambar, audio, animasi, dan media lainnya.  Hal tersebut bertujuan agar kamu dapat menerima informasi secara maksimal dan kamu tidak bosan membaca informasi di dalamnya.

5. Sebagai Penanda Teks dan Bagian Website

Bahasa markup yang satu ini juga memiliki fungsi lain sebagai penanda teks maupun bagian pada website. HTML adalah bahasa pemrograman yang bisa menandai kalimat dengan cetak tebal maupun miring dengan kode tertentu.

Selain itu, bahasa markup ini juga bisa difungsikan untuk menandai bagian website. Contohnya seperti bagian navigation, main, footer, dan header.

Banyak juga ya ternyata fungsi HTML ini, gimana makin tertarik bukan untukbelajar HTML?

Struktur HTML

Di dalam HTML terdapat kerangka inti yang membangunya seperti tag, element, dan attribute. Berikut penjelasannya:

1. Tag

Tag merupakan bagian pembuka dan penutup yang digambarkan dengan <..> </..> lalu dalamnya akan diisi dengan nama tag dan atribut yang nantinya akan diproses oleh browser. Setiap tag memiliki fungsinya masing-masing. Misalnya kamu ingin membuat judul maka menggunakan tag <h1></h1> dan jika ingin menambahkan image maka menggunakan tag <img></img>.

2. Element 

Element adalah keseluruhan dari awal tag hingga penutup tag. Berarti element berisi tag pembuka, isi tag, dan tag penutup. Contohnya seperti ini.

<h1>Belajar HTML Bersama DomaiNesia</h1>. 

Element tidak hanya berisi teks saja namun bisa berisi element lain yang disebut nested element. Gambarannya seperti ini.

<html>

          <body>

               <h1>Belajar HTML Dasar</h1>

          </body>

</html>

3. Attribute

Attribute adalah informasi yang bisa ditambahkan dalam setiap element untuk mengatur dan menambahkan sesuatu. Misalnya dalam penggunakan tag images. Maka dapat dilengkapi menjadi <img src=”html.jpg” alt=”html”/>. Dari tag tersebut artinya bahwa image akan memproses gambar komputer dan alt akan menampilkan tulisan “html” jika gambar gagal diproses.

Cara Kerja HTML

Sampai sejauh ini, mungkin kamu sudah mulai bertanya-tanya bagaimana cara kerja bahasa markup tersebut. Kok bisa sih dari kumpulan tag bisa menjadi website menarik yang bisa dibaca banyak orang? Simak penjelasan dari kami.

Bahasa markup ini memiliki cara kerja yang unik sehingga informasi yang kita muat bisa tampil di browser. Berikut cara kerjanya:

Sumber: Envato

• Setelah dokumen HTML dibuat pada aplikasieditor HTML, kemudian dokumen tersebut akan tersimpan dengan format .htm atau .html.
• Pengguna bisa membuat dokumen HTML lebih dari satu. Karena suatu website umumnya terdiri dari banyak halaman di dalamnya. Contohnya seperti halaman utama website, blog, dan lainnya.
• Dokumen HTML yang sudah dibuat akan berisi berbagai komponen HTML yang menyusun berbagai bagian. Contohnya seperti bagian isi konten, heading, paragraf dan sebagainya.
• File atau ekstensi HTML bisa kamu buka dengan menggunakan berbagai browser.
• Agar orang lain Untuk bisa mengakses informasi yang telah dibuat, kamu harus membuatnya online.  Jadi kamu harus mengunggahnya dulu dengan menggunakan layanan web hosting DomaiNesia Jadi, HTML adalah bahasa markup yang berfungsi setelah menyewa layanan web hosting untuk mengunggah file tersebut ke website.
• Setelah itu, browser kemudian bisa membaca dan juga melakukan rendering terhadap file HTML menjadi tampilan website yang utuh  dan ditampilkan menjadi website yang bisa kamu lihat di layar laptop dan diakses banyak orang.Baca juga : Cek Domain Yang Tersedia

Beberapa Contoh HTML

Untuk kamu yang ingin terjun di dunia web developer, berikut sudah kami rangkum beberapa contoh tag dasar HTML yang sering digunakan.

1. HTML Basic

Sesuai namanya, HTML basic ini adalah bentuk dasar bahasa markup tersebut. Beberapa contohnya seperti dokumen HTML dengan kode <!DOCTYPE html> yang berfungsi sebagai deklarasi untuk memberitahu browser bahwa dokumen tersebut ditulis menggunakan bahasa markup HTML. HTML 

Contoh HTML basic selanjutnya yaitu tag <html> yang berfungsi untuk menampung seluruh tag HTML dari awal hingga akhir atau penutup dengan kode </html>. Selain itu <head> </head> berfungsi sebagai penampung metadata informasi pada website dan juga <body></body> yang nantinya akan diisi oleh isi konten yang akan ditampilkan.

2. Images

Seperti yang kami singgung sebelumnya, HTML adalah bahasa pemrograman yang akan membuat website menjadi lebih menarik. Salah satunya yaitu dengan menggunakan images pada halaman website. Melalui HTML ini kita juga bisa mengatur ukuran gambar dan posisi gambar tersebut.

Gambar yang ditampilkan dapat berupa jpg, png, jpeg, dan gif. Images digambarkan dengan tag <img></img> yang memiliki beberapa atribut di dalamnya seperti src (source) yang berisi gambar yang akan ditampilkan dan alt (alternative description) yang akan menampilkan deskripsi dari gambar ketiga gagal ditampilkan.

Contoh penerapannya

<img src=”html.jpg” alt=”gambar html”/>

3. Font

Keunikan antara satu website dengan website yang lainnya bisa kita lihat dari jenis font yang digunakan. Di sinilah fungsi HTML berperan sebagai codinguntuk mengatur jenis font dan ukuran pada website yang kamu buat.

Contohnya pengaplikasian kode font dengan HTML seperti <h2 style=”font-family:Georgia;>text</h2>.

4. Anchor Text

Anchor text ini berisi potongan teks yang bisa diklik. Markup language ini juga berperan penting dalam dunia SEO (Search Engine Optimization). Karena dengan HTML kita bisa membuat anchor text yang digunakan untuk optimasi SEO off page maupun on page.

Pada dasarnya Google akan membaca anchor text tersebut untuk mengetahui isi dari website, sehingga anchor text juga mempengaruhi peringkat dalam mesin pencarian. Maka dari itu penting untuk kamu mempelajari anchor text agar website kamu mendapatkan peringkat yang baik.

Contoh bentuk kodenya yaitu <a href=”link”>text</a>.

Bagaimana Cara Menulis Tag HTML?

Meskipun terlihat mudah dan simpel dalam menulis tag html ternyata ada beberapa orang yang masih salah loh. Maka dari itu DomaiNesia mau kasih tips nih ke kamu gimana cara menulis html yang benar supaya kode yang kamu buat nggak error lagi dan mudah untuk dibaca developer lain. Berikut beberapa tips dari kami:

1. Tag wajib yang harus ada

Sempat disinggung sebelumnya bahwa html memiliki beberapa tag wajib yang harus ada pada setiap kode yang kamu buat. Kenapa demikian? karena itu sudah menjadi aturan dalam penulisannya. Berikut adalah tag-tag wajib yang harus kamu pahami keberadaannya:

• <!DOCTYPE html> — untuk deklarasi type dokumen
• <html> — tag utama dalam html
• <head> — untuk bagian kepala dari dokumen
• <title> — untuk judul web
• <body> — untuk bagian body dari dokumen

2. Gunakan huruf kecil

Meskipun HTML itu tidak sensitive case dalam penulisannya artinya kamu bisa menggunakan huruf besar, kecil, ataupun campuran dari keduanya, namun alangkah baiknya kamu tetap menggunakan huruf kecil saja karena akan terlihat rapih, mudah untuk dibaca, dan mudah diketik. 

contoh jika menggunakan huruf kecil:

<body>

          <p>menulis html<p>

</body>

contoh jika menggunakan huruf campur:

<boDY>

          <P>menulis html<P>

</BODY>

Terlihat lebih rapi yang menggunakan huruf kecil bukan? Nah mulai saat ini biasakan menggunakan huruf kecil ya DomaiNesians dalam penulisan tag html supaya kode kamu tetap rapi dan mudah untuk dibaca developer lain.

3. Buat kode yang simpel dan efisien

Dalam penulisan kode harus simpel dan efisien, hal itu bisa berpengaruh pada saat performa website kamu loh. Jadi semakin sedikit dan semakin simpel kode yang kamu buat, maka website tersebut akan semakin ringan dan cepat saat proses compile.

HTML Tidak Serumit yang Kamu Pikirkan