Pemrograman Internet Elisabeth, S.Kom Pemrograman Internet Pertemuan I.

Presentasi berjudul: "Pemrograman Internet Elisabeth, S.Kom Pemrograman Internet Pertemuan I."— Transcript presentasi:

1 Pemrograman Internet Elisabeth, S.Kom Pemrograman Internet Pertemuan I

2 Silabus Introduction HTML CSS JavaScript PHP Penerapan I AJAX jQuery
1 pertemuan 3 pertemuan Total : 12 pertemuan

3 Teori Evolusi Darwin

4 Internet Dua komputer atau lebih yang saling berhubungan membentuk jaringan komputer di dunia (world‐wide) yang saling berinteraksi dan bertukar informasi. Menggunakan standarisasi protokol TCP/IP. Sejak 1999, Internet telah memiliki 200 juta pemakai di seluruh dunia, dan jumlah ini meningkat cepat. Lebih dari 100 negara terhubung dengan Internet untuk menukar data & informasi.

5 Sejarah Internet Dimulai oleh ARPANET (Advanced Research Project Agency Network). Dibangun oleh Departemen Pertahanan Amerika / Department of Defense (DOD) USA.Tujuan awal untuk membagi resources antar kontraktor DOD dan mendorong riset dalam bidang jaringan komputer. Pada perkembangannya banyak institusi yang bergabung. Maka dibuatlah dua buah jaringan dimana satu digunakan sebagai jalur akademik, satu untuk jalur militer.

6 Istilah dalam Pemrograman Internet
Website  kumpulan dari halaman web (web page) Homepage  halaman pertama dari website (nama yang umum digunakan index.*) URL (Uniform Resource Locator)  penunjuk ke suatu resource di Internet pada lokasi tertentu

7 Istilah dalam Pemrograman Internet
Data dari sebuah websites dapat diakses dengan bantuan sebuah jaringan komunikasi yaitu Internet. Pengguna web yang mencari informasi disebut pihak client (menggunakan web browser). Penyedia informasinya disebut pihak server (program khusus web server).

8 Istilah dalam Pemrograman Internet
HTTP (HyperText Transfer Protocol)  protokol yang digunakan untuk mentransfer data atau document dari web server ke browser client.

9 Aplikasi Web

10 Teknologi Aplikasi Web

11 Bagaimana Web Bekerja?

12 Tugas Buka website http://w3schools.com
Buka menu HTML Tutorial  Learn HTML Buatlah kamus tag dan atribut HTML Basic. Kumpul dalam file Word pada pertemuan II

13 HTML Hypertext Markup Language (HTML) bahasa markup yang digunakan untuk membuat sebuah halaman web. Dikatakan markup karena memuat tag-tag tertentu yang digunakan untuk membuat tampilan suatu website. Elemen HTML biasanya berupa tag yang berpasangan dan setiap tag ditandai dengan simbol “<” dan “>”.

14 W3C (World Wide Web Consortium)
Tim Berners Lee (1989) Browser Mosaic (NSCA) Perkembangan HTML Sejak tahun 1990an HTML berkembang dengan berbagai macam versi HTML yang muncul dengan tambahan & kelengkapan fitur-fiturnya, diantaranya : HTML Ver 1.0 HTML Ver 2.0 HTML Ver 3.0 HTML Ver 4.0 HTML Ver 5.0

15 HTML Version 1.0 HTML versi ini merupakan versi pertama sejak lahirnya Bahasa HTML yang memiliki kemampuan untuk heading, paragraph, hypertext, manipulasi text (bold & italic) serta memiliki hubungan terhadap penggunaan sebuah gambar.

16 HTML Version 2.0 HTML versi ini lahir pada tanggal 14 Januari 1996 dengan beberapa kemampuan tambahan seperti penambahan form & hal ini menjadi cikal bakal adanya proses interaktif dengan pengguna. Mulai versi ini, HTML menjadi awal mula adanya website interaktif.

17 HTML Version 3.0 3.0 : HTML versi ini lahir pada tanggal 18 Desember 1997 yang dikenal dengan HTML+ karena mempunyai beberapa fasilitas penambahan fitur table dalam paragraph. 3.2 : HTML versi ini merupakan versi terbaru penyempurnaan dari versi 3.0 pada bulan Mei 1998.

18 HTML Version 4.0 HTML versi ini lahir pada tanggal 24 Desember 1999 dengan penambahan beberapa fitur lagi seperti adanya link, image & lain-lain sebagai penyempurna dari HTML versi 3.2.

19 HTML Version 5.0 HTML versi ini atau lebih dikenal dengan HTML5 lahir pada tahun 2009 yang menjadi standar baru untukHTML, XHTML, & DOM HTML. HTML5 ini merupakan proyek kerjasama antara W3C dengan WHATWG(Web Hypertext Application Technology Working Group). HTML5 menambahkan beberapa perintah baru yang membantu para programmer web untuk mendesain website lebih menarik & interaktif.

20 HTML5 Tag “section, article, footer, audio, video, progress, nav, meter, time, aside, canvas serta datagrid“. Browser :  Firefox 3.5, Opera 9.6, Chrome, Safari, IE 8

