PENGENALAN APLIKASI WEB
A. KOMPETENSI DASAR
3.4 Menerapkan prosedur pengoperasian aplikasi multimedia interaktif berbasis halaman web dan media interaktif
4.4. Mengoperasikan aplikasi multimedia interaktif berbasis halaman web dan media interaktif
B. PENDAHULUAN
Berdasarkan struktur katanya, maka pemrograman web terdiri dari dua kata, yaitu pemrograman yang artinya adalah sekumpulan perintah yang diciptakan oleh manusia agar bisa membantu manusia lainnya untuk menghasilkan program. Sementara itu web diartikan sebagai sumber informasi yang dapat diakses hanya dengan menggunakan jaringan komputer yang terhubung dengan internet.
Bentuk informasi yang berasal dari web itu bermacam-macam, mulai dari teks, gambar, audio, video hingga animasi. Jadi, bisa disimpulkan bahwa pemrograman web adalah instruksi untuk dapat menghasilkan program atau situs web yang bisa ditampilkan dengan menggunakan browser melalui jaringan internet.
World Wide Web atau yang lebih dikenal dengan singkatannya yaitu www pada dasarnya merupakan jenis layanan internet yang paling dikenal masyarakat bahkan oleh pengguna internet pemula sekalipun. Menggunakan www maka berbagai halaman website dapat saling terhubung satu sama lain sehingga tentu akan menghasilkan lautan informasi.
Halaman pada sebuah website bentuknya file teks murni yang isinya bermacam sintaks HTML yang bisa dibuka, dilihat hingga diterjemahkan menggunakan browser internet. Sintaks HTML itu dapat digunakan untuk memuat berbagai jenis konten mulai dari teks, gambar, audio, video hingga animasi.
Sementara itu, jika berbicara mengenai HTTP maka satu hal yang perlu diketahui bahwa HTTP (HyperText Transfer Protocol) sesuai namanya adalah protokol yang berfungsi untuk mentransfer dokumen dalam layanan internet www. HTTP ini pada dasarnya termasuk jenis protokol ringan yang bersifat umum dan tidak memiliki status sehingga dapat digunakan untuk berbagai jenis dokumen.
Sebagai sebuah protokol, HTTP akan menjadi penghubung antara client dan server. Sebuah client HTTP misalnya seperti sebuah web browser akan mulai melakukan permintaan dengan cara menghubungkan TCP/IP ke port tertentu.
C. SEJARAH WEB
1. Web 1.0
Sesuai namanya, web 1.0 ini adalah teknologi web generasi pertama. Teknologi website ini secara umum dirancang dan dikembangkan agar dapat memudahkan akses informasi serta bersifat sedikit interaktif. Umumnya, website belanja online dan website berita online akan masuk ke dalam kategori teknologi web generasi pertama ini.
2. Web 2.0
Teknologi web generasi kedua ini mengutamakan fitur berbagi informasi secara online. Salah satu unsur utama pada teknologi web generasi kedua ini adalah aplikasi yang dapat mengeksploitasi efek jaringan agar bisa mendapatkan lebih banyak pengguna aplikasi tersebut.
Umumnya, website jejaring sosial yang memang sifatnya lebih interaktif antara para pengguna website tersebut menggunakan teknologi web generasi kedua ini.
3. Web 3.0 / Semantic Web
Teknologi web generasi ketiga ini sebenarnya masih dalam perdebatan, sebab pengertian dari teknologi web ini masih beragam, ada yang berpendapat bahwa teknologi web 3.0 ini adalah layanan akses broadband secara mobile hingga layanan web yang isinya adalah perangkat lunak dengan sifat on-demand.
Teknologi web 3.0 ini juga ada yang menyebutnya dengan istilah semantic web ini juga dikenal sebagai teknologi web yang bukan hanya memiliki isi web yang dapat dimengerti manusia namun juga dapat diinterpretasikan oleh software sehingga proses pengintegrasian informasi akan terasa lebih mudah. Ada sejumlah standar yang digunakan untuk membangun semantic web, diantaranya seperti XML, XML Schema, RDF, OWL dan SPAROL.
D. JENIS PEMROGRAMAN WEB
1. HTML
Salah satu jenis pemrograman web adalah HTML yang merupakan singkatan dari HyperText Markup Language, sebuah bahasa pemrograman standar yang berfungsi untuk membuat halaman website agar dapat diakses dan menampilkan berbagai jenis konten lewat perantara browser internet.
Selain itu, HTML juga berfungsi sebagai penghubung antara website yang satu dengan yang lainnya, file yang satu dengan yang lainnya dalam website internet ataupun dalam sebuah komputer melalui localhost.
HTML juga bisa dibilang sebagai inti dari halaman sebuah website sehingga tidak mengherankan jika Anda ingin menjadi programmer maka Anda terlebih dahulu harus belajar tentang HTML. Namun, tidak perlu khawatir sebab jenis pemrograman web yang satu ini termasuk cukup mudah untuk dipelajari, asalkan Anda memang sebelumnya sudah paham terhadap cara menggunakan browser internet.
2. CSS
Berbicara tentang CSS (Cascading Style Sheet) maka tidak bisa dipisahkan dengan yang namanya desain pada sebuah website. CSS adalah jenis pemrograman web yang dapat mengatur beberapa komponen dalam sebuah website agar bisa terlihat seragam dan tentunya lebih terstruktur.
Jika Anda memahami cara kerja CSS maka Anda dapat membuat tampilan website yang terlihat rapi dan terstruktur sesuai dengan apa yang Anda inginkan dalam sebuah website. Hampir sama dengan HTML, jenis pemrograman web CSS ini juga masuk dalam kategori sederhana sehingga mudah untuk dipelajari. Sebagian orang bahkan menganggap bahwa HTML dan CSS ini sebenarnya bukan termasuk jenis pemrograman web sebab hanya terdiri dari instruksi sederhana sehingga ada yang menyebutnya sebagai bahasa kode saja.
3. PHP
Beralih ke PHP yang merupakan singkatan dari Hyper Text Preprocessor yang merupakan bahasa script seperti yang dapat disisipkan dalam HTML. Sejumlah orang menganggap bahwa PHP merupakan jenis pemrograman web yang sesungguhnya karena dianggap murni menggunakan bahasa pemrograman komputer.
Fungsi dari PHP ini biasanya dimanfaatkan untuk mendesain program dalam sebuah website, misalnya untuk mengatur alur logika, melakukan pemrosesan hasil form HTML dan juga sebagai penghubung dengan database seperti MySQL.
Umumnya, website yang dibangun dengan jenis pemrograman web adalah website yang memiliki banyak fitur misalnya seperti website portal berita yang biasanya 80% dari website tersebut dibangun menggunakan kode PHP. Jika Anda ingin menguasai jenis pemrograman web ini, maka Anda sebaiknya perlu mempelajari terlebih dahulu beragam materi yang termasuk dalam jenis pemrograman web dasar.
4. MySQL
MySQL merupakan salah satu jenis pemrograman web yang berfungsi sebagai tempat untuk menyimpan data atau yang lebih dikenal sebagai database. Sistem manajemen berbasis data SQL ini adalah software yang multi thread serta multi user. Dibanding dengan database server lainnya, MySQL adalah database server yang paling banyak penggunanya.
Bila Anda tertarik untuk mempelajari MySQL ini maka Anda akan perlu mempelajari sejumlah materi dasar diantaranya seperti, Select, Insert, Update, Delete, dll. Sementara itu, untuk berbagai jenis materi tingkat lanjut yang perlu dipelajari diantaranya seperti View, Stored Procedure, dan Trigger.
5. JavaScript
Bila Anda ingin lengkap belajar tentang pemrograman web, maka JavaScript ini juga tidak kalah penting untuk dipelajari. Jenis pemrograman web ini juga termasuk dalam bahasa pemrograman murni yang biasanya dimanfaatkan untuk mendesain halaman website yang lebih interaktif hingga dapat pula digunakan untuk membuat game online berbasis web termasuk animasi.
E. DASAR-DASAR HTML
HTTP (Hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protocol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (Hypertext Markup Language). Dikatakan markup language karena HTML berfungsi untuk ‘memperindah’ file teks biasa untuk ditampilkan pada program web browser hal ini dilakukan dengan menambahkan elemen atu sering disebut sebagai tag-tag pada file teks biasa tersebut.
Saat ini sudah dikenal HTML5 yang menawarkan berbagai fitur menarik yang tidak didukung oleh HTML sebelumnya. Beberapa fitur yang tersedia pada HTML5 antara lain sebagai berikut.
1. Canvas. Memungkinkan pembuatan gambar dalam kanvas. Jadi, gambar tidak lagi diambil dari gambar utuh, melainkan bisa disusun sendiri, bak menggunakan program Paint.
2. Header. Berguna untuk menyatakan suatu judul, yang bisa diisi dengan elemen logo dan nama perusahaan.
3. Footer. Merupakan kebalikan dari header. Sebagai catatan kaki, elemen ini berguna untuk menaruh informasi di bagian bawah halaman web.
4. Time. Elemen ini berguna untuk menyajikan informasi tentang waktu.
5. Audio. Memungkinkan penyajian player untuk memutar suara.
6. Video. Memungkinkan player untuk memainkan film.
Secara prinsip, fitur pada HTML dapat dikelompokkan ke dalam :
1. Struktur halaman ;
2. Presentasi visual ;
3. Peranti penyaji gambar ;
4. Pendukung media ; dan
Peningkatan koneksi dengan JavaScript.
Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai dengan symbol lebih besar (<) dan (>). Pasangan dari sebuah tag ditandai dengan symbol garis miring (/). Misalnya pasangan dari tag <contoh > adalah</contoh>. Dalam hal ini <contoh> kita sebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen <contoh> bila ditulis dengan atributnya adalah sebagai berikut:
<contoh atribut1=”nilai_atribut1”atribut2=”nilai_atribut2=”…>.
Dalam penulisan tag HTML tidaklah case sensitive artinya pengguna huruf kecil ataupun capital tidaklah menjadi masalah.
Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut :
Seperti terlihat, struktur file HTML diawali dengan sebuah tag<html> dan ditutup dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag<head>…</head> dan tag <body>…</body>.
Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <tittle>… </tittle> yang berpungsi untuk mengeluarkan judul pada tittle bar window web browser.
Bagian kedua, yang diapit ole tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini anada akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin sampaikan pada pengguna nantinya.
Pengaturan Properti Dokumen
Properti document diatur melalui atribut-atribut yang terdapat dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakng halaman, wana teks, warna link dan lain-lain.
Kode Warna
Dalam pengaturan warna menggunakan kode RGB yang mana ditampilkan dalam nilai heksadesimal. Setiap bagian dua gigit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti tidak ada warna merah dalam kobinasi warna berikut ini adalah contoh kode warna :
Atribut Elemen <body>
BACKGROUND = Lokasi dan nama file (latar belakng dokumen image dokumrn)
BGCOLOR = Warna (warna latar belakng dokumen, default putih)
TEXT = Warna (warna teks dokumen, default hitam)
LINK = Warna (warna link dokumen, default biru)
VLINK = Warna (warna visited link dokumen, default ungu)
ALINK = Warna (warna aktif link dokumen, default merah)
Elemen Heading <h1>… <h6>
Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari suatu halam web. Heading ini akan memperbesar ukuran huruf unruk setiap jenis heading. Ad 7 buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h6>.
Elemen yang dihilangkan di HTML5
· Berikut ini elemen HTML 4.01 yang dihilangkan di HTML5:
· <acronym>
· <applet>
· <basefont>
· <big>
· <center>
· <dir>
· <font>
· <frame>
· <frameset>
· <noframes>
· <strike>
· <tt>
Dokumen HTML5
Sebuah dokumen HTML5 seperti berikut ini, cukup ditulis dengan Text Editor ataupun HTML Editor :
Berikut ini penjelasan dari dokumen HTML5 di atas :
· Sebuah dokumen HTML5 diawali dengan <!DOCTYPE HTML>.
· Tanda seperti <html> disebut tag. Sebuah tag seperti itu menyatakan sebuah elemen dalam dokumen html.
· Beberapa tag berpasangan. Sebagai contoh, <head> berpasangan dengan </head>.
· Namun, tidak semua tag berpasangan. Sebagai contoh, <br> tidak punya pasangan. Khusus untuk tag seperti ini, tidak ada keharusan untuk menyertakan tanda / sebelum >. Pada XHTML, tanda seperti / memang diharuskan untuk ditulis.
· Pasangan <html>..</html> menyatakan awal dokumen HTML.
· Di dalam <html>..</html> terdapat pasangan <head>..</head> dan <body>..</body>.
· Pasangan <head>..</head> menyatakan bagian judul dokumen HTML. Isinya paling tidak berupa pasangan <tittle>..</tittle>.
· Pasangan <body>..</body> menyatakan bagian tubuh dokumen. Pada contoh,
DAFTAR PUSTAKA
Ø Buku Pemrograman Web 1 SMK Kelas X, Wahyu Purnomo, Endah Damayanti, PPPPTK BOE, Malang, 2013
================================oooOOOooo================================
"JANGAN LUPA SELALU JAGA KESEHATAN DAN LAKSANAKAN PROTOKOL COVID-19"
"RAIH MASA DEPANMU DENGAN BELAJAR DIMANA SAJA,
MAU RAJIN-MALAS, MAU PINTAR-BODOH TERGANTUNG DI DIRIMU,
IN SYAA ALLOH USAHA TIDAK AKAN MENGINGKARI DARI USAHAMU"
SALAM SUKSES
================================oooOOOooo================================
