LAB 03 - CASCADING STYLE SHEET

Assalamualaikum dan hai! :)

CASCADING STYLE SHEET(CSS)

Okay, for the lab tutorial session 03, we are required to continue our previous lab session tutorial 02 with include the cascading style sheet (CSS) element.

DID YOU KNOW WHAT IS CASCADING STYLE SHEET @ CSS?

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written inHTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

It can be more detailed meaning as below:

•Cascading: Multiple styles can overlap in order to specify a range of style from a whole web site down to a unique element. Which style gets applied pertains to the rules of CSS cascading logic.
•Style: CSS deals specifically with the presentation domain of designing a web page (color, font, layout, etc).
•Sheet: Normally, CSS is a file separate from the HTML file – linked to the HTML file through its <head> (exceptions apply).
HOW TO INSERT CSS INTO HTML?

There are 3 ways to insert CSS into HTML:

           1.External Style Sheet
 ·        An external style sheet can be written in any text editor.
 ·         The file should not contain any html tags.
 ·         The style sheet should be saved with a .css extension. 

2.Internal Style Sheet
·         An internal style sheet should be used when a single document has a unique style.
·         Define internal styles in the head section of an HTML page, by using the <style> tag.


        3.Inline Style Sheet

                ·         An inline style loses many of the advantages of style sheets by mixing content with presentation.
                ·         Use this method sparingly!
                ·         To use inline styles you use the style attribute in the relevant tag.
                ·         The style attribute can contain any CSS property. 



Based on my previous lab tutorial session, i just add and update some background color with using the CSS in my page source. 

It can be shown below: 


