0% found this document useful (0 votes)
4 views

CS1 CHAPTER 4_New

HTML (Hyper Text Markup Language) is the standard markup language for creating web pages, consisting of elements that define the structure and presentation of content. It is easy to learn and widely supported, but has limitations such as being static and lacking advanced programming features. The document also covers HTML editors, basic tags, and the structure of HTML documents including the head and body sections.
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
4 views

CS1 CHAPTER 4_New

HTML (Hyper Text Markup Language) is the standard markup language for creating web pages, consisting of elements that define the structure and presentation of content. It is easy to learn and widely supported, but has limitations such as being static and lacking advanced programming features. The document also covers HTML editors, basic tags, and the structure of HTML documents including the head and body sections.
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

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. HTML elements tell the browser how to
display the content. HTML elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link", etc. HTML helps to build structure of a
website and is a widely used Markup language. . It is easy to learn. Every browser
supports HTML Language. HTML is light weighted and fast to load. HTML is simple
to edit as being a plain text. It integrates easily with other languages such as
JavaScript, CSS etc. HTML also allows the utilization of templates, which makes
designing a webpage easy. It cannot produce dynamic output alone, since it’s a static
language. It is the time consuming as the time it consume to maintain on the colour
scheme of a page and to make lists, tables and forms. We need to write a lot of code
for just creating a simple webpage. Security features offered by HTML are limited.
HTML can create only static and plain pages so if we’d like dynamic pages then
HTML isn’t useful.

ADVANTAGES

1. HTML is an easy to use, learn, implement and flexible alternative to traditional


presentation and tedious software.
2. Contains powerful formatting facilities.
3. HTML documents are device and platform independent. (Since it can be designed to
work on not only home PCs but also on graphical workstations, dumb terminals,
network computers, handheld devices etc.)
4. You can traverse to any HTML document required because of hyper linking facility
available, thus controlled navigation is possible.
5. Required HTML pages can be updated easily, without changing whole document.
6. It is a kind of software, which has been called world ware.
7. Independent work can be done and you need not rely on application or program
vendor.
8. No expensive license software or hardware required.
9. If compatibility with user habits, expectations and multiple platforms in the goal, then
HTML is the only approach to delivering a web application.

DISADVANTAGES
1. HTML doesn’t offer programming languages features and capabilities.
2. It’s easy to write “bad” HTML containing errors.
3. Complex HTML code is hard to read and understand and code complexity increases
to make interactive web page. So building complex pages is very time consuming.
4. It’s easy to make mistakes (e.g. leaving out a “>” or “/” character).
5. Special types of software like scripting languages (VB Script, Java Script) are
required for handling different events and validations.
6. Can’t detect errors easily since no special debugging tool is provided.
HTML DOCUMENTATION

HTML documents are plaintext (also known as ASCII) filed that can be created
using any text editor (e.g., Emacs or vi on UNIX machines; Simple Text on a
macintosh; Notepad on a Windows machine). You can also use wordprocessing
software if you remember to save your document as “text only with line breaks”.

HTML Editors
HTML Editors are programming tools for Hyper Text Markup Language (HTML)
documents.
There are three categories of HTML Editors:
1. Text Editors
2. HTML Code Editors
3. HTML Design Tools
1. Text Editors
These editors only edit ASCII text. They offer no functionality to facilitate better
HTML development. They are useful if your knowledge of HTML is excellent.
Some examples of Text Editors include Notepad (Windows), Simple Text
(Macintosh), and Pico (Unix).
They are typically WYSIWYG. WYSIWYG is an acronym for “What you see is
what you get”; it means that you design your HTML document visually, as if you
were using a word processor, instead of writing the markup tags in a plaintext
file and imagining what the resulting page will look like.

2. HTML Code Editors


These editors may or may not be WYSIWYG.

3. HTML Design Tools


These tools are intended for HTML development without exposing the code to
the author. They are typically WYSIWYG. Many of these tools do allow the user
to access the HTML code, however this is not usually apparent to the user. Some
examples of HTML Design Tools include Net Objects Fusion (Web
Development), and Microsoft Office 97 (Traditional Office/Design Tools that
provide HTML output).
You can concentrate on the content, rather than the syntax, of your Web site,
You can Create a Web site without learning HTML, You can Design Elegant and
Consistent Web sites with a few key strokes, since they are more user friendly.
 HTML ELEMENT
An element is a fundamental component of the structure of a text document.
Some examples of elements are heads, tables, paragraphs, and lists. Elements
can contain plain text, other elements, or both.
HTML elements are defined using HTML tags.

THE MINIMAL HTML DOCUMENT


Every HTML document should contain certain standard HTML tags. Each document
consists of head and body text. The head contains the title, and the body contains
the actual text that is made up of paragraphs, lists, and other elements. Browsers
expect specific information because they are programmed according to HTML and
SGML specifications.
 Simple html document
<HTML>
<HEAD>
<TITLE> HOME PAGE
</TITLE>
</HEAD>
<BODY>THIS IS MY FIRST WEB PAGE
</BODY>
</HTML>

(When you save an HTML file, you can use either the htm or the html extension.
Save the file as “firstpage.htm”. Open this file through your Internet browser.)

Example Explained
The first tag in your HTML document is <HTML>. This tag tells your browser that
this is the start of an HTML document. The last tag in your document is </HTML>.
This tag tells your browser that this is the end of the HTML document. The text
between the <HEAD> tag and the </HEAD> tag is header information. Header
information is not displayed in the browser window. The title is displayed in your
browser’s caption.
The text between the <BODY> tags is the text that will be displayed in your browser.
The text between the <TITLE> tags is the title of your page.

BASIC HTML TAGS


1) HTML
The <html> tag represents the root of an HTML document.
All HTML documents should start with <HTML> tag and end with </HTML> tag
The <html> tag is the container for all other HTML elements (except for
the <!DOCTYPE> tag).
Syntax:
<HTML>…….</HTML>
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
FOLLOWING TAGS APPEAR IN <HTML> TAG:
 HEAD
The <head> element is a container for metadata (data about data) and is placed
between the <html> tag and the <body> tag.
Metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and
other meta information.
The following elements can go inside the <head> element:
 <title> (required in every HTML document)
 <style>
 <base>
 <link>
 <meta>
 <script>
 <noscript>
Syntax:
<HEAD>……</HEAD>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

 TITLE TAG
The <title> tag defines the title of the document. The title must be text-only, and it
is shown in the browser's title bar or in the page's tab.
The <title> tag is required in HTML documents!
The contents of a page title is very important for search engine optimization
(SEO)! The page title is used by search engine algorithms to decide the order
when listing pages in search results.
The <title> element:
 defines a title in the browser toolbar
 displays a title for the page in search-engine results
