HTML - Memulai Masuk ke Dunianya

HTML atau HyperText Markup Language merupakan bahasa markup yang sangat terkenal. Siapa yang tidak tahu HTML? HTML digunakan untuk membangun website. Selama ini kita menggunakan internet, sehingga kita sudah biasa berinteraksi dengan website. Nah, website tersebut dibangun dengan HTML. HTML diketahui mulai dirancang oleh Tim Berners-Lee pada tahun 1990. Dan sekarang, pengembangannya dilakukan oleh W3C (World Wide Web Consortium). Ada varian lain dari HTML, yaitu XHTML. Bedanya, XHTML menggunakan XML (Extensible Markup Language) sebagai bahasa utama. Maksudnya, XHTML berbeda dengan HTML karena XHTML merupakan aplikasi XML (XML Application). Adapun HTML saat ini telah mencapai HTML5 (sebelumnya HTML4). Dan W3C sendiri merekomendasikan untuk menggunakan HTML5. Kesimpulannya, HTML merupakan bahasa yang digunakan untuk mendeskripsikan suatu dokumen untuk diproses di peramban (browser).

Dalam tulisan ini, saya akan membahas mengenai pengenalan awal untuk memulai belajar HTML. Di dalam HTML, ada elements, attribute, data types, dan entities. Kenapa sangat penting untuk mengenal bagian ini? Jika Anda ingin menguasai HTML, tentu saja ini sangat penting. Berbeda dengan seseorang yang hanya "bisa". Setelah mengetahui bagian-bagian itu, kita akan berlanjut ke struktur umum HTML. Kemudian, akan saya bahas sedikit bagaimana cara kita supaya cepat menguasai HTML.

Elements

Elements atau biasa disebut tags ini merupakan hal yang harus kita ketahui. Karena dengan tag ini lah kita mendeskripsikan apa yang kita buat. Tag dalam HTML saat ini sangat banyak. Tergantung pada fungsinya. Ada tag untuk melakukan text processing seperti huruf tebal (bold). Ada juga tag untuk membuat inputan. Tapi, secara umum (dilihat dari struktur HTML) yang sering/wajib digunakan yaitu tag !doctype, html, head, title, dan body. Tag ditulis dengan memberikan simbol kurang dari (<) di awal, kemudian lebih dari (>) di akhir. Sehingga, penulisannya menjadi <tag> (tag untuk html berarti <html>). Kemudian, cara untuk menutup tag dengan memberikan garis miring (/) setelah simbol/tanda kurang dari. Maka, hasilnya akan menjadi <html>isi di dalam tag</html>. Walaupun beberapa tag tidak memerlukan ini, sebagai contoh tag untuk membuat baris baru yaitu br, tag ini hanya ditulis <br> saja.

!doctype

Tag ini digunakan di awal baris. Tujuannya yaitu untuk mendeskripsikan tipe dokumen (doctype yaitu document type) yang kita tulis. Karena yang kita tulis adalah HTML, maka ditulis seperti ini:

<!doctype html>

Kode di atas merupakan penampakan dari penggunaan HTML5.

HTML

Sebenarnya, tag ini tidak wajib ditulis setelah penulisan !doctype. Walaupun aneh jika kita tidak menulisnya, tapi sah-sah saja. Karena, di awal dokumen kita telah mendeskripsikan dokumen tersebut. Tapi, lebih baik di tulis, karena ia merupakan salah satu tag dasar yang wajib ditulis di HTML4. Penulisannya:

<html>
...
</html>

Head

Di dalam tag <html>, ada tag <head> yang fungsinya untuk meletakan informasi-informasi yang berhubungan dengan dokumen seperti tag <meta>. Di dalam tag <head> ada tag <title> yang fungsinya untuk mendeskripsikan judul dokumen. Tag ini juga merupakan tag dasar yang sangat penting. Penulisannya:

<html>
  <head>
    ...
  </head>
</html>

Title

Di dalam tag <head>, ada tag <title> yang fungsinya untuk mendeskripsikan judul/nama dokumen yang kita tulis. Jika tag <title> tidak ada, maka di judul tab browser kita akan menjadi alamat URL. Isi dari tag <title> akan muncul di tab browser kita. Penulisannya:

<html>
  <head>
      <title>Judul Halaman</title>
  </head>
</html>

Body

