RAHUL SAXENA
<HTML>
<HEAD>
<TITLE> Demo </TITLE>
Conditional Comments
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
</HEAD>
<BODY>
<H1> Hello World </H1>
<!-- Rest of page goes here. This is a comment. -->
</BODY>
</HTML> EXAMPLE1
Head & Title Tag 3
Head Tag: The <head> is a container for all the head
elements. Elements inside <head> can include scripts,
instruct the browser where to find style sheets, provide
meta information.
Title: The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results
Meta Tag 4
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, XHTML,
JavaScript">
Define a description of your web page:
<meta name="description" content="Free Web tutorials on
HTML and CSS">
Define the author of a page:
<meta name="author" content=“MCA V Students">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
BODY Element 5
RAHUL SAXENA
<BODY attributename="attributevalue">
Deprecated attributes (but still used)
BACKGROUND=“Sunset.jpg”
BGCOLOR=color
TEXT=color
LINK=color (unvisited links)
VLINK=color (visited links)
ALINK=color (when selected)
Headings 6
RAHUL SAXENA
<H1 ...> text </H1> -- largest of the six
<H2 ...> text </H2>
<H3 ...> text </H3>
<H4 ...> text </H4>
<H5 ...> text </H5>
<H6 ...> text </H6> -- smallest of the six
RAHUL SAXENA
<HTML>
<HEAD>
<TITLE>Document Headings</TITLE>
</HEAD>
<BODY>
Samples of the six heading types:
<H1>Level-1 (H1)</H1>
<H2 ALIGN="center">Level-2 (H2)</H2>
<H3><U>Level-3 (H3)</U></H3>
<H4 ALIGN="right">Level-4 (H4)</H4>
<H5>Level-5 (H5)</H5>
<H6>Level-6 (H6)</H6>
</BODY>
</HTML> Example 1.
<P> Paragraph 8
RAHUL SAXENA
<P> defines a paragraph
Add ALIGN="position" (left, center, right)
Multiple <P>'s do not create blank lines
Use <BR> for blank line
Fully-specified text uses <P> and </P>
But </P> is optional
<P> Paragraph 9
RAHUL SAXENA
<BODY>
<P>Here is some text </P>
<P ALIGN="center"> Centered text </P>
<P><P><P>
<P ALIGN="right"> Right-justified text
<! Note: no closing /P tag is not a problem>
</BODY>
<PRE> Preformatted Text 10
RAHUL SAXENA
<PRE>
if (a < b) {
a++;
b = c * d;
}
else {
a--;
b = (b-1)/2;
}
</PRE> Example 3
Special Characters 11
RAHUL SAXENA
Character Use
< <
> >
& &
" "
Space
Colors 12
RAHUL SAXENA
Values for BGCOLOR and COLOR
many are predefined (red, blue, green, ...)
all colors can be specified as a six character
hexadecimal value: RRGGBB
FF0000 – red
888888 – gray
004400 – dark green
FFFF00 – yellow
Fonts 13
RAHUL SAXENA
<FONT COLOR="red" SIZE="2" FACE="Times Roman">
This is the text of line one </FONT>
behavior This specifies the type of scrolling of the marquee. This can have a
value like scroll, slide and alternate.
scrolldelay This specifies how long to delay between each jump. This will have
a value like 10 etc.
scrollamount This specifies the speed of marquee text. This can have a value like
10 etc.
loop This specifies how many times to loop. The default value is INFINITE,
which means that the marquee loops endlessly.
bgcolor This specifies background color in terms of color name or color hex
value.
hspace This specifies horizontal space around the marquee. This can be a
value like 10 or 20% etc.
vspace This specifies vertical space around the marquee. This can be a
value like 10 or 20% etc.
Ordered (Numbered) Lists 16
RAHUL SAXENA
<OL TYPE="1">
<LI> Item one </LI>
<LI> Item two </LI>
<OL TYPE="I" >
<LI> Sublist item one </LI>
<LI> Sublist item two </LI>
<OL TYPE="i">
<LI> Sub-sublist item one </LI>
<LI> Sub-sublist item two </LI>
</OL>
</OL>
</OL>
Unordered (Bulleted) Lists 17
RAHUL SAXENA
<UL TYPE="disc">
<LI> One </LI>
<LI> Two </LI>
<UL TYPE="circle">
<LI> Three </LI>
<LI> Four </LI>
<UL TYPE="square">
<LI> Five </LI>
<LI> Six </LI>
</UL>
</UL>
</UL>
Definition Term Lists 18
<dl> - opening clause that defines the start of the list
RAHUL SAXENA
<dt> - list item that defines the definition term
<dd> - definition of the list item
These lists displace the word term (<dt>) in such a way that it rests just
above the definition element (<dd>) to offer a very unique look.
For best, results we suggest bolding the definition terms with the bold tag <b>.
<dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dt>
</dl>
Physical Character Styles 19
RAHUL SAXENA
<H1>Physical Character Styles</H1>
<B>Bold</B><BR>
<I>Italic</I><BR>
<TT>Teletype (Monospaced)</TT><BR>
<U>Underlined</U><BR>
Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>
Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR>
<SMALL>Smaller</SMALL><BR>
<BIG>Bigger</BIG><BR>
<STRIKE>Strike Through</STRIKE><BR>
<B><I>Bold Italic</I></B><BR>
<BIG><TT>Big Monospaced</TT></BIG><BR>
<SMALL><I>Small Italic</I></SMALL><BR>
<FONT COLOR="GRAY">Gray</FONT><BR>
<DEL>Delete</DEL><BR>
<INS>Insert</INS><BR>
Logical Character Styles 20
RAHUL SAXENA
<H1>Logical Character Styles</H1>
<EM>Emphasized</EM><BR>
<STRONG>Strongly Emphasized</STRONG><BR>
<CODE>Code</CODE><BR>
<SAMP>Sample Output</SAMP><BR>
<KBD>Keyboard Text</KBD><BR>
<DFN>Definition</DFN><BR>
<VAR>Variable</VAR><BR>
<CITE>Citation</CITE><BR>
<EM><CODE>Emphasized Code</CODE></EM><BR>
<FONT COLOR="GRAY"><CITE>Gray
Citation</CITE></FONT><BR>
<ACRONYM TITLE="Java Development Kit">JDK
Acronym</ACRONYM>
<A> Anchors (HyperLinks) 21
RAHUL SAXENA
Link to an absolute URL:
RAHUL SAXENA
Loads the new page in the
_self
current window
Loads new page into a
_parent
parent frame
Loads new page into the
_top current browser window,
cancelling all frames
Sending e-mails
<a href= "mailto:abc@example.com">Send Email</a>
RAHUL SAXENA
SRC is required
WIDTH, HEIGHT may be in units of pixels or
percentage of page or frame
WIDTH="357"
HEIGHT="50%"
Images scale to fit the space allowed
Images cont.. 25
RAHUL SAXENA
Align=position Image/Text Placement
RAHUL SAXENA
<BODY>
<img src=“12.jpg" align="left" width="150" height="150" alt="dolphin
jump!">
This is a very cute dolphin on the left!<br>
This is a very cute dolphin on the left!<br>
This is a very cute dolphin on the left!<br>
This is a very cute dolphin on the left!<br>
This is a very cute dolphin on the left!<br>
This is a very cute dolphin on the left!<br>
This is a very cute dolphin on the left!<br>
This is a very cute dolphin on the left!<br>
This is a very cute dolphin on the left!<br>
This is a very cute dolphin on the left!<br>
You can see text wrap around it<br>
</BODY>
</HTML>
Favicon 28
<Head>
<link href="icon.png" rel="shortcut icon"
type="image/x-icon" />
</head>
Tables 29
RAHUL SAXENA
<TABLE> table tag
<CAPTION> optional table title
<TR> table row
<TH> table column header
<TD> table data element
Tables 30
RAHUL SAXENA
<TABLE BORDER=1>
<CAPTION>Table Caption</CAPTION>
<TR><TH>Heading1</TH> <TH>Heading2</TH></TR>
<TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR>
<TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2 Data</TD></TR>
<TR><TD>Row3 Col1 Data</TD><TD>Row3 Col2 Data</TD></TR>
</TABLE>
<TABLE> Element 31
Attributes
RAHUL SAXENA
ALIGN=position -- left, center, right for table
BORDER=number -- width in pixels of border (including
any cell spacing, default 0)
CELLSPACING=number -- spacing in pixels between
cells, default about 3
CELLPADDING=number -- space in pixels between cell
border and table element, default about 1
WIDTH=number[%]-- width in pixels or percentage of
page/frame width
<TABLE> Element 32
Attributes
RAHUL SAXENA
cellspacing=10
cellpadding=10
<TABLE> Element 33
Attributes
RAHUL SAXENA
BGCOLOR=color -- background color of table, also valid
for <TR>, <TH>, and <TD>
<TR> Table Row Attributes 34
RAHUL SAXENA
Valid for the table row:
ALIGN -- left, center, right
VALIGN -- top, middle, bottom
BGCOLOR -- background color
RAHUL SAXENA
Valid for the table cell:
colspan -- how many columns this cell occupies
rowspan – how many rows this cell occupies
loop loop Specifies that the audio will start over again,
every time it is finished
muted muted Specifies that the audio output should be
muted
preload auto Specifies if and how the author thinks the
metadata audio should be loaded when the page loads
none
src URL Specifies the URL of the audio file
Input Type 41
<input type="value">
Value Description
button Defines a clickable button (mostly used with a JavaScript to activate a
script)
date Defines a date control (year, month and day (no time))
datetime Defines a date and time control (year, month, day, hour, minute,
second, and fraction of a second, based on UTC time zone)
datetime-local Defines a date and time control (year, month, day, hour, minute,
second, and fraction of a second (no time zone)
file Defines a file-select field and a "Browse..." button (for file uploads)
RAHUL SAXENA
48
RAHUL SAXENA
(CSS)
An Introduction
Cascading Style Sheet 49
RAHUL SAXENA
Why CSS?
CSS removes the presentation attributes from the
structure allowing reusability, ease of
maintainability, and an interchangeable
presentation layer.
HTML was never meant to be a presentation
language. Proprietary vendors have created tags
to add presentation to structure.
<font> <b> <i>
CSS allows us to make global and instantaneous
changes easily.
Cascading Style Sheet 50
RAHUL SAXENA
The Cascade
RAHUL SAXENA
CSS Inheritance
RAHUL SAXENA
Using Style Sheets
External Style Sheet
<link rel=“stylesheet” type=“text/css” href=“location.css” />
Also a “media” descriptor (screen, tv, print, handheld, etc)
Preferred method.
Embedded Styles
<style type=“text/css”>
body {}
</style>
Inline Styles
<p style=“font-size: 12px”>Lorem ipsum</p>
Cascading Style Sheet 53
RAHUL SAXENA
CSS Syntax
selector/element {
property: value;
}
RAHUL SAXENA
Type (Element)
Specify
Selector for a single XHTML
the style(s)
element.
body {
margin: 0;
padding: 0;
border-top: 1px solid #ff0;
}
Cascading Style Sheet 55
RAHUL SAXENA
Grouping
Allows youElements
to specify a single style for
multiple elements at one time.
RAHUL SAXENA
The
<p Class Selector
class=“intro”>This is my introduction text</p>
.intro {
font: 12px verdana, sans-serif;
margin: 10px;
}
Cascading Style Sheet 57
RAHUL SAXENA
The
<p Identifier
id=“intro”>Selector
This is my introduction text</p>
#intro {
border-bottom: 2px dashed #fff;
}
Cascading Style Sheet 58
RAHUL SAXENA
CSSSelectorsor class? What’s the difference?
Identifier
An identifier is specified only once on a page and
has a higher inheritance specificity than a class.
A class is reusable as many times as needed in a
page.
Use identifiers for main sections and sub-sections of
your document.
The difference between an ID and a class is that
an ID can be used to identify one element,
whereas a class can be used to identify more than
one.
Cascading Style Sheet 59
RAHUL SAXENA
The Box Model
Every element in the
DOM (Document
Object Model) has a
conceptual “box” for
presentation.
The box consists of
margin, padding,
border, content
(width, height), and
offset (top, left)
Cascading Style Sheet 60
RAHUL SAXENA
RAHUL SAXENA
CSS
Fonts
Font-family
Font-weight
Font-style
Font-size
Cascading Style Sheet 62
RAHUL SAXENA
Margin
CSS Layout
Padding
Border
Z-index
Positioning
Width
Height
Float
Text-align
Vertical-align
Cascading Style Sheet 63
RAHUL SAXENA
Tables
CSS are
vs Table designed only for tabular data
Layouts
and not for layout.
Reduces semantic value of markup
Makes updating difficult and impractical
CSS allows positioning that reduces overall
markup size, form, and allows layout to be
changed by only editing a stylesheet.
CSS layouts also improve accessibility,
because screen readers turn off style
sheets allowing only the content to remain.
Cascading Style Sheet 64
RAHUL SAXENA
CSS Text
Text-indent
Text-align
Text-decoration
Letter-spacing
Text-transform
Word-spacing
White-space
Cascading Style Sheet 65
RAHUL SAXENA
CSS
Background
Background-color
Background-image
Background-position
Background-repeat
Cascading Style Sheet 66
RAHUL SAXENA
CSS Lists
List-style square
List-style-image (url())
List-style-position (inside/outside)
List-style-type (circle/decimal/disc/lower-alpha/lower-
roman/upper-alpha/upper-roman)
Cascading Style Sheet 67
RAHUL SAXENA
CSS Shorthand
Consolidates many styles into a single declaration.
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 10px;
RAHUL SAXENA