WEB TECH UNIT-1 Content Preparation

UNIT - 1
INTRODUCTION
TO HTML
1. HTML - Introduction
2. HTML - Basic tags
S.No Reg No Content prepared by

1 19UIT001 Aishwarya K
3. HTML - Meta Tags

4. HTML - Attributes

2 19UIT003 Akshaya R
5. HTML - Formatting
6. HTML - Phrase Tags

3 19UIT004 Amrithaa M
7. HTML - Comments
8. HTML - Fonts

4 19UIT005 Anjana M
9. HTML - Marquees
10. HTML - Images

5 19UIT006 Aparna P M
11. HTML - Text Links

12. HTML - Image Links

6 19UIT008 Bhargavi B
13. HTML - Email Links

14. HTML - Tables

7 19UIT009 Bhuvaneshwari R
15. HTML - Frames

8 19UIT012 Haridharani G
16. HTML - Lists

9 19UIT010 Deepika N
17. HTML - Layouts

18. HTML - Colors

10 19UIT011 Deepika S
19. HTML - Forms

20. HTML - Backgrounds

11 19UIT013 Harshini M
21. HTML - Embed Multimedia

22. HTML - Styles

12 19UIT007 Arulselvi M
1. HTML - INTRODUCTION
 HTML stands for Hyper Text Markup Language.

 HTML is the standard markup language for creating Web pages.
 HTML describes the structure of a Web page.
 HTML consists of a series of elements.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML HISTORY
Since the early days of the World Wide Web, there have been many versions of HTML:
YEAR VERSION
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2

2. HTML - BASIC TAGS
OPEN TAG CLOSE TAG DESCRIPTION

<p> </p> This tag allows you to create paragraphs
HEADING 1
<h1> </h1> This is the largest heading
HEADING 2
<h2> </h2> This is second biggest heading
HEADING 3
<h3> </h3> This is the next heading
HEADING 4
<h4> </h4> This is another heading
HEADING 5
<h5> </h5> This is the second smallest heading
HEADING 6
<h6> </h6> This is the smallest heading
<hr > n/a This is a horizontal line. You can use width
and size attributes
<b> </b> This makes text bold
<i> </i> This makes text italic
<br /> n/a This tag allows you to insert line breaks
MULTIPLE CHOICE QUESTIONS
1) HTML stands for –

A) HighText Machine Language
B) HyperText and links Markup Language
C) HyperText Markup Language
D) None of these
2) Which of the following element is responsible for making the text bold in HTML?
A) <pre>
B) <a>
C) <b>
D) <br>
3) Which of the following tag is used for inserting the largest heading in HTML?
A) <h3>
B) <h1>
C) <h5>
D) <h6>
4) Which of the following tag is used to insert a line-break in HTML?
A) <br>
B) <a>
C) <pre>
D) <b>
5) Which character is used to represent the closing of a tag in HTML?

A) \
B) !
C) /
D) .
6) How to create an ordered list in HTML?

A) <ul>
B) <ol>
C) <li>
D) <i>
7) How to create an unordered list in HTML?

A) <ul>
B) <ol>
C) <li>
D) <i>
8) How to insert an image in HTML?

A) <img href = “jtp.png” />
B) <img url = “jtp.png” />
C) <img link = “jtp.png” />
D) <img src = “jtp.png” />
3. HTML - META TAGS
HTML lets you specify metadata - additional important information about a document in a variety of ways. The META
elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list
of keywords, document author etc.
The <meta> tag is used to provide such additional information. This tag is an empty element and so does not have a closing
tag but it carries information within its attributes.
A web document can include one or more meta tags depending on information, but in general, it doesn’t affect the physical
appearance of the document.
SYNTAX
<meta attribute-name="value">
ADDING META TAGS TO DOCUMENTS
You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented
by <head> and </head> tags. A meta tag can have following attributes in addition to core attributes.
S.NO ATTRIBUTES DESCRIPTION
1 Name Name for the property. Can be anything. Examples

include, keywords, description, author, revised,
generator etc.
2 Content Specifies the property's value.
3 scheme Specifies a scheme to interpret the property's value

(as declared in the content attribute).
4 http-equiv Used for http response message headers. For
example, http-equiv can be used to refresh the page
or to set a cookie. Values include content-type,
expires, refresh and set-cookie.
SPECIFYNING KEYWORDS
You can use <meta> tag to specify important keywords related to the document and later these keywords are used by the
search engines while indexing your webpage for searching purpose.
Example:
<html>
<head>
<tiltle>Example</title>
<h1>SPECIFYING KEY WORDS</h1>
<meta name = "example" content = "eample for meta tags" />
</head>
<body>
<p>META TAGS EXAMPLE</p>
</body>
</html>
Output:
SPECIFYING KEY WORDS
META TAGS EXAMPLE
DOCUMENT DESCRIPTION
You can use <meta> tag to give a short description about the document. This again can be used by various search engines
while indexing your webpage for searching purpose.
Example:
<html>
<head>
<h>DOCUMENT DESCRIPTION</h>
<meta name = "keywords" content = "search engine" />
<meta name = "description" content = "learn about document description ." />
</head>
<body>
<p> various search engines while indexing your webpage for searching purpose.</p>
</body>
</html>
Output:
DOCUMENT DESCRIPTION
various search engines while indexing your webpage for searching purpose.
DOCUMENT REVISION DATE
You can use <meta> tag to give information about when last time the document was updated. This information can be used
by various web browsers while refreshing your webpage.
Example:
<html>
<head>
<h>Document Revision Date</h>
<meta name = "keywords" content = "html ,Meta Tags, Revision Date" />
<meta name = "description" content = "Learning about Document Revision Date." />
<meta name = "revised" content = "revision date, 25/08/2021" />
</head>
<body>
<p>This information can be used by various web browsers while refreshing your webpage.</p>
</body>
</html>
Output:
Document Revision Date

