Kursus Web : HTML [Bagian 1]

By -
Pada bagian ini, team ensiklo mulai menyediakan tutorial dasar web secara bertahap dilengkapi dengan contoh-contoh dan ruang simulasi untuk para penggunanya. Harapannya adalah dapat menjadi manfaat bagi siapapun untuk mengikuti perkembangan dunia internet yang semakin maju. Bagian pertama, akan mengulas secara umum tentang teknologi web beserta elemen-elemen dasar. Bagian lainnya akan membahas bagian detail HTML.

Protokol HTTP dan Bahasa HTML

Komunikasi data digital seperti misalnya internet, dirancang melalui kanal-kanal imajiner tertentu yang dinamakan protokol. Protokol paling banyak digunakan dan mendominasi jalur data digital internet adalah protokol HTTP. Secara konsep, komunikasi data melalui protokol HTTP menggunakan konsep client-server. Server adalah penyedia layanan web, dan client adalah pengguna layanan (peminta layanan) web. Saat pengguna melakukan akses internet dengan menggunakan browser Mozilla Firefox misalnya, sebenarnya si pengguna sedang menggunakan web client berupa browser Mozilla Firefox, dan melakukan akses ke server internet. Saat melakukan akses tersebut, server yang mungkin memiliki sistem operasi Linux, akan memberikan materi / content data digital dalam wujud HTML. HTML (Hypertext Markup Language) telah dipilih sebagai bahasa bersama antar platform network untuk protokol HTTP (Hypertext Transfer Protocol). HTML tersusun dari serangkaian kode HTML yang disusun dengan format text, dan diberikan ekstensi .html atau .htm. Kode halaman HTML tersebut akan diterjemahkan oleh browser menjadi format-format tertentu, seperti misalnya : warna dasar HTML, warna depan, ukuran huruf, font (jenis huruf), sisipan gambar, sisipan media lainnya. Bahasa HTML bukan merupakan bahasa pemrograman, namun kode yang akan diterjemahkan oleh browser. Bahasa HTML berkembang seiring dengan kebutuhan jaman. Perkembangan bahasa HTML ditandai dengan munculnya versi baru dari bahasa HTML. Bahasa HTML paling baru, telah mencapai bahasa HTML versi 5 atau sering disebut dengan HTML5. Versi ini lebih mendukung adanya media dan animasi, serta dukungan terhadap komunikasi data yang lebih baik.

Struktur Bahasa HTML

Bahasa HTML tersusun atas elemen-elemen HTML. Elemen-elemen HTML tersebut, akan dibentuk dan ditandai dengan menggunakan tag-tag HTML. Tag adalah suatu penandaan yang dimulai dengan tag pembuka dan tag penutup. Seluruh obyek yang berada di antara tag pembuka dan penutup, akan terkena efek fungsi tag tersebut. Seperti contoh pemberian penggunaan tag adalah seperti berikut:

Susunan bahasa HTML sendiri tersusun secara bertingkat dan sistematis (hirarki). Sebuah halaman HTML akan dimulai dan diakhiri dengan tag pembuka dan penutup HTML.

Selanjutnya di dalam halaman HTML akan terdiri dari elemen-elemen HTML lainnya seperti head, body, dan lain sebagainya. Sebuah elemen HTML bisa saja memiliki sub-elemen HTML di dalamnya. Sebagai contoh adalah seperti berikut:

Elemen-elemen HTML

Berikut di bawah, merupakan contoh-contoh tag HTML yang umum digunakan pada sebuah halaman HTML. Adapun beberapa jenis tag belum dibahas pada bagian ini. Untuk tag-tag berikut adalah merupakan tag dasar sesuai dengan tugas masing-masing tag:

Fungsi Tag
Pembentuk bidang html, body, div, span
Format Huruf font, i, strong, strike, big, small, cite, center
Format Huruf head h1, h2, h3, h4, h5, h6
Paragraf p
Title title
Penanda pindah baris br
Pemberian garis hr
Penyisipan media img, embed
Link atau tautan a href, mailto
Bulleting (butir), dan Numbering (penomoran) ul, ol, li
Form (pembentuk formulir) form, input, textarea, button, select:option, fieldset
Maping dan koordinat bidang map
Penyisipan stylesheet, favicon link
Penyisipan bahasa pemrograman sisi client script

