Module 1 Introduction To HTML

ALDERSGATE COLLEGE HTML 10
HIGH SCHOOL
MODULE 1: HTML INTRODUCTION
Teacher: Ricardo Rey V. Lopez

Level: Grade 10
Allotted Time: 4hrs
OVERVIEW
This module is designed to introduce the students about HTML
OBJECTIVES
Upon completion of this module, you should be able to:

1. Define the
a. What is HTML
b. What are HTML Elements
c. What are the parts of an HTML Element
2. Create web page that displays ―Hello World‖
PRETEST
Directions: Read carefully and answer what is being ask. Write your answer on the blank provided
below on each item.
1. What is HTML?
_____________________________________________________________________
2. What is web page?
_____________________________________________________________________
3. What is html element?
_____________________________________________________________________
LEARNING FOCUS
In this part, the following aspect shall specify the topic being discussed in the module.
1. What is HTML.
2. How does HTML work.
3. Parts of an HTML element.
4. Creating our very first html page.
TOPIC
HTML stands for Hypertext Markup Language. It is used to design web pages using a markup language.
HTML is the combination of Hypertext and Markup Language. Hypertext defines the link between the web
pages. A markup language is used to define the text document within a tag which defines the structure of
web pages. This language is used to annotate (make notes for the computer) texts so that a machine can
understand it and manipulate text accordingly. Most markup languages are human-readable. The language
uses tags to define what manipulation has to be done on the text.
How Does HTML Work?

 HTML documents are files that end with a .html or .htm extension.
 You can view them using any web browser (such as Google Chrome, Safari, or Mozilla Firefox).
 Usually, the average website includes several different HTML pages. For instance: home pages,
about pages, contact pages would all have separate HTML documents.
 Each HTML page consists of a set of tags (also called elements), which you can refer to as the
building blocks of web pages.
1|HTML 10
HIGH SCHOOL
The Basic structure of an HTML page is laid out below. It contains the essential building-block elements (i.e
doctype declaration, HTML, head, title and body elements) upon which all web pages are created.
HTML PAGE STRUCTURE
<!DOCTYPE html>: This is the document type declaration (not technically a tag). It declares a document as
being an HTML document. The doctype is not case-sensitive.
<html>: This is call the HTML rot element. All other elements are contained within it.
<head>: The head tag contains the ―behind the scenes‖ elements for a webpage. Elements within the head
aren‘t visible on the front-end of a webpage. We will discuss the HTML elements used inside the <head> as
we go through our topics.
<body>: The body tag is used to enclose all the visible content of a webpage. In other words, the body
content is what the browser will show on the front-end.
An HTML document can be created using any text editor. Save the text file using .html or .htm.
Once saved as an HTML document, the file can be opened as a webpage in the browser.
NOTE: basic/built-in text editors are Notepad(Windows) and Textedit (Macs). Basic text editors are entirely.
Sufficient for when you‘re just getting started. As you progress, there are many feature-rich text editors
available which allow for greater function and flexibility.
Here‘s an example of an HTML webpage:
Output:
2|HTML 10
HIGH SCHOOL
Parts of an HTML Element
The main parts of our element are as follows:
1. The opening tag: This consists of the name of the element (in this case, p), wrapped in opening
and closing angle brackets. This states where the element begins or starts to take effect — in this
case where the paragraph begins.
2. The closing tag: This is the same as the opening tag, except that it includes a forward slash before
the element name. This states where the element ends — in this case where the paragraph ends.
Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
3. The content: This is the content of the element, which in this case, is just text.
4. The element: The opening tag, the closing tag and the content together comprise the element.
Nesting HTML Elements
You can put elements inside other elements too — this is called nesting. If we wanted to state that our cat
is very grumpy, we could wrap the word "very" in a <b> element, which means that the word is to be strongly
emphasized:
Example:
<p>My cat is <b>very</b> grumpy.</p>
<p>My cat is <i>very</i> grumpy.</p>
<p>My cat is <u>very</u> grumpy.</p>
Output:
 Most Used HTML Element

