Jurnal Perkuliahan 3 Pemrograman Web oleh Haikal Algivari

Nama : Haikal Algivari

NPM : 2215061093

Kelas : PSTI A

Mata Kuliah : Pemrograman Web

Dosen Pengampu : Rio Ariestia Pradipta, S.Kom, M.T.I

Topik : HTML, CSS, Javascript

A. Pengantar

Ketika kita ingin mengembangkan suatu aplikasi dengan menggunakan bahasa pemrograman apapun, salah satu masalah pertama yang akan kita hadapi adalah bahwa bahasa pemrograman tidak menyertakan library untuk membuat user interface. Kita perlu menggunakan beberapa framework untuk dapat mengakses lapisan OS. Setiap bahasa pemrograman memiliki setidaknya satu, namun kita harus memilihnya terlebih dahulu. Salah satu hal yang menarik dari mengembangkan suatu web adalah bahwa web menyediakan framework yang sangat kaya dan sederhana untuk membuat suatu aplikasi yang mencakup banyak fitur, tidak hanya antarmuka, tetapi juga akses ke periferal (audio, input, gamepad, dll), dan API ini sangat mudah untuk digunakan.

Salah satu teknologi web yang paling sederhana yaitu kombinasi antara 3 bahasa pemrograman berikut:

HTML yang digunakan untuk membuat struktur dokumen dan konten-kontenya.
CSS yang digunakan untuk mengontrol aspek visualnya.
Javascript yang digunakan untuk interaktivitasnya.

Untuk memulai memprogram suatu web dengan menggunakan 3 bahasa pemrograman tersebut, kita membutuhkan web browser yang bagus (seperti Firefox atau Chrome), contoh kode HTML untuk memulai, dan text editor yang bagus seperti Editplus (win), VSCode (cross platform), textWrangler (osx), vim (osx) atau sublime text (cross platform).

Browser memiliki bagian-bagian yang berbeda satu sama lainnya. Dalam hal pembuatan web dengan menggunakan 3 bahasa pemrograman di atas, kita berfokus pada 2 bagian, yaitu mesin rendering (bertugas mengubah HTML+CSS dalam gambar visual) dan Javascript Interpreter (juga dikenal sebagai VM, bertugas mengeksekusi kode Javascript).

B. HTML

HTML merupakan singkatan dari Hyper Text Markup Language. HTML memungkinkan kita untuk menentukan struktur dokumen atau situs web. HTML sebenarnya bukanlah bahasa pemrograman, melainkan bahasa markup, yang berarti tujuannya adalah untuk memberikan struktur pada konten situs web, bukan untuk mendefinisikan algoritma. Ini adalah serangkaian tag bersarang (ini adalah bagian dari XML) yang berisi semua informasi situs web (seperti teks, gambar, dan video). Berikut adalah contoh tag:

<title>This is a title</title>

HTML mendefinisikan struktur halaman. Sebuah situs web dapat memiliki beberapa HTML ke halaman yang berbeda. Aturan-aturan dalam HTML adalah sebagai berikut:

Menggunakan sintaks XML (tag dengan atribut, dapat berisi tag lainnya).
Menyimpan semua informasi yang harus ditampilkan kepada user.
Terdapat elemen HTML yang berbeda untuk berbagai informasi dan perilaku yang berbeda pula.
Informasi disimpan dalam struktur seperti pohon/tree (node yang berisi node di dalamnya) yang disebut DOM (Document Object Model).
Ini memberikan dokumen beberapa struktur semantik (seperti judul, bagian, formulir) yang berguna bagi komputer untuk memahami konten dari situs web.
Tidak boleh berisi informasi yang berkaitan dengan bagaimana seharusnya ditampilkan (informasi milik CSS), jadi tidak ada informasi warna, ukuran font, posisi, dan lain-lain.

Berikut merupakan contoh sintaks dari HTML.

This is text without a tag.

<button class="mini">press me</button>

</div>

Meskipun ada banyak tag dalam spesifikasi HTML, 99% dari web menggunakan subset tag HTML dengan kurang dari 10 tag, yang paling penting adalah:

<div>: Sebuah wadah, biasanya mewakili area persegi panjang dengan informasi di dalamnya.
<img>: Gambar/image.
<a>: Tautan yang dapat diklik untuk membuka URL lain.
<p>: Teks paragraf
<h1>: Judul (h2, h3, h4, semakin tinggi angkanya, semakin kurang penting).
<input>: Widget untuk memungkinkan user untuk memperkenalkan informasi.
<style>: Untuk menyisipkan aturan CSS.
<script>: Untuk mengeksekusi Javascript.
<span>: Tag null (tidak mengeksekusi apapun).

Ada beberapa tag yang terkadang berguna, yaitu sebagai berikut:

<button>: Untuk membuat tombol.
<audio>: Untuk dapat memutar audio.
<video>: Untuk dapat memutar video.
<canvas>: Untuk menggambar grafik dari Javascript.
<iframe>: Untuk menempatkan situs web lain di dalam situs web yang kita miliki.

Kita menggunakan tag HTML untuk membungkus informasi yang berbeda di situs milik kita. Semakin banyak struktur yang memiliki informasi, semakin mudah untuk mengakses dan menyajikannya. Kita dapat mengubah cara informasi yang diwakili di layar tergantung pada tag di mana ia terkandung, sehingga kita tidak perlu khawatir menggunakan terlalu banyak tag.

Dalam pembuatan HTML, baik untuk memiliki semua informasi yang dibungkus dengan benar dalam tag yang memberikan beberapa semantik. Kita juga dapat memperluas semantik kode dengan menambahkan atribut tambahan ke tag seperti berikut:

id: memberi tahu unique identifier untuk suatu tag.
class: memberi tahu generic identifier untuk suatu tag.

