CONTENT STANDARD: The learner becomes familiar with the different kinds of inline-level elements and differentiates

its functions with block-level elements.

PERFORMANCE STANDARD: The learner applies inline-level elements to an HTML template.
GRADE TEN LEARNING CONTINUITY PLAN
FOCUS FOR LEARNING: MODULE 1 HTML TEXT FORMATTING ELEMENTS

VOCABULARY: 1. Text Formatting Elements 2. Inline Elements

COMPETENCIES DAY 1-2
Students are expected to:
recognize the HTML TEXT FORMATTING ELEMENTS
inline-level Inline Elements
elements and Alternatively referred to as in-line, inline is any element contained within a program,
the different document, or message. For example, with HTML, inline code is anything that is built into the
HTML text web page, instead of being loaded from an external file. The majority of content seen on this
formatting page is inline, but the images and CSS files are external.
tags.

VALUE COMPETENT
FOCUS COMMITTED

Examples of Inline-Level Elements

Element Description
<a> - Create an anchor.
<abbr> - Create an acronym or abbreviation.
<acronym> - Create an acronym.
<audio> - Embed sound files.
<b> - Bold text.
<bdi> - Confine text that may be formatted differently.
<bdo> - Force text to go one way or another.
<big> - Make text bigger.
<blink> - Make text blink.
<br> - Create a line break.
<button> - Create a form button.
<cite> - Mention any creative work.
<code> - Designate text as code.
<del> text. - Delete or strikethrough
<dfn> - Represent the defining instance of a term.
<em> - Give emphasis to text.
<font> - Change the font.
<i> - Italicizes text.
<img> - Show an image file.
<input> - Create an input box on a form.
<ins> - Insert text.
<kbd> - Indicate text was inserted using a keyboard.
<mark> - Highlight text.
<output> - Show result of a user's action or a calculation.
<progress> - Display the progress of a task.
<q> - Designate text as a short quotation.
<rp> - Designate parenthesis for browsers without Ruby annotations.
<rt> - Designate the pronunciation of an East Asian word.

Academy of Saint Andrew – Caloocan Inc. | LEARNING CONTINUITY PLAN - MODULE 1

 <ruby> - Designate a ruby annotation on a web page.
<samp> - Designate sample output from a computer
<select> - Drop-down menu for form field
<small> - Make text smaller.
<span> - Container for grouping or phrasing content.
<strike> - Strikethrough text.
<strong> - Mark text with a strong importance.
<sub> - Create subscript text.
<sup> - Make text superscript.
<strong> - Give strong importance to text.
<textarea> - Create text area for form.
<time> - Designate a date and time that are readable by humans.
<u> - Underline text.
<var> - Define text as a variable.
<video> - Show a video file.

HTML TEXT FORMATTING TAGS

HTML contains several elements for defining text with a special meaning. Formatting
elements were designed to display special types of text:
Element Description
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.
Example: <b>This text is bold</b>

The HTML <strong> element defines text with strong importance. The content inside is
typically displayed in bold.
Example: <strong>This text is important!</strong>

HTML <i> and <em> Elements

The HTML <i> element defines a part of the text in an alternate voice or mood. The content
inside is typically displayed in italic.
Tip: The <i> tag is often used to indicate a technical term, a phrase from another language,
a thought, a ship name, etc.
Example: <i>This text is italic</i>

The HTML <em> element defines emphasized text. The content inside is typically displayed
in italic.
Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal
stress.
Example: <em>This text is emphasized</em>

HTML <small> Element

The HTML <small> element defines smaller text:
Example: <small>This is some smaller text.</small>

HTML <mark> Element

The HTML <mark> element defines the text that should be marked or highlighted:
Example: <p>Do not forget to buy <mark> milk </mark> today.</p>

Academy of Saint Andrew – Caloocan Inc. | LEARNING CONTINUITY PLAN - MODULE 2

 HTML <sub> Element
The HTML <sub> element defines subscript text. Subscript text appears half a character
below the normal line and is sometimes rendered in a smaller font. Subscript text can be
used for chemical formulas, like H2O:
Example: <p>This is _subscripted text.</p>

HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears half a character
above the normal line and is sometimes rendered in a smaller font. Superscript text can be
used for footnotes, like WWW[1]:
Example: <p>This is ^{superscripted} text.</p>

Difference between <strong> and <b> tag

Both <strong> and <b> tags render the enclosed text in a bold typeface by default, but the
<strong> tag indicates that its contents have strong importance, whereas the <b> tag is
simply used to draw the reader's attention without conveying any special importance.

Difference between <em> and <i> tag

