Belajar HTML: Pengertian dan Pengenalan Struktur Dasar - Part 1

Learn HTML

HTML merupakan pondasi dasar dalam membangun suatu website, bahkan menurut situs W3School hanya dengan HTML Anda sudah dapat membangun situs web sendiri. Ini menandakan bahwa HTML benar-benar sangat dibutuhkan sebagai landasan utama seseorang membangun halaman web.

Belajar HTML biasanya dipelajari oleh siswa RPL sedangkan saya berada sebagai siswa TKJ, tapi karena penasaran dan sedang terjun dalam dunia website maka saya ingin mengajak Anda untuk mempelajari sekaligus berdiskusi.

Baca Juga: Cara membuat DNS Server menggunakan bind9 di Linux.

HTML merupakan singkatan dari Hyper Text Markup Language yang berarti bahasa markah hiper teks. HTML tersusun dari Element, Tag, Attribute, dan Content, dengan menguasai bahasa markah ini kita sudah bisa membuat web statis.

Dalam KBBI, Hyper diartikan sebagai 'bentuk terikat' dan Markup atau markah diartikan sebagai 'tanda'.

Pengertian HTML

HTML adalah bahasa markah utama yang digunakan untuk membuat sebuah web, terdiri dari serangkaian element dimana setiap element HTML diwakili oleh tag pembuka - tag penutup.  Didalam tag terdapat konten, konten inilah yang akan ditampilkan pada browser.

save file html

Untuk membuat HTML Anda cukup menggunakan aplikasi text editor seperti notepad dan menyimpannya dengan format .html atau .htm, namun untuk mempermudah saya sarankan gunakan aplikasi text editor yang telah mendukung  syntax highlighter seperti Notepad++ dan Sublime Text, sesudah menyimpan file tersebut Anda dapat membukanya menggunakan browser apapun, entah itu Microsoft Edge, Internet Explorer, Mozilla atau Chrome.

Dilansir dari blog arlinadzgn.com, syntax highlighter adalah:
Syntax Highlighter adalah fitur khusus sebuah proses pemindahan kode bahasa pemrograman tertentu dengan tulisan, warna teks, posisi sama persis dengan yang terdapat pada sebuah kode bahasa pemrograman untuk di pindahkah maupun di salin ke dalam bentuk tulisan lain supaya lebih mudah dalam membaca atau mempelajarinya.

Saat ini saya mempelajari HTML menggunakan aplikasi bernama Sublime Text karena merasa nyaman dengan tampilan dan fitur yang dimilikinya, berikut adalah tampilan text editor Sublime Text yang digunakan untuk menuliskan HTML.


Dari gambar sudah terlihat jelas, dengan ini mempermudah untuk membedakan bagian Element, Tag, dan Attribute yang akan kita bahas dibawah ini.

Pengenalan Stuktur Dasar HTML

Seperti penjelasan sebelumnya bahwa HTML terdiri dari serangkaian element yang di simpan secara terstruktur agar konten yang ditampilkan pada browser sesuai dengan apa yang kita buat.

Umumnya HTML terdiri dari serangkaian kode berikut:
<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>
Bagian <!DOCTYPE html> artinya mendeklarasikan bahwa tipe dokumen tersebut adalah HTML5. Tentu saja setiap versi memiliki pendeklarasian yang berbeda.

<html> ... </html> adalah elemen sumber dari halaman HTML, semua tag ditulis dalam bagian ini, teks pada dokumen HTML diawali dengan <html> dan ditutup dengan </html>.

<head> ... </head> pada jangkauan tag 'head' berisi informasi meta tentang dokumen, seperti penyimpanan kode CSS,  apapun yang ditulis dalam bagian head tidak akan ditampilkan sebagai konten di browser. Kecuali tag 'title' akan ditampilkan sebagai judul di bagian paling atas.

<body> ... </body> nah dalam tag 'body' inilah konten ditampilkan, segala sesuatu yang Anda tulis akan ditampilkan pada browser sebagai konten.

Element, Tag, dan Attribute HTML

Bagian-bagian dalam penulisan HTML

HTML identik ditulis dengan menggunakan tanda kurung siku dan ditutup dengan kurung siku ditambah tanda garis miring sebelum variabel dituliskan. Dalam penulisan tersebut terbagi atas beberapa bagian.

a. Element

Element adalah bagian yang memiliki jangkauan lebih luas dibanding bagian lainnya pada HTML, segala sesuatu yang terdapat dalam tag pembuka hingga tag penutup disebut sebagai element. Contoh:
<h2 align="center">Ini adalah konten dengan heading 2</h2>

b. Tag

Tag terdiri dari jenis, pembuka dan penutup. Penulisan tag menggunakan variabel atau nama yang sama seperti <h1> maka tag tersebut akan ditutup dengan </h1>, ciri tag penutup memiliki tanda garis miring dibagian awal sebelum variabel.

c. Attribute

Attribute pada HTML digunakan untuk melengkapi/memberikan tindakan pada content yang akan ditampilkan, penulisan attribute ditulis dalam tag pembuka setelah variabel yang ditandai dengan adanya tanda sama dengan (=) dan tanda kutip.
<p>siswa TKJ juga mempelajari <a href="https://www.kangefi.xyz/2019/12/pengertian-dan-unsur-desain-grafis.html" title="Dasar Desain Grafis">Dasar Desain Grafis<a></p>
Contoh diatas merupakan penggunaan attribute lebih dari satu yang dipisahkan dengan spasi, maka hasil yang akan Anda lihat di browser adalah:

siswa TKJ juga mempelajari Dasar Desain Grafis

d. Content

Content diapit oleh tag pembuka dan penutup, content lah yang ditampilkan pada halaman browser. Sebagai contoh saya akan mencoba menggunakan teks HTML berikut dan dibuka melalui Chrome.
<!DOCTYPE html>
<html>
<head>
 <title>Kang Efi</title>
</head>
<body>
 <h1>Blog Kang Efi</h1>
 <h2><a href="https://www.kangefi.xyz">kangefi.xyz</a></h2>
 <h3><a href="https://www.otakulen.com">otakulen.com</a></h3>
 <h4><a href="https://www.mbahbelajar.com">mbahbelajar.com</a></h4>
</body>
</html>
maka hasilnya jika kita buka pada browser seperti gambar berikut:


Untuk Part 1 saya rasa cukulah sampai di sini mengenai Belajar HTML: Pengertian dan Pengenalan Struktur Dasar, semoga bermanfaat. Dalam Part berikutnya kita akan mengenal beberapa HTML Attribute beserta fungsinya.

Kesimpulan

HTML adalah singkatan dari Hyper Text Markup Language merupakan bahasa markah standar dalam pembuatan halaman website. HTML terbentuk dari serangkaian element yang tersusun dari tag pembuka dan penutup. Dalam tag dapat ditambahkan attribute untuk memberikan tindakan pada konten yang akan ditampilkan di halaman browser, attribute HTML ditulis dalam tag pembuka.

Referensi:

0 Comments

Post a Comment