This information can be used by various web browsers while refreshing your webpage.
DOCUMENT REFRESHING
A <meta> tag can be used to specify a duration after which your web page will keep refreshing automatically.
Example:
<html>
<head>
<h>Document Refreshing</h>
<meta name = "keywords" content = "html, Meta Tags, Refreshing" />
<meta name = "description" content = "Learning about Document Refreshing" />
<meta name = "revised" content = "revishion , 25/08/2021" />
<meta http-equiv = "refresh" content = "15" />
</head>
<body>
<p>web page will keep refreshing automatically.</p>
</body>
</html>
Output:
Document Refreshing
web page will keep refreshing automatically
PAGE REDIRECTION
You can use <meta> tag to redirect your page to any other webpage. You can also specify a duration if you want to redirect
the page after a certain number of seconds.
Example:
<html>
<head>
<title> Example</title>
<h>Page Redirection</h>
<meta name = "keywords" content = "html, Meta Tags, Redirection" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "revision , 25/08/2021" />
<meta http-equiv = "refresh" content = "15; url = http://www.revisionhtml.com" />
</head>
<body>
<p>redirect the page after a certain number of seconds.</p>
</body>
</html>
Output:
Page Redirection
redirect the page after a certain number of seconds.
SETTING COOKIES
Cookies are data, stored in small text files on your computer and it is exchanged between web browser and web server to
keep track of various information based on your web application need.
You can use <meta> tag to store cookies on client side and later this information can be used by the Web Server to track a
site visitor.
Example:
<html>
<head>
<title>example </title>
<h>SETTING COOKIES</h>
<meta http-equiv = "cookie" content = "userid = abc79; expires = Wednesday, 25-Aug-2021 13:12:59 GMT;" />
</head>
<body>
<p>Information can be used by the Web Server to track a site visitor.</p>
</body>
</html>
Output:
SETTING COOKIES
Information can be used by the Web Server to track a site visitor.
SETTING AUTHOR NAME
You can set an author name in a web page using meta tag.
Example:
<html>
<head>
<title>Example</title>
<h> Setting Author Name</h>
<meta name = "keywords" content = "html, Meta Tags, author" />
<meta name = "description" content = "Learning about Meta Tags author name." />
<meta name = "author" content = "Mahnaz Mohtashim" />
</head>
<body>
<p>set an author name in a web page</p>
</body>
</html>
Output:
Setting Author Name

set an author name in a web page
SPECIFY CHARACTER SET
You can use <meta> tag to specify character set used within the webpage.
Example:
<html>
<head>
<title> Example</title>
<h>Specify Character Set</h>
<meta name = "keywords" content = "HTML, Meta Tags, Specify Character Set" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
</html>
Output:
Specify Character Set

4. HTML - ATTRIBUTES
An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All
attributes are made up of two parts − a name and a value
 The name is the property you want to set. For example, the paragraph <p> element in the example carries an attribute whose
name is align, which you can use to indicate the alignment of paragraph on the page.
 The value is what you want the value of the property to be set and always put within quotations. The below example shows
three possible values of align attribute: left, center and right.
Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends
lowercase attributes/attribute values in their HTML 4 recommendation.
Example:
<html>
<head>
<title>Align Attribute Example</title>
<h>ALIGNMENT</h>
</head>
<body>
<p align = "left">left aligned</p>
<p align = "center">center aligned</p>
<p align = "right"> right aligned</p>
</body>
</html>
Output:
ALIGNMENT
left aligned
center aligned
right aligned
CORE ATTRIBUTES
The four core attributes that can be used on the majority of HTML elements (although not all) are −
1. Id
2. Title
3. Class
4. Style
1. THE id ATTRIBUTE
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary
reasons that you might want to use an id attribute on an element −
 If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.
 If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish
between elements that have the same name.
Example:
<p id =” unique identifier" >it is possible to identify just that element and its content.
</p>
<p id = ”web page"> id attribute to distinguish between elements that have the same name.
</p>
2. THE title ATTRIBUTE
The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained
for id attribute −
The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when
cursor comes over the element or while the element is loading.
Example:
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h1 title = "Title Attribute"> The title attribute gives a suggested title for the element </h1>
</body>
</html>
Output:
The title attribute gives a suggested title for the element
3. THE class ATTRIBUTE
The class attribute is used to associate an element with a style sheet, and specifies the class of element. You will learn more
about the use of the class attribute when you will learn Cascading Style Sheet (CSS). So for now you can avoid it.
The value of the attribute may also be a space-separated list of class names.
Example:
class = "Cascading style sheet"
4. THE style ATTRIBUTE
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.
Example:
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">The style Attribute.</p>
</body>
</html>
Output:
The style Attribute
INTERNATIONALIZATION ATTRIBUTES
There are three internationalization attributes, which are available for most (although not all) XHTML elements.
1. dir
2. lang
3. xml:lang
1. THE dir ATTRIBUTE
The dir attribute allows you to indicate to the browser about the direction in which the text should flow. The dir attribute
can take one of two values,
VALUE DEFINITION
Ltr Left to right (the default value)

