Scribd
Upload
96 views15 pages

Web Designing Using HTML Unit 2

Unit 1 covers the fundamentals of HTML and its various tags, including headings, links, images, and lists. It aims to equip students with the skills to develop and design webpages using HTML, emphasizing the user-friendly environment and basic structure of HTML documents. Key topics include the types of HTML tags, their attributes, and practical examples of creating HTML webpages.

Uploaded by

Bala Anand
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
96 views15 pages

Web Designing Using HTML Unit 2

Unit 1 covers the fundamentals of HTML and its various tags, including headings, links, images, and lists. It aims to equip students with the skills to develop and design webpages using HTML, emphasizing the user-friendly environment and basic structure of HTML documents. Key topics include the types of HTML tags, their attributes, and practical examples of creating HTML webpages.

Uploaded by

Bala Anand
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Unit 1: HTML Tags 1

Unit Structure

1.1. Learning Objectives.


1.2. Introduction to HTML and HTML Tags.
1.3. Heading Tag.
1.4. Linking Tags.
1.5. Images Tags.
1.6. Special Characters and Horizontal Rules Tags.
Block-2 1.7. Lists.
1.8. Meta Elements.
Developing Web Pages Using 1.9. Let us sum up.
1.10. Check your Progress

HTML 1.11. Check your Progress: Possible Answers.


1.12. Further Reading.
1.13. Assignment.
1.14. Activities.

93 94
1.1 LEARNING OBJECTIVE o The main advantage of using HTML is that it can embed the Scripts such as
JavaScript in form of programs which influence the behavior and content of
Webpages and even embeds Cascading Style Sheet (CSS) that describe the
look and layout of content on Webpage.
The Block 2 - Unit 1 aims to develop skills of developing Webpages using Hyper
Text Markup Language (HTML). After studying this Unit student should be able to: o Along with developing and designing Webpages, it is even used for

• Understand the basic concept of HTML. Intranet, Internet as well as extranet Applications, Help Files, Network

• Able to work in HTML Environment. Applications and other specific domains.

• Design a Webpage of Websites using various tags like: HTML, giving • Working in HTML Environment
Heading, introducing Link, setting Internal Links, inserting Images, using
The working Environment of HTML is user friendly and is operationally feasible
Special Characters and Horizontal Rules, preparing List and using Meta
as it does not require very many special, specific, specialization skills. The
Elements.
Technical requirements of HTML requirement are even feasible and it can be
implemented on every kind of Computer System.

1.2 INTRODUCTION TO HTML AND HTML TAGS


o HTML Environment: The Environment or Tools required for working in
HTML are:
Hypertext Markup Language (HTML) is the standard markup language mainly used
 HTML Editor: It is required to create and save HTML document. It can
for developing Webpages of a Website that can even be called as a Web
be classified in two categories – Text Based HTML editor (Ex:
Application.The Web Application is viewed in Web Browser that receives the
Notepad, WordPad, Edit plus) and What You See Is What You Get
Webpages designed in either from the local Computer System Storage or a Web
(WYSIWYG) based Text editor. The Text based Editors are most
Server and transforms it to multimedia Webpages.
commonly used. The HTML webpage that is developed in notepad is
• Facts to Ponder: saved with .html or .htm as file extension.

o The World Wide Web Consortium (W3C) describes specifications, hence  Web Browser: Web Browser is software which is used to view
influencing the functionalities of HTML. The W3C has defined HTML as an documents websites that are developed in HTML and Web
application of the Standard Generalized Markup Language (SGML). The W3C Development languages. The role of Web Browsers is not to display
maintains both the HTML as well as Cascading Style Sheet (CSS) standards the HTML tags, but use them to understand the content of the
and has increased the use of CSS in additional to HTML. Webpage in a Website. Some commonly used Web Browsers used to

o Most recent version of specification for the HTML is 5.0. view HTML Documents are Google Chrome, Microsoft Internet
Explorer, Netscape Navigator, Mozilla Firefox, Opera and others.
o HTML develops the structure of a Webpage semantically and in the beginning
included views for the appearance of the document in a Web Browser.
o HTML Tags

