Web Programming (WP) Step 2 [ HTML & PHP BASIC] Created By Rolly Yesputra, M.Kom rollyyp.wordpress.com rollyyesputra1@gmail.com 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 <html> dan diakhiri dengan Tag </html> Semua tag yang ada didalam HTML harus diakhiri dengan </kode> atau <kode/> 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 Output Program / Kode 4 March 2015 rollyyp.wordpress.com 6
Script-script HTML <html> </html> = Awal dan akhir script <head> </head> = header html <title> </title> = Judul halaman web <body> </body> = body halaman html <p> </p> = membuat paragraf dg html <strong> </strong> = membuat tulisan bold <u> </u> = Membuat underline text. <i> </i> = membuat text cetak miring. <b> </b> = membuat text bold sama dengan strong. <fieldset> </fieldset> = utk membuat kotak seperti panel. <legend> </legend> membuat text judul panel utk fieldset. 4 March 2015 rollyyp.wordpress.com 7 Script-script HTML (Next) Membuat List <ul> </ul> = membuat list yang tidak berurutan. <ol> </ol> = membuat list yang berurutan. <li> </li> = membuat item atau pilihan dari list tersebut. Membuat Tabel <table> </table> = tag awal membuat tabel. <tr> </tr> = membuat baris untuk tabel. <th> </th> = membuat header dari tabel. <td> </td> = membuat column dari tabel 4 March 2015 rollyyp.wordpress.com 8
Script-script HTML (Next) <div> </div> = membuat kotak atau membagi halaman menjadi beberapa bagian. <div> akan lebih baik digunakan jika digabungkan dengan CSS Jika tidak div akan membagi halaman dari atas ke bawah. Membuat Hyperlink. <a href=" "> Label </a> href="file Yang Dituju" href ini merupakan kode yang digunakan untuk menentukan file yang akan dibuka berikutnya. Hyperlink ini digunakan untuk navigasi perpindahan halaman. 4 March 2015 rollyyp.wordpress.com 9 Script-script HTML (Next) Membuat Form dan Asesories nya. form dimulai dengan tag <form> 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 : <form name="f1" action="proses.php" method="post"> akhir kode </form> 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> </select> Name merupakan nama dari ComboBox <option> </option> 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 rollyyp.wordpress.com 13 4 March 2015 rollyyp.wordpress.com 14
4 March 2015 rollyyp.wordpress.com 15