Syntax:
<TITLE>……</TITLE>
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements Reference</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
2) BODY TAG
The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML document, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.
There can only be one <body> element in an HTML document.
ATTRIBUTES IN BODY TAG
1) The BACKGROUND Attribute
This allows you to specify an image file to use as a background (a bit like a
watermark) behind the displayed text and graphics.
E.g.<BODY BACKGROUND=”c:\a.fig”>
Text …..
</BODY>
So image a.gif will be set as a background to your web page.
2) Background colour of the web page
Attribute is:BGCOLOR=”#rrggbb”
Sets the background colour to the specified RGB colour value, where RR GG
and BB are the hexadecimal colour codes for the Red, Green and Blue levels,
ranging from 0 to 255  that is, 00 to FF. The colour “000000” is black, while
“FFFFFF” is white.
3) Setting the text colour (TEXT Attribute)
Syntax: <BODY TEXT=”#rrggbb”> text in a body</BODY>
Sets the default text colour to the specified RGB colour value.
4) Setting colour for hyperlinks (LINK Attribute)
Syntax> <BODY LINK=“#rrggbb”>text in a body</BODY?
Sets the default text colour of hypertext anchors to the specified RGB colour
value.
5) Setting colour for visited hy[perlinks (VLINK Attribute)
Syntax: <BODY VLINK=“#rrggbb”>text in a body</BODU>
Sets the default text colour of visited hypertext links to the specified RGB colour
value.

ELEMENTS IN THE BODY ARE CATEGORIZED AS:


A) Text Block Elements
BODY element contains all the displayed content of a document. Structurally, the
document content is organized into blocks of text, such as paragraphs, lists,
headings, paragraphs, block quotations, and so on. These are generically called
block elements, since they “block” chunks of text together into logical units. Block
elements can often contain other blocks  for example, a list item can contain
paragraphs or block quotations, so that these elements can often nest together.
The blocklevel elements are:
 Hn (Headings) (h1 to h6)
 P
 ADDRESS
 BLOCKQUOTE
 PRE
 HR
 FORM
 TABLE
B) Text Emphasis Elements
These are elements that mark text for special meanings, for example, that a
particular piece of text is emphaiszed (EM) pr a cotatopm (CITE), or that specifies the
desired physical formatting, such as boldface (B) or italics (I). These elements can
usually appear anywhere inside a block element, with a few exceptions (you can’t
have images inside a PRE element).
C) Special Elements  Hypertext Anchors
Analogous to the text level markup is the anchor (A) element. This is the element that
marks hypertext links. Obviously you want to know a lot about this one.
D) CharacterLevel Elements
Then are what I call characterlevel elements, namely line breaks (BR) and images
(IMG). These are treated much like characters, and can appear wherever there is a
character in a document.
E) Character References
Finally there are character or entity reference. These are special HTML “escape”
codes that can be used to enter special characters that are hard to type, such as
accented or other nonASCII characters. You also need to use these to type angle
brackets or ampersand characters  as these are otherwise interpreted as HTML
tags (<…>) or as the beginnings of character or entity references (&).
Analogous to the textlevel markup is the anchor (A) element. This is the element
that marks hypertext links. Obviously you want to know a lot about this one.

Syntax:
<BODY>…….</BODY>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

3) <P> TAG
The <p> tag defines a paragraph.
Browsers automatically add a single blank line before and after each <p> element.
Can contain align attribute for alignment of the text within the paragraph.
Eg:<P ALIGN=”CENTER”> this is a paragraph</P>
4) <BR> TAG
The <br> tag inserts a single line break.
The <br> tag is useful for writing addresses or poems.
The <br> tag is an empty tag which means that it has no end tag.
Syntax: <BR>
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The br element</h1>
<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>
</body>
</html>

5) <HR> TAG
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The <hr> element is most often displayed as a horizontal rule that is used to separate
content (or define a change) in an HTML page.
Syntax: <HR>
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The Main Languages of the Web</h1>
<p>HTML is the standard markup language for creating Web pages. </p>
<hr>
<p>CSS is a language that describes how HTML elements are to be displayed on
screen, paper, or in other media.</p>
<hr>
<p>JavaScript is the programming language of HTML and the Web.</p>
</body>
</html>

6) <!--..--> TAG
The comment tag is used to insert comments in the source code. Comments are not
displayed in the browsers.
You can use comments to explain your code, which can help you when you edit the
source code at a later date. This is especially useful if you have a lot of code.
Syntax:
<!-- this is a valid comment -->
< !-- this is a invalid comment -->
Example:
<!DOCTYPE html>
<html>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>
7) HEADING TAGS <H1>……<H6>
The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the most important heading. <h6> defines the least important heading.

Syntax:
<H1>…..</H1>
<H2>…..</H2>
<H3>…..</H3>
<H4>…..</H4>
<H5>…..</H5>
<H6>…..</H6>
Example:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

8) <PRE> TAG
The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font, and the text preserves both
spaces and line breaks. The text will be displayed exactly as written in the HTML
source code.
Syntax:
<PRE>…..</PRE>
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The pre element</h1>
<pre>
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and
line breaks
</pre>
</body>
</html>

FONT TAGS IN HTML

1) FONT TAG
The <font> tag was used in HTML 4 to specify the font face, font size, and color of
text.
SYNTAX: <FONT>……</FONT>
Attribute Example Purpose
Size=“number” Size=“2” Defines the font
size
Size=“+number” Size=“+1” Increases the font
size
Size=“number” Size=“1” Decreases the font
size
Face=“facename” Face=“Times new Roman” Defines the
fontname
Color=“colorvalue” Color=“#eeff00 Defines the font
color
Color=“colorname” Color=“red” Defines the font
color

2) MARQUEE TAG
The Marquee HTML tag is a non-standard HTML element which is used to scroll a
image or text horizontally or vertically.
In simple words, you can say that it scrolls the image or text up, down, left or right
automatically.
Marquee tag was first introduced in early versions of Microsoft's Internet Explorer.
Syntax:
<MARQUEE>……</MARQUEE>
Example:
<!DOCTYPE html>
<html>
<body>
<marquee>This is an example of html marquee </marquee>
</body>
</html>
Marquee Attributes

