Martes, Hulyo 2, 2013

IS 315 Hands On Activity #2

IS 315 Hands On Activity #2

1. Write the XHTML to display your name in the largest size heading element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-" xml:lang="en">
<head>
<title>My Name || IS315 Hands-On Exercises #2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h1>Neovic R. Devierte</h1>
</body>
</html>



2. Write the XHTML to create an absolute link to a Web site whose domain name is google.com.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-" xml:lang="en">
<head>
<title>Link || IS315 Hands-On Exercises #2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<a href="http://www.google.com">google.com</a>
</body>
</html>



3. Write the XHTML for an unordered list to display the days of the week.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-" xml:lang="en">
<head>
<title>Unordered List || IS315 Hands-On Exercises #2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<ul>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
</ul>
</body>
</html>



4. Write the XHTML for an ordered list that uses uppercase letters to order the item. This ordered list will display the following terms: HTML, XML, and XHTML.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-" xml:lang="en">
<head>
<title>Ordered List || IS315 Hands-On Exercises #2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<ol type="A">
<li>HTML</li>
<li>XML</li>
<li>XHTML</li>
</ol>
</body>
</html>




5. Think of a favorite quote by someone you admire. Write the XHTML code to display the person’s name in a heading and the quote in a blockquote.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-" xml:lang="en">
<head>
<title>Blockquote || IS315 Hands-On Exercises #2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h2>Erza Scarlett</h2>
<blockquote>
<p>"Living is the sole proof of how strong a person is."</p>.
</blockquote>
</body>
</html>




6. Modify the following code snippet to use logical style tags instead of physical style tags. A diagram of the organization of a web site is called a site map or storyboard. Creating the site map is one of the initial steps in developing a web site.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-" xml:lang="en">
<head>
<title>Logical || IS315 Hands-On Exercises #2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
A diagram of the organization of a web site is called a
<strong>site map</strong> or <strong>storyboard</strong>. <em>Creating the <strong>site
map</strong> is one of the initial steps in developing a web
site</em>.
</body>
</html>





7. Modify the blockquote.html Web page you created in Hands-On Practice 2.5. Configure the URL http://www.w3.org/WAI/ as a hyperlink. Save the file as blockquote2.html. Open your file in Notepad and print the source code for the page. Display your page in a browser and print the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-" xml:lang="en">
<head>
<title>Blockquote2 || IS315 Hands-On Exercises #2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h2>Erza Scarlett</h2>
<blockquote>
<p>"Living is the sole proof of how strong a person is."</p>.
</blockquote>
<a href="http://www.w3.org/WAI/">http://www.w3.org/WAI/</a>
</body>
</html>




8. Create a Web page that uses a definition list to display three network protocols (see Chapter 1) and their descriptions. Include a hyperlink to a Web site that provides information about the protocols. Add an appropriate heading to the page. Save the page as network.html. Open your file in Notepad and print the source code for the page. Display your page in a browser and print the page. Hand in both printouts to your instructor.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-" xml:lang="en">
<head>
<title>IS315 Hands-On Exercises #2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h2>Network Protocols</h2>
<dl>
<dt>IP</dt>
<dd>Internet Protocol -  consist of four numbers separated by periods 
used to identify the region or country from which a computer is connecting to the Internet
and sometimes be used to show the user's general location. 
<a href="http://whatismyipaddress.com/">http://whatismyipaddress.com/</a></dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol - enables two hosts to establish a connection 
and exchange streams of data.
<a href="http://www.webopedia.com/TERM/T/TCP.html">http://www.webopedia.com/TERM/T/TCP.html</a></dd>
<dt>FTP</dt>
<dd>File Transfer Protocol - is commonly used to transfer Web page files from their creator to the computer 
that acts as their server for everyone on the Internet.
<a href="http://searchenterprisewan.techtarget.com/definition/File-Transfer-Protocol">http://searchenterprisewan.techtarget.com/definition/File-Transfer-Protocol</a></dd>
</dl>
</body>
</html>