Rtl Right to left (for languages such as Hebrew or
Arabic that are read right to left)
Example:
<html dir = "rtl">
<head>
<title>Display Directions</title>
</head>
<body>
When used within another tag, it controls the text's direction for just the content of that tag. right-to-left directed text.
</body>
</html>
Output:
When used within another tag, it controls the text's direction for just the
content of that tag. right-to-left directed text.
2. THE lang ATTRIBUTE
The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only
for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new
XHTML documents.
The values of the lang attribute are ISO-639 standard two-character language codes.
Example:
<html lang = "en">
<head>
<title>English Language Page</title>
</head>
<body>
The lang attribute
</body>
Output:
The lang attribute
3. THE xml:lang ATTRIBUTE
The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the xml:lang attribute should be an
ISO-639 country code as mentioned in previous section.
Generic Attributes:
ATTRIBUTE OPTION FUNCTION
Align right, left, center Horizontally aligns tags
Valign top, middle, bottom Vertically aligns tags within an HTML element
Bgclor numeric, hexidecimal, Places a background color behind an element

RGB values
Background URL Places a background image behind an element
Id User Defined Names an element for use with Cascading Style Sheets.
Class User Defined Classifies an element for use with Cascading Style
Sheets.
Width Numeric Value Specifies the height of tables, images, or table cells.
Hight Numeric Value Specifies the height of tables, images, or table cells.
Title User Defined "Pop-up" title of the elements
1. …………….. is used to provide additional information.
a)<meta>tag
b)<title>tag
c)<html>tag
d)<head> tag
2. Which <meta>tag is used to give short description about the document?
a)document description
b)document revision date
c)document refreshing
d)page redirection
3. Which tag is give information about when last time the document was uploaded?
a)setting author name

b)document refreshing
c)cookies
d) document revision date
4. Page redirection used for?
a)redirect one page to another web page

b)refreshing the web page
c)set the author name
d)description
5. <meta> tags to store………on clients side and later this information can be used b the web server to track a site visitor.
a)author name
b)character set
c)cookie
d)redirection
6. How many elements in core Attribute?
a)7
b)6
c)9
d)4
7. Which attributes is used to uniquely identify any element within an html page?
a)class
b)id
c)style
d)title
8. How many attributes are in internationalization attribute?
a)3
b)9
c)2
d)5
9. Which attribute used to place a back ground color behind an element?
a)background color
b)valign
c)bgcolor
d)id
10. Which attribute is used to classifies an element for use with cascading style sheets?
a)clss
b)id
c)title
d)width
6 MARK QUESTION
1. What is attribute?explain the types ofattribute
12 MARK QUESTION
1. Explain briefly about <meta>tag with example. How <meta> tags are used in html?
5. HTML - FORMATTING
BOLD TEXT
The text that appears within <b>...</b>element,is displayed in bold.
Example:
<html>
<head>
<title>Example for bold text</title>
</head>
<body>
<p>She is from <b> London</b>.</p>
</body>
</html>
Output:
She is from London.
ITALIC TEXT
The text that appears within <i>..</i>element,is displayed in italicized.
Example:
<html>
<head>
<title>Example for italic text</title>
</head>
<body>
<p>She is from <i> London</i>.</p>
</body>
</html>
Output:
She is from London.
UNDERLINED TEXT
The text that appears within <u>...</u>element,is displayed in underline.
Example:
<html>
<head>
<title>Example for bold text</title>
</head>
<body>
<p>She is from <u> London</u>.</p>
</body>
</html>
Output:
She is from London.
STRIKE TEXT
The text that appears within <strike>...</strike>element,is displayed with strikethrough,which is a thin line through
the text.
Example:
<html>
<head>
<title>Example for strike text</title>
</head>
<body>
<p>She is from <strike> London</strike>.</p>
</body>
</html>
Output:
She is from London.
MONOSPACED FONT
The content of a <tt>...</tt> element is written in monospaced font.The fonts are known as variable-width fonts because
different letters are of different widths.In a monospaced font,each letter has the same width.
Example:
<html>
<head>
<title>Example for monospaced font</title>
</head>
<body>
<p>She is from <tt> London</tt>.</p>
</body>
</html>
Output:
SUPERSCRIPT TEXT
The content of a <sup>...</sup> element is written in superscript.The font size used is the same size as the character's
height above the other characters.
Example:
<html>
<head>
<title>Example for superscript text</title>

