Wednesday, 11 October 2017

LAB 03- CASCADING STYLE SHEET

Assalamualaikum and hello everybody!!!!

Untuk toturial lab ke-3 ini, kami diarahkan untuk menyambung semula toturial lab ke-2 yang dibuat sebelum ini dengan memasukkan elemen cascading style sheet.



Berikut merupakan page source menggunakan cascading style sheet. Dalam toturial ke-3 ini saya hanya "add" and "update" background dan menukar warnanya sahaja dengan menggunakan CSS.


<html>
<body style="background-image:url('kapal terbang.jpg')">
<img src="logo.png" width="200" height="180">

<link rel="stylesheet" type="text/css" href="1stCSS.css">
<title>Text Box</title>

<b><em><h1 style="color:Tomato">Air Asia Flight Booking</b></em></h1>
<h3>*MEMBER LOGIN*</h3>
<form action="insert.asp"method="post">

User ID:<INPUT type="text" name="userID" size=30 maxlength=40 >
</form>


<title>Text Box</title>

<form action="insert.asp"method="post">

Password:<INPUT type="text" name="password" size=30 maxlength=40>
<hr>

<head>
<title>Radio Buttons</title>
</head>


<h3>LETS BOOKING NOW!!</h3>
<form action="insert.asp"method="post">

<P> <INPUT type="radio" name="os" value="re">Return<BR>
    <INPUT type="radio" name="os" value="way">One Way<BR>
</p>

<head>
<title>Select</title>
</head>

<form action="insert.asp" method="post">
<P>
<SELECT name="access">
       <OPTION>Departing
</SELECT>
</P>

<head>
<title>Select</title>
</head>

<form action="insert.asp" method="post">
<P>
<SELECT name="access">
       <OPTION>Arriving
</SELECT>
</P>

<head>
<title>Select</title>
</head>

<form action="insert.asp" method="post">
<P> From
<SELECT name="access">
       <OPTION>Kuala Lumpur(KUL)
</SELECT>
</P>

<head>
<title>Select</title>
</head>

<form action="insert.asp" method="post">
<P> To
<SELECT name="access">
       <OPTION>Alor Setar(AOR)
</SELECT>
</P>

<head>
<title>Select</title>
</head>

<form action="insert.asp" method="post">
<P> Departure Date
<SELECT name="access">
       <OPTION>2017-05-05(Fri)
</SELECT>
</P>

<head>
<title>Select</title>
</head>

<form action="insert.asp" method="post">
<P> Return Date
<SELECT name="access">
       <OPTION>2017-05-12(Fri)
</SELECT>
</P>

<p style="color:DarkBlue">Save RM5 per return trip online</p>


<i><h3>Search</i></h3><img src="search.png" width="50" height="80">

</form>
</body>
</html>


Ini adalah CSS yang saya gunakan.

h3 {color:green;}
p {color:#00F;}

h1 {
    color: orange;
    font-family: eras demi itc;
    font-size: 300%;
}
p  {
    color: dark purple;
    font-family: century;
    font-size: 150%;
}

h3 {
    border: 1px solid powderblue;
}

Terima kasih kerana sudi meluangkan masa di blog saya ini. InsyaAllah panjang umur kita bersua lagi .....

No comments:

Post a Comment