heruunindra.files.wordpress.com€¦ · web viewhtml (hypertext mark up language) merupakan suatu...

Modul Pemrograman Web I1. Pengenalan HTML

a. World Wide WebInternet merupakan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi.World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan paling populer.WWW bekerja merdasarkan pada tiga mekanisme berikut:

Protocol standard aturan yang di gunakan untuk berkomunikasi pada komputer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.

Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource Locator) yang di gunakan sebagai standard alamat internet.

HTML digunakan untuk membuat document yang bisa di akses melalui web.

b. Pengenalan HTMLHypertext Markup Language merupkan standard bahasa yang digunakan untuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu :

Mengontrol tampilan dari web page dan contentnya. Mempublikasikan document secara online sehingga bisa di akses

dari seluruh dunia. Membuat online form yang bisa di gunakan untuk menangani

pendaftaran, transaksi secara online. Menambahkan object-object seperti image, audi, video dan juga

java applet dalam document HTML.

c. Browser dan Editor1)Browser

Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web.Browser yang sering di gunakan biasanya Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari, Netscape Navigator dan masih banyak yang lainya.

2)Editor

1

Modul Pemrograman Web IProgram yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Notepad, Notepad++, Netbeans, Ms.FrontPage, dan Adobe Dreamweaver.Untuk yang sering kita gunakan Notepad atau Notepad++.

d. Tag HTML dan Penulisan HTMLHTML (HyperText Mark up Language) merupakan suatu metoda untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program, penulisan tag HTML tidak case sensitive.Penulisan Tag HTML terlihat gambar dibawah ini :

Ok, langsung saja kita buka editor notepad atau notepad++ dan ketikkan code HTML dibawah ini.

Setelah kalian ketik simpan dengan nama contoh_001.html atau contoh_001.htm lalu kalian file tersebut kalian klik dua kali untuk melihat hasil dari code tersebut.Output dari code diatas adalah seperti berikut :

2Kami Sedang Belajar HTML

Modul Pemrograman Web I

Contoh Kedua Pengaturan paragraph

Contoh KetigaPenggunaan break <br>

Contoh KeempatPenggunaan Horizontal Rule <HR>

3


Latihan Pertama :Gabungkan code contoh 2 s/d 4 sehingga dapat menampilkan seperti gambar dibawah ini :

e. Mewarnai latar / Memberi warna background, memberi warna font dan mengatur besar-kecilnya font.Contoh Kelima

4

Modul Pemrograman Web IPenggunaan bgcolor

Untuk value bgcolor bisa menggunakan dengan warna langsung sepertiRed, Green, Blue, Yellow, Brown, Grey dan lain sebagainya.Dan bisa juga dengan Hexa decimal.

Warna Dengan Text Hexadecimal colorPutih / White #FFFFFFHitam / Black #000000Merah / Red #FF0000Hijau / Green #00FF00Biru / Blue #0000FFKuning / Yellow #FFFF00Jingga / Pink #FF00FFAbu-abu / Grey #C0C0C0

Contoh KeenamPewarnaan font / text

5


Contoh KetujuhPenggunaan Heading

6


Contoh KedelapanPengaturan ukuran Font

Latihan & TugasBuatlah Laman Web tentang data pribadi anda, dengan menggabungkan Tag-tag HTML dari Contoh Kelima sampai dengan contoh kedelapan. Jangan lupa diberikan warna untuk latarnya.

7


f. Pembuatan Bullet Numbering.Contoh KesembilanPenggunaan list

g. Pemakaian gambar.

8

Modul Pemrograman Web IUntuk menggunakan file gambar yang akan kita sisipkan didalam Tag HTML, langkah awal adalah copy kan file gambar tersebut dalam satu direktori atau folder project web anda. Dan mesti anda ketahui, penggunaan gambar disini sangat case sensitive dalam pemanggilan file gambar yang akan kita buat.Tag HTML-nya seperti berikut <IMG SRC=”NAMA FILE GAMBAR”> Nah perlu dipahami juga ektension file gambar tersebut apakah .jpg .png .bmp .gif misalkan kita mempunyai gambar bernama “TeknikInformatika” dengan ektension gambarnya .jpg maka, tag HTML adalah seperti berikut <IMG SRC=”TeknikInformatika.jpg”>Langsung saja kita coba Contoh KesepuluhPenggunaan file gambar

Perlu kalian perhatikan disini kita menggunakan file gambar dengan nama “apple.jpg”Bagaimana jika file gambar berada didalam suatu folder atau direktori lain.?? Silahkan kalian perhatikan dan fahami pada code contoh kesebelas.

Contoh KesebelasPenggunaan file gambar dengan beda direktori.

9

Modul Pemrograman Web IKalian lihat disini ada 2 folder yaitu folder HTML dan folder IMAGES, nah file gambar “apple.jpg” berada dalam folder IMAGES maka untuk code / Tag HTMLnya seperti berikut :

Catatan : Untuk file HTML ada pada folder HTML dan file gambar ada pada folder IMAGES.

Latihan & TugasBuatlah Laman Web tentang data pribadi anda, dengan menggabungkan Tag-tag HTML dari Contoh Pertama sampai dengan Contoh Kesebelas.