</head>
<body>
<p>She is from <sup> London</sup>.</p>
</body>
</html>
Output:
She is from London.
SUBSCRIPT TEXT
The content of a <sub>...</sub> element is written in subscript.The font size used is the same as the character surrounding
it,but display the half of the character.
Example:
<html>
<head>
<title>Example for subscript text</title>
</head>
<body>
<p>She is from <sub> London</sub>.</p>
</body>
</html>
Output:
She is from London.
INSERTED TEXT
The text that appear within <ins>...</ins> element is displayed as inserted text.
Example:
<html>
<head>
<title>Example for inserted text</title>
</head>
<body>
<p>She is from <del> London</del> <ins>America</ins>.</p>
</body>
</html>
Output:
She is from London America.
DELETED TEXT
The text that appear within<del>...</del> element will be deleted.
Example:
<html>
<head>
<title>Example for deleted text</title>
</head>
<body>
<p>She is from <ins> London</ins> <del>America</del>.</p>
</body>
</html>
Output:
She is from America London.
LARGER TEXT
The text <big>...</big> element is displayed one font size larger than the rest of the text.
Example:
<html>
<head>
<title>Example for larger text</title>
</head>
<body>
<p>She is from <big> London</big>.</p>
</body>
</html>
Output:
She is from London.
SMALLER TEXT
The text of the <small>....</small> element is displayed one font size smaller than the rest of the text.
Example:
<html>
<head>
<title>Example for smaller text</title>
</head>
<body>
<p>She is from <small> London</small>.</p>
</body>
</html>
Output:
She is from London.
GROUPING CONTENT
The <div> and <span> elements allow to group together several elements to create sections or subsections of a page.
Example:
<html>
<head>
<title>Example for div tag</title>
<style>
div{
color:red;
background color:white;
text align:center;
</style>
</head>
<body>
<h2>Beautiful quotes</h2>
<div>A Lord shall bless thee out of zion</div>
</body>
</html>
Output:
Example:
<html>
<head>
<title>Example for span tag</title>
</head>
<body>
<h2>Definition of birthday</h2>
<p><span style="color:blue">The one day</span>in your
life Your Mother smiled</span><span style="color:violet">
when you cried</span></p>
</body>
</html>
Output:
6. HTML - PHRASE TAGS
EMPHASIZED TEXT
The text that appears within <em>...</em> elements is displayed as emphasized text.
Example:
<html>
<head>
<title>Example for emphasized text</title>
</head>
<body>
<p>She is from <em> London</em>.</p>
</body>
</html>
Output:
MARKED TEXT
The text that appears within <mark>...</mark> element,is displayed as marked in yellow ink.
Example:
<html>
<head>
<title>Example for marked text</title>
</head>
<body>
<p>She is from <mark> London</mark>.</p>
</body>
</html>
Output:
STRONG TEXT
The text that appears within <strong>...</strong> element is displayed as important text.
Example:
<html>
<head>
<title>Example for strong text</title>
</head>
<body>
<p>She is from <strong> London</strong>.</p>
</body>
</html>
Output:
TEXT ABBREVIATION
The text by putting it inside <abbr>....</abbr> .The title attribute must contain this full description and nothing else.
Example:
<html>
<head>
<title>Example for text abbreviation</title>
</head>
<body>
<p>This is <abbr title="Hyper Text Maerkup
Language">HTML</abbr>.</p>
</body>
</html>
Output:
ACRONYM ELEMENT
The <acronym> element allows to indicate the text between <acronym>...</acronym>.
Example:
<html>
<head>
<title>Example for acronym element</title>
</head>
<body>
<p><acronym title="World Health Organisation">
WHO</acronym></p>
</body>
</html>
Output:
TEXT DIRECTION
The <bdo>...</bdo> element stands for Bi-Directional override and it is used to override the current text direction.
Example:
<html>
<head>
<title>Example for text direction</title>
</head>
<body>
<p style="direction:itr;">These are vegetables.</p>
<p><bdo dir="rtl">These are fruits.</bdo></p>
</body>
</html>
Output:
SPECIAL TERMS
The <dfn>...</dfn> element allows to specify a special term.Its usage is similar to italic words in the midst of a paragraph.
Example:
<html>
<head>
<title>Example for special terms</title>
</head>
<body>
<p>She is from <dfn> London</dfn>.</p>
</body>
</html>
Output:
QUOTING TEXT
When we want to quote a passagefrom another source,that should be quoted between <blockquote>...</blockquote>.
Example:
<html>
<head>
<title>Example for blockquotes text</title>
</head>
<body>
<p>The following description of HTML </p>
<blockquotes>HTML is Hyper Text Markup Language.
</blockquotes>
</body>
</html>
Output:
SHORT QUOTATIONS
The <q>...</q> element is used when we want to add a double quote within a sentences.
Example:
<html>
<head>
<title>Example for short quotations</title>
</head>
<body>
<p>She is from London,<q>no ,she is wrong</q>.</p>
</body>
</html>
Output:
TEXT CITATIONS
If we quotes a text,that can indicate the source placing it between an opening <cite>....</cite>.
Example:
<html>
<head>
<title>Example for text citations</title>
</head>
<body>
<p>Class c is derived from <cite> class a and b </cite>.</p>
</body>
</html>
Output:
COMPUTER CODE
Any programming code to appear on a web page should be placed inside <code>...</code>.The content of the <code>
element is presented in a monospaced font.
Example:
<html>
<head>
<title>Example for computer code</title>
</head>
<body>
<p>c,c++,java,python <code> These are code language</code>
</p>
</body>
</html>
Output:
KEYBOARD TEXT
The <kbd>...</kbd> element to indicate what should be typed in.
Example:
<html>
<head>
<title>Example for keyboard text</title>
</head>
<body>
<p>This is a <kbd> Keyboard element</kbd>.</p>
</body>
</html>
Output:
PROGRAMMING VARIABLES
This element is usually used in conjunction with the <pre> and <code> elements to indicate that the content of that
element is variable.
Example:
<html>
<head>
<title>Example for variable text</title>
</head>
<body>
<p><code>password("<var>user-name</var>")</p>
</body>
</html>
Output:
PROGRAM OUTPUT
The <samp>...</samp> element indicates sample output from a program and script etc.Its mainly used when
documenting programming or coding concepts.
Example:
<html>
<head>
<title>Example for program output</title>
</head>
<body>
<p>This is a beautiful<samp> world </samp></p>
</body>
</html>
Output:
ADDRESS TEXT
The <address>....</address> element is used to contain any address.
Example:
<html>
<head>
<title>Example for address text</title>
</head>
<body>
<address>54,thilai nagar,chennai-Tamil nadu.</address>
</body>
</html>
Output:
1.Which tag is used to display an element in underline form?
a.<b>...</b>
b.<u>...</u>
c.<i>...</i>
d.<ul>...</ul>
2.By using which tag we can write an element in monospaced font?
a.<b>...</b>
b.<tt>...</tt>
c.<strike>...</strike>
d.<i>...</i>
3.By using superscript text <sup>...</sup> the result will be shown as?
a.half a character's height right to the other character
b.half a character's height below to the other character
c.half a character's height above the other character
d.half a character's height left to the other character
4.Which tag is used to insert an element?
a.<sub>...</sub>
b.<del>...</del>
c.<i>...</i>
d.<ins>...</ins>
5.The element that appears within <strong>...</strong> is displayed as___
a.important text
b.normal text
c.bold text
d.underline text
6.Which tag is used to abbrivate a text?
a.<div>...</div>
b.<abbr>...</abbr>
c.<acronym>...</acronym>
d.<em>...</em>
7.What does <dfn>...</dfn> indicates?
a.it specify to introduce a tag
b.it specify to introduce a attribute
c.it specify to introduce a special term
d.it specify to introduce an element

8.By using which tag we can indicate an element is a variable?
a.<kbd>...</kbd>
b.<pre>...</pre>
c.<code>...</code>
d.both b and c
6 MARK QUESTION
1.Explain about grouping content format and give a example in HTML program.
12 MARK QUESTION
1.Explain phrase tag and give a example in HTML program.

7. HTML - COMMENTS
Comments are some text or code written in your code to give an explanation about the code, and not visible to the user.
Comments which are used for HTML file are known as HTML comments. Anything written between these tags will be ignored by
the browser, so comments will not be visible on the webpage.
Comments of any code make code easy to understand and increase readability of code. Comments are also part of the code,
which gives an explanation of the code.
HTML comments are placed in between  tags.
Example:
<!DOCTYPE html>
<html>
<head> 
<title>This is document title</title>
</head> 
<body>
<p>Hello HTML.....</p>
</body>
</html>
This will produce the following result without displaying the content given as a part of comments:
Output:
Hello HTML……..
VALID COMMENT AND INVALID COMMENT
Comments do not nest which means a comment cannot be put inside another comment. Second the double-dash
sequence "--" may not appear inside a comment except as part of the closing --> tag. You must also make sure that there are no
spaces in the start-of comment string.
Valid comment:
Example:
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>

<p>This is the valid comment.....</p>
</body>
</html>
Output:
Invalid comment:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment Example</title>
</head>
<body>
< !-- This is not a valid comment -->
<p>Invalid comment...</p>
</body>
</html>
Output:
MULTILINE COMMENT
In HTML code, we can also comment multiple lines at a time. In multiline comment we can use any description about code
or multiple line code to debug, etc.
SYNTAX

Example:
<html>
<head>
<title>Example of HTML comment multiple lines of code</title>
</head>
<body>
<h1> HTML comment multiple lines of code </h1>

</body>
</html>
Output:
CONDITIONAL COMMENTS
Conditional comments only work in Internet Explorer (IE) on Windows but they are ignored
by other browsers.
Example:
<head>
<title>Conditional Comments</title>

</head>
<body>
<p>This is the content </p>
</body>
</html>
Output:
USING COMMENT TAG
There are few browsers that support <comment> tag to comment a part of HTML code.
Example:
<head>
<title>Using Comment Tag</title>
</head>
<body>
<p>You are learning <comment>not</comment> Multimedia</p>
</body>
</html>
Output:
COMMENTING STYLE CODE
If you are using Java Script or VB Script in your HTML code then it is recommended to put that script code inside proper
HTML comments so that old browsers can work properly.
Example:
<html>
<head>
<title>Commenting Script Code</title>
<script>

</script>
</head>
<body>
<p>Hello , World!</p>
</body>
</html>
Output:
COMMENTING STYLE SHEETS
If you are using Cascading Style Sheet (CSS) in your HTML code then it is recommended to put that style sheet code inside
proper HTML comments so that old browsers can work properly.
Example:
<html>
<head>
<title>Commenting Style Sheets</title>
<style>

</style>
</head>
<body>
<div class = "example">Hello ,HTML!</div>
</body>
</html>
Output:
8. HTML - FONTS
Fonts play a very important role in making a website more user friendly and increasing content readability. Font face and
color depends entirely on the computer and browser that is being used to view your page but you can use HTML <font> tag to add
style, size, and color to the text on your website. You can use a <basefont> tag to set all of your text to the same size, face, and
color.
SET FONT SIZE
You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default
size of a font is 3.
Example:
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size="1">Hello World</font><br />
<font size="2"> Hello World </font><br />
<font size="7"> Hello World </font>
</body>
</html>
Output:
SETTING FONT FACE
You can set font face using face attribute but be aware that if the user viewing the page doesn't have the font installed, they
will not be able to see it. Instead user will see the default font face applicable to the user's computer.
Example:
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face="Times New Roman" size="4">Times New Roman</font><br />
<font face="Candara " size="4">Verdana</font><br />
<font face="High tower text " size="5">Comic Sans MS</font><br />
<font face="Georgia " size="4">WildWest</font><br />
<font face="Bedrock" size="4">Bedrock</font><br />
</body>
</html>
Output:
SETTING FONT COLOR
You can set any font color you like using color attribute. You can specify the color that you want by either the color name or
hexadecimal code for that color.
Example:
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color="violet ">The text will be in violet</font><br />
<font color="Green"> The text will be in green</font>
</body>
</html>
Output:
RELATIVE FONT SIZE
You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it
like <font size = "+n"> or <font size = "−n">
Example:
<html>
<head>
<title>Hello Web Technology!</title>
</head>
<body>
<font size = "-1">HTML size = "-1"</font><br />
<font size = "+1">HTML size = "+1"</font><br />
<font size = "+4">HTML size= "+4"</font>
</body>
</html>
Output:
ALTERNATIVE FONT FACE
It is possible to specify two or more font face alternatives by listing the font face names, separated by a comma. If the user
doesn't have one Font installed in his system, the other can display the content.
Example:
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Font Face Alternative Attribute </title>
</head>
<body>
<font face="Times New Roman,Verdana,Comic sans MS,WildWest" size="5">Times New Roman</font><br />
<font face="Lucida Calligraphy,Comic Sans MS,Lucida Console" size="5">Bedrock</font>
</body>
</html>
Output:
THE <basefont> ELEMENT
The <basefont> element is supposed to set a default font size, color, and typeface for any parts of the document that are not
otherwise contained within a <font> tag. You can use the <font> elements to override the <basefont> settings.
Example:
<head>
<style>
body {
color: red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
1. The __________ tag is useful during the debugging of codes.
a. comment
b. Table
c. Font
d. Form
2. __________only work in Internet Explorer (IE) on Windows but they are ignored
a. Conditional comments
b. Multiline comments
c. Single line comment
d. None of the above
3. Which is the correct way to comment out something in HTML?

a. Using ## and #
b. Using 
c. Using </-- and -/->
d. Using 

<table background="/images/pattern1.gif" width="100%" height="100">
<tr><td>
This background is filled up with a pattern image.
</td></tr>
</table>

<table background="/images/pattern2.gif" width="100%" height="100">
<tr><td>
This background is filled up with a pattern image.
Output:
1. There are ____ types of text input used on forms.
a) two
b) three
c)four
d) five
2. Which control is used for items that require only one line of user input, such as search boxes or names?
a)Password input controls

