wordpress.com · 2015. 8. 6. · 1 0 < () 9=6: & 2'& $ 2' ( ,!" ""! , / , , , & 2' , , * ! * /...

4 March 2015 rollyyp.wordpress.com 1

Web Programming (WP) Step 2[ HTML & PHP BASIC]

Created By Rolly Yesputra, M.Komrollyyp.wordpress.com

[email protected] || 767E4C4D


HTML (Hypertext Markup Language)

• HTML merupakan kode standar yang digunakan untuk membuat program web.

• HTML merupakan client side script.• HTML merupakan script yang akan dijalankan

secara langsung oleh web browser.• Tampilan web akan dirender menjadi kode

HTML yang akan diterjemahkan lagi oleh web browser.


Tag HTML

• HTML juga memiliki Tag Standar yang digunakan untuk memulai dan mengakiri script.

• Tag HTML harus dibuat dengan menggunakan huruf kecil untuk mengikuti aturan XHTML.

• Tag HTML dimulai dengan • dan diakhiri dengan Tag • Semua tag yang ada didalam HTML harus

diakhiri dengan atau


Example : HTML


Review HTML

• Dari kode pada slide diatas dapat kita lihat bahwa semua kode program(Script HTML) dibuat dengan huruf kecil dan dimulai dengan tag dan akan diakhiri dengan sebuah tag.

• Sebenarnya kita juga bisa membuat kode HTML dengan huruf besar, tetapi nanti kita akan menyalahi aturan yang dibuat oleh XHTML, dimana kode harus dalam bentuk huruf kecil dan diakhiri dengan tag atau dengan />

• Untuk itu maka direkomendasikan agar menggunakan kode standar xhtml yaitu dengan huruf kecil semua agar tidak masalah karena semua browser sudah mulai mengikuti aturan itu.


Menggunakan Headling di HTML

Kode HTML Headling Output Program / Kode


Script-script HTML

• = Awal dan akhir script

• = header html

• = Judul halaman web

• = body halaman html

•

= membuat paragraf dg html

• = membuat tulisan bold

• = Membuat underline text.

• = membuat text cetak miring.

• = membuat text bold sama dengan strong.

• = utk membuat kotak seperti panel.

• membuat text judul panel utk fieldset.


Script-script HTML (Next)

• = membuat list yang tidak berurutan.

• = membuat list yang berurutan.

• = membuat item atau pilihan dari list tersebut.

• = tag awal membuat tabel.

• = membuat baris untuk tabel.

• = membuat header dari tabel.

• = membuat column dari tabel

Membuat List Membuat Tabel



• = membuat kotak atau membagi halaman menjadi beberapa bagian.

• akan lebih baik digunakan jika digabungkan dengan CSS

• Jika tidak div akan membagi halaman dari atas ke bawah.

• Membuat Hyperlink.– Label

– href="File Yang Dituju"– href ini merupakan

kode yang digunakan untuk menentukan file yang akan dibuka berikutnya.

– Hyperlink ini digunakan untuk navigasi perpindahan halaman.



• Membuat Form dan Asesories nya.• form dimulai dengan tag dan memiliki

berbagai atribut penting diantaranya :– name : untuk nama form– action : untuk menentukan file yang akan memproses form

tersebut.– method : teknik yang akan digunakan sebagai cara

pengiriman data. Bisa menggunakan GET atau POST. akan dibahas pada pertemuan berikutnya.

• awal kode dasar :

• akhir kode


Script-script HTML (Input)

• Penjelasan Atribut input diatas :– type : adalah jenis inputan yang akan anda gunakan, ada beberapa

jenis inputan diantaranya : text, password, date, month, year, day, color, dan lainnya, silahkan lihat di html5test.com atau di www.w3schools.com

– untuk mencoba silahkan anda ganti type dari inputan diatas.– atribut name merupakan nama yang akan digunakan nanti ketika

mengambil value nya.– Size panjang tampilan input, dan maxlength merupakan jumlah

masimal data yang bisa diinputkan.


Script-script HTML (Combo Box)

• Untuk membuat ComboBox kita menggunakan tag

• Name merupakan nama dari ComboBox• merupakan daftar pilihan

yang disediakan • Value merupakan nilai yang akan diambil ketika

melakukan proses data tersebut.


Membuat Radio dan CheckBox

• Input dengan type radio• jika anda ingin memilih salah satu, gunakan radio dan

gunakan name yang sama.• jika anda ingin multiple choice , gunakan checkbox, agar

anda bisa memilih lebih dari satu.• Testing dan jalankan script.


wordpress.com · 2015. 8. 6. · 1 0 < () *9=6: & 2'& $ 2' ( ,!"* "*"! , / , , , & 2' * , , * ! * /...

Documents

wordpress.com · 2015. 8. 6. · 1 0 < () 9=6: & 2'& $ 2' ( ,!" ""! , / , , , & 2' , , * ! * /...