95 96
 HTML Tags also called as HTML Element is used to indicate the </HEAD>
structure and format of a Web Document. <BODY>
 HTML Webpages are developed and designed using HTML Elements.
<TAG_1>...........</TAG_1>
 The language provides a means to develop and Design structured
documents by having HTML Elements for Text like headings, <TAG_2>...........</TAG_2>
paragraphs, lists, links, quotes and other forms. ...
 Tags in HTML consist of Alphanumeric Tags, which are located within
...
opening and closing angular brackets (<>). Example: <TAG>
 The Alphanumeric Tags are not case sensitive that means the tag <html> and <TAG_N>...........</TAG_N>

<HTML> has the same meaning. </BODY>


 Spaces are not allowed between the angle brackets and the Tag text. </HTML>
 The HTML Tags are of two types:
The meaning of each tag is elaborated in the Table 1.
 Container Tag:HTML tags come in pairs with an opening tag (for
example : <TAG_NAME>) and closing tag (for example : </ Table 1: Basic HTML Tags
TAG_NAME >), these tags are known as Container Tag. Basic HTML Tags Description
 Empty Tags: Some tags (for example : <img>) that do not require HTML document starts with <HTML> opening tag
<HTML>...........</HTML>
closing tag, is known as Empty tag. and ends with </HTML> tag. Rest all Tags are
 Every Tag has some properties that are known as attributes that are written embedded within it.
within the opening tag specifying its value. The syntax is as follows :
<HEAD>...........</HEAD> It contains opening and closing
 <TAG ATTRIBUTE = “value “> // Opening Tag
<TITLE>...........</TITLE> Tags, sometimes other
 .....
Scripts and styles even.
 Content
 ..... <TITLE>...........</TITLE> The opening and closing <TITLE>...........</TITLE>
 </TAG> // Closing Tag Tags defines the title displayed on the Title Bar of
the Web Browser Tab.
o Structure of HTML Document The entire visible part of the HTML document is
<BODY>...........</BODY>
The basic Skeleton Structure of HTML Document is as displayed below: between <BODY>...........</BODY>. All the
elements like text, audio, video that is displayed
<HTML>
on Web Browser are defined within
<HEAD>
<BODY>...........</BODY> Section.
<TITLE>

</TITLE>

97 98
<TAG_1>...........</T AG_1>  Step3: Click on Save option in File menu and in the Save As dialog
These are the various Tags to display text, audio,
& box give the File Name with .htm or .html extension. The file will be
video and other styling in the HTML Document.
<TAG_N>...........</T AG_N> saved as HTML Document.
These are detailed further in this Chapter.

 Steps to create an HTML Webpage


Example 1: Creating a HTML Webpage.
Solution:
 Step 1: Open any text Editor (EX : NOTEPAD) as displayed in the
Figure 1.

Figure 3: Interface

Figure 1: Notepad Interface


 Step4: Open the File in the Web Browser to view the output as
displayed in Figure 4.
 Step2: Write the HTML code for your Webpage & displayed in Figure
2.

Figure 4: HTML Document view in Web Browser

o Basic useful HTML Tags

There are various basic of Tag that supports and fulfils the Text, Paragraph,
Page formatting as well as additional requirements of HTML Document. Some
Figure 2: HTML Code
such Tags are as detailed in the Table 2.
Table 2: Some Basic HTML Tags
Tag Description Type Attribute Use
<P>... Defines a Contai ALIGN <P
</P> paragraph ner VALUE=left/right align=“left”>Left
Tag /center/justify Align
paragraph</P>
<P

