Scribd
Upload
48 views

HTML and Css Basic

HTML is a markup language that defines the structure and layout of web pages. It uses tags like <h1> and <p> to divide content into headings, paragraphs, lists and other blocks. The document provides examples of basic HTML5 page structure and common tags for headings, paragraphs, line breaks, blockquotes and lists. It also introduces special characters that have HTML entity equivalents like &copy; and &nbsp;.

Uploaded by

chan myaelwin
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
48 views

HTML and Css Basic

HTML is a markup language that defines the structure and layout of web pages. It uses tags like <h1> and <p> to divide content into headings, paragraphs, lists and other blocks. The document provides examples of basic HTML5 page structure and common tags for headings, paragraphs, line breaks, blockquotes and lists. It also introduces special characters that have HTML entity equivalents like &copy; and &nbsp;.

Uploaded by

chan myaelwin
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 75

Web Development and Design

Foundations with HTML5

1
HTML
Markup Language - is a set of tags < >
- fundamental to displaying documents
in web browsers.

HTML - Hypertext Markup Language


- is used to allowed documents to be
displayed in web browsers.

2
HTML
Example HTML5 Web Page

< !DOCTYPE html>


<html lang=“en”>
<head>
<title> Page Title Goes Here </title>
<meta charset=“utf-8”>
</head>
<body>
. . . body text and more HTML5 tags go here . . .
</body>
</html>

3
Your First Web Page
Create a Folder

D: (or) Desktop -> r-click -> new folder


Rename a Folder

new folder -> r-click -> new name(eg: Chapter2)


Your First Web Page

1. launch Notepad
2. create the source code for
a web page document.
3. save your file
(eg: index.html)

4
Your First Web Page
Save your file
File -> save -> navigate to your folder (eg: Chapter2)
-> file name (eg: index.html) -> save

5
Your First Web Page
Test your Page
Lunch a browser -> File -> Open -> Navigate to your index.html -> double-
click index.html
(OR)
Folder -> open -> r-click index.html -> open with -> any browser
(eg: Firefox)

6
HTML
HTML is used to allowed documents to be displayed in web
browsers.

tag attribute = “attribute end


name name value” tag

Eg: <h1 bgcolor=“red”> - - - </h1>

7
Heading Elements
<h1> … </h1>
Elements
<h2> … </h2>
<h3> … </h3>
<h4> … </h4>
<h5> … </h5>
<h6> … </h6>
 Hand-On Practice 2.2
<!doctype html>
<html lang=“en”>
<head>
<title> Heading Example </title>
<meta charset=“utf-8”>
</head>
<body>
<h1> Heading level 1 </h1>
<h2> Heading level 2 </h2>
<h3> Heading level 3 </h3>
<h4> Heading level 4</h4>
<h5> Heading level 5 </h5>
<h6> Heading level 6 </h6>
</body>
</html> 8
Paragraph Element
<p> … </p>
Elements
Hand-On Practice 2.3
<!doctype html>
<html lang=“en”>
<head>
<title> Paragraph Example </title>
<meta charset=“utf-8”>
</head>
<body>
<h1> Heading level 1 </h1>
<p> This is a sample paragraph. Heading tags can help to make your pages more
accessible and usable. It is good coding practice to use heading tags to outline the
structure of your web page content.
</p>
<h2> Heading level 2 </h2>
<h3> Heading level 3 </h3>
<h4> Heading level 4</h4>
<h5> Heading level 5 </h5>
<h6> Heading level 6 </h6>
</body>
9
</html>
Line Break Element
Elements
<br> …
Hand-On Practice 2.4
<!doctype html>
<html lang=“en”>
<head>
<title> Line Break Example </title>
<meta charset=“utf-8”>
</head>
<body>
<h1> Heading level 1 </h1>
<p> This is a sample paragraph. <br> Heading tags can help to make your pages more
accessible and usable. It is good coding practice to use heading tags to outline the
structure of your web page content.
</p>
<h2> Heading level 2 </h2>
<h3> Heading level 3 </h3>
<h4> Heading level 4</h4>
<h5> Heading level 5 </h5>
<h6> Heading level 6 </h6>
</body>
10
</html>
Blockquote Element
Elements
<blockquote> … </blockquote>

Hand-On Practice 2.5