Attribute Description
behavior It facilitates user to set the behavior of the marquee to one of the
three different types: scroll, slide and alternate.
direction defines direction for scrolling content. It may be left, right, up and
down.
width defines width of marquee in pixels or %.
height defines height of marquee in pixels or %.
hspace defines horizontal space in pixels around the marquee.
vspace defines vertical space in pixels around the marquee.
scrolldelay defines scroll delay in seconds.
scrollamount defines scroll amount in number.
loop defines loop for marquee content in number.
bgcolor defines background color.

3) CHARACTER FORMATTING
LOGICALS STYLES

<EM>
For emphasis. Typically displayed in italics. (Consultants cannot reset your password
unless you call the help line)
<CODE>
For computer code. Displayed in a fixedwidth font. (The <stdio.h> header file)
<STRONG>
For strong emphasis. Typically displayed in bod. (NOTE.: Always check your links.)
<VAR>
For a variable, where you will replace the variable with specific information. Typically
displayed in italics. (rm filename deletes the file.)

PHYSICAL STYLES:
 BOLD TAG <B>:
HTML bold tag is represented by <b> tag.
HTML <b> tag is used to display the written text in bold format. It is strictly a
presentational element. If you want to show your text in bold letters and not have
real semantic meaning, then put it within <b>.......</b> tag.
Example:
<!DOCTYPE>
<html>
<body>
<p> Hello guys, <b>this is the method to write bold text.</b></p>
</body>
</html>
 ITALIC TEXT <I>:
HTML <i> tag is used to represent Italics. The content within <i> tag usually
renders in italic type on the browser. It can be useful to represent some technical
terms, phrase, fictional character thoughts, etc. It starts with <I> tag and ends
with </I>.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Example of HTML i tag</h2>
<p>PROJECT <i>G20</i> </p>
</body>
</html>

 UNDERLINE TAG <U>:


We use the <u> tag, to underline a text in HTML. It represents a text in a
different style from another text in the content of the web page.
We can also use the style attribute, to underline a text in HTML. The style
attribute specifies
an inline style for an element. This attribute is used inside the HTML <p> tag,
with the CSS property text-decoration property.
It starts with <U> tag and ends with </U>.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The u element</h1>
<p>CS Stands for <u>Computer Science</u></p>
</body>
</html>

4) SUBSCRIPT TAG <SUB>:


The <sub> tag defines subscript text. Subscript text appears half a character below
the normal line, and is sometimes rendered in a smaller font. Subscript text can be
used for chemical formulas, like H2O.
Syntax:
<SUB>…..</SUB>
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The sub and sup elements</h1>
<p>This text contains <sub>subscript</sub> text.</p>
</body>
</html>
5) SUPERSCRIPT TAG <SUP>:
The <sup> tag defines superscript text. Superscript text appears half a character
above the normal line, and is sometimes rendered in a smaller font. Superscript text
[1]
can be used for footnotes, like WWW .
Syntax:
<SUP>…..</SUP>
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The sub and sup elements</h1>
<p>This text contains <sup>superscript</sup> text.</p>
</body>
</html>

6) SMALL TAG
The <small> tag defines smaller text
Syntax: <SMALL>……</SMALL>
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The small element</h1>
<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>
</body>
</html>

7) BIG TAG
The <big> tag was used in HTML 4 to define bigger text.
Syntax: <BIG>…..</BIG>
Example:
<!DOCTYPE html>
<html>
<head>
<body>
<p>This is a normal paragraph.</p>
<p><big>This is a bigger paragraph.</big></p>
</body>
</html>
URLS IN HTML
Hypertext Anchors
URL stands for Uniform Resource Locator, which may represent an address of
document on web or Internet or simply a path to a document in a specific directory.
The World Wide Web used Uniform Resource Locators (URLs) to specify the location
of files on other servers. A URL includes the type of resource being accessed (e.g,
Web, gopher, FTP), the address of the server, and the location of the file. The syntax
is:
Scheme://host. Domain [:port]/path/filename
HTML provides you to jump from a link to any document or image or any local or
WebPages by using special tag, called <a> i.e. Anchor tag.
Syntax is: <A HREF=“URL”>name or image which can be treated as link</A>
Thus anchor is a piece of text or some other object (e.g. image), which marks the
beginning and/or the end of a hypertext link. The <A> element is used to mark that
piece of text (or inline image), and to give its hyper textual relationship to other
documents. The text between the opening and closing tags, <A attributes> …text…
</A> can act as start or destination (or both)o of a link. The HREF attribute (Which is
actually optional) marks the anchor as the start of a link to another document or
resource (it could point, for example, to an image file), or to a particular place in
another document.
Syntax is:
<A HREF=“URL (absolute or relative path)”>anchor name </A>
An absolute or partial URL can specify the address of the referenced document:
e.g.
1) Link to a page on the World Wide Web.
<A HREF=http://www.yahoo.com>Enter your emailid</A>
The string ‘Enter your emailid’ is a hypertext lint to the website indicated by URL
specified
2) Link to an image by image as a link.
<A HREF=“image2.jpeg”><IMG SRC=”image1.gif”></A>
The image ‘image1.gif’ is a hypertext link to the image file located in the same
directory This will allow you to use a small icon that links the user to a larger version
of the same image.
3) Link to document located in different director
<A HREF=”d:\soft\a.html”>Click Here.</A>
Here by clicking on Click Here link, destination page will be displayed which is
specified in the path given.
4) Link to the same page (Links to a Particular Place in a Document)
<P><A HREF= “#samepage”>This is link to the same page. </A></P>
<A NAME=”samepage”><H2>Yes You are in the same page.</H2></A>
Particular places in an HTML document can be marked as specific destinations of
hypertext links via the NAME attribute. Links to Specific Sections
Anchors can also be used to move a reader to a particular section in a document
(either the same or a different document) rather than to the top, which is the default.
This type of an anchor is commonly called a named anchor because to create the
links, you insert HTML names within the document.

LISTS IN HTML

HTML supports ordered, unordered and definition lists.


Different list tags
<OL>…..</OL>: Defines an ordered list
<UL>…..</UL>: Defines an unordered list
<LI>…..</LI>: Defines a list item

1) UNORDERED LIST
The <ul> tag defines an unordered list of items or bulleted list of items.
Use the <ul> tag together with the <li> tag to create unordered lists.
The list items are marked with bullets(typically small black circles).
To make an unnumbered list:
1) Start with an opening list <UL> tag. Enter the <LI> (list item) tag followed by the
individual item followed by </LI> tag.
2) End the entire list with </UL> tag.
You can specify the style type of unordered list i.e. circle, disk, square.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The ul element</h1>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

