2. Content
Html Introduction
Html Tags – IMG, Form, Hyperlinks, Frames, Tables
Exercise
Cascading Style Sheets – Introduction
Advantages of CSS
Types of Style Sheets
Selectors
Key Concepts
Example
3. Introduction [Contd…]
Web Browser
Establishes the connection to the specified Web server, at the
requested URL (Uniform Resource Locator (URL)
Interprets and formats the information found on the server, and
displays the formatted information.
Web Server
A computer that delivers/serves Web pages.
Every Web server has an IP address and possibly a domain name.
E.g:I f you enter the URL http://www.yahoo.com/index.html in your
browser, this sends a request to the server whose domain name is
yahoo.com. The server then fetches the page named index.html
and sends it to your browser.
Each Web server contains documents that are written in the
Hypertext Markup Language (HTML)
Requests and responses are exchanged between Web browsers and
Webservers using the Hypertext Transfer Protocol (HTTP)
4. Introduction [Contd…]
Hypertext Transfer Protocol (HTTP)
stateless, application level protocol.
HTTP defines how
the browser establishes connection to the server
the browser requests information from the server
the server responds to the browser’s request
the server/browser closes the connection
Works on Client-Server architecture
5. Introduction [Contd…]
Hypertext Markup Language(HTML)
a simple markup language used to define and describe the layout
of a web page
Uniform Resource Locator(URL)
standard identifier used to locate information on the Web
elements in a URL – protocol://domain name/filename
hypertext protocol – http://www.microsoft.com/index.html
file transfer protocol – ftp://ftp.dartmouth.org
6. URL Basics
A uniform resource locator, commonly abbreviated as URL
specifies the location of the resource on the
internet/intranet or a web application.
URL types:
Absolute URLs
Relative URLs
Fragment URLs
Absolute URLs
Absolute URLs use a complete Internet address to give the location of
a resource.
Examples:
http://msdn.microsoft.com/support/index.asp
http://msdn.microsoft.com/code/welcome.asp?frame=true
7. URL Basics
Relative URLs
Relative URLs are used for accessing files when the full Internet
address is unnecessary.
Examples:
index.asp
/index.asp
welcome.asp?frame=true
Fragment URLs
Fragment URLs are used to access to a specific location within a
URL.
Examples:
http://www.someplace.com/shopping.html#books
8. Introduction - HTML Tags
HTML Tags are enclosed in angle brackets, <like this>
Attributes are commands added to the tags to specify various
options.
Any HTML file should start with the tag <HTML> and end with the
tag </HTML>
The text between the start and end tags is the element content
HTML tags are not case sensitive, <b> means the same as <B>
HTML file is saved with the extension htm or html
That is filename.htm or filename.html
9. Introduction - HTML Tags [Contd…]
Simple HTML for example,
<HTML>
<HEAD>
<TITLE>My First HTML Page </TITLE>
</HEAD>
<BODY>This is my first HTML Assignment. I should do it correctly.</BODY>
</HTML>
10. Introduction - HTML Tags [Contd…]
Tag with attributes
<HTML>
<HEAD>
<TITLE>My First HTML Page </TITLE>
</HEAD>
<BODY bgcolor="#cccccc" text="#660000">
This HTML page is designed to explain the attributes of the body tag.
<p>bgcolor and text are the attributes of the body tag.
<p>bgcolor="#cccccc" indicates the background color of the html page.<br>
text="#660000" indicates the color of the text.
</BODY>
</HTML>
11. Using Hyperlinks and Anchors
Uses of Hyperlinks:
Connecting to other HTML pages that are part of a web site or to
related material from other Web sites.
Connecting to non-HTML resources, including portable documents
such as Adobe Acrobat PDF files or video clips such as QuickTime
movies.
Structure of Hyperlinks:
<a href="http://www.linkfinder.com/">URL description</a>
where, http://www.linkfinder.com/ is an URL and <a..> is the anchor
tag.
Code: <a href="www.adobe.com/downloads">Download</a> Adobe
Acrobat Reader
Output: Download Adobe Acrobat Reader
12. Adding Images to a Web Page
<IMG> tag is used to include an image in the web document.
Example
Code: <IMG SRC="starflower.gif" width="105" height="97" border="0">
Output:
13. Creating HTML tables
Table is a system of columns and rows.
Using tables you can control precisely how you want your
content divided up and where you want it placed.
To create a HTML use a <table> tag and its attributes.
Each row of a table is specified using a <tr> tag.
Each cell of a table is specified using a <td> tag.
Table heading is specified using a <th> tag.
15. Specifying rowspan and colspan
Specifying Colspan
<table>
<tr> <td colspan=2>Heading</tr>
<tr><td> One
<td> Two
</tr>
</table>
Specifying Rowspan
<table border=1>
<tr><td rowspan=2>One<td> Two
</tr>
<tr><td> Three</tr>
</table>
Heading
One Two
Two
One
Three
16. Frames [Contd…]
Any link in one frame can open a page in another frame.
Accomplish this by using the name attribute of the <frame> tag and the
target attribute of the <a> tag.
The name attribute gives each frame an identity as whatever name you
choose.
Refer the frame name in the target attribute of the <a> tag
frame.html
<frameset cols="20%,80%">
<frame name="toolbar" src="toolbar.html">
<frame name="content" src="index.html">
</frameset>
toolbar.html
<a href="index.html" target="content">home</a>
<a href="products.html" target="content">products</a>
<a href="info.html" target="content">about us</a>
<a href="feedback.html" target="content">feedback</a>
18. Using Forms in HTML [Contd…]
Introduction
HTML Forms act as an Interface between the End User and the
server side Application. At client side the form is filled and data is
passed on to the server, where the data is interpreted and used
accordingly.
Different Elements
Form
Input
Select and Option
Textarea
Others [Button, Label, Fieldset and Legend]
19. Using Forms in HTML [Contd…]
Form Element
The form has got two main attributes viz.. Action and Method.
Action attribute is required. Methods are ‘get’ which is default and
‘post’
Other attributes define the encoding type and event
handlers[javascript/vbscript]
Here is an eg. of Form tag
<form action=URL method=get/post enctype=” multipart/form-data”
onSubmit [script – event handling] onReset[script]>
</form>
The action attribute has the url to which the Form data has to go
20. Using Forms in HTML [Contd…]
The GET method submits the name/value pairs to the URL
specified in action attribute appending to the URL. eg
urlname?FirstName=value&SecondName=value
This can be seen on the browser’s address bar
The method POST submits the data as part of HTML Body
The ENCTYPE is used to state the encoding type of the form
contents. Default being ‘application/x-www-form-urlencoded’.
There are two attributes[onSubmit and onReset] which are used
w.r.t scripting is concerned.
The ONSUBMIT event is triggered when a submit button is
clicked and from here the control can be passed on to any
function of a script
eg. javascript or vbscript Usage: <form ….
OnSubmit=”javascript: return functionName()”> ---- </form>
21. Using Forms in HTML [Contd…]
Basically this can be used whenever we want to invoke a
javascript/vbscript function on clicking on a ‘Submit’ button
Whenever we use any form element in a web page it must be with
in <form></form> tags.
Input Elements
button – Used to invoke a script function or to play around the
controls of form elements
checkbox - Off/on
file - Used for selecting user-selecting file
hidden – to hold hidden form elements which do not appear on the
web page
image – to make an image as equivalent to a Submit button
password – to Mask the input entry
radio – one entry choosing
Reset – reset the form elements’ values
22. Using Forms in HTML [Contd…]
Hidden
The hidden value enables to submit form information that’s invisible to
the user on the web page.
Eg. <input type=”hidden” name=”Page”
value=”hiddenValue”>
Image
This is same as a ‘Submit’ button, but the only difference is that it
replaces the stark Submit button with an Image. Otherwise it has the
same function.
Eg. <input type=”image” src=”images/submit_Image”>
23. Using Forms in HTML [Contd…]
Password
This is an input control where the text is masked with an asterisk.
Otherwise its similar to a text box.
Eg. <input type=”password” name=“userpswd”>
24. Using Forms in HTML [Contd…]
Submit
This is used to send the name/value pairs of the active form
elements to the URL
Specified in the FORM declaration
HTML specification enables multiple Submit buttons
Its declared as <input type=”submit”>
Text
This can be used to enter text of a single-line in a text box
Eg. <input type=”text” name=”firstname” size=”15”
maxlength=”20”>
The ‘size’ attribute sets the length of the text box
The ‘maxlength’ attribute limits[No. of characters] the user for
typing text
One more attribute is ’readonly’. This locks the cursor on focus of
the text box and does not allow the user to type any text
25. Using Forms in HTML [Contd…]
Select and Option Elements
The SELECT element is used to create a list of choices either as a
drop-down menu or a list box. Each of the choices in the list is an
OPTION element
<SELECT name=”controlName” size=”controlWidth”
onChange=script>
<option value=”Value1”>First Option</option>
<option value=”Value2” selected>Second Option</option>
<option value=”Value3”>Third Option</option>
</SELECT>
onChange is an event for Select box and directs the flow control to
the specified script function.
The default value if not specified explicitly for an option tag would
be its content.
The attribute selected leaves that option highlighted
26. Using Forms in HTML [Contd…]
Text Area Element
The textarea element is similar to the INPUT element’s text type.
But in this case the user can type a larger section of text than they
can with the text boxes
It’s a multiple line text input.
<TEXTAREA name=”control” rows=”numRows” cols=”numCols”>
The dimensions of the textarea window is specified by the attributes
‘rows’ and ‘cols’
27. Using Forms in HTML [Contd…]
Exercise
Create a simple HTML ‘Registration Form’ web page having following field names,
Choose the appropriate form element for each field.
1 UserID
2 Password
3 RetypePassword
4 First Name
5 Last Name
6 Country – List of some countries
7 City – List of some states of that country
8 Your interests ---------Entertainment,Business, Shopping,Health,Music,Travel, Others Please
specify
9 Are you a fresher?
10 Write a note on your experiences at MindTree so far
11 Upload your Photo
12 Email ID
Provide all necessary buttons to suite this form. The submit button is an image.
28. CSS
What are style sheets?
Style sheets provide a means for authors to specify how they wish
documents written in a markup language such as XML or HTML to
be formatted.
29. CSS [Contd…]
Why Style Sheets
There are two answers to this:
HTML isn't designed for styling documents - when you write an HTML
document, you are specifying only the content that the element
contains. . If you wished to state that you want your headings to be
yellow Helvetica, then you could have <H1><FONT
color="yellow" face="Helvetica">A
heading</FONT></H1>, but this is bad for several reasons:
You have to add that piece of code to each heading that you want styled - this is
time-consuming, prone to error and makes files excessively bloated (a typical page
styled using HTML will be 1/3rd formatting tags).
If you want to change those headings to pink Arial, then you will have to change
each heading individually - a prohibitively laborious task on a large site.
HTML simply doesn't offer sufficient control over document formatting
important formatting effects such as leading (the space between
lines), text shadows, and many other effects just can't be done using
HTML.
30. CSS [Contd…]
Why Style Sheets?
Style Sheets helps in cost reduction, but also the download speed
will increase for viewers of your pages
31. CSS [Contd…]
What reasons are there not to use Style Sheet?
Not all the browsers support the Style Sheet properly.
Advantages of using Style Sheets
Style sheets have the following advantages:
They separate content from formatting.
Easy maintainance
They reduce download time by removing formatting information
from documents
They give far more control over formatting than HTML - such
features as background images and colors on all elements - not
just the whole document, etc.
They ensure a consistent appearance across a site
32. CSS [Contd…]
Types Of Style Sheets
Inline Style
Embedded Style Sheet
Linked Style Sheets
Importing Style Sheets
Inline Style
For example see the following snippet
<P style=“color: green”> Paragraph inline style </P>
Inside the style attribute comes style declarations. In this example, the P element is
being made green.
<BODY style=“color: #FFFFFF; background:#000000”> Paragraph
inline style </BODY>
In the above snippet we are applying the Inline style to the Body tag, which will give
the Black back ground to the body and White color for all the text which will appear
in the Body tag.
33. CSS [Contd…]
Embedded Style Sheet
Embedded style sheets are enclosed in a <STYLE
type="text/css"> and </STYLE> tag. They go in the header
of a page:
For example see the following snippet:
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
BODY {color: red}
-->
</STYLE>
</HEAD>
<BODY>
The main Content will appear in the Body section
</BODY>
</HTML>
34. CSS [Contd…]
They have two benefits
They do not affect all the rest of the style sheets that you might use
If a document is saved and read offline, the style will be maintained
35. CSS [Contd…]
Linked Style Sheet
Style sheets are linked using the <LINK rel="stylesheet"
type="text/css" href="name.css"> tag, which must go in
the header of a page.
rel="stylesheet" this says that it is a forward link, and tells the
browser what to expect at the other end, namely a style sheet.
The type attribute, the type of style sheet (always text/css)
The href attribute, the location of the style sheet.
36. CSS [Contd…]
See the following snippet for Linked Style Sheet
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="fluorescent.css">
</HEAD>
<BODY>
The Main content will appear here in the Body Section
</BODY>
<HTML>
Once you have linked the style sheet to your page, you then have
to create the style sheet. For example:
BODY {color: black;
font-family: Geneva, Helvetica, Arial, sans-serif;
background-color: white}
If you saved the example above as a style sheet, then every page
that links to it will have the specified styles.
37. CSS [Contd…]
Advantage of linked Style Sheets
As one style sheet can be attached to hundreds of
files, maintenance of web pages becomes much easier.
Helps to achieve the consistency in the styles through
out the pages.
Disadvantage
If the user downloads the page and if he forgot to
download the Linked CSS then he/she will not be able to
view the page with all the styles.
38. CSS [Contd…]
Importing Style Sheets
The @import rule thus allows you to keep some things the same while
having others different
syntax: @import url(nameoffile.css)
It must come at the start of the style sheet, before any rulesets (a ruleset is
something like P {color: red})
Alternatively it can be specified as
@import "nameoffile.css";,
as @import url("nameoffile.css");
or as @import 'nameoffile.css';.
However, Internet Explorer only supports the url() formats, not the " and '
formats.
39. CSS [Contd…]
Selectors
To give you more freedom to select which elements your style is
applied to.
Element’s Type Selectors:
For style declaration see the following snippet.
H1 { color: red }
H1, H2, H3 { color: red }
40. CSS [Contd…]
Attribute Selectors:
Class
ID
The CLASS attribute enables you to apply declarations to a group of
elements that have the same value on the CLASS attribute
All elements inside BODY can have a CLASS attribute
boldtxt { font-weight: bold }
See the following snippet for actual implementation of Class
attribute
41. CSS [Contd…]
<HTML>
<TITLE>Class Attributes</TITLE>
<STYLE TYPE="text/css">
.boldtxt { font-weight: bold }
.nrmltxt { font-weight: normal }
</STYLE>
<BODY>
<P CLASS= boldtxt >This is Bold Text Line</P>
<P CLASS= nrmltxt >This is normal text line</P>
<P CLASS= boldtxt >Second Line of Bold Text</P>
<P CLASS= nrmltxt >Second Line of Normal Text</P>
</BODY>
</HTML>
42. CSS [Contd…]
ID Attribute:
The ID attribute works like the CLASS attribute with one important
difference –
The value of an ID attribute must be unique throughout the document.
A selector that includes an ID attribute is called an IDselector
The syntax is: #undltxt { text-decoration: underline }
The HTML syntax of the element on which you want to use the ID
attribute resembles that of other elements with attributes; for example:
<P ID=undltxt>Underlined text</P>
43. CSS [Contd…]
Style Attribute:
The STYLE attribute is actually a replacement for the whole selector
mechanism
Instead of having a value that can be referred to in a selector (which is
what ID and CLASS have), the value of the STYLE attribute is actually
one or more CSS declarations.
<P STYLE="text-decoration: underline">Underlined
text</P>
Actual Implementation of Style Attribute
<HTML>
<TITLE>Class Attributes</TITLE>
<BODY>
<P STYLE="font-weight: bold">This is Bold Text Line</P>
<P STYLE="font-weight: normal">This is normal text
line</P>
</BODY>
</HTML>
44. CSS [Contd…]
Anchor Pseudo Classes
Currently only one element type in HTML uses pseudo-classes: the A
(anchor) element
An anchor pseudo-class is a mechanism by which a browser indicates
to a user the status of hyperlinks in a document the user is viewing.
A:link { color: red } /* unvisited link */
A:visited { color: blue } /* visited link */
A:active { color: lime } /* active link */
45. CSS [Contd…]
KEY Concepts
Inheritance if you specify BODY {color: black} then everything
inside BODY will inherit that color unless a contrary declaration is
made.
Case Sensitive All CSS is case insensitive
Test your style sheet on more than one browser.
Modularity of CSS enables faster page loading