Scribd
Upload
37 views

HTML Tutorial

The document is a tutorial on HTML/CSS presented by Rahul Saxena at Jaipur National University. It covers definitions of various web technologies like HTML, HTTP, URLs. It then explains the basic structure of an HTML page and various HTML elements to structure and style text like headings, paragraphs, lists, links, images and tables. It also covers CSS concepts like the cascade and inheritance. The document is intended to teach students the basics of HTML and CSS.

Uploaded by

Anuj Mathur
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
37 views

HTML Tutorial

The document is a tutorial on HTML/CSS presented by Rahul Saxena at Jaipur National University. It covers definitions of various web technologies like HTML, HTTP, URLs. It then explains the basic structure of an HTML page and various HTML elements to structure and style text like headings, paragraphs, lists, links, images and tables. It also covers CSS concepts like the cascade and inheritance. The document is intended to teach students the basics of HTML and CSS.

Uploaded by

Anuj Mathur
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 55

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

<

&lt;

>

&gt;

&

&amp;

"

&quot;

Space

&nbsp;

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

You might also like