Scribd
Upload
25 views37 pages

Web Designing

HTML, developed by Tim Berners-Lee in 1990, is the foundational markup language for creating web pages, allowing for the formatting of text and images in browsers. It uses a series of tags to structure content, including headings, paragraphs, and lists, and works in conjunction with CSS for styling. The document outlines basic HTML tags, their usage, and the structure required to create a functional HTML document.

Uploaded by

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

Web Designing

HTML, developed by Tim Berners-Lee in 1990, is the foundational markup language for creating web pages, allowing for the formatting of text and images in browsers. It uses a series of tags to structure content, including headings, paragraphs, and lists, and works in conjunction with CSS for styling. The document outlines basic HTML tags, their usage, and the structure required to create a functional HTML document.

Uploaded by

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

UNIT - I

HTML Basics

 First developed by Tim Berners-Lee in 1990, HTML is short for hypertext markup
language. HTML creates electronic documents (called web pages) that are displayed
on the World Wide Web.

 Each page contains several connections to other pages called hyperlinks. Every web
page you see was written using one version of HTML.

 HTML code ensures the proper formatting of text and images for your Internet
browser. Without HTML, a browser would not know how to display text
as elements or load images or other elements.

 HTML also provides a basic structure of the page, upon which CSS (cascading style
sheets) are overlaid to change its appearance. One could think of HTML as the bones
(structure) of a web page, and CSS as its skin (appearance).

Features of HTML

 Hypertext Markup Language (HTML) is the basic programming language of the


World Wide Web.
 It’s the common thread that ties together virtually every Web site, from large scale
corporate sites like Microsoft’s to single-page classroom projects at the local grade
school.
 In simple terms, a Web page (or HTML document) is a plain text file that has been
encoded using Hypertext Markup Language (HTML) so that it appears nicely
formatted in a Web browser. Here’s what HTML means, word-by-word:
 Hypertext - Text that jump from document to document. This is a reference to the
ability of Web pages to link to one another.
 Markup - Tags that apply layout and formatting conventions to plain text. Literally,
the plain text is “marked up” with the tags.
 Language - A reference to the fact that HTML is considered a programming
Language.
 The code within an HTML file is enclosed in tags. These tags indicate where the
formatting should be applied, how the layout should appear, what pictures should be
placed in certain locations, and more.
 For example, suppose a certain word to be italicized, like this:

Basic HTML Tags

[Type text] Page 1


 Head Tag
The head tag <head> contains all the elements describing the document.
 Title Tag
The title tag <title> specifies the HTML page title, which is shown in the browser’s title
bar.
 Body Tag
The body tag <body> is where you insert your web page’s content.
 Paragraph Tag
A paragraph tag <p> is used to define a paragraph on a web page.
 Heading Tag
The HTML heading tag is used to define the heading of the HTML document. The <h1>
tag defines the most important tag, and <h6> defines the least.

Let’s practice using these tags and create a web page with them:

Basic Tags and Document Structure:

Once you have decided on your content and layout, it's time to design your first
HTML page. Start by opening the text editor of your choice. While every webpage is

[Type text] Page 2


different in terms of content and layout, each page has a basic structure and tags as the
building blocks. Every HTML document uses the basic structural tags below:

<!DOCTYPE html>
<html>
<head>
<title>
Your Browser Title text goes here
</title>
</head>
<body>
The contents of your webpage goes here
</body>
</html>

<HTML>…</HTML>

The <html> and </html> tags are the main tags and identify your page as an
HTML document. When a Web browser reads your document, it knows that everything
between these two tags is an HTML document. Each HTML page you create should start
with <!DOCTYPE html>, <html> and end with </html> as shown in the example below.

Beginning of every <!DOCTYPE html> Tells browser version of HTM


page:
Start Tag: <html>
End Tag: </html>
Attributes: None
Example: (Start of HTML document) These tags must be the first
<!DOCTYPE html> and last tags used in your
<html> HTML document.
...
</html>
(End of HTML document)

Adding a New Paragraph:

Now that we understand the basic building blocks of an HTML page, let’s examine
page formatting. When you are working in a word processing program such as Microsoft
Word, you press the “Enter” (or Return) key on your keyboard to begin a new paragraph.
Web browsers do not recognize those line breaks. Instead, you must insert paragraph tags
<p>…</p> each time you want to start a new paragraph.

Start Tag: <p>


End Tag: </p>
Attributes: None

[Type text] Page 3


Example: Welcome to Mastering HTML5 and CSS3 Made Easy
<p>This is how you create new paragraphs.</p>
<p>See how easy it is to do?</p>
Result: Welcome to Mastering HTML5 and CSS3 Made Easy

