SUMAN GURJAR

SCIENTIST D
ISSD
KEYWORDS
❑ Internet

❑ World wide web

❑ File

❑ Web browser

❑ Website

❑ Web page

❑ Home page
❑ Internet, hardware such as computers, cables, and telephone wires that is connected to
create a massive world wise network

❑ World wide Web, is a system of interlinked hypertext documents that are accessed via
internet

❑ Files, contains information, such as text, graphics, video, animation that is stored on
computer
❑ A website is made up of web pages

❑ A home page is generally first page a user sees when visiting a site

❑ Hypertext Markup language (HTML) is the code used to create web pages
WEB BROWSER
A web browser access the web page from internet and display the web page on
computer screen.
Basic Internet Browser Features
How Web Browser Works
Types Of Web Sites
Elements Of Web Page

Multimedia Text

Graphics Audio

Animation Video

Hyperlink
What Is Web Designing

❑ Web design is the planning and creation of websites. This includes the
information, user interface, site structure, navigation, layout, colors, fonts and
imagery.

❑ All of these are combined with the principal of web designing to create a website
that meets the goals of the owner and designer
Web Designing Process
Web Development Technologies
USER EXPERIENCE (UX ) AND USER INTERFACE
(UI)
INTRODUCTION TO HTML
What Is HTML?

❑ HTML, also known as HyperText Markup Language, is the language used to create
Web pages

❑ Using HTML, you can create a Web page with text, graphics, sound, and video
HTML Editors
Basic HTML Page
HTML ELEMENTS

The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Tags
❑ The essence of HTML programming is tags
❑ A tag is a keyword enclosed by angle brackets ( Example: <I> )
❑ There are opening and closing tags for many but not all tags; The affected text is
between the two tags
❑ The opening and closing tags use the same command except the closing tag
contains and additional forward slash /
❑ For example, the expression <B> Warning </B> would cause the word ‘Warning’
to appear in bold face on a Web page

Nested Tags
❑ Whenever you have HTML tags within other HTML tags, you must close the
nearest tag first
Example:
<H1> <I> The Nation </I> </H1>
HTML ATTRIBUTES
❑ All HTML elements can have attributes

❑ Attributes provide additional information about elements

❑ Attributes are always specified in the start tag

❑ Attributes usually come in name/value pairs like: name="value"

❑ The href Attribute
<a href="[Link] W3Schools</a>

❑ The src Attribute

<img src="img_girl.jpg“ />
<br>

❑ The width and height Attributes

<img src="img_girl.jpg" width="500" height="600">

❑ The style Attribute

<p style="color:red;">This is a red paragraph.</p>
THE <TITLE> TAG

❑ Choose the title of your Web page carefully; The title of a Web page determines
its ranking in certain search engines

❑ The title will also appear on Favorite lists, History lists, and Bookmark lists to
identify your page
TEXT FORMATTING

❑ Manipulating text in HTML can be tricky; Oftentimes, what you see is NOT what
you get

❑ For instance, special HTML tags are needed to create paragraphs, move to the
next line, and create headings
Text Formatting Tags

❑ <B> Bold Face </B>

❑ <I> Italics </I>

❑ <U> Underline </U>

❑ <P> New Paragraph </P>

❑ <BR> Next Line

CHANGING THE FONT

❑ The expression <FONT FACE = “fontname”> … </FONT> can be used to

change the font of the enclosed text

❑ To change the size of text use the expression <FONT SIZE=n> …. </FONT> where
n is a number between 1 and 7
CHANGING THE FONT

