Page 336 - SK tingkatan 5
P. 336
CONTOH 27
Contoh 27 menunjukkan satu dokumen HTML (laman web) yang mempunyai heading <h1>, <h2>, <h3>
dan <h4> dan boleh berada pada kedudukan yang ditetapkan seperti yang ditunjukkan dalam Rajah 3.3.69.
<html> Output:
<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>
Rajah 3.3.69 Contoh HTML, CSS dan Output tanpa gaya kedudukan
CONTOH 28
Contoh 28 menunjukkan penukaran kedudukan (position) komponen <h1>, <h2>, <h3>, <h4> dalam
laman web. Atur cara HTML, JavaScript dan output ditunjukkan dalam Rajah 3.3.70 dan Rajah 3.3.71.
<html>
<head>
<title> Gaya Position</title>
<style>
h1
{
background-color: lightgreen;
position: absolute;
width: 40%; 2
top: 10px;
left: 50px;
height: 100px;
}
h2
{
background-color: lightpink;
position: relative;
top: 70px; 3
width: 30%;
left: 300px;
height: 100px;
}
h3
{
background-color: lightblue;
position: fixed;
bottom: 70px;
width: 20%; 4
left: 200px;
height: 100px;
}
328 Sains Komputer Tingkatan 5
