HTML/CSS Tutorial
Jaipur National University
B.Tech
Web Technology
3CS10
Rahul Saxena
HTML Page Format 2
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
ALIGN="position" --left (default), center or right
Headings 7
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>
<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>
<Img> tag 14
<img scr=“01.jpg” height=200px width=200px
alt=“alternet text here” />
The <marquee> Tag 15
Attribute Description
width This specifies the width of the marquee. This can be a value like 10
or 20% etc.
height This specifies the height of the marquee. This can be a value like 10
or 20% etc.
direction This specifies the direction in which marquee should scroll. This can
be a value like up, down, left or right.
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:
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>
Target= Description 22
Opens new page in a new
_blank
browser window
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:[email protected]">Send Email</a>
Click To Call: (Calling Devices)
<a href="tel:+1800229933">Call us free!</a>
<A> Tag Cont.. 23
HTML Download Link Code:
<a
href=http://www.jnujaipur.ac.in/pics/htmlT/techno.zip>Techn
o Pic Zip></a>
html - default links; base
Use the <base> tag in the head element to set a default URL
for all links on a page to go to.
<head>
<base href="http://www.jnujaipur.ac.in/" />
</head>
Images 24
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
Src Location Description
picture file resides in same
src="sunset.gif"
directory as .html file
picture file resides in
src="pics/sunset.gif"
the pics directory
picture resides one folder
src="../sunset.gif"
"up" from the .html file
picture file resides in
src="../pics/sunset.gif" the pics directory, one folder
"up" from the .html file.
Images 26
RAHUL SAXENA
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
Images 27
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
<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>
<TD> Table Cell Attributes 35
RAHUL SAXENA
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>
Iframe 36
<iframe src="http://www.w3schools.com"></iframe>
Attribute Value Description
align left Not supported in HTML5.
right Specifies the alignment of an <iframe> according to
top surrounding elements
middle
bottom
frameborder 1 Not supported in HTML5.
0 Specifies whether or not to display a border around an
<iframe>
height pixels Specifies the height of an <iframe>
longdesc URL Not supported in HTML5.
Specifies a page that contains a long description of the
content of an <iframe>
marginheight pixels Not supported in HTML5.
Specifies the top and bottom margins of the content of an
<iframe>
marginwidth pixels Not supported in HTML5.
Specifies the left and right margins of the content of an
<iframe>
IFrame 37
name text Specifies the name of an <iframe>
sandbox "" Enables a set of extra restrictions
allow-forms for the content in the <iframe>
allow-same-origin
allow-scripts
allow-top-navigation
scrolling yes Not supported in HTML5.
Specifies whether or not to display
no scrollbars in an <iframe>
auto
seamless seamless Specifies that the <iframe> should
look like it is a part of the
containing document
src URL Specifies the address of the
document to embed in the
<iframe>
srcdoc HTML_code Specifies the HTML content of the
page to show in the <iframe>
width pixels Specifies the width of an <iframe>
Video 38
<video width=“620" height=“440" contro
ls>
<source src=“mymovie.mp4" type="vid
eo/mp4">
<source src=“mymovie.ogg" type="vid
eo/ogg">
Your Browser does not Support the
Video tag. Please Update your Browser
</video>
Support: IE9+ and all other recent
browser
Video 39
Attribute Value Description
autoplay autoplay Specifies that the video will start
playing as soon as it is ready
controls controls Specifies that video controls should be
displayed (such as a play/pause button
etc).
height pixels Sets the height of the video player
loop loop Specifies that the video will start over
again, every time it is finished
muted muted Specifies that the audio output of the
video should be muted
poster URL Specifies an image to be shown while
the video is downloading, or until the
user hits the play button
preload auto Specifies if and how the author thinks
metadata the video should be loaded when the
none page loads
src URL Specifies the URL of the video file
width pixels Sets the width of the video player
Audio 40
<audio controls>
<source src=“mysong.ogg" type="audio/ogg">
<source src=“mysong.mp3" type="audio/mpeg">
Your Browser does not Support the Audio tag. Please
Update your Browser.
</audio>
Attribute Value Description
autoplay autoplay Specifies that the audio will start playing as
soon as it is ready
controls controls Specifies that audio controls should be
displayed (such as a play/pause button etc)
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)
checkbox Defines a checkbox
color Defines a color picker
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)
email Defines a field for an e-mail address
file Defines a file-select field and a "Browse..." button (for file uploads)
hidden Defines a hidden input field
Input Type (Cont..) 42
image Defines an image as the submit
button
month Defines a month and year control (no
time zone)
number Defines a field for entering a number
password Defines a password field (characters
are masked)
radio Defines a radio button
Input Type (Cont..) 43
range Defines a control for entering a number
whose exact value is not important (like a
slider control)
reset Defines a reset button (resets all form values
to default values)
search Defines a text field for entering a search
string
submit Defines a submit button
tel Defines a field for entering a telephone
number
text Default. Defines a single-line text field
(default width is 20 characters)
time Defines a control for entering a time (no time
zone)
url Defines a field for entering a URL
week Defines a week and year control (no time
zone)
Form Tag 44
<form action=“revert_form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
Form Tag Cont.. 45
Attribute Value Description
accept file_type Not supported in HTML5.
Specifies a comma-separated list of file
types that the server accepts (that can be
submitted through the file upload)
accept-charset character_set Specifies the character encodings that are to be
used for the form submission
action URL Specifies where to send the form-data when a
form is submitted
autocomplete on Specifies whether a form should have
off autocomplete on or off
enctype application/x-www-form- Specifies how the form-data should be encoded
urlencoded when submitting it to the server (only for
multipart/form-data method="post")
text/plain
method get Specifies the HTTP method to use when sending
post form-data
Form Tag Cont.. 46
name text Specifies the name of a form
novalidate novalidate Specifies that the form should not
be validated when submitted
target _blank Specifies where to display the
_self response that is received after
_parent submitting the form
_top
Break For 2 min. 47
RAHUL SAXENA
48
Cascading Style Sheets
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
The power of CSS is found in
the “cascade” which is the
combination of the browser’s
default styles, external style
sheets, embedded, inline,
and even user-defined styles.
The cascade sets priorities on
the individual styles which
effects inheritance.
Cascading Style Sheet 51
RAHUL SAXENA
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.
Cascading Style Sheet 52
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;
}
The selector can either be a grouping of
elements, an indentifier, class, or single
XHTML element (body, div, etc)
Cascading Style Sheet 54
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.
h1, h2, h3, h4, h5, h6 {
font-family: “Trebuchet MS”, sans-serif;
}
Cascading Style Sheet 56
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
CSS Browser Acceptance
RAHUL SAXENA
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.
Cascading Style Sheet 61
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.
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;
68
RAHUL SAXENA
