OOP

Website Development
READ& FOLLOW INSTRUCTIONS:
1. Goto StartButton> Type NotePad > Click NotePad++

2. Goto File Menu -> Click New or Press Ctrl + n
3. Encode the following Source Codes.


<html>
<head><title>Home Page</title></head>
<body>
<table bgcolor="lime" width="1335" height="450" style="border-collapse: collapse; border-radius: 7px;">

<tr height="50">
<td>

<center>Juan Dela Cruz's Personal Website</center>
</td>
</tr>
<tr bgcolor="black" height="12">

<td>

<a href="index.html" style="text-decoration: none;">

Home |

</a>

Pictures |

</a>

Videos |

</a>

Blogs |

</a>
1
Page

 Contacts 
</a>
</td>
</tr>
<tr bgcolor="white" height="550" >

<td>
<center> ABOUT ME </center>

<img src="picture_profile.jpg" height="300" width="300">
<div style="float: right; position:relative; width: 900;"> 


Hi! I'm Michael Luis U. Cabaccan, others call me "Mike". 
I'm 26 years of age. 
I'm Single. 
I live at #36 San Juan Street Baculud, Ilagan City, Isabela. 
I graduated at Isabela School of Arts and Trades in my High School, while
in elementary I graduated at Ilagan East Central School. 
My talents and skills are Playing Soccer and Computer Programming. 
I love Watching TV, Reading Books and Making Computer Programs. 
I'm Kind, Serious and Humble Person. 
I like silent and kind persons. 
I Don't want Mayabang at Maingay. 
I believe that "Knowledge is Useless without a Good Heart" 
</div>
</td>
</tr>
<tr>
<td>
<center>
<marquee behavior="alternate" >

Programmed by: Juan Dela Cruz | © 2016-2017 | All rights Reserved.
</marquee>
</center>
</td>
</tr>
</table>
</body>
</html>
2
4. Create a Folder in Drive DATA ->D:\YourName_Folder_Web

Page
5. Save your File As -> index.html

6. Open the Folder ->D:\YourName_Folder_Web
7. Double Click -> index.html
--------------------------------------------------------------------------------------------------------------------------------------------------
1. Again goto NotePad++

2. Goto File Menu > Click New
<html>
<head><title>Pictures Page</title></head>
<body>

<tr height="50">
<td>
</td>
</tr>

<td>

Home |

</a>
<a href="pictures.html" style="text-decoration: none;">

Pictures |

</a>
<a href="videos.html" style="text-decoration: none;">

Videos |

</a>
<a href="blogs.html" style="text-decoration: none;">

Blogs |

</a>
<a href="contacts.html" style="text-decoration: none;">

3

Page
</a>
</td>
</tr>

<td>
<iframe src="photos.html" style="border:0" height="550" width="1335"></iframe>
</td>
</tr>
<tr>
<td>
<center>
</marquee>
</center>
</td>
</tr>
</table>
</body>
</html>
4. Save your File As ->pictures.html
--------------------------------------------------------------------------------------------------------------------------------------------------
1. Again in NotePad++
<center>
<!—put 5 pictures inside your folder -->
<img src="pic1.jpg" height="400" width="400" style="border-radius: 7px;">
</center>
4. Save your File As -> photos.html
--------------------------------------------------------------------------------------------------------------------------------------------------
1. Again in NotePad++
<html>
<head><title>Videos Page</title></head>
<body>
4
Page

<tr height="50">
<td>
</td>
</tr>

<td>

Home |

</a>

Pictures |

</a>

Videos |

</a>

Blogs |

</a>

</a>
</td>
</tr>

<td>
<center>

"My Inspirational Video" 
<video width="500" height="400" controls>
<source src="video1.mp4" type="video/mp4">
<source src="video1.ogg" type="video/ogg">
5
</video>
Page
</center>
</td>
</tr>
<tr>
<td>
<center>
</marquee>
</center>
</td>
</tr>
</table>
</body>
</html>
4. Save your File As ->videos.html
--------------------------------------------------------------------------------------------------------------------------------------------------
1. Againin NotePad++
<html>
<head><title>Contacts Page</title></head>
<body>

<tr height="50">
<td>
</td>
</tr>

<td>

Home |

</a>

Pictures |

6
</a>
Page
Videos |

</a>

Blogs |

</a>

</a>
</td>
</tr>

<td>
<center>
Contact No. : 09159091465 
FaceBook : michaelcabaccan@facebook.com 
Yahoo : michaelcabaccan@yahoo.com 
Gmail : mikecabaccan@gmail.com 
</center>
</td>
</tr>
<tr>
<td>
<center>
</marquee>
</center>
</td>
</tr>
</table>
</body>
</html>
4. Save your File As ->contacts.html
Test your Outputs.

7
Congrats! Done. ☺
Page

OOP

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

OOP

Uploaded by

Copyright:

Available Formats

Website Development

READ& FOLLOW INSTRUCTIONS:

1. Goto StartButton> Type NotePad > Click NotePad++

<table bgcolor="lime" width="1335" height="450" style="border-collapse: collapse; border-radius: 7px;">

<tr bgcolor="black" height="12">

<a href="index.html" style="text-decoration: none;">

<a href="index.html" style="text-decoration: none;">

<a href="index.html" style="text-decoration: none;">

<a href="index.html" style="text-decoration: none;">

<tr bgcolor="white" height="550" >

<div style="float: right; position:relative; width: 900;"><br>

4. Create a Folder in Drive DATA ->D:\YourName_Folder_Web

5. Save your File As -> index.html

1. Again goto NotePad++

<table bgcolor="lime" width="1335" height="450" style="border-collapse: collapse; border-radius: 7px;">

<tr bgcolor="black" height="12">

<a href="pictures.html" style="text-decoration: none;">

<a href="videos.html" style="text-decoration: none;">

<a href="blogs.html" style="text-decoration: none;">

<a href="contacts.html" style="text-decoration: none;">

<font color="white" size="4"> Contacts </font>

<tr bgcolor="white" height="550" >

<table bgcolor="lime" width="1335" height="450" style="border-collapse: collapse; border-radius: 7px;">

<tr bgcolor="black" height="12">

<a href="pictures.html" style="text-decoration: none;">

<a href="videos.html" style="text-decoration: none;">

<a href="blogs.html" style="text-decoration: none;">

<a href="contacts.html" style="text-decoration: none;">

<tr bgcolor="white" height="550" >

<table bgcolor="lime" width="1335" height="450" style="border-collapse: collapse; border-radius: 7px;">

<tr bgcolor="black" height="12">

<a href="pictures.html" style="text-decoration: none;">

<a href="blogs.html" style="text-decoration: none;">

<a href="contacts.html" style="text-decoration: none;">

<tr bgcolor="white" height="550" >

Test your Outputs.

You might also like