PWdPB

Assalamualaikum Wr Wb 

Kali ini saya ingin membuat rangkuman tentang materi pada mata pelajaran Pemrograman Web dan Perangkat Bergerak, berikut adalah ringkasan nya. 

 KONSEP TEKNOLOGI DAN FORMAT TEKS PADA APLIKASI WEB

 1. Konsep WWW

World Wide Web (WWW) dikembangkan menjadi pusat pengetahuan dan budaya manusia sebagai kolaborator lokasi di dunia maya untuk berbagi ide dan semua aspek dari proyek umum melalui internet. Di masa sekarang tentu sangat mudah menemukan bentuk implementasi World Wide Web. Jika sering mengakses internet, Anda akan ditemukan bahwa hampir semua website yang ada menggunakan awalan www sebelum nama website tersebut. Singkatan www di awal nama alamat website tersebut sebagai langkah awal memasuki sebuah website. WWW (World Wide Web) pada umumnya dikenal sebagai web, yakni sistem dokumen hypertext yang bisa diakses melalui internet. 

a. Sejarah Awal

Pada tahun 1980, Tim Berners-Lee (ketika masih seorang kontraktor bebas di CERN) mengajukan sebuah proyek yang berbasiskan konsep hiperteks (hypertext) untuk memfasilitasi pembagian dan pembaruan informasi di antara para peneliti. Dengan bantuan dari Robert Cailliau, dia menciptakan sistem prototipe bernama Enquire. WWW benar-benar menjadi perhatian publik di dunia internet ketika dipresentasikan ke publik untuk pertama kalinya pada tahun 1995. Program ini digunakan untuk mengganti FTP, yang telah lama digunakan sebagai traffic control jaringan internet. Program WWW yang dibangun oleh Tim Berners-Lee, benar-benar sesuatu yang baru yang tidak pernah dipikirkan kebanyakan orang pada saat itu. 

Selanjutnya, World WideWeb dikembangkan di Pusat Penelitian Fisika Partikel Eropa (CERN) Geneva (Swiss). Pada tahun 1989, Berners-Lee membuat pengajuan untuk proyek pembuatan hiperteks global, kemudian World Wide Web dapat dijalankan dalam lingkungan CERN pada bulan Oktober 1990 Pada musim panas tahun 1991, WWW secara resmi digunakan secara luas pada jaringan internet. Situs web pertama yang dibuat Berners-Lee online untuk pertama kalinya pada 6 Agustus 1991. Namun, belum banyak yang menggunakan media WWW, hingga beberapa tahun selanjutnya seorang bernama Mare Andressen meluncurkan browser yang lebih populer bernama Mosaic Pada akhirnya pada tahun 1994, Berners-Lee mendirikan World Wide Web Consortium (W3C) di Massachusetts Institute of Technology, sedangkan Marc Andressen mendirikan Netscape. Sejak saat itu pengguna internet dan WWW berkembang dengan sangat pesat.

b. Fungsi World Wide Web (WWW)

WWW sebagai kumpulan server web dari seluruh dunia memiliki kegunaan dalam menyediakan data dan informasi untuk digunakan bersama. Melalui web, para pengguna internet (netter) dapat mengakses informasi-informasi yang tidak hanya berupa teks, tetapi juga berupa gambar, suara, video, dan animasi. Secara mendasar, dokumen informasi tidak hanya terdiri atas teks, tetapi juga dapat berupa gambar, suara, bahkan klip video. Kaitan antardokumen tersebut biasa disebut dengan istilah hipermedia. Dokumen-dokumen informasi ini disimpan atau dibuat dengan format HTML (Hypertext Markup Language). Sebuah dokumen informasi terdiri atas teks yang saling terkait dengan teks lainnya, bahkan dengan dokumen lain. Keterkaitan halaman lewat teks tersebut dinamakan dengan istilah pranala. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dibandingkan versi sebelumnya. Namun, perkembangan yang pesat tersebut tidak sampai mengubah cara kerja HTML.

2. Teknologi Aplikasi Web

