Scribd
Upload
23 views

Lesson 1.2

This document discusses HTML basic and formatting tags. It aims to teach the reader how to identify and use basic tags like headings, paragraphs, line breaks, and horizontal rules. It also covers formatting tags for bold, italics, superscript, subscript and other styling. The lesson explains each tag and provides syntax examples. The assignment is to practice using these tags to make a first web page, with submissions due on Saturday.

Uploaded by

ANIMATION
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
23 views

Lesson 1.2

This document discusses HTML basic and formatting tags. It aims to teach the reader how to identify and use basic tags like headings, paragraphs, line breaks, and horizontal rules. It also covers formatting tags for bold, italics, superscript, subscript and other styling. The lesson explains each tag and provides syntax examples. The assignment is to practice using these tags to make a first web page, with submissions due on Saturday.

Uploaded by

ANIMATION
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

Using HTML Basic Tags

Using HTML Formatting Tags


PREPARED BY: MS. JOSERIE M. MIRABELES
At the end of the lesson, we should be able to:
• Identify and use the HTML basic tags
• Create an HTML document using HTML basic
tags
• Identify the HTML formatting tags.
• Use the HTML formatting tags.
HTML Basic Tags
1. Heading Tag
 There are six (6) levels of heading in HTML.
 Defined with the <h1> to <h6> tags.
 Browsers automatically add one (1) line before and
after the heading.
Syntax: <h1> Heading </h1>
HTML Basic Tags
2. Paragraph Tag
 The <p> element defines a paragraph.
 Browsers automatically add one (1) line after the
paragraph.
Syntax: <p> Paragraph </p>
HTML Basic Tags
 We cannot change the output by adding extra spaces or
extra lines in the HTML code.
HTML Basic Tags
3. Line Break Tag
 The <br> tag defines a line break.
 Produces a new line without starting a new
paragraph.
 This is also an example of an empty element.
Syntax: <br>
HTML Basic Tags
4. Preformatted Tag
 The <pre> tag preserves the formatting of the
spaces and line breaks of text in the HTML
document.
 The text inside this tag is displayed in a fixed-width
font: Courier.
Syntax: <pre> Text </pre>
HTML Basic Tags
5. Horizontal Rule Tag
 The <hr> tag creates a horizontal line to divide the
sections of a web page.
Syntax: <hr>
Non-breaking Space
 To add extra spaces to our text, we use the &nbsp;
character entity.
Syntax: &nbsp;
Character Result Description
Non-breaking Space
Entity Name
&nbsp;
Entity Number
&#160;

Entities <
>
Less than
Greater than
&lt;
&gt;
&#60;
&#62;
& Ampersand &amp; &#38;
“ Double quotation mark &quot; &#34;
‘ Single quotation mark &apos; &#39;
(apostrophe)
₵ Cent &cent; &#162;
£ Pound &pound; &#163;
¥ Yen &yen; &#165;
€ Euro &euro; &#8364;
© Copyright &copy; &#169;

® Registered trademark &reg; &#174;


Comment Tag
 Used to insert comments in the HTML source code.
 It can be placed anywhere in the document, but will
never be displayed by the browser.
Syntax: <!- - comments - ->
Comment Tag
Comments are useful in the following ways:
 We can write notes and reminders in the HTML
document.
 We can include descriptions to explain what particular
part of the source code is doing.
 We can comment out HTML lines of code to search for
errors.
HTML Formatting Tags
What is Formatting Tag?
• Formatting Tags are used to display special tags of
text with special meanings.
• There are different HTML text formatting tags such
as: Bold, Strong, Italic, Emphasized, Superscript,
Subscript, and Nested Tags.
Bold Tag
• The <b> tag displays a bold text.
Syntax: <b> Text </b>
Strong Tag
• The <strong> tag displays a strong text with added
importance in meaning.
Syntax: <strong> Text </strong>
Italic Tag
• The <i> tag displays an italic text.
Syntax: <i> Text </i>
Emphasized Tag
• The <em> tag displays an emphasized text with
added importance in meaning.
Syntax: <em> Text </em>
Differences..
• Both <b> and <strong> display bold text.
• Both <i> and <em> display italic text.
However,
• <b> and <i> are physical tags that define bold and italic
text.
• <strong> and <em> are logical tags that mean the text is
important.
Superscript Tag
• The <sup> tag displays a superscripted text.
Syntax: <sup> Text </sup>
Subscript Tag
• The <sub> tag displays a subscripted text.
Syntax: <sub> Text </sub>
Other Formatting Tags

Tag Description
<del> It displays as deleted text.
<ins> It displays as inserted text.
<small> It displays text one font size smaller
than the rest of the text.
<mark> It displays marked or highlighted
text.
ASSIGNMENT
IN YOUR VSMART:
Familiarizing HTML Basic and Formatting Tags
Make Your First Web Page

SUBMISSION: UNTIL SATURDAY (SEPTEMBER 26, 2020)


4PM
GOOGLE CLASSROOM (TO BE ANNOUNCED)

You might also like