Lighthouse Island Bistro

1.

HTML:

CSS:

2.

HTML:

CSS:

Lighthouse

HTML Code:

CSS Code:

More with CSS Basics

Website Comparison

Ng Zhen Fai AI180226

Ng Kei Wak AI180281

Chua Shiann Koan AI180196

Section 5

1.

      In this assignment , we choose 2 websites which are digi.com.my and u.com.my. These 2 websites  exhibit the deisgn principles of repetition , contrast , alignment and proximity.

      First, we discuss about the repetition principle. There are a few properties that repeat in both website design. The logo of both websites will keep repeat on top of the left when browing through the websites. The digi’s logo design is yellow in background and the font “digi” inside the logo is using black colour with 3 blue colour air drops. While for u mobile’s, it is simply using white colour background with the orange colour in font and logo. Secondly, the typography of 2 websites are consistent throughout the sites. Both of the websites  use the particular font size for their headers to make their pages looks more organized. In addition, both websites have footer that provide quick access for the user to refer to the important parts of the websites.

       Other than that , the second principle that exhibit by the websites is contrast. The contrast is show in 2 aspect of design which are colour and size. A contrast in the colour will help user to differentiate page element from one another . It will makes the website have a nice flow and hierarchy to increase the usability of the websites. For example , the main heading of digi’s website use yellow as the background colour the the font colour is in white to create the contrast effect.While in u mobile’s website , the heading is use orange colour and and content of the website is using black colour. Both pages also use different font size and logo size to show the contrast. These two pages use large font size for the main or sub headings and small font size for the content. In the result ,this has successfully establish the hierarchy in the content of the websites and drive the interest of the user.

In term of alignment , U-mobile websites and Digi websites able to show a good design and interfaces in many aspects , such as for text alignment, images alignment, header alignments and footer alignment. For U-mobile websites and Digi websites, they aligned their header and text centrally in the webpage to show clear message for the users.  The alignment of the images are difficult due to the size of the images and the images need to adjust whenever the company want to add on the new images. The images in U-mobile websites are aligned within the grid the text normally in, and it looks good and simple , while for Digi websites , its image only aligned at the top side of websites where the area header and its description in.

While for proximity, the U-mobile websites and Digi websites have their related information placed closely together to form a categories and groups in a side bar. Both websites are able to place together the elements of their website in different categories which aligned at the top of websites with a link of navigation in each categories.  The users can easily wades through the elements in the websites by referring to desired categories in sidebar of websites. For the Digi websites, it only promote their internet plans with its information which grouped properly in the grids.

2. Web Design Best Practice:

Based on the U Mobile and Digi websites that we chose, both of them exhibit several web design best practices. Their URL are short and simple so that users will not be confuse them with different sites. Their target audience is for all ages, its purpose is to provide users with mobile service to communicate with other people with mobile devices.

For the page layout, their page is colourful and appealing to their target audience, their site header and logo are also consistent. At the footer area of the websites, they included the copyright and their contact e-mail. They also made good use of basic design principles like repetition, contrast, proximity, and alignment. For the text in the sites, there is a balanced gap between the graphic and white space in the space to make it easier to read and look.

For the browser compatibility, both of the websites are able to be displayed on popular  browsers like Google Chrome, Firefox, Safari, and Microsoft Edge without any problem. Moreover, you are also able to surf the sites on your mobile devices including tablets and smartphone for your convenience.

For the navigation part, the main navigation links are clear and consistently labeled so that users may not be left confused. The navigation is easy to use even for the elderly who are mostly tech-savvy. If the main navigation uses images or media, its text link are applied in the footer section of the page. All of their navigation hyperlinks are working and not broken.

For the colour and graphics, colour scheme is limited to few colours only plus neutral colour like white and black and the colour is used consistently to avoid eyesore for the users. For example, umobile website is focused on orange colour while Digi website is more focused on yellow colour.

For the content presentation, the websites chose to use familiar and common fonts like Times New Roman and no more than one type of font is used to make the page consistent to look at. To avoid a text congestion, writing techniques like bullet points and paragraphs are used in the text writing. As for the hyperlink, the links are always written in detail and not something like “Click Here” to inform users on what this hyperlink will do.

For the functionality and accessibility, all internal and external hyperlinks for the websites are working well and no javascript errors are generated. If a media like picture is used, the alternate text is provided to serve as a note if the picture failed to load. The frames are granted with titles and meaningful content are placed in the noframe areas. As for the language of the sites, html element’s lang attribute will serve its purpose.