21 Kelebihan HTML 5 Lebih simple
Pembaharuan pada HTML 5 memudahkan kalangan web developer untuk membuat halaman HTML karena tag yang digunakan menjadi lebih singkat. Doctype dan Charset yang lebih simple 2. Lebih rapi dan terstruktur layout di HTML 5 menjadi lebih rapi dan lebih bermakna dan lainnya lebih deskriptif dibandingkan dengan berbagai ID maupun class.

22 Kelebihan HTML 5 3. Mengurangi penggunaan plugin
HTML 5 menyediakan dukungan terhadap fitur-fitur yang sebelumnya memerlukan plugin, seperti video, audio, penggambaran, dan socket. Sehingga untuk memutar video dari web, plugin seperti adobe flash player tidak lagi dibutuhkan. 4. Penyimpanan data yang lebih baik Web storage memiliki kapasitas penyimpanan yang besar dan informasi disimpan secara lokal di web browser.

23 Kelebihan HTML 5 HTML 5 juga memiliki elemen-elemen dan atribut baru serta javascript API yang memperkaya fitur sebuah aplikasi web. Bahkan, game pun dapat dibuat dengan bermodalkan HTML 5, CSS, dan Javascript. 

24 Ciri Khas HTML Ekstensi file berupa .htm atau .html
Non case sensitive. Terdiri atas tag‐tag pembuka dan penutup (walaupun ada beberapa tag yang tidak memiliki penutup). Tag‐tag saling berpasangan & bersarang.

25 Software yang Digunakan
Text Editor Notepad Edit Plus Notepad++ Adobe Dreamweaver dsb Web Browser Internet Explorer Mozilla Firefox Opera dsb

26 Struktur HTML Document Information <html></html>
Document Header <head></head> Document Body <body></body>

27 HTML

28 Document Header Page Title Scripting Judul dari halaman web
cth : <title></title> Scripting Tempat client‐side script yang disertakan (javascript, vbscript, jscript) cth : <script></script>

29 Document Header Style Meta
Dipergunakan untuk mengatur bagaimana sebuah halamanvweb dengan berbagai komponennya hendak ditampilkan ke dalam browser cth : <style></style> Meta Meta tags, descriptions & keywords untuk mempermudah search engine dalam melakukan indexing. cth : <meta></meta>

30 Document Header

31 Document Body Bagian dari dokumen web yang akan ditampilkan ke user
cth : <body></body> Bagian ini memuat : Teks & gambar Link Server Side Script Multimedia and Special Programmed Events (SWF, Java Applets, online video)

32 • c

33 Tag, Attribute, Element

34 Heading Tag Berfungsi untuk menuliskan judul & sub‐judul

35 Paragraph, HR, dan BR Tag Untuk membuat paragraf baru, membuat text berada dalam sebuah paragraf. Tag paragraf bisa memiliki tag penutup, bisa juga tidak. <p>isi paragraf</p> Contoh : <p>Ini adalah tulisan yang berada dalam paragraf. Dengan tag ini maka tampilan dalam web akan menjadi lebih rapi</p> <BR> : break-line (untuk berpindah ke baris selanjutnya) <HR> : Horizontal-line (untuk menambahkan garis horizontal)

36 Font Tag Untuk mengatur penggunaan tulisan dalam halaman web (jenis tulisan, ukuran, warna, dll) Contoh : <font color=blue size=7 face=“arial”>Test</font> Tag lain untuk manipulasi Font: <b> tulisan tebal </b> <i> tulisan miring </i> <u> tulisan bergaris bawah </u> _subscript ^superscript

37 Image Tag Untuk memuat gambar ke dalam halaman web. <img src=“”>
Contoh : <img src=“”> Tag image memiliki beberapa attribute antara lain : src → lokasi gambar yang akan ditampilkan width → ukuran lebar gambar height → ukuran tinggi gambar alt → deskripsi tentang gambar title → judul gambar

38 Hyperlink Tag Dipergunakan untuk menghubungkan (linking) text dan image ke halaman lain atau bagian tertentu dari halaman yang sama dalam satu website atau website yang lain. Contoh : Link ke halaman website lain <a href=“ g</a> Link ke file lain dalam satu website <a href=“halaman2.html”>Halaman 2</a>

39 <!-- komentar -->
Tag Komentar Berfungsi sebagai komentar, agar tidak terbaca oleh browser. <!-- komentar --> Contoh : <!-- Ini adalah contoh paragraf --> <p> paragraf pertama ini menjelaskan tentang… </p>

40 Frameset dan Frame Dipergunakan untuk menggabungkan lebih dari satu halaman web kedalam halaman lain. Contoh : Halaman3. html

41 Frameset dan Frame Halaman3.html

42 List Digunakan untuk membuat daftar. Terdiri atas :
Ordered List  numbering Unordered List  bullet Definition List

43 List

44 Atribut pada List

45 Table Digunakan untuk menyajikan data dalam bentuk kolom dan baris, tujuannya agar informasi dapat ditampilkan secara lebih terstruktur dan tabular.

46 Table Elements

47 Tugas Buka website http://w3schools.com
Buka menu HTML Tutorial  Learn HTML Buatlah kamus perintah-perintah CSS. Kumpul dalam bentuk file pada pertemuan III