99 100
align=“center”>Cen message to
ter Align Paragraph someone
</P> looking at the
source code.
Output:
Left Align Note for Practical: All the Sample code given in Examples must be typed in
paragraph notepad with entire HTML Structure saved with .html or .htm extension and
Center Align finally open in web browser to get the output.
Paragraph
<BR> It starts a new Empty NIL <P>This <BR> is a 1.3 HEADING TAG
line where Tag para<BR> graph
paragraph is not with line
Explanation: The Heading Tag provides heading or the titles in the HTML document
required. It breaks</P>
to show the proper document structure in the Web Browser.
forces a line Output:
Purpose: Specifies Heading/Sub-Headings/Titles/Sub-Titles in the HTML Document.
break wherever This
Type: Container Tag.
and is similar to is a para
Syntax:
single spacing graph with line
• HTML has six levels of headings, presented as <H1>, <H2>, <H3>, <H4>,
in a document. breaks
<H5>, AND <H6>.
<!--> Inserts a Empty NIL <P> The html
• The <H1> Tag defines the main/most important Heading, while <H6> Tag
comment in Tag comment would
defines the Lowest Sub-Heading/least important Heading.
the HTML <!—This is a
• Example: <H1> Main Heading </H1>
source code comment -->be
Attribute: Align = Specifies the alignment of Heading. Values = left (default), right,
anywhere in displayed like this
center and justify. Example: align=“center”.
the document in Web
and the Browser.</P>
Example 2: HTML Program is demonstrating types of Heading Tag.
browser will Output:
Solution:
ignore This html comment
<HEAD>
everything would be
<TITLE>Heading Example</TITLE>
inside the displayed like this
</HEAD>
brackets. in Web Browser.
<BODY>
Used to self
<H1>This is heading 1</H1>
notes or a
<H2>This is heading 2</H2>
helpful

101 102
Output

<H3>This is heading 3</H3> Purpose: Allows linking in HTML document and can be used for navigation
<H4>This is heading 4</H4> between many different Web Pages of a Website containing.
<H5>This is heading 5</H5> Type: Container Tag.
<H6>This is heading 6</H6> Syntax:Hyperlink can be generated by putting text between opening closing
</BODY> Anchor tag. <A> and </A> tag.
Attributes:
o HREF: Defines the link address that signifies the path of the
Hyperlinked HTML Document. The value in it must be source file
1.4 LINKING TAG
completed address or name with extension (if file exist in the same
folder where the Linked Document is located). Example :
The Linking Tag is used to provide the Links or the connectivity in a HTML  Text Link : < A HREF=“baouregistration.html”> Registration </A>
Document. The link can be categorized as:  Image Link : <A HREF=“http://www.baou.edu.in/”><IMG
• External Link: Between different Web Pages of a Website. SRC=“logo.gif”></A>
• Internal Link: within a single Web Page itself.  Email Link : < A HREF=“mailto:[email protected]?subject=Email
Both the types are explained in details below. Assistance”> Email Help Desk </A>

• External Link o TARGET: Defines where to open the linked document. Example :
Explanation: < A HREF=“baouregistration.html” TARGET=“blank”> Registration
o The Link Tag Links Document, Image and even email. </A>
o It puts a Hyperlink in a Web Page and such Links can be categorized
as: Text Link (Link among different Web Pages of a Website or other Example 3: HTML programs to demonstrate Text Link.
linked websites using a text), Image Link Tags ( Image is Linked to a Solution:
another Webpage), and can be a specific Email Link.
<HEAD>
o Link can be applied to a Text or the Images. The linked text is called as
<TITLE>HTML Text Link<TITLE>
Hypertext/Hotword and the portion of linked image is called as Hotspot.
o When a cursor is moved over Hypertext or Hotspot its shape changes </HEAD>
from standard arrow cursor into hand shaped mouse cursor <BODY>
representing it as a Linked Text/Image. Once it is clicked the
<P>This is a link to <A HREF
respective linked document or locating is reached.
=“http://www.google.com”>GOOGLE.com</A></P>
o In the Web Browser the standard format for Hypertext is blue
underlined text in a HTML Document. Once the link is visited the color </BODY>

of Hypertext/Hotspot may change.

103 104
<HEAD>
Output
<TITLE>HTML Email Link</TITLE>
</HEAD>
<BODY>
Click on below link to send us your comments. <BR>
Example 4: HTML programs to demonstrate Image Link. <A HREF=“mailto:[email protected]?subject:comments about
Solution:
your site”>Email Me</A>
<HEAD> </BODY>

<TITLE>HTML Image Link<TITLE>

</HEAD>