This is how you create new paragraphs.

See how easy it is to do?

Adding a Line Break

By default, browsers ignore many formatting keystrokes that we take for granted.
Examples include the “Enter” and “Tab” keys and multiple uses of the spacebar. To
accomplish the same tasks in HTML, we use page formatting tags.
Web browsers wrap text automatically to the next line when the current line
reaches the right side of the browser. If you want to avoid wrapping and begin text on a
new line, you use the <br> tag. The <br> tag does not have an end tag. You can also add
additional lines between paragraphs by using the <br> tags. Each <br> tag you enter
creates another blank line.

Start Tag: <br>


End Tag: None
Attributes: None
Example: <p>This is where your fist line of text goes Each <br> tag
<br>Your second sentence would begin on the next begins a new line.
line.
</p>
Result: This is where your first line of text goes.
Your second sentence would begin on the next line.

Emphasizing Text (Bold and Italic):


To bold text in a CSS style rule, use the FONT-WEIGHT property. You can use
the default value of “bold” or you can assign a degree of boldness with a numerical value
in multiples of 100, with 100 being the lightest and 900 being the darkest bold.
To italicize text in a CSS style rule, use the FONT-STYLE property. There are
three values that can be attributed to the FONT-STYLE property: italic, oblique and
normal. “Italic” defines the italic version of the assigned font. If the font you are using
does not have an italic version, you can use “oblique” to tell the browser to make an
attempt to slant the font to mimic italics. If the element has inherited italics from a
previous element and you want to remove the italics, use the value “normal”.

Property: font-weight Used to bold text

[Type text] Page 4


Value: bold or 100, 200…900

Example: p {font-weight: 300;}

Result: Sets the CSS rule to apply boldness of 300


to the text of paragraphs.
Property: font-style Used to italicize text

Value: Italic, oblique or normal

Example: p {font-style: italic;}

Result: Sets the CSS rule to italicize the text of


paragraphs.

Headings:

Headings are used to help organize information on your webpage or to create a


structural hierarchy or even add visual interest. HTML offers you six different levels of
headings. These levels are the opposite of text levels. For headings, <h1> is the largest
and <h6> is the smallest. To create a heading, place the
<h?>…</h?> around the text of your heading, replacing “?” with a value from 1 to 6. Note
that the value must appear in both the start and end tags.

Start Tag: <h?>


End Tag: </h?>
Attributes: None
Example: <h1>This is the largest heading.</h1> This tag causes the text
between the tags to be displayed as
a level 1 heading.
Result: This is the largest heading.

Creating Headings:

 Headings are used on Web pages the same way they are used in printed documents
they break up text into sections.
 The HTML standard defines six levels of headings each one progressively smaller in
font size, <h1> through <h6>.

Heading 1
[Type text] Page 5
Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Inserting Blank Spaces:


Any blank spaces that you type in your text (beyond a single space between words)
are ignored by browsers. You must code your desired blank spaces into your document.
You can insert blank spaces into any lines of text. Since blank spaces are not available on
your keyboard, you must use the entity &nbsp; for each space you wish to add. For
example, if you wanted to add multiple spaces between specific words, type in the
appropriate amount of entities without any spaces between them.

Entity: &nbsp;
Example: <p>This would add five
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
blank spaces.</p>
Result: This would add five blank spaces.

Block level text elements:


Headings:

Headings are used to help organize information on your webpage or to create a


structural hierarchy or even add visual interest. HTML offers you six different levels of
headings. These levels are the opposite of text levels. For headings, <h1> is the largest
and <h6> is the smallest. To create a heading, place the
<h?>…</h?> around the text of your heading, replacing “?” with a value from 1 to 6. Note
that the value must appear in both the start and end tags.

Start Tag: <h?>


End Tag: </h?>
Attributes: None

[Type text] Page 6


Example: <h1>This is the largest heading.</h1> This tag causes the text
between the tags to be displayed as
a level 1 heading.
Result: This is the largest heading.

Creating Headings:

 Headings are used on Web pages the same way they are used in printed documents
they break up text into sections.
 The HTML standard defines six levels of headings each one progressively smaller in
font size, <h1> through <h6>.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Output:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

HR Tag

[Type text] Page 7


Horizontal Rule:
 You can insert a solid horizontal line (sometimes called a horizontal rule) into your
webpage to break up information or add visual interest.
 HTML requires that horizontal rules occupy a line by themselves. To insert a
horizontal line, place the <hr> tag (there is no end tag) where you want the line to
appear in your document.
 In HTML5 the <hr> tag will still display a horizontal line in visual browsers, but it