9. Create a Web page about your favorite musical group. Include the name of the group, the individuals in the group, a hyperlink to the group’s Web site, your favorite three (or fewer if the group is new) CD releases, and a brief review of each CD.

● Use an unordered list to organize the names of the individuals.
● Use a definition list for the names of the CDs and your reviews.

Save the page as band.html. Open your file in Notepad and print the source code for the page. Display your page in a browser and print the page. Hand in both printouts to your instructor.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-" xml:lang="en">
<head>
<title>Band || IS315 Hands-On Exercises #2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h1>Maroon 5</h1>
<a href="http://www.maroon5.com/home">Maroon 5 Official Site</a>
<h4>Members</h4>
<ul>
<li>Adam Levine(vocals, guitar)</li>
<li>James Valentine(guitar)</li>
<li>Mickey Madden(bass)</li>
<li>Ryan Dusick(drums)</li>
<li>Jesse Carmichael(keyboards)</li>
</ul>
<h4>CD Releases</h4>
<dl>
<dt>One More Night</dt>
<dd>"Overexposed" begins with its second official single, an upbeat, 
faintly reggae-tinged track about a bad influence Adam Levine can't seem to shake: 
"I cross my heart and I hope to die that I'll only stay with you one more night."</dd>
<dt>Payphone ft. Wiz Khalifa</dt>
<dd> Levine's tone shifts from indecision to heartbreak as Maroon 5 enlists the help of 
"Black and Yellow" rapper Wiz Khalifa for a heartstring-puller that's not far off from "She Will Be Loved" 
and "Never Gonna Leave This Bed". And if you ever wondered what Adam Levine might be like in a 
"Die Hard"-esque action role, check out the official video.</dd>
<dt>Daylight </dt>
<dd>On one of several "Overexposed" tracks co-produced by Levine himself, "Daylight" finds Maroon 5 
in their soft rock wheelhouse. "Daylight" is a bittersweet tale that builds momentum towards one of 
the album's most up-tempo songs that follows it; listen closely and you might hear a Chris Martin homage 
in Levine's "whoa-oh's."</dd>
</dl>
</body>
</html>




10. Create a Web page about your favorite recipe. Use an unordered list for the ingredients and an ordered list to describe the steps needed to prepare the food. Include a hyperlink to a Web site that offers free recipes. Save the page as recipe.html. Open your file in Notepad and print the source code for the page. Display your page in a browser and print the page. Hand in both printouts to your instructor.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-" xml:lang="en">
<head>
<title>Recipe || IS315 Hands-On Exercises #2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h2>How to cook Adobo</h2>
<a href=http://www.wikihow.com/Cook-Adobo>Website Guide</a>
<h4>Ingredients</h4>
<ul>
<li>2 lbs/900g boneless, skinless chicken or pork loin</li>
<li>2/3 cup soy sauce</li>
<li>2/3 cup vinegar</li>
<li>10 cloves of garlic, crushed</li>
<li>Salt and crushed black peppercorns to taste</li>
<li>1 Onion bulb</li>
<li>1 bay leaf (known as a dried "panakot" leaf in Filipino)</li>
<li>White rice (accompaniment)</li>
<li>Sugar</li>
</ul>
<h4>Steps</h4>
<ol>
<li>Cut 2 lbs/900g of boneless, skinless chicken thighs into quarters. Or if pork is preferred, 
cut 2 lbs/900g of pork loin into 2-inch/5cm cubes.</li>
<li>Place the chopped meat in a dutch oven, or a pan with a heavy base.</li>
<li>Add the soy sauce, vinegar, sugar, cloves of garlic, black pepper, and bay leaf. Cover the pan.</li>
<li>Bring to a medium boil for 15 minutes.</li>
<li>Cover and reduce heat to simmer for 30-45 minutes, or until there is no liquid left in the pan.</li>
<li>Stir once in a while to avoid burning the bottom.</li>
<li>Serve over a steaming bowl of boiled or steamed white rice.</li>
</ol>
</body>
</html>