<html>
<head>
<title> Welcome to Malindo Air.com </title>
<link href="s239854.css" type="text/css" rel ="stylesheet">
</head>
<body>
<div>
<table border ="1" width ="100%" bgcolor="#ff0000">
<td bgcolor="#bc1301">
<p><pre><h2 align = center>Welcome to Malindo Air Online Ticketing</p></pre></h2>
<body background = "viva.jpg">
<p align="left">
<img src = "kapal2.jpg" width="200" height="200">
</p>
<p><b><h4 align = left>Member Login </p></b></h4>
<table border ="1" width ="100%" bgcolor="#ff0000">
<td bgcolor="#bc1301">
<form action = "insert.asp" method = "post">
<p><h4 align>User ID</h4> <INPUT type = "text" name = "myname" size=10 maxlength=40>
</form></p>
<form action = "insert.asp" method = "post">
<p><h4 align>Password</h4><INPUT type = "password" name="pwd" size=10 maxlength=15>
</form></p>
<INPUT type = "submit" value = "Submit">
<hr>
<table border ="1" width ="100%" bgcolor="#ff0000">
<td bgcolor="#bc1301">
<p><b><pre><h2 align = left>1 Flight Destination</b></pre></h2>
<form action = "insert.asp" method = "post">
<p><br\>
<INPUT type ="checkbox" name="used" value="Return"> Return<br\>
<INPUT type ="checkbox" name="used" value="One way"> One way<br\>
</p>
<b><pre><h2 align = left>2 Date of Flight</p></b></pre></h2>
<b><h3>FROM</p></b></h3>
<form action = "insert.asp" method = "post">
<INPUT type = "location" name ="places">
</form>
<INPUT type = "submit" value = "Search">
<p><b><h3>TO</p></b></h3>
<form action = "insert.asp" method = "post">
<INPUT type = "location" name ="places">
</form>
<INPUT type = "submit" value = "Search">
<b><h3 align = left>Departure Date</p></b></h3>
<p><SELECT name="access">
<OPTION>Date
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
<OPTION>11
<OPTION>12
<OPTION>13
<OPTION>14
<OPTION>15
<OPTION>16
<OPTION>17
<OPTION>18
<OPTION>19
<OPTION>20
<OPTION>21
<OPTION>22
<OPTION>23
<OPTION>24
<OPTION>25
<OPTION>26
<OPTION>27
<OPTION>28
<OPTION>29
<OPTION>30
<OPTION>31
</SELECT>
<SELECT name="access">
<OPTION>Month
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
<OPTION>11
<OPTION>12
</SELECT>
<SELECT name="access">
<OPTION>Year
<OPTION>2017
<OPTION>2018
<OPTION>2019
<OPTION>2020
<OPTION>2021
<OPTION>2022
<OPTION>2023
<OPTION>2024
<OPTION>2025
<OPTION>2026
<OPTION>2027
<OPTION>2028
<OPTION>2029
<OPTION>2030
</SELECT>
<b><h3 align = left>Return Date</p></b></h3>
<p><SELECT name="access">
<OPTION>Date
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
<OPTION>11
<OPTION>12
<OPTION>13
<OPTION>14
<OPTION>15
<OPTION>16
<OPTION>17
<OPTION>18
<OPTION>19
<OPTION>20
<OPTION>21
<OPTION>22
<OPTION>23
<OPTION>24
<OPTION>25
<OPTION>26
<OPTION>27
<OPTION>28
<OPTION>29
<OPTION>30
<OPTION>31
</SELECT>
<SELECT name="access">
<OPTION>Month
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
<OPTION>11
<OPTION>12
</SELECT>
<SELECT name="access">
<OPTION>Year
<OPTION>2017
<OPTION>2018
<OPTION>2019
<OPTION>2020
<OPTION>2021
<OPTION>2022
<OPTION>2023
<OPTION>2024
<OPTION>2025
<OPTION>2026
<OPTION>2027
<OPTION>2028
<OPTION>2029
<OPTION>2030
</SELECT> </p>
<p><b><pre><h2 align = left>3 Search Flight</p></b></pre></h2>
<p><b><h3 align = left>No. of Passenger</p></b></h3>
<SELECT name="access">
<OPTION>Adults(+12)
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
</SELECT>
<SELECT name="access">
<OPTION>Childs(2-12)
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
</SELECT>
<SELECT name="access">
<OPTION>Infants(Below 2)
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
</SELECT>
<p><b><h3 align = left>Seat Class</p></b></h3>
<SELECT name="access">
<OPTION>Seat Class
<OPTION>Economy
<OPTION>Business
<OPTION>Premium Economy
</SELECT>
<p><b><INPUT type = "submit" value = "Search"></p></b>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</head>
</body>
<h3 align = center ><a href = "https://www.malindoair.com/"
target="_self"></h3>
visit malindo air</a>
</html>
</form>
</head>
</html>

 Okay that all for lab 03 tutorial session. See again on the next tutorial session!
Have a nice day! Bye!

Assalamualaikum WBT. :)




Comments

Post a Comment

Popular posts from this blog

LAB 06 - DATABASE, SQL COMMANDS & PHP

Image
Assalamualaikum and hai! For today lab session which is lab 6,  we have receive a task by our lecturer to develop our own database, sql commands and php. The Question::: Based on previous sample of small system. Develop your own database + sql commands + php in one folder. The Output::: 1. The Homepage This is the homepage of the system which shows all the functions which is include the list of the users, register user, delete user, edit user and search user information.  2. List of users This is the list of the registered users in the system. The users can view the details of another user by click the button " view ". 3. Register user This is the interface of registration form of user. The user need to insert their ID, name, phone number and date of birth before click the button " register ". The user also can " cancel" their registration if they wish to do it. If their registration are successful, it will ...
Read more

LAB 04 - JAVASCRIPT TUTORIAL

Image
Assalamualaikum and hai! For today lab session, we are given a task by our lecturer to do some exercises based on the JavaScript Tutorial. The Question::: Based on pdf file of JavaScript Tutorial. Starting page 10 "Hello World"  codes, write up the examples scripts given to you, test them and save. Every topic need to have one script such as Topic 5 till Topic 13. The Answer::: This is the outcomes lab 4 tutorial session: Thats all for this lab 04 tutorial session. See you soon in next lab 05 tutorial session! Enjoy your day! Assalamualaikum W.B.T. :) 
Read more