UNIT 2 HTML 2

Structure

LearningObjectives

Introduction

Mark up Tags

Heading-Paragraphs

Line Breaks HTML Tags

Summary

KeyWords/Abbreviations

LearningActivity

Unit End Questions (MCQ andDescriptive)

References

LEARNINGOBJECTIVES

After studying this unit, you will be able to:

Discuss Markup Tags

Explain Heading-Paragraphs

Explain Line Breaks HTML Tags

INTRODUCTION

To convey information about a document's structure or presentation, markup information is

added to the document. Markup languages are widely used in everyday computing. For
instance, word processors use codes that indicate the structure and presentation of a
document. The word processors write, behind the scenes, the necessary markup to produce a
document that you see on the screen. HTML, however, is not a behind-the-scenes markup
language.HTML stands for Hypertext Markup Language. This markup language is used to

.17
CU IDOL SELF LEARNING MATERIAL (SLM)
create web documents. A web document is viewed in a web browser, like the one you are
using to read this document. Just like in a word processor you can specify the appearance of
text, you can write HTML code to specify how the text or content of a web page should
look. For instance, in a word processor, you could choose to use Times Roman for font type
and make some text bold or italic. Similarly, in HTML code you could specify what type of
font to use or whether it should be bold or not. In the former, you could make the selection
using a mouse; however, for the letter, you would have to write instructions or HTML code.

MARK UP TAGS

A markup tag is a directive that contains snippet of code with a relative reference to an
object in your store such as a variable, URL, image, or block. Markup tags can be used
anywhere the editor is available and incorporated into the HTML
of email and newsletter templates, as well as other types of content. Markup tags are
enclosed in double, curly braces, and can either be generated by the Widget tool, or typed
is the fundamental characteristic of HTML.
Every markup tag is a left
bracket (<) and a right bracket (>). Markup tags are not revealed by a web browser; they are
invisible. In most cases, markup tags (containing commands) come in pairs, with text or a
graphic image located between the beginning and ending tags:

<COMMAND>text or graphic image</COMMAND>: controls or regulates the text or

graphic image information between the two non-empty markup tags. Pairs of markup tags
- use something is contained between the beginning
tag and the ending tag. A beginning tag and an ending tag are identical,
are placed before the command of the ending tag to tell the browser that the command has
been completed.Frequently, certain parameters are included within the beginning command
tag, placed before the second bracket:

PARAMETER1="X" PARAMETER2="Y":

Provide supplementary instructions (such as colorization, measurement, location, alignment,

or other appearances) to the data between the markup tags.

