Web Tech Class 6

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

    11
  • 8/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