Improvement:

U Mobile

1. Information should be easier to find by adding a filtered search function.

2. Content of the website should be updated regularly to remove outdated information to avoid mislead for users.

3. The page design should be made more appealing by adding more media content.

4. The site should have an online customer service to let users talk to the admin on the site.

Digi

1. The page should include a page number to let user switch to their desired banner conveniently.

2. The navigation should be structured in an unordered list.

3. Graphics should be optimized and do not significantly slow download when users load the website.

4. Animated images should not be endlessly repeat to avoid motion sickness for certain users.

Web Architecture Lab 2

Home.html

Service.html

Web Architecture Lab 1

First Page

Second Page 

Third Page

Lab 8

Cloud Computing Applications
1. Document
https://docs.google.com/document/d/1fP2wybaIr6VpSeppK8V4qn6vIaVrisRy-FsIMbih8xU/edit?usp=sharing

2. Spreadsheet
https://docs.google.com/spreadsheets/d/1qUadbjBYuPhr4EIggbceA6ZWCC1CRwJE0doDkycityQ/edit?usp=sharing

3. Forms
https://forms.gle/hGgufmGf7NN1qRFFA

4. Drawing
https://docs.google.com/drawings/d/1U7vCAwoE4LKqfW2abcTKnwO9pYO5n9_9juaqj3HfvGY/edit?usp=sharing

Lab 7

1. Why do we need to ping?
Ping is a simply used to ensure that the host you are trying to connect to is actually operating.

2. Explain the term Sent, Received, Lost and TTL.
Sent = Packets that you sent
Received = Packets that you received
Lost = Packets that you sent are lost
TTL = Time to live

3. Explain what is happening in Figure 1.
User is pinging 117.194.0.24 and received response from it with no packet loss.

4. 127.0.0.1 refers to
the loopback Internet protocol (IP) address also referred to as the “localhost".

5. Why do we need to ping 127.0.0.1
We need to ping 127.0.0.1 to ensure that the TCP/IP is working on the machine that you are typing on.

6. Explain what is happening in Figure 2?
User is pinging 127.0.0.1 and received response from it with no packet loss.

7.What does it mean by Request timed out?
If a request times out, it means that your computer did not receive a response at all.

8. Explain what is happening in Figure 3?
The traceroute request is timed out starting from 3rd hop because the target's firewall may be blocking requests. The target is still most probably reachable with a normal HTTP request, however. This should not affect normal connection.

9. What is the different between Figure 3 and Figure 4?
Traceroute request in Figure 3 is timed out starting from 3rd hop, where the traceroute request in Figure 4 received responses without failure.

10. What is tracert?
A traceroute is a network command that can be run on your computer if you experience routing problems. It traces the “hops” between your computer and the final destination. For each hop, the traceroute will diagnose where the problem is. 

11. Explain what is happening in Figure 5?
The user attempted a nslookup, nslookup is a network administration command-line tool available in many computer operating systems for querying the Domain Name System (DNS) to obtain domain name or IP address mapping, or other DNS records. The results shows that it can't find server name for address 218.248.255.162 because the issue of the server is that there is a missing or mis-configured PTR record for your DNS server in your reverse lookup zone. Then the user input www.google.com and www.go4expert.com to get the addresses of the website.

12. Explain Physical Address and IP Address.
Physical Address is a hardware address, which means it is unique to the network card installed on your PC. IP Address is an address bound to the network device, i.e., computer, via software.

13. What are differences between Physical Address and IP Address.
IP address is a logical address which is configured via the operating system, while the MAC address is a hardware address, burnt into the network card's ROM during the manufacturing process.

Lab 6

Exercise 1:
MAC Address = F0-92-1C-DE-1C-4E
IP address = 10.65.64.228
Subnet Mask = 255.255.252.0
Default Gateway IP address = 10.65.67.254

Exercise 2:
Own Host
Sent: 4
Received: 4
Lost: 0
Round trip times (min): 0ms
Round trip times (max): 0ms
Round trip times (average): 0ms

Neighbour on the same subnet
Sent: 4
Received: 4
Lost: 0
Round trip times (min): 1ms
Round trip times (max): 1ms
Round trip times (average): 1ms

