1 Modul Pemrograman Web Arif Dwi Laksito. S.Kom Table of Contents 1 Konsep Dasar Web .............................................................................................................................. 3 1.1 Hypertext .................................................................................................................................... 3 1.2 HTTP ............................................................................................................................................ 3 2 Sejarah Internet .................................................................................................................................. 3 2.1 Tiga teknologi penting yang menyebabkan internet bisa berkembang seperti saat ini : ............ 4 2.2 Perkembangan Internet dikelompokkan dalam 4 periode perkembangan, yaitu : ..................... 4 2.3 Perkembangan Internet di indonesia .......................................................................................... 4 2.4 Manfaat Internet: ........................................................................................................................ 5 2.5 Penyalahgunaan/Kejahatan Internet .......................................................................................... 5 3 PERKEMBANGAN WEB ........................................................................................................................ 5 4 HTML................................................................................................................................................... 7 4.1 HTML Element ............................................................................................................................. 8 4.2 HTML Text Formatting ................................................................................................................ 9 4.3 HTML Tabel ................................................................................................................................. 9 4.4 HTML List .................................................................................................................................. 10 4.5 HTML Form ............................................................................................................................... 11 5 CSS (Cascade Style Sheet) ................................................................................................................. 12 5.1 Inline Style................................................................................................................................. 13 5.2 Embedded Style Sheets ............................................................................................................. 13 5.3 External Style Sheets ................................................................................................................. 14 5.4 CSS Selector .............................................................................................................................. 14 5.4.1 Id Selector ......................................................................................................................... 14 5.4.2 Class Selector .................................................................................................................... 14 5.5 Contoh CSS ................................................................................................................................ 15 5.5.1 CSS Background ................................................................................................................. 15 5.5.2 CSS Table ........................................................................................................................... 16
33
Embed
Modul Pemrograman Web - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/190302150-ST084-46... · 6 PERKEMBANGAN WEB 3.1 Web Amikom Januari Tahun 2001 Kira-kira
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
Modul Pemrograman Web
Arif Dwi Laksito. S.Kom
Table of Contents 1 Konsep Dasar Web .............................................................................................................................. 3
2 Sejarah Internet .................................................................................................................................. 3
2.1 Tiga teknologi penting yang menyebabkan internet bisa berkembang seperti saat ini : ............ 4
2.2 Perkembangan Internet dikelompokkan dalam 4 periode perkembangan, yaitu : ..................... 4
2.3 Perkembangan Internet di indonesia .......................................................................................... 4
2.5 Penyalahgunaan/Kejahatan Internet .......................................................................................... 5
3 PERKEMBANGAN WEB ........................................................................................................................ 5
4 HTML ................................................................................................................................................... 7
4.1 HTML Element ............................................................................................................................. 8
4.2 HTML Text Formatting ................................................................................................................ 9
4.3 HTML Tabel ................................................................................................................................. 9
4.4 HTML List .................................................................................................................................. 10
4.5 HTML Form ............................................................................................................................... 11
10 XML ............................................................................................................................................... 32
3 Konsep Dasar Web
1 KONSEP DASAR WEB World Wide Web, Adalah suatu ruang informasi dimana sumber-sumber daya yang berguna
diidentifikasikan oleh pengenal global yang disebut Uniform Resource Identifier (URI).
URI, Terdiri dari string karakter yang digunakan untuk identifikasi atau memberi suatu nama
resource(sumberdaya) di Internet.
URL (Uniform Resource Locator), URL digunakan oleh browser untuk mengidentifikasi sumberdaya di
Internet yang dituliskan dalam satu baris teks. URL dapat dikatakan sebagai bagian dari URI. Ex.
http://www.amikom.ac.id/index.php
1.1 Hypertext Suatu informasi yang dapat kita baca melaui Web Browser(IE, Firefox, Chrome, Opera, dll)
Kita dapat mengikuti link di setiap halaman untuk pindah ke dokumen lain atau bahkan mengirim
informasi kembali kepada server untuk berinteraksi.
Aktifitas tsb disebut Surfing(berselancar). Halaman web biasanya diatur dalam koleksi material yang
saling terkait, yang disebut Website
1.2 HTTP Adalah standard request/response antara sebuah client dan server.
Client(web browser) akan mulai melakukan permintaan(request) ke server. Server tersebut akan
menerima request dari client dan akan mengembalikan jawaban(response) ke client yang dapat berupa
pesan error atau informasi lainnya.
2 SEJARAH INTERNET Internet adalah jaringan komunikasi global yang terbuka dan menghubungkan jutaan jaringan komputer,
melalui sambungan telepon umum maupun pribadi. Secara individu, jaringan komponennya dikelola
oleh agen-agen pemerintah, universitas, organisasi komersial, maupun sukarelawan, Menurut McBride
dlm bukunya, The Internet. Secara harfiah, Internet (kependekan dari interconnected-networking) ialah
sistem global dari seluruh jaringan komputer yang saling terhubung menggunakan standar Internet
Protocol Suite (TCP/IP) untuk melayani miliaran pengguna di seluruh dunia. Cara menghubungkan
rangkaian dengan kaedah ini dinamakan internetworking, Menurut Wikipedia Indonesia.
4 Sejarah Internet
2.1 Pengguna Internet Dunia
2.2 Pengguna Internet Asia
2.1 Tiga teknologi penting yang menyebabkan internet bisa berkembang
seperti saat ini : Teknologi Paket Switching (60-an)
Protokol TCP/IP (awal 80-an)
Standar HTML (awal 90-an)
2.2 Perkembangan Internet dikelompokkan dalam 4 periode perkembangan,
yaitu : Periode pertama : Packet switching (1961-1972)
Periode kedua : Internetworking (1972-1980)
Periode ketiga : Protokol Baru dan pertumbuhan jaringan (1980-1990)
Periode keempat : komersialisasi, Website dan aplikasi baru (1990-2000an)
2.3 Perkembangan Internet di indonesia Berawal dari BPPT – UI – LAPAN di tahun 1992
Terbentuk Paguyuban – teknologi packet radio sebagai basis untuk network regional
5 PERKEMBANGAN WEB
1994 – Indointernet sebagai ISP komersil pertama
1996 – paling tidak 20 ISP komersil & 40 ISP menunggu ijin operasi
World Wide Web Consortium(W3C): Bertanggung jawab terhadap perkembangan dari berbagai
protokol dan standar yang terkait dengan web. Misalnya standarisasi HTML, XHTML, dan CSS
diatur oleh W3C.
The Internet Assigned Authority (IANA) & Internet Network Information Center (InterNIC): Kelompok ini
bertanggung jawab terhadap alokasi alamat IP dan nama domain.
2.4 Manfaat Internet: Banyak resource yang gratis dan mudah diakses
Koneksitas Many-to-many dengan siapapun dimanapun
Informasi yang melimpah (abundant)
Informasi yang terdistribusi luas (widely distributed)
2.5 Penyalahgunaan/Kejahatan Internet Virus
Spam mail (mail bomb)
Hacking (masuk ke jaringan lain)
Copying ilegal : konten, software. dll
Pemalsuan Naskah, tandatangan (Forgery)
Penggunaan Resource orang lain tanpa ijin
3 PERKEMBANGAN WEB Di awal tahun 90-an telah dikenal sebuah teknologi informasi dan komunikasi khususnya dalam bidang
website. Pada tahun itu sangat membantu dalam komunikasi antar manusia di dunia karena dalam
website tersebut user bisa melihat informasi yang ditampilkan oleh pemilik website. Informasi yang
berupa tulisan dapat diakses dari seluruh dunia.
6 PERKEMBANGAN WEB
3.1 Web Amikom Januari Tahun 2001
Kira-kira pada Tahun 1997 sudah semakin berkembang untuk tampilan sebuah website. Desain web
menjadi lebih menarik dengan menggunakan CSS atau Javascript untuk memperindah tampilan. User
pengguna lebih banyak berinteraksi di web, seperti search, input form, FAQ, forum atau buku tamu di
web.
Dan sekitar tahun 2000-an tampilan web menjadi lebih interaktif, yang sebelumnya animasi hanya
menggunakan javascript dan java applet, kini digunakan flash dan sudah dapat menggunakan movie
atau sound yang tersaji di halaman web.
Boleh dikatakan bahwa website di era ’90 an merupakan website 1.0 dan di era 2000-an merupakan era
website 2.0. Kalau kita lihat ada banyak sekali perkembangan yang terjadi. Misalnya saja kalau jaman
dahulu di website 1.0 user hanya bisa melihat informasi saja, kalau di jaman sekarang website 2.0 user
bisa berkomunikasi dengan lebih fleksibel.
Dari sisi teknologi HTML mulai berkembang menjadi XHTML dan lebih kuat di CSS untuk design Web,
kemudian muncul juga RSS Feed dalam format XML yang dapat digunakan untuk selalu update informasi
web tersebut tanpa harus membuka web tersebut, tetapi harus menggunakan RSS Reader yang dapat di
develop menggunakan berbagai bahasa pemrograman, sehingga memungkinkan dapat diakses melalui
aplikasi-aplikasi dalam bentuk selain website.
Teknologi javascript juga mulai dikembangkan menjadi AJAX, yang merupakan perpaduan antara
Javascript dan XML yang memungkinkan meload/mengambil kontent dari suatu web tanpa harus
melakukan refresh/berpindah halaman.
7 HTML
Pada era tahun 2007 Social Networking mulai berkembang dan menjadi tren dalam teknologi informasi
khususnya web site. Disini aplikasi tersebut menyediakan interaksi antar user untuk share comment,
photo atau data-data yang lain.
Aplikasi web di era ini juga menjadi sebuah platform baru, yaitu dari pihak lain dapat mengembangkan
aplikasi(plugin) untuk dapat digunakan di web tersebut.
Sejak saat itu, muncul juga teknologi Web Service yang memungkinkan aplikasi lain mengakses data-
data dari penyedia layanan untuk digunakan. Aplikasi ke-3 tersebut tidak hanya dapat membaca data-
data saja, tetapi bisa juga melakukan update terhadap data-data tersebut.
3.2 Web Twitter Tahun 2012
Dan di era 2010 sampai sekarang, teknologi web lebih ke arah Web Cerdas atau Web dengan Engine
Kecerdasan Buatan, yang lebih memudahkan user dalam berinteraksi.
Teknologi Web Semantik dan Cloud Computing mulai dikenalkan di era web versi 3.0 ini
4 HTML HTML adalah bahasa untuk membentuk sebuah halaman web, dan html bukan sebuah bahasa
pemrograman melainkan bahasa markup (markup language). Markup language terdiri dari sekumpulan
markups tag. HTML adalah suatu singkatan dari Hyper Text Markup Language, jadi html menggunakan
markups tag untuk membentuk sebuah halaman web.
8 HTML
HTML markups tag biasa juga disebut HTML tag, html tag adalah suatu text/keyword yang di apit oleh
suatu tag seperti <html>. Html tag biasanya berupa suatu pasangan tag, meskipun ada juga yang satu
tag. Contohnya <p>this is paragraph</p>, merupakan suatu html tag yang diawali dengan openig tag
<p> dan closing tag </p>. Berbeda dengan contoh berikut: <p>this is first line <br /> and this is second
line</p>, tag <br /> adalah opening tag sekaligus closing tag.
Berikut contoh struktur dasar HTML tag yang membentuk sebuah halaman web:
<html>
<head></head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
4.1 HTML Element Sebelum memulai menuliskan tag html, kita perlu persiapkan text editor dan web browser. Untuk
pemula disarankan jangan menggunakan Adobe Dreamweaver karena sudah banyak tools instant yang
bisa digunakan, silahkan gunakan Notepad++ atau Aptana.
Sebuah tag html ada yang mempunyai attribute atau tidak, attribute tsb digunakan sbg tambahan
informasi di dalam elemen html. Attribute tsb dituliskan di dalam opening tag html, dan attribute
mempunyai name dan value. Penulisan atara nama attribute dan value attribute dipisahkan dengan
tanda = dan di value harus selalu menggunakan quote(”).
Penulisan semua elemen html termasuk tag dan attribute harus menggunakan lower-case.
4.1 Struktur element HTML
9 HTML
4.2 HTML Text Formatting Beberapa tag html digunakan untuk melakukan formatting terhadap text, seperti <b>, <i>, <em> dsb.
Berikut beberapa tag-tag html yang disebut dengan formatting tag
TAG DESCRIPTION
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
4.3 HTML Tabel Table di HTML di definisikan dengan tag <table>. Table terbagi dalam baris/rows dengan tag <tr>, dan
tiap baris terbagi lagi dalam kolom dengan tag <td> untuk data atau <th> untuk header.
Di dalam tag <td> dapat berisi text atau tag-tag html lain seperti link, image, list, form, dll.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Kita dapat juga mengganti <td> ke <th> untuk header