BIW 10103: Fundamentals of Web Technology

Wednesday, November 27, 2019

Lighthouse (CSS Stylesheet)

lighthouse.html

lighthouse.css

Output

HTML5 STRUCTURAL ELEMENTS

Code for image.html

<!DOCTYPE html>

<head>

<title>Floating Images</title>

</head>

<body>

<h1>Floating Images</h1>

</a>

<div class="description">Golden Gate Bridge

</div>

</a>

<div class="description">Rocky Shoreline

</div>

</a>

<div class="description">Waves Crashing

</div>

</a>

<div class="description">Ocean Sunset

</div>

</a>

<div class="description">Waterfall on the Beach

</div>

</a>

<div class="description">Fog Moving In

</div>

</body>

</html>

Code for image.css

.gallery

{

margin:30px;

border:1px solid #ccc;

float:left;

width:160px;

background-color:#e0e0eb;

}

.gallery:hover

{

border:1px solid #777;

}

.gallery img

{

width:100%;

height:40%;

}

.description

{

padding:10px;

text-align:center;

background-color:e0e0eb;

font-size: 16px;

}

Output

Thursday, November 21, 2019

LAB 5 : NEW VERSION OF LIGHTHOUSE
(CSS)

CODE
lighthouse.html

CODE

lighthouse.css

OUTPUT

Thursday, October 24, 2019

Lighthouse Island Bistro (Output)

Lab 4 : More CSS basics

<!DOCTYPE html>
<html>
<head>
<title>Trillium Media Design</title>
</head>

<body>

<style type="text/css">

body{
background-color:#d0f0c0;
color: black;
border: 80%;
}

h1{
background-color:#9cdf7a;
color:#376f1a;
background-image: url(trilliumlogo.jpg);
background-size: 110px;
background-repeat: no-repeat;
background-position:right;
font-family: Arial, Helvetica, sans-serif;
line-height: 200%;
text-indent: 30px;
font-size: 40px;
padding: 0px;
font-weight: bold;
}

nav{
font-weight: bold;
font-family: Times New Roman, serif;
font-size: 17px;
text-align: center;
background-color: lightgreen;
padding: 2px;
}

h2{
color:#376f1a;
font-family: Times New Roman, serif;
font-size: 25px;
text-indent: 30px;
}

ul{
font-family: Arial, Helvetica, sans-serif;
font-size:0.8em;
text-indent: 30px;
}

p{
font-family: Arial, Helvetica, sans-serif;
font-size:0.8em;
text-indent: 30px;
}

footer{
color:dimgrey;
text-align:left;
font-size: 0.80em;
text-indent: 30px;
text-align: center;
}

</style>

<h1><b><p class="new">Trillium Media Design</p></b></h1>

<nav>
<a href="Home.html">Home</a> 
<a href="Service.html">Services</a> 
<a href="Contact.html">Contact</a>
</nav>

<div>
<h2><b>New Media and Web Design</b></h2>

<p>Trillium Media Design will bring your company's Web presence to the next level.
We offer a comprehensive range of services.</p>

<ul>
<li>Website Design</li>
<li>Interactive Animation</li>
<li>E-Commerce Sollutions</li>
<span style="color:#ff0000"><li>Usability Studies</li>
<li>Search Engine Optimization</li></span>
</ul>

<h2><b>Meeting Your Business Needs</b></h2>
<p>Our Expert designs are creative and eager to work with you.</p>
</div><br><hr>

<footer><i>Copyright©2019 Janapiriya d/o Raman</i>
</footer>

</body>

</html>

Output:

Thursday, September 26, 2019

Lab 2 : CSS

Home page HTML Code

<!DOCTYPE html>

<html>

<head>

<title>Trillium Media Design</title>

</head>

<body>

body {

background-color:lightcyan;color: black;}

h1{

background-color:lightcoral;color:black;

}

h2{

background-color:gold;color:black;

}

footer{

color:black;text-align:left;

}

.new{color:black;font-style:italic;}

.footer{font-size:small;text-align:center;}

</style>

<h1><b><p class="new">Trillium Media Design</p></b></h1>

<nav>

<a href="Service.html">Services</a> 

<a href="Contact.html">Contact</a>

</nav>

<div>

<h2><b>New Media and Web Design</b></h2>

<p>Trillium Media Design will bring your company's Web presence to the next level.

We offer a comprehensive range of services.</p>

<ul>

<li>Website Design</li>

<li>Interactive Animation</li>

<li>E-Commerce Sollutions</li>

<li>Usability Studies</li>

<li>Search Engine Optimization</li>

</ul>

<h2><b>Meeting Your Business Needs</b></h2>

<p>Our Expert designs are creative and eager to work with you.</p>

</div><br><hr>

</footer>

</body>

</html>

Service page HTML Code

<!DOCTYPE html>

