Aplikasi Web Interaktif

1. Dasar HTML

HTML (Hyper Text Markup Language) adalah sebuah bahasa Mark Up yang digunakan untuk membuat sebuah halaman website. di dalam dunia pemograman berbasis website(Web Programming) html menjadi pondasi dasar pada halaman website. sebuah file HTML di di simpan dengan ekstensi .html (dot html) dan dapat di eksekusi atau diakses menggunakan web browser(Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain). 

HTML memiliki beberapa element yang tersusun dari tag-tag yang memiliki fungsi nya masing-masing. seperti tag heading, paragraf, pembuatan form, tombol, list, membuat hyperlink atau link yang menghubungkan antar halaman website dan banyak lagi lainnya.

1.1. Fungsi HTML

HTML berfungsi sebagai pondasi sebuah halaman website. adapun yang dapat di lakukan dengan HTML adalah sebagai berikut :

• Membungkus element-element tertentu sesuai kebutuhan
• Membuat heading atau format judul
• Membuat Tabel
• Membuat List
• Membuat Paragraf
• Membuat Form
• Membuat Tombol
• Membuat Garis
• Membuat huruf tebal
• Membuat huruf miring
• Menampilkan gambar
• Menampilkan video
• Dan banyak lainnya 

Sampai saat ini HTML sudah sampai pada versi 5. HTML5 sudah memiliki banyak sekali fitur tambahan salah satunya dengan HTML5 memungkinkan kita untuk membuat streaming video tanpa bantuan flash.

untuk mengeksekusi atau menjalankan file html harus menggunakan web browser.

1.2. Tag HTML

Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link. Dalam HTML, tanda ini dikenal dengan istilah tag.

Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup. Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antara dua kurung siku: “<” dan “>”.

Berikut adalah format dasar penulisan tag HTML:

<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>

Sebagai contoh, perhatikan kode HTML berikut :

<p> Ini adalah sebuah paragraf </p>

• <p> adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf.
• </p> adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tanda forward slash (/)

Jika lupa memberikan penutup tag, umumnya browser akan “memaafkan” kesalahan ini dan tetap menampilkan hasilnya seolah-olah kita menuliskan tag penutup. Walaupun ini sepertinya memudahkan, tidak jarang malah bikin bingung.

Sebagai contoh lain, jika ingin membuat suatu text dalam sebuah paragraf yang di tulis tebal atau miring, di dalam HTML dapat ditulis sebagai berikut:

<p>Ini adalah sebuah paragraf. <i>Hanya kumpulan beberapa kalimat</i>. 
Paragraf ini terdiri dari <b>3 kalimat</b></p>.

Hasil dari kode HTML diatas, diterjemahkan oleh browser menjadi:

“Ini adalah sebuah paragraf. Tidak lain dari kumpulan beberapa kalimat. Paragraf ini terdiri dari 3 kalimat.”

Tag <i> pada kode HTML diatas memberikan perintah kepada browser untuk menampilkan text secara garis miring (i, singkatan dari italic), dan tag <b> untuk menebalkan tulisan (b, singkatan dari bold).

HTML tidak case-sensitif, dalam artian penulisan <p> dianggap sama dengan <P>.

Pada awal kemunculan HTML, programmer web umumnya menggunakan huruf besar untuk seluruh tag agar membedakan dengan text yang berupa isi dari web. Namun varian HTML, xHTML mewajibkan huruf kecil untuk semua tag.

1.3. Mencoba Tag HTML

Cobalah tag-tag HTML dan bandingkan hasilnya menggunakan aplikasi di bawah ini

2. Interaksi Tautan/Link

Web interaktif pasti memiliki tautan-tautan untuk berpindah halaman sesuai dengan tujuan pemberian informasi. Tautan atau link sangat bermanfaat untuk memisahkan halaman yang terlalu panjang atau topik yang berbeda.

Bentuk tautan dapat berupa tulisan atau gambar yang memiliki sifat seperti tombol (dapat di-klik atau diketuk)

2.1. Membuat Link

Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan pindah ke halaman lainnya. HTML menggunakan tag <a>untuk keperluan ini.

Link ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar). Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference).

Agar lebih jelas, kita akan lihat menggunakan contoh. Silahkan buka text editor dan buat kode seperti dibawah ini.

Contoh penggunaan tag link <a>:

<!DOCTYPE html>
<html>
<head>
  <title>Penggunaan Tag Link </title>
</head>
<body>
  <h1>Belajar Tag Link</h1>
  <p>Saya sedang belajar HTML dari 
  <a href="dokumen.html">Dokumen Tujuan</a></p>
</body>
</html>

Kode HTML di atas akan memiliki tautan pada kata "Dokumen Tujuan" yang dapat di-klik/tap. Apabila anda belum membuat file yang bernama dokumen.html, tentu saja pemrosesan tautan tersebut akan menghasilkan error

2.2. Editor HTML

Untuk praktek berikutnya, gunakan editor HTML yang mumpuni seperti AnWriter untuk gadget Android atau Notepad++ pada PC. Simpanlah file anda dengan nama file yang menggunakan ekstensi/akhiran .html.

3. Mengatur Tampilan Dengan CSS

Dokumen dan aplikasi web harus menarik dan bermakna supaya pengguna mendapatkan pengalaman yang baik. Sebagai bagian dari Multimedia, tata letak (layout) menjadi unsur yang penting dalam menarik minat pengguna tersebut.

Kaidah-kaidah tata letak dalam web, diatur menggunakan bahasa markup yang disebut CSS (Cascading StyleSheet). Bahkan, pengguna dapat menikmati hasil visual yang indah hanya menggunakan komposisi CSS.

3.1. Contoh Penggunaan CSS

<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Mali' rel='stylesheet'>
    <style>
      body { font-family: 'Mali'; font-size: 14pt; text-shadow: 1px 1px 4px black; background-color: maroon; color: rgba(255, 192, 192, 0.75); font-weight: 100; }
    </style>
  </head>
  <body>
    <center><h2 style="letter-spacing: 18px; font-weight: 600;"><i>DUKA</i></h2>
    <i>"Sedihmu membuatku tak sanggup memejamkan mata.<br>Badai hawa 
    menerjangku ke alam fana.<br>Rasa itu sungguh menyakitkan.<br>
    Tenggorokan tercekat, ngilu tak sanggup menelan ludah"</i></center>
  </body>
</html>

Salin kode di atas dan tempelkan ke aplikasi berikut. Ubah nilai-nilai atau konfigurasi yang menurut anda menarik dan perhatikan perubahan tampilannya