Upload
jakaltarget
View
217
Download
0
Embed Size (px)
Citation preview
8/8/2019 Web Tech Class 6
1/42
Mr. Debojit Boro
Assistant Professor,Tezpur University,Napaam,Tezpur-784028
Web Technology
Batches:
M.Tech. 2nd Semester
B.Tech 6th Semester
B.Tech. 8th Semester
MCA 4th Semester
B.Tech. Electronics 8th Semester
1
8/8/2019 Web Tech Class 6
2/42
Topics for today
Style Sheet
Cascading Style Sheet
XSL
Javascript
Mr. Debojit Boro
Assistant Professor,Tezpur University,Napaam,Tezpur-7840282
8/8/2019 Web Tech Class 6
3/42
Style Sheet
Style Sheet is a collection of formatting
styles, which can be applied to a web page
Style Rule
Set of HTML tags specifying the formatting
elements
3
8/8/2019 Web Tech Class 6
4/42
Style Rule can be splitted into two parts:
(a) Selector: A selector is a string that identifies whatelements the corresponding rule applies to and is thefirst part of the rule.
(b) Declaration: This is enclosed within the curly bracketswhich has two sections separated by colon the firstbeing the property and later being the value.
Syntax Rule is as follows:
selector {property: value; ......;property: value}
where
Selector = Any HTML tag
Property= Attribute like font color, font size etc
Value =Setting for the attribute
Eg. H1{colour:blue}4
8/8/2019 Web Tech Class 6
5/42
Techniques for incorporating Style Sheets
Including style information within HTML
Embedding a style sheet
Linking to an external style sheet
Importing a style sheet
5
8/8/2019 Web Tech Class 6
6/42
Including Style Information within HTML-
Inline Styles
This can be applied to individual elements in the web
page by using style attributes with the HTML tags
Syntax:
e.g
6
8/8/2019 Web Tech Class 6
7/42
Embedding Style Sheet
Using more than one style
Tag .. is used within Head Tags
p{font-family:Arial}
h1{Color:limegreen}h1{font-family:Arial}
h2{font-family:Arial}
This is first header
And this is its para
This is second header
Note*- is included within the tag7
8/8/2019 Web Tech Class 6
8/42
Or you can group the styles together as
p{font-family:Arial}
h1{Color:limegreen}
h1,h2{font-family:Arial}
This is first header
And this is its para
This is second header
By placing a comma8
8/8/2019 Web Tech Class 6
9/42
Selectors
Simple Selectors Describes an element
irrespective of its position in the document
structure
H1{color:blue}
HTML Selectors- It comes under Simple
Selectors. HTML elements tags are removed
and only the name is left.
9
8/8/2019 Web Tech Class 6
10/42
Class Selector
Provides the ability to apply styles to specific parts of a documentand not necessarily to the whole document
Syntax:
.Class Selector {Property:Value}
Class Attribute
Dot(.) preceding the Class Selector is known as Flag Character and
Dot(.) can also be preceded by the HTML tag to which it has to be
applied
10
8/8/2019 Web Tech Class 6
11/42
Class Selector (Contd..)
With the class attribute we can define different styles
for the same element.
p.right {text-align: right}
p.center {text-align: center}
Use the class attribute in your HTML document:
Paragraph is right-aligned.
Paragraph is center-aligned.
Generic Class
.center {text-align: center}
Heading is center-aligned
Paragraph is center-aligned
118/8/2019 Web Tech Class 6
12/42
Class SelectorExample
p.right {text-align: right}
p.center {text-align: center}
.center {text-align: center}
This is center aligned header
This is right alignment
This is center alignment
12
8/8/2019 Web Tech Class 6
13/42
ID Selector
Used to apply style to selected parts of text
Each ID selector has unique identifier
ID selector is preceded by the hash(#) marks
ID selector can be applied to any of the HTML elementsby using the ID attribute
Syntax:
#ID Selector name {Property:Value}
13
8/8/2019 Web Tech Class 6
14/42
Id Selector (Contd..) Generic: The id attribute can be defined in two ways. It can be
defined to match all elements with a particular id, or to match onlyone element with a particular id.
This paragraph will be right-aligned.
#intro
{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent
}
Specific: The id attribute will match only p elements with
id="intro":p#intro
{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent
}14
8/8/2019 Web Tech Class 6
15/42
Difference between Class Selector and ID
Selector
IDs are unique
Each element can have only one ID
Each page can have only one element with that ID
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
15
8/8/2019 Web Tech Class 6
16/42
Contextual Selector
This selector overrides the inheritance of the
Parent Tag to the Child Tag
This is used when we want to have a different
formatting style to a specific that is within a
parent tag.
16
8/8/2019 Web Tech Class 6
17/42
Example of Contextual Selector
Contextual Selector
Body{color:hotpink;
background:lightblue;
font-family:Arial;}
P{color:darkblue}
This is bold text
This is italic text and overriding body tag
17
8/8/2019 Web Tech Class 6
18/42
Cascading Style Sheets(CSS)
The method of putting all the style rules in a separate
style sheet file and then importing or linking with ourHTML document is called or known as Cascading Style
Sheets
Style sheet file must be having a CSS extension.
The syntax for the linking comes under the head tag.
The syntax:
18
8/8/2019 Web Tech Class 6
19/42
Example of the Style Sheet Document
p{color:limegreen;
font-family:Arial;
font-size:normal;
}
.forall{color:red;
font-weight:bold;
font-style:italic;
}
19
8/8/2019 Web Tech Class 6
20/42
Example of the CSS
Style Sheet
This is a text file
20
8/8/2019 Web Tech Class 6
21/42
CSS Fonts Properties
The Font properties allow us to change the font family, boldness,size, and the style of a text.
Fonts are identified by their name in CSS. Note that if a browserdoes not support the font that is specified, it will use a default font.
font-family : family-name, generic-family A prioritized list offont family names and/or generic family names for an element
font-size :: small | medium | large smaller | larger | length| % Sets the size of a font
font-style : normal | italic | oblique Sets the style of the font
font-weight : normal | bold | bolder | lighter | 100 | 200 .......:: Setsthe weight of a font
21
8/8/2019 Web Tech Class 6
22/42
CSS Text Properties
Text properties allow us to control the appearance of text.
It is possible to change the color of a text, increase or decreasethe space between characters in a text, align a text, decorate atext, indent the first line in a text, and more.
color : #rrggbb | name Sets the color of a textdirection : ltr | rtl Sets the text directionletter-spacing : normal | length Increase or decrease the spacebetween characterstext-align : left | right | center | justify Aligns the text inan elementtext-decoration : none | underline | overline | line-through | blink
Adds decoration to texttext-indent : length | % Indents the first line of text in an elementtext-shadow : none | color | lengthtext-transform : none | capitalize | uppercase |lowercase Controls the letters in an element
22
8/8/2019 Web Tech Class 6
23/42
CSS Background Properties The Background properties allow us to control the background color
of an element
Set an image as the background, repeat a background imagevertically or horizontally, and position an image on a page.
background-attachment : scroll | fixed sets whether a background
image is fixed or scrolls with the rest of the page
background-color : #rrggbb | name sets the background color
background-image : url url of the image
background-position : top left | top center | top right | center left| center center | center right | bottom left | bottom center | bottomright | x-% y-% | xpos y-pos starting position of an image
background-repeat : repeat | repeat-x | repeat-y | no-repeat Setsif/how a background image will be repeated
23
8/8/2019 Web Tech Class 6
24/42
Block element like
element can be considered as rectangular
boxes on the screen
(a) Margin-properties: The individual margins for a block element
can be set using margin-top, margin-rigid, margin-bottom or margin-
left.
(b) Border properties:
Border-style: Used to set the appearance of the borders. The
values can include solid,double,groove,ridge etc.Border-width: The width of the border is specified here. The
individual border width can be set using border-top width etc.
border right width,border-bottom width,border left width etc.
Border-color:Assigning color to the border
CSS Box Properties
24
8/8/2019 Web Tech Class 6
25/42
The space between an elements border and it
content can be specified into four padding
regions can be set using the padding-top,
padding-right, padding-bottom and padding-leftproperties.
CSS Padding Properties
25
8/8/2019 Web Tech Class 6
26/42
XSL
XSL- Stands for Extensible StylesheetLanguage
Specifies how to display an XML document
Two main aspects:
How to transform XML documents into HTML
Format
How to conditionally format XML documents26
8/8/2019 Web Tech Class 6
27/42
Other features
Add completely new elements into the generated file or
remove existing elements.
Rearrange and sort the elements as required and testand make decisions about which elements to display etc
27
8/8/2019 Web Tech Class 6
28/42
How to transform a XML document
into HTML document
1010 Juliana Dantas
IT
25000
Pedro Almeida
-------------------------------------------
--------------------------------------------
------------------------
28
8/8/2019 Web Tech Class 6
29/42
Corresponding XSL Document
ID
NAME
DEPARTMENT
BASICPAY
MANAGER
29
8/8/2019 Web Tech Class 6
30/42
Code contd..
Sample corresponding code for the XML document
30
8/8/2019 Web Tech Class 6
31/42
Java Script orECMA Script
It is a cross-platform scripting language developed by Netscape.
It can be used for both client side and server side applications
Client side Javascript is typically executed in a browser that
supports the language
It is an interpreted object based language that can be included in
HTML page
We can access a number of elements in our HTML page andmanipulate them using Javascript
Helps in creation of HTML pages capable of responding to user
events like mouse clicks, key presses, selection of elements in the
form31
8/8/2019 Web Tech Class 6
32/42
Objects, Properties and Methods
Hierarchical Order i.e begins with Window
Object
Properties and methods associated with
Associated events
8/8/2019 Web Tech Class 6
33/42
Bare-bone script of javascript consists of only two lines
e.g for Dynamically changing HTML with Javascript
document.bgcolor=blue
e.g window.status =welcome
8/8/2019 Web Tech Class 6
34/42
Window Object
New Window
variable=window.open(URL, Name, Properties)
upto three parameters
URL: location of the page to be loaded in the new window
Name: name of the new window which can be referred by name later
Properties delimited by ,Width: of the window in pixels
Height: of the window in pixels
Toolbar: yes/no
Menubar: yes/no
Status: yes/no
Scrollbars:yes/noResizable: yes/no
Left: left coord of the top left corner of the window
Top: top coord. Of the top left corner of the window
NewWin=window.open(www.tezu.ernet.in, TU, width=300, height= 300,
toolbar=no, left=0, top=0)
8/8/2019 Web Tech Class 6
35/42
Window Object (Contd..)
Shakti Art Gallery....A collection of Finger paints...
function imageView(imageId,size,medium,method,price)
{ fullImage=window.open('','','scrollbars=yes,menu=no,width=600,height=700,left=0,top=0')
fullImage.document.write('Image View:'+imageId+'')
fullImage.document.write('ID:'+imageId+'')
fullImage.document.write('')
fullImage.document.write('Size:'+size+'Medium:'+medium+'
Method:'+method+'
Price:'+price+'')
fullImage.document.write('')
}
8/8/2019 Web Tech Class 6
36/42
Javascript String Objects
The String object is used to manipulate a stored piece of text.
eg. var txt="Hello world!";document.write(txt.toUpperCase());
Javascript Date Objects
The Date object is used to work with dates and times.
e.g Date objects are created with the Date() constructor.
JavaScript Boolean Object
The Boolean object is used to convert a non-Boolean value to aBoolean value (true or false).
e.g var myBoolean=new Boolean();
8/8/2019 Web Tech Class 6
37/42
JavaScript Array Object
The Array object is used to store multiple values in a single variable
e.g. var myCars=new Array();
JavaScript MathO
bject
The Math object allows you to perform mathematical tasks
eg.var sqrt_value=Math.sqrt(16);
Math is not a constructor. All properties and methods of Math can be
called by using Math as an object without creating it.
8/8/2019 Web Tech Class 6
38/42
Javascript NavigatorObject
The Navigator object contains information about the
visitor's browser
Two properties of the Navigator object:
appName - holds the name of the browser
appVersion - holds, among other things, the version of the browser
8/8/2019 Web Tech Class 6
39/42
Creating Objects
1. Creating a direct instance of an object
personObj=new Object();personObj.firstname="John";personObj.lastname="Doe";personObj.age=50;personObj.eyecolor="blue";
2. Creating a template of an object
function person(firstname,lastname,age,eyecolor){this.firstname=firstname;
this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;}
myFather=new person("John","Doe",50,"blue");
myMother=new person("Sally","Rally",48,"green");
8/8/2019 Web Tech Class 6
40/42
Including function inside a template
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.newlastname=newlastname;}
function newlastname(new_lastname)
{
this.lastname=new_lastname;
}
8/8/2019 Web Tech Class 6
41/42
8/8/2019 Web Tech Class 6
42/42