Module 1

1
Module 1
Computer Technology III
Methods and Procedures
Topic Basic HTML Tags
By Shiela Marie B. Pelayo
2

• Objectives
• At the end of the module, the students must be
  able to
• Recall the basic HTML tags.
• Recall the attributes of the basic HTML tags.
• Make a web page using the basic HTML tags and
  their attributes.

3
Day 1
Let's recall! Be cool!
4
Being smart is being cool. One way to be smart
is to let the world see what youve got through
the World Wide Web (WWW). And you will not be
able to do it without the use of the HTML.
What is HTML?
HTML (Hypertext Markup Language) is the set of
markup symbols or codes inserted in a file
intended for display on a World Wide Web browser
page. The markup tells the Web browser how to
display a web page's words and images for the
user.
5
Each individual markup code is referred to as an
element (but many people also refer to it as a
tag). Some elements come in pairs that indicate
when some display effect is to begin and when it
is to end. Example ltbgt is read as the bold tag.
If you want to make the text, Hello, bold, the
script which shall use of the bold tag should
be ltbgt Hello lt/bgt
Open bold tag
Close bold tag
I am sure you are very excited now to recall the
basic HTML tags and their attributes. Lets start
now with the activities.
6
Group Work

• Let us see if you still remember the basic HTML
  tags. Do the instructions below.
• Group the class. Each group shall have 3 members.
  
• The group shall answer the mind map in the next
  slide. One will act as recorder.
• Type an X inside the circle if it is an HTML tag.
• The activity is good for 5 to 6 minutes only.
• Be ready to share your answers to the class.

7
font
img
body
bgcolor
size
tr
color
u
href
br
Which
are
basic
HTML
tags
?
the
8
In order for you to know if your answers are
correct, please recall the basic HTML tags by
clicking the URLs below http//sunsite.berkeley.
edu/Web/basictags.html http//www.w3schools.com/h
tml/html_primary.asp http//www.w3schools.com/htm
l/html_formatting.asp http//www.w3schools.com/ht
ml/html_links.asp http//www.w3schools.com/html/h
tml_images.asp http//www.w3schools.com/html/html
_tables.asp You are only given 20 minutes to
recall the tags.
9
1. After reading the lessons about the basic HTML
tags, please go back to the mind map (slide 5)
and check your answers. 2. You may do some
editing if you find your answers incorrect.
? 3. Be ready to share your new answers to the
class.
10
i work

• Get ready for an individual work. The activity
  shall let you be more acquainted with the basic
  HTML tags and their attributes.
• An attribute is a property of a tag which
  specifies identifiers, formatting information,
  and so on.
• Go back to slide 6.
• Open all the URLs.
• In the next slide (slide 9), type the tags and
  their respective attributes in the table.
• Be ready to share your answers to the class.

11
Basic HTML Tags
Compare your answers with your seatmates. Do you
have the same answers? Let us do more actions in
the next slide.
12
Hands-on1

• After getting busy with the tags and attributes,
  it is time to do some real actions. Be sure to
  follow the procedures in typing the script.
• Open the Notepad.
• Do the scripts of the following
• 2.1 Change the background color of the web page
  into green.
• 2.2 Make the text, Juniors, bold.
• 2.3 Make the text ,Juniors, red.
• 2.4 Position the text, ARCHER, at the center
  of the web page. (The file is on the desktop.)
• 2.5 Display the image of the archer in the web
  page. The filename is archer.jpg. The size must
  be 200x300 pixels.

13
2.6 Make a table that will contain the following
data 2.7 Display the information below
using the ordered list tag ltolgt Top 3
Football Players 1. Dave Fuentes 2. Chuck
Rios 3. Jordan Jose 2.8 Make the text,
School Website, as hyperlink to
www.zobel.dlsu.edu.ph.
14
2.8 Make the text, Official Website, as
hyperlink to www.zobel.dlsu.edu.ph. Did you
follow the procedure in typing the correct
script to get the desired output? Remember,
attributes must be typed after the tag. Ex
ltfont size3 colorbluegtTEXTlt/fontgt 3. Save the
file as basic.html in the Basic subfolder . 4.
View the output using your computers browser.
Double- click the file icon. 5. Be ready for a
seatwork next meeting. Review the tags and their
attributes.
15
Check the web page below. What are you seeing in
the web page?
Assignment
16
Write the complete script of the web page in the
previous slide in ½ cross wise of paper. The tags
used in the web page are lttablegt, ltagt, ltfontgt and
ltulgt . Font used Verdana The assignments
script shall be used in the next activity. Be
ready with it.
lthtmlgt ltbodygt
17
Day 2
Take the challenge!
18
Are you ready for todays activities? Do you have
the script for your assignment? Before you do the
activity in the next slide, you can go back to
the previous slides and review the different tags
and their attributes. This will help you get the
right output. After reviewing, you can go to
slide 19 and take the challenge.
19
Hands-on2

• Objective To make a web page that will display
  the students understanding on the Fallacies of
  Relevance in Philosophy using the basic HTML
  tags.
• Open the Notepad.
• Type the script that youve written for the
  assignment.
• Improve the script by adding definition and by
  putting 2 examples for each fallacy. Visit
  www.philosophypages.com to see examples for each
  fallacy. Use home or school scenarios in the
  examples.
• You may add images or change the background of
  the web page.
• Save the file as fallacy.html in the Fallacy
  subfolder.

20
6. View the web page using your computers
browser. 7. In 1/8 cross wise, write your name,
section, date, and the rating of your web
page. Rating Scale 10/10 The web page is
appealing. Proper format was observed. The
topic and its examples are clearly presented
in the web page. 6/10- The web page is
appealing. Proper format was observed. The
topic and its examples are not clearly presented
in the web page. 4/10- The web page is dull.
The topic and its examples are not clearly
presented in the web page.
21
Valuing

• Get ¼ sheet of paper.
• 2. Please answer the questions below briefly
• 2.1 Why do you think procedures are necessary in
  scripting?
• 2.2 Give a practical example where procedure is
  necessary. School activities or house chores can
  be used.
• 3. Submit the paper to the teacher.
• 4. Be ready to share your answers to the class. ?

22
i connect
Do you want more? The activity below shall serve
as your review for the seatwork.
Directions Given the terms below, connect the
tags with red lines and connect the attributes
with yellow lines. Do this in 5 minutes.
size
color
font
src
body
u
img
alink
a
width
p
center
Be ready to share your answers to the class.?
23
Take the last challenge
Its time to test your comprehension about the
tags and their attributes. Did you study very
well? Did you review at home? Take the challenge
now! Log on to http//qserver.zobel.dlsu.edu.ph
and take the seatwork. Good luck! ?