Anda di halaman 1dari 68

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
< &lt;
> &gt;
& &amp;
" &quot;
Space &nbsp;
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:abc@example.com">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

Anda mungkin juga menyukai