3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN GAYA PADA FON (FONT) KELUARGA FONT (FONT FAMILY) ATURCARA OUTPUT <html> <head> <title>Keluarga Fon </title> </head> <body> <h1 style="font-family:Arial Black;">Laman Web Sekolah</h1> <h </body> </html> SAIZ FON ( FONT SIZE) <html> <head> <title>Saiz Fon </title> </head> <body> <h1 style="font-size:70;“ >Laman Web Sekolah</h1> </body> </html> STAIL FON ( FONT STYLE) <html> <head> <title>Stail Fon </title> </head> <body> <h1 style="font-style:italic;“ >Laman Web Sekolah</h1> </body> </html> * sintak aturcara berbeza dari buku teks
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN GAYA PADA BACKGROUND WARNA LATAR BELAKANG ATURCARA OUTPUT <html> <head> <title>Warna Latar Belakang </title> </head> <Style> body { background-color: lightgreen; } </style> <body> <h1>Laman Web Sekolah</h1> </body> </html> IMEJ ATAU GAMBAR SEBAGAI LATAR BELAKANG <html> <head> <title>Latar Belakang Imej </title> </head> <Style> body { background-image : url("http://moziru.com/images/collageclipart-school-13.jpg"); } </style> <body> <h1>Laman Web Sekolah</h1> </body> </html>> * sintak aturcara berbeza dari buku teks
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN GAYA PADA TABLES MELETAKKAN GARISAN LUAR ATAU BORDER ATURCARA OUTPUT <html> <head> <title>Gaya Jadual </title> </head> <Style> table { border : 1px solid; } </style> <body> <h1>Laman Web Sekolah</h1> <table> <th> KANDUNGAN LAMAN WEB </th> </tr> <tr> <td> Pengenalan Sekolah </td> </tr> <tr> <td> Senarai Guru </td> </tr> </table> </body> </html>
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN GAYA PADA TABLES MELETAKKAN GARISAN LUAR ATAU BORDER ATURCARA OUTPUT html> <head> <title>Gaya Jadual </title> </head> <Style> table, th,td { border : 1px solid;} </style> <body> <h1>Laman Web Sekolah</h1> <table> <th> KANDUNGAN LAMAN WEB </th> </tr> <tr> <td> Pengenalan Sekolah </td> </tr> <tr> <td> Senarai Guru </td> </tr> </table> </body> </html>
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN GAYA PADA TABLES MELETAKKAN GARISAN LUAR ATAU BORDER ATURCARA OUTPUT html> <head> <title>Gaya Jadual </title> </head> <Style> table {border-collapse: collapse;} table, th,td { border : 1px solid;} </style> <body> <h1>Laman Web Sekolah</h1> <table> <th> KANDUNGAN LAMAN WEB </th> </tr> <tr> <td> Pengenalan Sekolah </td> </tr> <tr> <td> Senarai Guru </td> </tr> </table> </body> </html>
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN GAYA PADA TABLES MELETAKKAN GARISAN LUAR ATAU BORDER ATURCARA OUTPUT html> <head> <title>Gaya Jadual </title> </head> <Style> table {border-collapse: collapse;} table, th,td { border : 3px solid;} </style> <body> <h1>Laman Web Sekolah</h1> <table> <th> KANDUNGAN LAMAN WEB </th> </tr> <tr> <td> Pengenalan Sekolah </td> </tr> <tr> <td> Senarai Guru </td> </tr> </table> </body> </html>
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN GAYA PADA TABLES MELETAKKAN GARISAN LUAR ATAU BORDER ATURCARA OUTPUT html> <head> <title>Gaya Jadual </title> </head> <Style> table {border-collapse: collapse;} table, th, { border : 3px solid;} td { border : 2px dashed;} </style> <body> <h1>Laman Web Sekolah</h1> <table> <th> KANDUNGAN LAMAN WEB </th> </tr> <tr> <td> Pengenalan Sekolah </td> </tr> <tr> <td> Senarai Guru </td> </tr> </table> </body> </html>
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN GAYA PADA TABLES MELETAKKAN GARISAN LUAR ATAU BORDER (Menetapkan kelebaran dan ketinggian sesuatu table) ATURCARA OUTPUT html> <head> <title>Gaya Jadual </title> </head> <Style> table {border-collapse: collapse; width : 100%; height : 20%} table, th, td{ border : 1px solid;} </style> <body> <h1>Laman Web Sekolah</h1> <table> <th> KANDUNGAN LAMAN WEB </th> </tr> <tr> <td> Pengenalan Sekolah </td> </tr> <tr> <td> Senarai Guru </td> </tr> </table> </body> </html>
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN GAYA PADA TABLES MELETAKKAN GARISAN LUAR ATAU BORDER (Menetapkan jajaran teks di dalam table) ATURCARA OUTPUT html> <head> <title>Gaya Jadual </title> </head> <Style> table {border-collapse: collapse; width : 100%; height : 20%; text-align : center;} table, th, td{ border : 1px solid;} </style> <body> <h1>Laman Web Sekolah</h1> <table> <th> KANDUNGAN LAMAN WEB </th> </tr> <tr> <td> Pengenalan Sekolah </td> </tr> <tr> <td> Senarai Guru </td> </tr> </table> </body> </html>
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN GAYA PADA TABLES MELETAKKAN GARISAN LUAR ATAU BORDER (Menukar warna latar belakang dan warna teks dalam table) ATURCARA OUTPUT html> <head> <title>Gaya Jadual </title> </head> <Style> table { border-collapse: collapse; background-color: green; color : white; } table, th, td{ border : 1px solid;} </style> <body> <h1>Laman Web Sekolah</h1> <table> <th> KANDUNGAN LAMAN WEB </th> </tr> <tr> <td> Pengenalan Sekolah </td> </tr> <tr> <td> Senarai Guru </td> </tr> </table> </body> </html>
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN GAYA PADA TABLES MELETAKKAN GARISAN LUAR ATAU BORDER (Menebalkan jarak di antara medan (padding) dalam table) ATURCARA OUTPUT html> <head> <title>Gaya Jadual </title> </head> <Style> table { border-collapse: collapse; background-color : green; color : white; } table, th, td{ border : 1px solid;} </style> <body> <h1>Laman Web Sekolah</h1> <table cellpadding="20"> <tr> <th> KANDUNGAN LAMAN WEB </th> </tr> <tr> <td> Pengenalan Sekolah </td> </tr> <tr> <td> Senarai Guru </td> </tr> </table> </body> </html> * sintak aturcara berbeza dari buku teks
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN GAYA PADA BORDERS ATURCARA OUTPUT <html> <head> <title>Gaya Border </title> <Style> h1 { border-style: solid; border-width : 5px; } </style> </head> <body> <h1>Laman Web Sekolah</h1> </body> </html> ATURCARA OUTPUT <html> <head> <title>Gaya Border </title> <Style> h1 { border-style: dashed; border-width : 5px; border-color: red; } </style> </head> <body> <h1>Laman Web Sekolah</h1> </body> </html>
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN GAYA PADA POSITION • Kedudukan lalai dalam setiap elemen HTML yang terdapat dalam dokumen. • Kedudukan dokumen akan mengikut turutan atau susunan. • Kedudukan elemen tidak akan berubah atau tidak akan mengikut ketetapan. • Kedudukan elemen HTML bergantung pada browser viewpoint. iaitu pandangan pengguna kepada pelayar web. • Kedudukan elemen akan tetap dikedudukan yang sama walaupun pengguna scroll pada halaman web. • Kedudukan elemen diubah bergantung atau berkait terhadap kedudukan normalnya atau kedudukan awalnya. • Kedudukan elemen tidak akan mengikut turutan atau susunan pada laman web lagi dan akan ditempatkan mengikut kedudukan yang dikehendaki.
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN GAYA PADA POSITION TANPA GAYA POSITION ATURCARA OUTPUT <html> <head> <title>Tanpa Gaya Position </title> </head> <body> <h1>Laman Web Sekolah (Absolute)</h1> <h2>Sekolah 1 (Relative)</h2> <h3>Sekolah 2 (Fixed)</h3> <h4>Sekolah 3 (Static)</h4> </body> </html> DENGAN GAYA POSITION ATURCARA OUTPUT <html> <head> <title> Gaya Position </title> <style> h1 { background-color: lightgreen; position : absolute; width : 40%; top : 10px; left : 50px; height : 100px; } h2 { background-color : lightpink; position : ralative; width : 30%; top : 70px; left : 3000px; height : 100px; } h3 { background-color : lightblue; position : fixed; width : 70%; bottom : 10px; left : 200px; height : 100px; } h4 { background-color: lightgrey; position : static; width : 10%; bottom : 70px; left : 200px; height : 100px; } </style> </head> <body> <h1>Laman Web Sekolah (Absolute)</h1> <h2>Sekolah 1 (Relative)</h2> <h3>Sekolah 2 (Fixed)</h3> <h4>Sekolah 3 (Static)</h4> </body> </html>
3.3 3.3.5 MENGGUNAKAN BAHASA PENSKRIPAN KLIEN UNTUK MEMBINA LAMAN WEB PENGGUNA FITUR PENGESAHAN DATA PENGESAHAN DATA ATURCARA <html> <body> Nama Anda: <input id = "n1"> <button type = "button" onclick = "semakData()"> Pengesahan Nama</button> <script> function semakData(){ var teksnama; teksnama = document.getElementByid("n1").value; if (teksnama = " ") { window.alert("Sila masukkan nama anda "); } } </script> </body> </html> OUTPUT
3.3 3.3.5 MENGGUNAKAN BAHASA PENSKRIPAN KLIEN UNTUK MEMBINA LAMAN WEB PENGGUNA FITUR PENGESAHAN DATA PENGESAHAN DATA ATURCARA <html> <body> Nombor Giliran: <input id = "n2"> <button type = "button" onclick = "semakNombor()">Pengesahan Nombor Giliran</button> <script> function semakNombor() { var teksnombor; teksnombor = document.getElementById("n2").value; if (isNaN (teksnombor)) { window.alert("Nilai yang dimasukkan adalah bukan nombor. Sila masukkan nombor "); } } </script> </body> </html> OUTPUT
3.3 3.3.5 MENGGUNAKAN BAHASA PENSKRIPAN KLIEN UNTUK MEMBINA LAMAN WEB PENGGUNA FITUR BUTANG PILIHAN BUTANG RADIO ATURCARA <html> <body> <b> MOD PENGAJIAN </b> <form action = " " > <input type = "radio" name = "mod" id = "sepenuh"> Sepenuh Masa <input type = "radio" name = "mod" id = "separuh"> Separuh Masa <p> <button type = "button" onclick = "semakMod()">Pengesahan Mod Pengajian</button> </p> </form> <script> function semakMod() { if (document.getElementById('sepenuh').checked == true) { window.alert("Mod Pengajian : SEPENUH MASA "); } else { if (document.getElementById('separuh').checked == true) { window.alert("Mod Pengajian : SEPARUH MASA "); } } document.getElementById('sepenuh').checked == false; document.getElementById('separuh').checked == false; } </script> </body> </html> OUTPUT
3.3 3.3.5 MENGGUNAKAN BAHASA PENSKRIPAN KLIEN UNTUK MEMBINA LAMAN WEB PENGGUNA FITUR BUTANG PILIHAN BUTANG CHECKBOX ATURCARA <html> <body> <b> SUBJEK-SUBJEK YANG INGIN DIDAFTAR </b> <form action = " " name = "MyForm"> <input type = "checkbox" name = "sub" id = "Matematik"> Matematik <input type = "checkbox" name = "sub" id = "English"> English <input type = "checkbox" name = "sub" id = "Sains"> Sains <input type = "checkbox" name = "sub" id = "Bahasa Malaysia"> Bahasa Malaysia <p> <button type = "button" onclick = "semakSubjek()">Pengesahan Subjek</button> </p> <p> <textarea id = "SenaraiSubjek" rows = "10" cols = "30" value = "b"></textarea> </p> <p> <button type = "button" onclick = "resetSubjek()">Reset Subjek</button> </p> </form> <script> function semakSubjek() { var elLength = document.MyForm.elements.length; for (i=0;i<elLength; i++) var type = MyForm.elements[i].type; if (type=="checkbox" && MyForm.elements[i].checked) { document.getElementById("SenaraiSubjek").value += MyForm.elements[i].id+ '\n'; } } } function resetSubjek() { var elLength = document.MyForm.elements.length; document.getElementById("SenaraiSubjek").value =""; for (i=0;i<elLength; i++) { MyForm.elements [i].checked-false; } } </script> </body> </html>
3.3 3.3.5 MENGGUNAKAN BAHASA PENSKRIPAN KLIEN UNTUK MEMBINA LAMAN WEB PENGGUNA FITUR BUTANG PILIHAN BUTANG CHECKBOX OUTPUT
3.3 3.3.5 MENGGUNAKAN BAHASA PENSKRIPAN KLIEN UNTUK MEMBINA LAMAN WEB PENGGUNA FITUR KOTAK POPUP KOTAK ALERT ATURCARA OUTPUT <html> <body> Nama: <input type = "text" > <script> alertMasuk(); function alertMasuk() { window.alert ("Anda perlu memasukkan nama anda."); } </script> </body> </html> KOTAK CONFIRM ATURCARA OUTPUT <html> <body> Nama: <input type = "text" > <button onclick = "pastiHantar()">Hantar</button> <script> function pastiHantar() { if (window.confirm("Anda pasti?")==true) { document.write("Maklumat telah dihantar."); } } </script> </body> </html>
3.3 3.3.6 MENGGUNAKAN BAHASA PENSKRIPAN KLIEN UNTUK MEMBINA LAMAN WEB PENGGUNA FITUR KOTAK POPUP KOTAK PROMPT ATURCARA OUTPUT <html> <body> <p>Sila klik butang berikut untuk masukkan nama anda,</p> <button onclick = "masukNama()">Klik Masuk Nama</button> <p id = "maklumat"> </p> <script> function masukNama() { var pengguna = window.prompt ("Sila Masukkan Nama Anda : ", ""); if (pengguna != null) { document.getElementById ("maklumat").innerHTML = "Hai " + pengguna + " ! Apa Khabar hari ini? "; } } </script> </body> </html> OUTPUT
3.3 3.3.6 MENGGUNAKAN BAHASA PENSKRIPAN PELAYAN UNTUK MEMBINA LAMAN WEB YANG BOLEH MENCAPAI DAN MENGEMAS KINI DATA DALAM PANGKALAN DATA LAMAN WEB INTERAKTIF • Laman web interaktif bermaksud suatu laman web yang mempunyai kandungan yang dinamik dan sesuai atas sesuatu carian atau permintaan daripada pengguna. • Kandungan laman web tersebut boleh diubah daripada laman web tertentu atau hasil daripada pemprosesan komputer pelayan yang dipaparkan berbeza mengikut permintaan dari pengguna. • Data yang disimpan dalam pangkalan data dengan menggunakan MySQL boleh dicapai dan dikemas kini melalui laman web. • Untuk tujuan itu, sambungan kepada pangkalan data perlu dilakukan terlebih dahulu sebelum data dapat dicapai dan dikemaskini. Menggunakan Bahasa pengaturcaraan web seperti PHP, ASP dan lain-lain. Mempunyai capaian kepada pangkalan data. Kandungan laman web berubah mengikut permintaan pengguna. Kandungan laman web sering dikemaskini. CIRI-CIRI LAMAN WEB INTERAKTIF ELEMENELEMEN DALAM LAMAN WEB Objek borang (form) dalam laman web Sambungan kepada komputer pelayan (web server) Carian maklumat berdasarkan permintaan kepada pengguna Paparan maklumat yang diperoleh atas permintaan daripada pengguna Kemudahan mengemas kini data yang diperoleh dan simpan semula ke dalam pangkalan data
3.3 3.3.6 MENGGUNAKAN BAHASA PENSKRIPAN PELAYAN UNTUK MEMBINA LAMAN WEB YANG BOLEH MENCAPAI DAN MENGEMAS KINI DATA DALAM PANGKALAN DATA MEMBINA LAMAN WEB CONTOH 3.3 3.3.7 MENGHASILKAN SEBUAH LAMAN WEB INTERAKTIF UNTUK KEGUNAAN PENGGUNA DAN PENTADBIR SISTEM BAGI MENYELESAIKAN MASALAH PENGGUNA DAN PENTADBIR SISTEM • Sesetengah laman web mempunyai antara muka yang berbeza, untuk pengguna biasa dan pentadbir sistem. • LAMAN WEB UNTUK PENTADBIR : membolehkan pentadbir sistem mendaftarkan nama pengguna yang boleh mencapaidata dalam pangkalan data. • LAMAN WEB PENGGUNA : membenarkan pengguna tersebut melihat maklumat yang telah ditetapkan sahaja. • Cara untuk membezakan jenis pengguna laman web sama ada pengguna biasa atau pentadbir sistem dapat dilakukan dengan menyediakan laman web log masuk. MEMBINA LAMAN WEB CONTOH