belajar bahasa pemrograman berbasis web

Chapter 1 : Belajar bahasa pemrograman berbasis web – HTML Dasar

Bahasa pemrograman berbasis web – Inti dari aplikasi berbasis web adalah HTML. Ia menampilkan kode yang dituliskan oleh pembuat aplikasi kepada pengunjung website. HTML merupakan bahasa markup standar yang dipahami oleh browser sehingga menjadi standar di seluruh dunia. Cara kerjanya adalah : server mengirimkan dokumen HTML kepada browser, dan browser menampilkan kepada klien/pengguna.

Struktur Dokumen

Dokumen HTML memiliki stuktur dasar yang wajib disertakan dalam setiap penulisannya. Sehingga dokumennya dapat ditampilkan pada browser sesuai maksud penulis. Setiap dokumen terdiri dari beberapa elemen dasar di dalamnya. Misalnya paragraf, tabel, judul dan sub-judul, dan sebagainya.

Struktur dasar yang wajib ada dalam setiap dokumen adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title>Judul Dokumen</html>
</head>
<body>
<!-- (Baris ini adalah komentar) Di sini isi dokumen -->
<body>
</html>

Elemen-elemen dokumen ditulis dalam bentuk yang disebut tag. Tag berfungsi sebagai penanda bagi browser untuk mengenali jenis elemen tersebut. Menurut cara penulisan, ada 2 jenis elemen:

Elemen 2 (dua) sisi

Bentuknya : <elemen>Blablablabla</elemen>

Contoh: <p>Ini adalah elemen paragraf.</p>

Elemen 1 (satu) sisi

Bentuknya : <elemen>

Contoh: <br>

Selain elemen, salah satu komponen adalah atribut. Atribut berfungsi untuk menyediakan instruksi-instruksi tambahan kepada browser dalam menangani isi dari sebuah tag. Masing-masing atribut memiliki sebuah nilai.

Bentuknya

&lt;tag atribut="nilai">Isi elemen&lt;/tag>

Misalnya :

&lt;p style="color: red">Ini adalah contoh paragraf yang berisi teks berwarna merah&lt;/p>

Belajar bahasa pemrograman berbasis web – Dokumen HTML pertama

bahasa pemrograman berbasis web
Ilustrasi HTML – Image credit Florian Olivo

Syarat pertama dalam belajar pemrograman berbasis web adalah menguasai pembuatan dokumen HTML. Karena semua data, perhitungan, dan sebagainya mesti ditampilkan dalam format tersebut.

Ayo kita mulai belajar dengan membuat dokumen HTML pertama.

Baca juga: Covid 19 News dan Revolusi Industri 4.0

Editor Kode

Ada banyak program editor yang tersedia saat ini. Untuk mengedit dokumen HTML sebetulnya kita hanya membutuhkan editor teks apa saja, misalnya notepad di Windows. Yang banyak digunakan dan bagus misalnya Atom, Visual Studio Code Editor, Sublime, dan lain-lain. Pilihlah editor yang sesuai dengan selera masing-masing. Penulis sendiri paling sering menggunakan Atom dalam aktifitas menulis bahasa pemrograman berbasis web.

Program pertama HTML

Buka editor, lalu masukkan kode-kode berikut ini:

&lt;!DOCTYPE html>
&lt;html>
&lt;head>
&lt;title>Hallo bro!!!&lt;/title>
&lt;/head>
&lt;body>
  &lt;h1>Heading Utama&lt;/h1>
  &lt;h2>Ini adalah Sub-Judul&lt;/h2>
  &lt;p>Ini adalah paragraf&lt;/p>
  &lt;br>
  &lt;p>Ini adalah paragraf setelah break ya!&lt;p>
&lt;/body>
&lt;/html>

