1. ASAS HTML
<html>
<head>
<title> Belajar Asas Bahasa HTML </title>
</head>
<body bgcolor="black" text="yellow">
<h1> ASAS SAINS KOMPUTER </h1>
<h2> ASAS SAINS KOMPUTER </h2>
<h3> ASAS SAINS KOMPUTER </h3>
<h6> ASAS SAINS KOMPUTER </h6>
<p>
<h5> Asas sains komputer adalah satu mata pelajaran baru yang
diperkenalkan bermula tahun 2017 terdiri dari pada empat tajuk
utama.</h5>
</p>
</body>
</html>
=======================================
Keterangan :
Setiap tag mesti ada buka dan tutup.
<html> </html> skrip html
<body> </body> isi dokumen
<head> </head> tajuk kandungan
<h1> </h1> saiz tajuk
<title> </title> tajuk laman web
<body bgcolor=”black” text=”yellow” warna
latar belakang dan text
<p> </p> perenggan
<p align=”center”> alignment di dalam perenggan
2. MEMBINA TAJUK DAN FRAME
<html>
<head>
<title>MEMBINA TAJUK DAN FRAME</title>
</head>
<body>
<table border = "1">
<tr><td><h3><center> LAMAN PENGAJARAN DAN
PEMBELAJARAN </h3>
<br></br>
<h3><center>MATA PELAJARAN ASAS SAINS KOMPUTER </center></td></tr></h3>
</table border ="1">
</body>
</html>
==================================
Keretangan :
<table border=”1”> </table border=”1”>
ketebalan frame border
<tr><td> </td></tr> membina
frame
<br> </br> baris
3. MEMBINA MENU
<html>
<head>
<title>MEMBINA MENU</title>
</head>
<body>
<table border = "1">
<tr><td><h3><center> LAMAN PENGAJARAN DAN
PEMBELAJARAN MATA PELAJARAN ASAS SAINS KOMPUTER
</center></td></tr></h3>
</table border ="1">
<h5> Sejarah HTML </h5>
<h5> Apakah HTML </h5>
<h5> Pengertian HTML </h5>
<h5> Fungsi HTML </h5>
</body>
</html>
4. MEMBINA PAUTAN
<html>
<head>
<title>MEMBINA PAUTAN</title>
</head>
<body>
<table border = "1">
<tr><td><h3><center> LAMAN PENGAJARAN DAN
PEMBELAJARAN MATA PELAJARAN ASAS SAINS KOMPUTER
</center></td></tr></h3>
</table border ="1">
<h5><a href="http://dheaabigael.blogspot.my/">
Sejarah HTML </a></h5>
<h5> Apakah HTML </h5>
<h5> Pengertian HTML </h5>
<h5> Fungsi HTML </h5>
</body>
</html>
========================================
Keterangan :
<a href=”alamat laman”> word to link </a>
pautan word to link ke alamat laman
5. MEMASUKKAN IMEJ
<html>
<head>
<title>MEMASUKKAN IMEJ</title>
</head>
<body>
<table border = "1">
<tr><td><h3><center> LAMAN PENGAJARAN DAN
PEMBELAJARAN MATA PELAJARAN ASAS SAINS KOMPUTER
</center></td></tr></h3>
</table border ="1">
<h5><a href="http://dheaabigael.blogspot.my/">
Sejarah HTML </a></h5>
<h5> Apakah HTML </h5>
<h5> Pengertian HTML </h5>
<h5> Fungsi HTML </h5>
<a href="http://smkkualabesuttrg.blogspot.com"><img
src="gambar1.jpg" width="200"
heigh="80"</a></img src>
</body>
</html>
================================
Keterangan :
<img src="gambar1.jpg" width="200"
heigh="80"</a></img src> memasukkan imej
dari folder yang sama. Saiz imej, lebar 200 , tinggi 80.
<a href="http://smkkualabesuttrg.blogspot.com">
link dari imej ke alamat
laman web
Imej boleh diambil terus dari internet dengan cara copy image locatian
dan paste menggantikan gambar1.jpg
6. PULL DOWN
<html>
<head>
<title>PULL DOWN</title>
</head>
<body>
<body text="red"> MATA PELAJARAN PILIHAN ANDA
: </body>
<select>
<option value="Mata Pelajaran ASK">sila
pilih</option>
<option value="Mata Pelajaran ASK">Asas Sains
Komputer</option>
<option value="Mata Pelajaran SK">Sains
Komputer</option>
<option value="Mata Pelajaran PK">Pengkomputeran</option>
<option value="Mata Pelajaran LK">Literasi
Komputer</option>
</select>
</body>
</html>
========================================
Keterangan:
<body text="red"> MATA PELAJARAN PILIHAN ANDA
: </body> mewarnakan teks
<select> </select> membuat menu
pilihan
<option value=””> </option> memasukkan
pilihan
7. RUANG KOMEN
<html>
<head>
<title>RUANG KOMEN</title>
</head>
<body>
Nama: <input type="text" name="nama"
value="Nama Anda" />
<br></br>
<P>
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 >
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="pilih_negeri" >
<option value="negeri"> Kelantan</option>
<option>Terengganu</option>
<option>Pahang</option> <option>Johor</option>
<option>Melaka</option> <option>Negeri
Sembilan</option> <option>Selangor</option>
<option>Perak</option>
<option>Kedah</option><option>Pulau Pinang</option>
<option>Perlis</option>
<option>Sarawak</option> <option>Sabah</option>
<option>Wilayah Persekutuan</option>
</select>
</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>
8. BENAMKAN VIDEO DARI YOUTUBE
<html>
<head>
<title>BENAM VIDEO</title>
</head>
<br>
<h3>Lagu Paling Popular</h3>
<br>
<br>
<iframe width="640" height="360"
src="https://www.youtube.com/embed/OpZ21bGtJMI"
frameborder="0" allowfullscreen></iframe>
</br>
</html>
Guna chrome browser, search video dari youtube, klik kanan pada video ,
pilih copy embeded code dan paste dalam skrip html
9. SKRIP JAM
PERCUMA
10. EXTRA
FORM
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
RADIO BUTTON
<html>
<body>
<h2>Radio
Buttons</h2>
<form>
<input type="radio"
name="gender" value="male" checked> Male<br>
<input type="radio"
name="gender" value="female"> Female<br>
<input type="radio"
name="gender" value="other"> Other
</form>
</body>
</html>
HTML Input Types
- <input
type="button">
- <input
type="checkbox">
- <input
type="color">
- <input
type="date">
- <input
type="datetime-local">
- <input
type="email">
- <input type="file">
- <input
type="hidden">
- <input
type="image">
- <input
type="month">
- <input
type="number">
- <input
type="password">
- <input
type="radio">
- <input
type="range">
- <input
type="reset">
- <input
type="search">
- <input
type="submit">
- <input
type="tel">
- <input type="text">
- <input
type="time">
- <input
type="url">
- <input
type="week">
Contoh 1 :
<html>
<body>
<h2>Text
field</h2>
<p>The
<strong>input type="text"</strong> defines a one-line
text input field:</p>
<form
action="/action_page.php">
First
name:<br>
<input
type="text" name="firstname">
<br>
Last
name:<br>
<input
type="text" name="lastname">
<br><br>
<input
type="submit">
</form>
<p>Note
that the form itself is not visible.</p>
<p>Also
note that the default width of a text field is 20 characters.</p>
</body>
</html>
Tiada ulasan:
Catat Ulasan