UNIT-II Introduction - HTML
UNIT-II Introduction - HTML
UNIT-II Introduction - HTML
WEB (WWW)
• HTML
▫ The original version of HTML was released in 1993 with MOSAIC.
▫ The first HTML version 2.0 was released in 1994 and supported by
all browsers.
▫ Version 3.2 was released in 1996 with many useful additions.
▫ Version 4.0 was released by W3C in 1999.
▫ W3C (world wide web consortium), group of organizations and
individuals provides distributed standards for web technology.
Web Browser
• A web browser is an interface between user and the Internet.
• The browser not only sends messages to web servers to retrieve
page request , but also renders the HTML code once it arrives.
• Web browser interacts with a web server by HTTP protocol.
• Web browsers are two types:
▫ Graphical: Text, Images, Audio, and Video are retrievable.
▫ Netscape Navigator, Internet Explorer, Mozilla Firefox, Google
chrome, …
▫ Text: Text only mode
▫ Lynx
Sub & Sup Tag: Sets the text as SUBSCRIPT and SUPERSCRIPT.
Ex: p
The CSS Syntax is made up of two parts. {
background-color : red;
Color : blue;
Selector & Set of Declarations
}
A Selector is used to create a link between the rules and HTML tag.
The Declaration has two parts.
Property & Value
Selectors can be placed into classes so that a tag can be formatted in a
variety of ways.
Declarations must be separated using colon(:) and terminated using
semicolon (;).
The rule body begins and ends with curly braces ( { and } ) and values
are assigned to corresponding property.
CASCADING STYLE SHEETS
Classes:
The above method applies the same style to all paragraphs.
Use CLASSES to apply a separate style to some paragraphs.
Syntax:
Ex:
Selector . className p.mca
{
{ color : green;
Property : value; background-color : yellow;
}
Property : value;
<p class=“mca”> GVPMCA <p>
}
Apply this CLASS with in body section
<selector class=“className”>
CASCADING STYLE SHEETS
Anonymous Classes:
Sometimes we can apply a piece of formatting to different
elements with in a page.
Anonymous Classes in CSS provides a way of defining styles
with in reusable classes.
Syntax: <style>
<style> <!–
<!– . mca
{
. className
color : blue;
{ font-size :
Property : value; 24pt;
Property : value; }
} -->
--> </style>
</style>
CASCADING STYLE SHEETS
INLINE STYLE: The STYLE attribute is used to configure style information
specific to a single element with in a web page.
The style applies only to the element in which the attribute is defined.
Style attribute can be specified in the opening tag.
Ex:
<p style=“font-size : 32pt; font-family : Arial; color : green” >
some paragraph
</p>
<p >
some paragraph
</p>
CASCADING STYLE SHEETS
EMBEDDED STYLE SHEET: The STYLES are specified in the <STYLE> tag.
This <STYLE> element is included in the <HEAD> portion of
the document.
This will applicable for the entire web page.
Ex:
<html>
<head>
< style type=“text/css”>
p
{ font-size : 32pt; font-family : Arial;
color : green;
}
</style>
………………………….
CASCADING STYLE SHEETS
EXTERNAL STYLE SHEET: The name EXTERNAL specifies that the style
sheet is made externally and can be used by other web pages.
The STYLES are specified in a separate CSS file and can import it
into the current HTML document with the <LINK> element.
The external Style Sheet is available in a separate outside file
with an extension “.CSS”.
ESS are useful when all web-pages on web-site have the same
pattern of style.
The <LINK> element is included in the <HEAD> portion of the
document.
Ex:
<LINK REL=“STYLESHEET” HREF=“url” TYPE=“TEXT/CSS”>
CASCADING STYLE SHEETS
<LINK REL=“STYLESHEET” HREF=“url” TYPE=“TEXT/CSS”>
The .CSS file should not contain any HTML tags.
Do not leave spaces between the property, value and its Units.
Ex: margin-left:20 px; will work in IE
margin-left:20px; will work in Firefox.
Ex: MCA.CSS
SOURCE
CASCADING STYLE SHEETS
PROPERTIES AND VALUES IN STYLES:
Font:
font-family : <family-name>
font-style : normal / italic / oblique
font-size : small / medium / large
Backgrounds and Colors:
color : <value>
background-color : <value>
background-image : URL / none
Text:
text-decoration : none / underline / overline / line-through
text-transformation: none / capitalize / uppercase / lowercase
text-align : left / right / center / justify
text-indentation : length / percentage
CASCADING STYLE SHEETS
PROPERTIES AND VALUES IN STYLES: cont..,
Boxes:
margin : length / percentage / auto {1,2,4}
i.e. value should be 1,2,4
Ex: margin:5px 10px 5px 10px
4 -top, right, bottom, and left
2 -first will be applied to top and bottom
second will be applied to left and right
1 -applies to all four margins
border-width : thin / thick / medium / length
padding : length / percentage
border-color : <value>
border-style : none / dotted / dashed / solid / double
width : length / percentage
height : length / percentage
CASCADING STYLE SHEETS
PROPERTIES AND VALUES IN STYLES: cont..,
Lengths:
px : pixels
in : sizes in inches
cm : sizes in centimeters
mm : sizes in millimeter
pt : points where 1pt equals to 1/72 inches
pc : picas where 1 pc = 12 pt
SOURCE EXAMPLE