2) ORDERED LIST
The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
The <li> tag is used to define each list item.
The items in the list are marked with numbers.
To make a numbered list:
1) Start with an opening list <OL> tag. Enter the <LI> (list item) tag followed by the
individual item followed by </LI> tag.
2) End the entire list with </OL> tag.
You can specify the style of numbering the list items by giving the attribute in <OL>
tag and it can take values “I” for uppercase roman, “i” for lowercase roman, “A” for
uppercase letters, “a” for lowercase alpha numeric letters.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The ol element</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

3) NESTED LIST (ORDERED AND UNORDERED)


You can nest one list into another. Both ordered and unordered can be nested
together.

Example 1:
<!DOCTYPE html>
<html>
<body>
<h1>An unordered list inside an ordered list</h1>
<ol>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ol>
</body>
</html>
Example 2:
<!DOCTYPE html>
<html>
<body>
<h1>A list inside another list</h1>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>

Example 3:
<!DOCTYPE html>
<html>
<body>
<h1>A list in a list in a list</h1>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
TABLES IN HTML
The HTML tables allow web authors to arrange data like text, images, links, other tables,
etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to
create table rows and <td> tag is used to create data cells. The elements under <td> are
regular and left aligned by default.

TABLE ELEMENTS

 <TABLE> …</TABLE> defines a table in HTML. If the BORDER attribute is


present, your browser displays the table with a border
 <CAPTION>…</CAPTION> defines the caption for the title of the table.
The default position of the title is centered at the top of the table. The attributes
ALIGN = BOTTOM can be used to position the caption below the table.
 <TR>…</TR> specifies a table row within a table. You may define default
attributes for the entire row: ALIGM (LEFT, CENTER, RIGHT) and/or VALIGN (TOP,
MIDDLE, BOTTOM).
 <TH>…</TH> defines a table header cell. By default the text in this cell is bold and
centered. Table header cell may contain other attributes to determine the
characteristics of the cell and/or its contents.
 <TD>…</TD> defines a table data cell. By default the text in this cell is aligned left
and centered vertically. Table data cells may contain other attributes to determine the
characteristics of the cell and/or its contents.
 Table Attributes
 ALIGN
Specifies the horizontal placement of the table.
LEFT aligns the table on the left (the default).
RIGHT aligns the table on the right.
CENTER aligns the table in the center
 BGCOLOR=“color”
Sets the color of the background for table. This color can be overridden by a
BGCOLOR tag in the TH, TR, or TD tags.
 BORDER=“value” indicates the thickness, in pixels, of the border to draw
around the table. Give the value as an integer. no border. means value 0
 CELLPADDING= “value”
Determines the amount of space, in pixels, between the border of a cell and the
contents of the cell. The default is 1.
 CELLSPACING=“value” determines the amount of space, in pixels, between
individual cells in a table. The default is 2.
 HEIGHT=“height”
Specifies the height of the table. The default is the optimal height determined by
the contents of each cell. Can be a number of pixels, or a percentage of the
height of the page or parent element.
 WIDTH=“width”
Defines the width of the table. The default is the optimal width determined by the
contents of each cell. Can be a number of pixels, or a percentage of the height of
the page or parent element.
 COLS=“numberOfColums”
Indicates how many virtual columns of equal width fit in the width of the window.
If the WIDTH attribute is supplied, the COLS attribute indicates how many virtual
columns fit in the specified width. Suppose that the WIDTH attribute is “80%” and
the COLS attribute is 4. In this case, each column takes up 20% of the width of
the window. Note, however, that if the minimum width needed to display the
contents of an actual column is greater than the width of a virtual column, then
the width of the column is expanded to fit its contents.
 HSPACE= “horizontalMargin”
Specifies the distance between the left and right edges of the table and any
surrounding content.
 VSPACE = “vertical Margin”
Specifies the distance between the top and bottom edges of the table and any
surrounding content.
Similarly you can define Attributes within <TH> …</TH> or<TD>…</TD> cell as__
 ALIGN (LEFT, CENTER, RIGHT) Horizontal alignment of a cell.
 VAKUGB (TOP, MIDDLE, BOTTOM) Vertical alignment of a cell.
 COLSPAN=n The number (n) of columns a cell spans.
 ROWSPAN=n The number (n) of rows a cell spans.
Examples:
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>NAME</th>
<th>SUBJECT</th>
<th>MARKS</th>
</tr>
<tr>
<td>ABC</td>
<td>PHYSICS</td>
<td>20</td>
</tr>
<tr>
<td>PQR</td>
<td>CHEMISTRY</td>
<td>35</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>

Example 2:
<html>
<head>
<title> table </title>
</head>
<body bgcolor="orange">
<caption>Wind </caption>
<table border="2" cellpadding="10" cellsapcing="50">
<tr>
<th> City</th>
<th> High</th>
<th> Low</th>
</tr>
<tr>
<td>Mumbai</td>
<td> 33</td>
<td> 24</td>
</tr>
</table>
<br><hr>
<center>TABLE 2</center>
<br>
<caption> Result</caption>
<table border="2">
<tr>
<th rowspan="2">Sr.No. </th>
<th rowspan="2">Student<br> Name</th>
<th colspan="3">Marks Obtained </th>
<th rowspan="2">Total <br></th>
</tr>
<tr>
<td> Test1 </td>
<td>Test2 </td>
<td> Test3 </td>
</tr>
<td align="center">1</td>
<td>Maheshwari</td>
<td>150</td>
<td>100</td>
<td>100</td>
<td>350</td>
</tr>
<tr>
<td align="center">2</td>
<td>Ravi</td>
<td>120</td>
<td>100</td>
<td>100</td>
<td>320</td>
</tr>
</table>
</body>
</html>

IMAGES IN HTML
The IMG tag specifies an image to be displayed in an HTML document.
An image can be a plain image that simply appears on the page. An image can be
embedded in an <A HREF> tag so that the user can click it to open a URL. An image
can also be an image map, which has multiple clickable areas that each link to
different URLS. The HEIGHT and WIDTH attributes indicate the dimensions of the
image. If you specify these attributes, Navigator uses them to reserve a place for the
image on the page and continues loading any text and other page elements instead
of waiting for the image to load. Most Web browsers can display inline images (that
is, images next to text)
Images can be in the following types of formats:
 GIF (Graphics Interchange Format)
 JPEG (Joint Photographic Experts Group)
 XPM (X PixMap)
 XBM (X Bitmap)

