Memahami HTML dalam membuat halaman web | WebHTML | 01

Jika anda melihat sebuah halaman web pernakah anda terfikir bagaimana cara membuat halaman web sehingga menjadi sedemikian rupa? dari tata letaknya, elemen-elemennya, formulir isian, tulisan yang jika di klik akan menampilkan halaman website lainnya, dan lain-lain. Ketahuilah dasar dari desain halaman tersebut menggunakan desain kode dari bahasa HTML. Apa itu HTML? kali ini perpusteknik.com akan membahas mengenai “Pengertian HTML”. dengan topik berikut :

1. Memahami HTML dari pengertiannya

HTML merupakan singkatan dari Hypertext Markup Language. HTML merupakan bahasa khusus yang digunakan yang terdiri dari komponen-komponen untuk membuat halaman web, misalnya : saat anda melihat halaman website dari perpusteknik.com, halaman website yang anda lihat tersusun dari kumpulan kode-kode HTML. Tanpa bahasa HTML, halaman website tidak bisa tampil dengan baik. Apakah anda melihat tab menu dari website ini? Apakah anda melihat area postingan ini? dan apakah anda melihat sidebar dan footer dari website perpusteknik.com? semuanya memiliki susunan kode HTML. HTML sendiri terdiri dari 3 suku kata yaitu :

—- 1.1 Suku Kata HT (HyperText)

“HT” merupakan singkatan dari HyperText, yang berarti bukan sekedar text biasa. Text ini memiliki kelebihan dimana dapat memuat link dan gambar. Link adalah istilah yang dipakai saat anda mengklik kata tertentu akan mengarah ke alamat yang ditujukan dari link tersebut, contoh kliklah text berikut “Home Perpusteknik”, maka anda akan di alihkan ke halaman awal situs ini jika anda mengkliknya, begitupun dengan text yang memuat gambar dengan desain kode <img src=”https://……..”> maka dengan mengganti tulisan “https://…….” dengan link gambar yang sesungguhnya, maka akan tampil gambar yang dimaksud.

—- 1.2 Suku kata M (Markup)

“M” merupakan singkatan dari Markup, dimana Markup dapat diartikan sebagai penanda. Jadi, kode desain dari HTML terdiri dari tanda-tanda khusus yang memiliki fungsi masing-masing dalam menyusun sebuah halaman website. Misalnya, tanda dari tag <p> digunakan sebagai awal penanda untuk menulis kalimat dalam 1 paragraf, tag <em> digunakan sebagai tanda awal untuk mebuat teks menjadi miring dan tag <strong> digunakan sebagai awal penanda untuk membuat teks menjadi tebal. Lalu ada berapa Markup yang disediakan di dalam desain kode HTML untuk membagi fungsi-fungsinya dalam mendesain halaman website? jawabannya adalah banyak. Begitu banyak tag-tag yang di sediakan dalam desain kode HTML sehingga situs ini membutuhkan banyak bahasan pada kategori “Web Design & Web Programming“.

—- 1.3 Suku kata L (Language)

“L” merupakan singkaan dari Language, yang berarti adalah bahasa. Hal ini menjelaskan bahwa desain kode HTML adalah sebuah bahasa, bahasa yang dimaksud adalah bahasa yang dikhususkan untuk berinteraksi dengan browser, karena memang bahasa HTML bukan digunakan untuk berinteraksi dengan manusia. disisi lain HTML hanyalah sebuah bahasa yang tidak di program. Artinya, bahasa HTML itu bersifat statis dan tidak memiliki fungsi yang menjadikan website menjadi dinamis. Bahasa pemograman sendiri terdiri dari pemograman PHP, Javascript, python, Javascript, c, C#, java dan lain-lain. Jadi jangan menganggap HTML adalah bahasa pemograman ya…

2. HTML merupakan fisik dari halaman website

Halaman website merupakan halaman yang terdiri dari susunan kode HTML. Apa yang anda lihat di website perpusteknik.com semua tampilannya adalah bahasa HTML yang dipercantik dengan desain kode CSS, sedangkan untuk interaksi yang membuat situs ini menjadi lebih hidup menggunakan bahasa pemograman dari web programming. Ibarat kata, jika di ilustrasikan seperti manusia, HTML adalah angota tubuh manusia yang hanya jasadnya saja, sedangkan ruh dan cara berfikirnya membutuhkan bahasa pemograman dari PHP, Javascript, Python dan lain-lan. Disisi lain untuk mempercantik tubuh manusia tentu butuh pakaian yang menarik untuk dilihat, pakaian inilah adalah CSS. intinya, HTML merupakan bahasa yang digunakan untuk menyusun fisik dari halaman website tersebut. [sc name=”Iklan teknik sesuai konten”]