<!doctype html>
<html lang=“en”>
<head>
<title> Blockquote Example </title>
<meta charset=“utf-8”>
</head>
<body>
<h1> The Power of the Web </h1>
<p> According to Tim Berners-Lee, the inventor of the World Wide
Web, at http://www.w3.org/WAI/:</p>
<blockquote> The power of the Web is in its universality. Access by
everyone regardless of disability is an essential aspect.
</blockquote>
</body> 11
Elements
Phrase Elements
<b> … </b>
<em> … </em>
<i> … </i>
<mark> … </mark>
<small> … </small>
<sub> … </sub>
<sup> … </sup>

12
Elements
Example 1
<! doctype html>
<html lang=“en”>
<head>
<title> Example 1</title>
<meta charset=“utf-8”>
</head>
<body>
<h1> The power of the web</h1>
<p> Call for a free quote for your web development needs :
<strong> 888.555.5555</strong></p>
<blockquote> The power of the Web is in its universality. <em> Access by
everyone </em> regardless of disability is an essential aspect. </blockquote>
H<sub>2</sub>O is the chemical name of water.
</body>
</html> 13
Lists
There are three types of lists: unordered lists
ordered lists
description lists
1. Unordered lists
<ul>
<li> -------------</li>
<li> -------------</li>
<li> ------------- </li>
</ul>
The Type Attribute
<ul type=“disc” > default
type=“square”
type=“circle”

14
Hand-On Practice 2.6 Lists
<!doctype html>
<html lang=“en”>
<head>
<title> Heading and List </title>
<meta charset=“utf-8”>
</head>
<body>
<h1> Popular Web Servers</h1>
<ul>
<li> Apache Web Server </li>
<li> Microsoft IIS </li>
<li> Oracle iPlanet Web Server </li>
</ul>
</body>
</html>
15
Lists
2. Ordered lists
<ol>
<li> ------------------</li>
<li> ------------------</li>
<li> ------------------</li>
</ol>
The Type Attribute
<ol type=“1” > 1. default
type=“A” A.
type=“a” a.
type=“I” I.
type=“i“ i.
<ol type=“1” start=“10”> 10.
<ol type=“A” start=“4” reversed=“reversed”> D. C. B. ….

16
Hand-On Practice 2.7 Lists
<!doctype html>
<html lang=“en”>
<head>
<title> Heading and List </title>
<meta charset=“utf-8”>
</head>
<body>
<h1> Popular Web Servers</h1>
<ol>
<li> Apache Web Server </li>
<li> Microsoft IIS </li>
<li> Oracle iPlanet Web Server </li>
</ol>
</body>
</html>
17
2. Description lists Lists
<dl>
<dt> --------- </dt>
<dd> ----------------------------------------------
---------------------------------------------- </dd>
<dt> --------- </dt>
<dd> ----------------------------------------------
---------------------------------------------- </dd>

.
.
</dl>

18
Hand-On Practice 2.8 Lists
<!doctype html>
<html lang=“en”>
<head>
<title> Description List </title>
<meta charset=“utf-8”>
</head>
<body>
<h1> Sample Description List</h1>
<dl>
<dt> TCP </dt>
<dd> Transmission Control Protocol is a method (protocol) used along with
the Internet Protocol (IP) to send data in the form of message units, called
packets, between computers over the internet. </dd>
<dt> IP </dt>
<dd> Internet Protocol is the method or protocol by which data is sent from
one computer to another on the Internet. Each computer on the Internet is
uniquely identified by an IP address.
</dl>
</body> 19
Assignment 1

20
Assignment 2

21
Special Characters (or) Entity Characters
Character Entity name code
“ Quotation mark &quot;
‘ Right single quotation mark &rsquo;
© Copyright symbol &copy;
& Ampersand &amp;
empty space non breaking space &nbsp;
- Long dash &mdsh;
| vertical Bar &#124;
heart &hearts;
<! doctype html>
<html lang=“en”>
<head>
<title> Web page</title>
<meta charset=“utf-8”>
</head>
<body>
I &hearts; HTML5 <br>
&copy; copyright 2015 My Company.
</body>
</html> 22
Div Element
Div Element
To format an area of a web page , such as a logo, navigation or
footer area.
<div> … </div>

logo
navigation