Syntax
<IMG
SRC = “location”
ALT = “alterntiveText”
ALIGN=“alignment”
BORDER=“borderWidth”
HEIGHT= “height”
WIDTH= “width”
HSPACE=“horizMargin”
VSPACE=“vericalMargin”
>
The SRC attribute is compulsory
SRC= “location(URL)”
Specifies the URL of the image to be displayed in the document.
ALT=“alternativeText”
Specifies text to be displayed if the browser does not support the IMG tag or if
the user has suspended image loading in the browser.
ALIGN
Specifies the alignment of the image in relation to the surrounding text. If you do not
specify a value for ALIGN, browser uses BOTTOM as the default LEFT aligns an
image with the left margin.
 RIGHT aligns an image with the right margin.
 TOP aligns the top of an image with the top of the tallest item in the current line.
 TEXTTOP aligns the top of an image with the top of the tallest text in the current
line.
 MIDDLE aligns the middle of the image with the baseline of the text in the current
line.
 BASELINE aligns the bottom of an image with the baseline of the text in the
current line.
 BOTTOM is the same as BASELINE.

BORDER=“borderWidth”
Specifies the width, in pixels, of a border around the image. The value must be an
integer.
HEIGHT=“height”
Specifies the height of the image, either in pixels or as a percentage of the height of
the window, frame, or positioned block of HTML that contains the image. To indicate
a number of pixels specify the value as an integer, for example, “100”. To indicate a
percentage, specify the value as an integer followed by the percentage sign, for
example “20%”.
WIDTH=“width”
Specifies the width of the image either in pixels or as a percentage of the window,
frame, or positioned block of HTML containing the image. To indicate a number of
pixels specify the value as an integer, for example, “100”. To indicate a percentage,
specify the value as an integer followed by the percentage sign, for example, “20%”.
HSPACE= “horizMargin”
Specifies a margin in pixels between the left and right edges of the image and
surrounding text and images. Give the value as an integer.
VSPACE= “verticalMargin”
Specifies a margin in pixels between the top and bottom edges of the image and
surrounding text and images. Give the value as an integer.
 Dummy Images
When an <IMG SRC> tag points to an image that does not exist, your browser
software substitutes a dummy image. When this happens during your final review of
your files, make sure that the referenced image does in fact exist, that the hyperlink
has the correct information in the URL, and that the file permission is set
appropriately.
 External Images, Sounds and Animations
You may want to have an image open as a separate document when a user activates
a link on either a word or a smaller, inline version of the image included in your
document. This is called an external image, and it is useful if you do not wish to slow
down the loading of the main document with large inline images.
To include a reference to an external image:
<A HREF= “ExtImg.gif”>text or link</A>
You can also use a smaller image as a link to a larger image:
<A HREF = “BigImage.gif”><IMG SRC = “SmallImage. Gif”></A>
The reader sees the Smallimage.gif image and clicks on it to open the BigImage.gif
file.
You can use the same syntax for links to external animations and sounds. The only
difference is the file extension of the linked file like:
<A HREF= “K3GtheFilm.mov”> link anchor </A>
Specifies a link to a QuickTime movie. Some common file types and their extensions
are:
1) plain text :  .txt
2) HTML document :  .html
3) GIF image :  .gif
4) X Bitmap image :  .xbm
5) JPEG image :  .jpg or .jpeg
6) AIFF sound file :  .aiff
7) AU sound file :  .au
8) WAV sound file :  . wav
9) Quick Time movie :  .mov
10) MPEG movie :  .mpeg or .mpg
Examples:
Using table tags, ahref and img src tags with different attributes.

Table.html

<html>
<head><title> International Business Machines Corporation</title></head>
<body>
<marquee><H3> International Business Machines Corporation(IBMC)</H3></marquee>
<p> How your business can get smarter,To know more about International Business
Machines Corporation(IBM) product, services and career you can see our table and can
refer original website.
</p>
<table border="2″ cellpadding="20″ cellspacing="2″ align="center">
<tr>
<th colspan="3"> OUR SERVICES </th>
<tr>
<th> Product </th>
<th> Services</th>
<th> Prices</th>
</tr>
<tr>
<td> Cloud Computing</td>
<td> PC cloud </td>
<td> 9000</td>
</tr>
<tr>
<td> Mobile cloud </td>
<td>software</td>
<td> 1000</td>
</tr>
<tr>
<td> Security </td>
<td> Hardware </td>
<td> 9000</td>
</tr>
<tr>
<td> Storage </td>
<td> File Storage </td>
<td> 8000</td>
</tr>
</table>
<a href="next.html"><img src="cloud.png" title="cloud Picture" align="center"
width="500″ height="500″ ></a>
</body></html>

Next.html
<html>
<head><title> International Business Machines Corporation</title></head>
<body>
<H3> International Business Machines Corporation(IBMC)</H3>
<p> To know more about International Business Machines Corporation(IBM) product,
services and career you can visit original website.
</p>
<a href="table.html">Visit First page</a>
</body>
</html>

1. Write a HTML code for displaying a sixcelled table.


Sunday Monday Tuesday
First Second Third
Ans.
HTML code is as follows:
<HTML>
<HEAD>
<TITLE>Celled Table </TITLE>
</HEAD>
<BODY>
<TABLE BORDER = “3” CELLSPACING = “50”>
<TR>
<TD> Sunday </TD>
<TD> Monday </TD>
<TD> Tuesday </TD>
</TR>
<TR> <TD> First </TD>
<TD> Second </TD>
<TD> Third </TD>
</TR>
</TABLE>
</BODY>
</HTML>

2. Write HTML code for the following:


YEAR
1998 1999 2000
Units 500 400 1000
Sales
Incomes 1000 800 2000

Ans. HTML code is as follows:


<HTML>
<HEAD>
<TITLE> Sales Analysis </TITLE>
</HEAD>
<BODY>
<TABLE BORDER = “5” WIDTH = “100%” CELL SPACING = “15”>
<TR>
<TD WIDTH = “40%” COLSPAN = “2”
ROWSPAN = “2”> </TD>
<TD WIDTH = “60%” COLSPAN = “3”
ALIGN = “CENTER”>
<B> YEAR
</B> </TD> </TR>
<TR>
<TD WIDTH = “20%” ALIGN = “CENTER”>
<B> 1998 </B> </TD>
<TD WIDTH = “20%” ALIGN = “CENTER”>
<B> 1999 </B> </TD>
<TD WIDTH = “20%”ALIGN = “CENTER”>
<B> 2000 </B> </TD>
</TR>
<TR>
<TD WIDTH = “20%” ROWSPAN = “2”
ALIGN = “CENTER”>
<B> Sales </B> </TD>
<TD WIDTH = “20%” ALIGN = “CENTER”>
<B> Units </B> </TD>
<TD WIDTH = “20%” ALIGN = “CENTER”>
<B> 500</B> </TD>
<TD WIDTH = “20%” ALIGN = “CENTER”>
400 </TD>
<TD WIDTH = “20%” ALIGN = “CENTER”>
100 </TD>
</TR>
<TR>
<TD WIDTH = “20%” ALIGN = “CENTER”>
<B> Income </B> </TD>
<TD WIDTH = “20%” ALIGN = “CENTER”>
1000 </TD>
<TD WIDTH = “20%” ALIGN = “CENTER”>
800 < /TD>
<TD WIDTH = “20%” ALIGN = “CENTER”>
2000 </TD>
</TR>
</TABLE>
</BODY>
</HTML>