h. Pembuatan HyperlinkContoh KeduabelasHyperlink

10


Hyperlink sebuah code Tag HTML untuk menghubungkan file yang satu dengan yang lain. Untuk kasus disini kita belum mengisikan file yang ingin kita hubungkan.Karena <a href = ”#” > masih tertuju ke # jadi belum bias menghubungkan dan menampilkan ya ada.Untuk itu lebih kalian coba isikan Tag <a href= “ ”> dengan file yang sudah kalian buat dari contoh pertama hingga contoh kesebelas.

i. Pembuatan TableContoh KetigabelasTable

11


j. Pembuatan FormBentuk HTML digunakan untuk melewatkan data ke server.Suatu bentuk dapat berisi elemen input seperti bidang teks, checkbox, radio button, tombol submit dan banyak lagi. Formulir juga dapat berisi daftar pilih, textarea, fieldset, legenda, dan elemen label.Tag <form> digunakan untuk membuat bentuk HTML seperti berikut :

12

Modul Pemrograman Web ILangsung saja kalian coba code Tag HTML dibawah ini :Contoh Keempat Belas

Contoh Kelima Belas

13


Contoh Keenam Belas

14


Latihan & TugasBuatlah Laman Web tentang data pribadi anda, dengan menggabungkan Tag-tag HTML dari Contoh-contoh yang pernah kalian praktikkan, jangan lupa untuk membuat menu register dan semua file harus bias terhubung satu dengan yang lain.

2. CSS (CASCADING STYLE SHEET)Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman

web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

15

Modul Pemrograman Web ISama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word

yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.( sumber : http://id.wikipedia.org/wiki/Cascading_Style_Sheets ).

Contoh aturan penulisan syntax CSSSyntaxis CSS dibagi dalam 3 bagian, yaitu : selector {property : value}Dimana : selector : tag HTML yang akan didefinisikan (body, H1, Link , dll). property : atribut yang akan diubah.h1 { color: green; }

Penulisan CSS dibagi 3 penempatan :o Inline Style Sheet

o Embbeded Style Sheet

o External Style Sheet

Inline Style Sheet CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain. Contoh penulisan CSS dengan metode Inline Style Sheet :

16

selector

property

value

http://id.wikipedia.org/wiki/Cascading_Style_Sheets


Output pada browser :

Embbeded Style SheetCSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.Contoh penggunaan CSS dengan metode Embedded Style Sheet :

17



Nah, sudah faham kan untuk penulisan CSS dengan Inline dan Embedded Style Sheet, jika sudah mari sekarang kita lanjut ke penulisan CSS dengan External Style Sheet.

External Style Sheet.Untuk penggunaan External Style Sheet kita mesti membuat 2 buah file, yang pertama kita membuat file berekstensi .html atau .htm, lalu yang kedua file berekstentsi .css nah, silahkan langsung mencobanya.Kami menggunakan disini file HTML bernama 003_css.html dengan code program seperti dibawah ini :

18


Dan untuk file kedua kami beri nama 003_css.css dengan code program seperti dibawah ini :

Penjelasan :Jika kita lihat pada code HTML <link rel="stylesheet" type="text/css" href="003_css.css" />, nah maksudnya adalah file CSS yang kita punya di-link dengan menggunakan tag tersebut sehingga code HTML bisa menampilkan syntax CSS yang kita punya yang akan ditampilkan pada browser.Output pada browser :

19


Tugas :Buatlah biodata anda dengan menggunakan tiga (3) kriteria penulisan CSS diatas.

Hyperlink dengan CSS.Contoh code program HTML hyperlink dengan CSS, untuk code HTMLnya seperti berikut :

20


Dan untuk CSS nya seperti berikut :


Penjelasan :Kita lihat code program,

21


a : link = link awal dengan warna orange dan untuk garis bawah teks masih ada.a : visited = jika cursor dan di klik akan berwarna birua : hover = jika cursor disorot ke link yang kita sorot maka akan berwarna merah dan garis bawah pada teks akan hilang, sebab terdapat selector text-decoration dan value none.a : active = jika link tersebut diklik dan halaman web berada pada link tersebut.

Tugas.Gabungkan file yang pernah kalian buat pada pembahasan HTML tentang Hyperlink, dan untuk href=”” isikan sesuai dengan nama atau file yang pernah kalian buat.

Memperindah dan Mempercantik Table.Langsung saja lihat dan praktikkan code HTML dibawah ini :

22


Dan Syntax CSS dibawah ini :

Seperti biasa kita gunakan External Style Sheet, sebab dalam proses editing jika ada error code akan lebih mudah untuk mencari error code-nya dan kalian tidak perlu membaca satu persatu code di HTML-nya.Output pada browser :

Penggunaan ID dan Class pada CSS.Selain menetapkan satu gaya untuk elemen HTML, CSS memungkinkan anda untuk menentukan penyeleksi anda sendiri yang disebut "ID" dan "CLASS".

1. Id SelectorPemilih id digunakan untuk menentukan gaya untuk elemen tunggal yang unik. Selector ID menggunakan atribut ID elemen HTML, dan didefinisikan

23

Modul Pemrograman Web Idengan "#". Aturan style dibawah ini akan diterapkan ke elemen dengan ID = "contoh1" :

2. Class SelectorPemilih kelas digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan pemilih id, pemilih kelas yang paling sering digunakan pada beberapa elemen. Hal ini memungkinkan Anda untuk menetapkan gaya tertentu untuk banyak elemen HTML dengan kelas yang sama. Pemilih kelas menggunakan atribut class HTML, dan didefinisikan dengan "." Pada contoh di bawah ini, semua elemen HTML dengan class = "pusat" akan menjadi pusat-blok :

Anda juga dapat menentukan bahwa hanya elemen HTML khusus, harus dipengaruhi oleh class. Pada contoh di bawah ini, semua elemen p dengan class = "pusat" akan menjadi pusat-blok :

3. Pengenalan JavascriptA. Sejarah JavaScript

JavaScript pertama kali diperkenalkan oleh Netscape pada tahun 1995. Pada awalnya bahasa yang sekarang disebut JavaScript ini dulunya dinamai “LiveScript”” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2 yang sangat populer pada saat itu. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java”) pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995.

Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser milik mereka yaitu Internet Explorer 3. JavaScript sendiri merupakan modifikasi dari bahasa pemrograman C++ dengan pola penulisan yang lebih sederhana dari bahasa pemrograman C++.B. Pengertian JavaScript