content

footer
23
Practice with Div Elements
<!doctype html>
<html lang=“en”>
<head>
<title> Trillium Media Design</title>
<meta charset=“utf-8”>
</head>
<body>
<h1> Trillium Medium Design</h1>
<div> Home &nbsp; Services &nbsp; Contact </div>
<h2> New Media and Web Design </h2>
<p> Trillium Media Design will bring your company&rsquo;s Web presence
to the next level. We offer a comprehensive range of services. </p>
<h2>Meeting Your Business Needs </h2>
<p> Our expert designers are creative and eager to work with you. Take
advantage of the power of Web 2.01</p>
<div><small> Copyright &copy; 2012 Your Name Here </small></div>
</body>
</html>
24
Practice with Div Elements

25
Anchor Element
Absolute Hyperlink
- to link to resources on other websites
<a href=“http://google.com” > Google </a>

Relative Hyperlink
- to link to web page within your site
<a href=“contact.html” > Contact us </a>

E-mailHyperlink
- to create e-mail hyperlinks
<a href=“mailto:[email protected]” >
[email protected] </a>

26
Hand-On Practice 2.11
<!doctype html>
<html lang=“en”>
<head>
<title> Anchor Example </title>
<meta charset=“utf-8”>
</head>
<body>
<a href=“http://webdevfoundations.net”> Web Development &amp;
Design Foundations </a>
</body>
</html>
27
Hand-On Practice

1. Create a “mypractice” folder.


2. It will contain a home page called index.html and two content page
called background.html and favorites.html.
3. A home page (index.html) with navigation hyperlinks to two other
pages (background.html and favorite.html).

28
29
Cascading Style Sheet

30
CSS
Style sheets - describe how documents are presented on screens,
in print.
CSS - Cascading Style Sheets
- is a style sheet that describes the presentation
of an HTML document.

CSS statement
Sample
Selector { Declaration Property : Declaration Value }

Example
body { background-color: yellow; }
body { color: blue; }
body { color: blue; background-color: yellow; }
31
Using Color on Web Pages
Table 3.2 CSS color syntax examples

CSS Syntax Color Type