Nah, ini salah satu tag yang sangat penting. Di dalam tag <body> ini lah semua konten isi dokumen kita diletakkan. Posisinya ada di bawah penutup tag </head>. Namun tetap di dalam tag <html>. Penulisannya:

<html>
  <head>
      <title>Judul Halaman</title>
  </head>
  <body>
    ...
  </body>
</html>

Comments

Sama halnya dengan bahasa pemrograman lainnya. HTML juga ada tag khusus yang akan diabaikan. Yaitu tag <!-- -->. Penulisannya:

<!-- Isi Komentar yang akan Diabaikan -->

Tapi, tahu kah Anda? Tag komentar dapat digunakan di browser Internet Explorer sebagai identifier untuk mengatasi kompabilitas versi. Contohnya:

<!--[if lt IE 7]> ... <![endif]-->

Maksudnya, jika versi IE (Internet Explorer) kurang dari 7 (di bawah versi 7) maka lakukan (...). Biasanya, ini digunakan untuk memuat dokumen JavaScript tambahan untuk mengatasi masalah kompabilitas. Tulisan "lt" maksudnya lower than atau (di bawah/kurang dari).

Struktur Umum HTML

Dari tag umum yang ada di atas, maka struktur umum HTML seperti ini:

<html>
  <head>
      <title></title>
  </head>
  <body>
  </body>
</html>

Attributes

Atribut (attribute) pada HTML bermacam-macam. Ada yang secara umum atribut tersebut dapat digunakan di semua tag, tapi juga ada yang khusus. Tapi, ada juga tag yang tidak memiliki atribut. Atribut bisa dibilang sebagai pengaturan tambahan untuk suatu tag. Contoh atribut yang umum yaitu style, title, onClick, class, id, dll. Cara penggunaannya:

<tag atribut>
<!-- contoh: -->
<input required>

Beberapa atribut memiliki pengaturan bawaan. Tapi, beberapa diantaranya tidak sehingga harus diatur oleh kita. Untuk aturan yang kita tulis, disebut data type di dalam HTML. Contoh:

<input id="username">

Di dalam satu tag, kita bisa tambahkan berapa pun atribut. Seperti:

<input id="username" type="text" ...>

Tag input merupakan salah satu tag yang tidak perlu ditutup dengan garis miring (di dalam HTML5, berbeda jika di dalam HTML4).

Data Types

Seperti yang saya sebutkan sebelumnya, data type (tipe data) merupakan sesuatu yang kita tulis di dalam atribut. Bisa berbentu angka (0-9), atau huruf (a-z), atau boolean (true/false). Kita dapat memasukan apa saja ke dalam data type, biasanya script dari JavaScript juga dimasukan melalui atribut onClick, onMouseOver, dll. Bahkan, script tersebut juga ada yang ditulis di dalam atribut href untuk membuat link pada tag <a>.

Entities

Apa itu entities? Entites merupakan sebuah kode khusus yang hasil keluarannya diambil dari unicode ataupun alphanumeric. Simbol-simbol aneh yang tidak dapat kita ketik dapat kita tampilkan dengan entities. Contohnya:

&copy; <!-- Keluarannya: © -->

Langkah Belajar

Setelah membaca tulisan ini, langkah belajar berikutnya yaitu mempelajari elemen-elemen (tags) yang biasa digunakan seperti untuk membuat heading, paragraph, link, memuat gambar, dll. Setelah mengenal banyak elemen, barulah mulai pelajari atribut-atribut yang dapat digunakan. Cara tercepatnya adalah praktik dengan cara "mengotak-atik" kode yang ada. Coba ubah-ubah dan lihat hasilnya. Ambil source dari internet kemudian "otak-atik", begitulah cara tercepat supaya bisa menguasai HTML. Setelah belajar HTML, sebaiknya pelajari CSS (Cascading Style Sheet) yang digunakan untuk mendesain (mempercantik HTML). Tidak enak bukan jika yang kita lihat hanya hitam dan putih? Maka dari itu pelajari CSS setelah HTML sudah dirasa cukup kuat.

Setelah mempelajari HTML dan CSS. Apakah cukup? Tentu saja belum. Saya sarankan Anda pelajari JavaScript (ECMA Script) untuk membuat halaman website yang interaktif. Dengan CSS3 kita sudah dapat membuat animasi, namun dengan JavaScript kita dapat membuat yang lebih keren!

Penutup

