Technology associated with management of data on
the world wide web.
Management of data?
1. communication,
2. information sharing,
3. interoperability,
4. user-centered design
5. and collaboration on the World Wide Web.
2
INTRODUCTION
World wide web : It is a system of interlinked
hypertext documents accessed via internet with a
web browser. (or)
An information system on the Internet which
allows documents to be connected to other
documents by hypertext links, enabling the user to
search for information by moving from one
document to another.
Web : network consisting of a collection of
websites.
Website: collection of web pages maintained by a
single person or organization.
3
A website has a distinct
fully qualified domain name
Ex:- www.google.com.
Every website is made up of one or more web
pages.
4
Contents:
1. HTML Introduction
2. Common tags –List, Tables, images
3. Forms
4. Frames
5. Cascading Style sheets
5
HTML Introduction
web pages are written in
HyperText Markup Language (HTML).
Web pages contain text ,hyperlinks (links
to other web pages), tables, images.
Less commonly, web pages may also
contain Flash animations, Java applets, or
MPEG video files.
6
7
Markup: Markup refers to the sequence of
characters or other symbols that you insert at
certain places in a text or word processing file to
indicate how the file should look when it is printed
or displayed or to describe the document's logical
structure. The markup indicators are often called
"tags.
Hypertext:Apart from text, hypertext is sometimes
used to describe tables, images and other
presentational content forms with hyperlinks.
is text which contains links to other texts.
8
WEB BROWSER
Web browsers are software programs that
allow users to access the web’s content.
Ex: Internet Explorer
9
Title bar
Menu bar
Tool bar
Address bar
Status bar
10
CATEGORIES OF TEXT
Plain text- Strings of
characters of fixed font size.
Rich text -Strings of
characters of various font size.
Hypertext – Plain / Rich
text plus links to other
documents.
11
HTML is a language used to design web pages.
Without HTML, Web browsers take contents of web
page and put them just like a paragraph without any
line breaks, alignments etc .
With HTML , we can specify line breaks , alignments
of text , images etc
In
other words ,HTML is all about specifying structure
and format of web page.
12
HTML Tags
HTML tags are used to mark-up HTML elements.
The surrounding characters are called angle brackets.
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.
HTML element : start tag , content ,end tag
HTML tags are not case sensitive, <b> means the same as
<B>
13
AnHTML file is a text file containing small markup
tags.
Themarkup tags tell the Web browser how to
display the page.
AnHTML file must have an htm or html file
extension.
AnHTML file can be created using a simple text
editor.
14
<html>
<head>
<title>Title of the
page
</title>
</head>
<body>
Content of the page
</body>
</html>
15
EXAMPLE
<html>
<head>
<title>This is my first web page ! </title>
</head>
<body>
<b> welcome to snist </b>
</body>
</html>
16
17
Tag<HTML> indicates this page is written in HTML
language.
HTML page contains two main section , HEAD and BODY.
HEAD section includes information about the page such as
its title, page formatting instructions, scripts etc.
The BODY section includes actual content of the page.
Tags can be nested to create complex structures.
All tags may not need its closing tag.
18
Attribute : keyword that is added INSIDE another tag
Used to add functions where that tag is in effect. For
example, the BODY tag can contain the background color,
<BODY BGCOLOR="BLUE">.
The end tag </BODY> does not have to contain the
attribute. The background color will be in effect
throughout the document.
General form: <tagname attribute=“value”>
19
Common HTML tags:-
Understanding the following table:
The first two columns show the opening and
closing tags . Note that just a few tags do not have a
closing tag.
The attribute column shows list of attributes that
can be placed inside of that tag.
The Description column tells what the tag does.
20
Document Structure
Opening Tag Closing Attribute Description
Tag
<HTML> </HTML> Identifies document
as HTML
<HEAD> </HEAD> Document Head
contains Title Tag
<TITLE> </TITLE> Title of Document
<BODY> </BODY> Contents of
Document
21
Formatting
Opening Tag Closing Tag Attribute Description
<BODY> </BODY> Contents of
Document
BGCOLOR="# Background Color
color code
Or name"
BACKGROUN Background Image
D="... .gif "
TEXT="#color Text Color
code"
<CENTER> </CENTER> Centers Text and
Images
<H1> to <H6> </H1>to</H6> Heading
ALIGN="Left, Align Text
Center,
Right"
22
<P> </P> New Paragraph
ALIGN="Left, Align Text
Center, Right"
<BR> Line Break
<HR> Horizontal Rule
ALIGN="Left, Align Text
Center, Right"
SIZE = Thickness of
"number" Horizontal Rule
WIDTH = % of Document to
"number %" Span
NOSHADE Removes
Shading
23
Character
Opening Tag Closing Tag Attribute Description
<FONT> </FONT> Section of Text
COLOR="#color Font Color
code"
SIZE="number" Font Size
FACE=“face” Font Face
<B> </B> Bold Text
<I> </I> Italic Text
<STRIKE> </STRIKE> Strike out Text
<SUB> </SUB> Subscript Text
<SUP> </SUP> Superscript Text
24
Links
Opening Tag Closing Attribute Description
Tag
<BODY> </BODY> Contents of Document
LINK="#color code" Unvisited Link Color
ALINK=“#colorcode Active link Color
”
VLINK="#color Visited Link Color
code"
<A HREF = "Item </A> Destination of Link
Location">
<A HREF=“#Label” </A>
Moves to Other Section of
<A NAME = </A> Web Page
"Label">
25
Images
Opening Tag Closing Tag Attribute Description
<IMG SRC ="Image Imports Image
Location">
ALIGN="Left, Right" Align Image
ALT Alternative Text
BORDER Puts Border around Image
WIDTH Width of Image in Pixels
HEIGHT Height of Image in Pixels
26
Tables
Opening Tag Closing Tag Attribute Description
<TABLE> </TABLE> Adds Table
BORDER="number" Border for Rows & Columns
CELLPADDING Size of Cell Wall
CELLSPACING Spacing between Border and
Cell Contents
BGCOLOR Background Color of Cells
<TR> </TR> Table Row (Start & End)
ALIGN="Left, Center, Aligns Text in Row
Right" Horizontally
VALIGN="Top, Aligns Text in Row Vertically
Middle, Bottom"
<TD> </TD> Defines Data Cell
COLSPAN="number" Spans Cells across Column
ROWSPAN="number" Spans Cells across Row
<TH> </TH> Header Cell in Table
COLSPAN="number" Spans Cells across Column
ROWSPAN="number" Spans Cells across Row
<CAPTION> </CAPTION> Text outside Table
ALIGN="Top, Bottom" Aligns Caption at Top or
Bottom 27
<!– Table Example
<body>
<center><b> <caption > Table Example </caption></b> </center>
<table border="2" align="center" bgcolor="pink" cellpadding="10"
cellspacing="2">
<tr align=“center”>
<th> RollNo </th>
<th> Name </th>
</tr>
<tr>
<td align=“right”> 1 </td>
<td> abc </td>
</tr>
<tr>
<td align=“right”> 2 </td>
<td> pqr </td>
</tr>
</table>
28
Example for colspan attribute of td tag
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
29
Opening Tag Closing Tag Attribute Description
<OL> </OL>
Type=“1 or a/A or Defines order type
i/I “
Start= “integer Specifies starting
number” number/alphabet /
roman number
<UL> </UL>
Type=“square or Defines bullets
circle or disk “ type
<LI> </LI> List Item
30
<caption> List </caption>
<UL>
<LI>Unordered information.
<LI>Ordered information.
<LI>Definitions.
<OL>
<LI> ... Level one, number one...
<LI> ... Level one, number two...
<OL start="1" type="a">
<LI> ... Level two, number one...
</OL>
<LI> ... Level one, number three...
</OL>
<DL>
<DT><STRONG>Lower cost</STRONG>
<DD>The new version of this product costs significantly less than the
previous one!
<DT><STRONG>Easier to use</STRONG>
<DD>We've changed the product so that it's much easier to use!
</DL>
31
HTML forms
32
<form> :- another kind of HTML tag
used to create GUIs on Web pages
◦ Purpose: to ask the user for information
◦ The information is then sent back to the server
Area that can contain form elements
◦ syntax <form parameters> ...form elements... </form>
◦ Form’s parameters tell JavaScript how to send the
information to the server
33
FormPage1
SERVER
Name,address,
gender, interests
SUBMIT
Form elements:
checkboxes, text fields, radio buttons, drop-down menus, etc
Other kinds of HTML tags can be mixed in with the form elements
Contains a Submit button to send the information in the
form elements to the server
34
<form parameters> ... </form> tag encloses form
elements and other HTML
The parameters to form tell what to do with the user
input
◦ action="url" (required)
Specifies where to send the data when the Submit button is
clicked
◦ method="get" (default)
Form data is sent as a URL with ?form_data info appended to
the end
Used if data is all ASCII and not more than 100 characters
35
◦ method="post"
Form data is sent in the body of the URL request
Cannot be bookmarked by most browsers
◦ target="target"
Tells where to open the page sent as a result of the request
target= _blank means open in a new window
target= _top means use the same window
target= <framename> means use the same window
36
form elements use the input tag, with a type="..."
argument to tell which kind of element it is.
Other input tag arguments :
1. name: the name of the element
2. value: the initial value of the element
3. readonly: the value cannot be changed
4. disabled: the user can’t do anything with this element
5. Other arguments are defined for the input tag but have
meaning only for certain values of type
37
A text field:
<input type="text" name="textfield" value="with an initial value">
A multi-line text field
<textarea name="textarea" cols="24" rows="2">Hello</textarea>
A password field:
<input type="password" name="textfield3" value="secret">
• Note that two of these use the input tag, but one uses textarea
38
A checkbox:
<input type="checkbox" name="checkbox” value="checkbox"
checked>
type: "checkbox“
name: used to reference this form element from
JavaScript
value: value to be returned when element is checked
Note that there is no text associated with the
checkbox—you have to supply text in the
surrounding HTML
39
A submit button:
<input type="submit" name="Submit" value="Submit">
A reset button:
<input type="reset" name="Submit2" value="Reset">
A plain button:
<input type="button" name="Submit3" value="Push Me">
submit: send data
reset: restore all form
elements to their initial state
button: take some action as
specified by JavaScript
• Note that the type is input, not “button”
40
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male<br>
<input type="radio" name="radiobutton" value="myValue2"
checked> female
If two or more radio buttons have the same name, the user can
only select one of them at a time
◦ This is how you make a radio button “group”
If you ask for the value of that name, you will get the value
specified for the selected radio button
As with checkboxes, radio buttons do not contain any text
41
A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>
Additional arguments:
◦ size: the number of items visible in the list (default is "1")
◦ multiple: if set to "true", any number of items may be selected
(default is "false")
42
<input type="hidden" name="hiddenField" value="nyah">
<-- right there, don't you see it?
What good is this?
◦ All input fields are sent back to the server, including hidden fields
◦ This is a way to include information that the user doesn’t need to see (or
that you don’t want her to see)
◦ The value of a hidden field can be set programmatically (by JavaScript)
before the form is submitted
43
<html>
<head>
<title>Get Identity</title>
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female</p>
</form>
</body>
</html>
44
Frames
45
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
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.
46
A way to split up what is viewed in the browser into
sections
Difference between Frame and tables :IN EACH FRAME
you can VIEW a SEPARATE HTML FILE
47
<frameset></frameset>
Replaces the <body> tag in a frames document; can
also be nested in other framesets
<frameset rows="value, value">
Defines the rows within a frameset, using number in
pixels, or percentage of width
<frameset cols="value,value">
Defines the columns within a frameset, using number in
pixels, or percentage of width
<frame>
Defines a single frame — or region — within a frameset
<noframes></noframes>
Defines what will appear on browsers that don't support
frames
48
Browser Support for Frames
If a user is using any old browser or any browser which
does not support frames then <noframes> element should
be displayed to the user.
So you must place a <body> element inside the
<noframes> element because the <frameset> element is
supposed to replace the <body> element, but if a browser
does not understand <frameset> element then it should
understand what is inside the <body> element which is
contained in a <noframes> element.
You can put some nice message for your user having old
browsers. For example Sorry!! your browser does not
support frames.
49
<frame src="URL">
Specifies which HTML document should be displayed
<frame name="name">
Names the frame, or region, so it may be targeted by other frames
<frame marginwidth=#>
Defines the left and right margins for the frame; must be equal to or
greater than 1
<frame marginheight=#>
Defines the top and bottom margins for the frame; must be equal to
or greater than 1
<frame scrolling=VALUE>
Sets whether the frame has a scrollbar; value may equal "yes," "no,"
or "auto." The default, as in ordinary documents, is auto.
<frame noresize>
Prevents the user from resizing a frame
50
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
51
52
Let’s create a page that has a left hand menu and a
right hand content area where when we click on the
menu links the content on the right hand side
changes
53
54
4 HTML files
Filenames are:
◦ Home.htm
◦ Content1.htm
◦ Content2.htm
◦ Content3.htm
55
This File needs the list of links
◦ Home Links to Home.htm
◦ Content1 Links to Content1.htm
◦ Content2 Links to Content2.htm
◦ Content3 Links to Content3.htm
Each link should have its properties set so that:
“Target = MainContentArea” this is where it
points to which frame the html file will be
displayed in.
Save this file as “LeftMenu.htm”
56
In Code view (Save file as FrameExample.htm):
Code What it does
<frameset cols="30%,*"> Splits browser into 2 vertical areas. First is a column
that is 30% of the width of the browser window,
second is rest of the browser window
This is the left frame and it is called “LeftMenu”. The
<frame name="LeftMenu" src="leftMenu.htm" default source to be displayed in this frame is
marginwidth="0" marginheight="0" scrolling="auto" “leftMenu.htm” NOTE: Any changes to “leftMenu.htm”
frameborder="1"> will appear on all pages
This is the main area for content and is a frame called
<frame name="MainContentArea" “MainContent”. The default source to be displayed in
src=“Home.htm" marginwidth="0" marginheight="0" this frame is “Home.htm”
scrolling="auto" frameborder="1">
This is the closing tag saying that there are no more
</frameset> frames in this frameset
57
Move all the pages to your folder
◦ Home.htm
◦ Content1.htm
◦ Content2.htm
◦ Content3.htm
◦ LeftMenu.htm
◦ FrameExample.htm
Open the file “FrameExample.htm” in your
Browser
58
Nest a second frameset into your initial frameset as
shown below:
Save file as “FrameExample2.htm”
<frameset cols="30%,*">
<frame name="LeftMenu" src="LeftMenu.htm“ >
<frameset rows="50,*">
<frame name="TopMenu" src="TopMenu.htm“ >
<frame name="MainContent" src="MainContent.htm“
frameborder="1">
</frameset>
</frameset>
59
Copy the Files you created over to your folder
◦ FrameExample2.htm
◦ TopMenu.htm
60
Disadvantages of Frames
◦ There are few drawbacks with using frames, so it's never
recommended to use frames in your web pages:
Some smaller devices cannot cope with frames often
because their screen is not big enough to be divided
up.
Sometimes your page will be displayed differently
on different computers due to different screen
resolution.
The browser's back button might not work as the
user hopes.
There are still few browsers that do not support
frame technology.
61
62
CSS
◦ Used to describe the presentation of a document
written in a mark up language.
◦ CSS is style sheet language used for describing the look
and formatting of a document.
◦ Style were added to html4.0 in 1996
◦ To define color, fonts, layout and other aspects of
document presentation.
◦ Purpose: Separate document structure from document
presentation.
63
Selector
h1 {
color: #0000FF;
font-size: 24pt; Declarations
}
Value
Property
64
CSS rule set consists of Selector and a declaration
block.
The Selector points to the HTML Element you want
to style.
Declaration block contain more than one declaration
seperated by semicolon
Each declaration include a property name and a
value, seperated by colon
65
Inline Styles
◦ coded in the body of the web page as an attribute of an
HTML tag.
◦ Applies to the specific element that contains it as an
attribute
Embedded Styles/Internal Style sheet
◦ Defined in the header of a web page.
◦ Apply to the entire web page document.
Linked / External Styles
◦ coded in a separate text file.
◦ This text file is linked to the web page by using a <link>
tag in the header section.
66
<html>
<head>
</head>
<body>
<h1 style="background-color:#23fff0">This is heading 1</h1>
<p style="background-color:rgb(5,0,255);
color:white; font-size:150%">
This is a paragraph.</p>
</body>
</html>
67
<html>
<style type="text/css">
body {background-color: yellow; color:red}
p {color:green; font-size=60%}
p.change { color:rgb(0,0,255); font-size:195%}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p> color is green. font size=60%.</p>
<p class="change">This is a paragraph with class="change". font-
size=90%.</p>
</body>
68
<html>
<head>
<link rel="stylesheet“
type="text/css“
href="style.css“ />
</head>
<body>
An external style sheet can be written in any text
editor. The file should not contain any html tags. The
style sheet file must be saved with a .css extension.
69
Instead of this…
CSS: H1 { color: #FFFF00; }
H2 { color: #FFFF00; }
You can do this…
CSS: H1, H2 { color: #FFFF00; }
70
The class selector selects elements with a specific
class attribute.
To select elements with a specific class, write a
period (.) character, followed by the name of the
class.
In the example below, all HTML elements with
class="center" will be red and center-aligned:
71
<html>
<head>
<style> o/p:
p.center {
text-align: center; This heading will not be affected
color: red; This paragraph will be red and center-aligned
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
72
Classes
◦ Allow styles for groups of elements
CSS: .warning { color: red; }
HTML: <h3 class=“warning”>
File not found.
</h3>
73
CSS: p.black {color: #000000;}
p.blue {color: #000080;}
HTML: <p class=“black”>
This sentence is black.
</p>
<p class=“blue”>
This sentence is blue.
</p>
74
background-color
color
font-family
font-size
padding
margin
text-decoration
line-height
text-align
background-image
75
font-family
◦ Ordered list of font names
◦ Quote names with spaces: ex. “Arial Black”
CSS: p.arial {
font-family: Arial, Helvetica, sans-serif;
}
font-size
◦ larger, smaller, or specific height
CSS: p.big { font-size: 60px; }
76
color:
◦ Named Colors: red, blue, green
◦ Hex: #FFCC00, #FC0
◦ RGB values: rgb(123, 123, 123)
CSS: p.green { color: #00FF00; }
background-color:
◦ color or transparent
CSS: p.highlight { background-color: #FFCC00; }
77
Text Text Text Text Text Text
Text Text Text Text Text Text
margin padding Text Text Text Text Text Text
padding margin
Text Text Text Text Text Text
Margin
◦ The space between this and other elements
◦ margin-top, margin-right, margin-bottom, margin-left
◦ margin: 5px 10px 5px 10px;
◦ Values are in clockwise order
78
Text Text Text Text Text Text
Text Text Text Text Text Text
margin padding Text Text Text Text Text Text
padding margin
Text Text Text Text Text Text
Padding
◦ The CSS padding properties define the white space
between the element content and the element border.
◦ The space between the margin and the element
◦ padding-top, padding-right, padding-bottom, padding-left
(can use same shortcut as with margins)
◦ Comparable to TABLE’s cell-padding
79
This “cascade” applies the styles in order from outermost
(External / Linked Styles) to innermost (actual XHTML code
on the page).
This way site-wide styles can be configured but overridden
when needed by more granular (or page specific) styles.
80
CSS was a revolution in the world of web design.
control layout of many documents from one
single style sheet;
more precise control of layout;
apply different layout to different media-types
(screen, print, etc.)
81
END
82