Host on a different subnet
Sent: 4
Received: 4
Lost: 0
Round trip times (min): 1ms
Round trip times (max): 1ms
Round trip times (average): 1ms


Host that is shut down 
Sent: 4
Received: 0
Lost: 4
Round trip times (min): n/a
Round trip times (max): n/a
Round trip times (average): n/a

Exercise 3:
My local hostname: MPI_26
DNS Server: wpad.lan
Address: 161.139.240.99

Questions
1.
From this laboratory exercise, I understand that the command prompt (CMD) is the command-line interpreter in the OS/2, eComStation, Windows NT, Windows CE, and ReactOS operating systems. I also learned how to use command prompt to ping addresses for their latency

Lab 5

Resume

Name: Ng Zhen Fai
Phone number: +60147456583
Contact me: falconwest@gmail.com

I am a 21 years old university student currently studying Computer Science in University Tun Hussein Onn Malaysia (UTHM).

Education

Year	Academic Instituition
2005	SJKC Wan Hwa 1
2011	SMK Seri Keledang
2018	University Tun Hussein Onn Malaysia

Working Experience

Customer Service Officer - Grassland Express, Singapore - 2017-2018

• Served clients with their needs accurately
• Helped coordinate managers to gain more business opportunities
• Increased the company's income significantly despite of the short stay

Skills

Computer skills

Microsoft productivity software (Word, Excel, and Powerpoint)

Other skills

Proficiency in various languages (Chinese, Malay, and English)

HTML Code

<html>

    <head>

        <title>My resume</title>

        

<body bgcolor="#9ECCDF">

    </body></head>

    <body>

<div id="page-wrap">

    

        <div class="vcard" id="contact-info">

        

            <h1 class="fn">

Resume</h1>

Name: Ng Zhen Fai<br />

                Phone number: <span class="tel">+60147456583</span><br />

                Contact me: <a class="email" href="mailto:falconwest@gmail.com">falconwest@gmail.com</a>

            <br />

        </div>

<div id="objective">

            

                I am a 21 years old university student currently studying Computer Science in University Tun Hussein Onn Malaysia (UTHM).

        </div>

<div class="clear">

</div>

<dl>

            <dd class="clear"></dd>

            

            <h3>

Education</h3>

<table>

<tr>

    <th>Year</th>

    <th>Academic Instituition</th>

  </tr>

<tr>

    <td>2005</td>

    <td align="center">SJKC Wan Hwa 1</td>

  </tr>

<tr>

    <td>2011</td>

    <td align="center">SMK Seri Keledang</td>

<tr>

    <td>2018</td>

    <td align="center">University Tun Hussein Onn Malaysia</td>

</tr>

</tr>

</table>

<dd>

<br />

<dt><strong>Working Experience</strong></dt>

<dd>

                <h2>

Customer Service Officer - Grassland Express, Singapore - 2017-2018</h2>

<ul>

<li>Served clients with their needs accurately</li>

<li>Helped coordinate managers to gain more business opportunities</li>

<li>Increased the company's income significantly despite of the short stay</li>

</ul>

</dd>

                <br />

  <div>

<strong>Skills</strong></div>

<h2>

Computer skills</h2>

Microsoft productivity software (Word, Excel, and Powerpoint)<br />

<h2>

Other skills</h2>

Proficiency in various languages (Chinese, Malay, and English)<br />

                </dd>

</dl>

</div>

</body>

   

</html>

Lab 4

<html>
<head>
<title>My First Webpage</title>
</head>
<body bgcolor="#EDDD9E">
<hl align="center">MY First Webpage</hl>
<p>Welcome to my <strong>first</strong> webpage. I am writing this page using a text editor and plain old html.</p>
<p>By learning html, I'll be able to create web pages like a pro....<br>which I am of course.</p>
Here's what I've learned:
<ul>
<li>How to use HTML tags</li>
<li>How to use HTML colours</li>
<li>How to create Lists</li>
</ul>
</body>
</html>

1. Explain about the HTML code above.
<html> Defines the root of an HTML document
<head> Defines information about the document
<title> Defines a title for the document
<body bgcolor="#EDDD9E">  Defines the document's body and the bgcolor                                                              attribute is used to set the background color of                                                            an HTML element
<h1 align="center">  Defines HTML headings where align="center" arranged                                             its position at the middle
<p>         Defines a paragraph
<br> Defines a single line break
<ul>       Defines a block element used to designate an unordered list
<li>        Defines a list item in ordered or unordered lists