3. Write the extract output of the following HTML code with font specifications in
brackets:
Ans.
<HTML>
<body>
<h1> LIST OF BOOKS </h1> <hr>
<ul type =“circle”>
<li> How to solve it By computer
<li> HTML in Easy Steps
<li> C++ Programming
</ul>
<ol type = “A”>
<li> Microprocessor Programming
<li> Networking Essentials
<li> Microcontrollers.
</ol>
</body>
</html>
4. Write HTML code for a webpage displaying the following table.
Yesterday’s Weather
City High Low Wind
Mumbai 33 24 West
Pune 34 25 South
Latur 32 20 South

Ans. HTML code is as follows:


<HTML>
<HEAD>
<TITLE>Weather Table</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = 2>
<CAPTION>
Yesterday’s Weather
</CAPTION>
<TR>
<TH>City</TH>
<TH>High</TH>
<TH>Low</TH>
<TH>Wind</TH>
</TR>
<TR>
<TD>Mumbai</TD>
<TD align = “center”>33</TD>
<TD align = “center”>24</TD>
<TD align = “center”>West</TD>
</TR>
<TR>
<TD>Pune</TD>
<TD align = “center”>24</TD>
<TD align = “center”>25</TD>
<TD align = “center”>South</TD>
</TR>
<TR>
<TD>Latur</TD>
<TD align = “center”>32</TD>
<TD align = “center”>20</TD>
<TD align = “center”>South</TD>
</TR>
</TABLE>
</BODY>
</HTML>
5. Write HTML code for the following:
Ans.
HTML code is as follows:
<HTML>
<HEAD>
<TITLE>COMPUTER PAPER ANALYSIS</TITLE>
</HEAD.
<BODY>
<TABLE BORDER = 2 WIDTH = “100%”
CELLSPACING = 15>
<TR> <TD WIDTH = “25%” ROWSPAN = “2”
ALIGN = “CENTER”>
COMPUTER <BR> SCIENCE </TD>
<TD WIDTH = “25%” ALIGN = “CENTER”>
PAPER  I </TD>
<TD WIDTH = “25%” ALIGN = “CNETER”>
PAPER  II </TD>
<TD WIDTH = “25%” ALIGN = “CENTER”>
TOTAL </TD>
</TR>
<TR> <TD WIDTH = “25%” ALIGN = “CENTER”>
100 </TD>
<TD WIDTH = “25%” ALIGN = “CENTER”
100 </TD>
<TD WIDTH = “25%” ALIGN = “CENTER”>
200 < /TD>
</TR>
</TABLE>
</BODY>
</HTML>

6. Write the exact output of following HTML code:


<html>
<head>
<Title> </Title>
</head>
<body>
<table border = “2” width = “50%”>
<tr>
<td width = “50%” colspan = “2”>
<h1 align = “center” > HSC Board Exams </h1>
</td>
</tr>
<tr>
<td width = “25%” align = “center”>
<u>
Paper I </u> </td>
<td width = “25%” align = “center”> <u>
Paper II </u> </td> </tr>
<tr>
<td width = “25%”
<P align = “center” > <i> 50 Marks </i> </td>
<td> width = “25%” align = “center”>
<i> 50 Marks </i> </td>
</tr>
</table>
</body>
</html>
Ans.Output of HTML code

HSC Board Exam


PaperI PaperII
50 Marks 50 Marks

7. Write HTML code for the following output:


 ART
o MARATHI
o HINDI
o ENGLISH
 COMMERCE
o ACCOUNT
o COSTING
o AUDITING
 SCIENCE
o PHYSICS
o CHEMISTRY
o MATHS
o COMPUTER SC.
Ans.
<HTML>
<BODY>
<UL>
<LI>ART
<UL>
<LI> MARATHI
<LI> HINDI
<LI> ENGLISH
</UL>
<LI> COMMERCE
<UL>
<LI> ACCOUNT
<LI> COSTING
<LI> AUDITING
</UL>
<LI> SCIENCE
<UL>
<LI> PHYSICS
<LI> CHEMISTRY
<LI> MATHS
<LI> COMPUTER SC.
</UL>
</UL>
</BODY>
</HTML>

8. Write exact output of the following HTML. Code with font specifications in brackets:
<html>
<body>
<h1> <u> Network Connectivity Devices </u></h1>
<ul>
<li> Modern
<li> Hub
<ul>
<li> Repeater
<li> Router
</ul>
</ul>
</body>
</html>
Ans. Output is as follows with font specifications in brackets:
Network Connectivity Devices(Text size in h1,
 Modem Regular default
 Hub font is used)
o Repeater (Text size is default
o Router Regular font is used)
9. Write HTML Code for the following:

No. of Books Purchased


F.Y.J.C. SY.J.C.
Year 2004 1200 1300
2005 1250 1400
Ans.
<HTML>
<BODY>
<TABLE border = 1 Cellpadding = 20>
<TR>
<TH Rowspan = 2 Colspan = 2> </TH>
<TH Colspan = 2> No. of Books Purchased </TH>
</TR>
<TR>
<TH> F.Y.J.C. </TH>
<TH> S.Y.J.C. </TH>
</TR>
<TR>
<TH Rowspan = 2 > Year </TH>
<TH> 2004 </TH>
<TD> 1200 </TD>
<TD> 1300 </TD>
</TR>
<TR>
<TH> 2005 </TH>
<TD> 1250 </TD>
<TD> 1400 </TD>
</TR>
</TABLE>
</BODY>
</HTML>

10. Write HTML code’s output for the following:


<html>
<body>
<hl> XII RESULT</hl>
<table border = “1” cellspacing = “10”>
<tr>
<th colspan = “3” > <u> STREAM <N> </th>
</tr>
<tr>
<td> <a href = “SCIENCE. Html” >SCIENCE </a> </td>
<td> <a href = “COMMERCE.html”> COMMERCE </a> </td>
<td> <a href = “ART. Html”> ART </a> </td> </tr>
</table>
</body>
</html>
Ans. XII RESULT (Text size h1)

