Scribd
Upload
12 views

Lesson For Blended Learning

<!DOCTYPE html> <html> <head> <title>Ghibli Studio Films</title> </head> <body> <h1>Ghibli Studio Films</h1> <table> <tr> <td> <img src="ghibli.png"> </td> <td> <h2>Spirited Away</h2> <img src="spiritedaway.jpg"> </td> <td> <h2>My Neighbor Totoro</h2> <img src="totoro.jpg"> </td> </tr>

Uploaded by

Jed Clio Lendio
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views

Lesson For Blended Learning

<!DOCTYPE html> <html> <head> <title>Ghibli Studio Films</title> </head> <body> <h1>Ghibli Studio Films</h1> <table> <tr> <td> <img src="ghibli.png"> </td> <td> <h2>Spirited Away</h2> <img src="spiritedaway.jpg"> </td> <td> <h2>My Neighbor Totoro</h2> <img src="totoro.jpg"> </td> </tr>

Uploaded by

Jed Clio Lendio
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Lesson 1: INTRODUCTION TO HTML

Lesson Objectives:
At the end of the lesson, students will be able to:
a) Understand the basic structure of an HTML document
b) Write simple HTML code to create a web page with text and images
c) Use basic HTML tags to format text and create links

What is HTML?
 HTML stands for Hypertext Markup Language.
 It is a markup language used to create web pages and is the foundation of the World Wide Web.
 HTML allows developers to structure content, add multimedia elements, and create links
between pages.

Three (3) Principal MarkUp Components:


1. ELEMENTS
2. ATTRIBUTES
3. VALUES

HTML Tags
HTML tags are the building blocks of a web page. They are used to define the structure and content of a
page, and they can be used to add formatting and other features to the page. HTML tags are enclosed in
angle brackets (<>) and usually come in pairs, with a start tag and an end tag. The start tag begins with
the name of the tag and any attributes, and the end tag begins with a slash (/) followed by the tag name.

Here are some examples of HTML tags and their purposes:


<html> - Defines the beginning and end of an HTML document.
<head> - Contains information about the document such as the title and links to stylesheets.
<title> - Defines the title of the document that appears in the browser's title bar.
<body> - Contains the main content of the document.
<h1>, <h2>, <h3>, -----<H6> - Used for headings of different levels.
<p> - Used to define a paragraph.
<img> - Used to insert an image into the document.
<a> - Used to create hyperlinks to other pages or websites.
<ul> and <li> - Used to create unordered lists (bulleted lists).
<ol> and <li> - Used to create ordered lists (numbered lists).
<div> - Used to group together content and apply styles to it.

HTML ATTRIBUTES:
HTML attributes are used to provide additional information about an HTML element. Attributes are
included in the start tag and are specified as name-value pairs. Here are some examples of HTML
attributes:
• src - Specifies the source URL of an image or other media element.
• href - Specifies the URL of a hyperlink.
• alt - Specifies alternative text for an image.
• style - Specifies inline styles for an element.
• class - Specifies one or more CSS classes to apply to an element.
• id - Specifies a unique identifier for an element.

BASIC STRUCTURE OF HTML:


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>
Lesson 2: TEXT & BACKGROUND FORMATTING
Lesson Objectives:
At the end of the lesson, students will be able to:
a) Understand Elements, Attributes, and Values
b) Apply attributes to HTML elements.

ELEMENT is everything between the start and the end tag, including the tags.
TAGS are basic units of building blocks of an HTML file.
- They control how HTML does its structuring, layout and formatting
ATTRIBUTES - Used to provide additional information about a tag
EMPTY ELEMENTS are HTML elements/tags with no content
Example:
<br>
<hr>
<img>

BODY TAGS <body></body>


Everything that appears on your Web page – text, images, videos and others.

ATTRIBUTES FOR <body></body>

FONT <font></font>

FONT <font></font> Attribute


Lesson 3: WORKING WITH TABLE
Lesson Objectives:
At the end of the lesson, students will be able to:
a) Understand what table is and how to create and modify it
b) Identify the different attributes of tables, rows and data
c) Learn to merge cells and nest tables
d) Know how to add images to a table
e) Build a table with invisible border

Working with Table

 A table is made up of rows and columns.


 Allows you to organize and arrange data into columns and rows. I also allow you to divide your
page into section where you can place headers, footers and navigation links

Creating a Table <Table></Table>

<tr></tr> - table rows


<td></td> - table data
<th></th> - table header

Sample Table:
<!DOCTYPE html>
<html>
<head><title>My table</title></head>
<body>
<h1 align=“center”>IT LEARNING</h1>
<table border=“1” bordercolor=“#ff0000”>
<tr bgcolor=“#ff0000”>
</tr>
<tr>
<th align=“center” width=“200px”>BOOKS</th>
<th align=“center” width=“200px”>SOFTWARE</th>
<th align=“center” width=“200px”>HARDWARE</th>\
</tr>
<tr>
<td align=“center”> Creative Design</td>
<td align=“center”> Adobe</td>
<td align=“center”> Asus Notebook</td>
</tr>
<tr>
<td align=“center”> Office Productivity</td>
<td align=“center”>Microsoft</td>
<td align=“center”> InFocus Projector</td>
</tr>
</table></body></html>

<Table></Table> Attributes
Name: _______________________________________________ Section: __________________

EXERCISE #4:
Examine and analyze the webpage below, write down the possible HTML tags inside the box. Use the
sample code as your guide.
Some Details:
Picture #1: Ghibli Studio Logo – D:\ghibli.png
Picture #2: Spirited Away – D:\spiritedaway.jpg
Picture #3: My Neighbor Totoro – D:\totoro.jpg

Write your Code here (Use the back of this paper to continue):

You might also like