b)Multi-line text input controls
c)Single-line text input controls
d)Select Box Controls
3. _______ are created using HTML <textarea> tag.
a)Multi-line input controls

b)Password input controls
c)Radio button controls
d)Single-line text input controls
4. ______ are used when more than one option is required to be selected.
a)Radiobuttons
b)Checkboxes
c)Selectbox
d)File upload box
5. ____ control hides inside the code and does not appear on the actual page.
a)Button Controls
b)Radio button controls
c) Checkbox Controls
d)Hidden Form Controls
6. HTML provides ___ ways to decorate the webpage background.
a)two
b)three
c)four
d)five
7. ____ attribute is used to set image background.
a)text
b)bgcolor
c)background
d)link
8. _____ attribute is used to set color at the page body and table background.
a)bgcolor
b)background
c)text
d)link
6 MARK QUESTION
1. How to set background color in HTML? Give an example using HTML code.
12 MARK QUESTION
1. What are the different types of form controls? Explain them briefly.
21. HTML - EMBED MULTIMEDIA
The easiest way to add video or sound to your web site is to include the special HTML tag called <embed>.This tag causes
the browser itself to include controls for the multimedia automatically provided browser supports <embed> tag and given media
type.You can also include a <noembed> tag for the browsers which don't recognize the <embed> tag.
THE <embed> TAG ATTRIBUTES
S.NO ATTRIBUTE & DESCRIPTION
1 align
Determines how to align the object. It can be set to either center, left or right.
2 autostart
This boolean attribute indicates if the media should start automatically. You can set it
either true or false.
3 loop
Specifies if the sound should be played continuously (set loop to true), a certain
number of times (a positive value) or not at all (false)
4 playcount
Specifies the number of times to play the sound. This is alternate option for loop if you
are usiong IE.
5 hidden
Specifies if the multimedia object should be shown on the page. A false value means
no and true values means yes.
6 width
Width of the object in pixels
7 height
Height of the object in pixels
8 name
A name used to reference the object.
9 src
URL of the object to be embedded.
10 volume
Controls volume of the sound. Can be from 0 (off) to 100 (full volume).
Example:
Embed pdf into an HTML Document.
<html>
<body>
<title>Embeded PDF</title>
<embed type = "application/pdf" src = "PL SQL.pdf" width=100% height=700px>
</embed>
</body>
</html>
Output:
BACKGROUND AUDIO
You can use HTML <bgsound> tag to play a soundtrack in the background of your webpage. This tag is supported by
Internet Explorer only and most of the other browsers ignore this tag. It downloads and plays an audio file when the host document
is first downloaded by the user and displayed. The background sound file also will replay whenever the user refreshes the
browser.This tag is having only two attributes loop and src.
This will produce the blank screen. This tag does not display any component and remains hidden.Internet Explorer can also
handle only three different sound format files − wav, the native format for PCs; au, the native format for most Unix workstations;
and MIDI, a universal music-encoding scheme.
Example:
<html>
<head>
<title>HTML audio controls</title>
</head>
<body>
<bgsound src = "levitating.mid">
</bgsound>
Internet Explorer support this audio element.
</body>
</html>
Output:
levitating.mid
MULTIMEDIA FORMATS
Multimedia elements (like audio or video) are stored in media files.The most common way to discover the type of a file, is to
look at the file extension.Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
HTML AUDIO
HTML <audio> ELEMENT
The HTML <audio> element is used to play an audio file on a web page.
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will
use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
COMMON AUDIO FORMATS
MP3 is the best format for compressed recorded music. The term MP3 has become synonymous with digital music.If your
website is about recorded music, MP3 is the choice.
FORMAT FILE DESCRIPTION
MIDI .mid MIDI (Musical Instrument Digital Interface). Main format for all electronic
.midi music devices like synthesizers and PC sound cards. MIDI files do not
contain sound, but digital notes that can be played by electronics. Plays
well on all computers and music hardware, but not in web browsers.
RealAudio .rm RealAudio. Developed by Real Media to allow streaming of audio with
.ram low bandwidths. Does not play in web browsers.
WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Plays well on
Windows computers, but not in web browsers.
AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default format
for iTunes. Plays well on Apple computers, but not in web browsers.
WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows,
Macintosh, and Linux operating systems. Supported by HTML.
Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.
MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most
popular format for music players. Combines good compression (small
files) with high quality. Supported by all browsers.
NOTE: Only MP3,WAV and Ogg audio are supported by the HTML Standard.
Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
Example using MP3 Format:
<html>
<body>
<audio controls>
<source src = “Levitating.mp3” type = “audio/mpeg”>
Your browser does not support this audio element.
</audio>
</body>
</html>
Output:
Levitating.mp3
Example using WAV Format:
<html>
<title>HTML audio muted</title>
<body>
<audio muted controls>
<source src = “Alone.wav” type = “audio/wav”>
</audio>
</body>
</html>
Output:
Alone.wav
Example using OGG Format:
<html>
<body>
<audio controls>
<source src = “Child’s Nightmare.ogg” type = “audio/ogg”>
</audio>
</body>
</html>
Output:
Child's
Nightmare.ogg
HTML VIDEO
HTML <video> ELEMENT
The HTML <video> element is used to show a video on a web page.
The controls attribute adds video controls, like play, pause, and volume.
We can also include width and height attributes. If height and width are not set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser may choose from. The browser will
use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.
COMMON VIDEO FORMATS
There are many video formats out there.The MP4, WebM, and Ogg formats are supported by HTML.
The MP4 format is recommended by YouTube.
FORMAT FILE DESCRIPTION
MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group. The first popular
.mpeg video format on the web. Not supported anymore in HTML.
AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly used
in video cameras and TV hardware. Plays well on Windows computers, but
not in web browsers.
WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly used
in video cameras and TV hardware. Plays well on Windows computers, but
not in web browsers.
QuickTime .mov QuickTime. Developed by Apple. Commonly used in video cameras and
TV hardware. Plays well on Apple computers, but not in web browsers.
RealVideo .rm RealVideo. Developed by Real Media to allow video streaming with low
.ram bandwidths. Does not play in web browsers.
Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by