24

Modul Pemrograman Web IJavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan

disisi klien. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.

Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan (embedded). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu, dan lain lain.

C. Yang Harus Diperhatikan Dalam Penulisan JavaScriptYang harus diperhatikan dalam pengelolaan pemrograman JavaScript,

diantaranya JavaScript adalah “case sensitive”, yang artinya JavaScript membedakan huruf besar dan huruf kecil. Jika Anda pernah belajar bahasa pemrograman seperti Turbo C atau C++, maka sama seperti bahasa pemrograman tersebut, dimana huruf T tidak sama dengan huruf t.

Dalam bahasa pemrograman JavaScript juga, sebagai contoh fungsi perintah var tidak boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah var (huruf kecil semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf kecil semua), dsb.D. Kelebihan JavaScript

JavaScript bekerja pada sisi browser. maksudnya begini : untuk menampilkan halaman web, user menuliskan alamat web di address bar url. setelah itu, browser “mengambil” file html ( dengan file JavaScript yang melekat padanya jika memang ada ) ke server yang beralamat di URL yang diketikan oleh user. Selesai file diambil, file ditampilkan pada browser. Nah, setelah file JavaScript berada pada browser, barulah script JavaScript tersebut bekerja.

Efek dari Javascript yang bekerja pada sisi browser ini, Javascript dapat merespon perintah user dengan cepat, dan membuat halaman web menjadi lebih responsif. JavaScript melakukan apa yang tidak bisa dilakukan oleh HTML, PHP, dan CSS : menangani hal – hal yang membutuhkan respons cepat terhadap aksi dari user.

25

Modul Pemrograman Web IContoh : fungsi validasi pada form. ketika anda mengisi sebuah form yang

divalidasi menggunakan JavaScript, anda mengetikkan data lalu mengetik submit, sebelum data dikirimkan ke server, data akan “dicek” terlebih dahulu pada browser menggunakan fungsi JavaScript yang ada pada halaman web. sehingga, jika memang data yang anda isikan tidak valid, daripada membuang-buang waktu dengan mengirimkan data ke server baru di validasi di server dan lalu server mengirimkan respons balik mengenai ketidak validan input data anda, lebih baik cek validasi data form dilakukan secara lokal di browser menggunakan fungsi JavaScript.E. Lebih Cepat dan Lebih Hemat

Implementasi terpopuler saat ini dari pemrograman JavaScript adalah teknik AJAX. (Asynchronous JavaScript and XMLHTTP ). teknik ini sering digunakan oleh aplikasi berbasis web seperti Facebook, Yahoo Gmail, Google Reader, dan lain lain. Teknik yang membuat pertukaran data antara server dan browser terjadi di belakang layar sehingga interaksi antara user dan aplikasi web semakin responsif. Post tersendiri untuk membahas hal ini akan kita siapkan.

Contoh Tag HTML dengan JavascriptContoh Pertamajavascript_001.html

Penjelasan :

26

Modul Pemrograman Web IJika kita klik tombol Klik Disini maka akan muncul popup dengan nama “Kok di Klik seeh”. Mengapa sebab kita mempunyai perintah javascript onclick dengan value alert dan menu isi Kok di Klik seeh.

Contoh Keduajavascript_002.html

Penjelasan :Jika cursor mouse kita arahkan ke tombol Hijau maka secara otomatis background berubah warna menjadi warna hijau, dan saat cursor mouse tidak kearah tombol hijau maka secara default background bewarna putih. Mengapa karena kita memiliki perintah javascript onmouseover dan onmouseout dengan value sesuai bgColor.

27

heruunindra.files.wordpress.com€¦ · web viewhtml (hypertext mark up language) merupakan suatu...

Documents