STREAM

SCIENCE COMMERCE ARTS

SCIENCE is a link available where clicking on SCIENCE a web page file


“SCIENCE.html” should be invoked, on clicking COMMERCE a web page file
“COMMERCE.html” should be invoked and on clicking ART a web page file
“ART/html” should be invoked.

11. Write a HTML Code for the following output:


COMPUTER DEVICES  (Text size h2, align Center)
 INPUT DEVICES
1) Key Board
2) Mouse
 STORAGE DEVICES
1) Hard Disk
2) Floopy Disk
3) Compact Disk
 OUTPUT DEVICES
1) Screen
2) Printer
Ans.
<HTML>
<Head>
<title> List</title>
</Head>
<Body> <H2 ALIGN = “center”> COMPUTER DEVICES </H2>
<UL>
<LI> INPUT DEVICES
<OL>
<LI> Keyboard
<LI> Mouse
</OL>
<LI> STORAGE DEVICES
<OL>
<LI> Hard Disk
<LI> Floopy Disk
<LI> Compact Disk
</OL>
<LI> OUTPUT DEVICES
<OL>
<LI> Screen
<LI> Printer
</OL>
</UL>
</Body>
</HTML>

12. Write HTML code for the following table:


Library Books
Reference Text Book
Section 2000 4000
Ans.
<html>
<body>
<table border = “1”>
<tr>
<th colspan = “3”> Library Bookds >/th>
</tr>
<tr>
<th rowspan = “2”>section </th>
<th> Reference </th>
<th> Text book </th>
</tr>
<tr>
<th> 2000 </th>
<th> 4000 </th>
</tr>
</table>
</body>
</html>

13. Write exact output of the following HTML code with font specifications in bracket:
<HTML>
<BODY>
<H2> MY COUNTRY </H2>
<HR> <BR>
<H1 ALIGN = “CENTER”> INDIA
</H1> <BR>
<UL> IS
<LI> GREAT
<LI> BEAUTIFUL
<LI> LOVING
</UL>
Here people care for each other
<BODY>
</HTML>
Ans.
MY COUNTRY size H2

INDIA centre and size H1


IS
 GREAT
 BEAUTIFUL
 LOVING
Here people care for each other

14. Write a program in HTML for the following output


(i) Arts
A. History
B. Geography
(ii) Science
I. Computer science
II. Physics
(iii) Commerce
o English
o Accounts
Ans.
<HTML>
<BODY>
<OL Type = “I”>
<LI> Arts
<OL Type = “A”>
<LI> History
<LI> Geography
</OL>
<LI> Science
<OL Type = “I”>
<LI> Computer Science
<LI> Physics
</OL>
<LI> Commerce
<UL Type = “Circle”>
<LI> English
<LI> Accounts
</UL>
</OL>
<BODY>
</HTML>

15. Write output of following HTML code:


<HTML>
<HEAD>
<TITLE> ABC </TITLE>
</HEAD>
<BODY>
<HR>
<CENTER>COMPUTER SCIECE</CENTER>
<HR>
<ol>
<LI> Operating System
<LI> Data Structure
++
<LI> C
</OL>
</BODY>
</HTML>
Ans.
ABC Title
COMPUTER SCIENCE
1. Operating system
2. Data structure
3. C++

16. Write an HTML code for following:


Year Student
Boys Girls Total
2004 25 30 55
2005 80 25 105
Record
Ans.
<HTML>
<BODY>
<TABLE BORDER = “1”>
<CAPTION ALIGN = “BOTTEM”>RECORD </CAPTION>
<TR>
<TH> Year
<TH COLSPAN = “3” > Students
</TR>
<TR>
<TH> </TH>
<TH> Boys </TH>
<TH> Girls </TH>
<TH> Total </TH>
</TR>
<TR>
<TD> 2004 </TD>
<TD> 25 </TD>
<TD> 30 </TD>
<TD> 55 </TD>
</TR>
<TR>
<TD> 2005 </TD>
<TD> 25 </TD>
<TD> 80 </TD>
<TD> 105 </TD>
</TR>
</TABLE>
</HTML>

17. Write an HTML code of following output:


COLLEGE h1 and center
Principal
 Vice Principal
 Professors
 Nonteaching Staff
For more details click here
(The words click here act or hyperlink to next page whose address is “C:/My
Documents\A1.HTML”)
Ans.
<HTML>
<BODY>
<H1 ALIGN = “CENTER”> COLLEGE </H1>
<UL> Printipal
<LI> Vice principal
<LI>Professors
<LI> Non teaching staff
</UL>
For more details
<A href = “c:\My documents \ ALHTML” > Click here </A>
</BODY>
</HTML>
18. Write HTML code for the following output:
o Computer Science
 PaperI
(i) C++ language
(ii) HTML
(iii) OS
(iv) DS
 Paper  II
(i) Microprocessor
(ii) Microcontroller
(iii) X86 Processors
(iv) Networking
Ans. <HTML>
<HEAD>
<TITLE> LIST</TITLE>
</HEAD>
<BODY>
<UL TYPE = “SQUARE”>
<LI> Computer Science </LI>
</UL>
<UL TYPE = “DISC”>
<LI> PaperI </LI>
<OL TYPE = “I”>
<LI>C++ language<N>
<LI>HTML</LI>
<LI>OS</LI>
<LI>DS</LI>
</OL>
</UL>
<UL Type = “CIRCLE”>
<LI> PaperII</LI>
<OL TYPE = “1”>
<1.1>Microprocessor </U>
<LI>Microprocessor</LI>
<LI>X86 Processors <N>
</OL>
</UL>
</BODY>
</HTML>
19. Write HTML code for following output.
Cricket Analysis
Country Played Won Lose
INDIA 30 27 03
PAKISTAN 30 03 27
Ans.
<HTML>
<HEAD>
<TITLE> TABLE</TITLE>
<HEAD>
<BODY>
<TABLE BORDER = “1” WIDTH = “25%”>
<CAPTION> <B> Cricket Analysis </B> </CAPTION>
<TR>
<TH>Country</TH>
<TH>Played</TH>
<TH>Won</TH>
<TH>Lose</TH>
</TR>
<TR>
<TD> INDIA </TD>
<TD align=“center”>30 </TD>
<TD align=“center”>27 </TD>
<TD align=“center”>03 </TD>
</TR>
<TR>
<TD> PAKISTAN </TD>
<TD> <align=“center”>30 </TD>
<TD> <align=“center”>03 </TD>
<TD> <align=“center”>27 </TD>
</TR>
</TABLE>
</BODY>
</HTML>