Paradigma pemrograman, aspek distribusi, dan teknologi dapat digunakan sebagai dasar untuk teknologi aplikasi web. Hal tersebut menjadi salah satu faktor yang menyebabkan perkembangan aplikasi dalam web sebagai hasil dari pendekatan atau perubahan yang sangat cepat dalam teknologi. Berdasarkan persepsi dari beberapa pengembang perangkat lunak dan pakar bidang rekayasa perangkat lunak (software engineering professional), pengembangan aplikasi web tidaklah sama. dengan rekayasa software walaupun keduanya melibatkan pemrograman dan pengembangan perangkat lunak. Pengembangan teknologi aplikasi web identik dengan gabungan dari print publishing dan pengembangan perangkat lunak, di antaranya marketing dan perhitungan jika dilihat dari sudut pandang seni dan teknologi. Meskipun cukup banyak dalam mengadopsi prinsip-prinsip rekayasa perangkat lunak, prosedur dalam pengembangan aplikasi web masih memiliki berbagai pendekatan, alat bantu, metode, teknik, dan panduan yang memenuhi persyaratan pembuatan sistem berbasis web. Pengembangan sistem berbasis web tersebut jelas berbeda dengan pengembangan perangkat lunak konvensional dan pengembangan sistem berbasis web lebih banyak menghadapi tantangan.

3. Macam-Macam Browser

Dari sekian banyak web browser, beberapa di antaranya sangat familier dan banyak digunakan, seperti Internet Explorer, Mozilla Firefox, Googleh Crome, Opera, dan Safari. Saat ini telah banyak perangkat lunak berbasis GUI yanga sangat membantu dalam pembuatan halaman-halaman HTML.

a. Flock

b. Google Chrome

c. Internet Explorer

d. Konqueror

e. Links

f. Mozilla Firefox

g. Mozilla SeaMonkey

h. NetScape

i. Opera

j. Safari

k. Shiira

l. Slim Browser

m. Wyzo

4. Konsep Web Server

Internet identik dengan web karena kepopuleran web sebagai standart interface pada layanan-layanan yang ada di internet. Web awalnya digunakan sebagai penyedia informasi, sekarang digunakan untuk komunikasi e-mail, chatting, hingga melakukan transaksi bisnis (commerce). Web pada awalnya adalah ruang informasi dalam internet dengan menggunakan teknologi hiperteks. 

a. Fungsi Web Server

Web server identik dengan sebuah software yang memberikan layanan berbasis data dan berfungsi menerima permintaan dari HTTP atau HTTPS pada klien yang dikenal, yang biasanya dikenal dengan nama web browser. Web server berfungsi untuk mengirimkan kembali hasilnya dalam bentuk beberapa halaman web dan umumnya berbentuk dokumen HTML. Fungsi utama web server adalah untuk melakukan atau tranfer berkas permintaan pengguna melalui protokol komunikasi yang telah ditentukan lain-lain. Pemanfaatan web server berfungsi untuk mentransfer seluruh aspek pemberkasan dalam sebuah halaman web termasuk yang di dalam berupa teks, video, gambar, atau banyak lagi.

b. Cara Kerja dari Web Server

Cara kerja dari web server sebagai salah satu mesin tempat software atau aplikasi beroperasi dalam mendistribusikan web page ke user/pengguna bisa ditentukan oleh permintaan user. 

5. Macam-Macam Software Web 

Server Web server yang paling banyak digunakan biasanya memiliki kelebihan (fitur) jika dibandingkan web server lainnya. Di samping itu, web server yang paling banyak digunakan biasanya memiliki forum yang besar dan aktif sehingga dapat dimanfaatkan untuk berdiskusi serta memecahkan berbagai macam permasalahan. 

Secara garis besar, web server terdiri atas dua jenis sebagai berikut.

a. Web Server Berbayar

Berikut ini beberapa jenis web server komersial (berbayar) paling banyak digunakan.

1) Microsoft Internet Information Services (IIS) 

2) LiteSpeed

b. Web Server Gratis

Berikut ini beberapa web server gratis yang paling banyak digunakan. 

1) Apache

2) Nginx

3) Apache Tomcat

4) Lighttpd

5) AMPPS

6) XAMPP Control Panel

6. Macam-Macam Text Editor

Text editor identik dengan software atau perangkat yang digunakan untuk mengetikkan coding yang akan dibuat menjadi sebuah web. Pada dasamya, text editor hanyalah tempat Anda meletakkan barisan-barisan code. Namun, akhir-akhir ini para publisher berlomba-lomba memberikan editor yang bagus, mudah digunakan, dan memiliki banyak fitur lainnya. Berikut ini software text editor yang sering digunakan untuk pemrograman web.

