Scribd
Upload
1K views51 pages

HTML & CSS: Basic Web Dev Lessons

This document provides an introduction to HTML and CSS for basic web development lessons. It covers HTML tags for images, forms, hyperlinks, frames and tables. It also introduces CSS and discusses advantages of CSS, types of style sheets, selectors and key concepts. Form elements like textboxes, radio buttons, checkboxes and dropdown lists are explained. Usage of tables, frames and hyperlinks to structure web pages is demonstrated through examples.

Uploaded by

Be Len Da
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
Download as ppt, pdf, or txt
1K views51 pages

HTML & CSS: Basic Web Dev Lessons

This document provides an introduction to HTML and CSS for basic web development lessons. It covers HTML tags for images, forms, hyperlinks, frames and tables. It also introduces CSS and discusses advantages of CSS, types of style sheets, selectors and key concepts. Form elements like textboxes, radio buttons, checkboxes and dropdown lists are explained. Usage of tables, frames and hyperlinks to structure web pages is demonstrated through examples.

Uploaded by

Be Len Da
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
Download as ppt, pdf, or txt
Download as ppt, pdf, or txt
You are on page 1/ 51

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)

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 browsers 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
<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]

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

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

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

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">
<!-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/

You might also like