Scribd
Upload
71 views

Lab Manual 5 Week 10

This document is a lab manual for a web programming class. It provides instructions for students to complete a series of activities involving CSS and HTML. For each activity, students are instructed to follow steps, check off completed steps, and write a conclusion. They are also told to save files in a specific format and complete assignments individually without copying. The activities cover topics like conflicting styles, external style sheets, element positioning, backgrounds, dimensions, box models, and drop-down menus.

Uploaded by

GeehthanJI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
71 views

Lab Manual 5 Week 10

This document is a lab manual for a web programming class. It provides instructions for students to complete a series of activities involving CSS and HTML. For each activity, students are instructed to follow steps, check off completed steps, and write a conclusion. They are also told to save files in a specific format and complete assignments individually without copying. The activities cover topics like conflicting styles, external style sheets, element positioning, backgrounds, dimensions, box models, and drop-down menus.

Uploaded by

GeehthanJI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 22

School of Informatics and Applied Mathematics,

Universiti Malaysia Terengganu (UMT)

Lab Manual 5 Week 10


Web Programming
Name:
Matric Num:
Semester:
Lab:
Demonstrator
Instructions:

This lab manual is for use by students of the School of Informatics and Applied
Mathematics, Universiti Malaysia Terengganu (UMT) only. Not allowed to print and
distribute this manual without official permission of the author.

Please follow the step by step as described in the manual. Tick (√) each step has
been created and write the conclusion of each activity has been completed.
Conclusion of each activity must be written in a file named according to the following
format:

[nomatrik] _ [LabX]. docx. Replace the 'X' with your lab session. Examples of correct
file name is 'UK12345_Lab1.docx'.

Please prepare assignments with individual effort without any 'copy-paste' from
other parties.

Best of luck!

2
A. Conflicting Styles

Objective: Recognize the opposite style (Conflicting Styles)

Description: Each html element has its own default style. The style can be changed
with style attribute (style attribute). The clash of many style features for an html
element will cause a conflicting style.
Steps Done? (√)
Step1: Create an HTML file called conflict.html
Step2: Type HTML code with CSS as below:

Step3: Save conflict.html and open the file using the


Chrome / Mozilla browser. Note the resulting output.

What is the resulting output? Does the output produce


both desired colors? Why?

Conclusion:

3
B. Linking to External Style Sheet

Objective: Perform CSS links and html files in an external editing style

Description: By performing an external editing style, the CSS and html files will be
isolated and allow the entire website to be changed with just one file. To use
external editing links, each page must include a reference to an external editing style
file within the <link> element.

Steps Done?
(√)
Step1: Create an HTML file called external.html
Step2: Type the HTML code as below:

Step3: Create a CSS file named mystyle.css


Step4: Type the CSS code as below:

Save the file and note the resulting output. How can such output
be produced? How is the CSS file called?
Conclusion:

C. Kedudukan Elemen (Positioning Elements)

4
Objective: Apply the position of elements in CSS and html files.

Description: The use of position in a CSS file is to set the state of the web layout in a page.
There are 4 types of positions that can be used, namely static, relative, fixed and absolute.
This position is usually used to build a menu for a website.

Static: is the default for element face position. This position will cause the element face to
be in its original place without changing the position of the element.

Relative: is a feature similar to static. Usually used to change the position of an element.
Must be accompanied by position features such as top: 10px ;.

Fixed: used to set an element position. Positions that use this feature will remain in the
same position even if the scroller's page is down or up.

Absolute: used to determine the position of an element. Usually used with relative features.
Steps Done? (√)
Step1: Create an HTML file called position.html.

Step2: Type the HTML code as below:

<html>
<body>
<link rel=”stylesheet” type=”text/css” href=”position.css”>

Step3: Type the CSS code as below and name it as


position.css:

5
Note the resulting output. Change the class .element
with position: absolute; What is the resulting output?
Why?
Step4: Type the HTML code as below and save it as
position2.html:

Step5: Copy CSS code like Step3 and change the class
.element position to fixed. Save the file as
position2.css. Note the resulting output. What is the
resulting output?

6
Conclusion:

D. Latar Belakang (Backgrounds)

Objektif: Mengaplikasikan elemen latar belakang di dalam fail CSS dan html.
Description: Apply the background.html with the background.css.
Steps Done?
(√)
Step1: Create an HTML5 file called background.html.

Step2: Type the HTML5 code as below:

7
Step3: Type the CSS code as below. Save as background.css.

Step3: Save the file and click on the icon to view the output.

Conclusion:

E. Dimensi Elemen (Element Dimensions)

Objektif: Mengaplikasi Dimensi Elemen

Penerangan: Dimensi elemen membolehkan ketinggian dan lebar elemen dikawal.


Elemen ini mempunyai lebar 100%.

Description: The dimensions of the elements allow the height and width of the
elements to be controlled. This element has a width of 100%.

Steps Done? (√)


Step1: Create an HTML file called dimensielemen.html
Step2: Type the HTML5 code as below:

8
Step3: Create a CSS file called dimensielemen.css.
Type the CSS code as below:

Conclusion

F. Kotak Model dan Aliran Teks (Box Model and Text Flow)

Objektif: Mengaplikasi kotak model dan aliran teks

Penerangan: Semua elemen HTML boleh dianggap sebagai kotak. Dalam CSS,
istilah "kotak model" digunakan dalam reka bentuk dan susun atur.

Kotak model CSS asasnya adalah kotak yang mengandungi setiap elemen HTML. Ia
terdiri daripada: margin, sempadan, padding, dan kandungan.

Description: All HTML elements can be considered as boxes. In CSS, the term
"model box" is used in design and layout.

9
A CSS model box is basically a box that contains every HTML element. It consists of:
margins, borders, padding, and content.

Steps Done?
(√)
Step1: Create an HTML file called the model.html box
Step2: Type the HTML5 code as below:

Step3: Create a CSS file called the model.css box.


Type the CSS code as below:

Conclusion:

G. Menu Ke Bawah (Drop-Down Menus)

Objektif: Penggunaan menu ke bawah


Penerangan:

10
 CSS dikenali sebagai Cascading Style Sheets (CSS).
 CSS menentukan bagaimana untuk memaparkan elemen-elemenHTML dengan
lebih baik dan tersusun dan seterusnya dalam menyelesaikan masalah.
 Dengan menggunakan CSS, rupa dan susun atur laman web boleh ditukar dengan
hanya mengedit satu fail sahaja.
 CSS mempunyai 2 bahagian yang utama iaitu “selector” dan “declaration”.
 “Selector” ialah merupakan elemen HTML yang hendak digayakan.
Setiap “declaration” mempunyai “property” dan “value”. “Property” merupakan gaya
atribut yang hendak ditukar dan ada “value” bagi setiap “property”.

Description:
• CSS is known as Cascading Style Sheets (CSS).
• CSS determines how to display HTML elements better and organized and so on in
troubleshooting.
• Using CSS, the look and layout of the website can be changed by just editing one
file.
• CSS has 2 main parts, namely "selector" and "declaration".
• "Selector" is an HTML element to be styled.
Each "declaration" has "property" and "value". "Property" is an attribute style to be
changed and there is a "value" for each "property".

Steps Done?
(√)
Step1: Create an HTML file called dropdown.html.
Step2: Type the HTML code as below:
<head>
<lin krel=”stylesheet” type=”text/css” href=”dropdown.css” />

11
Step3: Save the file and create a CSS file called
dropdown.css.
Step4: Type the CSS code as below:

12
Conclusion:

H. Bayangan Teks (Text Shadows)

Objektif : Membuat efek teks bayangan

Penerangan: Contoh nilai properti bayanagn texts:

text-shadow: 1px 2px 3px #000000

 1px [horizontal offset] =menunjukan nilai posisi


bayangan horizontal
 2px [vertical offset] = menunjukan nilai posisi bayangan
vertikal
 3px [blur amount] = menujukan nilai jarak blur
(optional)
 #000000 [color] = menunjukan nilai warna untuk
sebuah sebuah bayangan. Dalam memberikan nilai pada
warna box-shadow, bisa mengggunakan nilai warna
HEX, RGB, RGBA, HSL, HSLA ataupun Color Name.
Objective: Create a shadow text effect

13
Description: Examples of property values bayanagn texts:

text-shadow: 1px 2px 3px # 000000

• 1px [horizontal offset] = indicates position value

horizontal shadow

• 2px [vertical offset] = indicates the value of the vertical shadow position

• 3px [blur amount] = refer to blur distance value (optional)

• # 000000 [color] = indicates the color value for a shadow. In assigning values to
box-shadow colors, you can use color values HEX, RGB, RGBA, HSL, HSLA or Color
Name.