Sebagai contoh:

C. CSS

CSS memungkinkan kita untuk menentukan bagaimana menyajikan (render) info dokumen yang disimpan dalam HTML. Dengan menggunakan CSS, kita dapat mengontrol semua aspek visualisasi dan beberapa fitur lainnya seperti:

Color: content, background, borders.
Margin: interior margin, exterior margin.
Position: di mana kita akan meletakkan suatu elemen.
Sizes: width, height.
Behaviour: perubahan pada mouse.

Berikut merupakan contoh sintaks dari CSS:

* {

color: blue; /*a comment */

margin: 10px;

font: 14px Tahoma;

}

Kode di atas akan mengubah semua tag di web kita ('*' berarti semua) agar terlihat biru dengan font Tahoma dengan 14px (14 piksel), dan mengatur margin 10px.

Berikut adalah daftar CSS fields yang paling umum dan contohnya:

color: #FF0000; red; rgba(255,00,100,1.0); //berbagai cara untuk menspesifikasikan warna.
background-color: red;
background-image: url('file.png');
font: 18px 'Tahoma';
border: 2px solid black;
border-top: 2px solid red;
border-radius: 2px; //untuk menghilangkan sudut dan membuatnya menjadi lebih bulat.
margin: 10px; //jarak antara border dengan outer elements
padding: 2px; //jarak antara border dengan inner elements
width: 100%; 300px; 1.3em; //banyak cara untuk menspesifikasikan jarak
height: 200px;
text-align: center;
box-shadow: 3px 3px 5px black;
cursor: pointer;
display: inline-block;
overflow: hidden;

Terdapat 4 cara untuk menambahkan aturan CSS ke dalam website kita, yaitu sebagai berikut:

Menyisipkan kode ke dalam tag style, seperti berikut:

<style>

p { color: blue }

</style>

Mereferensikan file CSS eksternal, seperti berikut: <link href="style.css" rel="stylesheet" />

Menggunakan style atribut pada tag, seperti berikut: <p style="color: blue; margin: 10px">
Menggunakan Javascript.

Penting untuk dicatat bahwa secara default lebar dan tinggi apapun yang ditentukan untuk elemen tidak akan memperhitungkan marginnya, sehingga div dengan lebar 100px dan margin 10px akan mengukur 120px di layar, bukan 100px. Ini dapat menjadi masalah memberantakkan layout kita. Kita dapat mengubah behaviour ini dengan mengubah model kotak elemen sehingga lebarnya menggunakan batas terluar:

div { box-sizing: border; }

Salah satu bagian tersulit dari CSS adalah menafsirkan layout situs web kita (struktur di dalam window). Secara default, HTML cenderung meletakkan semuanya dalam satu kolom, yang pastinya tidak ideal. Ada banyak proposal dalam CSS untuk mengatasi masalah ini (seperti tabel, fixed divs, flex, grid, ...).

Terkadang kita ingin memiliki div yang menutupi seluruh layar (untuk membuat aplikasi web), alih-alih scrolling website (lebih seperti dokumen biasa). Dalam hal ini ingatlah untuk menggunakan persentase untuk menentukan ukuran elemen, tetapi perlu diingat bahwa persentase relatif terhadap ukuran induk elemen, jadi kita harus mengatur ukuran ke elemen <body> untuk menggunakan 100%.

Pemusatan div terkadang sulit, maka kita dapat menggunakan trik berikut:

.horizontal-and-vertical-centering {

display: flex;

justify-content: center;

align-items: center;

}

D. Javascript

Javascript merupakan bahasa pemrograman biasa, mudah dimulai, namun sulit untuk dikuasai. Javascript memungkinkan untuk memberikan beberapa interaktivitas ke elemen-elemen di web. Sintaksnya mirip dengan C atau Java, namun tanpa tipe/type. Kita juga dapat mengubah konten HTML atau CSS yang diterapkan ke elemen melalui Javascript. Kita bahkan dapat mengirim atau mengambil informasi dari internet untuk memperbarui konten web tanpa memuat ulang halaman.

Terdapat 3 cara untuk dapat mengeksekusi kode Javascript dalam suatu website, yaitu sebagai berikut:

Tanamkan/embed kode ke dalam HTML dengan menggunakan tag <script>, seperti berikut: <script> /* some code */ </script>
Impor file Javascipt dengan menggunakan tag <script>, seperti berikut: <script src="file.js" />
Menyuntikkan/inject kode pada suatu event di dalam tag, seperti berikut: <button onclick="javascript: /*code*/">press me</button>

Berikut merupakan contoh dari sintaks Javascript:

var my_number = 10; //this is a comment

var my_string = "hello";

var my_array = [10,20,"name",true];

var my_object = { name: "javi", city: "Barcelona" };

function say( str )

{

for(var i = 0; i < 10; ++i)

console.log(" say: " + str );

}

Javascript hadir dengan API yang banyak untuk melakukan banyak hal seperti:

Mengakses DOM (node-node HTML)
Melakukan request HTTP
Memutar video dan audio
Mendeteksi aksi user (pergerakan mouse, key yang terpencet)
Meluncurkan Thread
Mengakses GPU, mendapatkan gambar webcam, ...

API akan terus berkembang dengan setiap pembaruan standar baru.

Berikut merupakan contoh kode dari 3 bahasa pemrograman dalam pembuatan suatu website.

Penting untuk memiliki pemahaman yang jelas tentang aliran eksekusi kode yang kita buat. Skrip dijalankan ketika HTML sedang diurai. Hati-hati dalam mengakses DOM karena DOM tidak akan berisi semua sampai semua HTML telah diurai. Ini adalah praktik yang baik untuk memulai kode kita dengan fungsi init yang disebut di akhir HTML kita.

Cari Blog Ini

Haikal Algivari