HTML.
WebM .webm WebM. Developed by Mozilla, Opera, Adobe, and Google. Supported by
HTML.
MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Commonly used in
or MP4 video cameras and TV hardware. Supported by all browsers
and recommended by YouTube.
NOTE: Only MP4, WebM and Ogg video are supported by the HTML Standard.
Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
<html>
<title>HTML video controls</title>
<body>
<video width = “500” height = “340” controls>
<source src = “Oggy.mp4” type = “audio/mp4”>
Your browser does not support this video element.
</video>
</body>
</html>
Output:
Oggy.mp4
<html>
<title>HTML video muted</title>
<body>
<video width = “400” height = “220” muted controls>
<source src = “Oggy.mp4” type = “audio/mp4”>
Your browser does not support this video element.
</video>
</body>
</html>
Output:
Oggy.mp4
HTML OBJECT TAG
The <object> element defines an embedded object within an HTML document. It was designed to embed plug-ins (like Java
applets, PDF readers, and Flash Players) in web pages, but can also be used to include HTML in HTML.The <object> element is
supported by all browsers.
Example:
Adding an HTML document in an HTML document:
<html>
<body>
<object width="100%" height="500px" data="Lists.html"></object>
</body>
</html>
Output:
Example:
Adding an image in an HTML document:
<html>
<body>
<object data="Ed.jpg"></object>
</body>
</html>
Output:
22. HTML - STYLES
Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags. Using
CSS, you can specify a number of style properties for a given HTML element. Each property has a name and a value, separated by
a colon (:). Each property declaration is separated by a semi-colon (;).
HTML STYLE ATTRIBUTE
Setting the style of an HTML element, can be done with the style attribute.
SYNTAX
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
Example:
<html>
<head>
<title>HTML Styles</title>
</head>
<body>
<p style = "color:red; font-size:30px;" >Documents are presented on screen</p>
</body>
</html>
Output:
We can use CSS in three ways in your HTML document −

