3.3PENEKANAN MAKLUMAT DALAM WEB• Merujuk kepada maklumat atau kandungan yang ingin diberikan perhatian dalamlaman web tersebut.3.3.1MENGKAJI DAN MERUMUS PRINSIP REKA BENTUK LAMAN WEB DARI SUDUT KESESUAIAN PENGGUNA DAN TUJUAN LAMAN WEBTEKNIK PENEKANANPenggunaan kesan khas seperti drop shadow , tekstur atau cahaya dan bentukPenggunaan ruang putih untuk menjadikanelemen-elemen kelihatan lebih terserlah.Penggunaan fungsi bold, italic, warna yang berbeza dan border.PERBEZAAN ELEMEN DALAM WEB• Konsep perbezaan digunakan untuk menghasilkan tarikan visual terhadap suatuelemen yang ingin ditekankan dalam web.• Semakin besar perbezaan suatu elemen yang ingin ditonjolkan berbanding elemenlain dipersekitarannya, maka elemen tersebut akan kelihatan lebih berbeza.• Penggunaan konsep perbezaan ini mampu menghasilkan sistem navigasi lebihmudah dan dapat memandu pelawat untuk mencapai maklumat yang dikehendaki. KAEDAH PERBEZAANPenggunaan label dan pautan yang berbeza.Penggunaan border, warna yang berbeza & kesan khas.Penggunaan ruang putih, teks terbalik, teks hurufcondong (italic) dan saiz teks yang berbeza.Penggunaan prinsip perbezaan warna
3.3TYPOGRAPHY• Merujuk kepada penyusunan teks yang akan dipaparkan dalam laman web.• Penyusunan teks yang baik memudahkan pemahaman dalam proses pembacaan danjuga meningkatkan elemen mesra pengguna dalam laman web.• Terdapat beberapa corak penyusunan teks bagi laman web. Corak-corak ini bolehdigunakan mengikut gaya pembacaan pembaca.• Contoh corak penyusunan teks : Corak paparan berasaskan kertas, corak paparansecara Z-Shaped , Corak paparan secara Z-Shaped.• Pemilihan jenis font juga penting.• Pemiilahan font yang kurang biasa digunakan boleh menyebabkan sesetengah sistempengoperasian tidak menyokong jenis font tersbut dan mempunyai masalah untukmemaparkan kandungan web.3.3.1MENGKAJI DAN MERUMUS PRINSIP REKA BENTUK LAMAN WEB DARI SUDUT KESESUAIAN PENGGUNA DAN TUJUAN LAMAN WEBPANDUAN TYPOGRAPHYSeragamkan jenis teks atau fon yang digunakan bagi setiap halaman yang dibina.Gunakan saiz teks yang berbeza bagimembezakan tajuk dengan kandungan atauhuraian.WARNA & GRAFIK• Penggunaan warna dan grafik mampu menonjolkan imej dan identiti sesebuahlaman web.• Penggunaan warna yang bijak mampu menarik perhatian serta meningkatkankebolehbacaan mereka.
3.3NAVIGASI• Merujuk kepada struktur laman web yang akan memudahkan seseorang penggunamelayarinya.• Navigasi web yang bagus seharusnya memberikan petunjuk kepada pelawat lamanweb tentang kedudukan atau lokasi semasa pengguna.3.3.1MENGKAJI DAN MERUMUS PRINSIP REKA BENTUK LAMAN WEB DARI SUDUT KESESUAIAN PENGGUNA DAN TUJUAN LAMAN WEBTEKNIK NAVIGASI WEBBar NavigasiMenu Drop- downBreadcrumbs Pautan grafik Site MapKESEIMBANGAN VISUAL• Merujuk kepada gabungan elemen visual seperti garisan, imej, teks, bentuk danwarna dalam laman web.• Pereka laman web perlu peka tentang pengguna sasaran laman web tersebut.REKA BENTUK BERASASKAN PENGGUNA• Pereka laman web harus mengenali pengguna sasaran dan perkara yang diingini olehpengguna apabila mereka melayari laman web.
3.3 3.3.2 MEREKA BENTUK KERANGKA APLIKASI YANG AKAN DIBANGUNKANPENSTRUKTURAN KANDUNGAN• Kunci kejayaan penghasilan suatu laman web bergantung kepada cara laman web ituberfungsi.• Perhatian yang lebih perlu diberikan untuk menentukan cara maklumat dalam lamanweb dapat dicapai dan pendekatan yang sesuai bagi pengguna untuk mendapatkanmaklumat. PROSES MEREKA BENTUK KERANGKA APLIKASIPenstrukturanHalamanReka bentukantara mukaReka bentuknavigasiPenstrukturankandungan ataumaklumatProses mereka bentuk kerangka aplikasi
3.3 3.3.2 MEREKA BENTUK KERANGKA APLIKASI YANG AKAN DIBANGUNKANPENSTRUKTURAN KANDUNGAN ATAU MAKLUMAT• Setiap reka bentuk yang bakal dihasilkan perlu berasaskan pengguna ataupengalaman pengguna semasa melayari laman web.• Penglibatan pengguna semasa proses pengumpulan maklumat sangat penting.• Contoh aktiviti : mengadakan sesi temu bual, mengedarkan borang soal selidik ataumembuat tinjauan cara laman web digunakan. • Senaraikan semua maklumat yang bakal dimasukkan ke dalamlaman web.• Senaraikan semua perkara yang boleh dilakukan oleh pengguna.MEMBENTUK INVENTORI MAKLUMAT• Mengelaskan senarai maklumat kepada beberapa kategori.• Pereka bentuk maklumat boleh melihat persamaan maklumat yang ada bagi mewujudkan kemungkinan-kemungkinan kategori yang perlu ada.• Maklumat atau informasi ialah suatu yang subjektif dan corakpengelasan maklumat boleh berbeza-beza bergantung padaperspektif pereka web.• Pereka perlu menetapkan bilangan kategori maklumat yang perluada bersesuaian dengan senarai maklumat yang tersedia danbagaimana setiap kategori tersebut akan divisualkan dalam lamanweb yang bakal dibina.•Gunakan gambarajah atau carta alir bagi menunjukkan hubungkaitbagi setiap kategori maklumat yang ada.• Ini mampu memberikan idea atau gambaran kasar tentang corakpautan laman web yang bakal dibina.PENGELASAN MAKLUMATLangkah-langkah Reka bentuk Maklumat
3.3 3.3.2MEREKA BENTUK KERANGKA APLIKASI YANG AKAN DIBANGUNKANPENSTRUKTURAN HALAMAN• Menekankan cara setiap halaman dalam laman web dihubungkan.• Kebiasannya pereka bentuk akan menggunakan gambar rajah tapak (site diagram) sebagaialat untuk menyampaikan struktur laman web kepada klien dan sebagai panduan sepanjangproses pembangunan laman web.• Gambar rajah tapak : diagram yang menggunakan simbol kotak bagi mewakili setiap lamanweb dengan garis atau anak panah bagi mewakili hubungan antara laman web.GAYA PENSTRUKTURAN HALAMANHierarkiJujukanKompleksGAYA KETERANGANPENSTRUKTURAN SECARA HIERARKIPENSTRUKTURAN SECARA JUJUKAN• Penggunadipandu darihalaman kehalaman.• Sesuai untuklaman web penceritaan / kronologiPENSTRUKTURAN KOMPLEKS• Terdapat laman web komersial yang menawarkan maklumatyang padat dan fungsi agak kompleks.LAMAN UTAMASeksyen 1 Seksyen 2Subseksyen SubseksyenSubseksyen-subseksyenSubseksyenSeksyen 3 Seksyen 4FOTO 1LAMAN UTAMAFOTO 2 FOTO 3 FOTO 4
3.3 3.3.2MEREKA BENTUK KERANGKA APLIKASI YANG AKAN DIBANGUNKANREKA BENTUK ANTARA MUKA• Setelah halaman dalam laman web distrukturkan, fasa seterusnya adalah untukmenentukan bagaimana pengguna laman web dapat mencapai maklumat tersebut.• Reka bentuk antara muka : menenentukan bagaimana struktur laman web secara logikalnyadigambarkan termasuk teknik navigasi yang memandu kepada pergerakan pengguna dalamlaman web.• Pereka bentuk antara muka biasanya akan menggunakan diagram atau carta alir bagimenggambarkan reka bentuknya.• Salah satu rajah yang digunakan dalam proses reka bentuk antara muka ialah wireframeatau rangka wayar.• Rangka wayar atau juga dikenali skema halaman atau pelan halaman ialah panduan visual yang mewakili rangka kerja keseluruhan laman web.• Tujuan rangka wayar adalah untuk menyusun elemen-elemen yang akan dimasukkan dalamlaman web bagi menepati konsep laman web tersebut.
3.3 3.3.2MEREKA BENTUK KERANGKA APLIKASI YANG AKAN DIBANGUNKANREKA BENTUK NAVIGASI• Navigasi web merujuk kepada proses objek-objek dalam laman web yang terdiri daripadateks, rajah, audio, video dihubungkan antara satu sama lain dengan menggunakan pautanhiperteks atau hypermedia.• Konsep navigasi web memberikan pengalaman kepada pelawat laman web untukmengemudi laman web tersebut mengikut kecekapan masing-masing.• Navigasi web yang bagus seharusnya memberikan petunjuk kepada pelawat laman web tentang kedudukan atau lokasi semasa pengguna.• Fungsi utama konsep navigasi dalam laman web adalah untuk membantu pengguna ataupelawat mengetahui kedudukan semasa mereka dan memandu pelawat tentang pilihanyang disediakan untuk mereka menerokai laman web tersebut.TOOLBAR BAR NAVIGASIBREADCRUMBSPETA TAPAK(SITEMAP)MENU DROP-DOWN
3.3 3.3.3 MEMBINA LAMAN WEB MUDAH DENGAN MENGGUNAKAN HTMLHypertext Markup Language (HTML)• Setiap laman web ialah fail teks yang ditulis menggunakan Hypertext Markup Language (HTML).• Markup Language : Bahasa yang menghuraikan kandungan dan struktur dokumen.Struktur HTMLELEMEN DAN ATRIBUT DALAM HTML• Bagi menulis dokumen HTML, HTML editor diperlukan.• Salah satu HTLM editor ialah text editor. Contohnya Notepad.• Dokumen HTML adalah mengenai konsep bagaimana dokumen dipaparkan.• Untuk menerangkan struktur bagi setiap laman web, kod HTML atau elemen HTML digunakan.• Elemen biasanya terdiri daripada dua tag yang berpasangan, Start tag dan close tag.ATURCARA OUTPUT<html><head><title> Tajuk Laman Web</title></head><body>Selamat Datang</body></html>
3.3 3.3.3 MEMBINA LAMAN WEB MUDAH DENGAN MENGGUNAKAN HTMLELEMEN HEADING DALAM HTML• Elemen heading ialah elemen yang digunakan bagi menakrifkan “ tajuk” dalam laman web.• Terdapat 6 peringkat heading yang ditakrifkan dalam HTML. ATURCARA OUTPUT<html><head><title> Tajuk Laman Web</title></head><body><h1> Contoh heading 1 </h1><h2> Contoh heading 2 </h2><h3> Contoh heading 3 </h3><h4> Contoh heading 4 </h4><h5> Contoh heading 5 </h5><h6> Contoh heading 6 </h6></body></html>ELEMEN HEADER DALAM HTML• Digunakan untuk memaparkan pengenalan kandungan bagi suatu laman web atau pautannavigasi.ATURCARA OUTPUT<html><head></head><body><header><h1> Nilai-nilai Murni </h1><hr><h4> Definisi Nilai-nilai Murni </h4></header><p> Nilai-nilai murni sewajarnya diterapkan dalam dirisetiap murid sejak awal. </p></body></html>
3.3 3.3.3 MEMBINA LAMAN WEB MUDAH DENGAN MENGGUNAKAN HTMLELEMEN PARAGRAPH DALAM HTML• Digunakan bagi menyusun teks dalam bentuk peranggan.ATURCARA OUTPUT<html><head></head><body><p> Ini ialah perenggan pertama </p><p> Ini ialah perenggan seterusnya </p></body></html>ELEMEN LINE BREAK DALAM HTML• Untuk memaparkan teks di baris baharu, elemen digunakan.ATURCARA OUTPUT<html><head></head><body><p> Perenggan ini digunakan bersama elemen line break </p></body></html>
3.3 3.3.3 MEMBINA LAMAN WEB MUDAH DENGAN MENGGUNAKAN HTMLELEMEN IMAGE DALAM HTML• Bagi memaparkan grafik dalam laman web, elemen <img> digunakan.• Elemen <img> ialah empty element, tidak memerlukan close tag.• Atribut src digunakan Bersama <img> tag untuk menentukan URL atau alamat imej tersebutdiambil.• Atribut width dan height juga boleh digunakan untuk menetapkan saiz paparan grafik.ATURCARA OUTPUT<html><body><img src = \" http://hddfhm.com/images/cliparthtml-5.jpg\"style = width:128px;height :128px\"></body></html>>ELEMEN FRAME DALAM HTML• Elemen iframe, Untuk memaparkan dokumen HTML lain dalam dokumen HTML semasa yang dipaparkan.• Atribut src, height dan width digunakan bagi menentukan saiz paparan pada iframe.ATURCARA<html><head><title>Contoh Atur cara </title></head><body><h2>Tentang Saya</h2><img src = \"https://classroomclipart.com/images/gallery/Computers/TN_teenage-girl-working-on-laptop-clipart623.jpg\"><p> Nama saya Suriana binti Shuib. Saya berumur 17 tahun. Saya bersekolah di Sekolah Menengah Seri Intan. Saya mempunyai keluarga yang bahagia </P><p> Saya gemar melayari Internetdi masa lapang. Namun, tidak semua yang berita yang dipaparkan itu betul. Untukmengetahui kesahihannya, kita boleh merujuk kepada laman web <a href = \"http://sebenarnya.my\"><h4> sebenarnya.my</h4></a></p><center><iframe height = \"40%\" src = \"http://sebenarnya.my\"></iframe></center></body></html>
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN CASCADING STYLE SHEET (CSS)• CSS : salah satu Bahasa pengaturcaraan tambahan (extension) bagi HTML.• CSS membenarkan perubahan kepada gaya sesuatu laman web dan menerangkanpersembahan bagi sesuatu dokumen HTML.ATURCARA OUTPUT<html><head><title>Tanpa Penggunaan CSS </title></head><body><h1>Laman Web Sekolah</h1></body></html><html><head><title>Penggunaan CSS </title><style>h1 { color:blue;}</style></head><body><h1>Laman Web Sekolah</h1></body></html>HELAIAN GAYA LUAR (External Style Sheet)• Tag gaya akan ditulis dandisimpan di dalam satu fail dan fail itu mestimempunyai extension“CSS”.• Fail tersebut akandipanggil daripada tag HTML denganmenggunakan sintaks.HELAIAN GAYA DALAMAN(Internal Style Sheet)• Tag gaya boleh ditulissama ada di dalamkawasan <head> atau<body>.• Letakkan <style>GAYA DALAM BARISAN(Inline Style)• Tag gaya akan ditulis padabahagian/elemen tag.
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN HELAIAN GAYA LUAR (EXTERNAL STYLE SHEET)ATURCARASediakan satu fail bernama “ style1.css” h1 { color: blue;} Sediakan satu fail bernama “ utama.html” <html><head><title>Penggunaan CSS </title><link rel = \"stylesheet\" type = text/css“ href= \"style1.css\"></head><body><h1>Laman Web Sekolah</h1></body></html>OUTPUT
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN HELAIAN GAYA DALAMAN (INTERNAL STYLE SHEET)• Boleh ditulis sama ada di dalam kawasan <head> atau <body>.ATURCARA OUTPUT<html><head><title>Penggunaan CSS </title><style>h1 { color:blue;}</style></head><body><h1>Laman Web Sekolah</h1></body></html><html><head><title>Penggunaan CSS </title></head><body><style>h1 { color:blue;}</style><h1>Laman Web Sekolah</h1></body></html>GAYA DALAM BARISAN (INLINE STYLE)• Tag gaya akan ditulis pada bahagian/elemen tag.ATURCARA OUTPUT<html><head><title>Penggunaan CSS </title></head><body><h1 style = \"color:blue\";> Laman Web Sekolah</h1></body></html>
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN GAYA PADA TEXTWARNA TEXT (COLOUR)ATURCARA OUTPUT<html><head><title>Penggunaan CSS </title><style>h1 { color:red;}</style></head><body><h1>Laman Web Sekolah</h1></body></html>JAJARAN TEKS (TEXT ALIGNMENT)<html><head><title>Penggunaan CSS </title><style>h1 { text-align: center;}</style></head><body><h1>Laman Web Sekolah</h1></body></html>BAYANG TEKS (TEXT SHADOW)<html><head><title>Penggunaan CSS </title><style>h1 { text-shadow: 2px 2px #000000;}</style></head><body><h1>Laman Web Sekolah</h1></body></html>
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 BACKGROUNDWARNA LATAR BELAKANGATURCARA 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 TABLESMELETAKKAN GARISAN LUAR ATAU BORDERATURCARA 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 TABLESMELETAKKAN GARISAN LUAR ATAU BORDERATURCARA OUTPUThtml><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 TABLESMELETAKKAN GARISAN LUAR ATAU BORDERATURCARA OUTPUThtml><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 TABLESMELETAKKAN GARISAN LUAR ATAU BORDERATURCARA OUTPUThtml><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 TABLESMELETAKKAN GARISAN LUAR ATAU BORDERATURCARA OUTPUThtml><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 TABLESMELETAKKAN GARISAN LUAR ATAU BORDER(Menetapkan kelebaran dan ketinggian sesuatu table)ATURCARA OUTPUThtml><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 TABLESMELETAKKAN GARISAN LUAR ATAU BORDER(Menetapkan jajaran teks di dalam table)ATURCARA OUTPUThtml><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 TABLESMELETAKKAN GARISAN LUAR ATAU BORDER(Menukar warna latar belakang dan warna teks dalam table)ATURCARA OUTPUThtml><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 TABLESMELETAKKAN GARISAN LUAR ATAU BORDER(Menebalkan jarak di antara medan (padding) dalam table)ATURCARA OUTPUThtml><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 BORDERSATURCARA 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 ataususunan.• Kedudukan elemen tidak akan berubah atau tidak akanmengikut ketetapan.• Kedudukan elemen HTML bergantung pada browser viewpoint. iaitu pandangan pengguna kepada pelayarweb.• Kedudukan elemen akan tetap dikedudukan yang samawalaupun pengguna scroll pada halaman web.• Kedudukan elemen diubah bergantung atau berkaitterhadap kedudukan normalnya atau kedudukanawalnya.• Kedudukan elemen tidak akan mengikut turutan ataususunan pada laman web lagi dan akan ditempatkanmengikut kedudukan yang dikehendaki.
3.3 3.3.4 MENGGUNAKAN CSS UNTUK MENGGAYAKAN GAYA PADA POSITIONTANPA GAYA POSITIONATURCARA 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 POSITIONATURCARA 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.5MENGGUNAKAN BAHASA PENSKRIPAN KLIEN UNTUK MEMBINA LAMAN WEB PENGGUNAFITUR PENGESAHAN DATAPENGESAHAN DATAATURCARA<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.5MENGGUNAKAN BAHASA PENSKRIPAN KLIEN UNTUK MEMBINA LAMAN WEB PENGGUNAFITUR PENGESAHAN DATAPENGESAHAN DATAATURCARA<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.5MENGGUNAKAN BAHASA PENSKRIPAN KLIEN UNTUK MEMBINA LAMAN WEB PENGGUNAFITUR BUTANG PILIHANBUTANG RADIOATURCARA<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.5MENGGUNAKAN BAHASA PENSKRIPAN KLIEN UNTUK MEMBINA LAMAN WEB PENGGUNAFITUR BUTANG PILIHANBUTANG CHECKBOXATURCARA<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+ '\';}}}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.5MENGGUNAKAN BAHASA PENSKRIPAN KLIEN UNTUK MEMBINA LAMAN WEB PENGGUNAFITUR BUTANG PILIHANBUTANG CHECKBOXOUTPUT
3.3 3.3.5MENGGUNAKAN BAHASA PENSKRIPAN KLIEN UNTUK MEMBINA LAMAN WEB PENGGUNAFITUR KOTAK POPUPKOTAK ALERTATURCARA OUTPUT<html><body>Nama:<input type = \"text\" > <script>alertMasuk();function alertMasuk(){window.alert (\"Anda perlumemasukkan nama anda.\");}</script></body></html>KOTAK CONFIRMATURCARA 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.6MENGGUNAKAN BAHASA PENSKRIPAN KLIEN UNTUK MEMBINA LAMAN WEB PENGGUNAFITUR KOTAK POPUPKOTAK PROMPTATURCARA 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 hariini? \";}}</script></body></html>OUTPUT
3.3 3.3.6MENGGUNAKAN BAHASA PENSKRIPAN PELAYAN UNTUK MEMBINA LAMAN WEB YANG BOLEH MENCAPAI DAN MENGEMAS KINI DATA DALAM PANGKALAN DATALAMAN WEB INTERAKTIF• Laman web interaktif bermaksud suatu laman web yang mempunyai kandungan yang dinamik dan sesuai atas sesuatucarian atau permintaan daripada pengguna.• Kandungan laman web tersebut boleh diubah daripada lamanweb tertentu atau hasil daripada pemprosesan komputerpelayan yang dipaparkan berbeza mengikut permintaan daripengguna.• Data yang disimpan dalam pangkalan data denganmenggunakan MySQL boleh dicapai dan dikemas kini melaluilaman web.• Untuk tujuan itu, sambungan kepada pangkalan data perludilakukan terlebih dahulu sebelum data dapat dicapai dandikemaskini.Menggunakan Bahasa pengaturcaraan web seperti PHP, ASP danlain-lain.Mempunyai capaiankepada pangkalandata.Kandungan laman web berubah mengikutpermintaan pengguna.Kandungan laman web sering dikemaskini.CIRI-CIRI LAMAN WEB INTERAKTIFELEMENELEMEN DALAM LAMAN WEBObjek borang(form) dalamlaman web Sambungankepadakomputerpelayan (web server)Carian maklumatberdasarkanpermintaankepadapenggunaPaparan maklumatyang diperolehatas permintaandaripadapenggunaKemudahanmengemas kinidata yang diperoleh dansimpan semula kedalam pangkalandata
3.3 3.3.6MENGGUNAKAN BAHASA PENSKRIPAN PELAYAN UNTUK MEMBINA LAMAN WEB YANG BOLEH MENCAPAI DAN MENGEMAS KINI DATA DALAM PANGKALAN DATAMEMBINA LAMAN WEBCONTOH3.3 3.3.7MENGHASILKAN SEBUAH LAMAN WEB INTERAKTIF UNTUK KEGUNAAN PENGGUNA DAN PENTADBIR SISTEM BAGI MENYELESAIKAN MASALAHPENGGUNA DAN PENTADBIR SISTEM• Sesetengah laman web mempunyai antara muka yang berbeza, untuk pengguna biasa dan pentadbir sistem.• LAMAN WEB UNTUK PENTADBIR : membolehkan pentadbirsistem mendaftarkan nama pengguna yang boleh mencapaidatadalam pangkalan data.• LAMAN WEB PENGGUNA : membenarkan pengguna tersebutmelihat maklumat yang telah ditetapkan sahaja.• Cara untuk membezakan jenis pengguna laman web sama adapengguna biasa atau pentadbir sistem dapat dilakukan denganmenyediakan laman web log masuk.MEMBINA LAMAN WEBCONTOH
190
191
192