20. Write the output of the following HTML code:


<html>
<body>
<UL type = “circle”>
<Li>One
<Li>Two
<Li>Three
<UL type = “square”>
<Li>Monday
<Li>Tuesday
<Li>Wednesday
</UL>
</UL>
</body>
</html>
Ans.
o One
o Two
o Three
 Monday
 Tuesday
 Wednesday

21. Write the exact output of the following HTML code with font specification in bracket.
<html>
<title>Introduction</title>
<body>
<h1> <b> Computer Science </b> </h1>
<hr>
<u> Paper I </u>
<hr>
<u> PaperII </u>
</body>
</html>
Ans.

Introduction Title
 X
Output window:
Computer Science h1, bold

Paper  I

PaperII
Exercise
Select the correct alternative and rewrite the following

1. ____ tag is used for superscript in HTML.


(i) <SUPER> (ii) <SUP> (iii) <UP> (iv) <SUPERSCRIPT>
1. (ii) <SUP>

2. HTML stands for _____.


OR
Long form of HTML is ________.
(i) Hyper Text mark up language
(ii) High text Manipulation language
(iii) Hyper text Mainpulating Language.
(iv) High Text Markup Language
2. (iii) Hyper text Mainpulating Language.

3. To display definition lists on your web page ____ tag is used.


OR
________ tag is used to write the definition list.
(i) <DLIST> (ii) <OL> (iii) <LI> (iv) <DL>
3. (iv) <DL>

4. Long form of HREF is _____


(i) Horizontal reference (ii) Hypertext reference
(iii) Hyperlink reference (iv) Hypermedia reference
4. (ii) Hypertext reference

5. RGB code for BLACK color is ______


(i) FF0000 (ii) FFFFFF (iii) 00000F (iv)
5. (iv) 000000

6. Which of the following color name is not allowed to used in HTML _____
(i) OLIVE (ii) PURPLE (iii) ORANGE (iv) FUCHSIA
6. (iii) ORANGE

7. ____tag is used to put a line break in HTML code.


(i) <HR> (ii) <BR> (iii) <P> (iv) <TT>
7. (ii) <BR>

8. To place the image into an HTML file ________ attribute is used in IMG tag.
(i) URL (ii) ALT (iii) (iv) HREF
8. (iii) SRC

9. VB Script can be executed in ________ web browser.


(i) Netscape Navigator (ii) Internet Explorer
(iii) Both (iv) None of these
9. (iii) Both (i) and (ii)
10. The long form of SGML is _______
(i) Standard Global Machine Language
(ii) Special Global Markup Language
(iii) Symbolic Generalized Machine Language
(iv) Standard Generalized Markup Language
10. (iv) Standard Generalized Markup Language

11. _____ is the name of the web browser.


(i) Embedded system (ii) Netscape Navigator
(iii) Oracle (iv) C++
11. (ii) Netscape Navigator

12. _____tag is used for scroll the text.


(i) <STRIKE> (ii) <MARQUEE> (iii) HR (iv) None of these
12. (ii) <MARQUEE>

13. COLSPAN attribute is used with _____ tag.


(i) <BODY> (ii) HTML> (iii) <ITILE> (iv) <TABLE>
13. (iv) <TABLE>

14. <A> tag has attribute ______ which defines URL of the document to be linked.
(i) SRC (ii) HREF (iii) VREF (iv) REF
14. (ii) HREF

15. In HTML, ______ attribute defines the name of the file in which the image is to be
found.
(i) ALIGN (ii) SIZE (iii) SRC (iv) BGCOLOR
15. (iii) SRC

16. ALIGN is not an attribute used with _____<tag>.


(i) <BODY> (ii) <HR> (iii) <TR> (iv) <TABLE>
16. (i) <BODY>

17. ____________ is a tag in HTML.


(i) ALT (ii) SCR (iii) IMG (iv) ALIGN
17. (iii)

18. _____ tag is used to put a horizontal rule in HTML.Code.


(i) <HR> (ii) <BR> (iii) <P> (iv) <TID>
18. (i) <HR>

19. For green Colour, RGB code is _____


(i) #FF0000 (ii) #0000FF (iii) # 00FF00 (iv) #00FFFF
19. (iii) # 00FF00

20. _____ is not a tag in HTML.


(i) IMG (ii) ALT (iii) BIG (iv) SMALL
20. (ii) ALT
21. Border attribute is used in ______ tag.
(i) <HTML> (ii) <P> (iii) <TABLE> (iv) <TITLE>
21. (iii) <TABLE>
22. In HTML ___________ is not a paired tag.
(i) <B> (ii) <I> (iii) <BR> (iv) <TABLE>
22. (iii) <BR>
23. The valid attribute of <A> is ______.
(i) NAME (ii) SRC (iii) BGCOLOR (iv) HEIGHT
23. (i) NAME
24. The _____ attribute of <OL> of HTML is use to change, Bullets of the list.
(i) START (ii) VALUE (iii) BULLETS (iv) TYPE
24. (iv) TYPE
25. The size of GIF format file is _____
(i) Greater than BMP format file (ii) Less than BMP format file
(iii) Equal to BMP format file (iv) Greater than JPEG format file
25. (ii) Less than BMP format file
26. The attribute BORDER in <TABLE> tag has the default value of ______.
(i) 2 (ii) 0 (iii) 1 (iv) None of these
26. (iii) 1
27. In HTML, for red colour, RGB code is ________.
(i) #000000 (ii) #ff0000 (iii) #00ff00 (iv) #0000ff
27. (ii) #ff0000
28. ________ tag is used to write the definition list.
(i) <UL> (ii) <DL> (iii) <OL> (iv) <DT>
28. (ii) <DL>
29. Bulleted list in HTML is created by ______ tag
(i) <UL> (ii) <OL> (iii) <B> (iv) <BR>
29. (i) <UL>
30. _____ tag is used to create a row in table.
(i) <td> (ii) <th> (iii) <tr> (iv) <tt>
30. (iii) <tr>
31. _______ tag is use for subscript in HTML code.
(i) <sup> (ii) <subscript> (iii) <sub> (iv) <super>
31. (iii) <sub>
32. ______HTML tag does not require end tag.
(i) <p> (ii) <br> (iii) <head> (iv) strong
32. (ii) <br>

33. An attribute which defines URL of document to be linked in <A> tag is ____
(i) REF (iii) VREF (iii) HREF (iv) ALT
33. (iii) HREF


You might also like