Web Programming (WP) Step 2 [ HTML & PHP BASIC] Created By Rolly Yesputra, M.Kom rollyyp.wordpress.com [email protected] 082391177785 || 767E4C4D
4 March 2015
rollyyp.wordpress.com
1
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. 4 March 2015
rollyyp.wordpress.com
2
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 4 March 2015
rollyyp.wordpress.com
3
Example : HTML
4 March 2015
rollyyp.wordpress.com
4
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.
4 March 2015
rollyyp.wordpress.com
5
Menggunakan Headling di HTML Kode HTML Headling
4 March 2015
Output Program / Kode
rollyyp.wordpress.com
6
Script-script HTML • = Awal dan akhir script • = header html • = Judul halaman web • = body halaman html •
= membuat paragraf dg html • <strong> = membuat tulisan bold 4 March 2015
• = Membuat underline text. • = membuat text cetak miring. • = membuat text bold sama dengan strong. • = utk membuat kotak seperti panel. • membuat text judul panel utk fieldset.
rollyyp.wordpress.com
7
Script-script HTML (Next) Membuat List
Membuat Tabel
•
= 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
4 March 2015
rollyyp.wordpress.com
8
Script-script HTML (Next) •
= 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. 4 March 2015
• 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.
rollyyp.wordpress.com
9
Script-script HTML (Next) • Membuat Form dan Asesories nya. • form dimulai dengan tag 4 March 2015
rollyyp.wordpress.com
10
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. 4 March 2015
rollyyp.wordpress.com
11
Script-script HTML (Combo Box)
• Untuk membuat ComboBox kita menggunakan tag <select> • Name merupakan nama dari ComboBox • merupakan daftar pilihan yang disediakan • Value merupakan nilai yang akan diambil ketika melakukan proses data tersebut. 4 March 2015
rollyyp.wordpress.com
12
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. 4 March 2015
