HTML & CSS: Basic Web Dev Lessons

HTML & CSS
BASIC WEB DEV LESSONS
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)
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 browsers request
the server/browser closes the connection
Works on Client-Server architecture
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
<th>Amount
</tr>
<tr>
<td>2002
<td>85,000
</tr>
<tr>
<td>2001
<td>65,000
</tr>
</table>
Year
Amount
2002
85,000
2001
65,000
Specifying rowspan and colspan

Specifying Colspan
<table>
<tr> <td colspan=2>Heading</tr>
<tr><td> One
<td> Two
Heading
One
Two
</tr>
</table>
Specifying Rowspan
<table border=1>
<tr><td rowspan=2>One<td> Two
</tr>
<tr><td> Three</tr>
</table>
One
Two
Three
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]
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
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 browsers 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>
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
Hidden
The hidden value enables to submit form information thats 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>
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>
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
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
Text Area Element
The textarea element is similar to the INPUT elements text type.

But in this case the user can type a larger section of text than they
can with the text boxes
Its 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
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">
<!-BODY {color: red}
-->
</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.
Elements 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]
Example Embedded Style Sheet
CSS [Contd]
Here is the source file for the above program.
CSS [Contd]
Example Linked Style Sheet
CSS [Contd]
Here is the source file for the above program.
CSS [Contd]
Below is the LinkedSS.css file
CSS [Contd]
Reference Links for CSS
http://www.w3.org
http://www.htmlhelp.com
http://www.webreview.com
http://www.wdvl.com/Authoring/Style/Sheets/

HTML & CSS: Basic Web Dev Lessons

Uploaded by

Copyright:

Available Formats

You might also like

HTML & CSS: Basic Web Dev Lessons

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML & CSS: Basic Web Dev Lessons

Uploaded by

Copyright:

Available Formats

HTML & CSS

BASIC WEB DEV LESSONS

Html Tags IMG, Form, Hyperlinks, Frames, Tables

Cascading Style Sheets Introduction

Types of Style Sheets

Hypertext Transfer Protocol (HTTP)

HTTP defines how

Works on Client-Server architecture

Hypertext Markup Language(HTML)

a simple markup language used to define and describe the layout of

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

A uniform resource locator, commonly abbreviated as URL

Introduction - HTML Tags

HTML Tags are enclosed in angle brackets, <like this>

Attributes are commands added to the tags to specify various

HTML file is saved with the extension htm or html

That is filename.htm or filename.html

Introduction - HTML Tags [Contd]

Introduction - HTML Tags [Contd]

Using Hyperlinks and Anchors

Connecting to other HTML pages that are part of a web site or to

Connecting to non-HTML resources, including portable documents

<a href="http://www.linkfinder.com/">URL description</a>

Code: <a href="www.adobe.com/downloads">Download</a> Adobe

Adding Images to a Web Page

<IMG> tag is used to include an image in the web document.

Creating HTML tables

Table is a system of columns and rows.

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.

Specifying rowspan and colspan

Any link in one frame can open a page in another frame.

toolbar.html and index.html

Using Forms in HTML [Contd]

Select and Option

Others [Button, Label, Fieldset and Legend]

Using Forms in HTML [Contd]

Action attribute is required. Methods are get which is default and

Other attributes define the encoding type and event

Here is an eg. of Form tag

<form action=URL method=get/post enctype= multipart/form-data

Using Forms in HTML [Contd]

The GET method submits the name/value pairs to the URL

This can be seen on the browsers 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

There are two attributes[onSubmit and onReset] which are used

Using Forms in HTML [Contd]

Basically this can be used whenever we want to invoke a

Whenever we use any form element in a web page it must be with

button Used to invoke a script function or to play around the