Setelah mempelajari HTML, mata kita akan terbuka dan merasakan asyiknya ngoding. Banyak sekali materi yang belum kita pegang. Karena itu, jangan pernah merasa puas atas apa yang telah kita dapatkan sekarang. Karena ilmu HTML sendiri masih luas. Jika hanya "bisa", mungkin cukup. Tapi untuk menjadi professional yang menguasai HTML lebih dalam, masih sangat kurang dan perlu terus belajar. Saya juga masih belajar, jika ada kesalahan mohon dikoreksi dan dimaklumi serta dimaafkan. Saya hanyalah manusia biasa yang mencoba untuk menjadi penulis dan membagikan pengalaman. Terima kasih.

Baca

Free Pascal - Memulai Masuk ke Dunianya

Free Pascal merupakan salah satu bahasa pemrograman favorit dalam kompetisi yang menggunakan bahasa pemrograman. Syntax kode-nya mudah dibaca sehingga bahasa ini menjadi pilihan di Indonesia. Katanya, Free Pascal mudah dipelajari karena itu dalam soal OSN Komputer tingkat Kabupaten dan Provinsi menggunakan Free Pascal sebagai pseudo-code-nya. Dalam tulisan ini, saya akan bahas bagaimana memulai belajar bahasa Free Pascal. Sebenarnya, nama bahasa pemrograman ini Pascal, namun kita menggunakan Free Pascal sebagai compiler-nya. Selain Free Pascal, ada Turbo Pascal yang populer di sistem opersi Windows. Kenapa kita belajar Free Pascal? Karena dalam sistem judment tokilearning.org menggunakan Free Pascal. Sehingga lebih baik pelajari Free Pascal yang digunakan di dalam semua sistem judment.

Secara umum, untuk mengenal sebuah bahasa pemrograman, kita akan mulai dengan sedikit sejarah bahasa pemrograman tersebut. Kemudian berlanjut ke materi input/output, if statement, looping, lalu sedikit tentang function (method).

Sejarah

Pengembang utama Free Pascal adalah Florian Klämpfl. Ia menulis compiler ini dengan bahasa Object Pascal dan Assembly. Veris 1.0 dirilis pada bulan Juli 2000. Nama Free Pascal Compiler disebut dengan fpc yang kini (31 Desember 2015) telah menginjak versi 2.7.1.

Struktur Umum Kode

Di dalam Free Pascal, secara umum struktur kode-nya terdiri dari nama program (program), variabel (var), pembuka (begin), dan penutup (end.). Namun terkadang ada juga yang menambahkan fungsi definisi untuk compiler (uses). Jika dibuat, maka struktur seperti ini:

program ...; // ... diisi dengan nama program, tanpa spasi
uses ...; // ... diisi dengan module compiler yang ingin digunakan, ini optional, boleh tidak digunakan
var ...: ...; // ...: ... diisi dengan "nama variabel": "tipe data"
begin // pembuka
... // ... isi kode yang akan dijalankan
end. // penutup

Komentar

 Dalam bahasa pemrograman, ada yang namanya komentar. Komentar merupakan bagian yang diabaikan oleh compiler, sehingga apapun yang kita tulis tidak akan berpengaruh. Di dalam Free Pascal, kita dapat gunakan:

(* Ini Komentar *)
{ Ini Komentar }
// Ini Komentar

Perbedaan dari ketiga-nya yaitu untuk // hanya mengabaikan 1 baris. Sementara (* *) dan { } akan mengabaikan sebanyak apapun dari pembuka (* atau { hingga penutup } atau *).

Input/Output

Untuk masukan berupa variabel di dalam bahasa Free Pascal kita dapat gunakan perintah var. Kemudian diikuti dengan nama variabel serta tipe data-nya. Setelah itu, barulah kita berikan masukan. Sebagai contoh, saya akan buat variabel dengan nama "angka" serta dengan tipe data Byte. Secara umum, penulisannya seperti ini:

var angka: Byte = 5;
// atau
var angka: Byte;
begin
  angka := 5;
end.

