PROGRAM LATIHAN GURU ASAS SAINS KOMPUTER TINGKATAN 1 BAHAGIAN PENDIDIKAN GURU KEMENTERIAN PENDIDIKAN MALAYSIA Tajuk
4.0 KOD ARAHAN 4.2 KOD ARAHAN HTML
Topik A. Objektif
Pada akhir sesi ini, guru dapat: 1. Melakar papan cerita untuk membina laman sesawang yang menggunakan kod arahan HTML. 2. Menggunakan tags dalam atur cara HTML. 3. Menggunakan paragraph heading dalam atur cara HTML yang dibina. 4. Menggunakan atur cara HTML untuk menghasilkanBanner, Frame dan Menu, 5. Membina pautan teks dan imej dalam atur cara HTML. 6. Menulis atur cara untuk memasukkan imej dalam atur cara HTML. 7. Menghasilkan pull down menu memalui atur cara HTML. 8. Menghasilkan ruang komen melalui atur cara HTML. 9. Mengesan sebarang ralat yang berlaku dalam atur cara HTML yang dibina. 10. Membina lama sesawang interaktif yang memaparkanBanner, Menu, Ruangan Komen,
Frame dan Pull down menu. B. Kandungan Pengajaran
4.2.1
Papan Cerita Laman Sesawang Menggunakan Kod Arahan
4.2.2
Penggunaan Tags Dalam Atur Cara HTML
4.2.3
Penggunaan Paragraph Heading Dalam Atur Cara HTML
4.2.4
Penghasilan Banner, Frame Dan Menu Dalam Atur Cara HTML
4.2.5
Pembinaan Pautan Teks Dan Imej dalam Atur Cara HTML
4.2.6
Penulisan Atur Cara Untuk Memasukkan Imej Dalam Atur Cara HTML
4.2.7
Penghasilan Pull Down Menu Melalui Atur Cara HTML
4.2.8
Penghasilan Ruangan Komen Dalam Atur Cara HTML
4.2.9
Pengesanan Ralat Dalam Atur Cara HTML
4.2.10
Pembinaan Laman Sesawang Menggunakan Atur Cara HTML
ASAS SAINS KOMPUTER TINGKATAN 1 2016 KOD ARAHAN
4.1 PENGENALAN KOD ARAHAN HTML
HTML pertama kali diciptakan oleh IBM pada tahun 1980. Saat itu tercetus idea untuk menempatkan elemen elemen yang berguna untuk menandai bahagian suatu dokumen seperti judul, alamat dan isi dokumen. Pada akhirnya elemen-element tersebut dibentuk menjadi suatu program untuk melakukan pemformatan dokumen secara automatik. Bahasa pemprograman untuk melakukan tugas ini disebut sebagai bahasa markup. IBM menamai program ini sebagai Generalized Markup Language.
Pada tahun 1986, konsep ini disetujui oleh ISO ( International Standard Organization) sebagai standar untuk pembuatan dokumen. Bahasa ini dinamai oleh ISO sebagai Standard
Generalized Markup Language (SGML) HTML sendiri, adalah bahagian dari SGML. Tim Berners-Lee dari CERN mengemukakan sebuah idea tentang pembuatan skrip bahasa pemprograman dan dokumen yang dapat diakes oleh semua komputer tanpa melihat jenis platformnya. Sejak saat itu HTML menjadi lebih popular di bandingkan SGML.
HTML adalah singkatan dari Hyper Text Markup Language. Apabila kita menjelajah internet, membuka laman web kita akan bertemu dengan HTML. Ini adalah kerana semua laman sesawang ( web) dibina menggunakan bahasa pengaturcaraan HTML.
H yperT ext adalah metod di mana kita “berpindah”di sekeliling web, dengan mengklik
sebuah teks yang bernamahyperlink. Hyperlink adalah sebuah teks khusus di internet, di mana saat teks tersebut diklik, akan membawa kita ke halaman sesawang selanjutnya/halaman web lain yang telah ditentukan. Markup adalah hal yang dilakukan oleh tag HTML kepada teks yang ada di dalamnya.
HTML menandai teks yang berada di dalamnya sebagai tip teks tertentu. Misalnya jika kita menandai sebuah teks dengan tag html maka teks tersebut akan berubah menjadi italic (huruf miring). Sedangkan jika kita menandainya dengan maka teks tersebut akan berubah menjadi bold (huruf tebal).
Language
bererti bahasa. HTML adalah sebuah bahasa pengaturcaraan. HTML
mempunyai kod dan syntax sepertimana bahasa pengaturcaraan lain.
2
MODUL KOD ARAHAN HTML
ASAS SAINS KOMPUTER TINGKATAN 1 2016 4.2.1
Papan Cerita Laman Sesawang Menggunakan Kod Arahan Contoh: Anda dikehendaki melakar papan cerita yang logik untuk laman sesawang yang hendak dibina.
i. Merancang berapa laman sesawang yang dicadangkan ii. Merancang pada setiap laman sesawang apakah kandungan yang ingin dipaparkan iii.
4.2.2
Merancang apakah audio, video dan imej yang ingin disisipkan
Penggunaan Tags Dalam Atur Cara HTML Contoh: Anda dikehendaki memahami tags HTML berikut;
<body> dan <paragraph><br />
<br />
Rajah 1: Menggunakan head dan title<br />
<br />
4<br />
<br />
MODUL KOD ARAHAN HTML<br />
<br />
ASAS SAINS KOMPUTER TINGKATAN 1 2016 4.2.3<br />
<br />
Penggunaan Paragraph Head in g Dalam Atur Cara HTML<br />
<br />
Rajah 2: Menggunakan body dan paragraph<br />
<br />
5<br />
<br />
MODUL KOD ARAHAN HTML<br />
<br />
ASAS SAINS KOMPUTER TINGKATAN 1 2016 4.2.4<br />
<br />
Penghasilan Banne r, F rame Dan M enu Dalam Atur Cara HTML<br />
<br />
Rajah 3: Membina frame dan banner<br />
<br />
Rajah 4: Membina menu<br />
<br />
6<br />
<br />
MODUL KOD ARAHAN HTML<br />
<br />
ASAS SAINS KOMPUTER TINGKATAN 1 2016 4.2.5<br />
<br />
Pembinaan Pautan Teks Dan Imej dalam Atur Cara HTML<br />
<br />
Rajah 5: Membina pautan teks<br />
<br />
7<br />
<br />
MODUL KOD ARAHAN HTML<br />
<br />
ASAS SAINS KOMPUTER TINGKATAN 1 2016 Contoh 2: membina pautan imej<br />
<br />
<HTML> <Head> <a href=www.google.com rel="nofollow"> <img src=”gambar1.gif” width=”100” height=”80” </img src> <a/ rel="nofollow"> </head><br />
<br />
</HTML><br />
<br />
4.2.6<br />
<br />
Penulisan Atur Cara Untuk Memasukkan Imej Dalam Atur Cara HTML<br />
<br />
<a href="http://www.duniailkom.com" rel="nofollow"> <img src=”gambar1.gif” width="200" height="80" </img src> <a/ rel="nofollow"><br />
<br />
</head> </HTML> <table border=1><br />
<br />
<tr><td><H3><center>Laman Pengajaran Dan Pembelajaran Mata Pelajaran Asas Sains Komputer</center></H3></td></tr> <p><br />
<br />
</table border=1><br />
<br />
<H5><a href="http://supriadi.blogs.unhas.ac.id/sejarah-html/" rel="nofollow">Sejarah HTML</H5></a> <H5>Apakah HTML</H5> <H5>Pengertian HTML</H5> <H5>Fungsi HTML</H5><br />
<br />
<a href="http://www.duniailkom.com" rel="nofollow"> <img src=”gambar1.gif” width="200" height="80" </img src> <a/ rel="nofollow"><br />
<br />
</head> </body> </html><br />
<br />
8<br />
<br />
MODUL KOD ARAHAN HTML<br />
<br />
ASAS SAINS KOMPUTER TINGKATAN 1 2016<br />
<br />
Rajah 6: Aturcara memasukkan imej 4.2.7<br />
<br />
Penghasilan Pull D own Menu Melalui Atur Cara HTML<br />
<br />
Rajah 7: Aturcara pull down menu<br />
<br />
9<br />
<br />
MODUL KOD ARAHAN HTML<br />
<br />
ASAS SAINS KOMPUTER TINGKATAN 1 2016 4.2.8<br />
<br />
Penghasilan Ruangan Komen Dalam Atur Cara HTML<br />
<br />
<html> <head> <style> .error {color: #FF0000;} </style> </head> <body> <!-- tag form --> <form action="finish.html" method="get"><br />
<br />
Nama: <input type="text" name="nama" value="Nama Anda" /> <br /> <P><br />
<br />
Password: <input type="password" name="password" /> <br /> </P> Jantina : <input type="radio" name="jenis_kelamin" value="laki-laki" checked/> Laki - Laki <input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan <br /><br />
<br />
Hobi: <input type="checkbox" name="hobi_baca" /> Membaca Buku <input type="checkbox" name="hobi_nulis" checked /> Menulis <input type="checkbox" name="hobi_mancing" /> Memancing <br /> <p> Tempat Lahir: <select name="Selangor_Selangor" > <option value="Selangor"> Negeri Sembilan</option> <option>Melaka</option> <option value="Johor" checked>Johor</option> </select> 10<br />
<br />
MODUL KOD ARAHAN HTML<br />
<br />
ASAS SAINS KOMPUTER TINGKATAN 1 2016 <br /> <P> Komen Anda: <textarea name="komentar" rows="5" cols="20"> Sila komen diruangan ini</ textarea> <br /> </P> <input type="submit" value="Mulai Proses!" > </body> </html><br />
<br />
Rajah 8: Aturcara ruangan komen 4.2.9<br />
<br />
Pengesanan Ralat Dalam Atur Cara HTML<br />
<br />
Aktiviti: Dengan menggunakan kod HTML sila bina satu laman sesawang Pengajaran anda yang mengandungi;<br />
<br />
a) Banner, Frame dan Menu. b) Pautan teks dan imej c) Menggunakan pull down menu dan d) Menghasilkan satu ruangan komen<br />
<br />
Apabila siap, anda dikehendaki membuat ujian dan mengesan sebarang ralat yang berlaku dalam aturcara HTML tersebut. 11<br />
<br />
MODUL KOD ARAHAN HTML<br />
<br />
ASAS SAINS KOMPUTER TINGKATAN 1 2016 4.2.10 Pembinaan Laman Sesawang Menggunakan Atur Cara H TML Aktiviti: Hasilkan satu laman sesawang berkaitan panitia anda.<br />
<br />
12<br />
<br />
MODUL KOD ARAHAN HTML<br />
<br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://idoc.tips/report/modul-42-kod-arahan-html-pdf-free" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Modul 4.2 - Kod Arahan HTML"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcHT8sZAAAAAPKfs_PZGhwvz-OHbUMuekQzz5xK"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 IDOC.TIPS. All rights reserved.
<div class="pull-right">
<span><a href="https://idoc.tips/about">About Us</a></span> |
<span><a href="https://idoc.tips/privacy">Privacy Policy</a></span> |
<span><a href="https://idoc.tips/term">Terms of Service</a></span> |
<span><a href="https://idoc.tips/copyright">Copyright</a></span> |
<span><a href="https://idoc.tips/contact">Contact Us</a></span> |
<span><a href="https://idoc.tips/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://idoc.tips/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://idoc.tips/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177830117-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177830117-1');
</script>
<script src="https://idoc.tips/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://idoc.tips/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://idoc.tips/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="IDOCTIPS_cookie_box" style="z-index:99999; background: #97c479; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://idoc.tips/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_IDOCTIPS_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_IDOCTIPS_cookie_box() {
document.cookie = "IDOCTIPS_cookie_box_viewed=1;max-age=15768000;path=/";
hide_IDOCTIPS_cookie_box();
}
function hide_IDOCTIPS_cookie_box() {
var cb = document.getElementById('IDOCTIPS_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var IDOCTIPS_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('IDOCTIPS_cookie_box_viewed');
if (IDOCTIPS_cookie_box_viewed) {
hide_IDOCTIPS_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