<BODY>
Output
<P>Click on below picture to visit my homepage :<BR><BR><A HREF=
“http://www.baou.edu.in/home”><IMG
SRC=“baou_logo_n.png”></A>with link border : <BR><BR></P>
<P>Click on below Image to visit the homepage:<BR><BR><A HREF=
“http://www.baou.edu.in/home”><IMG
SRC=“baou_logo_n.png”></A><BR><BR>without link border :
<BR><BR></P>
</BODY>

Output
Note: Once Email Me is clicked using outlook account an email can be send using
Outlook Express Account.

• Internal Linking Tag


Explanation: In HTML document when a link is set within a single Webpage it is
known as Internal Link. It is used for navigation within a Webpage.
Purpose: Used to set linking within a Webpage for navigation in different section of
a Webpage in a HTML Document.

Example 5: HTML programs to demonstrate Email Link. Type: Container Tag.

Solution: Syntax:

105 106
o The Internal Link/Hyperlink can be established either by providing an absolute <P>This is sub topic.2</P>
path or relative path. <P>This is sub topic.3</P>
<P>This is sub topic.4</P>
o The opening and closing Anchor tag <A> and </A> tag is used for anchor
<P>This is sub topic.5</P>
point name, which is referred to an internal link into a same page.
<P>This is sub topic.6</P>
o Internal link name is followed by hash Symbol (#). Wherever, there is a click <P>This is sub topic.7</P>
on such Anchor link, the referred link automatically scrolls to the desired <P>This is sub topic.8</P>
position in the Webpage. <P>This is sub topic.9</P>
<P>This is sub topic.10</P>
<P>This is sub topic.11</P>
Attributes: <P>This is sub topic.12</P>
o HREF: Defines the Internal link address that signifies the path of the linked <HR>
HTML Document. The value in it must be source file completed address or <A NAME=“topic2”>Introduction of Topic 2</a>
name with extension (if file exist in the same folder where the Linked <P>This is sub topic.1</P>
Document is located). The internal links are should be followed by # symbol. <P>This is sub topic.2</P>
Example: < A HREF=“#SelfLearningContent1”> Self Learning Content 1 </A>.
o NAME: Identifies the element with a unique name. Example:
 < A HREF=“#TOP”>Reach Top of Page</A>
 <A NAME=“TOP”>Reach Top of Page</A>

Example 6: HTML programs to demonstrate Internal Link Tag.


Solution:
<HEAD>
<TITLE>HTML Internal Link Tag </TITLE>
</HEAD>
<BODY>
<A HREF=“#topic1”>Topic 1</A>
<A HREF=“#topic2”>Topic 2</A>
<A HREF=“#topic3”>Topic 3</A>
<HR>
<BR>
<A NAME=“topic1”>Introduction of Topic 1</A>
<P>This is sub topic.1</P>

107 108
Output
<P>This is sub topic.3</P> Purpose: Used to insert image in HTML Document
<P>This is sub topic.4</P> Type: Empty Tag.
<P>This is sub topic.5</P> Syntax: The IMG Tag is used to display Image in the HTML Document. Example :
<P>This is sub topic.6</P> <IMG....... >
<P>This is sub topic.7</P> Attributes:
<P>This is sub topic.8</P> • SRC: Specifies the path of the Image File Source.
<P>This is sub topic.9</P>
• HEIGHT: Specifies the height of the inserted Image. Values is
<P>This is sub topic.10</P>
assigned in pixels or percentages. Example : HEIGHT=200.
<P>This is sub topic.11</P>
<P>This is sub topic.12</P> • WIDTH: Specifies the width of the inserted Image. Values is assigned
<HR> in pixels or percentages. Example : WIDTH=“100”.
<A NAME=“topic3”>Introduction of Topic 3</A>
• ALT: A mandatory attribute that specifies an alternate text for an
<P>This is sub topic.1</P>
image, when the image cannot be displayed. Example: ALT=“BAOU”.
<P>This is sub topic.2</P>
<P>This is sub topic.3</P> • BORDER: Specifies Image border thickness. Values is assigned in
<P>This is sub topic.4</P> pixels, value 0 means Image with no border should be displayed.
<HR> Example: BORDER=0.
</BODY>
• ALIGN: Sets the alignment of the image according to the Webpage
margins. Values = left (default), right, center and justify. Example:
ALIGN= “center”
Note: Whenever Topic 1/Topic2/Topic 3 is clicked the location of the active content
is to its respective marked area. Similarly the navigation can be done to
Top/Bottom/Particular Location within a Webpage.

Example 7: HTML programs to demonstrate Image as Background as well as


1.5 IMAGES TAGS
desired location.
Solution:
Explanation: The Image HTML Tag displays the image/s that can improve the <HEAD>
design and the appearance of a Webpage of a Website. The browser <TITLE>HTML Image Tag</TITLE>
puts the image where the image tag occurs in the document. If you </HEAD>
put an image tag between two paragraphs, the browser shows the <BODY BACKGROUND=“baba_img_n.jpg”>
first paragraph, then the image, and then the second paragraph.

109 110
<IMG SRC=“baou_logo_n.png” ALIGN=“RIGHT” ALT=“BAOU” o Entity Name: The Special Character/Entity is identified by a defined
BORDER=1 WIDTH=350 HEIGHT=250> Entity Name. Example: Quotation mark Symbol (“) can be included by
</BODY> using the format and Entity Name &quot;
o Some Special Characters/Entities which are used in HTML Document
are described in Table 3.

Output
Table 3: Some Special Characters/Entities in HTML Document
Description Entity Number Entity Name Symbol
Quotation mark &#34; &quot; “
Ampersand &#38; &amp; &
Less than &#60; &lt; <
Greater than &#62; &gt; >
Non-breaking Space &#160; &nbsp;
Inverted exclamation &#161; &iexcl; ꜟ
Cent sign &#162; &cent; ¢
Pound sterling &#163; &pound; £
Yen sign &#165; &yen; ¥
Copyright &#169; &copy; ©
1.6SPECIAL CHARACTERS AND HORIZONTAL TAGS Registered trademark &#174; &reg; ®
Fraction one-fourth &#188; &frac14; ¼
• Special Characters Fraction one-half &#189; &frac21; ½
Explanation:Many special symbols are needed to be included in HTML Fraction three-fourths &#190; &frac34; ¾
Document these are known as Special Characters. These are also Inverted question &#191; &iquest; ¿
known as Character Entities/Entities. mark
Purpose: Used to insert Symbols or Punctuation in HTML Document. Example: “, en dash &#8211; &ndash; ˗
&, <, >, Space and others. em dash &#8212; &mdash; —
Syntax: The Character Entity is begins with ampersand Symbol, followed by entity dagger &#8224; &dagger; †
number or defined Entity Name and ends with a semicolon. To include Horizontal ellipsis &#8230; &hellip; …
Special Characters either of the two methods can be used: Euro &#8364; &euro; €
o Entity Number: The Special Character/Entity is identified by a defined trademark &#8482; &trade; ™
Entity Number. Example: Quotation mark Symbol (“) can be included
by using the format and Entity Number &#34;
Example 8: HTML programs to demonstrate Special Characters.

111 112
Solution: o SIZE: Specifies the height of a Horizontal Rule. Value is given in pixels
<HEAD> or %. Example: SIZE = 100
<TITLE>HTML Special Characters</TITLE>
o WIDTH: Specifies the width of a Horizontal Rule. Value is given in
</HEAD>
pixels or %. Example: W IDTH = 100
<BODY>
<H1><U>Using Special Character</U></H1>
<H2>With Entity Number </H2>&#38;
Example 9: HTML programs to demonstrate Horizontal Rule Tag.
<H2>With Entity Name</H2>&amp;
Solution:
</BODY>
<HEAD>
Output
<TITLE>HTML Horizontal Rule Tag </TITLE>
</HEAD>
<BODY>
<H1>HTML</H1>
<HR ALIGN=“LEFT” NOSHADE SIZE=10 W IDTH=400>
<P>HTML is a language for developing Webpages of a Website.</P>
• Horizontal Rules Tag
</BODY>
Explanation: The Horizontal Rules or Horizontal Line is used to draw a
Output
Horizontal Line either for representing different section of
Content, Horizontal Rule (HTML 4.01) or a thematic break
(HTML 5). However, the Horizontal Rule Tag that displays a
horizontal rule in visual browsers, but is now defined in
semantic terms, rather than presentational terms.
Purpose: Used to insert a Horizontal line to separate content (or define a
change) in a HTML Document.
Type: Empty Tag.
Syntax: The HR Tag is used to display Horizontal Line in the HTML 1.7 LISTS
Document. Example: <HR >
Attributes: Explanation:The information or the content can be represented in the form of list in
o ALIGN: Sets the alignment of the Horizontal Rule according to the the HTML Documents. In HTML the list can be represented in two
Webpage margins. Values = left, center, right. Example: ALIGN= ways, Ordered List and Unordered List.
“center” Purpose: Used to represent the contents in form of Ordered List (sequential

o NOSHADE: Specifies that a Horizontal Rule should render in one solid Numbers/Alphabets) or Unordered List (Bullets) in a HTML Document.

color (noshaded), instead of a shaded color.Example: NOSHADE Type: Container Tag.

113 114
Output
• Ordered List Tag:An ordered list is represents list of items that are marked with
Numbers/Alphabets.
Syntax:
o An Ordered list starts with the opening <OL> tag and ends with Closing </OL>
Tag having list of Items in between.
• Unordered List Tag:An ordered list is represents list of items that are marked
o Each list item starts with the opening <LI> tag and ends with Closing </LI>
with Particular Symbols called as Bullets.
Tag having in between one Item name per <LI>...</LI> tag.
Syntax:
o By default the list items will be marked with number.
o An Unordered list starts with the opening <UL> tag and ends with Closing
Attributes:
</UL> Tag having list of Items in between.
TYPE: Defines the type of the list item marker as mentioned below.
o Each list item starts with the opening <LI> tag and ends with Closing </LI>
o TYPE=“1” : List items will be marked with numbers (Default).
Tag having in between one Item name per <LI>...</LI> tag.
o TYPE=“A” : List items will be marked with uppercase letters.
o By default the list items will be marked with small black circles Bullets.
o TYPE=“a” : List items will be marked with lowercase letters.
o TYPE=“I” : List items will be marked with uppercase roman numbers.
Attributes:
o TYPE=“i” : List items will be marked with lowercase roman numbers.
TYPE: Defines the type of the list item marker as mentioned below.
o TYPE=“disc” : List items will be marked with a small black circle Bullet
(default).
Example 10: HTML programs to demonstrate Ordered List Tag.
o TYPE=“circle” : List items will be marked with a circle.
Solution:
o TYPE=“square” : List items will be marked with a Square.
<HEAD>
o TYPE=“none” : List items will not be marked.
<TITLE>HTML Ordered List Tag </TITLE>
</HEAD>
<BODY>
<H2>Ordered List with Alphabets</H2>
<OL type=“A”>
Example 11: HTML programs to demonstrate Unordered List Tag.
<LI>List Item 1</LI>
Solution:
<LI>List Item 2</LI>
<HEAD>
<LI>List Item 3</LI>
<TITLE>HTML Ordered List Tag </TITLE>
</OL>
</HEAD>
</BODY>
<BODY>
<H2>Unordered List with Circle Bullets</H2>
<UL type=“circle”>

115 116
<LI>List Item 1</LI>
<LI>List Item 2</LI> Example 12: HTML programs to demonstrate Meta Tag.
<LI>List Item 3</LI> Solution:
</UL> <HEAD>
</BODY> <TITLE>HTML Meta Tag </TITLE>
<META NAME=“description” CONTENT=“Description for Website”>
Output <META NAME=“keywords” CONTENT=“HTML, CSS, XML, JavaScript”>
<META NAME=“author” content=“Mr. XYZ”>
<META NAME=“viewport” content=“width=device-width, initial-scale=1.0”>
</HEAD>
<BODY>
<P>!!!All Meta Data/ information go in the Head section of HTML Document!!!</P>
1.8 META ELEMENT TAG </BODY>

Output
Explanation: The Meta Element Tag of HTML provides Metadata that signifies
data/information about another data. Metadata is machine parsable
and is not displayed on the Webpage.
Purpose: The Meta Elements are usually used to specify page description,
keywords, author of the document, last modified and another metadata. 1.9 LET US SUM UP
The metadata or the information about another data can be used by
browsers to display content or reload page, Search Engine’s keywords
Hello Friends, now as you have completed this unit, you should be able to learn the
and even other Web Services.
concept, working and importance of Hyper Text markup Language. The various
Type: Empty Tag.
HTML Tags like formatting; paragraph; Heading; Link; Images; Special Characters;
Syntax:
Horizontal Rules; Lists and meta element tag attributes, purpose and implementation
• The <META> tags are embedded within <HEAD> Tag of HTML Document.
should have been understood.
• Metadata is always passed as name/value pairs.
Attributes:
1.10 CHECK YOUR PROGRESS
• NAME: Specifies a name for the metadata. Values = application-name,
author, description, generator, keywords and viewport.
• CONTENT: Gives the value associated with the http-equiv or name attribute.  Define:Hyper Text Markup Language and HTML Tags.

Values = text.  _______ Tag starts a new line where paragraph is not required in HTML
• HTTP-EQUIV: Provides an HTTP header for the information/value of the Document. [<p>, <BR>, <!-->, None of these]
content attribute. Values = content-type, default-style, refresh.

117 118
 Full form for below 1.12 FURTHER READING
• HTML

• SGML Online Reference Reading as PDF:


http://egyankosh.ac.in/bitstream/123456789/9954/1/Unit-2.pdf [About Basic HTML
• WYSIWYG
Tags Pg. 31-43]
 HTML has 10 levels of Headings represented by Heading Tags.[True/False].

 The Entity Name for Trademark Special Character is ________. Online Reference Reading as Video:
• https://www.youtube.com/watch?v=QEtWL4lWlL4&list=PLFDF119180A90877
 The HTML Tags can be ________ and _______Tags.
9 [About HTML tags]
[Specific/Container/Empty/Core]
• https://www.youtube.com/watch?v=omuyzDmNaf4 [About HTML tags]

1.11 CHECK YOUR PROGRESS: POSSIBLE ANSWERS


1.13 ASSIGNMENTS
1. Explain the Structure of a HTML Document
 Definition:
2. Write Steps to Create a HYML Document.
Hyper Text Markup Language: Hypertext Markup Language (HTML) is the 3. Give difference between :
standard markup language mainly used for developing Webpages of a a. External and Internal Link Tag of HTML.
Website that can even be called as a Web Application. b. Ordered and Unordered List of HTML
HTML Tags: HTML Tags also called as HTML Element is used to indicate the 4. Write a short note on Image Tag of HTML.
structure and format of a Web Document. 5. How to insert a Horizontal Line in HTML Document? Explain.

 <BR> Tag starts a new line where paragraph is not required in HTML Document.
1.14 ACTIVITIES
 Full forms
Creative Zone:
• HTML : Hyper Text Markup Language
Note: For Activities Learners can use search engine as their reference for supportive
• SGML : Standard Generalized Markup Language knowledge enhancement

• WYSIWYG : What You See Is What You Get • Design a Webpage using Image, Link, paragraph and Horizontal Line Tag.
• “Hypertext Markup Language is the standard and most powerful markup
 HTML has 10 levels of Headings represented by Heading Tags.False
language for creating web pages and web applications”, justify the statement
 The Entity Name for Trademark Special Character is&trade; in your opinion.
 The HTML Tags can be Container and Empty Tags.
Code Zone:
Note: All the activities can be performed taking sequential reference of all Examples
provided in this Unit.

119 120
Write a Program in HTML for HTML Document to:
• Create a First HTML Webpage having basic HTML Tags.
• Demonstrate <H1> to <H6> Heading Tags.
• Create External link of: Text, Image and Email.
• Generate an Internal Link within a HTML Document.
• Insert an Image in Background and any desired location
• Insert a Special Character Copyright © Symbol.
• Insert a Horizontal Line between two paragraphs.
• Generate an Ordered List for 3 items of Type “1”.
• Generate an Unordered List for 3 items of Type “square”.
• Execute Meta Element Tag.

121

You might also like