Steps Done? (√)


Step1: Create an HTML file named shadow.html.
Step2: Type the HTML code as below:

Step3: Create a CSS file named shadows.cs and type


the CSS code as below:

14
Langkah: Save the file and click on the icon to view the
output.
Conclusion:

I. Sudut Bulat (Rounded Corners)

Objektif: Menggunakan sudut bulat ke dalam Dokumen HTML5.

Penerangan: Border-radius boleh digunakan untuk mengubah sebarang elemen


dalam sudut bulat yang dikehendaki. Anda boleh mengubah sudut mengikut bentuk
yang dikehendaki dengan menggunakan kaedah berikut mengikut sudut bulat yang
berbeza. 3
1 2 4

Objective: Use rounded corners into HTML5 Documents.

Description: Border-radius can be used to change any element within the desired
round angle. You can change the angle according to the desired shape by using the
following method according to different round angles.

• first value for top-left corner

15
• the second value for the upper-right corner
• the third value for the bottom-right corner
• the fourth value for the bottom-left corner

Steps Done?
(√)
Step1: Create an HTML file called round_number.html
Step2: Type the HTML code as below:

Step3: Create a CSS file called round_call.css. Type the code as


below:

Step4: Download beach.gif videos from epembelajaran. Make sure


the video file is placed in the same location as the_circle.html.
Step5: Save the file and open the round_art.html file. Note the
resulting output. Modify the border-radius value to see
differences in the shape of a round angle.

16
Conclusion
:

J. Warna (Colour)

Objective: Use of colors in CSS.

Description:
Color in CSS can be used in various ways by using: Color hexadecimal
 Color RGB
 Color RGBA
 Color HSL
 Color HSLA
 Nama color

Steps Done? (√)


Step1: Create an HTML file called color.html.
Step2: Type the HTML code as below:

17
Step3: Create a CSS file named color.css. Type the
code as below:

Step4: Save the file and click on the icon to view the
output.

Note: Hexadecimal color can be supported by most browsers.


Conclusion:

K. Bayangan Kotak (Box Shadows)

Objective: Recognize the shadow of a box.


Penerangan: Bayangan (shadows) boleh diaplikasikan di kotak (bentuk)
dan juga teks di dalam HTML dan CSS.
Description: Shadows can be applied to boxes (shapes) as well as text in HTML
and CSS.

Steps Done? (√)


Step1: Create a file named boxShadows.html.
Step2: Type the HTML code as below:

18
Step3: Create a CSS file named boxShadows.css. Type
the code as below:

Step4: Save the file and click on the icon to view the
output.

Conclusion:

19
L. Imej latar belakang yang berbilang (Multiple Background
Images)

Objektif : Penggunaan imej latar belakang lebih dari satu.

Penerangan: Menggunakan imej lebih dari satu sebagai imej latar


belakang boleh diaplikasikan dalam CSS.
Description: Using more than one image as a background image can be applied in
CSS.

Steps Done? (√)


Step1: Ciptakan satu fail yang dinamakan sebagai
moreImage.html.
Step2: Taipkan kod HTML seperti dibawah:

Step3: Cipta satu fail CSS yang dinamakan


moreImage.css. Taipkan kod seperti di
bawah:

Step4: Simpan fail dan klik pada ikon untuk


melihat output.
Conclusion:

20
M. Sempadan imej (Images Borders)

Objektif : Mengenali sempadan imej.

Penerangan: Sempadan imej (Images Borders) digunakan untuk membuat


sempadan dengan menggunakan imej. Anda boleh menggunakan
sempadan imej ini untuk komponen yang spesifik dalam CSS, tetapi
kebanyakannya diletakkan di satu tempat seperti syntax di bawah.

Description: Border-image: Image Borders are used to create borders using


images. You can use these image borders for specific components
in CSS, but most are placed in one place like the syntax below.

Border-image: <border-image-source>ll<border-image-slice [/<border-image-


width> l /<border-image-width>? /<border-image-outset>]? ll
<border-image-repeat>

Steps Done? (√)


Step1: Ciptakan satu fail yang dinamakan sebagai
imagesBorders.html.
Step2: Taipkan kod HTML seperti dibawah:

Step3: Cipta satu fail CSS yang dinamakan imagesBorders.css.


Taipkan kod seperti di bawah:

Step4: Simpan fail dan klik pada ikon untuk melihat output.

21
Conclusion:

22

You might also like