A. Adobe Dreamweaver Text 

B. Araneae

C. ATPad

D. Crimson Editor

E. EditPad Lite

F. Netbeans

G. Notepad

H. Notepad++

I. Sublime-text

J. Google Web Designer

7. Tool Pengembang Web

Tool atau peralatan yang identik dengan perangkat lunak yang digunakan dalam proses pengembangan website. Tool dalam mengembangkan aplikasi menjadi bagian penting karena sangat membantu dan mempersingkat proses pengembangan. Pemilihan tool yang tepat dapat memberi keuntungan bagi developer karena menghemat waktu, tenaga, dan pekerjaan cepat selesai. 

Berikut ini beberapa tool pengembang web yang sering digunakan.

a. Adobe Edge Inspect 

b. Firebug

c. Lorem Ipsum 

d. Favicon Generator 

B. Format Teks pada Halaman Web

HTML (Hypertext Markup Language) identik dengan bahasa standar yang dipakai pada halaman web. Halaman-halaman web bisa dibuat dengan menggunakan HTML. Sampai saat ini sudah dikenalkan HTML5 (HTML versi 5). Protokol yang digunakan dalam komunikasi antara web server dan browser adalah HTTP (Hypertext Transfer Protocol) sehingga browser dapat menerjemahkan bahasa HTML yang berupa kode-kode teks menjadi sesuatu yang bisa dilihat dan/atau dibaca oleh seorang pengguna browser. Browser dapat memahami isi suatu dokumen yang berasal dari web server karena HTML digunakan sebagai standar.

1. Struktur Dasar HTML

Setiap halaman HTML minimal memiliki struktur dasar yang terdiri atas tag DTD atau DOCTYPE, tag html, tag head, dan tag body. Struktur struktur tersebut sebagai hal mendasar dari HTML, walaupun HTML tidak hanya berisi struktur tersebut.

a. DTD atau DOCTYPE

b. Tag <html>

Tag <html> sebagai tag pembuka dari keseluruhan halaman web Semua kode HTML harus berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>.

c. Tag <head>

Elemen pada tag <head> umumnya berisi berbagai definisi halaman seperti kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di browser.

d. Tag <title>

Tag <title> digunakan untuk menampilkan title dari sebuah halaman web. Title biasanya ditampilkan pada bagian paling atas web browser.

e. Tag <body>

Tag <body> berisi semua elemen yang akan tampil dalam halaman web, seperti paragraf, tabel, link, gambar, dan lain-lain. Tag body ini ditutup dengan </body>. 

2. Versi HTML

Seiring perkembangan dunia global, khususnya dunia IT, HTML juga ikut berpartisipasi memajukan dunia IT terutama dalam bidang Web App. Hal yang pelu dipahami adalah setiap terjadi perkembangan versi HTML, mau tidak mau browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru tersebut. Jika tidak, browser tidak akan bisa menampilkan HTML tersebut. Berikut ini beberapa versi HTML dari awal hingga sekarang.

a. Versi HTMLI 

Versi HTMLI merupakan versi awal yang hanya bisa digunakan untuk membuat heading, hypertext, cetak tebal (bold), cetak miring (italic), list, dan paragraph. 

b. l'ersi HTML2

Versi HTML ini dapat dikatakan sebagai awal untuk membuat sebuah web interaktif. HTML2 dirilis pada tanggal 14 Januari 1996 dengan beberapa penambahan fitur baru, salah satunya adalah fitur form. 

c. Versi HTML3

HTML3 dirilis pada tanggal 18 Desember 1997 (dikenal juga dengan HTML+) karena banyak penambahan fitur yang lebih fleksibel untuk membuat web yang interaktif. 

d. Versi HTML4 

Pada masa ini, web sudah makin interaktif dan lebih mementingkan tampilan yang menarik serta kenyamanan pada pengguna. HTML versi 4 yang diterbitkan pada 18 Desember 1997 memuat berbagai perubahan dan revisi dari pendahulunya.

e. Versi HTMLS 

HTML5 merupakan Ini adalah versi html yang diperbarui hingga sekarang yang secara resmi dirilis pada tahun 2009, yang menjadi standar terbaru sebagai proyek kerja sama antara W3C (World Wide Web Consurtium) dan WHATG (Web Hypertext Application Technology Group). 