2. Change the given HTML code by using an ordered list tags.
<html>
<head>
<title>My First Webpage</title>
</head>
<body bgcolor="#EDDD9E">
<hl align="center">MY First Webpage</hl>
<p>Welcome to my <strong>first</strong> webpage. I am writing this page using a text editor and plain old html.</p>
<p>By learning html, I'll be able to create web pages like a pro....<br>which I am of course.</p>
Here's what I've learned:
<ol>
<li>How to use HTML tags</li>
<li>How to use HTML colours</li>
<li>How to create Lists</li>
</ol>
</body>
</html>

3. List 10 colours HEX value in HTML codes.

• Aqua #00FFFF
• Black #000000
• Blue #0000FF
• Fuchsia #FF00FF
• Gray #808080
• Green #008000
• Lime #00FF00
• Navy #000080
• Silver #C0C0C0
• Teal #008080

4. Provide a HTML code for definition lists.

<dl>

<dt>First</dt>

<dd>This is the first.</dd>

<dt>Second</dt>

<dd>This is the second.</dd>

</dl>

Lab 3

	<html>
	<head>
	<title>My First Webpage</title>
	</head>
	<body>
	<h1 align="center">My First Webpage</h1>
	<p>Welcome to my first web page. I am writing this page using a text editor and plain old html.</p>
	<p>By learning html, I'll be able to create web pages like a pro....<br>
	which I am of course.</p>
	</body>
	</html> 1. Explain about the HTML code above. <html> Defines the root of an HTML document <head> Defines information about the document <title> Defines a title for the document <body> Defines the document's body <h1> Defines HTML headings where align="center" arranged its position at the middle <p>         Defines a paragraph <br> Defines a single line break 2. Explain about the two types of HTML Tags? HTML Tags can be of two types which are paired tags or singular tags. a) The first one is paired tags which is also called container tag. A tag is said to be a paired tag if the text is placed between a tag and its companion tag. In paired tags, the first tag is referred to as Opening Tag and the second tag is referred to as Closing Tag. b) The second one type of tag is the singular tag, which is also known as a stand-alone tag or empty tag. The stand-alone tag does not have companion tag or closing tag. 3. Give some examples of HTML tags on both types of HTML tags. a) Example of Paired Tags in HTML: <p>this is example of paired tag</p> <body>this is the second example</body> b) Example of Singular Tags in HTML: <br> <hr> <img> <meta>

First Post

	<html>
	<head>
	<title> My first Webpage. </title>
	</head>
	<body>
	This is my first homepage. <b>This text is bold </bold>
	</body>
	</html>

1. Explain about the HTML code above.

The web pages start with the html element. It's also called the root element because it's at the root of the tree of elements that make up a web page. To create the html element, you write an opening <html> tag followed by a closing </html> tag. The head element contains information about the web page, as opposed to the web page content itself. The title element contains the title of the page. The body element appears after the head element in the page. It should contain all the content of your web page: text, images, and so on. HTML doesn't have a <bold> tag, instead you would have to use <b>. Note however, that using <b> is discouraged in favor of CSS for a while now.

2. Why the use of HTM or HTML Extension?

The webpage’s standard file extensions are .htm and .html. Both these extensions are related to HTML, the basic language used for writing webpages. File extensions help the operating system to identify the kind of data file it is dealing with and in identifying an appropriate program to read and edit it.

3. How to View  HTML Source?

To view a html source on Google Chrome, simply Right-click on a blank part of the web page and select View page source from the pop-up menu that appears.

The FIRST Websites

1) The First Search Engine:
     

    In 1990, Archie the first search engine was founded a student named Alan Emtage, a student at McGill University in Montreal. The original intent of the name was "archives," but it was shortened to Archie.

2) The First Browser:
 

   The first ever web browser was developed by Tim Berners-Lee and was called WorldWideWeb. It was completed in December, 1990 and introduced to a number of people at CERN in March, 1991. However, it did not display web pages with graphics embedded in them, that did not happen until the arrival of NCSA Mosaic 2.0.

3)  The First Computer Game:

    The first computer game is generally assumed to be the game Spacewar!, developed in 1962 at MIT (Stephen Russell a.o.). Spacewar originally ran on a PDP-1 computer the size of a large car. By today’s standards, the graphics are rather primitive, although less primitive than many games form the 1980’s. The game as such is not bad during the older days.