Simpan file dengan nama apa saja, misalnya hallo.html. Yang perlu diperhatikan adalah ekstensinya wajib (dot)html sesuai dengan nama jenis dukumen tersebut. Setelah itu coba buka file tersebut menggunakan browser. Hasilnya kurang lebih seperti berikut:

Contoh dokumen HTML

Bahasa pemrograman berbasis web – contoh penggunaan atribut tag

&lt;!DOCTYPE html>
&lt;html>
&lt;head>
&lt;title>Hallo bro!!!&lt;/title>
&lt;/head>
&lt;body>
  &lt;h1>Heading Utama&lt;/h1>
  &lt;h2>Ini adalah Sub-Judul&lt;/h2>
  &lt;p>Ini adalah paragraf&lt;/p>
  &lt;br>
  &lt;p>Ini adalah paragraf setelah break ya!&lt;p>
  &lt;p style="color: blue; font-size:24px; background-color:red">
    Paragraf ini memiliki ATRIBUT :&lt;br>
    Warna Text: BIRU&lt;br>
    Ukuran Font: 24px&lt;br>
    Warna Background: MERAH&lt;br>
  &lt;p>
&lt;/body>
&lt;/html>

Kode di atas merupakan contoh penggunaan atribut style. Ada beberapa style yang dipasang pada kode dokumen di atas, yakni color, font-size dan background-color. Atribut font-size di atas nilainya 24px, px adalah satuan/unit. Selain px bisa digunakan juga pt (point) dan em.

Contoh penggunaan atribut HTML – belajar bahasa pemrograman berbasis web

Membuat Tabel

Buat file baru bernama tabel.html, lalu ketikkan kode berikut :

&lt;!doctype html>
&lt;html lang="en">

&lt;head>
  &lt;title>Contoh membuat Tabel&lt;/title>
&lt;/head>

&lt;body>
&lt;h1 style="text-align:center">Contoh Tabel Siswa&lt;/h1>
&lt;table center style="border: 1px solid black; border-collapse: collapse">
  &lt;tr style="border: 1px solid black; border-collapse: collapse; background-color: lightgreen;">
    &lt;td width="10%" style="border: 1px solid black; border-collapse: collapse">Nomor&lt;/td>
    &lt;td width="50%" style="border: 1px solid black; border-collapse: collapse">Nama&lt;/td>
    &lt;td width="10%" style="border: 1px solid black; border-collapse: collapse">Kelas&lt;/td>
    &lt;td width="30%" style="border: 1px solid black; border-collapse: collapse">Alamat Rumah&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td style="border: 1px solid black; border-collapse: collapse">1.&lt;/td>
    &lt;td style="border: 1px solid black; border-collapse: collapse">Antonio&lt;/td>
    &lt;td style="border: 1px solid black; border-collapse: collapse">4&lt;/td>
    &lt;td style="border: 1px solid black; border-collapse: collapse">Jl. S.Parman&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td style="border: 1px solid black; border-collapse: collapse">2.&lt;/td>
    &lt;td style="border: 1px solid black; border-collapse: collapse">Maria&lt;/td>
    &lt;td style="border: 1px solid black; border-collapse: collapse">6&lt;/td>
    &lt;td style="border: 1px solid black; border-collapse: collapse">Jl. S.Parman&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td style="border: 1px solid black; border-collapse: collapse">3.&lt;/td>
    &lt;td style="border: 1px solid black; border-collapse: collapse">Nabila&lt;/td>
    &lt;td style="border: 1px solid black; border-collapse: collapse">1&lt;/td>
    &lt;td style="border: 1px solid black; border-collapse: collapse">Jl. S.Parman&lt;/td>
  &lt;/tr>
&lt;/table>

&lt;/body>

&lt;/html>

Cek hasilnya di browser, kira-kira seperti gambar berikut

bahasa pemrograman berbasis web
Membuat tabel HTML

List HTML

Buat file baru bernama list.html

&lt;!doctype html>
&lt;html lang="en">

