Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
112 views

Module 1 Introduction To HTML

This document provides an introduction to HTML for high school students. It defines HTML as a markup language used to design web pages and outlines the module's objectives and topics. These include defining HTML, HTML elements, and parts of an HTML element. The document also demonstrates how to create a basic "Hello World" webpage and includes examples of common HTML tags.

Uploaded by

Lyn Choi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
112 views

Module 1 Introduction To HTML

This document provides an introduction to HTML for high school students. It defines HTML as a markup language used to design web pages and outlines the module's objectives and topics. These include defining HTML, HTML elements, and parts of an HTML element. The document also demonstrates how to create a basic "Hello World" webpage and includes examples of common HTML tags.

Uploaded by

Lyn Choi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

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

You might also like