p { color: red; } Color name
p { color: #FF0000; } Hexadecimal color value
p { color: #F00; } Shorthand hexadecimal
p { color: rgb(200, 0, 0); } Decimal color value (RGB triple)

Hexadecimal Color Values :

Black - #000000
White - #FFFFFF
Red - #FF0000
Green - #00FF00
Blue - #0000FF
32
Configuring CSS
Web developers use four methods to incorporate CSS technology:
1. Inline
2. Internal
3. External

1. Inline CSS with the Style Attribute


<!doctype html>
<html lang=“en”>
<head>
<title> Inline CSS Example </title>
<meta charset=“utf-8”>
</head>
<body style=“background-color: #F5F5F5; color: #008080;”>
<h1 style=“background-color: #008080; color: #F5F5F5;”> Inline CSS </h1>
<p> This paragraph inherits the styles applied to the body tags. </p>
</body>
</html> 33
2. Embedded CSS with the Style Element
Configuring CSS
<!doctype html>
<html lang=“en”>
<head>
<title> Embedded Styles </title>
<meta charset=“utf-8”>
<style>
body { background-color: #CCFFFF;
color: #000033; }
</style>
</head>
<body>
<h1> Embedded CSS</h1>
<p> This paragraph uses embedded styles </p>
</body>
</html>

34
Practice
The web page without any styles

35
<!doctype html> Practice
<html lang=“en”>
<head><title> Trillium Media Design </title>
<meta charset=“utf-8”></head>
<body>
<h1> Trillium Media Design </h1>
<div> <a href="index.html"> Home </a> <a href="service.html"> Services </a>
<a href="contact.html"> Contact</a> </div>
<h2> New Media and Web Design </h2>
<p> Trillium Media Design will bring your company's Web presence to the next level.
<br>We offer a comprehensive range of services: </p>
<ul> <li> Website Design </li>
<li> Interactive Animation </li>
<li> E-Commerce Solutions </li>
<li> Usability Studies </li>
<li> Search Engine Optimization </li>
</ul>
<h2> Meeting Your Business Needs </h2>
<p> Our expert designers are creative and eager to work with you.<br> Take advantage of
the power of Web 2.01 </p>
<div> Copyright &copy; 2012 Your Name Here </div>
</body>
</html> 36
Practice
o Add the following code below the <title> element in the head section
of the web page:

<style>
body { background-color: #e6e6fa; color: #191970; }
h1 { background-color: #191970; color: #e6e6fa; }
h2 { background-color: #aeaed4; color: #191970; }
</style>

37
Configuring text with CSS
Font-family property
Font Family Category Common Font Typeface Names
serif “Times New Roman”, Georgia, Palatino
sans-serif Arial, Tahoma, Helvetica, Verdana
monospace Courier New, Lucida Console
cursive Lucida, Handwriting, Brush-script, Comic Sans MS
fantasy Jokeman, Impact, Papyrus

Example

p { font-family: Arial, Helvetica, sans-serif; }

38
Configuring text with CSS
Font-size property
Value Category Values
Text Value xx-small, x-small, small, medium(default), large,
x-large, xx-large
Pixel Unit (px) Numeric value with unit; such as 10px
Point Unit (pt) Numeric value with unit; such as 10pt
Em Unit (em) Numeric value with units; such as .75em
Percentage Value Numeric value with percentage, such as 75%

Example

p { font-size: 16px; }

39
Configuring text with CSS
Property Values
font-weight property normal, bold, bolder, lighter
Eg: p { font-weight: bold; }
font-style property normal, italic, oblique
Eg: p { font-style: italic; }
line-height property 100%
Eg: p { line-height: 200%; }
text-align property center, left, right, justify
Eg: p { text-align: center; }
text-indent property px, pt, em, %
Eg: p { text-indent: 5em; }
text-decoration none, overline, line-through, underline
property Eg: a { text-decoration: none; }

40
Configuring text with CSS
Property Values
font-variant property normal, small-caps
Eg: p { font-variant: normal; }
text-transform property uppercase, lowercase, capitalize
Eg: p { text-transform: uppercase; }
letter-spacing property normal, px, em, pt
Eg: p { letter-spacing: 10px; }
width (or) height auto, px, pt, %
property Eg: div {width: auto; heigth: 50%; }
margin property (or) auto, em, px, %
margin-left property Eg: div { margin: 2cm; } (or)
margin-right property div { margin: 10px 1px 15px 50px; }
margin-top property
margin-bottom property

41
Hand on Practice 3.3
o Set Default Font Properties for the Page
<style>
body { background-color: #e6e6fa;
color: #191970;
font-family: Arial, Verdana, sans-serif; }
h1 { background-color: #191970;
color: #e6e6fa;
line-height: 200%;
font-family: Georgia, "Times New Roman", serif; }
h2 { background-color: #aeaed4;
color: #191970;
font-family: Georgia, "Times New Roman", serif;
text-align: center; }
p { font-size: .90em;
text-indent: 3em; }
ul { font-weight: bold; }
</style>
42
CSS Class, id, and Contextual Selector
The Class Selector - to apply a CSS declaration to certain elements
on a web page.
.class-name { declaration property: declaration value }
Eg: .aa { color: orange }

The id Selector - to apply a CSS rule uniquely to a single area on


a web page.
#id-name {declaration property: declaration value }
Eg: #bb { color: green }

The Contextual Selector - It is a descendent selector


Eg: #bb li{ color: 00ff00 }

43
class and id selector use in embedded styles
Eg:
<!doctype html>
<html lang="en">
<head>
<title> Example of class and id selector </title>
<meta charset="utf-8">
<style>
.aa { color: orange }
#bb { color: green }
</style>
</head>
<body>
<h1 class="aa"> Heading Level 1 </h1>
<p id="bb"> This is a green color paragraph. </p>
<h2 class="aa"> Heading Level 2 </h2>
</body>
</html> 44
Hand on Practice
o Practice of class and id selectors
<!doctype html>
<html lang=“en”>
<head><title> Trillium Media Design </title>
<meta charset=“utf-8”>
<style>
.nav { font-weight: bold; font-size: 1.25em; }
.feature { color: #ff0000; }
#footer { color: #333333; font-size: .75em; font-style: italic; }
</style>
</head>
<body>
<h1> Trillium Media Design </h1>
<div class="nav">
<a href="index.html"> Home </a>
<a href="service.html"> Services </a>
<a href="contact.html"> Contact</a>
</div> 45
Hand on Practice…
<h2> New Media and Web Design </h2>
<p> Trillium Media Design will bring your company's Web presence to the
next level. <br>We offer a comprehensive range of services: </p>
<ul> <li> Website Design </li>
<li> Interactive Animation </li>
<li> E-Commerce Solutions </li>
<li class="feature"> Usability Studies </li>
<li class="feature"> Search Engine Optimization </li>
</ul>
<h2> Metting Your Business Needs </h2>
<p> Our expert designers are creative and eager to work with you.<br>
Take advantage of the power of Web 2.01 </p>
<div id="footer"> Copyright &copy; 2012 Your Name Here </div>
</body>
</html>

46
Span Element
o The span element defines a section on a web page that is not physically
separated from other area.
Hand on Practice 3.5
<style>
…
.companyname { font-weight: bold;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.25em; }
</style>
<body>
…
<p><span class="companyname">Trillium Media Design </span> will
bring ….
…
</body>
47
The web page with internal CSS styles

48
Configuring CSS
3. External Style Sheet
• It is a text file with a .css file extension that contains CSS style rules.
• This file is associated with a web pages to be associated with a web
page by using the link element.

o Link Element
• Three attributes are used with the link element: rel, href, and type.
• The value of the rel attribute is "stylesheet".
• The value of the href attribute is the name of the style sheet file.
• The value of the type attribute is "text/css".

49
Hands-On Practice
Create an External Style Sheet (save the file as color.css)
body { background-color: #0000FF;
color: #FFFFFF; }

Configure the Web Page


<!doctype html>
<html lang="en">
<head>
<title> External Styles </title>
<meta charset="utf-8">
<link rel="stylesheet" href="color.css">
</head>
<body>
<p>This web page uses an external style sheet.</p>
</body>
</html>
50
Hands-On Practice
The external style sheet named trillium.css
body { background-color: #E6E6FA; color: #191970;
font-family: Arial, Verdana, sans-serif; }
h1 { background-color: #191970; color: #E6E6FA; line-height: 200%;
font-family: Georgia, "Times New Roman", serif; }
h2 { background-color: #AEAED4; color: #191970;
font-family: Georgia, "Times New Roman", serif;
text-align: center; }
p { font-size: .90em; text-indent: 3em; }
ul { font-weight: bold; }
.nav { font-weight: bold; font-size: 1.25em; }
.feature { color: #ff0000; }
#footer { color: #333333; font-size: .75em; font-style: italic; }
.companyname { font-weight: bold;
font-family: Georgia, "Times New Roman",serif; 51
Hands-On Practice 3.7..
The services.html page is associated with a style sheet

<!doctype html>
<html lang=“en”>
<head>
<title> Trillium Media Design </title>
<meta charset=“utf-8”>
<link href="trillium.css" rel="stylesheet">
</head>
<body>
<h1> Trillium Media Design </h1>
<div class="nav">
<a href="index.html"> Home </a> &nbsp;
<a href="service.html"> Services </a> &nbsp;
<a href="contact.html"> Contact</a> </div>
<h2> Our Services Meet Your business Needs</h2>

52
Hands-On Practice 3.7..
The services.html page is associated with a style sheet
<dl>
<dt> Website Design </dt>
<dd> Whether your needs are large or small, Trillium cna get your company on
the Web ! </dd>
<dt> Interactive Animation</dt>
<dd> Multimedia training and marketing animations are our specialty.</dd>
<dt> E-Commerce Solutions </dt>
<dd> Trillium offers quick and easy entry into the e-commerce
marketpalce.</dd>
<dt> Usability Studies </dt>
<dd> Trillium can assess the usability of your current site and suggest
improvements.</dd>
<dt> Search Engine Optimization </dt>
<dd> Most people find websites using search engines. Trillium can help you get
your site noticed.</dd>
</dl>
<div id="footer"> Copyright &copy; 2012 Your Name Here </div> 53
Center HTML Elements with CSS
Hand on Practice 3.8
o Configure CSS style:
#wrapper { width: 700px;
margin-left: auto;
margin-right: auto; }

o The HTML follow:


<body>
<div id="wrapper">
.
.
</div>
</body>

54
The web page with external styles and wrapper

55
Comment
o Comment in HTML
- add a comment to HTML is to type " <!– " before your comment
and " -->" after your comment.
Eg: <!-- HTML comment is here -->

Comment in Comment
- add a comment to CSS is to type " /* " before your comment
and " */ " after your comment.
Eg: /* CSS comment is here */

56
The Cascade
o The cascade (rules of precedence) that applies the styles in order from
outermost (external style) to innermost ( HTML attributes coded on
page)

57
Visual Elements and Graphics

58
Configuring Lines and Borders
Two coding Techniques:
• The HTML horizontal rule element,
• The CSS border and padding properties.

Horizontal Rule Element <hr>


• HTML5 syntax for horizontal rules is <hr>.
• a horizontal line across a web page.

59
The Border Properties
border property - configures the border, or boundary around
an element.

Sample : h1 { border: width style color; }

Property Example
border property Eg: h1 { border: 1px solid red;}

border-top property Eg: h1 { border-top: 1px solid red;}

border-right property Eg: h1 { border-right: 1px solid red;}

border-bottom property Eg: h1 { border-bottom: 1px solid red;}


border-left property Eg: h1 { border-left: 1px solid red;}

60
The Border Properties
Property Values
border-width medium, thin, thick; px
property Eg: h1 { border-width: 20px; }
Eg: h1 { border-width: 1px 2px 3px 4px;}
Eg: h1 { border-width: 2px 5px 1px;}
Eg: h1 { border-width: 1px 20px; }
border-style property none, hidden, dotted, dashed, solid, double,
groove, ridge, inset, outset
Eg: h1 { border-style: solid;}
Eg: h1 { border-style: dotted solid double dashed;}
Eg: h1 { border-style: dotted solid double;}
Eg: h1 { border-style: dotted solid;}

Eg: .dashborder { border-width: 3px;


border-style: dashed;
border-color: #000033; }
(or) .dashborder { border: 3px dashed #000033; } 61
The Padding Properties
padding property - configure empty space between the content of
the HTML element (usually text) and the border.

Property Example
padding property px;
Eg: p { padding: 10px;}
Eg: p { padding: 1px 3px 1px 2px;}
Eg: p { padding: 2px 3px 2px;}
Eg: p { padding: 2px 4px;}
padding-top property Eg: h1 { padding-top: 1px;}

padding-right property Eg: h1 { padding-right: 1px;}

padding-bottom property Eg: h1 { padding-bottom: 1px;}


padding-left property Eg: h1 { padding-left: 1px;}
62
Web page with border properties

63
Types of Graphics
Image File Compression Transparency Animation Colors Progressive
Type Extension Display

GIF .gif Lossless Yes Yes 256 Interlacing

JPEG .jpg (or) Lossy No No Millions Progressive


.jpeg

PNG .png Lossless Yes No Millions Interlacing

64
Image Element - configure graphics on a web page.
<img src="logo.gif" height="200" width="500" alt="My Compay Name">

Attribute Value
align right, left(default), top, middle, bottom
alt text phrase that describe the image.
border pixels; Eg: border="0"
height pixels; height of image
hspace pixels; amount of space on left/right side of image.
id text name
name text name
src the URL or file name of the image
title the text phrase – information about the image.
vspace pixels, amount of space on top/bottom of image.
width pixels, the width of image.
65
Image Hyperlinks

- to surround image element with anchor tags.

 <a href="index.html"> <img src="home.jpg" height="19"


width="85" alt="Home"> </a>
(OR)
 <a href="index.html"> <img src="home.jpg" height="19"
width="85" alt="Home" border="0"> </a>

66
Image with Caption
Hands on Practice4.4
<! doctype html>
<html lang="en">
<head>
<title> Image Element</title>
<meta charset="utf-8">
<style>
#figure { width: 640px;
border: 1px solid #000000;
padding: 5px; text-align: center;
font-family: Papyrus, fantasy;}
</style>
</head>
<body>
<div id="figure"> <img src="myisland.jpg" alt="Tropical Island"
height="480" width="640" > Tropical Island Gateway </div>
</body>
67
</html>
Image with Caption
Hands on Practice4.5
<! doctype html>
<html lang="en">
<head><title> Figure Caption</title>
<meta charset="utf-8">
<style>
figure { width: 640px;
border: 1px solid #000000;
padding: 5px;}
figcaption { text-align: center;
font-family: Papyrus, fantasy;}
</style>
</head>
<body>
<figure>
<img src="myisland.jpg" alt="Tropical Island" height="480" width="640">
<figcaption> Tropical Island Gateway </figcaption>
</figure>
</body> </html> 68
Background Images
background-image property - configures background image.

Sample : body { background-image: url(background.jpg);}

Both background-color and a background-image


Sample : body { background-color: #99CCCC;
background-image: url(background.jpg);}

69
Properties of Background Image
Property Value
background-repeat repeat, repeat-x, repeat-y, no-repeat;
property Eg: body {background-image: url(background.jpg);
background-repeat: no-repeat; }
background-position px, % ;
property such as 10px; 50%; 10px 10px; 50% 50%;
left top/center/bottom;
center top/center/bottom;
right top/center/bottom;
left, right, top, bottom, center
(the second value default to center)
Eg: body {background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: right;}

background- fixed, scroll


attachment property Eg: body { . . .
background-attachment: scroll;} 70
CSS3 Visual Effects
Property Value
background-clip border-box, padding-box, content-box
property Eg: div { . . .
/* Safari */ -webkit-background-clip: border-box;
background-clip: border-box; }
background-origin border-box, padding-box, content-box
property Eg: div { . . .
background-origin: padding-box; }
Note: If the background-attachment is set to "fixed", this
property has no effect
background-size auto, contain, cover, px, %
property such as 10px 10px(width, height), 200px (auto default)
Eg: div { background-size: auto;}
background Sample: body { background: background-color
property background-image background-position background-size
background-repeat background-origin background-clip
background-attachment }
Note: Don't use All Properties
71
CSS3 Rounded Corners
border-radius property - to create rounded corners.
Eg: div { border: 2px solid #ff0000;
border-radius: 25px;}
For All Browser
Eg : div { -webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px; }
Property Example
border-radius property px, %
Eg: div{ border-radius: 10px;}
Eg: div{ border-radius: 1px 3px 1px 2px;}
Eg: div{ border-radius: 2px 3px 2px;}
Eg: div{ border-radius: 2px 4px;}
border-top-left-radius Eg: div{ border-top-left-radius: 10px;}
border-top-right-radius Eg: div{border-top-right-radius: 10px;}
border-bottom-right-radius Eg: div{border-bottom-right-radius: 10px;}
border-bottom-left-radius Eg: div{border-bottom-left-radius: 10px;}
72
CSS3 box-shadow property
box-shadow property - to create a shadow effect block-display element
such as div and paragraph elements.

Sample: div { box-shadow: h-shadow v-shadow blur spread color; }

Eg : div { box-shadow: none; }


(or)
Eg : div { box-shadow: 5px 5px 5px 5px #FF0000; }
(or)
Eg : div { box-shadow: inset 5px 5px 5px 5px #FF0000; }

For All Browser


Eg : div { -webkit-box-shadow: inset 5px 5px 5px # FF0000;
-moz-box-shadow: inset 5px 5px 5px # FF0000;
box-shadow: inset 5px 5px 5px # FF0000; }

73
CSS3 text-shadow property
text-shadow property - to create a shadow effect on text.
Sample: div { text-shadow: h-shadow v-shadow blur color; }
Eg : div { text-shadow: none; }
(or)
Eg : div { text-shadow: 3px 3px 3px #666; }
CSS3 opacity property
opacity property - the transparency of the background color.
- opacity values range from is 0 to 1.
- 1 is not transparent at all,
- 0.5 is 50% see-through,
- 0 is completely transparent.
Eg : div { opacity: 0.5; }
For before IE8
Eg : div { filter: alpha (opacity=50); }
74
More About Image
Favorites Icon - small icon in the address bar or tab of a browser; favicon
Eg : <line rel="icon" href="favicon.ico" type="image/x-icon">
For IE :
<line rel="shortcut icon" href="favicon.ico" type="image/x-icon">

If Images are in their own folder

In CSS:
body { background-image: url(images/background.gif); }

In HTML:
<img src="images/logo.jpg" alt="CircleSoft" width="588" height="120">
75

You might also like