Similarly, both <em> and <i> tags render the enclosed text in italic type by default, but the
<em> tag indicates that its contents have stressed emphasis compared to surrounding text,
whereas the <i> tag is used for marking up text that is set off from the normal text for
readability reasons, such as a technical term, an idiomatic phrase from another language, a
thought, etc.
ASSESSMENT/ ACTIVITIES
Test Your Knowledge
Answer the following questions.
1. When to italicize a text/ message and when to marks a text as bold?
____________________________________________________________________________________________
________________________________________________________________________
2. When to use the <i> tag?
____________________________________________________________________________________________
________________________________________________________________________
3. When to use the <em> tag?
____________________________________________________________________________________________
________________________________________________________________________
4. When to use the <b> tag?
____________________________________________________________________________________________
________________________________________________________________________
5. When to use the <strong> tag?
____________________________________________________________________________________________
________________________________________________________________________
TRANSFER OF LEARNING:
Hands-On Exercises
Modify your previous with ASAC Vision and Mission HTML document. This time, apply the inline elements we met in our
discussion related to HTML Text Formatting Tags such as <i> , <em>,<b>, and <strong> tag.

Highest Possible Score: 20 points

Rubrics
5 points 4 points 3 points 2 points 1 point
Concept, Idea, Excellent Average Good Limited Poor
and Shows well thought out Shows some grasp of the Shows a good grasp of the Lacks a general grasp of Lacks any grasp what so
Visualization the concept with a high concept with some concept with some originality the concept. Many of the ever of the concept.
degree of originality and originality and and sophistication. elements and cues do Elements and cues do not
sophistication. sophistication. not lead the viewer to the lead the viewer to the
intended idea. intended idea.
Composition, Shows strong internal Shows the internal Shows obvious weaknesses The image is breaking Visual integrity is
Design & integrity of the activity. integrity of the activity. A in the internal integrity of the apart - there is very little nonexistent and the
Program Nothing needs to be visual element needs to activity. Many visual elements internal integrity of the image is broken apart. All
Mastery added or removed. be added, moved, or need to be added, moved, or activity. Output needs of the visual needs to be
removed. removed. major readjustment. rethought.
Creativity The learner The learner The learner demonstrates The learner The learner shows little
demonstrates superior demonstrates the good use of creativity and demonstrates some use evidence of creativity or
creativity and originality. average use of creativity originality. of creativity and originality.
and originality. originality.

Academy of Saint Andrew – Caloocan Inc. | LEARNING CONTINUITY PLAN - MODULE 3

 Punctuality The learner submitted The learner submitted The learner submitted his/her The learner submitted The learner submitted
his/her artwork before the his/her artwork on time. artwork a day late. his/her artwork two days his/her artwork three-day
stated date of (without valid reasons stated late. slate or more.
submission. on the handbook) (without valid reasons (without valid reasons
stated on the handbook) stated on the handbook)

GRADE TEN LEARNING CONTINUITY PLAN

FOCUS FOR LEARNING: MODULE 2 USE OF HTML TEXT FORMATTING TAGS

COMPETENCIES DAY 1-2

Students are expected to:
effectively use EDITING MARKS
HTML text HTML <del> Element
formatting tags The HTML <del> element defines text that has been deleted from a document. Browsers will
in presenting usually strike a line through deleted text:
contents in an Example: <p>My favorite color is <del>blue</del> red.</p>
HTML
template. HTML <ins> Element
The HTML <ins> element defines a text that has been inserted into a document. Browsers
VALUE COMPETENT will usually underline inserted text:
FOCUS CONFIDENT Example: <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

HTML Computer Code Elements

HTML contains several elements for defining user input and computer code.

HTML <kbd> For Keyboard Input

The HTML <kbd> element is used to define keyboard input. The content inside is displayed
in the browser's default monospace font.
Example: <p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
Result:

HTML <samp> For Program Output

The HTML <samp> element is used to define sample output from a computer program. The
content inside is displayed in the browser's default monospace font.
Example: Result:
<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1
to continue</samp></p>

HTML <code> For Computer Code

The HTML <code> element is used to define a piece of computer code. The content inside
is displayed in the browser's default monospace font.
Example: Result:
<code>
x = 5;
y = 6;
z = x + y;
</code>

HTML <var> For Variables

The HTML <var> element is used to define a variable in programming or a mathematical
expression. The content inside is typically displayed in italic.
Example:
<p>The area of a triangle is: 1/2
x <var>b</var> x <var>h</var>, where <var>b</var> is the base,
and <var>h</var> is the vertical height.</p>
Result:

TAG DESCRIPTION
<code> Defines programming code

Academy of Saint Andrew – Caloocan Inc. | LEARNING CONTINUITY PLAN - MODULE 4

 <kbd> Defines keyboard input
<samp> Defines computer output
<var> Defines a variable
HTML QUOTATION AND CITATION ELEMENTS
HTML <q> for Short Quotations
The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
Example:
<p>WWF's goal is to: <q>Build a future where people live in harmony
with nature.</q></p>

HTML <abbr> for Abbreviations

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.",
"Dr.", "ASAP", "ATM".
Marking abbreviations can give useful information to browsers, translation systems, and
search-engines.
Tip: Use the global title attribute to show the description for the abbreviation/acronym when
you mouse over the element.

Example:
<p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>

HTML <address> for Contact Information

The HTML <address> tag defines the contact information for the author/owner of a
document or an article.
The contact information can be an email address, URL, physical address, phone number,
social media handle, etc.
The text in the <address> element usually renders in italic, and browsers will always add a
line break before and after the <address> element.

Example:
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

HTML <cite> for Work Title

The HTML <cite> tag defines the title of creative work (e.g. a book, a poem, a song, a
movie, a painting, a sculpture, etc.).
Note: A person's name is not the title of a work.
The text in the <cite> element usually renders in italic.
Example:
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.
The HTML <bdo> tag is used to override the current text direction:
Example:
<bdo dir="rtl">This text will be written from right to
left</bdo>

HTML <dfn> Element

The <dfn> tag stands for the "definition element", and it specifies a term that is going to be
defined within the content.

The nearest parent of the <dfn> tag must also contain the definition/explanation for the
Academy of Saint Andrew – Caloocan Inc. | LEARNING CONTINUITY PLAN - MODULE 5
 term.
Example:
<p><dfn>HTML</dfn> is the standard markup language for creating
web pages.</p>

HTML Quotation and Citation Elements

Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<cite> Defines the title of a work
<q> Defines a short inline quotation
<dfn> Stands as the definition element

Other Inline Elements

Tag Description
<a> It defines a hyperlink, which is used to link from one page to another.
<br> This tag inserts a single line break.
<img> This tag is used to embed an image in an HTML page.
<span> The <span> tag is an inline container used to mark up a part of a text, or a
part of a document.
ASSESSMENT/ ACTIVITIES
Test Your Knowledge
Enumerate the following element/tag asked on Empowering ICT Web Page Design book, page 46-47.s

TRANSFER OF LEARNING:
Hands-On Exercises
Create your onw resume on Hands-On Exercises, Empowering ICT Web Page Design book, page 48.
Highest Possible Score: 20 points

RESOURCES AND NOTES

HTML Block and Inline Elements. (2020). W3schools. https://www.w3schools.com/html/html_blocks.asp
HTML Tutorial. (2020). W3schools. https://www.w3schools.com/html/default.asp
Rubrics
5 points 4 points 3 points 2 points 1 point
Concept, Idea, and Excellent Average Good Limited Poor
Visualization Shows well Shows some grasp Shows a good grasp of Lacks a general Lacks any grasp
thought out the of the concept with the concept with some grasp of the what so ever of
concept with a some originality and originality and concept. Many of the concept.
high degree of sophistication. sophistication. the elements and Elements and
originality and cues do not lead cues do not lead
sophistication. the viewer to the the viewer to the
intended idea. intended idea.
Composition, Shows strong Shows the internal Shows obvious The image is Visual integrity is
Design & Program internal integrity of integrity of the weaknesses in the breaking apart - nonexistent and
Mastery the activity. activity. A visual internal integrity of the there is very little the image is
Nothing needs to element needs to activity. Many visual internal integrity of broken apart. All
be added or be added, moved, elements need to be the activity. Output of the visual
removed. or removed. added, moved, or needs major needs to be
removed. readjustment. rethought.
Creativity The learner The learner The learner The learner The learner
demonstrates demonstrates the demonstrates good use demonstrates shows little
superior creativity average use of of creativity and some use of evidence of
and originality. creativity and originality. creativity and creativity or
originality. originality. originality.
Punctuality The learner The learner The learner submitted The learner The learner
submitted his/her submitted his/her his/her artwork a day submitted his/her submitted his/her
artwork before the artwork on time. late. artwork two days artwork three-day
stated date of (without valid reasons late. slate or more.
submission. stated on the (without valid (without valid
handbook) reasons stated on reasons stated on
the handbook) the handbook)

Academy of Saint Andrew – Caloocan Inc. | LEARNING CONTINUITY PLAN - MODULE 6