<html>

<head>

<title>Trillium Media Design</title>

</head>

<body>

body {

background-color:lightcyan;color: black;}

h1{

background-color:lightcoral;color:black;

}

h2{

background-color:gold;color:black;

}

footer{

color:black;text-align:left;

}

dl{background-color: lavenderblush;color: midnightblue;}

.new{color:black;font-style:italic;}

</style>

<h1><b><p class="new">Trillium Media Design</p></b></h1>

<nav>

<a href="Service.html">Services</a> 

<a href="Contact.html">Contact</a>

</nav>

<h2><b>Our Services Meet Your Business Needs</b></h2>

<dl>

<dt><b>Website Design</b></dt><dd>Whether your needs are larger or small,

Trillium can get you on the Web!</dd>

<dt><b>Interactive Animation</b></dt><dd>Multimedia training and marketing

animations are our speciality.</dd>

<dt><b>E-Commerce Sollutions</b></dt><dd>Trillium offers quick entry into

the e-commerce marketplace.</dd>

<dt><b>Usability Studies</b></dt><dd>Trillium can assess the usability of your current

site and suggest improvements.</dd>

<dt><b>Search Engine Optimization</b></dt><dd>Most people find websites using search

engines. Trillium can help you get your site noticed.</dd>

</dl><br><hr>

</body>

</html>

Contact page HTML Code

<!DOCTYPE html>

<html>

<head>

<title>Trillium Media Design</title>

</head>

<body>

body {

background-color:lightcyan;color: black;}

h1{

background-color:lightcoral;color:black;

}

h2{

background-color:gold;color:black;

}

footer{

color:black;text-align:left;

}

.new{color:black;font-style:italic;}

</style>

<h1><b><p class="new">Trillium Media Design</p></b></h1>

<nav>

<a href="Service.html">Services</a> 

<a href="Contact.html">Contact</a>

</nav>

<h2>Contact Trillium Media Design Today</h2>

<pre>

<li>Contact number > 0165444324</li>

<li>Facebook > <a href="https://www.Facebook.com"><i>>

https://web.facebook.com/janapiriya.raman</i></a></li>

<li>website > <a href="https://janapiriya.blogspot.com/">

https://janapiriya.blogspot.com/</a></li></pre><br><hr>

</body>

</html>

Wednesday, September 18, 2019

Laboratory 1 : Basic HTML [1]

Home Page (First Page)

Service Page (Second Page)

Contact Page (Third Page)

HTML CODE

Home page

<!DOCTYPE html>

<html>

<body>

<h1>Trillium Media Design</h1>

<br>

<a href="services.html">Services</a>  

<a href="contact.html">Contact</a>

</div>

<br>

<h3>New Media and Web Design</h3>

<p>Trillium Media Design will bring your company's Web presence

to the next level. We offer a comprehensive range of services.

</p>

<h3>Meeting Your Business Needs</h3>

<p>Our expert designers are creative and eager to work with you.</p><br>

Service page

<!DOCTYPE html>
<html>
<head>
<title>
Services
</title>
</head>
<body>
<h1>Trillium Media Design</h1>
<br>
<div class="topnav">
<a class="active" href="home.html">Home</a>
   
<a href="services.html">Services</a>
   
<a href="contact.html">Contact</a>
</div>
<h2>Our Services Meet Your Business Needs</h2>

<div>
<h3>Website Design</h3>
<p>&emsp;Whether youre needs are large or small,Trillium can get you on the Web!</p>

</div>
<div>
<h3>E-Commerce Solution</h3>
<p>&emsp;Trillium offers quick entry into the e-commerce marketplace</p>
</div>

<div>
<h3>Search Engine Optimization</h3>
<p>&emsp;Most people finde new sites using search engines.Trillium can get your website noticed.</p>
</div>
</body><br>
<footer><p><i>Copyright © 2019 Janapiriya d/o Raman</i></p></footer>
</html>

Contact page

<!DOCTYPE html>

<html>

<head><title>Contact</title></head>

<body>

<h1>Trillium Media Design</h1>

<br>

<a href="services.html">Services</a>

<a href="contact.html">Contact</a>

</div>

<h2>Contact Trillium Media Design Today</h2>

<pre>

<li>Contact number > 0165444324</li>

<li>Facebook > <a href="https://www.Facebook.com"><i>>https://web.facebook.com/janapiriya.raman</i></a></li>

<li>website > <a href="https://janapiriya.blogspot.com/">https://janapiriya.blogspot.com/</a></li></pre>

</body><br>

</html>

Wednesday, May 22, 2019

LAB 8 : Cloud Computing Applications

1. Link for Google Doc :
https://drive.google.com/open?id=1LuznDVhZCNdOuY2p6yzcPbFnxG8fE8B3iCagqCnfl8Y