3. Seperti apa penerapan dari bahasa HTML ini?

Tanpa pikir panjang, saya akan mempraktekan kepada anda tentang bagaimana penerapan desain kode HTML pada halaman website, lihatlah desain kode html berikut :

<p> 1. Tulisan ini adalah kalimat paragraph pertama </p>
<em> 2. Tulisan ini adalah kalimat miring </em>
<strong> 3. Tulisan ini adalah tulisan tebal </strong>

Jika di generate pada browser maka desain kode tersebut tampilannya akan menjadi seperti ini :

1. Tulisan Ini adalah kalimat paragraph pertama

2. Tulisan ini adalah kalimat miring
3. Tulisan ini adalah tulisan tebal

keterangan :

1. Tanda dari <p> …. </p> membuat kalimat nomor 1 menjadi terpisah dengan kalimat nomor 2 dan 3.
2. Tanda dari <em> …. </em> membuat kalimat nomor 2 menjadi miring
3. Tanda dari <strong> ….. </strong> membuat kalimat nomor 3 menjadi tebal

4. Apakah hanya begitu saja cara memahami HTML?

Tidak, bahkan anda disarankan untuk mempelajari perkembangan desain kode HTML dalam menyusun halaman website. Sebab, semakin berkembangnya tekhnologi dalam dunia web, maka ada Markup/tanda dari bagian HTML yang sudah usang atau sudah ketinggalan zaman dan tidak disarankan lagi untuk di pakai dalam penyusunan halaman website. Disisi lain dalam memahami HTML, kode halaman tidak hanya tersusun dari markup <p> … </p>, <em> … </em> dan <strong> … </strong> tetapi masih banyak lagi, selain itu dalam penyusunan kode desain, anda harus menuliskan kodenya dari akar sampai ke cabang cabang kode desain atau biasa juga yang disebut dengan Parent and child. kode desain yang dibahas pada topik nomor 3, hanyalah contoh kecil saja. secara garis besar penyusunan kode desain yang benar dapat dilihat dibawah ini :

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="author" content="perpusteknik">
 <meta name="description" content="situs yang menyediakan berbagai macam ilmu teknik, program dan topik lainnya">
 <meta name="keywords" content="Teknik sipil, teknik arsitektur, teknik informatika, program teknik">
</head>
<body>
 <h1> Apa itu perpusteknik.com ? </h1>
 <p> Perpusteknik.com merupakan situs yang menyediakan berbagai macam ilmu teknik, ilmu program dan Topik lainnya, <strong> Kunjungi situsnya </strong> di : <a href="https://perpusteknik.com"> perpusteknik.com </a> </p>
</body>
</html>

Jika desain kode di atas digenerate pada browser contoh : browser mozila firefox, maka tampilannya akan menjadi seperti ini

Contoh penyusunan desain kode html dalam membuat halaman website juga dapat anda lihat pada tautan berikut : Cara membuat halaman web sederhana

5. Seberapa penting memahami kode HTML?

Sangat penting !! kepentingan ini di tujukan bagi orang-orang yang ingin berkecimpung di dunia web designer. Seperti orang yang merintis karya di platform-platform blog contohnya : platform blogspot, dimana dalam mengatur desain tema harus memahami kode-kode html yang telah dibuat oleh “pembuat tema”, meskipun tidak semuanya harus dipahami, tetapi tetap saja memahami HTML merupakan hal yang sangat vital dan sangat dibutuhkan oleh web designer, apalagi jika anda berniat ingin membuat CMS (Content Managemen System) sendiri dalam membuat halaman-halaman website. walaupun dalam 1 halaman sudah terdiri dari berbagai macam campuran kode-kode web desain dan web programming, memahami HTML adalah pelajaran yang sangat dasar dan mesti anda pahami dengan cermat.

[su_note]Catatan : Saat anda membaca konten diatas, mungkin anda merasa kesulitan istilah-istilah lainnya, untuk itu fokuskanlah dulu perhatian anda ke pembahasan materi HTML.[/su_note]

[sc name=”Subscribe website ini”]