❑ To change the color, use <FONT COLOR=“red”>…. </FONT>; The color can also be
defined using hexadecimal representation ( Example: #ffffff )

❑ These attributes can be combined to change the font, size, and color of
the text all at once; For example, <FONT SIZE=4 FACE=“Courier”
COLOR=“red”> …. </FONT>
HEADINGS

❑ Web pages are typically organized into sections with headings; To create a
heading use the expression <Hn>….</Hn> where n is a number between 1 and 6

❑ In this case, the 1 corresponds to the largest size heading while the 6
corresponds to the smallest size
ALIGNING TEXT

❑ The ALIGN attribute can be inserted in the <P> and <Hn> tags to right justify,
center, or left justify the text

❑ For example, <H1 ALIGN=CENTER> Times of India</H1> would create a centered

heading of the largest size
COMMENT STATEMENTS

❑ Comment statements are notes in the HTML code that explain the important
features of the code

❑ The comments do not appear on the Web page itself but are a useful reference to
the author of the page and other programmers

❑ To create a comment statement use the <!--- …. --> tags

PAGE FORMATTING

❑ To define the background color, use the BGCOLOR attribute in the <BODY> tag

❑ To define the text color, use the TEXT attribute in the <BODY> tag

❑ To define the size of the text, type <BASEFONT SIZE=n>

EXAMPLE
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY BGCOLOR=“black” TEXT=“white”>
<BASEFONT SIZE=7>
This is where you would include the text and images on your Web
page.
</BODY>
</HTML>
INSERTING IMAGES
❑ Type <IMG SRC = “[Link]”>, where [Link] indicates the location of the
image file

❑ The WIDTH=n and HEIGHT=n attributes can be used to adjust the size of an
image

❑ The attribute BORDER=n can be used to add a border n pixels thick around the
image
ALTERNATE TEXT
❑ Some browsers don’t support images. In this case, the ALT attribute can be used
to create text that appears instead of the image.

❑ Example:
❑ <IMG SRC=“[Link]” ALT = “Picture of satellite”>
LINKS
❑ A link lets you move from one page to another, play movies and sound, send
email, download files, and more….

❑ A link has three parts: a destination, a label, and a target

❑ To create a link type

<A HREF=“[Link]”> label </A>

EXAMPLE: LINKS

❑ To create a link to IMD type:

<A HREF=“[Link]

❑ To create a link to IITM pune type:

<A HREF=“[Link] Pune</A>
ANCHORS
❑ Anchors enable a user to jump to a specific place on a Web site
❑ Two steps are necessary to create an anchor. First you must create the anchor
itself. Then you must create a link to the anchor from another point in the
document.
❑ To create the anchor itself, type <A NAME=“anchor name”>label</A> at the point
in the Web page where you want the user to jump to
❑ To create the link, type <A HREF=“#anchor name”>label</A> at the point in the
text where you want the link to appear
ORDERED LISTS

❑ Ordered lists are a list of Here’s how it

numbered items. would look on the
❑ To create an ordered list,
type:
Web:
<OL>
<LI> This is step one.
</LI>
<LI> This is step two.
<LI> This is step three.
</OL>
MORE ORDERED LISTS….
The TYPE=x attribute allows you to change the the kind of symbol that appears in
the list.

❑A is for capital letters

❑a is for lowercase letters

❑I is for capital roman numerals

❑i is for lowercase roman numerals

UNORDERED LISTS
❑ An unordered list is a list
of bulleted items
Here’s how it
❑ To create an unordered would look on the
list, type: Web:
<UL>
<LI> First item in list
<LI> Second item in list
<LI> Third item in list
</UL>
MORE UNORDERED LISTS...
The TYPE=shape attribute allows you to change the type of bullet that
appears

▪ circle corresponds to an empty round bullet

▪ square corresponds to a square bullet

▪ disc corresponds to a solid round bullet; this is the default value

 FORMS
What are forms?

❑An HTML form is an area of the document that allows users to enter
information into fields.

❑A form may be used to collect personal information, opinions in polls, user

preferences and other kinds of information.
FORMS
❑ There are two basic components of a Web form: the shell, the part that
the user fills out, and the script which processes the information

❑ HTML tags are used to create the form shell. Using HTML you can create
text boxes, radio buttons, checkboxes, drop-down menus, and more...
EXAMPLE: FORM
Text Box

Drop-down Menu
Radio Buttons
Checkboxes

Text Area

Reset Button
Submit Button
THE FORM SHELL
A form shell has three important parts:

❑ the <FORM> tag, which includes the address of the script which will
process the form

❑the form elements, like text boxes and radio buttons

❑the submit button which triggers the script to send the entered
information to the server
CREATING THE SHELL

❑ To create a form shell, type <FORM METHOD=POST

ACTION=“script_url”> where “script_url” is the address of the script

❑ Create the form elements

❑ End with a closing </FORM> tag

CREATING TEXT BOXES
❑ To create a text box, type <INPUT TYPE=“text” NAME=“name”
VALUE=“value” SIZE=n MAXLENGTH=n>

❑ The NAME, VALUE, SIZE, and MAXLENGTH attributes are optional

TEXT BOX ATTRIBUTES
❑ The NAME attribute is used to identify the text box to the processing script

❑ The VALUE attribute is used to specify the text that will initially appear in
the text box

❑ The SIZE attribute is used to define the size of the box in characters

❑ The MAXLENGTH attribute is used to define the maximum number of

characters that can be typed in the box
EXAMPLE: TEXT BOX
First Name: <INPUT
TYPE="text"
Here’s how it would
NAME="FirstName" look on the Web:
VALUE="First Name"
SIZE=20>
<BR><BR>

Last Name: <INPUT

TYPE="text"
NAME="LastName"
VALUE="Last Name"
SIZE=20>
<BR><BR>
CREATING RADIO BUTTONS

To create a radio button, type <INPUT TYPE=“radio” NAME=“name”

VALUE=“data”>Label, where “data” is the text that will be sent to the
server if the button is checked and “Label” is the text that identifies the
button to the user
EXAMPLE: RADIO BUTTONS
<B> Size: </B>
<INPUT TYPE="radio" NAME="Size"
VALUE="Large">Large
<INPUT TYPE="radio" NAME="Size"
VALUE="Medium">Medium
<INPUT TYPE="radio" NAME="Size"
VALUE="Small">Small
CREATING CHECKBOXES
❑ To create a checkbox, type <INPUT TYPE=“checkbox” NAME=“name”
VALUE=“value”>Label

❑ If you give a group of radio buttons or checkboxes the same name, the
user will only be able to select one button or box at a time
EXAMPLE: CHECKBOXES
<B> Color: </B>
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Red">Red
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Navy">Navy
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Black">Black
CREATING DROP-DOWN MENUS
❑ To create a drop-down menu, type <SELECT NAME=“name” SIZE=n MULTIPLE>

❑ Then type <OPTION VALUE= “value”>Label

❑ In this case the SIZE attribute specifies the height of the menu in lines and
MULTIPLE allows users to select more than one menu option
EXAMPLE: DROP-DOWN MENU
<B>WHICH IS FAVOURITE FRUIT:</B>
<SELECT>
<OPTION VALUE="MANGOES">MANGOES
<OPTION VALUE="PAPAYA">PAPAYA
<OPTION VALUE="GUAVA">GUAVA
<OPTION VALUE="BANANA"> BANANA
<OPTION VALUE="PINEAPPLE">PINEAPPLE
</SELECT>
CREATING A SUBMIT BUTTON
❑ To create a submit button, type <INPUT TYPE=“submit”>

❑ If you would like the button to say something other than submit, use the
VALUE attribute

❑ For example, <INPUT TYPE=“submit” VALUE=“Buy Now!”> would create

a button that says “Buy Now!”
TABLES
❑ Tables can be used to display rows and columns of data, create multi-column text,
captions for images, and sidebars

❑ The <TABLE> tag is used to create a table; the <TR> tag defines the beginning of
a row while the <TD> tag defines the beginning of a cell
ADDING A BORDER
❑ The BORDER=n attribute allows you to add a border n pixels thick
around the table

❑ To make a solid border color, use the BORDERCOLOR=“color” attribute

❑ To make a shaded colored border, use BODERCOLORDARK=“color” and

BORDERCOLORLIGHT=“color”
CREATING SIMPLE TABLE
<TABLE BORDER=10>
Here’s how it would
<TR>
<TD>One</TD>
look on the Web:
<TD>Two</TD>
</TR>
<TR>
<TD>Three</TD>
<TD>Four</TD>
</TR>
</TABLE>
ADJUSTING THE WIDTH
❑ When a Web browser displays a table, it often adds extra space. To
eliminate this space use the WIDTH =n attribute in the <TABLE> and
<TD> tags

❑ Keep in mind - a cell cannot be smaller than its contents, and if you
make a table wider than the browser window, users will not be able to
see parts of it.
CENTERING A TABLE
There are two ways to center a table
▪ Type <TABLE ALIGN=CENTER>

▪ Enclose the <TABLE> tags in opening and closing <CENTER> tags

WRAPPING TEXT AROUND A TABLE
❑ It is possible to wrap text around a table. This technique is often used to
keep images and captions together within an article.

❑ To wrap text around a table, type <TABLE ALIGN = LEFT> to align the
table to the left while the text flows to the right.

❑ Create the table using the <TR>, <TD>, and </TABLE> tags as you
normally would
ADDING SPACE AROUND A TABLE

To add space around a table, use the HSPACE=n and VSPACE=n attributes
in the <TABLE> tag
Example:
<TABLE HSPACE=20 VSPACE=20>
ALIGNING CELL CONTENT
❑ By default, a cell’s content are aligned horizontally to the left and and
vertically in the middle.

❑ Use VALIGN=direction to change the vertical alignment, where

“direction” is top, middle, bottom, or baseline

❑ Use ALIGN=direction to change the horizontal alignment where

“direction” is left, center, or right
CONTROLLING CELL SPACING
❑ Cell spacing is the space between cells while cell padding is the space
around the contents of a cell

❑ To control both types of spacing, use the CELLSPACING =n and

CELLPADDING=n attributes in the <TABLE> tag
NESTING TABLES

❑ Create the inner table

❑ Create the outer table and determine which cell of the outer table will
hold the inner table
❑ Test both tables separately to make sure they work
❑ Copy the inner table into the cell of the outer table
❑ Don’t nest too many tables. If you find yourself doing that, find an easier
way to lay out your Web page
CHANGING A CELL’S COLOR
To change a cell’s color, add the BGCOLOR=“color” attribute to the <TD> tag

Example:
<TD BGCOLOR=“blue”>
HTML GRAPHICS

HTML Canvas Graphics

The HTML <canvas> element is used to draw graphics on a web page.
The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a
gradient rectangle, a multicolor rectangle, and a multicolor text.

<canvas id="myCanvas" width="200" height="100"></canvas>

HTML SVG Graphics

SVG defines vector-based graphics in XML format.
• SVG stands for Scalable Vector Graphics
• SVG is used to define graphics for the Web
• SVG is a W3C recommendation

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
INTRODUCTION TO XML
❑ XML stands for EXtensible Markup Language.
❑ It is a markup language much like HTML.
❑ It was designed to describe data, not to display data.
❑ It’s tags are not predefined. We must define our own tags.
❑ If we need to display dynamic data in our HTML document, it will take a lot of
work to edit the HTML each time the data changes.
❑ With XML, data can be stored in separate XML files.
❑ This way we can concentrate on using HTML for display, and be sure that changes
in the underlying data will not require any changes to the HTML.
❑ With a few lines of JavaScript code, we can read an external XML file and update
the data content of our web page.
It has following advantages:

Simplifies data sharing.

Simplifies data transport.

Simplifies platform changes.

Makes the data more available.