HTML Compilation

Holy Trinity University
Programming Compilations for System Design
Presented to:
Engr. Val S. Mangalino
In Partial Fulfillment of the Course Requirement

For the degree of Bachelor of Science in
Computer Engineering
By:
John Mark Monterde
January 22, 2023

FILE 01 – HOME PAG
CODE (HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML HOME.com</title>
<link rel="stylesheet" href="header.css"/>
</head>
<body>
<center>
<span class="html" ><b>HTML</b></span>

<span class="files"><b>Files</b></span>
<h3 class="myname">John Mark Monterde

<br>
BS Computer Engineering - 3<sup>rd</sup> Year
</h3>
<br>
<br>
<br>
<table class="homeTable">
<tr>
<th class ="table-head">Upload Date</th>
<th class ="table-head">Description</th>
<th class = "table-head">Link</th>
<tr>
<td class="table-data">December 5, 2023</td>
<td class="table-data">Holy Trinity University Info</td>
<td class="table-data"><a class="link" href = "holy-trinity-university.html">Click
Here</a></td>
</tr>
<tr>
<td class="table-data">Linking Img in html</td>
<td class="table-data"><a class="link" href = "html-day 03.html">Click Here</a></td>
</tr>
<tr>
<td class="table-data"></td>
<td class="table-data">HTML Audio</td>
<td class="table-data"><a class="link" href = "html-d2-audio.html">Click
Here</a></td>
</tr>
<tr>
<td class="table-data">HTML Video</td>
<td class="table-data"><a class="link" href = "html-d3-video.html">Click
Here</a></td>
</tr>
<tr>
<td class="table-data">HTML List</td>
<td class="table-data"><a class="link" href = "html-d3-list.html">Click Here</a></td>
</tr>
<tr>
<td class="table-data">HTML Table</td>
<td class="table-data"><a class="link" href = "html-d3-table.html">Click
Here</a></td>
</tr>
<tr>
<td class="table-data"> December 18, 2023</td>
<td class="table-data">HTML Forms</td>
<td class="table-data"><a class="link" href = "html-forms.html">Click Here</a></td>
</tr>
<tr>
<td class="table-data">HTML Special Char</td>
<td class="table-data"><a class="link" href = "html-special-char.html">Click
Here</a></td>
</tr>
<tr>
<tr>
<td class="table-data">January 08, 2024</td>
<td class="table-data">Semantic & Non Semantic Elements</td>
<td class="table-data"><a class="link" href="html-non-sematic.html">Click
Here</a></td>
</tr>
<tr>
<td class=" table-data">Other HTML Tags</td>
<td class="table-data"><a class="link" href="html-other-tag.html">Click Here</a></td>
</tr>
</tr>
</table>
</center>
</body>
</html>
CODE (CSS):
/* UNIVERSAL CSS */
body {
background-color: #000000;
margin: 0%;
}
.html {
color: #ffffff;
width: 15%;
height:10vh;
margin: 5% 0% 0% 0%;
font-size: 500%;
border: 1px solid #000000;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
}
.files{
font-size: 500%;
width: 15%;
height: 13vh;
border: 1px solid black;
border-radius: 5px;
margin: 5% 0% 0% 0%;
background-color:#10e4cb;
}
.myname{
background-color: black;
color:#ffffff;
padding: 5px;
}
.prev{
width:7%;
height: 5%;
font-size: 25px;
color: #000000;
background-color: #10e4cb;
border: #10e4cb;
border-radius: 4px;
margin: 5% 0% 0% 10.3%;
transition: 0.5s;
text-decoration: none;
}
.htu-buttons{
color: #000000;
.prev:hover{
width: 7.2%;
}
/* HOME TABLE */
.homeTable { width: 50%;

height: 30%;
border-radius: 10px;
margin: 1% 20% 10% 20%;
.table-head{ width: 500px;

height: 50px;
font-size: 150%;
color: black;
margin: auto;
}
.table-data, .table-data:hover { width: 500px;

height: 25px;
margin: auto;
color: #000000;
.link {
.spongebob{
background-color:#e4a510;
padding: 5px;
color: rgb(0, 0, 0);
font-size: 140%;
border: 1px solid #e4a510;
width: 20%;
ul {
background-color: rgb(237, 181, 12);
color: rgb(0, 0, 0);
padding: 5px;
font-size: 140%;
FILE 02 – HOLY TRINITY UNIVERSITY

CODE (HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML HOME.com</title>
<link rel="stylesheet" href="header.css"/>
</head>
<body>
<center>


<br>
</h3>
<br>
<br>
<br>
<table class="homeTable">
<tr>
<th class ="table-head">Upload Date</th>
<th class ="table-head">Description</th>
<th class = "table-head">Link</th>
<tr>
<td class="table-data">Holy Trinity University Info</td>
<td class="table-data"><a class="link" href = "holy-trinity-university.html">Click
Here</a></td>
</tr>
<tr>
<td class="table-data">Linking Img in html</td>
<td class="table-data"><a class="link" href = "html-day 03.html">Click Here</a></td>
</tr>
<tr>
<td class="table-data">HTML Audio</td>
<td class="table-data"><a class="link" href = "html-d2-audio.html">Click
Here</a></td>
</tr>
<tr>
<td class="table-data">HTML Video</td>
<td class="table-data"><a class="link" href = "html-d3-video.html">Click
Here</a></td>
</tr>
<tr>
<td class="table-data">HTML List</td>
<td class="table-data"><a class="link" href = "html-d3-list.html">Click Here</a></td>
</tr>
<tr>
<td class="table-data">HTML Table</td>
<td class="table-data"><a class="link" href = "html-d3-table.html">Click
Here</a></td>
</tr>
<tr>
<td class="table-data"> December 18, 2023</td>
<td class="table-data">HTML Forms</td>
<td class="table-data"><a class="link" href = "html-forms.html">Click Here</a></td>
</tr>
<tr>
<td class="table-data">HTML Special Char</td>
<td class="table-data"><a class="link" href = "html-special-char.html">Click
Here</a></td>
</tr>
<tr>
<tr>
<td class="table-data">January 08, 2024</td>
<td class="table-data">Semantic & Non Semantic Elements</td>
<td class="table-data"><a class="link" href="html-non-sematic.html">Click
Here</a></td>
</tr>
<tr>
<td class=" table-data">Other HTML Tags</td>
<td class="table-data"><a class="link" href="html-other-tag.html">Click Here</a></td>
</tr>
</tr>
</table>
</center>
</body>
</html>
CODE (CSS):
/* HTU HOME CSS */

.htu{
color: #ffffff;
font-size: 3em;
margin: 0% 0% 1% 0%;
}
.logo-htu{
width: 75px;
height: 75px;
}
#htu-icon{
margin: 15px 0px 0px 0px;
}
.htu-buttons{
color: #000000;
.history{
color: #000000;
font-size: 250%;
width: 12%;
height: 5%;
padding: 8px;
border-color: #10e4cb;
border-radius: 5px;
transition: 0.5s;
.history:hover{
width: 12.2%;
.mission{
color: #000000;
font-size: 250%;
width: 25%;
height: 5%;
padding: 8px;
border-color:#10e4cb;
border-radius: 5px;
transition: 0.5s;
}
.mission:hover{
width: 25.2%;
.college {
color: #000000;
font-size: 250%;
background-color:#10e4cb ;
width: 13%;
height: 5%;
padding: 8px;
border-radius: 5px;
transition: 0.5s;
}
.college:hover {
width: 13.2%;
}
.act {
color: #000000;
font-size: 250%;
width: 14%;
height: 5%;
padding: 8px;
border-radius: 5px;
transition: 0.5s;
}
.act:hover{
width: 14.2%;
.contact{
color: #000000;
font-size: 250%;
width: 13%;
height: 5%;
padding: 8px;
border-radius: 5px;
transition: 0.5s;
}
.contact:hover{
width: 13.2%;
FILE 02.1 – HTU HISTORY

CODE (HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Htu.about</title>
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="css-htu-history.css">
</head>
<body>
<center>


<br>
</h3>
<br>
</center>
<br>
<br>
<h1 class="header"><b>HISTORY:</b></h1>
<center>
<p class="history02">
Holy Trinity University is the pioneer institution of higher learning in Palawan
established in 1940 as the Holy Trinity College Academy. The first administrators of the
Academy were Rev. Mother Cruz Rich, O.P., Rev. Mother Paulina Cruz, O.P., and Rev.
</p>
</center>
<button class="prev">
<a class="prev" href="holy-trinity-university.html"><b>⇐Prev</b></a>
</button>
</body>
</html>
CODE (CSS):
/* HTU HISTORY */
.header {
color:#ffffff;
font-size: 3em;
margin: 0% 0% 0% 3%;
}
.history02{
text-align: justify;
font-size: 2.5em;
font-family:Arial, Helvetica, sans-serif;
color: #000000;
border: 1px solid #10e4cb;
border-radius: 1%;
width: 90%;
height: 30%;
padding: 1% 2% 1% 2%;
margin: 0px;
}
FILE 02.2 – HTU MISSION & VISION

CODE (HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Htu.mission.vision</title>
<link rel="stylesheet" href="mission-vision.css">
</head>
<body>
<center>


<br>
</h3>
</center>
<br>
<br>
<center>
<h1 class="htu"><b>Holy Trinity University</b></h1>
<br>
<button class="mission">
<a class="icon" href="HTU-mission.html"><b>Mission</a></b>
</button>
<button class="vision">
<a class="icon" href="HTU-vision.html"><b>Vision</b></a>
</button>
</center>
<a class="icon" href="holy-trinity-university.html"><b>⇐Prev</a></b>
</button>
</body>
</html>
CODE (CSS):
/* HTU MISSION & VISION CSS */
.htu{
color: #ffffff;
font-size: 3em;
font-family: Arial, sans-serif;
}
.icon {
color: #000000;
}
.mission {
width: 14%;
height: 20%;
font-size: 50px;
border-radius: 5px;
margin: 0% 4% 0% 0%;
transition: 0.8s;
}
.mission:hover{
width: 14.2%;
}
.vision {
width: 14%;
height:20%;
font-size: 50px;
border-radius: 5px;
margin: 0% 0% 0% 4%;
transition: 0.5s;
}
.vision:hover{
width: 14.2%;
}
FILE 02.3 – HTU COLLEGES

CODE (HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Htu.colleges</title>
<link rel="stylesheet" href="css-colleges.css">
</head>
<body>
<center>


<br>
</h3>
<br>
<br>
<h1 class="header"><b>Courses</b></h1>
<h2 class="cet">
<b>
College of Engineering and Technology
</b>
<br>
<img src = "C:\Users\John Mark Monterde\Downloads\CET LOGO.png"
width = "150" height = "150" ></a>
</h2>
<br>
</center>
</button>
</body>
</html>
CODE (CSS):
/* HTU COLLEGE CSS */
.header{
color: #ffffff;
font-size: 3em;
font-family:Arial, Helvetica, sans-serif;
margin: 0% 0% 0% 3%;
}
.cet {
color: #000000;
font-size: 2em;
background-color: #e4a510;
border-radius: 2%;
width: 50%;
height: 20%;
margin: 0% 0% 2.5% 0%;
FILE 02.4 – HTU ACTIVITIES

CODE (HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Htu.Activities</title>
<link rel="stylesheet" href="css-activities.css">
</head>
<body>
<center>


<br>
</h3>
</center>
<br>
<br>
<center>
<h1 class="activities"><b>Yearly Activities</b></h1>
<br>
<p class="content">
1. Intramurals
<br>
2. Philippine Institute of Civil Engineers (PICE)
<br>
3. Institute of Computer Engineer of the Philippines (ICpEP)
<br>
4. STIRDC
</p>
</center>
</button>
</body>
</html>
CODE(CSS):
/* HTU ACTIVITIES CSS*/
.activities{
color: #ffffff;
font-size: 2.5em;
margin: 0% 0% 0% 5%;
}
.content{
color: #000000;
font-size: 1.5em;
text-align: left;
border-radius: 1%;
width: 50%;
height: 20%;
padding: 1% 2% 1% 2%;
}
FILE 02.5 – HTU CONTACT
CODE(HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Htu.contact.us</title>
<link rel="stylesheet" href="css-contacts.css">
</head>
<body>
<center>


<br>
</h3>
<br>
<br>
<h1 class="head"><b>Contact Us</b></h1>
<br>
<p class="info">Phone: (048) 433 2161
<br>
Mail: <a href="htu.palawan@yahoo.com">htu.palawan@yahoo.com</a>
<br>
Webpage: <a href="https//:www.htu.edu.ph">Holy Trinity University</a>
</p>
</center>
<br>
<a class="prev" href="holy-trinity-university.html"><b>⇐Prev</a></b>
</button>
</body>
</html>
CODE(CSS):
.head{
color: #fff;
font-size: 30px;
.info{
color: #fff;
}
FILE 03 – LINKING IMG TO IMG
CODE(HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Img.img</title>
<link rel="stylesheet" href="css-link-img.css">
</head>
<body>
<center>

<br>
</h3>
<br>
<br>
<br>
<h3 class="gates">Nand to Nor</h3>

<a href = "html-day0301.html">
<img src = "C:\Users\John Mark Monterde\OneDrive\Pictures\nand to or.png"
width = "450" height = "200" alt = "nand to or">
</a>
</center>
<button class="prev"><a class="prev" href="html-file-

compilation-.html">⇐Prev</a></button>
</body>
</html>
CODE(CSS):
body {
margin: 0%;
}
#html {
color: #ffffff;
width: 15%;
height:10vh;
margin: 5% 0% 0% 0%;
font-size: 500%;
}
#files{
font-size: 500%;
width: 18%;
height: 13vh;
border-radius: 3%;
margin: 5% 0% 0% 0%;
background-color:#e4a510;
}
.myname{
color:#ffffff;
padding: 5px;
}
.gates{
color: #ffffff;
font-size: 2em;
margin:0% 0% 0% 0%;
.prev{
width:7%;
height: 5%;
font-size: 25px;
color: #000000;
border: #e4a510;
border-radius: 2%;
margin: 1% 0% 5% 20%;
}
FILE 04 – HTML AUDIO
CODE(HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<center>


<br>
</h3>
<br>
<br>
<br>
<br>
<br>
<img src = "C:\Users\John Mark Monterde\OneDrive\Pictures\spongebob.webp"

width = "200" height = "200">
<p class="spongebob">SpongeBob Trap Remix</p>

<audio controls autoplay loop mute>
<source src = "C:\Users\John Mark Monterde\Music\SpongeBob Trap Remix Krusty Krab.mp3"
type = "audio/mp3">
</audio>
</center>
<button class="prev"><a class="prev" href="html-file-

compilation-.html">⇐Prev</a></button>
</body>
</html>
FILE 05 – HTML VIDEO
CODE(HTML):
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<center> <button id="html"><b>HTML</b></button>
<button id="files"><b>FILES</b></button>

<br>
</h3>
<br>
<br>
<h2>Rengoku Vs Akaza</h2>
<video with = "750" height = "450" controls>
<source src = "C:\Users\John Mark Monterde\Videos\Kimetsu No Yaiba - Mugen Ressha
hen\EP 7.mp4"
type = "audio/mp4">
</video>
</center>
<button class="prev"><a href="html-file-compilation-.html">⇐Prev</a></button>
</body>
</html>
FILE 06 – HTML LIST
CODE(HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<title>List.com</title>
<style>
div{
width: 300px;
margin: auto;
background-color: rgb(171, 248, 6);
}
</style>
</head>
<body>
<center>
<button id="html"><b>HTML</b></button>

<br>
</h3>
</center>
<br>
<br>
<div>
<div style = "text-align: center;">

<h3 style = "background-color: crimson;">Unordered and Ordered List</h3>
</div>
<ul style = "list-style-type: square;">

<li><b>Shoes</b></li>
<ol type = "i">
<li>Nike</li>
<li>Adidas</li>
<li>World Balance</li>
<li>Fila</li>
<li>Vans</li>
<li>Converse</li>
</ol>
<li><b>Shirt</b></li>
<ol type = "a">
<li>Macbeth</li>
<li>Penshoppe</li>
<li>Bench/</li>
<li>daily Flight</li>
<li>High Minds</li>
</ol>
<li><b>Pants</b></li>
<ol type = "1">
<li>RRJ</li>
<li>Dickies</li>
<li>Fubu</li>
<li>Tribal</li>
</ol>
</ul>
</div>
<br>
<button class="prev"><a href="html-file-compilation-.html">&lAarr;Prev</a></button>

</body>
</html>
FILE 07 – HTML TABLES
CODE(HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.table{
width: 50%;
height: 30%;
margin: 1% 20% 10% 20%;
background-color:#ffffff;
}
.header{
border: 1 px solid #000000;
}
.data {
}
</style>
</head>
<body>
<center>
<button id="html"><b>HTML</b></button>

<br>
</h3>
<br>
<br>
<table class="table">
<tr>
<th class="header">Date</th>
<th class="header">Name</th>
<th class="header">Course</th>
<th class="header">Year</th>
</tr>
<tr>
<td class="data">Dec 18, 2023</td>
<td class="data">Chauncey Kenn Arbis</td>
<td class="data">BS Computer Engineering</td>
<td class="data">3<sup>rd</sup> Year</td>
</tr>
<tr>
<td class="data">Cedric Ian Pacli</td>
</tr>
<tr>
<td class="data">Kieth Carlos</td>
</tr>
</table>
</center>
<button class="prev"><a href="html-file-compilation-.html">&lAarr;Prev</a></button>

</body>
</html>
FILE 08 -HTML FORMS
CODE(HTML):
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>


<form target="_blank">
<input type="text" disabled><br>

<input type="text" value="Text"><br>
<input type="text" value="Text" readonly>
<br>
<br>
<input type="text"
placeholder="First Name"
minlength="5"
required
>
<br>
<input type="date">
<br>
<input type="password"
placeholder="Password"
minlength="8"
required
>
<br>
<input type="email"
placeholder="Email"
required
>
<br>


<input type="submit"><br>
</form>
<br>
<form>
<input id="new-student" type="checkbox" name="haha">

<label for="new-student">New Student</label>
<br>
<input id="old-student" type="checkbox" name="haha">
<label for="old-student">Old Student</label>
<br>
<p>comments</p>
<textarea cols="50" rows="10"></textarea>
<br>
<br>
<br>
<input id="male" type="radio" name="gender">

<label for="male">Male</label>
<br>
<input id="female" type="radio" name="gender">
<label for="female">Female</label>
<br>
<br>
<p>Select Course</p>
<select name="Courses">
<option value="civil">BS Civil Engineering</option>
<option value=geo>BS Geodetic Engineering</option>
<option value="computer">BS Computer Engineering</option>
<option value="it">BS Information Technology</option>
<option value="cba">BS Business & Accountancy</option>
<option value="bsn">BS Nursing</option>
<option value="crim">BS Criminology</option>
</select>
<br>
<br>
<br>
<input type="range" min="0" max="100" value="10">

<input type="Reset">
<input type="submit">
</form>
</body>
</html>
FILE 08 – HTML SPECIAL CHAR
CODE(HTML);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.table{
width: 50%;
height: 30%;
margin: 1% 20% 10% 20%;
}
.table-head{
.content{
}
.emoji-table{
width: 50%;
height: 30%;
margin: 1% 20% 10% 20%;
.t-head2{
}
.data2{
}
</style>
</head>
<body>

<table class="table">
<tr >
<th class="table-head">Description</th>
<th class="table-head">Entity Name</th>
<th class="table-head">Entity Number</th>
<th class="table-head">Entity Hex</th>
</tr>
<tr>
<td class="content">Yen ¥</td>
<td class="content">& yen;</td>
<td class="content">& #165;</td>
<td class="content">& #xa5;</td>
</tr>
<tr>
<td class="content">Yen</td>
<td class="content">¥</td>
<td class="content">Yen</td>
<td class="content">¥</td>
</tr>
</table>

<table class="emoji-table">
<tr >
<th class="t-head2">Description</th>
<th class="t-head2">Entity Number</th>
<th class="t-head2">Entity Hex</th>
</tr>
<tr>
<td class="data2">LMAO 😂</td>
<td class="data2">& #128514;</td>
<td class="data2">& s#128514;</td>
</tr>
</table>
</body>
</html>
FILE 09 – HTML SEMANTIC & NON-SEMANTIC
CODE(HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.hello{
color: #ffffff;
border:1px solid #000000;
padding: 2px;
width: 8em;
height: 1em;
}
#haha{
color: #ffffff;
background-color: #9ea306;
border: 1 px solid #9ea306;
}
</style>
</head>
<body>
<div>
<h1 class="hello"> Hello World </h1>
</div>
<span>
<h1 id="haha"> Hahahaha </h1>
</span>
</body>
</html>
FILE 10 – OTHER HTML TAGS
CODE(HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content= "html other html tag">
<meta name="keywords" content="html-htu, Monterde">
<meta name="author" content="John Mark Monterde">

<script src="first-JS.js"></script>
</head>
<body>
<iframe src="html-file-compilation-.html"
width="360px" height="720px"></iframe>
<progress value="75" max="100"></progress>
</body>
</html>

HTML Compilation

Uploaded by

Copyright:

Available Formats

HTML Compilation

Uploaded by

Document Information

Original Description:

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

HTML Compilation

Uploaded by

Copyright:

Available Formats

Holy Trinity University

Programming Compilations for System Design

In Partial Fulfillment of the Course Requirement

John Mark Monterde

January 22, 2023

<link rel="stylesheet" href="header.css"/>

<span class="html" ><b>HTML</b></span>

<h3 class="myname">John Mark Monterde

.homeTable { width: 50%;

.table-head{ width: 500px;

.table-data, .table-data:hover { width: 500px;

FILE 02 – HOLY TRINITY UNIVERSITY

<link rel="stylesheet" href="header.css"/>

<span class="html" ><b>HTML</b></span>

<h3 class="myname">John Mark Monterde

/* HTU HOME CSS */

FILE 02.1 – HTU HISTORY

<link rel="stylesheet" href="header.css">

<link rel="stylesheet" href="css-htu-history.css">

<span class="html" ><b>HTML</b></span>

<h3 class="myname">John Mark Monterde

<a class="prev" href="holy-trinity-university.html"><b>&lArr;Prev</b></a>

FILE 02.2 – HTU MISSION & VISION

<link rel="stylesheet" href="mission-vision.css">

<link rel="stylesheet" href="header.css">

<span class="html" ><b>HTML</b></span>

<h3 class="myname">John Mark Monterde

<h1 class="htu"><b>Holy Trinity University</b></h1>

/* HTU MISSION & VISION CSS */

FILE 02.3 – HTU COLLEGES

<link rel="stylesheet" href="css-colleges.css">

<link rel="stylesheet" href="header.css">

<span class="html" ><b>HTML</b></span>

<h3 class="myname">John Mark Monterde

/* HTU COLLEGE CSS */

FILE 02.4 – HTU ACTIVITIES

<link rel="stylesheet" href="css-activities.css">

<link rel="stylesheet" href="header.css">

<span class="html" ><b>HTML</b></span>

<h3 class="myname">John Mark Monterde

<span class="html" ><b>HTML</b></span>

<h3 class="myname">John Mark Monterde

<h3 class="myname">John Mark Monterde

<h3 class="gates">Nand to Nor</h3>

<button class="prev"><a class="prev" href="html-file-

<span class="html" ><b>HTML</b></span>

<h3 class="myname">John Mark Monterde

<img src = "C:\Users\John Mark Monterde\OneDrive\Pictures\spongebob.webp"

<p class="spongebob">SpongeBob Trap Remix</p>

<button class="prev"><a class="prev" href="html-file-

<h3 class="myname">John Mark Monterde

<h3 class="myname">John Mark Monterde

<div style = "text-align: center;">

<ul style = "list-style-type: square;">

<ol type = "i">

<button class="prev"><a href="html-file-compilation-.html">&lAarr;Prev</a></button>

<link rel="stylesheet" href="css-link-img.css">

<h3 class="myname">John Mark Monterde

<button class="prev"><a href="html-file-compilation-.html">&lAarr;Prev</a></button>

<a class="prev" href="holy-trinity-university.html"><b>⇐Prev</b></a>