Tidak semua tag dapat memiliki penutup tag. Beberapa tag yang tidak harus memiliki penutup adalah : br, hr, link, img. Butir-butir diatas, merupakan bahasa dasar HTML versi 4 yang masih kompatibel atau dapat diterapkan dalam browser-browser terbaru yang mendukung HTML5. Untuk halaman HTML5 akan dijelaskan pada bagian lain. Tag-tag diatas, sudah dapat digunakan untuk membentuk sebuah halaman HTML. Sebagai contoh, urutan berikut dapat diikuti untuk percobaan pembuatan sebuah halaman HTML. Alat yang harus digunakan hanyalah sebuah text editor: dapat berupa notepad (windows), atau notepad++ (windows), atau bagi para pengguna Linux dapat menggunakan gedit, vi (jika familiar), nano, mcedit, atau Sublime Text (semua sistem operasi).

Susunan tersebut dapat disimpan dengan nama : bagian1.html, cara penyimpanan untuk notepad adalah dengan cara mengubah type file yang semula text menjadi : All Files. Trik lain yang dapat digunakan adalah memberi nama : bagian1.html dengan diapit dengan tanda kutip -> “bagian1.html”. Setelah dilakukan penyimpanan, dapat dilihat hasilnya dengan melakukan klik kanan pada file tersebut pada file explorer, dan dibuka dengan browser kesayangan.
save as notepad

bagian1

bagian2

bagian3

Atribut Elemen HTML

Setiap tag di dalam elemen HTML memiliki atribut. Atribut itu akan menentukan sifat-sifat elemen HTML. Sifat-sifat itu bisa berupa banyak hal. Misal : warna latar, warna depan, jenis font, ukuran font, lebar, tinggi, ketebalan dan lain sebagainya. Atribut yang bisa dimiliki oleh tag HTML tergantung pada jenis tag masing-masing. Setiap tag akan memiliki atribut yang khas, sesuai dengan kebutuhan tag. Berikut beberapa contoh atribut yang sering digunakan pada elemen HTML:

  • id : penandaan ID sebuah elemen, dengan fungsi ini sebuah elemen dapat dikenali, diambil contentnya, diatur properti sifatnya
  • class: sama dengan ID, namun dalam satu halaman HTML tidak dapat memiliki lebih dari satu ID, namun bisa banyak class. Satu elemen juga dapat memiliki banyak class, tapi hanya satu id
  • color : pewarnaan, misalnya pewarnaan teks
  • bgcolor : pemberian warna latar belakang
  • style : pemberian style seperti warna, tinggi, tebal dan properti lainnya

Cascading Style Sheet / CSS

Beberapa atribut yang melibatkan properti atau format sebuah tag, selanjutnya tidak lagi disarankan digunakan langsung dalam atribut, namun dapat dilakukan sekaligus dengan menggunakan style. Selanjutnya, style tersebut akan dikemas dalam satu file tersendiri yang akan membuat aturan properti bagi banyak halaman HTML. Inilah yang sering disebut dengan CSS atau Cascading Style Sheet. Mengenai CSS akan sampai pada bagian lain pada situs ini.

Simulasi

Bagian ini masih mengulas secara umum tentang HTML. Untuk beberapa ulasan lainnya, akan dikembangkan pada bagian selanjutnya, pada tag halaman yang sama. Halaman ini menyediakan ruang simulasi untuk beberapa elemen HTML. Namun karena keterbatasan dan alasan keamanan pengguna sendiri, simulasi ini hanya akan berjalan beberapa tag dan atribut saja, khususnya formating Font, dan penyisipan gambar. Selamat mencoba.

Ruang Simulasi



Ruang Hasil

Tukang panggul perangkat keras dan perangkat lunak yang memiliki hobi minum kopi, dan juga bekerja sebagai OB --Ofifice Boy serta menulis di www.bimosaurus.com

1 Comment to Kursus Web : HTML [Bagian 1]

Leave a Reply

Your email address will not be published. Required fields are marked *