Scribd
Upload
28 views

Laboratory Exercise 1. HTML Review

This document contains instructions for a laboratory exercise on HTML review. It includes 3 sections: intended learning outcomes, an overview of HTML elements covered like line breaks, fonts, text size and alignment, links and images. It also includes procedures for students to create 3 HTML pages demonstrating the covered elements and attaching their source code.

Uploaded by

Maria Angelita Jarabata
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

Laboratory Exercise 1. HTML Review

This document contains instructions for a laboratory exercise on HTML review. It includes 3 sections: intended learning outcomes, an overview of HTML elements covered like line breaks, fonts, text size and alignment, links and images. It also includes procedures for students to create 3 HTML pages demonstrating the covered elements and attaching their source code.

Uploaded by

Maria Angelita Jarabata
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

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="http://www.umak.edu.ph">Visit 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="html5.gif" 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.mi
n.css"
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="http://google.co.in">

<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('https://images.unsplash.com/photo-1595624871930-
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
file:///C:/Users/CJ/Documents/SampleSurvey.html
file:///C:/Users/CJ/Documents/Error404page.html
file:///C:/Users/CJ/Documents/Technical%20Documentation.html

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

https://www.w3schools.com/html/default.asp

RUBRICS:

Design 50%
Completeness 30%
No Error 20%
Total

10

You might also like