Note: Although quotation marks (" ") for supplementary parameters will be included in all
examples in this tutorial, these quotation marks are optional for most browsers and
usually do not need to be included in source code documents. One of the most common
errors in HTML scripting is leaving out one pair of quotation marks ("), causing the marked
up version to appear jumbled or nonsensical. This is one reason why elimination altogether

.18
CU IDOL SELF LEARNING MATERIAL (SLM)
of quotation marks around parameter variables may be the best option. So, a typical pair of
non-empty HTML tags in a source code, with the first tag containing a command along with
a few parameters, would resemble this:

<COMMAND PARAMETER1="X" PARAMETER2="Y"

PARAMETER3="Z">text</COMMAND>

of a single tag
rather than a pair of tags. That is, of a <COMMAND> tag and
lacks an ending </COMMAND> tag. Examples of non-empty and empty tags will be given
in other sections, recommend using UPPERCASE letters for all HTML commands and
associated parameters, because it is easier to distinguish them from regular text whenever
one creates or proofreads an HTML source code document. As told earlier, HTML is a
markup language and makes use of various tags to format the content. These tags are
enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their
corresponding closing tags. For example, <html> has its closing tag </html> and <body> tag
has its closing tag </body> tag etc.

Above example of HTML document uses the following tags

Table 2.1 Mark up Tags

Sr.No Tag & Description

1 <!DOCTYPE...>

This tag defines the document type and HTML version.

2 <html>

This tag encloses the complete HTML document and mainly comprises of
document header which is represented by <head>...</head> and document
body which is represented by <body>...</body> tags.

3 <head>

This tag represents the document's header which can keep other HTML tags
like <title>, <link> etc.

.19
CU IDOL SELF LEARNING MATERIAL (SLM)
 4 <title>

The <title> tag is used inside the <head> tag to mention the document title.

5 <body>

This tag represents the document's body which keeps other HTML tags like
<h1>, <div>, <p> etc.

6 <h1>

This tag represents the heading.

7 <p>

This tag represents a paragraph.

To learn HTML, you will need to study various tags and understand how they behave, while
formatting a textual document. Learning HTML is simple as users have to learn the usage of
different tags in order to format the text or images to make a beautiful webpage.World Wide
Web Consortium (W3C) recommends to use lowercase tags starting from HTML 4.

HTML Document Structure

<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tag is used by the web browser to understand the version of
the HTML used in the document. Current version of HTML is 5 and it makes use of the

<!DOCTYPE html>

.20
CU IDOL SELF LEARNING MATERIAL (SLM)
There are many other declaration types which can be used in HTML document depending on
what version of HTML is being used.

HEADING-PARAGRAPHS

HTML Headings-

Any document starts with a heading. You can use different sizes for yourheadings. HTML
also has six levels of headings, which use the elements <h1>,<h2>, <h3>, <h4>, <h5>, and
<h6>. While displaying any heading, browser addsone line before and one line after that
heading. The lower the number, the larger theheading size, as shown

Example

Type the HTML code in your Notepad window as shown in the figurebelow.

Fig 2.1 HTML code in Notepad window

The output is shown as per the following figure.

.21
CU IDOL SELF LEARNING MATERIAL (SLM)
 Fig 2.2 output of code

Fig.2.3 Heading

Use the headings to set titles and subheadings. Mark with h1 the primary title on the page.
It's recommended to have only one h1 on the page that is similar to the <title> head tag to
show Google and other search engines what the page is about.

.22
CU IDOL SELF LEARNING MATERIAL (SLM)
<h1>An example heading</h1>

There are 6 different heading sizes, the one marked with 1 being the most important in
hierarchy.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

To change the different heading sizes all you need to do is change h2 to whatever like h5.
Headings go from largest (h1) to smallest (h6). Also headings are good to use when you
want to make something big like a title of your web page. Another thing that you can do
with headings is something that we haven't done before. You can make the text centered or
to the right side of the screen.

<h3style="text-align: center;">Check this out! </h3>

Example-

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

.23
CU IDOL SELF LEARNING MATERIAL (SLM)
Paragraphs-

There is also another tag that you can use to make line breaks. It is called the paragraph tag.

<p>Check</p>

<p>this</p>

<p>out! </p>

The p tag makes a bigger line break than the br tag. The paragraph tag is normally used
when you are writing paragraphs. At the beginning of the paragraph you would begin the p
tag and at the end you would end it. That way it would make a line break at the beginning
and end of your paragraph.

There is one more use for the p tags. You can use them to align things just like the heading
tags.

<pstyle="text-align: left;">Check</p>

<pstyle="text-align: center;">this</p>

<pstyle="text-align: right;">out!</p>

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML documents are divided into paragraphs. Paragraphs are defined with the tag. Each
paragraph of text should go in between an opening and a closing tag as shown below in the
example:

Type the HTML code in your Notepad window as shown in the figure bellow.

.24
CU IDOL SELF LEARNING MATERIAL (SLM)
 Fig 2.4 Paragraph notepad

The output is shown as per the following figure.

Fig 2.5 Output of example

LINE BREAKS HTML TAGS

.25
CU IDOL SELF LEARNING MATERIAL (SLM)
When you are making a web page you just might want to make the browser go to a new line.
If you have tried that you might see that just pressing enter doesn't work. You have to insert
a tag to do that for you.

Check <br />

this <br /> out!

As you can see the br tag is one of the few tags that you don't need to close. Also if you need
to you can use more than one br tag at once to have a bigger space.

Example-

<p>This is<br>a paragraph<br>with line breaks.</p>

Use the tag, if you want a line break (a new line) without starting a new paragraph. The
element is an empty HTML element. It has no end tag. The tag has a space between the
characters br and the forward slash. If you omit this space, older browsers will have trouble
rendering the line break, while if you miss the forward slash character and just use it is not
valid in XHTML.Type the HTML code in your Notepad window

Fig 2.6 HTML code in Notepad

The output is shown as per the following on the web browser

.26
CU IDOL SELF LEARNING MATERIAL (SLM)
 Fig 2.7 output as per the following on the web browser

SUMMARY

HTML has six levels of headings, starting with '1' for the most significant and working
down to '6'. The associated text is highlighted by the Browser to stand out against the
normal body text. The syntax of the heading element is<Hn>Heading Text</Hn>

is the fundamental characteristic of HTML. Every markup tag is a

a left bracket (<) and a right
bracket (>). Markup tags are not revealed by a web browser; they are invisible.

Some HTML tags are referred to they consist only of a single

tag rather than a pair of tags. That is, only of a
<COMMAND> tag and lacks an ending </COMMAND> tag.

- is
contained between the beginning tag and the ending tag. A beginning tag and an
is placed before the command of the
ending tag to tell the browser that the command has been completed.

HTML defines six levels of headings. A heading element implies all the font changes,
paragraph breaks before and after, and any white space necessary to render the heading.
The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or
most important) level and H6 the least.

