HTML and Css Basic

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>
<head>
<title> Heading Example </title>
</head>
<body>
<h1> Heading level 1 </h1>
<h4> Heading level 4</h4>
</body>
</html> 8
Paragraph Element
<p> … </p>
Elements
Hand-On Practice 2.3
<!doctype html>
<head>
<title> Paragraph Example </title>
</head>
<body>
<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>
</body>
9
</html>
Line Break Element
Elements
<br> …
<!doctype html>
<head>
<title> Line Break Example </title>
</head>
<body>
<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>
</body>
10
</html>
Blockquote Element
Elements
<blockquote> … </blockquote>

<!doctype html>
<head>
<title> Blockquote Example </title>
</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>
<head>
<title> Example 1</title>
</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>
<head>
<title> Heading and List </title>
</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
<!doctype html>
<head>
<title> Heading and List </title>
</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
<!doctype html>
<head>
<title> Description List </title>
</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 "
‘ Right single quotation mark ’
© Copyright symbol ©
& Ampersand &
empty space non breaking space
- Long dash &mdsh;
| vertical Bar |
heart &hearts;
<! doctype html>
<head>
<title> Web page</title>
</head>
<body>
I &hearts; HTML5 <br>
© 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>
<head>
<title> Trillium Media Design</title>
</head>
<body>
<h1> Trillium Medium Design</h1>
<div> Home Services Contact </div>
<h2> New Media and Web Design </h2>
<p> Trillium Media Design will bring your company’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 © 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:koko2016@gmail.com” >
koko2016@gmail.com </a>
26
<!doctype html>
<head>
<title> Anchor Example </title>
</head>
<body>
<a href=“http://webdevfoundations.net”> Web Development &
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>
<head>
<title> Inline CSS Example </title>
</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>
<head>
<title> Embedded Styles </title>
<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
<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>
<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 © 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
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
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
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>
<head><title> Trillium Media Design </title>
<style>
.nav { font-weight: bold; font-size: 1.25em; }
.feature { color: #ff0000; }
#footer { color: #333333; font-size: .75em; font-style: italic; }
</style>
</head>
<body>
<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…
<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 © 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.
<style>
…
.companyname { font-weight: bold;
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>
<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;
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>
<head>
<title> Trillium Media Design </title>
<link href="trillium.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<a href="index.html"> Home </a>
<a href="service.html"> Services </a>
<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 © 2012 Your Name Here </div> 53
Center HTML Elements with CSS
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: 
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>
<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>
<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

HTML and Css Basic

Uploaded by

Document Information

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 and Css Basic

Uploaded by

Copyright:

Available Formats

Web Development and Design

Foundations with HTML5

HTML - Hypertext Markup Language

< !DOCTYPE html>

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

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

tag attribute = “attribute end

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

Hand-On Practice 2.5

1. Create a “mypractice” folder.

CSS Syntax Color Type

Hexadecimal Color Values :

1. Inline CSS with the Style Attribute

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

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

The Contextual Selector - It is a descendent selector

Configure the Web Page

o The HTML follow:

Horizontal Rule Element <hr>

Sample : h1 { border: width style color; }

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;}

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

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

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

GIF .gif Lossless Yes Yes 256 Interlacing

JPEG .jpg (or) Lossy No No Millions Progressive

PNG .png Lossless Yes No Millions Interlacing

- to surround image element with anchor tags.

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

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

Both background-color and a background-image

background- fixed, scroll

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

Eg : div { box-shadow: none; }

For All Browser

If Images are in their own folder

You might also like