Lalu, untuk keluaran, yang biasa digunakan merupakan write atau writeln. Write untuk menulis, serta writeln untuk menulis di satu baris tersendiri. Keduanya hanya mau diberi kutip satu ('). Jika diberikan kutip dua (") maka akan muncul error dan kode tidak di compile. Secara umum penulisannya seperti ini:

write('A');
write('B');
// maka keluaran: AB
writeln('A');
writeln('B');
// maka keluaran:
// A
// B
writeln(angka); // Asumsikan angka telah didefinisikan di atas
// maka keluaran:
// 5

Keduanya juga dapat ditulis kosong seperti ini:

write;
writeln;

If Statement

Di dalam bahasa pemrograman, sangat erat dengan yang namanya logical expression. Nah, hal tersebut bersangkutan dengan if statement. Bisa dibilang, if statement merupakan hal wajib ada sama halnya dengan input/output. Di dalam Free Pascal, penggunaan if statement secara umum seperti ini:

if kondisi then perintah;

Untuk 1 perintah, sebaiknya gunakan if-then dalam satu baris. Atau bisa juga:

if kondisi then
  perintah;

Dan untuk lebih dari 1 perintah, bisa gunakan if-then-begin-end seperti ini:

if kondisi then
begin
  perintah;
  perintah;
  // ...
end;

If digunakan untuk mencari nilai benar. Misal, if kondisi = ketentuan. Jika kondisi sama dengan ketentuan, maka akan bernilai benar dan kode di bawah if tersebut akan dieksekusi. Lalu, bagaimana jika bernilai salah? Kode dalam if tidak akan dieksekusi, namun akan berjalan ke else apabila didefinisikan.

if kondisi = ketentuan then
  perintah // jika bernilai benar
else
  perintah; // Jika bernilai salah

Jika perintahnya lebih dari 1, maka penggunaannya seperti ini:

if kondisi = ketentuan then
  begin
    // perintah...
  end
else
  begin
    // perintah...
  end;

"=" di dalam kode tersebut disebut ekspresi. Lalu, apa saja yang dapat kita gunakan di dalam Free Pascal?
Secara umum, kita dapat gunakan apa yang ada di tabel untuk ekspresi.

Ekspresi	Penjelasan
=	Sama dengan. Apabila kondisi sama dengan ketentuan maka benar
>	Lebih dari. Apabila kondisi lebih dari ketentuan maka benar
>=	Lebih dari sama dengan. Apabila kondisi lebih dari sama dengan ketentuan maka benar
<	Kurang dari. Apabila kondisi kurang dari ketentuan maka benar
<=	Kurang dari sama dengan. Apabila kondisi kurang dari sama dengan ketentuan maka benar
<>	Tidak. Apabila kondisi tidak sama dengan ketentuan maka benar

Di dalam statement, kita dapat menggunakan boolean untuk multiple condition. Misal, jika kondisi = ketentuan atau kondisi <> ketentuan.

if (kondisi1 = ketentuan1) or (kondisi2 <> ketentuan2) then
  perintah;

Secara umum, boolean yang digunakan di dalam if yaitu or dan and. Or (atau) apabila salah satunya bernilai benar, maka ia akan bernilai benar. And (dan) apabila salah satunya bernilai salah, maka ia akan bernilai salah. Jika Anda ingin lihai dalam penggunaan ini, sebaiknya Anda mulai belajar "Logika Matematika".

Else If dilakukan secara manual di dalam Free Pascal. Karena tidak ada perintah else-if.

if kondisi = ketentuan then
  if kondisi2 = ketentuan2 then
    perintah;

if kondisi = ketentuan then
  if kondisi2 = ketentuan2 then
    perintah
  else
    perintah
else
  perintah;

Looping

Looping di dalam Free Pascal secara umum ada 3, yaitu for, repeat, dan while.

For

For digunakan untuk kasus-kasus yang biasanya menggunakan fixed number. Semisal, saya mau looping sebanyak 10 kali dan saya butuh variabel berapa kali saya sudah melakukan loop.

var i: Byte;
begin
  for i := 1 to 10 do
    writeln('Saya sudah looping sebanyak ', i, 'kali!');
end.

Sama halnya dengan if statement, jika di dalam for kita akan memberikan perintah lebih dari satu, maka gunakan block begin-end.

var i: Byte;
begin
  for i := 1 to 10 do
    begin
      // perintah
      // perintah
    end;
end.

Di kode tersebut terdapat perintah "to" yang maksudnya hingga. Semisal, saya ingin looping dari 1 hingga 10. Maka gunakan to, "1 to 10". Lalu, bagaimana jika saya ingin perhitungan mundur? Anda bisa gunakan downto. Semisal, saya ingin looping dari 100 hingga 1. Maka gunakan downto, "100 downto 1".
Sebenarnya selain for-to, ada for-in. Tapi, for-in digunakan dalam kasus yang memiliki Enumeration (daftar barisan data). Hal-hal yang sifatnya advanced akan dibahas di tulisan tersendiri.

Repeat

Seperti namanya, fungsi dari repeat yaitu ulangi perintah hingga ke batas yang ditentukan (repeat-until). Untuk penggunaannya:

repeat
  perintah;
until ketentuan;

Semisal, saya ingin ulangi perintah hingga 100 kali dengan variabel i = 1 (dari 1 hingga 100).

repeat
  writeln('Cetak ini terus!');
  i := i+1; // jika variabel i tidak ditambahkan secara manual, maka ini akan berulang terus selamanya
until i >= 100;

Perbedaan antara for dan repeat telah terlihat bukan? For secara otomatis melakukan penambahan +1 pada variabel patokannya. Sementara repeat, jika tidak ditambahkan secara manual ia akan terus mengulanginya. Karena, variabel until tidak akan pernah tercapai.

While

Penggunaan while hampir sama dengan repeat. Bedanya, pada repeat pengecekan ketercapaian kondisi dilakukan saat akhir perulangan. Sementara pada while, akan dicek saat awal memulai perulangan. Dan while akan melakukan perulangan jika kondisi belum keluar dari ketentuan. Adapun penggunaannya:

i := 1;
// Ulangi hingga variabel i di atas 10
while i < 10 do
  perintah;
  i := i+1; // penambahan manual
while i < 10 do
  begin
    perintah;
    perintah;
    i := i+1; // penambahan manual
  end;

Tambahan

Di dalam looping, Anda dapat bermain dengan perintah break dan continue. Break digunakan untuk menghentikan looping. Sementara continue digunakan untuk melewati dan langsung ke looping yang selanjutnya. Adapun kode yang dilewati hanya kode yang berada di bawahnya.

i := 0;
repeat
  i := i+1;
  if i = 2 then continue;
  writeln(i);
  if i = 5 then break;
until i > 10;

Kode di atas akan berjalan looping dari 1 hingga 10. Namun, pada saat i = 2 kode di bawahnya tidak akan dieksekusi dan langsung berlanjut ke proses berikutnya. Lalu, pada saat i = 5, kode akan dihentikan dan keluar dari looping. Sehingga keluaran akan menjadi:

1
3
4
5

Function

Function digunakan untuk membuat sebuah method yang akan digunakan berkali-kali untuk menghemat penulisan. Di dalam Free Pascal, function ditulis di atas pembuka (begin). Adapun penulisan untuk function seperti ini:

function name(parameter): dataType;
begin
  // isi function
end;

Contoh:

var i: Integer;
function tambah(i: Integer): Integer;
begin
  i := i+1;
  tambah := i; // return value di dalam Free Pascal
end;

Selain function, ada procedure. Perbedaannya, procedure tidak mendukung return value sehingga hanya digunakan untuk hal-hal yang bersifat langsung berupa keluaran. Tapi, yang paling sering digunakan bukanlah function, namun procedure karena jarang ada orang yang bermain return value di Free Pascal. Apa yang dibuat, langsung dikeluarkan. Seperti itulah.

Procedure

Penggunaannya tidak jauh berbeda dari function.

var i: Integer;
procedure tambah(i: Integer);
begin
  i := i + 1;
  writeln(i);
end;

Dilihat dari perbadingannya sudah terlihat bukan? Seperti yang saya jelaskan sebelumnya di dalam function.

Penutup

Demikian tulisan saya yang membawa Anda memulai belajar bahasa Pascal dengan menggunakan compiler Free Pascal. Adapun yang kita bahas hanyalah sebagian kecil, yaitu secara umum. Kita sekarang telah mengenal komentar, input/output, if statement, function serta procedure, dan looping di dalam bahasa Pascal. Masih sangat banyak yang belum saya jelaskan. Dari masing-masing perintah seperti if, while, repeat, dan lain sebagainya masih banyak yang belum dijelaskan dan dijabarkan.
Saya hanyalah manusia biasa yang mencoba menjadi penulis. Saya juga masih baru belajar. Jadi, apabila ada kesalahan harap dikoreksi dan dimaklumi serta dimaafkan. Saya akan memperbaikinya segera apabila terdapat kesalahan. Terima kasih.

Baca