Headers play a related role to lists in structuring documents, and it is common to

number headers or to include a graphic that acts like a bullet in lists. HTML 3.0

.27
CU IDOL SELF LEARNING MATERIAL (SLM)
 recognizes this with attributes that assist with numbering headers and allow authors to
specify a custom graphic.

Paragraph elements are marked using the <p> tag. Whenever the browser encounters a
<p> tag, it starts the contents marked by it on a new line. Note that if you start a
sentence on a new line within the <p> tag, or if you indent sentences using spaces, the
browser will simply ignore all of this white-space.

When you use a paragraph tag, the browser will automatically show its contents on a
new line. What if you want to start something that is within your paragraph on a new
line? You can use the line break tag <br/> for that

KEY WORDS/ABBREVIATIONS

UL:A list of multi-line paragraphs, typically separated by some white space and/or
marked by bullets, etc.
Menu:A list of smaller paragraphs. Typically one line per item, with a style more
compact than UL.
Dir:A list of short elements, typically less than 20 characters. These may be arranged
in columns across the page, typically 24 character in width. If the rendering software
is able to optimize the column width as function of the widths of individual elements,
so much the better.
Tags & Elements: Tags are basic labels that define and separate parts of your
markup into elements. They are comprised of a keyword surrounded by angle
brackets <>. Content goes between two tags and the closing one is prefixed with a
slash (Note: there are some self-closing HTML tags, like image tags). Tags also have
attributes, which are
Usage- The basic tag that defines an html document.

LEARNINGACTIVITY

1. Create an HTML for paragraph.

2. Create a page to show different attributes: italics, bold, underline.

.28
CU IDOL SELF LEARNING MATERIAL (SLM)
UNIT END QUESTIONS (MCQ ANDDESCRIPTIVE)

A. Descriptive Types Questions

1. Explain the different basic tags used in HTML?
2. What is the extension of an HTML Document?
3. Write and illustrate what is the extension of an HTML Document?
4. Write the different heading tags used in HTML?
5. Write an HTML code to design a page containing text, in form of paragraphs giving
suitable heading style.

B. Multiple Choice Questions

1. HTML stands for?

(a) Hyper Text Markup Language

(b)High Text Markup Language

(c)Hyper Tabular Markup Language

(d)None of these

2. Which of the following tag is used to mark a beginning of paragraph?

(a)-<TD>

(b)-<br>

(c)-<P>

(d)-<TR>

3. From which tag descriptive list starts?

(a)<LL>

(b) <DD>

.29
CU IDOL SELF LEARNING MATERIAL (SLM)
(c) <DL>

(d)<DS>

4. Correct HTML tag for the largest heading is

(a)-<head>

(b)-<h6>

(c)-<heading>

(d)-<h1>

5. The attribute of <form> tag

(a)Method

(b)Action

(c)Both (a)&(b)

(d)None of these

Answers

1. (a), 2. (c), 3. (c), 4. (d), 5. (c)

REFERENCES

Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web
Graphics Jennifer Robbins 2018

Web Design with HTML, CSS, JavaScript and jQuery SetJon Duckett2014

HTML and CSSDesign and Build WebsitesJon Duckett2011

https://egyanagar.osou.ac.in/slm-hyper-text-markup-language-html.html

egyankosh.ac.in/bitstream/123456789/11763/1/Unit-2.pdf

.30
CU IDOL SELF LEARNING MATERIAL (SLM)
https://www.w3schools.com/html/html_intro.asp

https://html-css-js.com/html/tutorial/heading-paragraph-comment-list.php

Main Content Detection in HTML Journal Articles Alastair R. Rae

Introduction to HTML (Hyper Text Markup Language) - A Review Paper May 2018

Research Articles in Simplified HTML: a Web-first format for HTML-based scholarly

articlesabio Vitali, Enrico Motta

.31
CU IDOL SELF LEARNING MATERIAL (SLM)