2. Link for Google Doc- Spreadsheet : https://docs.google.com/spreadsheets/d/1LYehQMErM_fVztm-xl3qlT2otV8SioG4iEaUl8oHxKA/edit?usp=sharing

3. Link for Google Form : https://docs.google.com/forms/d/e/1FAIpQLSfUDJNvoXmNEcZjsNwf7y579pZJFhExMO2SI2qpOSNmTgYvug/viewform?usp=sf_link

4. Link for Types of Cloud Computing :
https://drive.google.com/open?id=18J4u1LNAO3NdI1QJ64FeDz0ehpjuneNEp0oTZWsfPJY

5. Link for Cloud computing Models :
https://drive.google.com/open?id=1MwnmAdaczcXqUJQl_et467JYuxC16aLQud8Q4WNPFYU

Thursday, May 16, 2019

LAB 7 : TCP/IP UTILITIES 2

1) Why do we need to ping?

- Ping is used to ensure that a host computer the user is trying to reach is actually operating. Ping is a basic Internet program that allows a user to verify that a particular IP address exists and can accept requests.

2) Explain the term Sent, Received, Lost and TTL
> Sent : Sent is the number of data packet that your computer sent from its source.

> Received : Received is the number of data packet received.

> Loss : Loss is the number of data packet that loss in the transmitted process.

> TTL (Time To Live) : A timer value included in packets sent over TCP/IP-based networks that tells the recipients how long to hold or use the packet or any of its included data before expiring and discarding the packet or data.

3) Explain what is happening in Figure 1.

- After pinging 117.194.0.24, the round trip time approximately less than 1ms and TTL is 64. According to the statistics,the sent is 4,received is 4,lost is 0.The minimum and maximum is 0ms.

4) 127.0.0.1 refers to 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 host we are trying to connect with is actually operating. Other than that, it is a fast way to test whether a new network card works with the correct driver installed. Ping 127.0.0.1 can be tested in command prompt even when the computer is not connected to the network.

6) Explain what is happening in figure 2?
- The user ping the IP address 127.0.0.1 which is a loopback address. The request is being sent over the network hub and router to the IP address where the user ping. Then the computer will reply to the ping with a pong response. The system is pinging IP 127.0.0.1 with 32 bytes of data. It also shown the packet sent is 4, received is 4 and lost is 0.

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?

- Figure 3 shows that the user is tracing the route to google.com, and then it shows the user's IP address of the domain and what is the maximum number of hops will it be before time out. After that, it tells information about each router that it went through during its journey. Those three columns refers to the response from the router and the duration it takes. When there is no response from the host, it will display “Request Time Out”. User will be notified that the website is unreachable and the connection is fail.

9) What is the difference between Figure 3 and Figure 4?

- The difference between Figure 3 and Figure 4 is its IP. The tracing route process in Figure 3 did not receive any response at all as all of its hops is showing request timed out. It may mean that there is a firewall blocking the computer. The tracing route process in Figure 4 shows the report of the trace route. The number 1 till 11in the first column represents hops. The next column represents RTT1(round trip time), followed buy RTT2 in the third column and later RTT 3. The last column shows the Name or the IP address of the router. The sudden increase in the hop 7 shows that there is an issue starting with that hop. Later at the end there is as asterisk indicating no response in hop 11.

10) What is tracert?
- The tracert command is a Command Prompt command that's used to show several details about the path that a packet takes from the computer or device you're on to whatever destination you specify.

11) Explain what is happening in Figure 5?

- The user types nslookup in cmd with the entries for the name of server (www.google.com). Then, the server and address are shown followed by Non-Authoritative answer that includes name of server and address of the server. It shows that the server failed to find the server name for the given IP address.

12) Explain Physical Address and IP Address.

- A physical address refers to either a memory location, identified in the form of a binary number, or a media access control (MAC) address. An Internet Protocol address (IP address) is a numerical label assigned to each device connected to a computer network that uses the Internet Protocol for communication. An IP address serves two principal functions: host or network interface identification and location addressing.

13) What are the difference between Physical address and IP address?

- Actually Physical address (MAC address) and IP address both serve the purpose of giving hosts a unique identification in a Network, depending on the status and function, these two have several differences.

Physical address gives a unique identification to the hardware interface of network, whereas the IP Address gives a unique identification to the software interface of the Network. Furthermore, if the assignment of address is considered, Physical addresses are assigned permanently to adapters and cannot be changed as they are Physical addresses. In contrast, IP addresses, either static or dynamic, can be modified depending on the requirements as they are logical entities or addresses. In addition, Physical addresses come in handy when it comes to Local Area Networks.

If the format is considered, the IP addresses use 32 or 128 bits long addresses while Physical addresses use a 48 bits long address. In a simplified view, IP address can be considered to support software implementations and Physical address can be considered as supporting hardware implementations of the network.