University of Makati
College of Computer Science
Web System and Technologies
Laboratory Exercise 1. HTML Review
Group Name: _______
Team Leader: Mariano, Carl Jacob S.
Members: Redoloso, James Lloyd
Jarabata, Maria Angelita
Valentin, Vince
Submitted to: Prof. Michael C. Olivo
Date of Submission: 09/06/2022
1
I. INTENDED LEARNING OUTCOMES
At the end of this exercise, students should be able to:
1. Understand the html
2. Apply the different elements in HTML
II. OVERVIEW
HTML is a markup language used for structuring and presenting content on
the World Wide Web. It was finalized, and published, on 28 October 2014 by
the World Wide Web Consortium (W3C). This is the fifth revision of the
HTML standard since the inception of the World Wide Web.
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new
paragraph:
i.e. <p>This is<br>a para<br>graph with line breaks</p>
HTML Fonts
The font-family property defines the font to be used for an HTML element:
i.e. <h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
HTML Text Size
The font-size property defines the text size for an HTML element:
i.e. <h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
HTML Text Alignment
The text-align property defines the horizontal text alignment for an HTML
element:
i.e. <h1 style="text-align:center;">Centered Heading</h1>
<p>This is a paragraph.</p>
HTML links are hyperlinks (text or an image you can click on, and jump
to another document).
i.e.
<!DOCTYPE html>
<html>
2
<body>
<p><a href="[Link] My University</a></p>
</body>
</html>
HTML Images are defined with the <img> tag. The <img> tag is empty,
it contains attributes only, and does not have a closing tag. The src
attribute specifies the URL (web address) of the image:
Image Size - Width and Height
You can use the style attribute to specify the width and height of an
image.
The values are specified in pixels (use px after the value).
<!DOCTYPE html>
<html>
<body>
<img src="[Link]" alt="HTML5 Icon"
style="width:128px;height:128px;">
</body>
</html>
III- PROCEDURES
1. Create three html page <see attached sample>
3
2. Attach source code
1.
<html>
4
<link rel="stylesheet"
href="[Link]
[Link]"
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68
vbdEjh4u" crossorigin="anonymous">
<body style="background-color:mediumaquamarine;">
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-12 col-xs-12">
<nav id="navbar">
<h3>Technical Documentation</h3>
<!--content stacking for smaller screens-->
<ul class="nav nav-pills nav-stacked">
<!--internal linking to the respective sections-->
<a class="nav-link" href="#Introduction" rel="internal">
<li>Introduction</li>
</a>
<a class="nav-link" href="#What_you_should_already_know"
rel="internal">
<li>What you should already know</li>
</a>
<a class="nav-link" href="#About_Topic" rel="internal">
<li>About the topic</li>
</a>
<a class="nav-link" href="#Topic_1" rel="internal">
<li>Topic 1</li>
</a>
<a class="nav-link" href="#Topic_2" rel="internal">
<li>Topic 2</li>
</a>
</ul>
</nav>
</div>
<div class="col-md-10 col-sm-12 col-xs-12">
<main id="main-doc">
<section class="main-section" id="Introduction" >
<h3 style = "background: black; color: white">Introduction</h3>
<article>
<p>Some content about the main topic, for example Java
documentation introduction about the language
</article>
</section>
<section class="main-section"
id="What_you_should_already_know">
5
<h3 style = "background: black; color: white">What you should
already know</h3>
<article>
<p>Background information before getting into the topic:</p>
<li>Some list content</li>
<li>Prerequisites.</li>
<li>Workings and assumptions</li>
<p>Any other content to be covered before learning this
topic</p>
</artice>
</section>
<section class="main-section" id="About_Topic">
<h3 style = "background: black; color: white">About topic</h3>
<article>
<p>More lines about the topic. For example, how the basic
functionality works, features etc...</p>
<p>
Technical documentation should be thorough and to the point
</p>
<p>
Write about features, comparisons with other languages etc
</p>
</article>
</section>
<section class="main-section" id="Topic_1">
<h3 style = "background: black; color: white">Topic 1</h3>
<article>
Getting started with the actual documentation content
<code>This would come in a different color and font indicating
lines of code
</code>
</article>
</section>
<section class="main-section" id="Topic_2">
<h3 style = "background: black; color: white">Topic 2</h3>
<p>
Another topic about the main topic, for example, if the topic is Java, this could
be variables or data types in Java
</p>
</section>
</main>
</div>
</div>
</div>
</html>
2.
<!DOCTYPE HTML>
6
<html>
<head>
<title>Sample Survey</title>
</head>
<body style="background-color:powderblue;">
<p style="font-family: verdana;">
<form action="[Link]
<div align="center">
<h1>Sample Survey</h1>
Enter your name:
<input type="text" name="UserName" size=30 maxlength=30 value="">
</br></br>
Enter your age:
<input type="text" name="age" size=5 maxlength=5 value=""> </br> </br>
what is your hobby:
<textarea name="Comments" cols=30 rows=3></textarea> </br> </br>
Do you play an online game?
<input type="radio" name="exe" value=1>Yes
<input type="radio" name="exe" value=2>No
</p>
How do you like to play your online game?
<p>
<input type="checkbox" name="Mobile Phone">Mobile Phone
<input type="checkbox" name="PC/Laptop">Gaming PC/Laptop
<input type="checkbox" name="XBOX">XBOX
</p>
What genre of movies do you like?
<select name="moviepref" ><option>
<option value=1 selected = "true">Comedy
<option value=2 >Romance
<option value=3 >Thriller
<option value=4 >Horror
<option value=5 >Drama
<option value=5 >SciFi
</select>
</br></br>
7
<input type=submit value="Submit form">
</div>
</form>
</body>
</html>
3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Error 404 page</title>
<style>
body {
margin: 0;
box-sizing: border-box;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, .1)),
url('[Link]
6e8537998592?ixlib=rb-
1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&aut
o=format&fit=crop&w=871&q=80');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
h1 {
font-size: 10rem;
color: #fff;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 1rem;
}
h2 {
font-size: 2rem;
8
color: #fff;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 1rem;
}
p{
font-size: 1.5rem;
color: #fff;
font-weight: 700;
margin-bottom: 1rem;
}
a{
padding: 15px 20px;
background: #52caee;
font-size: 1rem;
text-decoration: none;
color: #333333;
border-radius: .25rem;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.808)
}
</style>
</head>
<body>
<div class="container">
<h1>404</h1>
<h2>Page not found</h2>
<p>The page you are looking for does not exist.</p>
<p><a href="#">Visit Homepage</a></p>
</div>
</body>
</html>
3. Sample Output
[Link]
[Link]
[Link]
9
III. CONCLUSION:
The website-building process brought back memories of learning HTML
during our first year. We are thinking about the outcome of the website we
want to be when we do this. We hadn't used HTML in a while, so it wasn't
simple for us. In a similar manner, we also discovered how to build an
HTML website. Everything works and is executed well.
IV. REFERENCE/s
[Link]
RUBRICS:
Design 50%
Completeness 30%
No Error 20%
Total
10
