HTML/CSS Tutorial
Jaipur National University
B.C.A VI Sem
Rahul Saxena
Definitions
2
WWW -- a software infrastructure layered on top of
the Internet
HTTP -- HyperText Transport Protocol, layered on
top of TCP
HTTPS -- secure HTTP using encryption
HTML -- HyperText Markup Language, version 5.0
is current
RAHUL SAXENA
HTML Page Format
3
<HTML>
<HEAD>
<TITLE> Demo </TITLE>
</HEAD>
<BODY>
<H1> Hello World </H1>
<!-- Rest of page goes here. This is a comment. -->
</BODY>
</HTML>
RAHUL SAXENA
EXAMPLE1
BODY Element
4
<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)
RAHUL SAXENA
Headings
5
<H1
<H2
<H3
<H4
<H5
<H6
...>
...>
...>
...>
...>
...>
text
text
text
text
text
text
</H1> -- largest of the six
</H2>
</H3>
</H4>
</H5>
</H6> -- smallest of the six
ALIGN="position" --left (default), center or right
RAHUL SAXENA
Headings
6
<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>
RAHUL SAXENA
Example 1.
<P> Paragraph
7
<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
RAHUL SAXENA
<P> Paragraph
8
<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>
RAHUL SAXENA
<PRE> Preformatted Text
9
<PRE>
if (a < b) {
a++;
b = c * d;
}
else {
a--;
b = (b-1)/2;
}
</PRE>
RAHUL SAXENA
Example 3
Special Characters
10
RAHUL SAXENA
Character
Use
<
<
>
>
&
&
"
"
Space
Colors
11
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
RAHUL SAXENA
Fonts
12
<FONT COLOR="red" SIZE="2" FACE="Times Roman">
This is the text of line one </FONT>
<FONT COLOR="green" SIZE="4" FACE="Arial">
Line two contains this text </FONT>
<FONT COLOR="blue" SIZE="6" FACE="Courier>
The third line has this additional text </FONT>
RAHUL SAXENA
Ordered (Numbered) Lists
13
<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>
RAHUL SAXENA
Unordered (Bulleted) Lists
14
<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>
RAHUL SAXENA
Physical Character Styles
15
<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>
RAHUL SAXENA
Logical Character Styles
16
<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>
RAHUL SAXENA
<A> Anchors (HyperLinks)
17
Link to an absolute URL:
If you get spam, contact <A HREF="htttp:www.microsoft.com">
Microsoft </A> to report the problem.
Link to a relative URL:
See these <A HREF="#references"> references </A>
concerning our fine products.
Link to a section within a URL:
Amazon provided a <A HREF="www.amazon.com/#reference">
reference for our company. </A>
RAHUL SAXENA
Naming a Section
18
<H2> <A NAME="#references"> Our References </A> </H2>
RAHUL SAXENA
Images
19
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
RAHUL SAXENA
Images
20
Align=position
Image/Text Placement
Left
Image on left edge; text flows to right of image
Right
Image on right edge; text flows to left
Top
Image is left; words align with top of image
Bottom
Image is left; words align with bottom of image
Middle
Words align with middle of image
RAHUL SAXENA
Images
21
<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>
RAHUL SAXENA
Tables
22
<TABLE>
<CAPTION>
<TR>
<TH>
<TD>
RAHUL SAXENA
table tag
optional table title
table row
table column header
table data element
Tables
23
<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>
RAHUL SAXENA
<TABLE> Element Attributes
24
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
RAHUL SAXENA
<TABLE> Element Attributes
25
cellspacing=10
cellpadding=10
RAHUL SAXENA
<TABLE> Element Attributes
26
BGCOLOR=color -- background color of table, also valid
for <TR>, <TH>, and <TD>
RULES=value -- which internal lines are shown; values are
none, rows, cols, and all (default)
EX:
RAHUL SAXENA
<TABLE COLS=40%, *,*>
<TABLE ROWS=*,*>
<TR> Table Row Attributes
27
Valid for the table row:
ALIGN -- left, center, right
VALIGN -- top, middle, bottom
BGCOLOR -- background color
<TABLE ALIGN="center" WIDTH="300" HEIGHT="200">
<TR ALIGN="left" VALIGN="top" BGCOLOR="red"><TD>One</TD><TD>Two</TD>
<TR ALIGN="center" VALIGN="middle" BGCOLOR="lightblue"><TD>Three</TD><TD>Four</TD>
<TR ALIGN="right" VALIGN="bottom" BGCOLOR="yellow"><TD>Five</TD><TD>Six</TD>
</TABLE>
RAHUL SAXENA
<TD> Table Cell Attributes
28
Valid for the table cell:
colspan -- how many columns this cell occupies
rowspan how many rows this cell occupies
<TABLE ALIGN="center" WIDTH="300" HEIGHT="200" border="1">
<TR>
<TD colspan="1" rowspan="2">a</TD>
<TD colspan="1" rowspan="1">b</TD>
</TR>
<TR>
<TD colspan="1" rowspan="1">c</TD>
</TR>
</TABLE>
RAHUL SAXENA
Frames
29
Frames help control navigation and display
<FRAME> attributes include
FRAMEBORDER yes or 1 for borders
FRAMESPACING width of border
BORDERCOLOR color
SRC location of HTML to display in frame
NAME destination for TARGET attribute
RAHUL SAXENA
Frames
30
MARGINWIDTH left/right margins
MARGINHEIGHT top/bottom margins
SCROLLING yes or 1 adds scroll bar
NORESIZE yes or 1 disables resizing
RAHUL SAXENA
Frames
31
<FRAMESET ROWS="75%,25%">
<FRAMESET COLS="*,*,*">
<FRAME SRC="http://www.jnujaipur.ac.in">
<FRAME SRC="http://www.w3schools.com">
<FRAME SRC="http://www.">
</FRAMESET>
<FRAMESET COLS="*,*">
<FRAME SRC="http://www.virginia.edu">
<FRAME SRC="http://www.virginia.edu">
</FRAMESET>
</FRAMESET>
RAHUL SAXENA
Frames
32
<FRAMESET ROWS="25%,75%"
<FRAMESET COLS="*,*,*">
<FRAME SRC="http://www.virginia.edu">
<FRAME SRC="http://www.virginia.edu">
<FRAME SRC="http://www.virginia.edu">
</FRAMESET>
<FRAMESET COLS="*,*">
<FRAME SRC="http://www.virginia.edu">
<FRAME SRC="http://www.virginia.edu">
</FRAMESET>
</FRAMESET>
RAHUL SAXENA
Frames
33
<FRAMESET ROWS="*,*">
<FRAMESET COLS="15%, 2*, *">
<FRAME SRC="http://www.cs.virginia.edu/">
<FRAME SRC="http://www.cs.virginia.edu/">
<FRAME SRC="http://www.cs.virginia.edu/">
</FRAMESET>
<FRAMESET COLS="40%, *">
<FRAME SRC="http://www.cs.virginia.edu/">
<FRAME SRC="http://www.cs.virginia.edu/">
</FRAMESET>
</FRAMESET>
RAHUL SAXENA
Break For 2 min.
34
RAHUL SAXENA
35
Cascading Style Sheets (CSS)
An Introduction
RAHUL SAXENA
Cascading Style Sheet
36
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.
RAHUL SAXENA
Cascading Style Sheet
37
The Cascade
The power of CSS is found in
the cascade which is the
combination of the browsers
default styles, external style
sheets, embedded, inline, and
even user-defined styles.
The cascade sets priorities on
the individual styles which
effects inheritance.
RAHUL SAXENA
Cascading Style Sheet
38
CSS Inheritance
Allows elements to inherit styles from parent elements.
Helpful in reducing the amount of CSS to set styles for child elements.
Unless a more specific style is set on a child element, the element looks
to the parent element for its styles.
Each style has a numeric specificity value that is given based on its
selector.
RAHUL SAXENA
Cascading Style Sheet
39
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>
RAHUL SAXENA
Cascading Style Sheet
40
CSS Syntax
selector/element {
property: value;
}
The selector can either be a grouping of elements,
an indentifier, class, or single XHTML element
(body, div, etc)
RAHUL SAXENA
Cascading Style Sheet
41
Type (Element) Selector
Specify the style(s) for a single XHTML element.
body {
margin: 0;
padding: 0;
border-top: 1px solid #ff0;
}
RAHUL SAXENA
Cascading Style Sheet
42
Grouping Elements
Allows you to specify a single style for multiple
elements at one time.
h1, h2, h3, h4, h5, h6 {
font-family: Trebuchet MS, sans-serif;
}
RAHUL SAXENA
Cascading Style Sheet
43
The Class Selector
<p class=intro>This is my introduction text</p>
.intro {
font: 12px verdana, sans-serif;
margin: 10px;
}
RAHUL SAXENA
Cascading Style Sheet
44
The Identifier Selector
<p id=intro> This is my introduction text</p>
#intro {
border-bottom: 2px dashed #fff;
}
RAHUL SAXENA
Cascading Style Sheet
45
CSS Selectors
Identifier or class? Whats the difference?
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.
RAHUL SAXENA
Cascading Style Sheet
46
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)
RAHUL SAXENA
Cascading Style Sheet
47
CSS Browser Acceptance
The advent of modern browsers (IE 5.5+,
Firefox 1.5+, Safari 2+, Opera) has eliminated
the fear of effectively utilizing CSS.
There remain certain selectors and attributes
that vary in browser acceptance, but IE7, FF 2,
Safari 3 all accept the CSS 2.1 specification.
There no longer remains any excuse not to
utilize CSS in your application.
RAHUL SAXENA
Cascading Style Sheet
48
CSS Fonts
Font-family
Font-weight
Font-style
Font-size
RAHUL SAXENA
Cascading Style Sheet
49
CSS Layout
Margin
Padding
Border
Z-index
Positioning
Width
Height
Float
Text-align
Vertical-align
RAHUL SAXENA
Cascading Style Sheet
50
CSS vs Table Layouts
Tables are designed only for tabular data 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.
RAHUL SAXENA
Cascading Style Sheet
51
CSS Text
Text-indent
Text-align
Text-decoration
Letter-spacing
Text-transform
Word-spacing
White-space
RAHUL SAXENA
Cascading Style Sheet
52
CSS Background
Background-color
Background-image
Background-position
Background-repeat
RAHUL SAXENA
Cascading Style Sheet
53
CSS Lists
List-style
square
List-style-image
(url())
List-style-position (inside/outside)
List-style-type (circle/decimal/disc/lower-alpha/lowerroman/upper-alpha/upper-roman)
RAHUL SAXENA
Cascading Style Sheet
54
CSS Shorthand
Consolidates many styles into a single declaration.
font-family: verdana, sans-serif;
font-weight: bold;
font-size: 12px;
font: bold 12px verdana, sans-serif;
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 10px;
padding: 5px 8px 5px 10px;
RAHUL SAXENA
55
RAHUL SAXENA
