Scribd
Upload
11 views

HTML Compilation

The document contains HTML code for two webpages - a home page and a Holy Trinity University info page. The home page contains a navigation bar and table linking to other pages. The Holy Trinity University page contains information about the university's history, mission, colleges and activities through buttons linked to different sections. Styling is provided through an external CSS file containing styles for layout, colors and elements.

Uploaded by

valmangalino15
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views

HTML Compilation

The document contains HTML code for two webpages - a home page and a Holy Trinity University info page. The home page contains a navigation bar and table linking to other pages. The Holy Trinity University page contains information about the university's history, mission, colleges and activities through buttons linked to different sections. Styling is provided through an external CSS file containing styles for layout, colors and elements.

Uploaded by

valmangalino15
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 45

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">December 12, 2023</td>
<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"></td>
<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"></td>
<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"></td>
<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"></td>
<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"></td>
<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 {
background-color: #000000;
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;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
}

.myname{
background-color: black;
color:#ffffff;
font-family: Arial, Helvetica, sans-serif;
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%;
font-family: Arial, Helvetica, sans-serif;
transition: 0.5s;
text-decoration: none;
}

.htu-buttons{
text-decoration: none;
color: #000000;

.prev:hover{
width: 7.2%;
background-color:#10e4cb;
}

/* HOME TABLE */

.homeTable { width: 50%;


height: 30%;
border: 1px solid black;
border-radius: 10px;
margin: 1% 20% 10% 20%;
background-color:#10e4cb;
font-family: Arial, Helvetica, sans-serif;

.table-head{ width: 500px;


height: 50px;
font-size: 150%;
color: black;
border: 1px solid black;
border-radius: 10px;
margin: auto;
background-color:#10e4cb;
font-family: Arial, Helvetica, sans-serif;
}

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


height: 25px;
border: 1px solid black;
border-radius: 10px;
margin: auto;
background-color:#10e4cb;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;

.link {
text-decoration: none;

.spongebob{
background-color:#e4a510;
padding: 5px;
color: rgb(0, 0, 0);
font-size: 140%;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #e4a510;
border-radius: 10px;
width: 20%;

ul {
background-color: rgb(237, 181, 12);
color: rgb(0, 0, 0);
padding: 5px;
font-size: 140%;
font-family: Arial, Helvetica, sans-serif;
border-radius: 10px;

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>

<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">December 12, 2023</td>
<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"></td>
<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"></td>
<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"></td>
<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"></td>
<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"></td>
<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%;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
}

.logo-htu{
display: inline-block;
width: 75px;
height: 75px;
}

#htu-icon{
margin: 15px 0px 0px 0px;
}

.htu-buttons{
text-decoration: none;
color: #000000;

.history{
color: #000000;
font-size: 250%;
background-color: #10e4cb;
width: 12%;
height: 5%;
padding: 8px;
margin: 20px 5px 20px 20px;
border-color: #10e4cb;
border-radius: 5px;
transition: 0.5s;

.history:hover{
width: 12.2%;
background-color:#10e4cb;

.mission{
color: #000000;
font-size: 250%;
background-color:#10e4cb;
width: 25%;
height: 5%;
padding: 8px;
margin: 20px 5px 20px 5px;
border-color:#10e4cb;
border-radius: 5px;
transition: 0.5s;
}

.mission:hover{
width: 25.2%;
background-color: #10e4cb;

.college {
color: #000000;
font-size: 250%;
background-color:#10e4cb ;
width: 13%;
height: 5%;
padding: 8px;
margin: 20px 5px 20px 5px;
border-color: #10e4cb;
border-radius: 5px;
transition: 0.5s;
}

.college:hover {
width: 13.2%;
background-color: #10e4cb;
}

.act {
color: #000000;
font-size: 250%;
background-color: #10e4cb;
width: 14%;
height: 5%;
padding: 8px;
margin: 20px 5px 20px 5px;
border-color: #10e4cb;
border-radius: 5px;
transition: 0.5s;
}
.act:hover{
width: 14.2%;
background-color: #10e4cb;

.contact{
color: #000000;
font-size: 250%;
background-color: #10e4cb;
width: 13%;
height: 5%;
padding: 8px;
margin: 20px 5px 20px 5px;
border-color: #10e4cb;
border-radius: 5px;
transition: 0.5s;
}

.contact:hover{
width: 13.2%;
background-color: #10e4cb;

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>

<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>

</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>&lArr;Prev</b></a>

</button>

</body>
</html>

CODE (CSS):

/* HTU HISTORY */

.header {
color:#ffffff;
font-size: 3em;
font-family: Arial, Helvetica, sans-serif;
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;
background-color: #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">

<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>

</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>

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

</body>
</html>

CODE (CSS):

/* HTU MISSION & VISION CSS */

.htu{
color: #ffffff;
font-size: 3em;
font-family: Arial, sans-serif;
}

.icon {
text-decoration: none;
color: #000000;
}

.mission {
width: 14%;
height: 20%;
font-size: 50px;
font-family: Arial, Helvetica, sans-serif;
background-color: #10e4cb;
border-color: #10e4cb;
border-radius: 5px;
margin: 0% 4% 0% 0%;
transition: 0.8s;
}

.mission:hover{
background-color: #10e4cb;
width: 14.2%;
}

.vision {
width: 14%;
height:20%;
font-size: 50px;
font-family: Arial, Helvetica, sans-serif;
background-color: #10e4cb;
border-color: #10e4cb;
border-radius: 5px;
margin: 0% 0% 0% 4%;
transition: 0.5s;
}

.vision:hover{
background-color: #10e4cb;
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">

<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>

<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 class="prev">
<a class="prev" href="holy-trinity-university.html"><b>&lArr;Prev</b></a>
</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;
font-family: Arial, Helvetica, sans-serif;
background-color: #e4a510;
border: 1px solid #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">

<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>

</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 class="prev">
<a class="prev" href="holy-trinity-university.html"><b>&lArr;Prev</b></a>
</button>

</body>
</html>

CODE(CSS):
/* HTU ACTIVITIES CSS*/
.activities{
color: #ffffff;
font-size: 2.5em;
font-family: Arial, Helvetica, sans-serif;
margin: 0% 0% 0% 5%;

}
.content{
color: #000000;
font-size: 1.5em;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
background-color: #e4a510;
border: 1px solid #e4a510;
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="header.css">
<link rel="stylesheet" href="css-contacts.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>
<h1 class="head"><b>Contact Us</b></h1>
<br>
<p class="info">Phone: (048) 433 2161
<br>
Mail: <a href="[email protected]">[email protected]</a>
<br>
Webpage: <a href="https//:www.htu.edu.ph">Holy Trinity University</a>

</p>

</center>
<br>

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

</body>
</html>

CODE(CSS):
.head{
color: #fff;
font-size: 30px;

.info{
color: #fff;
text-decoration: none;
}
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">
<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>

<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">&lArr;Prev</a></button>

</body>
</html>

CODE(CSS):
body {
background-color: black;
margin: 0%;
}

#html {
background-color: #000000;
color: #ffffff;
width: 15%;
height:10vh;
margin: 5% 0% 0% 0%;
font-size: 500%;
border: 1px solid #000000;
font-family: Arial, Helvetica, sans-serif;
}

#files{
font-size: 500%;
width: 18%;
height: 13vh;
border: 1px solid black;
border-radius: 3%;
margin: 5% 0% 0% 0%;
background-color:#e4a510;
font-family: Arial, Helvetica, sans-serif;
}

.myname{
background-color: black;
color:#ffffff;
font-family: Arial, Helvetica, sans-serif;
padding: 5px;
}

.gates{
color: #ffffff;
font-size: 2em;
font-family: Arial, Helvetica, sans-serif;
margin:0% 0% 0% 0%;

.prev{
width:7%;
height: 5%;
font-size: 25px;
color: #000000;
background-color: #e4a510;
border: #e4a510;
border-radius: 2%;
margin: 1% 0% 5% 20%;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;

}
FILE 04 – HTML AUDIO

CODE(HTML):
<!DOCTYPE html>
<html lang="en">
<head>

<title>Document</title>
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="css-link-img.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>
<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">&lArr;Prev</a></button>
</body>
</html>
FILE 05 – HTML VIDEO

CODE(HTML):
<!DOCTYPE html>
<html lang="en">
<head>

<title>Document</title>
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="css-link-img.css">

</head>
<body>
<center> <button id="html"><b>HTML</b></button>

<button id="files"><b>FILES</b></button>

<h3 class="myname">John Mark Monterde


<br>
BS Computer Engineering - 3<sup>rd</sup> Year
</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">&lArr;Prev</a></button>
</body>
</html>
FILE 06 – HTML LIST

CODE(HTML):
<!DOCTYPE html>
<html lang="en">
<head>

<title>List.com</title>
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="css-link-img.css">

<style>
div{
width: 300px;
margin: auto;
background-color: rgb(171, 248, 6);
}
</style>
</head>
<body>
<center>
<button id="html"><b>HTML</b></button>

<button id="files"><b>FILES</b></button>

<h3 class="myname">John Mark Monterde


<br>
BS Computer Engineering - 3<sup>rd</sup> Year
</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>

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

<style>
.table{
width: 50%;
height: 30%;
border: 1px solid black;
margin: 1% 20% 10% 20%;
background-color:#ffffff;
font-family: Arial, Helvetica, sans-serif;
}

.header{
border: 1 px solid #000000;
}

.data {
border: 1px solid #000000;
}
</style>
</head>
<body>
<center>
<button id="html"><b>HTML</b></button>

<button id="files"><b>FILES</b></button>

<h3 class="myname">John Mark Monterde


<br>
BS Computer Engineering - 3<sup>rd</sup> Year
</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">Dec 18, 2023</td>
<td class="data">Cedric Ian Pacli</td>
<td class="data">BS Computer Engineering</td>
<td class="data">3<sup>rd</sup> Year</td>
</tr>
<tr>
<td class="data">Dec 18, 2023</td>
<td class="data">Kieth Carlos</td>
<td class="data">BS Computer Engineering</td>
<td class="data">3<sup>rd</sup> Year</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>

<title>Document</title>

</head>

<body>
<!--FORMS HTML-->
<!--TEXT FIELD TYPES-->
<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>

<!--BUTTON TYPE: Submitt-->


<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>

<title>Document</title>
<meta charset="UTF-8">

<style>
.table{
width: 50%;
height: 30%;
border: 1px solid black;
margin: 1% 20% 10% 20%;
background-color:#ffffff;
font-family: Arial, Helvetica, sans-serif;
}

.table-head{
border: 1px solid black;

.content{
border: 1px solid #000000;
}
.emoji-table{
width: 50%;
height: 30%;
border: 1px solid black;
margin: 1% 20% 10% 20%;
background-color:#ffffff;
font-family: Arial, Helvetica, sans-serif;

.t-head2{
border: 1px solid #000000;
}

.data2{
border: 1px solid #000000;
}

</style>
</head>
<body>

<!--HTML ENTITIIES-->
<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 &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">&yen;</td>
<td class="content">Yen</td>
<td class="content">&yen;</td>
</tr>

</table>

<!--HTML EMOJIS-->

<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 &#128514;</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;
background-color: #000000;
border:1px solid #000000;
margin: 5px 2px 5px 2px;
padding: 2px;
width: 8em;
height: 1em;
font-family: Arial, Helvetica, sans-serif;
}
#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">

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


<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>

You might also like