0% found this document useful (0 votes)

72 views

HTML and CSS

Uploaded by

api-3740359

Available Formats

Download as PPT, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

72 views

HTML and CSS

Uploaded by

api-3740359

Available Formats

Download as PPT, PDF, TXT or read online on Scribd

You are on page 1/ 50

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
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)
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

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
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
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
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
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>
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>
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
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:
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.
Tables [Contd…]
 Eg.
<table border=1>
<tr>
<th>Year
Year Amount
<th>Amount
</tr> 2002 85,000
<tr> 2001 65,000
<td>2002
<td>85,000
</tr>
<tr>
<td>2001
<td>65,000
</tr>
</table>
Specifying rowspan and colspan

Specifying Colspan
<table>
<tr> <td colspan=2>Heading</tr>
<tr><td> One Heading
<td> Two One Two
</tr>
</table>
Specifying Rowspan
<table border=1>
Two
<tr><td rowspan=2>One<td> Two One
Three
</tr>
<tr><td> Three</tr>
</table>
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>
Frames [Contd…]

 toolbar.html and index.html

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]
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
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>
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
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”>
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”>
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
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
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’
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.
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.
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.
CSS [Contd…]

 Why Style Sheets?

➨ Style Sheets helps in cost reduction, but also the download speed
will increase for viewers of your pages
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
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.
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">

</STYLE>
</HEAD>
<BODY>
The main Content will appear in the Body section
</BODY>
</HTML>
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
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.

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.
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.
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.
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 }
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
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>
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>
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>
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 */
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
CSS [Contd…]