Project in Itf

Screenshots:
Codes: Webpage 1
<!DOCTYPE html>
<head>
<title>My Website</title>
<style >
body {
.top {
font-family: Arial, Helvetica, sans-serif;

font size: 12px;
background:url(imagesweb/456434_213219.jpg);
}
background-image:url(website%20image%20files/header-top.jpg);
background-repeat:no-repeat;
background-position:left;
margin-left:127px;
width:1000px;
height:81px;
float:left;
}
.top2 {
background-image:url(website%20image%20files/header.png);
margin-left:127px;
width:1000px;
height:257px;
float:left;
}
.topmenu{
margin-left:127px;
width:1000px;
height:74px;
float:left;
}
.content {
background-image:url(website%20image%20files/content.png);
background-repeat:repeat-y;
margin-left:127px;
width: 700px;
float: left;
padding: 30px 24px 0px 24px;
}
.right{
background-color:#FFFFFF;
margin-left:703px;
width:297px;
height:auto;
float:left
}
.bottom {
margin-left:127px;
width:1000px;
height:81px;
float:left;
padding-top:5px;
padding-bottom:5px;
}
ul{
float:left;
width:100%;
padding:0;
margin-left:127px;
list-style-type:none;
}
a{float:left;
width:11.19em;
text-decoration:none;
color:white;
padding:0.2em 0.6em;
border-right:2px solid white;
border-bottom:1px solid #0066FF;
}
a:hover{
background-image:url(imagesweb/2121211212.JPG);}
li{display:inline;
}
.style1 {color: #FFFFFF}
</style></head>
<body>
<div class="top">
<h1 class="style1"> Home</h1>
</div>
<div class="top2">
<p> </p>
<p> </p>
</div>
<ul>
<li><a href="My Web.html">Home</a></li>
<li><a href="About Me.html">About Me</a></li>
<li><a href="BBALL.html">My Favourite Sport</a></li>
<li><a href="My course.html">My Course</a></li>
<li><a href="My school.html">Education</a></li>
</ul>
<div class="content">
<h1 class="title">Welcome To My Site</h1>
<p>I am, <strong>Christian Jay E. Tepora</strong> a 1st year college student taking up Bachelor of Science in
Information Tecnology. This is my Final Project for Information Tecnology Fundamentals. I need to make a website
about myself. Hope you like it :).</p>
<p align="center"><img src="imagesweb/IMG_10062014_131442sssssss copy.jpg" alt="Christian Jay E. Tepora"
width="324" height="412" border="0" usemap="#Autobiography">
<map name="Autobiography"><area shape="rect" coords="6,378,233,407" href="About Me.html">
</map></p>
<p> </p>
<p> </p>
<p> </p>
</div>
<img src="imagesweb/facebook_2.png" alt="Facebook" width="216" height="204" hspace="20px" border="0"
usemap="#FB">
<map name="FB">
<area shape="rect" coords="2,4,215,199" href="www.facebook.com/teporac" alt="FB">
</map>
<img src="imagesweb/yahoo-mail.png" alt="Facebook" width="230" height="217" hspace="20px" vspace="70px"
border="0" usemap="#Email">
<map name="Email"><area shape="rect" coords="20,29,232,220" href="mailto:cteporabsit@yahoo.com" alt="Email">
</map>
<div class="bottom">
<p> </p>
<p class="style1">  ©Copyright 2014. Designed by Christian Jay E. Tepora</p>
</div>
</body>
</html>
Codes: Webpage 2
<!DOCTYPE html>
<head>
<title>About Me</title>
<style >
body {
font size: 12px;
background:url(imagesweb/technology2-vunqs5.jpg);
}
.top {
margin-left:127px;
width:1000px;
height:81px;
float:left;
}
.top2 {
margin-left:127px;
width:1000px;
height:257px;
float:left;
}
.topmenu{
margin-left:127px;
width:1000px;
height:74px;
float:left;
}
.content {
margin-left:127px;
width: 700px;
float: left;
}
.right{
margin-left:703px;
width:297px;
height:auto;
float:left
}
.bottom {
margin-left:127px;
width:1000px;
height:81px;
float:left;
padding-top:5px;
padding-bottom:5px;
}
ul{
float:left;
width:100%;
padding:0;
margin-left:127px;
}
a{float:left;
width:11.19em;
color:white;
}
a:hover{
background-image:url(imagesweb/2121211212.JPG);
}
li{display:inline;
}
</style></head>
<body>
<div class="top">
<h1> <span class="style1">About Me</span></h1>
</div>
<div class="top2">
<p> </p>
<p> </p>
</div>
<ul>
<li><a href="My WEB.html">Home</a></li>
</ul>
<h1 class="title">My Autobiography</h1>
<p>I am, <strong>Christian Jay E. Tepora</strong> ,fifteen years old and a first year college student at University
of Perpetual Help System Dalta. I was born on the 16th day of October in year 1998 at Parañaque City,
Philippines. I currently live at B4 L11 Sorrento Panapaan Bacoor City Cavite. I live with my mother Marlyn E.
Tepora, father Ceferino M. Tepora jr., elder brother Vincent Jay E. Tepora and younger brother Mark Benedicat E.
Tepora.</p>
<p>I graduated elementary education at St. Michael's Institute, Bacoor City, Cavite in year 2010. When Im in
grade one I got a high grade. I got the Supervisor's Award, this award is given to the second most outstanding
student. So I take summer class for good purpose because it will accelerate me from grade 1 to grade 3. And I
don't need to take up grade 2. I also study secondary eduacation at the same school. I don't excel in high school
but I make sure that I don't have any failing grade. I graduated in year 2014. Now I am taking up Bachelor of
Science in Information Technology at University of Perpetual Help System Dalta.</p>
<p>I am a quite person, I dont always talk about everything. I like using computer for me to know more about
technology and how to use it to solve promblems easily. Im the kind of person who is always using logic to solve
problems. I also want to make computer programs that are very use useful. That's why I take up BSIT. I also like
playing basketball as a part of physical exercise and my passion. One of my weakness is doing my work in the last
minute because sometimes I am lazy to do my what should I do. Also when I don't like the work I don't exert extra
time and effort for it. I want to get rid of my bad habits. Nevertheless when I like the work that is given to me I
always give extra effort and time for that.</p>
<p>I have many dreams, first I want to finish my studies and graduate with good grades, Next I want to have a
good job that is related to my course. Then I want to help my family and earn money for them and for myself, and
I will save money. I want to have my own family and have a good life. A family that is healthy and happy. I also
want to be a sucessful IT expert beacause I want to discover more about modern technology and make my own
program that can help many people. Finally I also want to build a good business. For me business is the best
source of income because you are the boss and no one will dictate you what to do.</p>
<p>Life is like an echo, what you send out comes back. So you should only do good thins in order for you to
succeed in life. I should work hard for me to be a successful man. And I should be able to handle problems
properly, because some say that "Problems are like washing machines, they twist us, spin us and knock us
around but in the end we came out cleaner, brighter and better than before". That is the quote about life
that is really like. Furthermore I should study hard so my dreams will be fulfilled, to be a successful IT expert and a
successful man. Hard work is the most vital ingredient for success, beacause hard work makes everything
possible. Even if you are the most intellegent person in the world you will not succeed if you will not work hard for
it.</p>
<p> </p>
</div>
<img src="imagesweb/IMG_10062014_131442sssssss.jpg" alt="Christian Jay E. Tepora" width="222"
height="282" hspace="20px">
<p> </p>
</div>
</body>
</html>
Codes: Webpage 3
<!DOCTYPE html>
<head>
<title>My Favourite Sport</title>
<style >
body {
font size: 12px;
background:url(imagesweb/Bball.jpg);
background-repeat:repeat;
}
.top {
margin-left:127px;
width:1000px;
height:81px;
float:left;
}
.top2 {
margin-left:127px;
width:1000px;
height:257px;
float:left;
}
.topmenu{
margin-left:127px;
width:1000px;
height:74px;
float:left;
}
.content {
margin-left:127px;
width: 700px;
float: left;
}
.right{
margin-left:703px;
width:297px;
height:auto;
float:left
}
.bottom {
margin-left:127px;
width:1000px;
height:81px;
float:left;
padding-top:5px;
padding-bottom:5px;
}
ul{
float:left;
width:100%;
padding:0;
margin-left:127px;
}
a{float:left;
width:11.19em;
color:white;
}
a:hover{
}
li{display:inline;
}
</style>
<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
with(navigator){
var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
if (!isIE || !isWin){
var flashVer = -1;
if (plugins && plugins.length > 0){
var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
if (desc == "") flashVer = -1;

else{
var descArr = desc.split(" ");
var tempArrMajor = descArr[2].split(".");
var verMajor = tempArrMajor[0];
var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
flashVer = parseFloat(verMajor + "." + verMinor);
}
}
// WebTV has Flash Player 4 or lower -- too low for video
else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;
var verArr = reqVerStr.split(",");
var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
if (flashVer < reqVer){
if (confirm(msg))
window.location = "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
}
}
}
}
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body onLoad="MM_CheckFlashVersion('7,0,0,0','Content on this page requires a newer version of Adobe Flash
Player. Do you want to download it now?');">
<div class="top">
<h1 class="style1"> My Favourite Sport</h1>
</div>
<div class="top2">
<p> </p>
<p> </p>
</div>
<ul>
</ul>
<h1 class="title">My Favourite Sport: Basketball</h1>
<p align="justify"><strong>Basketball is a sport played by two teams of five players on a rectangular court. The
objective is to shoot a ball through a hoop 18 inches (46 cm) in diameter and 10 feet (3.0 m) high mounted to a
backboard at each end. Basketball is one of the world's most popular and widely viewed sports.</strong></p>
<p align="justify"><strong>A team can score a field goal by shooting the ball through the basket during regular
play. A field goal scores two points for the shooting team if a player is touching or closer to the basket than the
three-point </strong><strong>line, and three points (known commonly as a 3 pointer or three) if the player is
behind the three-point line. The team with the most points at the end of the game wins, but additional time
(overtime) may be issued when the game ends with a draw. The ball can be advanced on the court by bouncing it
while walking or running or throwing it to a team mate. It is a violation to move without dribbling the ball, to carry
it, or to hold the ball with both hands </strong><strong>then
resume </strong><strong>dribbling.</strong></p>
<p align="justify"><strong>Violations are called "fouls". A personal foul is penalized, and a free throw
is usually<br />
awarded to an offensive player if he is fouled while shooting the ball. A technical foul may also be issued when
certain infractions occur, most commonly for unsportsmanlike conduct on the part of a player or coach. A technical
foul gives the opposing team a free throw, and the opposing team also retains possession of the ball. As well as
many techniques for shooting, passing, dribbling and rebounding,</strong></p>
<p align="justify"><strong>basketball has specialized player positions and offensive and defensive
structures </strong><strong>(player positioning). Typically, the tallest and strongest members of a team will
play the center or power forward positions,while slightly shorter and more agile players will play small forward,
and the shortest players or those who possess the best ball handling skills and speed play point guard or shooting
guard.</strong></p>
<p align="left">Here is a Basketball Video Clip:</p>
<p>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version
=7,0,0,0','width','426','height','240','id','FLVPlayer','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersio
n=1&skinName=Clear_Skin_3&streamName=BBALL&autoPlay=false&autoRewind=false','quality','high','scale','no
scale','name','FLVPlayer','salign','lt','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?
P1_Prod_Version=ShockwaveFlash','movie','FLVPlayer_Progressive' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="426" height="240" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="salign" value="lt" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="FlashVars"
value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=BBALL&autoPlay=false&autoRewind
=false" />
<embed src="FLVPlayer_Progressive.swf"
flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=BBALL&autoPlay=false&autoRewi
nd=false" quality="high" scale="noscale" width="426" height="240" name="FLVPlayer" salign="LT"
type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?
P1_Prod_Version=ShockwaveFlash" />
</object></noscript>
</p>
<p> </p>
<p> </p>
</p>
</div>
<img src="imagesweb/animated-basketball-image-0029.gif" alt="Bball" width="203" height="222"
hspace="30">
<p> </p>
</div>
</body>
</html>
Codes: Webpage 4
<!DOCTYPE html>
<head>
<title>My Course</title>
<style >
body {
font size: 12px;
background:url(imagesweb/technology.jpg);
}
.top {
margin-left:127px;
width:1000px;
height:81px;
float:left;
}
.top2 {
margin-left:127px;
width:1000px;
height:257px;
float:left;
}
.topmenu{
margin-left:127px;
width:1000px;
height:74px;
float:left;
}
.content {
margin-left:127px;
width: 700px;
float: left;
}
.right{
margin-left:703px;
width:297px;
height:auto;
float:left
}
.bottom {
margin-left:127px;
width:1000px;
height:81px;
float:left;
padding-top:5px;
padding-bottom:5px;
}
ul{
float:left;
width:100%;
padding:0;
margin-left:127px;
}
a{float:left;
width:11.19em;
background:url(website%20image%20files/header-top.jpg);
color:white;
}
a:hover{
}
li{display:inline;
}
</style>
<div class="top">
<h1 class="style1"> My Course</h1>
</div>
<div class="top2">
<p> </p>
<p> </p>
</div>
<ul>
</ul>
<h1 class="title">Information Technology</h1>
<p><strong>Information technology ( IT) is the application of computers and telecommunications equipment to
store, retrieve, transmit and manipulate data, often in the context of a business or other enterprise. The term is
commonly used as a synonym for computers and computer networks, but it also encompasses other information
distribution technologies such as television and telephones. Several industries are associated with information
technology, including computer hardware, software, electronics, semiconductors, internet , telecom equipment, ecommerce and computer services. <br />
</strong></p>
<p><strong>Humans have been storing, retrieving, manipulating and communicating information since the
Sumerians in Mesopotamia developed writing in about 3000 BC, but the term information technology in its modern
sense first appeared in a 1958 article published in the Harvard Business Review ; authors Harold J. Leavitt and
Thomas L. Whisler commented that "the new technology does not yet have a single established name. We
shall call it information technology (IT)." Their definition consists of three categories: techniques for
processing, the application of statistical and mathematical methods to decision-making, and the simulation of
higher-order thinking through computer programs. </strong></p>
<p><strong><br />
Based on the storage and processing technologies employed, it is possible to distinguish four distinct phases of IT
development: pre-mechanical (3000 BC 1450 AD), mechanical (14501840), electromechanical
(18401940) and electronic (1940present). This article focuses on the most recent period (electronic), which
began in about 1940.</strong></p>
<p> </p>
</div>
<p> </p>
</div>
</body>
</html>
Codes: Webpage 5
<!DOCTYPE html PUBLIC><head>