is more commonly used as a thematic break at the paragraph level. For example, a
location change in a story or a change of theme.
Start Tag: <hr>
End Tag: None
Attributes: None

 The <hr> tag is an empty element. This means that it only has an opening tag, <hr>.
 Starting in HTML5, we now need to attach a slash to the tag of an empty element. So,
instead of having just <hr>, you should make it <hr />.
 In browsers, the <hr /> tag is displayed as a horizontal rule or line, like this:

List Tag
The <li> tag is used if you want to enter the contents in the listed order. There are two types
of lists.
 Ordered list <ol>
 Unordered list <ul>

[Type text] Page 8


Numbered (Ordered) Lists:

You can insert lists into your HTML documents to display ordered lists of items.
Numbered lists (sometimes called Ordered Lists) are generally used to list items by their
priority or their sequence in a process. For example, you might use a numbered list to display
instructions in completing a specific task.
When you create a numbered list, you must use two different tags. First, you place the
<ol>…</ol> tags around the text you want to become a numbered list. Second, you place the
<li>…</li> tags around each line of the list. You have five choices when creating numbered
lists: Upper-case letters (A,B,C), lower-case letters (a,b,c), upper-case Roman numerals
(I,II,III), lower-case Roman numerals (I,ii,iii) and regular numbers (1,2,3) which is the
default. You define the type of numbered list you want by using the TYPE attribute and
placing it within the <ol> start tag. You can also begin the numbering (ordering) at any point
in the sequence as well using the START attribute. For example, if you wanted to start your
list with item D, you would use the attribute start=“D” by placing it within the <ol> start tag as
well..93

Start Tag: <ol>


End Tag: </ol>

[Type text] Page 9


Attributes: type=“1” (Default) List sequence uses 1,2,3, etc.
List sequence uses A,B,C,
type=“A” (Upper case alphabet)
etc.
type=“a” (Lower case alphabet) List sequence uses a,b,c, etc.
type=“I” (Upper case Roman numerals) List sequence uses I,II,III, etc.
type=“i” (Lower case Roman numerals) List sequence uses I,ii,iii, etc.
Where “?” is the starting
start=“?” (Starting value)
value.
Related Tags: <li>…</li> (Line item)
Example: My list: This tag will cause the items
<ol type=“A”> surrounded by the line item
<li>First Item</li> tags <li> to be displayed as an
<li>Second Item</li> ordered list.
<li>Third Item</li>
</ol>
Result: My list:
A. First Item
B. Second Item
C. Third Item

Bulleted (Unordered) Lists:

The other type of list you can create is called a bulleted (also called unordered) list.
Bulleted lists are typically used when items require the reader’s attention, but do not need
to be listed in any particular order.
When you create a bulleted list, you must use two different tags. First, you place
the <ul>…</ul> tags around the text you want to become a bulleted list. Second, you
place the <li>…</li> tags around each line of the list. You have three choices when
creating bulleted lists: Circles (○), squares (■) and discs (●) which is the default. You
define the type of bulleted list you want by using the STYLE attribute and the value of
“list-style-type:“?” (where ? Is circle, square or disc) placing it within the <ul> start tag.

Start Tag: <ul>


End Tag: </ul>
Attributes: style=“list-style-type:disc” ● List sequence uses filled circle

style=“list-style-type:circle” ○ List sequence uses hollow circle

style=“list-style-type:square” ■ List sequence uses filled


square
Related Tags: <li>…</li>

[Type text] Page 10


Example: My list: This tag will cause the items
<ul style=“list-style-type:square”> surrounded by the line item tags
<li>First Item</li> <li>…</li> to be displayed as a list
<li>Second Item</li> with square bullets.
<li>Third Item</li>
</ul>
Result: My List:
 First Item
 Second Item
 Third Item
Definition Lists:
Definition Lists are used to display text in a form that resembles a dictionary or
glossary of terms. When you create a definition list, you must use three different tags.
First, you place the <dl>…</dl> tags around the text you want to become a definition list.
Second, you place the <dt>…</dt> tags around each term of the list. Third, you place the
<dd>…</dd> tags around each definition.

Start Tag:
<dl>
End Tag:
</dl>
Attributes:
None
Related Tags: <dt>…</dt> (Definition Term)
<dd>…</dd> (Definition)
Example: What do the applications do? These tags will create a
<dl> definition list.
<dt>Access</dt>
<dd>Create databases and programs to
track and manage your information</dd>
<dt>Excel</dt>
<dd>Perform calculations, analyze
information and manage lists in
spreadsheets</dd>
</dl>
Result: What do the applications do?