&lt;head>

  &lt;title>Membuat List&lt;/title>
&lt;/head>

&lt;body>
  &lt;p> Jenis-jenis buah-buahan
    &lt;!-- Ini adalah komentar -->
    &lt;!--
      -
      - Membuat Unordered List
      -
     -->
    &lt;ul>
      &lt;li>Mangga&lt;/li>
      &lt;li>Apel&lt;/li>
      &lt;li>Melon&lt;/li>
      &lt;li>Rambutan&lt;/li>
    &lt;/ul>
  &lt;/p>
  &lt;p>Jenis-jenis alat transportasi
    &lt;!-- Membuat Ordered List :1,2,3,....dst -->
    &lt;ol>
      &lt;li>Mobil&lt;/li>
      &lt;li>Sepeda Motor&lt;/li>
      &lt;li>Sepeda Ontel&lt;/li>
      &lt;li>Kereta api&lt;/li>
    &lt;/ol>
  &lt;/p>
&lt;/body>

&lt;/html>

Form HTML

Penggunaan Form merupakan salah satu bentuk sarana interaksi melalui web. Melalui Form, user menginput sesuatu nilai yang dikirim ke sever untuk diproses. Form memiliki elemen-elemen input seperti :

  • Text : menampung input teks satu baris
  • Radio : menampung inputan satu dari beberapa pilihan
  • Checkbox : untuk memilih 0 sampai lebih dari satu pilihan
  • Submit: mengirimkan isi form
  • Button: tombol dengan kegunaan tertentu yang diatur dalam program

Buat file baru bernama form.html, lalu masukkan kode berikut:

&lt;!doctype html>
&lt;html lang="en">

&lt;head>

  &lt;title>Membuat Form&lt;/title>
&lt;/head>

&lt;body>
  &lt;!-- Mendefinisikan halaman Form -->
  &lt;form action="/tindakan.php">
    &lt;label for="fname">Nama Depan:&lt;/label>&lt;br>
    &lt;input type="text" id="fname" name="fname" value="Nama Depan">&lt;br>
    &lt;label for="lname">Nama Belakang:&lt;/label>&lt;br>
    &lt;input type="text" id="lname" name="lname" value="Nama Belakang">&lt;br>&lt;br>

    &lt;label for="gender">Jenis Kelamin&lt;/label>&lt;br>
    &lt;input type="radio" id="laki-laki" name="gender" value="laki-laki">
    &lt;label for="laki-laki">Laki-laki&lt;/label>&lt;br>
    &lt;input type="radio" id="perempuan" name="gender" value="perempuan">
    &lt;label for="perempuan">Perempuan&lt;/label>&lt;br>

    &lt;label for="hobi">Hobi&lt;/label>&lt;br>
    &lt;input type="checkbox" id="hobi1" name="hobi1" value="memasak">
    &lt;label for="hobi1"> Memasak&lt;/label>&lt;br>
    &lt;input type="checkbox" id="hobi2" name="hobi2" value="jogging">
    &lt;label for="hobi2"> Jogging&lt;/label>&lt;br>
    &lt;input type="checkbox" id="hobi3" name="hobi3" value="berenang">
    &lt;label for="hobi3"> Berenang&lt;/label>&lt;br>&lt;br>

    &lt;input type="submit" value="Submit">
  &lt;/form>

&lt;/body>

&lt;/html>

Dalam contoh di atas, ketika tombol Submit diklik, maka isi form akan dikirim ke sebuah file bernama tindakan.php. Karena sebuah dokumen tidak bisa mengolah secara langsung data. Mengenai PHP akan dibahas pada Chapter selanjutnya.

Demikianlah tahap pertama belajar bahasa pemrograman berbasis web. Pada chapter-chapter berikutnya akan dibahas lebih lanjut tentang pemanfaatannya secara lebih mendalam. Tetap ikuti blog ini ya! ๐Ÿ˜€

Leave a Reply