<title>Education</title>
<style >
body {
font size: 12px;
background-image:url(imagesweb/edu.jpg);
background-repeat: repeat;
}
.top {
margin-left:127px;
width:1000px;
height:81px;
float:left;
}
.top2 {
margin-left:127px;
width:1000px;
height:257px;
float:left;
}
.topmenu{
margin-left:127px;
width:1000px;
height:74px;
float:left;
}
.content {
margin-left:127px;
margin right:120px;
width: 700px;
float: left;
}
.right{
margin-left:703px;
width:297px;
height:auto;
float:left
}
.bottom {
margin-left:127px;
width:1000px;
height:81px;
float:left;
padding-top:5px;
padding-bottom:5px;
}
ul{
float:left;
width:100%;
padding:0;
margin-left:127px;
}
a{float:left;
width:11.19em;
color:white;
}
a:hover{
background-image:url(imagesweb/2121211212.JPG);}
li{display:inline;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div class="top">
<h1 class="style1"> Education</h1>
</div>
<div class="top2">
<p> </p>
<p> </p>
</div>
<ul>
</ul>
<h1 class="title">Education</h1>
<p class="title"> </p>
<p class="title"> </p>
<table width="646" height="274" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="175" height="83" valign="top"><h2 align="center">Elementary</h2></td>
<td width="282" valign="top"><h2 align="center">St. Michaels Institute Bacoor City Cavite</h2></td>
<td width="181" valign="top"><h2 align="center">Class of 2010</h2></td>
</tr>
<tr>
<td height="83" valign="top"><h2 align="center">High school</h2></td>
<td valign="top"><h2 align="center">St. Michaels Institute Bacoor City Cavite </h2></td>
<td valign="top"><h2 align="center">2010-2014</h2></td>
</tr>
<tr>
<td height="82" valign="top"><h2 align="center">College</h2></td>
<td valign="top"><h2 align="center">University of Perpetual Help System Dalta</h2>
<p align="center"> (Bachelor of Science in Information Technology)
</style>
</p></td>
<td valign="top"><h2 align="center">2014-Present</h2></td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p align="justify"> </p>
</div>
<img src="imagesweb/1604754_1377473359183446_1200398578_n copy.png" alt=";St. Michael's Institute"
width="234" height="231" hspace="30px" />
<br>
<br>
<img src="imagesweb/Official_UPHSD_Logo copy.png" alt=";University of Perpetual Help System Dalta"
hspace="38px" border="0" usemap="#Perpetual">
<map name="Perpetual" id="Perpetual">
<area shape="rect" coords="1,4,221,319" href="imagesweb/perpetual-lp-campus.jpg" alt="UPHSD" />
</map>
<p> </p>
</div>
</body>
</html>
Project
In
ITF-Lab
(HTML)
Submitted by: Tepora, Christian Jay E.
Subitted to: Mr. Rhyan Morales
Rubrics:
BSIT -1A

Project in Itf

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Project in Itf

Uploaded by

Copyright:

Available Formats

Screenshots:

font-family: Arial, Helvetica, sans-serif;

if (desc == "") flashVer = -1;

<!DOCTYPE html PUBLIC><head>

You might also like