Access
Create databases and programs to
track and manage your information.
Excel
Perform calculations, analyze
information and manage lists in
spreadsheets.
!

[Type text] Page 11


Font Style Elements:

Decoration:
The TEXT-DECORATION property is used to add strike-through marks,
underline and overstrike marks to your text. Generally this property is used to remove
underlines from links. For example, a link in the middle of a sentence that is already
underlined, will stand out more if is not underlined. It is generally good practice to not
underline text that isn’t a link as it can be confusing to some users.

Property: text-decoration

Value: overline or line-through or underline or none

Example: p {text-decoration:
underline;} a {text-
decoration: none;}
Result: Sets the CSS rule to underline all text of your
paragraphs and sets the rule to NOT underline
any links.
1. Fonts:
To control the fonts in a CSS style rule, use the FONT-FAMILY property. When
using the FONT- FAMILY property you want to list several fonts as not all fonts are
supported by all browsers. Your user’s browser will attempt each of the fonts, in the order
they are listed. When listing multiple fonts they are separated by a comma. For example:
listing Arial, Helvetica, “Times New Roman” will display Arial, if available, then try
Helvetica, then Times New Roman, and so on. When adding font values to the FONT-
FAMILY property, you only need to use quotes with multiple word fonts, like “Times
New Roman”.

Property: font-family

Value: font name

Example: p {font-family: verdana, georgia;}

Result: Sets the CSS rule to apply the verdana font first, then
georgia to the text of paragraphs.

Font Sizes:

The FONT-SIZE property allows you to create a CSS rule that controls the size of
the font. The value you assign can be a numerical value in the form of pixels (px), inches
(in), millimeters (mm), centimeters (cm), points (pt), picas (pc), x-height (ex), em (the

[Type text] Page 12


height of the current font, 1 em is equal to 16px) or in a percentage. The default font size
for browsers is 16px. It is generally a good idea to use the em value, as this allows the
browser to correctly display your text when the zoom tool is used to resize your webpage.

Property: font-size

Value: px, in, mm, cm, pt, pc, ex, em or percentage

Example: p {font-size: 1.5em;}

Result: Sets the CSS rule to display all paragraph


text in
1.5 em or 24px.

Line Spacing (Leading):

Leading (pronounced ledding) is a term that refers to controlling the vertical


