Introduction to HTML Basics and Tags
Uploaded by
ernaveen929Introduction to HTML Basics and Tags
Uploaded by
ernaveen929Learning objectives:
After the Completion of this unit you should be able to know
■ The Hyper Text
■ The Mark -up Language
■ Versions of HTML
■ Characteristics of HTML
■ HTML Editor
■ Basic Tags of HTML
■ Types of Browser
■ How to Create HTML Program
■ Different elements of HTML
■ Different attributes in HML Tag
Structure
1.1. Introduction of HTML
1.1.1 Definition
1.1.2 History
1.1.3 Version
1.1.4 Characteristics of HTML
1.1.5 Browser
1.1.6 Editors
1.1.7 HTML documents
1.1.8 HTML Tags
1.1.9 Structure of HTML
1.2. Writing my first HTML Page
1.3. Basic tags used in HTML
1.3.1 Heading tags
1.3.2 Paragraph Tag
1.3.3 Line Break Tag
1.3.4 Center Tag
1.3.5 Horizontal Lines
1.3.6 Preserve Formatting
1.3.7 Non breaking Spaces
1.4. Elements In HTML
1.4.1 Text level Element
1.4.2 Block level element
1.5. Attributes In HTML
1.5.1 Color attribute
1.5.2 Generic attribute
1.6. Formatting In HTML
1.7. Meta Tags and their use
1.8. Commenting a HTML Code
1.9. Images and incorporating images
1.10. working with Tables
1.11. Working with Lists
1.11.1 Unordered list
1.11.2 Ordered list
1.11.3 Definition list
1.12. Working with hyperlinks
1.12.1 Linking a Document
1.12.2 Linking to a page Section
1.13. Frames and frame management
1.13.1 Creating Frame
1.13.2 The < frameset> Tag Attributes
1.13.3 Mixed frameset
1.14. Working with I Frames
1.15. Working with Block elements
1.15.1 Block level Element
1.15.2 Inline element
1.16. Check your Progress - possible answer
1.17. References
1.1 Introduction to HTML
HTML is a language for developing Web pages. HTML stands for
HyperTextMarkup Language .It is not a programming language, it is a markup
language. A markup language is a collection of markup tags. HTML uses markup
tags to describe Web pages. HTML markup tags are usually called HTML tags or
just tags. HTML tags are keywords surrounded by angle brackets like <html>.
HTML tags normally come in pairs, like <b> and </b>. The first tag in a pair is the
start tag; the second tag is the end tag. Start and end tags are als o called opening
tags and closing tags.
1.1.1 Definition
HTML: -It is a Standard text based computer language that is used to create
electronic (hypertext) documents for the developing web site on the internet
or offline uses.
1.1.2History o f html
IBM sowed the seed for HTML in the early 1980s. Initially, it was
known by the name called GML (General Mark -up Language). It is a
powerful tool that was aimed at creating a documentation language in which
one could mark the title, headings, text, font select ion and much more. In
1986, this concept got standardization by ISO and named SGML (Standard
Generalized Mark -up language). In 1989, Tim Berners Lee and his team
designed this language and named it as HTML (Hyper Text Mark -up
Language). The language HTML w as modified many times leading to
number of versions i.e. HTML Version 1 to 5, which is the latest one.
HTML is a complete code that allows the user to create web pages.
It includes text and graphics. You can add links to your web pages.
Hyperlinks are th e highlighted text or images that connect to other pages on
the web. Let us analyze the word HTML.
Hyper Text : Hypertext is the text used to link various web pages. It is
the text on a webpage, which on clicking opens a new web
page.
Mark -up : It means hi ghlighting the text either by underlining or
displaying it in different colors, or both.
Language : It refers to the way of communication between web pages,
which has its own syntax and rules.
1.1.3V ersions of html
HTML 1.0 : The original version of HTML was HTML 1.0. It had very
limited features which greatly limited what you could do in
designing your web pages.
HTML 2.0 : HTML 2.0 then arrived and included all the features of
HTML 1.0 plus several new features for web page design.
Until January, 1997, HTML 2.0 was the standard in web
page design.
HTML 3 .0 : It included many new and useful enhancements to HTML.
It became popular on the web but it more often than not
referred to documents containing browser specific
tags instead of referring to documents adhering to the HTML
3.0 draft.
HTML 4 .0 : This version became a recommendation in December, 1997
and a
standard as of April, 1998. Explorer has done a very good
job in implementing the many features of HTML 4.0.
Unfortunately, Netscape has not kept pace. The latest version
of Netscape Communicator still does not recognize the
many tags and attributes introduced with HTML 4.0. This
means that a web page that involves HTML 4.0 specific tags
will look great in Explorer but can look disastrous in
Netscape.
HTML 5 .0 : HTML 5 (which came out way back in 2012 ) is the new
web standard. It follows HTML 4 (which came out way back
in 1997) and XHTML
(EXtensible HyperText Markup Language.) . Since the
introduction of HTML4, a lot has happened with the web and
something needed to be done to address all the new
technologies and latest multimedia. HTML5 is the result of
cooperation that began in 2006 between the World Wide
Web Consortium (W3C) and the Web Hypertext Application
Technology Working Group (WHATWG). HTML5 should
also be device independent (that is, understood by computers
and the many devices in existence today) while als o keeping
it easily readable by us humans.
1.1.4 Characteristics of HTML language
HTML is the most commonly used language to write Web Pages. It has
gained popularity due to its advantages such as:
■ Easy to understand and can be modified.
■ Provides more fle xible way to design web pages, along with text.
■ Graphics, Video and Sound can also be used and imported to give
attractive look to the Web Pages.
■ Effective presentations can be made with all formatting effects.
■ Links can also be added to help readers to br owse through
information of their interest.
■ You can create and publish Web pages to share information with
people around the world.
■ The Web pages designed in HTML are widely used in marketing,
for the display of products and their prices, beneficial for on line
shopping and also in advertising world.
■ You can display HTML documents on any platform, such as
Macintosh, Windows, UNIX , Linux etc.
1.1.5 HTML browsers
Browser is the software package used to viewand explore
information on World Wide Web . The most commonly used web browsers
areInternet explorer and Netscape Navigator. Internet explorer comes with
the Windowsoperating system and the latest versions of Macintosh
operating system, Mac OSx. Netscape Navigator is available for computers
running on Macintosh, Unix or Linux OperatingSystem. HTML documents
consist of text andspecial elemen ts, called Tags. A Web Browser interprets
the tags in a HTML document and displays the document as Web page.
These Browsers are also used to specify the link to vari ous web pages. A
List of web browser is
1. Internet explorer
2. Netscape Navigator
3. Mozilla Firefox
4. Google Chrome
5. Opera etc..
1.1.6HTML Editors
The simple word processor ( Notepad ) is called a text editor and ideal for
creating or developing web pages. Instead of writing plain text, however,
professional Web developers often prefer using HTML editors like
FrontPage or Dreamweaver because they offer code -writing shortcuts and
helpful features.
NotePad is found by clicking on " Start ", then choosing " Programs " (or All
Programs), then choosing " Accessories " and finally choosing NotePad .
That is:
Start ■ Programs ■Accessories ■NotePad
1.1.7 HTML DOCUMENTS
The general structure of HTML document has two sections: Head and
Body .
1. Head section : The Head section contains the Title that identifies
the first part of your HTML coded document.
2. Body section : The body section is where you do most of the
works that includes text, graphics, and other HTML elements
that provide control and formatting of a page like: font s,
paragraph, list and other elements. The general format of HTML
document is:
1.1.8HTMLT ags
HTML is Tag based language. Tag is an element, which instructs the Web
browser, what to show and how to show. We can use various attributes in
the Tag that contains additional information like formatting effects,
alignment, colors, etc. Each Tag giving a specific instruction is enclosed
in<> angle brackets.
HTML tags are of two types: -
1. Paired Tag : A paired tag has set of two commands, starting &
ending commands or tags. The first tag (<H1>) in a pair is the start
tag; the second tag </H1> is the end tag. Start and end tags are also
called opening tags and closing tags. The Opening tag activates the
effect and the closing tag turns the effect off
2. Singular Tags: The second type of tag is the sing ular or stand -alone
tag. A stand -alone tag does not h ave a companion tag. For example.
<BR> tag. There is no ending tag. Sometimes it is called as unpaired
tag.
Every HTML page should contain certain standard HTML tags.
There are three tags that are required for every page. They are:
1. <HTML> </HTML>
2. <HEAD></HEAD>
3. <BODY></BODY>
HTML Section
The Html document starts with <HTML> tag and ends with
</HTML> tag, which identifies that it is a standard HTML
document. Ever ything is written with in these tags. If the commands
are not enclosed in tags then a web browser will assume the
commands as text.
HEAD Section
The <TITLE> tag has to be given within the <HEAD> tag. It contains the
title of the document. The Title should be short and it is recommended to
include less than 64 characters in a Title. The contents of the head are not
displayed.
The head of a HTML document is an unordered collection of information
about the document. The main element in the Head section is the <TITLE>
tag. Generally, the title appears in the title bar of the web Browser window.
BODY Section
The < BODY> tag includes the text that contains the information about the
document that gets displayed on the Web Page along with all other tags and
attributes. In body tag only we use all formatting elements, images, heading, list,
hypertext links to enhance th eappearance of a web page.
Every opening tag must have an ending tag. The closing Tag has a Forward Slash(/).
However, some tags have only an opening [Link] Tags are not case sensitive.
Syntax:
<HTML>
<HEAD>
<TITLE>
………………………….
</TITLE>
</HEAD>
<BODY> Syntax:
<HEAD>
<TITLE>
The Title is included here
</TITLE>
</HEAD>
Syntax:
<HTML>
………..
………...
………...
</HTML>
1.1.9 Structure of HTML Document
A typical HTML document will have following structure:
Basic HTML Document
In its simplest form, following is an example of an HTML document:
Above example of HTML document uses following tags:
Tags Description Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>This is document title< /title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
<!
DOCTYPE ...> This tag defines the document type and HTML
version.
<html> This tag encloses the complete HTML document
and mainly comprises of document header which
is represented by <head>...</head> and document
body which is represented by <body>...</body>
tags.
<head> This tag represents the document's heade r which
can keep other HTML tags like <title>, <link>
etc.
<title> The <title> tag is used inside the <head> tag to
mention the document title.
<body> This tag represents the document's body which
keeps other HTML tags like <h1>, <div>, <p>
etc.
<h1> This tag represents the heading.
<p> This tag represents a paragraph.
CHECK YOUR PROGRESS 1
Q1. What does HTML stand for?
Answer:__________________________________________________________
__________________________________________________________________
___________________________________ _______________________________
Q2. Write the characteristics of HTML ?
Answer:____________________________________ ______________________
___________ ________________________________________________ ______
____________________________________________ ______________________
Q3. Write the different version of HTML ?
Answer:____________________________________ ______________________
___________________________________________ _______________________
____________________________________________ ______________________
Q4. Write the structure of HTML document ?
Answer:____________________________________ ______________________
___________________________________________ ______________________
____________________________________________ _____________________
Q5. What types of HTML Editor and Browser use?
Answer:____________________________________ ____________________
___________________________________________ ____________________
____________________________________________ ___________________
1.2 Writing my first HTML Page
CREATING , SAVING AND VIEWING AN HTML DOCUMENT .
In this section, we will be working with the notepad as editor. Now we are
writing a HTML program to display a message “hello word” and in the title bar
“This is my First webpage” on the Browser.
Let us begin:
1. In windows, click START Button .
2. Navigate to PROGRAMS and then click on ACCESSORIES.
3. Click on NOTEPAD
4. A NOTEPAD window will appear.
Now, you are ready to type the HTML code.
5. Type the HTML code in your Notepad wi ndow as shown in the figure
below.
6. Save the File
7. After you have typed the HTML code, you have to save it as a HTML
file. Click on the File menu (in Notepad). Select Save As. Notepad will
show a dialog box asking for a file name as shown in the figure below .
8. In the File name textbox, type “[Link] or [Link]”. Click on save
button.
9. Then you opened the browser Internet explorer. (Start ■ All
programs ■Internet Explorer ■ ) or Double clicked on Internet explorer
Iconon the Desktop or taskbar .
10. Once the browser window is opened, then you opened the file from the
particular location that you will recall it “[Link]” .
(File■open■browse■Select the file ([Link]) ■open■ok)
11. The output is shown as per the following figure.
1.3 Basic tags used in HTML
The basic tags used in HTML are:
1 Heading tags
2 Paragraph Tag
3 Line Break Tag
4 Cente r Tag
5 Horizontal Lines
6 Preserve Formatting
7 Nonbreaking Spaces
1.3.1 Heading Tags
Any document starts with a heading. You can use different sizes for your
headings. HTML also has six levels of headings, which use the elements <h1>,
<h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds
one line before and one line after that heading. The lower the number, the larger the
heading size, as shown
Example
Type the HTML code in your Notepad window as shown in the figure
below.
The output is shown as per the following figure.
1.3.2 Paragraph Tag
HTML documents are divided into paragraphs. Paragraphs are defined with
the <p>tag. Each paragraph of text should go in between an opening <p>
and a closing </p> tag as shown below in the example:
Example
Type the HTML code in your Notepad window as shown in the figure
bellow.
The output is shown as per the following figure.
1.3.3 Line Break Tag
Use the <br /> tag , if you want a line break (a new line) without starting a
new paragraph. The <br /> element is an empty HTML element. It has no
end [Link]<br /> tag has a space between the characters br and the forward
slash. If you omit this space, older browsers will have trouble rendering the
line break, while if you miss the forward slash character and just use <br>
it is not valid in XHTML. Type the HTML code in your Notepad window
The output is shown as per the following on the web browser
1.3.4 Center Tag
You can use <center> tag to put any content in the center of the page or any table
cell. Type the HTML code in your Notepad window as shown in the figure
bellow.
The output is shown as per the following figure.
1.3.5 Horizontal Lines
Horizontal lines are used to visually break up sections of a document. The
<hr> tag creates a line from the current position in the document to the right
margin an d breaks the line accordingly. For example, you may want to give
a line between two paragraphs as in the given example below:
The output is shown as per the following figure.
1.3.6 Preserve Formatting or Preformatted Text:
The Preformatted Text element presents blocks of text in fixed -width font
and so is suitable for text that has been formatted on screen. The pre tag is
good for displaying computer code: It preserves both spaces and line breaks
and shows the text in a monospace font.
The output is shown as per the following figure.
1.3.7 Nonbreaking Spaces (nbsp)
In cases where you do not want the client browser to break text, you should
use a nonbreaking space entity   ; instead of a normal space. For
example, when coding the " DhrubaCharanPradhan " in a paragraph, you
should use something similar to the following code:
Type the HTML code in your Notepad window as shown in the figure
bellow.
The output is shown as per the following figure.
CHECK YOUR PROGRESS 2
Q1. How will you create a HTML Document and view it ? Explain its
steps.
Answer:____________________________________ ______________________
___________________________________________ _______________________
____________________________________________ ______________________
Q2. Write the different heading tags used in HTML ?
Answer:____________________________________ ______________________
Q3. Write the use of PRE tag in HTML ?
Answer:____________________________________ ______________________
___________________________________________ _______________________
___________________________________________ _______________________
Q4. Explain the different basic tags used in HTML ?
Answer:____________________________________ ______________________
___________________________________________ _______________________
____________________________________________ ______________________
Q5. What is the extension of an HTML Document ?
Answer:____________________________________ ______________________
_______________________________________________________ ___________
___________________________________________ _______________________
1.4 Elements in HTML
HTML Elements are broadly classified into two categories:
1. Text level Element
2. Block level element
1.4.1 Text level Element
Text level elements are the elements that affect the text of the document. These
elements are divided into two basic types:
1. Physical element
2. Logical element
Physical Elements
When working with the text, sometimes you want the text to have a
particular look, such as bold or italics or under lined, etc.
Logical E lement s
Logical elements indicatethe type of content that the text comprises
of. Examples of the logical elements are emphasis, citation, code,
strong etc.
1.4.1 .1Physical Elements
The c ommon physical elements are:
1. BOLD : The Bold element specifies that the text should be displayed in
bold face. Syntax: <B> ................... </B>
2. ITALIC : The Italic element specifies that the text should be displayed
using the italic font.
Syntax: <I > ................... </I>
3. UNDERLINE :The Underline element states that the enclosed text
should be underlined.
Syntax: <U > ................... </U>
4. BIG: The Big element specifies that the enclosed text should be
displayed using a bigger font (compared with the current font ).
Syntax: <B IG> ................... </B IG>
5. SMALL: The Small element specifies that the enclosed text should be
displayed using a smaller font (compa red with the current font ).
Syntax: <SMALL > ................... </SMALL >
6. BLINK : Surrounding any text with this element will cause the selected
text to blink on the viewing page.
Syntax: <BLINK > ................... </BLINK >
The <BLINK>< /BLINK> element is currently only supported by the
Netscape Navigator browser. In the internet explorer <marquee> is
used to get the same effect.
7. STRIKE : The Strike element states that the enclosed text should be
displayed with a hor izontal line striking through the text.
Syntax: <STRIKE> . . . <; STRIKE>
8. SUBSCRIPT : The Subscript element specifies that the enclosed text
should be displayed as a subscript using a smaller font (compared to the
rest of the text).
Syntax: <SUB> ... </SUB>
9. SUPERSCRIPT : The Superscript element specifies that th e enclosed
text should be display as a superscript using a smaller font (compared to
the rest of the text). Syntax: <SUP> ... </SUP>
10. TYPEWRITER :The Teletype element specifies th at the text should be
rendered in fixed -width typewriter font.
Syntax: <TT> ... </TT >
Example: Type the HTML code in your Notepad window as shown in
the figure bellow.
The output is shown as per the following figure
[Link] Logical Elements
The common logical elements are:
1. CITE: This element indicates a citation from a book or other published
source and is usua lly rendered in italics by a browser. It is used to highlight
external resources.
Syntax: <CITE> ... </CITE>
2. CODE: The Co de element indicates an example of cod, typi cally rendered
as monospaced font.
Syntax: <CODE> ... </CODE >
3. EMPHASIS: The Emphasis element indicates typographic emphasis
usually displayed in italic s.
Syntax: <EM> ... </EM >
4. KEYBOARD INPUT: The Keyboard element indicates text typed by a user,
typically rendered monospaced. It is commonly used in an instruction
manual.
Syntax: <KBD> ... </KBD>
5. SAMPLE: The Sample element indicates a sequence of literal characters,
typically dis played monospaced.
Syntax: <SAMP> ... </SAMP>
6. STRONG: The Strong element applies stronger emphasis, usually displayed
as bold.
Syntax: <S TRONG > ... </S TRONG >
7. VARIABLE: The Variable element indicates a variable name, typically
displayed in italics.
Syntax: <VAR> ... </VAR>
8. COMMENT: i f you want to leave notes for yourself in an HTML document,
but don't want th ose notes to show up in the browser window, you need to
use the Comment tag.
To include comments in the HTML document, surround the text that i s to
be ignored with <! - and ->. All text up to the next occurrence of -> is
ignored.
Example: Type the HTML code in your Notepad window as shown in
the figure bellow.
The output is shown as per the following figure
1.4.2. Block -Level Elements
Block formatting elements are used for formatting whole blocks of text
within an HTML document rather than a single character. Example
1. Heading tags
2. Paragraph tags
3. Preformatted tag
4. Line breaking tags
5. Horizontal Tags
6. Font Tags
The above tags from 1 to 5 are already discussed in Basic Tags of HTML . Font tag
will discuss later.
1.5Attributes in HTML
We have seen few HTML tags and their usage like heading tags
<h1>, <h2> paragraph tag <p> and other tags. We used them so far in their
simplest form, but most of the HTML tags can also have attributes, which
are extra bits of information. An attribute is used to define the characteristics
of an HTML element and is placed inside the element's opening tag. All
attribute s are made up of two parts: a name and a value:
1. 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.
2. 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
In the paragraph<p> tag uses align attribute: Type the HTML code in your
Notepad window as shown in the figure bellow.
Tag - <P>
Attribute - Align
Value -Left, Center, Right, Justified
Syntax : <P Align = “Left” > This is the left align
</P>
<P Align = “Center”> This is the Center align
</P>
<P Align = “Right”> This is the left align
</P>
<P Align = “Justified”> This is the left align
</P>
Attribute
Value of Attribute
The output is shown as per the following figure :
1.5.1 CORE ATTRIBUTES
The four core attributes that can be used on the majority of HTML elements
(although not all) are:
1. Id
(The id attribute of an HTML tag can be used to uniquely
identify any element within an HTML page )
Example:
<p id="html">Thispara explains what is HTML</p>
<p id="css">Thispara explains what is Cascading Style
Sheet</p>
2. Title
(The title attribute gives a suggested title for the element. )
Example:
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
3. Class
(The class attribute is used to associate an element with a style
sheet, and specifies the class of [Link] 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="className1 className2 className3"
4. Style
(The style attribute allows you to specify Cascading Style Sheet
(CSS) rules within the element. )
Example:
<body>
<p style="font -family : arial; color: #FF0000 ;"> some
text...</p>
</body>
1.5.2 Generic attributes
Here's a table of some other attributes that are readily usable with
many of the HTML tags.
Attribute Options Function
align right, left, center Horizontally aligns
tags
valign top, middle, bottom Vertically aligns tags
within an HTML
element.
bgcolor numeric,
hexadecimal, RGB
values Places a background
color behind an
element
background URL Places a background
image behind an
element
width Numeric Value Specifies the width
of tables, images, or
table cells.
height Numeric Value Specifies the height
of tables, images, or
table cells.
title User Defined "Pop -up" title of the
elements.
CHECK YOUR PROGRESS 3
Q1. Write the different types of Core attribute in HTML.
Answer:____________________________________ ______________________
___________________________________________ ______________________
__________________________________________________________________
_________
1.6 Formatting in HTML
You must be familiar with the ability to make text bold, italicized, or underlined. H TML
uses tags like <b>, <i> and <u> to modify the appearance of text, like bold, italic orunderline .
These HTML tags are called formatting tags.
To Format the text, use the following example:
The output is shown as per the following figure
1.7 Meta Tags and their use
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.
You can include one or more meta tags in your document based on what information
you want to keep in your document but in general, meta tags do not impact physical
appearance of the document so from appearance point of view, it does not matter if
you inclu de them or not.
Adding Meta Tags to Your 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:
Attribute Description
Name Name for the property. Can be
anything. Examples include,
keywords, description, author,
revised, generator etc.
Content Specifies the property's value.
Scheme Specifies a scheme to interpret the
property's value (as declared in the
content attribute).
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.
Specifying 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
Following is an example where we are add ing HTML, Meta Tags, Metadata
as important keywords about the document.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
This will produce following output :
1.8 Commenting a HTML Code
Comment is a piece of code which is ignored by any web browser. It is a good
practice to add comments into your HTML code, especially in complex documents,
to indicate sections of a document, and any other notes to anyone looking at the
code. Comments help you and others understand your code and increases code
readability. HTML comments are placed in between <! -- ... --> tag. So any content
placed within <! -- ... --> tag will be treated as comment and will be completely
ignored by the browser.
Example
<!DOCTYPE html>
<html>
<head><! -- Document Header Starts --><title>This is document
title</title></head><! -- Document Header Ends --><body>
<p>Document content Start here.....</p>
</body>
</html>
This will produce following result without displaying the content given as a part of
comments:
There are few browsers that support <comment> tag to comment a part of HTML
code.
1.9 Images and Incorporating Images
In HTML, images are defined with the <img>[Link] tag is empty, which
means that it contains attributes only and it has no closing tag. To display an image
on a page, you need to use the src attribute. src stands for “source”. The value of
the src attribute is the URL of th e image you want to dis -play on your page. The
syntax of defining an image:
<imgsrc="url" />
The URL points to the location or address where the image is s tored. An image file
named "Shreyash .gif" located in the directory "images" on " C:/Dhruba " has the
URL:
C:/Dhruba/Image/Shreyash. JPG
Example:
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title></head>
<body>
<imgsrc=" C:/Dhruba/Image/Shreyash. jpg " alt =”This a Test
Image”
height="150" width="120" Border=2 >
</body>
</html>
This will produce following output:
You can use PNG, JPEG or GIF image file based on your comfort but make sure
you specify correct image file name in src attribute. Image name is always case
sensitive.
Attributes of Image
Attribute Description
Src src stands for “source”. The value of the src
attribute is the URL of the image you want to
display on your page.
width It is specifythe width of the image.
height It is specifythe height of the image.
Border It is specifythe Border of the image.
Alt This attribute specifies an alternate text for an
image, if the image cannot be displayed.
Alignment By default image will align at the left side of the
page, but you can use align attribute to set it in the
center or right.
CHECK YOUR PROGRESS 4
Q1. What is srcattribute ?.
Answer:____________________________________ ______________________
___________________________________________ ______________________
______________________________________________ ___________________
Q2. What comment statement in HTML?.
Answer:____________________________________ ______________________
___________________________________________ _______________________
___________________________________________ _______________________
Q3. Write the different formatt ing tags in HTML ?.
Answer:____________________________________ ______________________
___________________________________________ _______________________
___________________________________________ _______________________
1.10 Working with Tables
Tables are an excellent way to organize and display information on a page.
Tables are defined using the <table>tag .A table is divided into rows with the <tr>
tag, and each row is divided into data cells using the <td> tag . The letters td stand
for “ table d ata,” which is the content of a data cell. A data cell can contain text,
images, lists, paragraphs, forms, horizontal rules, tables, and so on. Table headings
are defined with the <th> tag .
Table Tags
Tags Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell data(or
table data)
<caption> Defines a table caption
<thead> Defines a table head
<tbody > Defines a table body
<tfoot> Defines a table footer
There are two attributes called cell padding and cell spacing which you will
use to adjust the white space in your table cells. The cellspacing attribute defines
the width of the border, while cellpadding represents the distance between cell
borders and the content within a cell.
The use of colspan attribute if you want to merge two or more columns into
a single column. Similar way you will use rowspan if you want to merge two or
more rows. bgcolor attribute - You can set background color for whole table or just
for one cell. background attribute - You can set background image for whole table
or just for one [Link] bordercolor attribute use the border of the
table. Width andheight attribute is used for change the width and height of a table .
Example:
<!DOCTYPE html>
<html>
<head>
<title>H TML Table </title></head>
<body>
<table border="3" bordercolor="red" width=”400”
height=”100” >
<caption>Salary Table</caption>
<tr>
<thcolspan="2">Name</th>
<throwspan="2">Salary</th>
</tr>
<tr>
<thbgcolor="Yellow">First Name</th>
<thbgcolor="Yellow">Last Name</th>
</tr>
<tr>
<td>Shreyash</td>
<td>Pradhan</td>
<td>50000</td>
</tr>
<tr>
<td>Dhruba</td>
<td>Pradhan</td>
<td>32000</td>
</tr>
<tr>
<td>Happy</td>
<td>Mohanty</td>
<td>9300</td>
</tr>
</table>
</body>
</html>
This will produce following output:
CHECK YOUR PROGRESS 5
Q1. What is th and td tag in HTML ?.
Answer:____________________________________ ______________________
___________________________________ _______________________
Q2. Wha t are row span and column span?
Answer:____________________________________ ______________________
________________________________________________________________ __
___________________________________________ _______________________
1.11 working with List
HTML supports ordered, unordered, and definition lists.
1. <ul> - An unordered list. This will list items using plain bullets.
2. <ol> - An ordered list. This will use different schemes of numbers
to list your items.
3. <dl> - A definition list. This arranges your items in the same way as
they are arranged in a dictionary.
1.11.1 HTML Unordered Lists
An unordered list is a collection of related items that have no special order
or sequence. This list is created by using HTML <ul> tag. Each item in the list is
marked with a bullet. An unordered list starts with the <ul> tag. Each list item starts
with the <li>tag. You can use type attribute for <ul> tag to specify the type of bullet
you like. By default it is a [Link] are the possible options:
<ul type="square"> [■]
<ul type="disc"> [■]
<ul type="circle"> [■]
Example:
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>DCA</li>
<li>PGDCA</li>
<li>ADCA</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>DCA</li>
<li>PGDCA</li >
<li>ADCA</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>DCA</li>
<li>PGDCA</li>
<li>ADCA</li>
</ul>
</body>
</html>
This will produce following output:
1.11.2 HTML Ordered Lists
If you are required to put your items in a numbered list instead of bulleted
list then HTML ordered list will be used. This list is created by using <ol>[Link]
numbering starts at one and is incremented by one for each successive ordered list
element tagged with <li>. You can display di fferent kinds of ordered lists by using
the type attribute. By default it is a number. Following are the possible options:
<ol type="1"> - Default -Case Numerals.
<ol type="I"> - Upper -Case Roman Numerals.
<ol type="i"> - Lower -Case Roman Numerals.
<ol t ype="a"> - Lower -Case Letters.
<ol type="A"> - Upper -Case Letters.
You can use start attribute for <ol> tag to specify the starting point of numbering
you need. Following are the possible options:
<ol type="1" start="4"> ■ Numerals starts with 4.
<ol ty pe="I" start="4"> ■ Numerals starts with IV.
<ol type="i" start="4"> ■ Numerals starts with iv.
<ol type="a" start="4"> ■ Numerals starts with D .
<ol type="A" start="4"> ■ Numerals starts with d .
Example:
<html>
<body
<h4>Letters list:</h4>
<ol type="A">
<li>BCA</li>
<li>MCA</li>
<li>[Link]</li>
</ol>
<h4>Roman list:</h4>
<ol type="I">
<li>BCA</li>
<li>MCA</li>
<li>[Link]</li>
</ol>
<h4>Number list starts with 101:</h4>
<ol type="1" start=101>
<li>BCA</li>
<li>MCA</li>
<li>[Link]</li>
</ol>
</body>
</html>
This will produce following output:
1.11.3 HTML Definition Lists
HTML and XHTML support a list style which is called definition lists where entries
are listed like in a dictionary or encyclopedia. The definition list is the ideal way to
present a glossary, list of terms, or other name/value list.
Definition List makes use of following three tags.
■ <dl> - Defines the start of the list
■ <dt> - A term
■ <dd> - Term definition
■ </dl> - Defines the end of the list
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup
Language</dd><dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd></dl>
</body>
</html>
This will produce following output:
CHECK YOUR PROGRESS 6
Q1. Write the different types of List in HTML ?.
Answer:____________________________________ ______________________
___________________________________________ _______________________
1.12 Working with Hyperlinks
A webpage can contain various links that take you directly to other pages and even
specific parts of a given page. These links are known as hyperlinks. Hyperlinks
allow visitors to navigate between Web sites by clicking on words, phrases, and
images. Thus you can create hyperlinks using text or images available on a
webpage.
1.12.1 Linking Documents
A link is specified using HTML tag <a>. This tag is called anchor tag and
anything between the opening <a> tag and the closing </a> tag becomes part of the
link and a user can click that part to reach to the linked document. Following is the
simple syntax to use <a> tag.
<a href="Document URL" ... attributes -list>Link Text</a>
Example
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href=" D:/Dhruba/Shreyas/[Link] " >Myfile </a>
</body>
</html>
This will produce following result, where you can click on the link generated Myfile
to reach to the home page of myfile .
1.12.2 Linking to a Page Section
You can create a link to a particular section of a given webpage by using
name attribute. This is a two -step process. First create a link to the place where you
want to reach within a webpage and name it using <a...> tag as follows:
<h1>HTML Text Links <a name="top"></a></h1>
Second step is to create a h yperlink to link the document and place where you want
to reach:
<a href="/html/html_text_links.htm#top">Go to the Top</a> .This will produce
following link, where you can click on the link generated Go to the Top to reach to
the top of the HTML Text Link
1.13 Frames and Frame Management
HTML frames are used to divide your browser window into multiple sections where
each section can load a separate HTML document. A collection of frames in the
browser window is known as a frameset. The window is divided into frames in a
similar way the tables are organized: into rows and columns.
1.13.1 Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The
<frameset> tag defines how to divide the window into frames. The rows attribute
of <frameset> tag defines horizontal frames and cols attribute defines vertical
frames. Each frame is indicated by <frame> tag and it defines which HTML
document shall open into the frame.
Example
Let's put above example as follows, here we replaced rows attribute by colsand
changed their width. This will create all the three frames vertically:
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols="25%,50%,25%">
<frame name ="left" src="/html/top_frame.htm" />
<frame name="center" src="/html/main_frame.htm" />
<frame name="right" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
This will produce following result:
1.13.2 The <frameset> Tag Attributes
Following are important attributes of the <frameset> tag:
Attribute Description
cols specifies how many columns are contained in the
frameset and the size of each column.
rows This attribute works just like the cols attribute and takes
the same values, but it is used to specify the rows in the
frameset.
border This attribute specifies the width of the border of each
frame in pixels. For example border="5".
frameborder This attribute specifie s whether a three -dimensional
border should be displayed between frames. This
attribute takes value either 1 (yes) or 0 (no). For example
frameborder="0" specifies no border.
framespacing This attribute specifies the amount of space between
frames in a fr ameset. This can take any integer value. For
example framespacing="10" means there should be 10
pixels spacing
between each frames.
The <frame> Tag Attributes
Following are important attributes of <frame> tag:
Attribute Description
Src This attribute is used to give the file name that should
beloaded in the frame. Its value can be any URL. For
example,src="/html/top_frame.htm" will load an HTML
file availablein html directory.
Name This attribute allows you to give a name to a frame. It is
usedto indicate which frame a document should be
loaded [Link] is especially important when you want
to create links inone frame that load pages into another
frame, in which casethe second frame needs a name to
identify itself as the targetof the li nk.
Frameborder This attribute specifies whether or not the borders of
thatframe are shown; it overrides the value given in the
frameborder attribute on the <frameset> tag if one is
given,and this can take values either 1 (yes) or 0 (no).
Marginwidth This attribute allows you to specify the width of the
spacebetween the left and right of the frame's borders
and theframe's content. The value is given in pixels. For
examplemarginwidth="10".
Marginheight This attribute allows you to specify the height of the
spacebetween the top and bottom of the frame's borders
and itscontents. The value is given in pixels. For
examplemarginheight="10".
Noresize By default you can resize any frame by clicking and
draggingon the borders of a frame. The noresize attribute
prevents auser from being able to resize the frame. For
examplenoresize="noresize".
scrolling This attribute controls the appearance of the scrollbars
thatappear on the frame. This takes values either "yes",
"no" or"auto". For example scrolling="no" mean s it
should not havescroll bars.
1.13.3 Mixed Frameset
The following example demonstrates how to make a frameset with three documents
and how to mix them in rows and columns,
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</frameset>
</html>
1.14 Working with IFrame
Frames can also be used within a single HTML page. These are known as inline
frames. You can define an inline frame with HTML tag <iframe> . The <iframe>
tag is not somehow related to <frameset> tag, instead, it can appear anywhere in
your document. The <iframe> tag defines a rectangular region within the document
in which the browser can d isplay a separate document, includingscrollbars and
borders.
The srcattribute is used to specify the URL of the document that occupies the inline
frame.
Example
Following is the example to show how to use the <iframe>
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src="/html/[Link]" width="555" height="200">
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>
The <Iframe> Tag Attributes
Most of the attributes of the <iframe> tag, including name, class, frameborder, id,
longdesc, marginheight, marginwidth , name, scrolling, style, and title behave
exactly like the corresponding attributes for the <frame> tag.
1.15 Working with Block Elements
All the HTML elements can be categorized into two categories
(a) Block Level Elements
(b) Inline Elements
1.15.1 BLOCK ELEMENTS
Block elements appear on the screen as if they have a line break before
andafter them. For example the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
<ul>,<ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all
blocklevel el ements. They all start on their own new line, and anything that
followsthem appears on its own new line.
1.15.2 INLINE ELEMENTS
Inline elements, on the other hand, can appear within sentences and do
nothave to appear on a new line of their own. The <b>, <i>, <u>, <em>,
<strong>,<sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>,
<dfn>,<kbd>, and <var> elements are all inline elements.
Grouping HTML Elements
There are two important tags which we use very frequently to group variousother
HTML tags
(i) <div> tag
(ii) <span> tag
The <div> tag
This is the very important block level tag which plays a big role in
groupingvarious other HTML tags and applying CSS on group of elements. Even
now<div> tag can be used to create webpage layout whe re we define different
parts(Left, Right, Top etc.) of the page. This tag does not provide any visual
changeon the block but this has more meaning when it is used with CSS.
The <span> tag
The HTML <span> is an inline element and it can be used to group inl ine
elements in an HTML document. This tag also does not provide any visual change
on the block but has more meaning when it is used with CSS. The difference
between the <span> tag and the <div> tag is that the <span>tag is used with inline
elements whereas the <div> tag is used with block -levelelements.
Example
Following is a simple example of <span> tag. We will learn Cascading StyleSheet
(CSS) in a separate chapter but we used it here to show the usage of<span> tag:
<!DOCTYPE html>
<html>
<head>
<title> HTML span Tag</title>
</head>
<body>
<p>This is <span style="color:red">red</span> and this
is <span style="color:green">green</ span></p>
</body>
</html>
This will produce following result:
CHECK YOUR PROGRESS 7
Q1. Write the different types of attributes in frameset?.
Answer:___________________________ _______________________________
Q2. What is Hyperlink?.
Answer:__________________________________________________________
Q3. What is I Frame ?
Answer:__________________________________________________________
________________________________________________ __________
Q4. What is span and div tag in HTML?.
Answer:_____________________________________ _____________________
________________________________________________ _________
1.16 CHECK YOUR PROGRESS - POSSIBLE ANSWER
CHECK YOUR PROGRESS 1
Q1. What does HTML stand for?
Answer: HTML stands for Hyper Text Mark up Language.
Q2. Write the characteristics of HTML?
Answer: Characteristics of HTML are
■ Easy to understand and can be modified.
■ Provides more flexible way to design web pages, along with text.
■ Graphics, Video and Sound can also be used and imported to give
attractive look to the Web Pages.
■ Effective presentations can be made with all formatting effects.
■ Links can also be added to help readers to browse through
information of their interest.
■ You can create and publish Web pages to share information w ith
people around the world.
Q3. Write the different version of HTML?
Answer: The different version of HTML
HTML 1.0, HTML 2.0, HTML3.0, HTML 4.0, HTML 5.0
Q4. Write the structure of HTML document?
Answer:__ The general structure of HTML document has two sections: Head and
Body.
3. Head section : The Head section contains the Title that identifies
the first part of your HTML coded document.
4. Body section : The body section is where you do most of the
works that includes text, graphics, and other HTML elements
that provide control and formatting of a page like: fonts,
paragraph, list and other elements. The general format of HTML
document is:
Q5. What types of HTML Editor and Browser use ?
Answer: _HTML editor is note pad and browsers are like IE,MOZILA .GOOGLE
CHROME etc.
CHECK YOUR PROGRESS 2
Q1. How will you create a HTML Document and view it? Explain its steps.
Answer:
12. In windows, click START Button.
13. Navigate to PROGRAMS and then click on ACCE SSORIES.
14. Click on NOTEPAD
15. A NOTEPAD window will appear.
After you have typed the HTML code, you have to save it as a HTML
file. Click on the File menu (in Notepad). Select Save As. Notepad will
show a dialog box asking for a file name as shown in the figu re be
Q2. Write the different heading tags used in HTML?
Answer: we can use different sizes for your headings. HTML also has six levels
of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> .
While displaying any heading, browser adds one line before and one line after that
heading.
Q3. The use of PRE tag in HTML?
Answer:_ The pre tag is good for displaying computer code: It preserves both
spaces and line breaks and shows the text in a mo nospace font.
Q4. Explain the different basic tags used in HTML?
Answer:__ The basic tags used in HTML are:
8 Heading tags
9 Paragraph Tag
10 Line Break Tag
11 Center Tag
12 Horizontal Lines
13 Preserve Formatting
14 Nonbreaking Spaces
Q5. What is the extension of an HTM L Document ?
Answer: The extension of HTML is .html [Link]
CHECK YOUR PROGRESS 3
Q1. Write the different types of Core attribute in HTML.
Answer: The four core attributes that can be used on the majority of HTML
elements are:
1. Id
2. Title
3. Class
4. Style
CHECK YOUR PROGRESS 4
Q1. What is srcattribute ?.
Answer: The attribute of img src are width,height,alt. alternate,border .
Q2. What comment statement in HTML?.
Answer
HTML comments are placed in between <! -- ... --> tag. So any content placed
within <!-- ... --> tag will be treated as comment and will be completely ignored by
the browser.
Q3. Write the different formatting tags in HTML ?.
Answer:_ HTML uses tags like <b>, <i> and <u>,<small>,<strong>,<big> to
modify the appearance of text, like bold, italic or underline . These HTML tags are
called formatting tags.
CHECK YOUR PROGRESS 5
Q1. What is th and td tag in HTML ?.
Answer: Table is divided into rows with the <tr> tag , and each row is
divided into data cells using the <td> tag . The letters td stand for “ table data ,”
which is the content of a data cell. Table headings are defined with the <th> tag .
Q2. What are row span and colspan?
Answer: The use of colspan attribute is used to merge two or more columns into
a single col umn. Similarly way you will use rowspan if you want to merge two
or more rows.
CHECK YOUR PROGRESS 6
Q1. Write the different types of List in HTML ?.
Answer: HTML supports different lists like ordered, unordered, and definition
lists.
<ul> - An unordered list. This will list items using plain bullets.
<ol> - An ordered list. This will use different schemes of numbers
to list your items.
<dl> - A definition list. This arranges your items in the same way as
they are arranged in a dictionary .
CHECK YOUR PROGRESS 7
Q1. Write the different types of attributes in frameset?.
Answer: The different types of attributes in frameset
Cols , rows, border, frameborder, framespacing etc.
Q2. What is Hyperlink?.
Answer: A webpage can contain various links that take you directly to other pages
and even specific parts of a given page. These links are known as hyperlinks.
Q3. What is I Frame?
Answer: Frames can also be used within a single HTML page. These are known as
inline frames. You can define an inline frame with HTML tag <iframe> .
Q4. What is span and div tag in HTML?.
Answer:
The <div> tag
<div> tag can be used to create webpage l ayout where we define different
parts(Left, Right, Top etc.) of the page. This tag does not provide any visual change
on the block but this has more meaning when it is used with CSS.
The <span> tag
The HTML <span> is an inline element and it can be used to group inline
elements in an HTML document. This tag also does not provide any visual change
on the block but has more meaning when it is used with CSS.
The difference between the <span> tag and the <div> tag is that the
<span>tag is used with inline eleme nts whereas the <div> tag is used with block -
level elements.
1.17 REFERENCE
1. [Link]
2. www. [Link]
3. www . [Link]
4. HTML Mc Grew Hill
5. HTML Bible
6. HTML complete reference
Unit -2
HTML Advanced
Learning objectives:
After the Completion of this unit you should be able to know
■ Applying background colour& image.
■ Different types fonts, font size and colour.
■ Moving or scrolling a tex t using Marque tag
■ Form Design
■ Layouts of HTML
Structure
2.1 Background images
2.1.1 Background Image
2.1.2 Background Color
2.2 How to get a coloured text and coloured background
2.3 Working with fonts (Various fonts, size, color)
2.4 Form designing and Form Management
2.4.1 Text Input control
2.4.2 Checkbox Controls
2.4.3 Radio Box Controls
2.4.4 Select box control
2.4.5 Hidden Controls
2.4.6 Clickable Buttons
2.4.7 Submit and Reset Buttons
2.5 Using Multimedia inside HTML
2.5.1 Music with audio
2.5.2 Moving media with video
2.6 Marquee Tag
2.7 Headers
2.8 Working with Layouts
2.9 Role of Tags in Html
2.10 Attributes in Html
2.11 Event Handling
2.11.1 Windows event
2.11.2 Form Element Events
2.11.3 Keyboard Events
2.11.4 Mouse Events
2.12 Mime Media Types
2.13 Check Your Progress Possible Answer
2.14 Reference
2.1 Background Images
By default, your webpage background is white in [Link] provides you
following two good ways to decorate your webpage background.
1. Html Background with Images
2. Html Background with Colors
2.1.1Html Background with Images
The background attribute can also be used to control the background of an
HTML element, specifically page body and table backgrounds. You can specify an
image to set background of your HTML page or table. Following is the syntax to
use background attribute with any HTML tag.
Note: The background attribute is deprecated and it is recommended to use Style
Sheet for background setting.
<tag name background="Image URL"……..>
The most frequently used image formats are JPEG, GIF and PNG images.
Example
Here a re the examples to set background images in a body .
This will produce following result:
2.1.2 Html Background with Colors
The bgcolor attribute is used to control the background of an HTML
element, specifically page body and table backgrounds. Following is the syntax to
use bgcolor attribute with any HTML tag.
Syntax:
<tagnamebgcolor="color_value"...>
Different background colors are:
Example:
Here are the examples to set background of an HTML tag:
This will produce following result:
2.2 How to get coloured text and coloured
background
Colors are very important to give a good look and feel to your website. You can
specify colors on page level using <body> tag or you can set colors for individua l
tags using bgcolor attribute. The <body> tag has following attributes which can be
used to set different colors:
bgcolor - sets a color for the background of the page.
text - sets a color for the body text.
There are following three different methods to set colors in your web page:
■ Color names - You can specify color names directly like green, blue or red.
■ Hex codes - A six -digit code repres enting the amount of red, green, and blue
that makes up the color.
■ Color decimal or percentage values - This value is specified using the rgb (
) property.
Example
Here are the examples to set background of an HTML tag by color name:
HTML Colo rs - Hex Codes
A hexadecimal is a 6 digit representation of a color. The first two digits (RR)
represent a red value, the next two are a green value (GG), and the last are the blue
value (BB).
Each hexadecimal code will be preceded by a pound or hash sign (#). Following is
a list of few colors using hexadecimal notation.
Following is a list to show few colors using RGB values.
Here are the codes to set background of an HTML tag by color code using rgb()
values:
<!DOCTYPE html>
<html>
<hea d>
<title>HTML Colors by RGB code</title>
</head>
<body text="rgb(0,0,255)" bgcolor="rgb(0,255,0)">
<p>Use different color code for body and table and see the result.</p>
</body>
</html>
CHECK YOUR PROGRESS 1
Q1. Write the full form of RGB color.
Answer:__________________________________________________________
___________________________________________________________
Q2. Which attribute is used to set the background image.
Answer:____________________________________ ___________ ___________
___________________________________________ _______________________
____________________________________________ ______________________
2.3 Working with fonts
The Font element lets you change the color, size, and face of the font. The
Font tag overri des any other settings. In other words, text within the scope of the
Font tag is displayed in the color and size you specify, regardless of any other
settings. Font tag has the following attributes:
1. FACE: This attribute allows you to change of th e face of the HTML
document. For examp le Arial, Times New Roman, etc.
2. COLOR: This attribute defines the text color to be set. Colors can either
be set by using one of the color names or as a hex 'rrggbb' triplet value.
Where r -red, g -green, b -blue.
3. SIZE: This attribute defines the size of the font, in a range from 1 to 7,
with a default size of 3.
Syntax:
<FONT FACE="fontlist" COLOR="color" SIZE="fontsize">
………………
………………
</FONT>
Example:
Tag - <FONT>
Attribute - FACE, COLOR, SIZE
Value -
Face : Times New Roman, Impact, Bookman old style,
Courier New,
Arial, Arial Black.
Color : Red, Green, Blue , Purple, Cyan, Maroon etc.
Size : The range of accepted values is from 1(smallest) to
7(largest).
The default size of a font is 3.
Example
This will produce following result:
2.4 Form Designing and Form Management
HTML Forms are required when you want to collect some data from
the site visitor. For example, during user registration you would like to collect
information such as name, email address, credit card, etc. A form will take input
from the site visitor and t hen will post it to a back -end application such as CGI,
ASP Script or PHP script etc. The back -end application will perform required
processing on the passed data based on defined business logic inside the application.
There are various form elements avai lable like text fields, textarea fields, drop -
down menus, radio buttons, checkboxes, etc. The HTML <form> tag is used to
create an HTML form and it has following syntax:
<form action="Script URL" method="GET|POST">
form elements like input, text area etc
</form>
Form Attributes
Apart from common attributes, following is a list of the most frequently used form
attributes:
Attribute Description
action Backend script ready to process your
passed data.
method Method to be used to upload data.
The most frequently used are GET
and POST methods.
target Specify the target window where the
result of the script will be displayed.
It takes values like blank, self,
_parent etc.
enctype You can use the enctype attribute to
specify how the browser encodes the
data before it sends it to the server.
Possible values are:
HTML Form Controls
There are different types of form controls that you can use to collect data using
HTML form
■ Text Input Controls
■ Checkboxes Controls
■ Radio Box Controls
■ Select Box Controls
■ File Select boxes
■ Hidden Controls
■ Clickable Buttons
■ Submit and Reset Button
2.4.1 Text Input Controls
There are three types of text input used on forms:
■ Single -line text input controls - This control is used for items that require
only one line o f user input, such as search boxes or names. They are created
using HTML <input> tag.
■ Password input controls - This is also a single -line text input but it masks
the character as soon as a user enters it. They are also created using HTML
<input> tag.
■ Mult i-line text input controls - This is used when the user is required to give
details that may be longer than a single sentence. Multi -line input controls
are created using HTML <textarea> tag.
[Link] Single -line text input controls
This control is used for items that require only one line of user input, such as search
boxes or names. They are created using HTML <input> tag.
Example:
Here is a basic example of a single -line text input used to take first name and last
name.
Attributes
Following is the list of attributes for <input> tag for creating text field.
Attribute Description
type Indicates the type of input control and for password input
control it will be set to password.
name Used to give a name to the control which is sent to the
server to be recognized and get the value.
value This can be used to provide an initial value inside the
control.
size Allows to specify the width of the text -input control in
terms of characters.
maxlength Allows to specify the max imum number of characters a
user can enter into the text box.
[Link] Multiple -Line Text Input Controls
This is used when the user is required to give details that may be longer than a single
sentence. Multi -line input controls are created using HTML < textarea> tag.
Example
Here is a basic example of a multi -line text input used to take item description:
<!DOCTYPE html>
<html>
<head>
<title>Multiple -Line Input Control</title>
</head>
<body>
<form>
Description :<br />
<textarea rows="5" cols="50" name= "description"> Enter description
here...
</textarea>
</form></body></html>
Following is the list of attributes for <textarea> tag.
2.4.2 Checkbox Control
Checkboxes are used when more than one option is required to be selected. They
are also created using HTML < input> tag but type attribute is set to checkbox.
Example
Here is an example HTML code for a form with two checkboxes:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
</body> Attribute Description
name Used to give a name to the control which is sent to the
server to be recognized and get the value.
rows Indicates the number of rows of text area box
cols Indicates the number of columns of text area box
</html>
Attributes
Following is the list of attributes for checkbox.
Attribute Description
type Indicates the type of input control and for checkbox input
control it will be set to checkbox.
name Used to give a name to the control which is sent to the
server to be recognized and get the value.
value The value that will be used if the checkbox is selected.
checked Set to checked if you want to select it by default.
2.4.3 Select Box Control
A select box, also called drop down box which provides option to list down various
options in the form of drop down list, from where a user can select one or more
options.
Example
Here is example HTML code for a form with one drop down box.
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option><option
value="Physics">Physics</option>
<option value="dca" selected>Dca</option><op tion
value="Dcs">Dcs</option>
</select>
</form>
</body>
</html>
Attributes
Following is the list of important attributes of <select> tag:
Attribute Description
Value Used to give a name to the
control which is sent to the
server to be recognized and get
the value.
Size This can be used to present a
scrolling list box.
Multiple If set to "multiple" then allows a
user to select multiple items
from the menu..
Following is the list of important attributes of <option> tag:
Attribute Description
Value The value that will be used if an option in the select box
box is selected.
Selected Specifies that this option should be the initially selected
value when the page loads.
Label An alternative way of labeling options
2.4.4 File Select boxes
Submit and Reset, Button
Type Description
Submit This creates a button that automatically submits a form
Reset This creates a button that automatically resets form controls
to their initial values.
Button This creates a button that is used to trigger a client -side
script when the user clicks that button.
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok " value="OK" />
<input type="image" name="imagebutton" src="/html/images/[Link]"
/>
</form>
</body>
</html>
HTML5 Input Types
HTML5 added several new input types:
■ color
■ date
■ datetime
■ datetime -local
■ month
■ number
■ range
■ search
■ tel
■ time
■ url
■ week
Input Type color
color
Gives the user a color picker to choose a color.
<form>
CHOOSE U R FAVORITE COLOR <input type="color" value= "#b97a59 ">
<form>
Input Type DATE
date
Offers a datepicker. To the user.
U R DOB: <form><input type="date" value="2016 -07-08"></form>
Input Type DATETIME
An element to choose both date and time.
CURRENT TIME:<input type="datetime" value="2011 -06-09T[Link].32">
Input Type DATETIME
An element to choose both date and time, with local settings support.
LOCAL TIME:<input type="datetime -local" value="2011 -06-09T22:41">
Input Type EMAIL
A field for entering e -mail address(es).
Enter ur email id:<input type="email" value="[Link]@[Link]">
Input Type Month
The <input type="month"> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
<form>
Birthday (month and year):
<input type="month" value="2011 -06">
</form>
Input Type Number
■ The <input type="number"> defines a numeric input field.
■ You can also set restrictions on what numbers are accepted.
■ The following example displays a numeric input field, where you can enter
a value from 1 to 5:
<form>
Numbers (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Input Type Range
The <input type="range"> is used for input fields that should contain a value
within a range.
Depending on browser support, the input field can be displayed as a slider control.
<form>
UR HEIGHT IN FT. <input type="range" name="points" min="0 " max="10">
</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a
regular text field).
<input type="search" value="[Any search text]">
<form>
Search Google:
<input type="search" value=" googlesearch">
</form>
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone
number.
The tel type is currently supported only in Safari 8.
<form>
CONTACT NO:
<input type="tel" name="usrtel">
</form>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
<form>
Select a time:
<input type="time" name="usr_time">
</form>
Input Type Url
The <input t ype="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when
submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match
url input.
<form>
Add your homepage:
<input type="url" name="homepage">
</form>
Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
<form>
Select a week:
<input type="week" name="week_year">
</form>
Example of Form Design Control
<!DOCTYPE html>
<html>
<head>
<title> Input Control</title>
</head>
<body><h3><center>Example of Form Design Controls </enter></h3>
<form>
<p> First name:<input type="text" name="first_name" />
Last name: <input type="text" name="last_name" /><br></p>
<p>Gender : <input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="o ther">Other<br></p>
<p>Hobbies : <input type="checkbox" name="Read" value="on"> Reading
<input type="checkbox" name="Act" value="on"> Acting
<input type="checkbox" name="Play" value="on"> Playing
<input type="checkbox" name="Swim" value="on"> Swimmi ng
<br>
Favorite color: <input type="color" name="favcolor"></p>
District: <select name="Dist">
<option value="1" selected>Angul</option><option
value="2">Cuttack</option>
<option value="3">Kalahandi</option><option value=4"> Bari</option>
</select>
Search Google: <input type="search" name="googlesearch"><br>
<p>Birthday: <input type="date" name="bday">
Select a time: <input type="time" name="usr_time">
</p>
User ID : <input type="text" name="user_id" >
Password : <input type="password" name="password" ><br></p>
<p> Telephone: <input type="tel" name="usrtel">
Website : <input type="url" name="homepage"></p>
</p>
Birthday (month and year):<input type="month" name="bdaymonth">
<label>
Email Address
<input type="email" name="email -address" placeholder= "name@[Link]">
</label>
<p>Description :<br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</p>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
</form>
Note : some broswer may not be support
</body>
</html>
CHECK YOUR PROGRESS 2
Q1. Write the different face value of Font tag.
Answer:____________________________________ ______________________
___________________________________________ _______________________
___________________________________________ _______________________
2.5 Using Multimedia inside HTML
2.5.1 Music with audio
HTML5 supports a variety of media tags (and media formats) for media
playback in web browsers. Because HTML5 remains something of a work in
progress, not all formats work for all media in all browsers. Simply stated, there are
two primary media elements for HTML5, both of
which are absurdly easy to use. The audio element is named <audio>, and the video
element is named <video>. Here’s a simplified version of what audio markup looks
like:
<audio src=”[Link]” controls >Alternatives</audio>
Here the src attribute points to the audio file you’d like to have played [Link]
specifies the location for the audio object for playback. The location must be a valid
URI (Uniform Resource Identifier) that, just like a URL, identifieswhere the
browser should look for the audio file. The controls entry stands in for a number of
control attributes you can use to manage audio playback and behavior, as follows
(presented in alphabetical order):
■ Auto play: Tells the browser to start playing audio as soon as the objectfile
is loaded. The only legal value for this attribute is autopl ay but no value is
strictly required in HTML5.
■ Controls: Tells the browser to display an onscreen widget to control audio
playback (usually with Pause/Play buttons, a progress bar, and volume
controls). As with autoplay, the only legal value for this attri bute is controls,
but no value is strictly required in HTML5.
■ loop: Tells the browser to go back to the beginning and keep playing when
it gets to the end of the object file. Here, too, the only legal value for this
attribute is loop, and no value is stric tly required.
■ preload : Tells the browser whether it should preload the object file, and if
so how it should be preloaded. Possible values include
■ none : Doesn’t load any part of the audio file when the page
loads
■ Metadata: Loads only the audio metadata when the page
loads. It also sets up playback but doesn’t have data loaded
yet.
■ Auto: Loads entire audio file when the page loads.
The preload attribute is ignored if autoplay is present.
Here’s some markup that won’t play back an .oggaudio file until the user triggers the Play button on the
onscreen controls, with continuous looping as long as the page stays onscreen. We also provide WAV
and MP3 alternatives for older browsers:
<audio controls preload=”none” loop>
<source src=”[Link]” type=”audio/ogg”>
<source src=”[Link]” type=”audio/x -wav”>
<source src=”sound.mp3” type=”audio/mpeg”>
<p>Browser does not support HTML5 audio; alternate
playback provided.</p>
</audio>
2.5.2 Moving media with video
Unlike audio, which doesn’t actually require much (o r any) space on thescreen, video requires an onscre
frame, as well as more sophisticated and more numerous controls. That’s why although the two markup
elements are similar, video comes with considerably more baggage, even though the basic structure of
the element remains the same as before:
<video src=”[Link]” controls >Alternatives</video>
Here the srcattribute points to the video file you’d like to have played back. It specifies the name of the
video object file for playback and must be a valid URI. Example: src=”[Link]” .
Sometimes you need to add music or video into your web page. 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.
2.5.3 Supported Video Types
You can use various media types like Flash movies (.swf), AVI's (.avi), and MOV's
(.mov) file types inside embed tag.
■ .swf files - are the file types created by Macromedia's Flash program.
■ .wmv files - are Microsoft's Window's Media Video file types.
■ .mov files - are Apple's Quick Time Movie format.
■ .mpeg files - are movie files created by the Moving Pictures Expert Group.
Here is a simple example to play a small midi file:
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<bgsoundsrc="/html/[Link]">
<noembed><imgsrc="[Link]" ></noembed>
</bgsound>
</body>
</html>
2.6 Marquee Tag
An HTML marquee is a scrolling piece of text displayed either horizontally across
or vertically down your webpage depending on the settings. This is created by using
HTML <marquee> tag. The HTML <marquee> tag may not be supported by
various browsers and CS S to create such effects.
Syntax
A simple syntax to use HTML <marquee> tag is as follows
<marquee attribute_name="attribute_value"....more attributes> lines or text
message or image </marquee>
The <marquee> Tag Attributes
Following is the list of important attributes which can be used with <marquee> tag.
Type Description
Width This specifies the width of the marquee. This can be a value
like 10 or 20% etc.
Height This specifies the height of the marquee. This can be a value
like 10 or 20% etc.
Direction This specifies the direction in which marquee should scroll.
This can be a value like up, down, left or right.
Behavior This specifies the type of scrolling of the marquee. This can
have a value like scroll, slide and alternate.
Scrolldelay This specifies how long to delay between each jump. This
will have a value like 10 etc.
Scrollamount
This specifies the speed of marquee text. This can have a
value like 10 etc.
Loop This specifies how many times to loop. The default value is
INFINITE, which means that the marquee loops endlessly.
Bgcolor This specifies background color in terms of color name or
color hex value.
Hspace This specifies horizontal space around the marquee. This
can be a value like 10 or 20% etc.
Vspace This specifies ver tical space around the marquee. This can
be a value like 10 or 20% etc.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee></body>
</html>
CHECK YOUR PROGRESS 3
Q1. What is Marquee Tag & write its attributes?
Answer:____________________________________ ______________________
___________________________________________ _______________________
________________________________________________ __________________
Q2. Write the fullform of mpeg, mov,wmv and swf of video files.
Answer:____________________________________ ______________________
___________________________________________ _______________________
____________________________________________ ____________ __________
2.7 Headers
We have learnt that a typical HTML document will have following structure:
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
The <head > tag is a container of various important tags like <title>,
<meta> ,,<base>, <style>, <script>, <link>, and <noscript> tags.
1. The HTML <title> Tag
The HTML <title> tag is used for specifying the title of the HTML document.
Following is an example to give a title to an HTML document:
Syntax
<Title>…………………….< /Title>
Example:
<Title> This is my 1st webpage </Title>
2. The HTML <meta> Tag
The HTML <meta> tag is used to provide metadata about the HTML document
which includes information about page expiry, page author, list of keywords, page
description etc.
Syntax
<meta name=" " content=" ">
Example:
<meta name="keywords" content="C, C++, Java, PHP, Perl, Python">
<meta name="author" content= "D.C Pradhan& S.K Mohanty ">
<meta name="description" content="Simply Easy Learning HTML ">
3. The HTML <base> Tag
The HTML <base> tag is used for specifying the base URL for all relative URLs in
a page, which means all the other URLs wil l be concatenated into base URL while
locating for the given item.
Syntax
<base href=" website name ” />
Example:
<base href="[Link] />
4. The HTML <style> Tag
The HTML <style> tag is used to specify style sheet for the current HTML
document.
Example
<style type="text/css">
.myclass{
background -color: #aaa;
padding: 10px;
}
2.8 Working with Layouts
A webpage layout is very important to give better look to your website. It takes
considerable time to design a website's layout with great look and feel.
Now a days, all modern websites are using CSS and JavaScript based framework
to come up with responsive and dynamic websites but you can create a good layout
using simple HTML tables or division tags in combination with other formatting
tags.
HTML Layout - Using Tables
The simplest and most popular way of creating layouts is using HTML <table> tag.
These tables are arranged in columns and rows, so you can utilize these rows and
columns in whatever way you like.
Example
HTML layout example is achieved usi ng a table with 3 rows and 2 columns
but the header and footer column spans both columns using the colspan attribute:
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title></head>
<body>
<table width="100%" border="0">
<tr>
<td colspan="2" bgcolor="#b5dcb3">
<h1>This is Web Page Main title</h1></td>
</tr>
<trvalign="top">
<td bgcolor="#aaa" width="50">
<b>Main Menu</b><br /> HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor="#eee" width="100" height="200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#b5dcb3">
<center>
Copyright © [Link] </center></td>
</tr></table></body></html>
This will produce following output:
2.9 Roles of Tags in HTML
<html> ... </html> Encloses the entire HTML document.
<head> ... </head> Encloses the head of the HTML document (i.e. the title tag,
etc.).
<title> text</title> Indicates the title of the document. This appears in the title
bar
of the browser and is the name used when a user bookmarks
the
page; it does not display in the actual text area of the browser
itself.
<base href="url"> Contains the URL or address of the current page. It allows
you to
easily use relative links (also included in the header area).
<body> ... </body> Encloses the body (text and tags) of the HTML document. A
optional format of this tag sets the background color:
<body bgcolor="#RRGGBB">.
2.9.1 Headings
<h1> text</h1> A first -level heading. (Most often used as the title which does
appear in the document).
<h2> text</h2> A second -level heading.
<h3> text</h3> A third -level heading.
<h4> text</h4> A fourth -level heading.
<h5> text</h5> A fifth -level heading.
<h6> text</h6> A sixth -level heading.
2.9.2 Paragraphs
<p>text</p> Indicates a paragraph.
<blockquote>
text paragraphs
</blockquote> Indents a block of text.
2.9.3 Character Formatting - Logical Highlighting
<strong> text</strong>
Strong emphasis. (Usually displays as bold).
<em> text</em> Emphasis. (Usually displays as italics).
<cite> text</cite> A small citation reference.
<code> text</code> A selection of typed computer code (i.e. fixed width font).
2.9.4 Character Formatting - Physical Highlighting
<b>text</b> Boldfaced text.
<i>text</i> Italicized text.
<u>text</u> Underlined text. (Can be confused with links which are
displayed as underlined text).
2.9.5 Changing Font Size
<font size="value"> text</font>
Changes the size of the font without using a heading tag.
Enter a value between " -2" and "+6".
Example: <font size="+2">text</font>.
Other Elements
<hr> A horizontal rule/line. Often referred to as a shadow rule.
<br> A line break.
<!--text --> A comment. This text does not appear in the browser.
Lists
<ol> ... </ol> An ordered (numbered) list. Precede all i tems on the list with
the
<li> tag. Specify starting number by adding start=#. Specify
bullet
type by adding type= followed by one of: "1 a A i I".
<ul> ... </ul> An unordered (bulleted) list. Specify bullet type by adding
type= followed by one of "disk square circle".
<li>text A list item: for use inside <ol> or <ul>.
<dl> ... </dl> A definition or glossary list enclosing the <dt> and <dd>
tags.
<dt> text</dt> A definition term: for use inside <dl>.
<dd> text</dd> The corresponding definition to each <dt > term as a part of a
definition list.
2.10 Attributes in HTML
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 pr operty to be set and always
put within quotations. The below example shows three possible values of
align attribute: left, center and right .
2.10.1 Core Attributes
The four core attributes that can be used on the majority of HTML elements
(although not all) are:
■ Id (The id attribute of an HTML tag can be used to uniquely identify any
element within an HTML page.)
■ Title (The title attribute gives a suggested title for the element.)
■ Class (The class attribute is used to associate an element with a style sheet,
and specifies the class of element.)
■ Style (The style attribute allows you to specify Cascading Style Sheet (CSS)
rules within the element.)
Language Attributes
Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.
ATTRIBUTE VALUE DESCRIPTION
dir ltr | rtl Sets the text
direction
lang language_code Sets the
language code
Keyboard Attributes
ATTRIBUTE VALUE DESCRIPTION
accesskey character Sets a keyboard shortcut to access
an element
tabindex number Sets the tab order of an element
2.11 Event Handling
When a user visit your website, they do things like click on text and images and
given links, hover over things etc. These are examples of what JavaScript calls
events.
We can write our event handlers in Javascript or vbscript and you can specify these
event handlers as a value of event tag attribute. The HTML5 specification defines
various event attributes as listed below −
There are following attributes which can be used to trigger any
javascript or vbsc ript code given as value, when there is any event occurs for any
HTM5 element.
We would cover element specific events while discussing those elements in detail
in subsequent chapters or blocks.
There are 4 types of event handler used in HTML:
1. Windows event
2. Form Element Events
3. Keyboard Events
4. Mouse Events
2.11.1 Window Events
These attributes are valid only in body and frameset elements.
Attribute Value Description
onload script Script to be
run when a
document
loads
onunload script Script to be
run when a
document
unloads
2.11.2 Form Element Events
These attributes are valid only in form elements.
Attribute Value Description
onchange script Script to be
run when
the element
changes
Onsubmit script Script to be
run when
the form is
submitted
Onreset script Script to be
run when
the form is
reset
Onselect script Script to be
run when
the element
is selected
onblur script Script to be
run when
the element
loses focus
onfocus script Script to be
run when
the element
gets focus
2.11. 3Keyboard Events
These attributes are not valid in base, bdo, br, frame, frameset, head, html,
iframe, meta, param, script, style, and title elements.
Attribute Value Description
onkeydown script What to do
when key is
pressed
Onkeypress script What to do
when key is
pressed and
released
onkeyup script What to do
when key is
released
2.11. 4Mouse Events
These attributes are not valid in base, bdo, br, frame, frameset, head, html, iframe,
meta, param, script, style, and title elements.
Attribute Value Description
onclick script What to do on a mouse
click
ondblclick script What to do on a mouse
double -click
Onmousemove script What to do when mouse
pointer moves
onmouseover script What to do when mouse
pointer moves over an
element
HTML5 introduced a new attribute called placeholder . This attribute on <input>
and <textarea> elements provides a hint to the user of what can be entered in the
field. The place holder text must not contain carriage returns or line -feeds.
Here is the simple syntax for pla ceholder attribute −
<input type="text" name="search" placeholder="search the web"/>
This attribute is supported by latest versions of Mozilla, Safari and Chrome
browsers only.
<!DOCTYPE HTML>
<html>
<body>
<form action ="/cgi -bin/[Link]" method ="get" >
Enter email :
<input type="email" name ="newinput" placeholder ="email@[Link]" />
<input type="submit" value ="submit" />
</form>
</body>
</html>
This will produce following result –
2.12 Mime Media Types
MIME (Multipurpose Internet Mail Extension) media types were originally
devised so that e -mails could include information other than plain text. MIME
media types indicate the following things:
■ How different parts of a message, such as text and attachments, are
combined into the message.
■ The way in which each part of the message is specified.
■ The way different items are encoded for transmission so that even software
that was designed to work only with ASCII text can process the message.
Now MIME types are not just for use with e -mail; they have been adopted by Web
servers as a way to tell Web browsers what type of material was being sent to them
so that they can cope with that kind of messages correctly.
MIME content types consist of two parts:
■ A main type
■ A sub -type
The main type is separated from the subtype by a forward slash character. For
example, text/html for HTML.
■ text
■ image
■ multipart
■ audio
■ video
■ message
■ model
■ application
For example, the text main type contains types of plain text files, such as:
■ text/plain for plain text files
■ text/html for HTML files
■ text/rtf for text files using rich text formatting
MIME types are officially supposed to be assigned and listed by the Internet
Assigned Numbers Authority (IANA).Many of the popular MIME types in this list
(all those begin with "x -") are not assigned by the IANA and do not have official
status. You can see the list of official MIME types at
[Link] -types/. Those preceded with .vnd are
vendor -specific.
***
CHECK YOUR PROGRESS 4
Q1. Write the different types of event handler?
Answer:____________________________________ ______________________
________________________________________________ __________________
___________________________________________ _______________________
Q2. Write the full form MIME .
Answer:____________________________________ ______________________
___________________________________________ _______________________
___________________________________________ _______________________
Q3. What is attribute?
Answer :
___________________________________ _______________________________
__________________________________________________________________
____________________________________________ ______________________
Q4. Write the various core attribute?
Answer:____________________________________ ______________________
___________________________________________ _______________________
____________________________________________ ______________________
Q5. Write the various input controls of form?
Answer:____________________________________ ______________________
___________________________________________ _______________________
2.13 CHECK YOUR PROGRESS - POSSIBLE ANSWER
CHECK YOUR PROGRESS 1
Q1. Write the full form of RGB color.
Answer: RGB stands for -RED GREEN BLUE
Q2. Which attribute is used to set the background image.
Answer: SET BACK GROUND , Body background, height, width
CHECK YOUR PROGRESS 2
Q1. Write the different face value of Font tag.
Answer:
Face values for font tag are: Times New Roman, Impact, Bookman old style,
Courier New, Arial, Arial Black etc...
CHECK YOUR PROGRESS 3
Q1. What is Marquee Tag & write its attributes?
Answer: A marquee is a scrolling piece of text displayed either horizontally across
or vertically down your webpage depending on the settings the attributes are Width ,
Height Direction , Behavior , Scroll , delay , Scroll amount Loop ,Bgcolor , Hspace ,
Vspace etc.
Q2. Write the fullform of mpeg, mov,wmv and swf of video files.
Answer:
■ .wmv ---Window's Media Video
■ .mov -- Quick Time Movie format.
■ .swf---Shockwave Flash
■ .mpeg -----Moving Pictures Expert Group
CHECK YOUR PROGRESS 4
Q1. Write the different types of event handler?
Answer: See the answer 2.11
Q2. Write the full form MIME.
Answer: Multipurpose Internet Mail Extension
Q3. What is attribute?
Answer:
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 alig n, 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 rig ht.
Q4. Write the various core attribute?
Answer: The four core attributes that can be used on the majority of HTML elements
id
title
class
style
Q5. Write the various input controls of form?
Answer:
■ Text Input Controls
■ Checkboxes Controls
■ Radio Box Controls
■ Select Box Controls
■ File Select boxes
■ Hidden Controls
■ Clickable Buttons
■ Submit and reset button
1. [Link]
2. www. [Link]
3. www. [Link]
4. HTML Mc Grew Hill
5. HTML Bible
2.14 References
You might also like
- Understanding HTML Basics and StructureNo ratings yetUnderstanding HTML Basics and Structure48 pages
- HTML and CSS Basics for Web DevelopmentNo ratings yetHTML and CSS Basics for Web Development26 pages
- Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSPNo ratings yetWeb Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP98 pages
- Web Development Basics: Python-Django ExercisesNo ratings yetWeb Development Basics: Python-Django Exercises11 pages
- Digital Journalism. Multimediality of Online JournalismNo ratings yetDigital Journalism. Multimediality of Online Journalism23 pages
- Vishwash Kumar's Tech Profile and AchievementsNo ratings yetVishwash Kumar's Tech Profile and Achievements2 pages
- Computer Components Website Project OverviewNo ratings yetComputer Components Website Project Overview8 pages
- Managing Sessions and Cookies in ServletsNo ratings yetManaging Sessions and Cookies in Servlets44 pages
- GameCenter Startup Process Log AnalysisNo ratings yetGameCenter Startup Process Log Analysis14 pages
