Internal Style Sheet
Internal Style Sheet
Example 1
External CSS file
External Style Sheet
Example 2
Thursday, 20 October 2016
Monday, 10 October 2016
Learning how to apply principle of web design
<!DOCTYPE html>
<html>
<title>Principle of web deisgn</title>
<title>Principle of web deisgn</title>
<head>
<style type="text/css">
body{text-align:center;margin-left:70px;margin-right:70px;background-color:#B1CAFA;font-family:Georgia;font-size:25px;}
#a {width: 800px;margin-top:100px;padding:20px;}
</style>
</head>
<style type="text/css">
body{text-align:center;margin-left:70px;margin-right:70px;background-color:#B1CAFA;font-family:Georgia;font-size:25px;}
#a {width: 800px;margin-top:100px;padding:20px;}
</style>
</head>
<body>
<div>
<h2> Nagavigation Page </h2>
<div>
<h2> Nagavigation Page </h2>
<a href="lab2.html"> <img src="next.jpg" width="20%" height="20%"> </a><br>
</div>
</body>
</html>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>Laboratory 2</title>
<head>
<style type="text/css">
<title>Laboratory 2</title>
<head>
<style type="text/css">
body{text-align:center;margin-left:70px;margin-right:70px;background-color:#B1CAFA;}
div{font-size:25px;}
</style>
</head>
div{font-size:25px;}
</style>
</head>
<body>
<h2>We're looking for an HTML and CSS developer</h2>
<img src="kucing10.png" id="pic" width="30%" height="30%">
<div>
<br><br>For our client, The Cat Factory, <strong>we need a skilled web deveper in HTML and CSS.</strong>We offer a competitive salary, a bag of cat food, and toys.
<br>Don't wait , apply now ! Our crazy team is waiting for you right meow!<br><br>
</div>
<a href="effective web design.html" > <img src="back.jpg" width="5%" height="5%"> </a>
<a href="lab2.1.html" > <img src="next.jpg" width="5%" height="5%"> </a>
<h2>We're looking for an HTML and CSS developer</h2>
<img src="kucing10.png" id="pic" width="30%" height="30%">
<div>
<br><br>For our client, The Cat Factory, <strong>we need a skilled web deveper in HTML and CSS.</strong>We offer a competitive salary, a bag of cat food, and toys.
<br>Don't wait , apply now ! Our crazy team is waiting for you right meow!<br><br>
</div>
<a href="effective web design.html" > <img src="back.jpg" width="5%" height="5%"> </a>
<a href="lab2.1.html" > <img src="next.jpg" width="5%" height="5%"> </a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>Laboratory 2</title>
<head>
<style type="text/css">
body{text-align:center;margin-left:70px;margin-right:70px;background-color:#B1CAFA; font-family:Georgia;}
div{line-height:30px;}
<title>Laboratory 2</title>
<head>
<style type="text/css">
body{text-align:center;margin-left:70px;margin-right:70px;background-color:#B1CAFA; font-family:Georgia;}
div{line-height:30px;}
</style>
</head>
</head>
<body>
<h2> Leraning to apply the principle of web design</h2>
<h2> Leraning to apply the principle of web design</h2>
<div>
<br>
Posted by: Chiam Wui Xiang And Fong Cha Pei<br><br>
</div>
<div>
<h4>We can't go any further, this is the last page. <h4>
<div>
<img src="bay max.jpg" id="pic" width="30%" height="30%"><br>
<a href="lab2.html" > <img src="back.jpg" width="5%" height="5%"> </a>
<br>
Posted by: Chiam Wui Xiang And Fong Cha Pei<br><br>
</div>
<div>
<h4>We can't go any further, this is the last page. <h4>
<div>
<img src="bay max.jpg" id="pic" width="30%" height="30%"><br>
<a href="lab2.html" > <img src="back.jpg" width="5%" height="5%"> </a>
</body>
</html>
Monday, 3 October 2016
Web design -Laboratory 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>Laboratory 2</title>
<head>
<style type="text/css">
#pic,h2{margin-left:20px;width:100%;margin-right:60px;max-width:750px;}
</style>
</head>
<body>
<h2>We're looking for an HTML and CSS developer</h2>
<img src="kucing10.png" id="pic">
<p><br>For our client, The Cat Factory, <strong>we need a skilled web deveper in HTML and CSS.</strong>We offer a competitive salary, a bag of cat food, and toys.
<br>Don't wait , apply now ! Our crazy team is waiting for you right meow!<br><br>
<a href="lab2.1.html" >This is the connection to second page </a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>Laboratory 2</title>
<head>
<style type="text/css">
#p1{margin-left:40px;}
#pic{margin-left:40px;width:90%;margin-right:40px;max-width:1300px;}
<title>Laboratory 2</title>
<head>
<style type="text/css">
#p1{margin-left:40px;}
#pic{margin-left:40px;width:90%;margin-right:40px;max-width:1300px;}
</style>
</head>
</head>
<body>
<h3>Justin Beaver : Ever since I learned HTML, my life has made a complte 180</h3>
<h3>Justin Beaver : Ever since I learned HTML, my life has made a complte 180</h3>
<div>
<br>
Posted by: Damian Wiegosik<br><br>
</div>
<div>
Justin Beaver confessed something that even his greatest fans would have never expected of the skiled musicians and lyricist.The young rock-roller admitted that
since he typed his first title tag, his life became easier.It has been reported by those surrounding the Canadian that Beaver's private mentors,Ryan Loseling and
Nicolas Crate, often walk around Los Angeles disputing what a great tool the HTML validate is.</p>
<div>
<img src="kucing11.png" id="pic">
<div id="p1">Justin Beaver's happy cat</div>
<div>Beaver has already created some websites and docs does not intend to stop there." I will probably have a song about HTML on my next album." -the artist added.
</div>
<br><a href="lab2.html" >This is the connection to first page </a>
<br>
Posted by: Damian Wiegosik<br><br>
</div>
<div>
Justin Beaver confessed something that even his greatest fans would have never expected of the skiled musicians and lyricist.The young rock-roller admitted that
since he typed his first title tag, his life became easier.It has been reported by those surrounding the Canadian that Beaver's private mentors,Ryan Loseling and
Nicolas Crate, often walk around Los Angeles disputing what a great tool the HTML validate is.</p>
<div>
<img src="kucing11.png" id="pic">
<div id="p1">Justin Beaver's happy cat</div>
<div>Beaver has already created some websites and docs does not intend to stop there." I will probably have a song about HTML on my next album." -the artist added.
</div>
<br><a href="lab2.html" >This is the connection to first page </a>
</body>
</html>
Monday, 26 September 2016
Web design-Lab assignment 1
Today i would like to review a website which is author.uthm.edu.my.
a) What is the purpose of the site?
This website is an university website which act as a portal for university lecturer to share the lecture materials to their students. Students need to access this website always as to retrieve the lecture notes or tutorials that might needed for their next lessons.
b) Who is the intended audience?
The intended audience are the lecturers and the students of UTHM.
c) Do you think that the site reached its intended audience? Why and why not?
In my opinion, this site can reached its intended audience, as this website is crucial and necessary for all the lecturers and students in UTHM. This website act as a link between lecturers and students to discuss about their syllabus and share the courses materials. Hence it is needed for them to access the website often.
d) Is the website useful to you? Why or why not?
Yeah, sometime it is useful to me, as i need to access the website to get the study materials and assignments etc. Yet, this website can still be a troublesome sometimes when i use it.
e) List one interesting fact or issue that this site addresses.
The largest issue this site addresses is not very responsive to user's action, especially the redirecting problem. For example, when i have clicked the courses i wanted and obtained the materials i needed, and i wish to access to my other courses, the home button didn't work. When i clicked it, it just redirect me to the same page but won't take me back to the main selection page. I need to logout and relogin in order to access to my other courses.
f) Would you encourage others to visit the site?
Yes, although it might has some annoying problem, but still it is useful for students to get the information from what the lecturers shared.
g) How could this site be improve?
First, the design of the website should be more interesting. The interface should be properly designed to allow easier access by the users. Graphical icon should be insert for easier navigation. The redirection problem also need to be fixed so that users won't need to logout and login back. Furthermore, it is encouraged that this website could design to allow communications between lecturers and students.
a) What is the purpose of the site?
This website is an university website which act as a portal for university lecturer to share the lecture materials to their students. Students need to access this website always as to retrieve the lecture notes or tutorials that might needed for their next lessons.
b) Who is the intended audience?
The intended audience are the lecturers and the students of UTHM.
c) Do you think that the site reached its intended audience? Why and why not?
In my opinion, this site can reached its intended audience, as this website is crucial and necessary for all the lecturers and students in UTHM. This website act as a link between lecturers and students to discuss about their syllabus and share the courses materials. Hence it is needed for them to access the website often.
d) Is the website useful to you? Why or why not?
Yeah, sometime it is useful to me, as i need to access the website to get the study materials and assignments etc. Yet, this website can still be a troublesome sometimes when i use it.
e) List one interesting fact or issue that this site addresses.
The largest issue this site addresses is not very responsive to user's action, especially the redirecting problem. For example, when i have clicked the courses i wanted and obtained the materials i needed, and i wish to access to my other courses, the home button didn't work. When i clicked it, it just redirect me to the same page but won't take me back to the main selection page. I need to logout and relogin in order to access to my other courses.
f) Would you encourage others to visit the site?
Yes, although it might has some annoying problem, but still it is useful for students to get the information from what the lecturers shared.
g) How could this site be improve?
First, the design of the website should be more interesting. The interface should be properly designed to allow easier access by the users. Graphical icon should be insert for easier navigation. The redirection problem also need to be fixed so that users won't need to logout and login back. Furthermore, it is encouraged that this website could design to allow communications between lecturers and students.
Pic 1: The home page of Author UTHM.
Pic 2: The interface of the Author UTHM after login.
Pic 3: The issue faced which is in the course interface, it cannot go back to home selection page.
Tuesday, 19 April 2016
IP addressing fundamentals
1) What is IP address?
- IP
address is short for Internet Protocol (IP) address.
- IP
specifies the format of packets, also called datagrams, and the addressing
scheme.
- An IP address is an
identifier for a computer or device on a TCP/IP network. Networks using the
TCP/IPprotocol route messages based on the IP address of the destination
2) IP address is divided into network and host division. Draw an IP address format.
The format of an IP address is a 32-bit numeric address written as four numbers separated by periods. Each number can be zero to 255. For example, 1.160.10.240 could be an IP address.
Offsets
0 7
|
8 15
|
16 23
|
24 31
|
Class A
0 Network
|
Host
|
Class B
10 Network
|
Host
|
Class C
110 Network
|
Host
|
Class D
1110 Multicast address
|
Class E
11110 Reserved for
future use
|
3.
State True or False about IP address .Justify your answers.
a. IP address must be unique. (True)
-Each TCP/IP host is identified
by a logical IP address . The IP address is a network layer address and has no
dependence on the Data-Link layer address (such as a MAC address of a network
adapter). A unique IP address is required for each host and network component
that communicates using TCP/IP.
b. They are 48-bits numbers. (False)
-IP address is a 32-bits numeric address where written in dotted-decimal.
c. They are written and displayed as alphabet or dotted-decimal numbers. (True)
-IPv4 addresses is represented in dotted-decimal notation.
-For example, the quad-dotted
IP address 192.0.2.235 represents the 32-bit decimal number 3221226219, which
in hexadecimal format is 0xC00002EB. This may also be expressed in dotted hex
format as 0xC0.0x00.0x02.0xEB, or with octal byte values as
0300.0000.0002.0353.
-An IPv6 address is represented
as eight groups of four hexadecimal digits, each group representing 16 bits
(two octets). The groups are separated by colons (:).
An example of an IPv6 address (128-bits) is：
2001:0db8:85a3:0000:0000:8a2e:0370:7334
d. Each decimal number in a dotted-decimal IP address represents 8 bits of the IP address. (True)
-IPv4 addresses is separated by a dot for each 8 bits of the IP address
-8 bits of IP address in binary number is converted to dotted-decimal IP address.
4.
Change the following IP address from binary notation to dotted-decimal
notation.
a.
10000011 00001111 00001011 11101111
1(27)+1(21)+1(20)
. 1(23)+1(22)+1(21)+1(20) . 1(23)+1(21)+1(20)
. 1(27)+1(26)+1(25)+1(23)+1(22)+1(21)+1(20)
= 131.15.11.239
b. 11111001 10010011 11111011 00001111 1(27)+1(26)+1(25)+1(24)+1(23)+1(20)
. 1(27)+1(24)+1(21)+1(20) . 1(27)+1(26)+1(25)+1(24)+1(23)+1(21)+1(20)
. 1(23)+1(22)+1(21)+1(20)
= 249.147.251.15
5.
Change the following IP address from dotted decimal notation to binary
notation.
a. 110.66.45.78
=(64+32+8+4+2) . (64+2) . (32+8+4+1)
. (64+8+4+2)
=(26+25+23+22+21)
. (26+21) . (25+23+22+20)
. (26+23+22+21)
=01101110 01000010 00101101 01001110
b. 75.55.64.78
=(64+8+2+1) . (32+16+4+2+1) . (64) .
(64+8+4+2)
=(26+23+21+20)
. (25+24+22+21+20) . (26)
. (26+23+22+21)
=01001011 00110111 01000000 01001110
6.
IP address uses concept of classes.
a.
How many classes do IP address has? Explain each class.
IP
address has 5 classes, class A,B,C,D and E.
Class A
|
-
IP address format : 0nnnnnnn hhhhhhhh hhhhhhhh hhhhhhhh
-
First bit 0; 7 network
bits; 24 host bits
-
Initial byte: 0 – 127
-
126 Class As exist (0
and 127 are reserved)
-16,777,214 hosts on
each Class A
|
Class B
|
- IP address
format:10nnnnnn nnnnnnnn hhhhhhhh hhhhhhhh
- First two
bits 10; 14 network bits; 16 host bits
- Initial
byte: 128 - 191
- 16,384 Class
Bs exist
- 65,532 hosts
on each Class B
|
Class C
|
- IP address
format : 110nnnnn nnnnnnnn nnnnnnnn hhhhhhhh
- First three
bits 110; 21 network bits; 8 host bits
- Initial
byte: 192 - 223
- 2,097,152
Class Cs exist
- 254 hosts on
each Class C
|
Class D
|
-
IP address format :
1110mmmm mmmmmmmm mmmmmmmm mmmmmmmm
- First four
bits 1110; 28 multicast address bits
- Initial
byte: 224 - 247
- Class Ds are
multicast addresses
|
Class E
|
-
IP address format : 1111rrrr rrrrrrrr rrrrrrrr rrrrrrrr
- First four
bits 1111; 28 reserved address bits
- Initial
byte: 248 - 255
- Reserved for
experimental use
|
b.
Draw the format of each IP address class.
Class
A : 0nnnnnnn hhhhhhhh hhhhhhhh hhhhhhhh
Class B : 10nnnnnn
nnnnnnnn hhhhhhhh hhhhhhhh
Class C : 110nnnnn
nnnnnnnn nnnnnnnn hhhhhhhh
Class D : 1110mmmm
mmmmmmmm mmmmmmmm mmmmmmmm
Class E : 1111rrrr rrrrrrrr
rrrrrrrr rrrrrrrr
7.
Find the class of each address.
a.
00000001 00001011 00001011 111011111
By observing the first 4-bit of address
format, we can determine the address is class A.
b.
11110011 10011011 11111011 00001111
By observing the first 4-bit of address
format,we can determine the address is class E.
c.
227.12.14.87
Changing 227 to binary : 11100011
By observing the first 4-bit of address
format, it is class D.
d.
252.5.15.111
Changing 252 to binary : 11111100
By observing the first 4-bit of address
format, it is class E.
e.
134.11.78.56
Changing 134 to binary : 10000110
By observing the first 4-bit of address
format, it is class B.
8.
What is unicast address?
A unicast address is an address that
identifies a unique node on a network. Unicast addressing is available in IPv4
and IPv6 and typically refers to a single sender or a single receiver, although
it can be used in both sending and receiving. A unicast address packet is
transferred to a network node, which includes an interface address. The unicast
address is then inserted into the destination's packet header, which is sent to
the network device destination. Unicast is the most common form of IP
addressing.
9.
What is multicast address?
A multicast address, also called a group
address, is a single IP address for a set of hosts that are joined in a
multicasting group. An IP (Internet protocol) address is a unique numeric
identifier for a computer or other device on a TCP/IP (transmission control
protocol/Internet protocol) network. A multicast is a single stream of data
(i.e., a set of packets) that is transmitted simultaneously to selected
multiple hosts which have joined the multicast group. A host is a computer that
is connected to the network. Officially designated multicast addresses range
from 224.0.0.0 to 239.255.255.255. Some, termed well-known addresses, have been
designated for specific uses. For example, 224.0.0.1 is the address for
transmitting to all hosts in the multicasting group, and 224.0.0.2 is the
multicasting address for all routers on the subnet (i.e., logical division of a
network). OSPF (open shortest path first), an interior gateway protocol (IGP),
uses 224.0.0.5 and 224.0.0.6 to send OSPF routing information to all OSPF routers
on a network segment, and RIP (routing information protocol), another IGP, uses
224.0.0.9 to send routing information to all RIPv2 routers on a network
segment.
10.
What is reserved address?
Reserved address space is the group of
Internet Protocol (IP) addresses that are reserved and categorized only for use
with internal networks or intranets. It is a component of the IP address
scheme/classes reserved by the Internet Engineering Task Force (IETF) and
Internet Address and Naming Authority (IANA) for experimentation and internal
use.
Reserved address space is applicable to
Internet Protocol version 4 (IPv4) and Internet Protocol version 6 (IPv6) IP
addresses. IP addresses within the reserved address space are non-routable and
not meant for general addressing. These include IP addresses that range from
the top 3 IP classes, including Class a, b and c.
The reserved address space includes the
following range of IP addresses in the IPv4 addressing scheme:
~172.16.0.0
- 172.31.255.255 (prefix: 172.16/12)
~10.0.0.0
- 10.255.255.255 (prefix: 10/8)
~92.168.0.0
- 192.168.255.255 (prefix: 192.168/16)
11.
Given address 24.56.7.91, find the network address.
Converting 24.56.7.91 to binary : 00011000
00111000 00000111 01011011
By observing the first 4-bit of address
format, it is a class A address.
Class A address has format of 0nnnnnnn hhhhhhhh
hhhhhhhh hhhhhhhh
Hence, 24.56.7.91 has network address of 24.0.0.0
12.
Given the address 143.17.3.6, find the network address.
Converting 143.17.3.6 to binary : 10001111
00010001 00000011 00000110
By observing the first 4-bit of address
format, it is a class B address.
Class B address has a format of 10nnnnnn
nnnnnnnn hhhhhhhh hhhhhhhh
Hence, 143.17.3.6 has network address of
143.17.0.0
13.
What is address 127.0.0.1?
127.0.0.1 is the IP address of the local host,
which is the IP address of a computer.
Subscribe to:
Posts (Atom)