1. <html></html> tag is the highest-level element that encloses every HTML page.
2. <head></head> tag holds meta information such as the page‘s title and charset.
3. <body></body> tag encloses all the content that appears on the page.
4. <br> tag used to break the line.
5. <hr> tag used to display the horizontal line in html document.
6. <p></p> tag used to define paragraph content in html document.
7. <b></b> tag used to specify bold content in html document.
8. <i></i > tag used to write the content in italic format.
9. <small></small> tag used to set the small font size of the content.
10. <u></u > tag used to set the content underline.
11. <center></center > tag used to set the content into the center.
12. <h1></h1> tag used to define the heading of html document.
13. <h2></h2> tag
14. <h3></h3> tag
15. <h4></h4> tag
16. <h5></h5> tag
17. <h6></h6> tag
3|HTML 10
HIGH SCHOOL
See this link to get the full list of html element https://www.w3schools.com/tags/default.asp
CREATING AN HTML FILE

A. Creating an HTML File on PC
1. Open your text editor of your choice, In this case I opened the built in text editor of windows
which is called Notepad:
2. Make a simple HTML webpage. Copy what is given below:
4|HTML 10
HIGH SCHOOL
3. Click File and pick ―save as‖.
4. Type your filename and end it with ―.html‖ extension. And then Click save.
B. Running an HTML file
1. Locate your saved HTML File and Right Click your file.
2. Click ―Open with‖ and choose your preferred browser to run your file with.
5|HTML 10
HIGH SCHOOL
3. The browser will now show the output of your Html file.
REFERENCE:
Websites
https://www.tutorialspoint.com/html/index.htm
E-Book
Learning Web Design
A BEGINNER'S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS (5th Edition)
By: Jennifer Niederst Robbins
6|HTML 10
HIGH SCHOOL
Name: __________________________________________________________ Section: ______________

Date: ________________
ACTIVITY 1
A. Directions: Create an HTML file and copy paste or type the code. Save it as activity1a.html and send
the html file or a screenshot of the preview in my messenger.
<!DOCTYPE html>
<html>
<head>
<title>First Webpage</title>
</head>
<body>
<h1>Hello World, check out my website!</h1>
</body>
</html>
B. Directions: Create a web page that outputs the same format shown below. Save it as activity1b.html
and send the html file or a screenshot of the preview in my messenger.
Aldersgate Collage
Mission:
Aldersgate College was established to develop the power of reason, to liberate people
from ignorance, penury and hopelessness, and to empower them to commence their own
journey for social and economical transformation and spiritual salvation.
Vision:
A 21st Century University transforming a global network of learners for enlightenment,
leadership and human service.
POST TEST 1
IDENTIFICATION
Directions: Define each term correctly. Write your answer on a space provided. Every correct answer is
equivalent to 2 points
1. HTML?
_____________________________________________________________________
2. HTML element
_____________________________________________________________________
3. Nesting
_____________________________________________________________________
4. <br>
_____________________________________________________________________
5. <hr>
_____________________________________________________________________
6. <b>
_____________________________________________________________________
7. <i>
_____________________________________________________________________
8. <u>
_____________________________________________________________________
9. <center>
_____________________________________________________________________
10. <p>
_____________________________________________________________________
7|HTML 10

Module 1 Introduction To HTML

Uploaded by

Document Information

Original Title

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

Module 1 Introduction To HTML

Uploaded by

Copyright:

Available Formats

ALDERSGATE COLLEGE HTML 10

MODULE 1: HTML INTRODUCTION

Teacher: Ricardo Rey V. Lopez

This module is designed to introduce the students about HTML

Upon completion of this module, you should be able to:

How Does HTML Work?

Here‘s an example of an HTML webpage:

Parts of an HTML Element

The main parts of our element are as follows:

Nesting HTML Elements

 Most Used HTML Element

CREATING AN HTML FILE

2. Make a simple HTML webpage. Copy what is given below:

3. Click File and pick ―save as‖.

B. Running an HTML file

Name: ____________________________________________ Section:

You might also like