spacing between lines of text. You can control the leading of text by using the LINE-
HEIGHT property. The value you assign is typically expressed as a multiple of the height
of the font. However, you can also assign spacing as a percentage of the font, or an
absolute value measured in the form of point (pt), pixels (px), centimeters (cm),
millimeters (mm), inches (in, picas (pc), x-height (ex), or em.

Property: line-height

Value: x.x Where “x.x” is


expressed as a multiple
of the font
x% Where “x” is a
percentage of the font.
pt, px, cm, mm, in, pc, ex, or em

Example: p {line-height: 2.0;} Expressed as two times


the height of the font.
Result: Sets the CSS rule to apply a level of two times the
height of the font as the leading.
Text Color:

You can use the COLOR property to control the color of text. You can assign
either a hexadecimal value or use the name of a color. The COLOR property can also
be applied to other elements such as tables, borders and lines.

Property: color

Value: color name or hexadecimal color

[Type text] Page 13


Example: h1 {color: maroon;}

Result: Sets the CSS rule to apply a maroon font color to all
level 1 headings.

<body>
<p>This is a paragraph and <big>bigger text goes here</big></p>
</body>

Sample Output

This is a paragraph and bigger text goes here

TABLES:

HTML Table

HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.

We can create a table to display data in tabular form, using <table> element, with the help of
<tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data
is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header section, navigation bar,
body content, footer section etc. But it is recommended to use div tag over table to manage
the layout of the page .

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

[Type text] Page 14


<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each
column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

HTML Table Example

Let's see the example of HTML table tag. It output is shown above.

<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
Output:
First_Name Last_Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

HTML Table with Border

There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML

2. By border property in CSS

1. HTML Border attribute


You can use border attribute of table tag in HTML to specify border.
<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>

[Type text] Page 15


<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>

Output:

First_Name Last_Name Marks


Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

TABLE ELEMENTS (Attributes)

S.No Attributes and tags Illustrations


1. Define Table <table>..</table>
2. Add caption <caption>..</caption>
3. Table row <tr>..</tr>
4. Table header <th>..</th>
5. Table Data in a cell <td>..</td>
6. Cell spacing <table cellspacing="">...</table>
7. Cell padding <table cellpadding="">...</table>
8. Table border <table border="">...</table>
9. Alignment <table align=center/left/right>...</table>
10. colspan in table <table colspan="">...</table>
11. rowspan in table <table rowspan="">...</table>
12. Cell color <table bgcolor="#$$$$$$">...</table>
13. No linebreaks <table nowrap>...</table>
HTML <caption> tag

HTML <caption> tag is used to add a caption or title of an HTML table. It should be used
inside the <table> element and just after the <table> start tag. A table may contain only one
<caption> element.

Syntax
<caption>Table title...</caption>

Following are some specifications about the <caption> tag

[Type text] Page 16


Example
<!DOCTYPE html>
<html>
<head>
<title>Caption Tag</title>
<style>
table, td, th {
border: 3px solid gray;
border-collapse: collapse;}
</style>
</head>
<body>
<h2>Example of Caption tag</h2>
<table width="800">
<caption>Employee Details</caption>
<thead>
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Ankit Pandey</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2.</td>
<td>Ashvini Kumar</td>
<td>[email protected]</td>
</tr>

[Type text] Page 17


<tr>
<td>3.</td>
<td>Swati Sharma</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</body>
</html>

Display Inline

Start tag/End tag Both start and End tag

Usage textual

Output:

Frames:
HTML <frameset> tag
HTML <frameset> tag is used to contain the group of frames which can be controlled and
styled as a unit. The <frameset> element also specifies the number of rows and columns in
the frameset, and how much space they will occupy in a frame.

Syntax
<frameset cols=" ">............</frameset>

[Type text] Page 18


Example 1
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="50%,50%">
<frame src="https://www.javatpoint.com/html-table">
<frame src="https://www.javatpoint.com/css-table">
</frameset>
</html>
Output:

Attribute
Tag-specific attribute

Attribute Value Description

cols Pixels % * It specifies the number and size of column spaces in the
frameset. (Not Supported in HTML5)

Rows Pixels % * It specifies the number and size of the rows spaces in the
frameset. (Not Supported in HTML5)

What is an Iframe?
An Iframe (Inline Frame) is a separate HTML document that is embedded into
your HTML document. The most common usage of the Iframe element is to insert

[Type text] Page 19


content from another webpage, such as a video or an advertisement. Iframes can be
configured to act as a “mini” page on your page. For example, it can have an independent
scrollbar that will not affect the base page it is embedded in.
Inserting an Iframe:
Inserting an Iframe into your webpage requires both the start and end tags
<iframe>…</iframe> as well as the target source you are placing in the Iframe. To do so
you use the attribute src=. Similar to inserting an image in your webpage.

Start Tag: <iframe>


End Tag: </iframe>
Attributes: src=
Example: <iframe src=“http://www.teachucomp.com”></iframe>
Places the webpage www.teachucomp.com into your
Result: webpage.
Setting Height and Width:
You can also set a specific height and width to your Iframe by placing the height= and
width=
attributes in the start tag. Values are defined either in pixels or as a percentage of the browser
window.

Start Tag: <iframe>


End Tag: </iframe>
Specifies the height of
Attributes: height= your Iframe in pixels
or
percentages.
Specifies the width of
width= your Iframe in pixels
or
percentages
<iframe src=“http://www.teachucomp.com”
Example: height=“300” width=“100%”></iframe>
Displays the webpage in an Iframe 300 pixels high
Result: and as wide as the browser window.
Using an Iframe for a Link Target:
You can set a link on your page to open inside an Iframe by using the TARGET
attribute. To do so you must name your Iframe using the NAME attribute. The target and
name must have the same value.

Start Tag: <iframe>


End Tag: </iframe>
Sets the link to open in the
Attributes: target= specified Iframe.
Defines the name of
name=
the Iframe.
[Type text] Page 20
<iframe name=“iframe_1”></iframe>
Example: <p><a href=“http://www.teachucomp.com”
target=“iframe_1”>teachUcomp, Inc.</a></p>
Causes the link teachUcomp, Inc. to open inside your
Result: Iframe.

[Type text] Page 21


UNIT – II

Graphics
 Graphics are representations used to make web-page or applications visually
appealing and also for improving user experience and user interaction.
 Some examples of graphics are photographs, flowcharts, bar graphs, maps,
engineering drawings, constructional blueprints, etc. Usually, the following
technologies are used in web graphics.
There are two modern web technologies for creating rich drawn graphics within the
browser:
HTML5 Canvas and Scalable Vector Graphics (SVG).

 Canvas: A hypertext markup language element introduced in HTML5 for


creating and analyzing bitmap images as pixels. The Canvas specification
provides a Javascript API for accessing the element's graphics context and
performing drawing operations with it.
 SVG: An XML-based vector graphics format. It is a markup language for
describing all aspects of an image or Web application, from the geometry of
shapes, to the styling of text and shapes, to animation and interactivity. SVG
can also be generated through Javascript.
The problem solver below demonstrates both web graphics technologies.
The FWGC problem uses SVG to display states, while the water jug
problem uses Canvas.

How to Work efficiently with images in web pages:


FORMS

1. About Forms

 Forms are used to collect information from people who visit your website. For
example, you can use forms to find out details about your visitors through surveys
and feedback, or engage in e-commerce by selling your goods and services to
people.
 Forms are defined by the <form>…</form> tags and are made up of different
elements to collect data, such as text boxes and radio buttons. Once the user
inputs all of the information, they submit the form, using the “submit” button that
you create. What happens with the data is a decision you will need to make. You
can use a script to manage the data, sent the data to a database, or even receive the
[Type text] Page 22
data via e-mail.
 Most forms are processed using CGI scripts, CGI (Common Gateway Interface)
is a script written in a language such as Java or Perl and runs on a Web server.
Most Web servers accommodate the processing of CGI scripts, but you should
check first with your Web host to make sure.
 In addition, you will want to find out the location of the server’s CGI-bin (a
directory where CGI scripting is stored), as this is where you will need to store
the CGI script you create or use.
 If you know a language such as Perl, you can write your own script. There are
also hundreds of free scripts available online that you can use, such as the ones at
sites like The CGI Resource Index (http://www.cgi.resourceindex.com) and
JavaScript Kit (http://www.javascriptkit.com).
 You will need to make the necessary changes to the CGI script that you use
(script variables, path names, etc.) and upload the CGI script to your Web host
server.
 To begin creating a form using CGI script, start with the <form> tag, containing
the command (method=“post”) and the ACTION attribute, with a value equal to
the path and name of your CGI script.

Start Tag: <form>


End Tag: </form>
Where “?” is the path
Attributes: method=“post” action=“?” and name of your CGI
script for the form.
Example: <form method=“post” action=“/cgi-bin/contact.pl”>
Result: Creates the structure for the form.

2.Sending to E-mail:

If your Web server does not support CGI scripting, or if you prefer to avoid it
altogether, you can send the form data directly to an e-mail address. Keep in mind that this
is not a good solution if you are capturing sensitive data such as credit card numbers, as it
is not a secure form of transmission. Sending your form data to an e-mail address is a good
solution if your form is simple.
To send the information to an e-mail address, you use the following coding:

Start Tag: <form>


End Tag: </form>
Where “?” is the e-
method=“post” enctype=“text/plain” mail address you with
Attributes: action=“mailto:?” to send the form to.

[Type text] Page 23


<form method=“post” enctype=“text/plain”
action=“mailto:[email protected]”>
Example:
</form>
Creates a form that tells the Web browser to send
Result: the form data to the selected e-mail address.

3.Text Boxes:

Text boxes are the most basic elements that forms use in the collection of data.
Text boxes are typically used when the input requires a single line of text. To create a text
box, you use the <input> element tag and TYPE attribute with a value of “text” and place
it between the <form>…</form> tags. You must also specify a unique name for the text
box using the NAME attribute.
By default, text boxes are 20 characters wide. You can change the width of the
field that is displayed by using the SIZE attribute. You can also limit the number of
characters the user can type into the text box by using the MAXLENGTH attribute.

Start Tag: <input> No end tag.


Identifies the element as
Attributes: type=“text”
a text box.
name= Required.
size=
maxlength=
<form method=“post” action=“cgi-bin/contact.pl”>
<br>Your Full Name:
Example: <input type=“text” name=“fullname” size=“50”
maxlength=“45”>
</form>
Creates a text box called “fullname” that is 50
Result: characters in length and holds a maximum of 45
characters of input.
4.Text Areas:

Sometimes, you will want to collect text from individuals that requires a larger
box. This is common in situations where you ask for feedback that may require multiple
sentences. In this case, you can insert a large text area using the <textarea>…</textarea>
element tags and assigning a unique (and required) name using the NAME attribute.
You control the dimensions of the text area using the COLS and ROWS attributes,
measured in relation to the character height. You can also control how text wraps within
the text area using the WRAP attribute. You have three choices when assigning a value to
the WRAP attribute: “soft”, “hard”, and “off”. A value of “soft” will wrap the text in your
area, but will not wrap text in the form results (meaning it will be in a single field in a
database or a single line in an e-mail). The value “hard” wraps text in both the text area
and form results. The value “off” turns text wrapping completely off and forces users to
create new lines using the “Enter” key on their keyboard.

If the user types more characters than can be seen in the text area you created,
scroll bars will appear to enable viewing of the text. Text areas hold up to 32,700

[Type text] Page 24


characters.

Start Tag: <textarea>


End Tag: </textarea>
Identifies the element as
Attributes: type=“text”
a text box.
name= Required.
rows= and cols=
wrap= “soft”, “hard”, or “off”
<form method=“post” action=“/cgi-bin/contact.pl”>
<br>Your Comments:
Example: <textarea name=“comments” rows=“15” cols=“75”
wrap=“hard”>
</textarea>
</form>
Creates a text are called “comments” that is 15
Result: rows high and 75 columns wide and forces a
“hard” wrap, where text in the text area and form
results are wrapped.

5.Check Boxes:

Check boxes are used when you want visitors to select from one or more options
that you present. To create check boxes, you use the <input> element tag and TYPE
attribute with a value of “checkbox” and place it between the <form>…</form> tags. You
can group the check boxes using the same NAME attribute for each element. Remember
that the value you assign is a description of the checkbox. If you want your check boxes to
all appear on a separate line, use the <p> or <br> tags before each element.

Start Tag: <input> No end tag.


Attributes: type=“checkbox” Identifies the check box.
name= Required.
value=
<form method=“post” action=“/cgi-bin/contact.pl”>
<br>Have you purchased from us before?
<br><input type=“checkbox” name=“purchase”
Example: value=“yes”>Yes
<br><input type=“checkbox” name=“purchase”
value=“no”>No
</form>
Have you purchased from us before?
Result:
Ye

[Type text] Page 25


s
No

5.Menu Lists:

Menu lists are typically used when you have a long list of choices to give users.
The menu list appears as a drop-down list and allows the user to select their choice.
Between the <form>…</form> tags, use the <select> element tag, along with the NAME
attribute and define a size for the box with the SIZE attribute (measured in character
lines). The <option> element tag is then used to define each of the choices in the menu.

Start Tag: <select>


End Tag: </select>
Attributes: name= Required.
Measured in character
size=
lines.
Supporting No end tag.
Start tag: <option>
Attributes value= Name of selection.
<form method=“post” action=“/cgi-bin/contact.pl”>
<br>Which best describes your status?
<select name=“status” size=“1”>
Example: <option value=“Business”>Business
<option value=“Government”>Government
<option value=“Individual”>Individual
</select>
</form>
Creates a drop=down
Which best describes your status? Business V with the list of
Result:
choices specified.

7.Radio Buttons:

Radio buttons are the small circles (O) that appear in forms. Radio buttons allow
you to present a series of choices (grouped under the same NAME attribute) but only
allows the user to select a single choice. To add radio buttons, use the <input> element tag
between the <form>…</form> tags with a TYPE value of “radio”. The <p> or <br> tags
allow you to position each choice on its own line.

Start Tag: <input> No end tag.


Attributes: type=“radio”
name= Required.
value=

[Type text] Page 26


<form method=“post” action=“/cgi-bin/contact.pl”>
<br>How did you hear about us?
<br><input type=“radio” name=“source”
value=“tvradio”>TV, Radio
Example: <br><input type=“radio” name=“source”
value=“print”>Print Ad
<br><input type=“radio” name=“source”
value=“internet”>Internet Search
</form>
How did you hear about us?
Result: o TV, Radio
o Print Ad
o Internet Search

8.Submit Button:

The submit button is a required piece of your form since when it is clicked, it
actually sends the data to be processed. You must have a submit button in your form in
order to receive the data. Using the
<input> element tag and a value of “submit” for the TYPE attribute, assign a VALUE
that is the text you want to appear in the button (typically “Submit”).

Start Tag: <input> No end tag.


Attributes: type=“submit”
value= Text in button.
Example: <form method=“post” action=“/cgi-bin/contact.pl”
<br><input type=“submit” value=“Submit”>
</form>
Result:
Submit

9.Reset Button:

The reset button is used to allow a user to clear all of the information they have
entered into a form. To insert a reset button, use the <input> element tag with a TYPE
attribute and a value of “reset”, and the VALUE attribute with a value that is the text you
want to appear in the button (typically “Reset”).

Start Tag: <input> No end tag.

Attributes: type=“reset”

value= Text in button

[Type text] Page 27


<form method=“post” action=“/cgi-bin/contact.pl”>
Example: <br><input type=“reset” value=“Reset”>
</form>
Clears all form data.
Result: Reset

10.Changing the Tab Order:

Users can navigate through the elements of your form by using the Tab key on
their keyboard, jumping from one element to the next. By default, the order the Tab key
follows is the order in which you entered the form elements in your HTML page. To
change the tab order, add the TABINDEX attribute to your element tags and assign a
numeric value for the position you want (“1” for 1st, “2” for 2nd and so on.)

Start Tag: Any element tag in your form.


Attributes: tabindex=
Example: <form method=“post” action=“/cgi-bin/contact.pl”>
<br>How did you hear about us?
<br><input type=“radio” name=“source”
value=“tvradio” tabindex=“1”>TV,
Radio
<br><input type=“radio” name=“source”
value=“print” tabindex=“2”>Print Ad
<br><input type=“radio” name=“source”
value=“internet” tabindex=“3”>Internet Search
</form>
Result: How did you hear about us? Tab order follows
o TV, Radio your specifications.
o Print Ad
o Internet Search

Actions of Forms
1. Create a form that uses a cgi script:
2. Create a form that sends information to an e-mail address:
3. Add a text box to a form:
4. Add a text area to a form:
5. Add check boxes to a form:
6. Add a menu list to a form:
7. Add radio buttons to a form:
8. Add a (required) submit button to a form:
9. Add a reset button to a form:
10. Change the tab order:

HTML Form Input Types


[Type text] Page 28
Here are the different input types you can use in HTML:

 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">
 Input Type Text

<input type="text"> defines a single-line text input field:

Example
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

This is how the HTML code above will be displayed in a browser:

First name:

Last name:

 Input Type Password

<input type="password"> defines a password field:

Example

[Type text] Page 29


<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

This is how the HTML code above will be displayed in a browser:

Username:

Password:

The characters in a password field are masked (shown as asterisks or circles).

 Input Type Submit

<input type="submit"> defines a button for submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute:

Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

This is how the HTML code above will be displayed in a browser:


First name:
John

Last name:
Doe

Submit

If you omit the submit button's value attribute, the button will get a default text:
Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>

[Type text] Page 30


<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
 Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to their default
values:

Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

This is how the HTML code above will be displayed in a browser:

First name:
John

Last name:
Doe

Submit Reset

If you change the input values and then click the "Reset" button, the form-data will be reset to
the default values.

 Input Type Radio

<input type="radio"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

Example
<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
[Type text] Page 31
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

This is how the HTML code above will be displayed in a browser:

HTML
CSS
JavaScript
 Input Type Checkbox

<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

This is how the HTML code above will be displayed in a browser:

I have a bike
I have a car
I have a boat

 Input Type Button

<input type="button"> defines a button:

Example
<input type="button" onclick="alert('Hello World!')" value="Click Me!">

This is how the HTML code above will be displayed in a browser:

 Input Type Color

[Type text] Page 32


The <input type="color"> is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.

Example
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
 Input Type Date

The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>

You can also use the min and max attributes to add restrictions to dates:

Example
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

 Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field, with no time zone.

Depending on browser support, a date picker can show up in the input field.

Example
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
 Input Type Email
[Type text] Page 33
The <input type="email"> is used for input fields that should contain an e-mail address.

Depending on browser support, the e-mail address can be automatically validated when
submitted.

Some smartphones recognize the email type, and add ".com" to the keyboard to match email
input.

Example
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
 Input Type Image

The <input type="image"> defines an image as a submit button.

The path to the image is specified in the src attribute.

Example
<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
 Input Type File

The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

Example
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>

 Input Type Hidden

The <input type="hidden"> defines a hidden input field (not visible to a user).

A hidden field lets web developers include data that cannot be seen or modified by users
when a form is submitted.

A hidden field often stores what database record that needs to be updated when the form is
submitted.

Note: While the value is not displayed to the user in the page's content, it is visible (and can
be edited) using any browser's developer tools or "View Source" functionality. Do not use
hidden inputs as a form of security!

[Type text] Page 34


Example
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>
 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.

Example
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</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:

Example
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

 Input Type Range

The <input type="range"> defines a control for entering a number whose exact value is not
important (like a slider control). Default range is 0 to 100. However, you can set restrictions
on what numbers are accepted with the min, max, and step attributes:

Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>

[Type text] Page 35


 Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text
field).

Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
 Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone number.

Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</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.

Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
 Input Type Url
The <input type="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.

Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
 Input Type Week

The <input type="week"> allows the user to select a week and year.

[Type text] Page 36


Depending on browser support, a date picker can show up in the input field.

Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>

The HTML <form> Elements

The HTML <form> element can contain one or more of the following form elements:

 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <datalist>
 <output>
 <option>

[Type text] Page 37

You might also like