1. External Style Sheet − Define style sheet rules in a separate .css file and then include that file in your HTML document using
HTML <link> tag.
2. Internal Style Sheet − Define style sheet rules in header section of the HTML document using <style> tag.
3. Inline Style Sheet − Define style sheet rules directly along-with the HTML elements using style attribute.
1. EXTERNAL STYLE SHEET
If you need to use your style sheet to various pages, then its always recommended to define a common style sheet in a
separate file. A cascading style sheet file will have extension as .css and it will be included in HTML files using <link> tag.
Example:
CSS RULES
body
{background-color:teal;}
h1
{color: black;margin-left: 20px;}
We defined two CSS rules which will be applicable to two different classes defined for the HTML tags.
Now we can use the above external CSS file in our following HTML document.
HTML CODE
<html>
<head>
<title>HTML External styles</title>
<link rel = "stylesheet" type = "text/css" href = "sty.css">
</head>
<body>
<h1>Let it snow</h1>
<h4>Let it rain</h4>
</body>
</html>
Output:
2. INTERNAL STYLE SHEET
If you want to apply Style Sheet rules to a single document only, then you can include those rules in header section of the
HTML document using <style> tag.Rules defined in internal style sheet overrides the rules defined in an external CSS file.
Example:
<html>
<head>
<title>HTML Internal styles</title>
<style>
body
{background-color:tomato;}
h2
{color: black;margin-left: 30px;}
</style>
</head>
<body>
<h2>Let it snow</h2>
<p>Let it rain<p>
</body>
</html>
Output:
3. INLINE STYLE SHEET
An inline style may be used to apply a unique style for a single element.To use inline styles, add the style attribute to the
relevant element. The style attribute can contain any CSS property.
Example:
<html>
<body>
<h1 style="color:blue;text-align:center;">Let it snow</h1>
<p style="color:red;">Let it rain</p>
</body>
</html>
Output:
1. Which tag will be used incase of <embed> tag when it was not supported by browser?
a)<object>
b) <noembed>
c) <audio>
d) <applet>
2. Which attribute specifies the number of times to play the sound?
a) playcount
b) hidden
c) loop
d) align
3 . Which attribute identifies the version of java plug-in to use?
a) loop
b) classid
c) autostart
d) hidden
4. Which of the following file type is created by Macromedia's Flash program?
a) .mov
b) .wmv
c) .mpeg
d) .swf
5. How many attributes does background audio contains?
a) loop and src

