HTML Tutorial

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>

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

25
cellspacing=10
cellpadding=10
RAHUL SAXENA

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">
</FRAMESET>
</FRAMESET>
RAHUL SAXENA
Frames
32
<FRAMESET ROWS="25%,75%"
<FRAMESET COLS="*,*,*">
</FRAMESET>
<FRAMESET COLS="*,*">
</FRAMESET>
</FRAMESET>
RAHUL SAXENA
Frames
33
<FRAMESET ROWS="*,*">
<FRAMESET COLS="15%, 2*, *">
<FRAME SRC="http://www.cs.virginia.edu/">
</FRAMESET>
<FRAMESET COLS="40%, *">
</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

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

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

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

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

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

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

43
The Class Selector

<p class=intro>This is my introduction text</p>
.intro {
font: 12px verdana, sans-serif;
margin: 10px;
}
RAHUL SAXENA

44
The Identifier Selector

<p id=intro> This is my introduction text</p>
#intro {
border-bottom: 2px dashed #fff;
}
RAHUL SAXENA

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

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

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

48
CSS Fonts
Font-family
Font-weight
Font-style
Font-size
RAHUL SAXENA

49
CSS Layout
Margin
Padding
Border
Z-index
Positioning
Width
Height
Float
Text-align
Vertical-align
RAHUL SAXENA

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

51
CSS Text
Text-indent
Text-align
Text-decoration
Letter-spacing
Text-transform
Word-spacing
White-space
RAHUL SAXENA

52
CSS Background
Background-color
Background-image
Background-position
Background-repeat
RAHUL SAXENA

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

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

HTML Tutorial

Uploaded by

Copyright:

Available Formats

You might also like

HTML Tutorial

Uploaded by

Document Information

Original Description:

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 Tutorial

Uploaded by

Copyright:

Available Formats

HTML/CSS Tutorial

Jaipur National University

WWW -- a software infrastructure layered on top of

HTML Page Format

</H1> -- largest of the six

ALIGN="position" --left (default), center or right

<P> defines a paragraph

<PRE> Preformatted Text

Values for BGCOLOR and COLOR

<FONT COLOR="red" SIZE="2" FACE="Times Roman">

Ordered (Numbered) Lists

Unordered (Bulleted) Lists

Physical Character Styles

<H1>Physical Character Styles</H1>

Logical Character Styles

<H1>Logical Character Styles</H1>

<A> Anchors (HyperLinks)

Link to an absolute URL:

<H2> <A NAME="#references"> Our References </A> </H2>

Images scale to fit the space allowed

Image on left edge; text flows to right of image

Image on right edge; text flows to left

Image is left; words align with top of image

Image is left; words align with bottom of image

Words align with middle of image

<TABLE> Element Attributes

ALIGN=position -- left, center, right for table

<TABLE> Element Attributes

<TABLE> Element Attributes

BGCOLOR=color -- background color of table, also valid

<TABLE COLS=40%, *,*>

<TR> Table Row Attributes

Valid for the table row:

<TABLE ALIGN="center" WIDTH="300" HEIGHT="200">

<TD> Table Cell Attributes

Valid for the table cell:

Frames help control navigation and display

MARGINWIDTH left/right margins

Break For 2 min.

Cascading Style Sheets (CSS)

Cascading Style Sheet

Cascading Style Sheet

Cascading Style Sheet

Cascading Style Sheet

Using Style Sheets

Also a media descriptor (screen, tv, print, handheld, etc)

Cascading Style Sheet

Cascading Style Sheet

Type (Element) Selector

Cascading Style Sheet

Cascading Style Sheet

The Class Selector

Cascading Style Sheet

The Identifier Selector

Cascading Style Sheet

Cascading Style Sheet

The Box Model

Cascading Style Sheet

<TABLE COLS=40%, ,>