3. HTML Head, Title, dan Body

Kesalahan akibat peletakan atau penggunaan tag HTML tidak akan mengakibatkan sistem komputer menjadi hang/rusak. Kesalahan tersebut hanya berakibat pada tampilan halaman web tersebut. Jika ada tag HTML yang tidak diketahui dalam halaman web yang sedang diproses, web browser akan mengabaikannya seakan-akan tag tersebut tidak ada. Hal ini dikarenakan web browser sengaja dirancang dengan kemampuan mengenali dan melaksanakan hanya beberapa tag HTML dari keseluruhan tag standard W3C.

a. HTML

HTML merupakan dasar atau tulang punggung dalam pembuatan sebuah Web. Penulisan Tag HTML adalah incasesensitive yang artinya <HTML> akan sama dengan <html> atau <Html>. 

b. Head

Header berfungsi sebagai tanda pengenal pada halaman yang akan dibuat. Untuk mendefinisikan header dalam tag HTML maka menambahkan <HEAD> dan </HEAD> tag di bawah tag <HTML> menjadi sebagai berikut. 

<html>

<head>

</head>

</head>

c. Title

Tag <title> berfungsi untuk membuat judul website. Sementara itu, tag <head> berfungsi untuk membuat kepala dokumen. Tag <h1> berfungsi untuk membuat judul artikel. H1 adalah ukuran judul terbesar di HTML. Sementara itu, tag <p> berfungsi untuk membuat paragraf. Untuk menamai atau memberikan judul pada halaman web, dapat digunakan tag <TITLE> dan </TITLE>. Judul akan terlihat pada sudut kiri atas pada halaman web. Tag <TITLE> akan berada di dalam tag <HEAD>.

d. Body

HTML elemen body menunjukkan konten sebuah dokumen. Isi dari sebuah dokumen HTML yang akan ditampilkan pada jendela browser terdapat pada elemen <body>, sedangkan informasi dan keterangan. 

BAB 2 : FORMAT TABEL DAN FORMAT MULTIMEDIA PADA HALAMAN WEB

A. Format Tabel pada Halaman Web

Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan Tag<Table>.

Secara mendasar, elemen TABLE memiliki atribut seperti align, bgcolor, border, cellpadding (jarak antara tepi sel dengan isi sel), cellspacing (jarak antara sel), width (lebar tabel), dan height (tinggi tabel).

Elemen tbody digunakan untuk mengelompokkan konten atau isi yang terletak pada bagian tengah (tubuh) sebuah tabel.

Elemen thead digunakan untuk mengelompokkan isi atau konten yang berada di bagian atas (kepala) pada sebuah tabel.

Element tfoot digunakan untuk mengelompokkan isi atau konten yang berada di bagian bawah (kaki) sebuah tabel.

B. Format Multimedia dalam Halaman Web

umumnya, elemen multimedia (seperti suara/video) disimpan dalam file media dan cara yang paling umum untuk melihat format sebuah media adalah melihat ekstensi yang digunakan oleh file tersebut.

Penambahan gambar pada HTML dapat menggunakan elemen img. Elemen img merupakan elemen yang bersifat self-contained (tidak memiliki tag penutup). 

Elemen img juga harus memiliki atribut src, yang dapat diisikan dengan dua metode, yaitu tempat dari gambar disimpan relatif terhadap file HTML dan URL dari gambar tersebut.

Penggunaan suara atau audio ke dalam aplikasi multimedia dapat memberikan informasi yang tidak mungkin diberikan oleh media informasi, seperti gambar, grafik, ataupun teks.

Ada tiga jenis suara, yaitu ucapan (speech), musik, dan efek suara. Selain itu, suara juga terbagi dua jenis formatnya, yaitu MIDI dan WAVE.

Atribut-atribut yang dapat digunakan pada elemen audio juga digunakan pada elemen video sehingga perbedaan utama dari kedua elemen ini terdapat pada nama elemen dan dukungan format.

Source :

Buku Pemrograman Web dan Perangkat Bergerak - SMK /MAK kelas XI

Penulis: Patwiyanto, S.Kom., Sri Wahyuni S.Kom., Sumari Agus Prasetyo, S.Kom