b) width and height
c) controls and src
d) autoplay and muted
6. External style sheets are referred in web document through a
a) class
b) line/url or path
c) page
d) none
7. Which attribute is used to add video controls like play, pause, and volume in video?
a) <autoplay>
b) <play>
c) <video controls>
d) <controls>
8. Which style sheet file will have extension as .css?
a) cascading
b) cellpadding
c) cellspacing
d) style
6 MARK QUESTION
1) Explain <embed> tag attributes and background audio with example.
12 MARK QUESTION
1) Briefly explain HTML Styles with suitable examples.

WEB TECH UNIT-1 Content Preparation

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WEB TECH UNIT-1 Content Preparation

Uploaded by

Copyright:

Available Formats

UNIT - 1

S.No Reg No Content prepared by

3. HTML - Meta Tags

S.No Reg No Content prepared by

S.No Reg No Content prepared by

S.No Reg No Content prepared by

S.No Reg No Content prepared by

11. HTML - Text Links

S.No Reg No Content prepared by

13. HTML - Email Links

S.No Reg No Content prepared by

S.No Reg No Content prepared by

16. HTML - Lists

S.No Reg No Content prepared by

17. HTML - Layouts

S.No Reg No Content prepared by

19. HTML - Forms

S.No Reg No Content prepared by

21. HTML - Embed Multimedia

S.No Reg No Content prepared by

 HTML stands for Hyper Text Markup Language.

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

2016 W3C Candidate Recommendation: HTML 5.1

2017 W3C Recommendation: HTML5.1 2nd Edition

2017 W3C Recommendation: HTML5.2

OPEN TAG CLOSE TAG DESCRIPTION

<h1> </h1> This is the largest heading

<h2> </h2> This is second biggest heading

<h3> </h3> This is the next heading

<h4> </h4> This is another heading

<h5> </h5> This is the second smallest heading

<h6> </h6> This is the smallest heading

<b> </b> This makes text bold

<i> </i> This makes text italic

MULTIPLE CHOICE QUESTIONS

1) HTML stands for –

5) Which character is used to represent the closing of a tag in HTML?

6) How to create an ordered list in HTML?

7) How to create an unordered list in HTML?

8) How to insert an image in HTML?

ADDING META TAGS TO DOCUMENTS

S.NO ATTRIBUTES DESCRIPTION

1 Name Name for the property. Can be anything. Examples

3 scheme Specifies a scheme to interpret the property's value

<h1>SPECIFYING KEY WORDS</h1>

<meta name = "example" content = "eample for meta tags" />

<p>META TAGS EXAMPLE</p>

SPECIFYING KEY WORDS

META TAGS EXAMPLE

<meta name = "keywords" content = "search engine" />

DOCUMENT REVISION DATE

<h>Document Revision Date</h>

<meta name = "revised" content = "revision date, 25/08/2021" />

Document Revision Date

<meta name = "keywords" content = "html, Meta Tags, Refreshing" />