You are on page 1of 73

Introduction to UI Concepts and Web Technologies

Education, Training and Assessment


We enable you to leverage knowledge anytime,
anywhere!

Copyright Guideline
2014 Infosys Limited, Bangalore, India. All Rights Reserved.

Infosys believes the information in this document is accurate as of its publication date; such
information is subject to change without notice. Infosys acknowledges the proprietary rights of
other companies to the trademarks, product names and such other intellectual property rights
mentioned in this document. Except as expressly permitted, neither this documentation nor
any part of it may be reproduced, stored in a retrieval system, or transmitted in any form or by
any means, electronic, mechanical, printing, photocopying, recording or otherwise, without the
prior permission of Infosys Limited and/ or any named intellectual property rights holders
under this document.

Copyright 2013-2014, Infosys Limited

Confidential

Confidential Information
This Document is confidential to Infosys Limited. This document contains information and data that
Infosys considers confidential and proprietary (Confidential Information).
Confidential Information includes, but is not limited to, the following:
Corporate and Infrastructure information about Infosys
Infosys project management and quality processes
Project experiences provided included as illustrative case studies
Any disclosure of Confidential Information to, or use of it by a third party, will be damaging to Infosys.
Ownership of all Infosys Confidential Information, no matter in what media it resides, remains with
Infosys.
Confidential information in this document shall not be disclosed, duplicated or used in whole or in part
for any purpose other than reading without specific written permission of an authorized representative of
Infosys.
This document also contains third party confidential and proprietary information. Such third party
information has been included by Infosys after receiving due written permissions and authorizations from
the party/ies. Such third party confidential and proprietary information shall not be disclosed, duplicated
or used in whole or in part for any purpose other than reading without specific written permission of
an authorized representative of Infosys.

Copyright 2013-2014, Infosys Limited

3
Confidential

Course Information
Course Code: CCFP4.0-IUWT
Course Name: Introduction to UI Concepts and Web Technologies
Document Number: IUWT-01
Version Number: 4.0

Copyright 2013-2014, Infosys Limited

Confidential

Course Objectives
Identify the Internet
components, protocols
and their functionality

Add interactivity to a
web page using
JavaScript

Introduction to UI
and Web
Technologies

Introduce all three ways


of specifying styles
(external, embedded,
inline)

Validate web page using


JavaScript

Copyright 2013-2014, Infosys Limited

Create a static web


page with standard
look and feel using
HTML and CSS

Confidential

Topics
Internet Basics
Types of network, Topologies, Connecting devices
Network Architecture

TCP/IP reference model

IP Address

Web Fundamentals
Browser, URL, DNS, HTTP, Web servers, Types of Web Content

HTML and Cascading Style Sheets (CSS)


Formatting tags, List, Links, Tables, Images and Forms

JavaScript
Introduction to JavaScript
Client side validations
Introduction to Document Object Model (DOM)

Copyright 2013-2014, Infosys Limited

Confidential

Impact of Web

1.28 billion
active users

Facebook

Guided Activity : Assignment 1

We all are living in the web era. Do you know what makes it tick?
Copyright 2013-2014, Infosys Limited

Confidential

Uses of Web
Social
network

E-mail

Chat

Information and
Collaboration

Distribute
information
Copyright 2013-2014, Infosys Limited

Resource
Guided Activity
: Assignment 2
share
Confidential

Load
share

Web: An overview

HTTP

NETWORKS

HTML

Server

Copyright 2013-2014, Infosys Limited

Browser

DNS

TCP/IP

Confidential

URL

IP Address

PROXY

ROUTER

Under the hood:

Networks

11

Computer Networks
Collection of computers interconnected to exchange information and share
resources

Copyright 2013-2014, Infosys Limited

Confidential

12

Computer Networks
Collection of computers interconnected to exchange information and share
resources

Local Area Network (LAN)

Copyright 2013-2014, Infosys Limited

Confidential

13

Computer Networks
Collection of computers interconnected to exchange information and share
resources

Mexico

Mangalore

Mysore

Copyright 2013-2014, Infosys Limited

Confidential

14

Computer Networks
Collection of computers interconnected to exchange information and share
resources

Wide Area Network (WAN)

Mexico

Mangalore

Mysore

Copyright 2013-2014, Infosys Limited

Confidential

15

Computer Networks Based on geographical spread

Local Area Network

Wide Area Network

Interconnects computers
within a limited area such as
building or campus

Interconnects computers
across different locations
within cities, countries or
continents

Owned by single organization

Owned by multiple
organizations or people

Data transfer rate is high and


high reliability

Relatively lower data transfer


rate and low reliability

Implementation cost is low

Higher implementation cost


compared to LAN

Copyright 2013-2014, Infosys Limited

Confidential

16

Computer Networks Based on data flow

Circuit Switched

Dedicated communication channel is established


between the nodes
Guarantees availability, bandwidth of the channel
and remains connected throughout the session
Acts as if the nodes are physically connected
Also known as connection oriented type
Example: Telephone switching systems

Packet Switched

No need for dedicated connection between the


communicating nodes
Data is fragmented into packets
Each packet has the information such as source
and destination address, size of data etc. and
can traverse through different paths
Also known as connectionless type

Copyright 2013-2014, Infosys Limited

Confidential

Under the hood:


Network Topologies

18

Network Topology
Refers to how the computers are connected in a network either physically or logically
Geometric representation of relationship of all the computer and interconnecting
devices
Examples of Network Topologies are:

BUS

STAR

MESH

RING

Choice of topologies is based on communication cost, installation cost, and


reliability
Copyright 2013-2014, Infosys Limited

Confidential

19

Bus Topology
Overview

Nodes connected through shared communication cable


called Bus
Nodes are connected to the bus by drop lines

Advantages

Disadvantages

Simple, reliable and easy to use, especially in smaller


networks
Less expensive

- A break in the bus brings the entire network down

- Not very much scalable


- Only one node can transmit at a time

Copyright 2013-2014, Infosys Limited

Confidential

Under the hood:

Interconnecting Devices

21

Interconnecting Devices
There are many different devices for interconnecting networks.
Repeaters
Bridges

LAN

LAN

Routers

LAN

Gateway
Repeater

Bridge

Router/Switch
X.25

IP network

Network

Gateway
LAN
LAN

Copyright 2013-2014, Infosys Limited

Confidential

Repeaters
A Repeater enables signals to travel
longer distances over a network.
It works at the OSI's Physical layer.
Repeaters do not translate anything.

A repeater regenerates the


received signals and then
retransmits the regenerated
signals on other segments.

Regenerated Signal

Weakened Signal

Repeater

Copyright 2013-2014, Infosys Limited

Confidential

Bridges
It works at the Data Link Layer of the OSI model.
A bridge can join segments or workgroup LANs.
It can also divide a network to isolate traffic or problems.

Network

As traffic passes
through the bridge,
information about
the computer
addresses is then
stored in the bridge's
RAM. The bridge will
then use this RAM to
build a routing table
based on source
addresses.

Host

Segment 1
Host

Host
Host

Bridge

Host
Host

Host

Uses:
Segment 2
Expand the distance of a segment.
Provide for an increased number of computers on the network.
Reduce traffic bottlenecks resulting from an excessive number of attached computers.
Copyright 2013-2014, Infosys Limited

Confidential

Routers
Network 2
A complex network needs a device,
which not only knows the address of
each segment, but also can
determine the best path for sending
data and filtering broadcast traffic to
the local segment. Such device is
called a Router.

10.1.0.0/255.255.0.0

Network 1

Router

10.0.1.0/255.255.255.0

It works at the Network layer of the OSI model


Routers can switch and route packets across multiple networks.

Copyright 2013-2014, Infosys Limited

Confidential

Network 1
10.2.1.0/255.255.255.0

Gateway
Gateways
make
communication
possible
between
different
architectures and environments.
Repackages information to match the
requirements of the destination
system.

Host A

Network
Gateway

Host B

Network
Router

Change the format of a message so


that it will conform to the application
program at the receiving end of the
transfer.

Host C

A gateway links two systems that do


not use the same:

Communication protocols
Data formatting structures
Languages
Architecture

Guided Activity : Assignment 3


Copyright 2013-2014, Infosys Limited

Confidential

Gateway Vs Routers
Gateway

Networks

Routers

Gateways regulate traffic


Routers regulate traffic between
between two dissimilar networks similar networks

Less information in packets

Routers have access to more


information in packets

Complexity

Simple Networks

Complex Networks

Destination

Looks at the destination node


address

Looks at the network address

Low

High

Packets

Efficiency

Copyright 2013-2014, Infosys Limited

Confidential

27

Interconnecting devices
Repeater

Connects two segments of a network cable


Receives, amplifies and retransmits signals in both the directions
Enables signals to travel longer distance and useful in larger networks

Bridge

Store-and-forward device
Connects two homogeneous networks
Divides a large network into smaller segment and filters network traffic

Router

Directs packets between different networks along the most optimal route
Connects LANs and WANs using a routing table
Provides congestion control

Gateway

Connects two or more entirely different networks


Connects networks with different communication protocols
Translates information between different network data formats or
network architectures

Guided Activity : Assignment 4


Copyright 2013-2014, Infosys Limited

Confidential

Under the hood:

Network Architecture TCP/IP Model

29

Need for a layered architecture

Predefined dependencies exists among the services which requires


establishing hierarchical relationships
Copyright 2013-2014, Infosys Limited

Confidential

30

Network Architecture
Overview Defines the design and implementation of computer networks
Has a layered approach which helps in
- Reducing the design complexity
- Shielding the implementation details of the services
Each layer provides services to the layer above
Different layers use different protocols
Corresponding layers in sender and receiver follow the same
protocol
Two popularly referenced architectures are,
- ISO OSI Reference Model
- TCP/IP Model

Copyright 2013-2014, Infosys Limited

Confidential

31

TCP/IP reference model

Application

Transport

Internet

Network Access

Copyright 2013-2014, Infosys Limited

Confidential

HTTP, SMTP, FTP, Telnet

TCP, UDP

Routing and delivery of data


across networks
IP, ICMP, DHCP, RIP
MAC Protocols: Ethernet
(CSMA/CD), CSMA/CA,
Token ring, Token Bus

32

TCP/IP layers Functions and Protocols


Application
layer
Transport
layer
Internet
layer
Network
Access layer

Allows access to network for communication


Important functions include domain to IP address translation, data
encryption and synchronization
Protocols include HTTP, FTP, SMTP etc.
Provide end to end communication
Important functions include defining level of service and reliability
Protocols include TCP, UDP, RTP etc.
Packs data into data packets known as IP datagrams which
contains source and destination IP addresses
Important functions include routing and congestion control
Protocols include IP, ICMP, ARP etc.
Provides details about how data is physically sent
Important functions include node to node delivery, error and flow
control
Protocols include Ethernet, token ring, RS-232C etc.

Copyright 2013-2014, Infosys Limited

Confidential

Under the hood:

IP Address

34

Internet Protocol Address


Overview A 4-byte addressing scheme used by the IP layer
Within a private or closed network, one can assign any IP address
Every Internet host must have a distinct IP address across the globe
It has two components
Network ID
Host ID

IP addresses are provided by ICANN to the ISPs which in turn


provide addresses to the end users
Due to shortage of IP addresses, there is need to switch from IP
version 4 (IPv4) to IP version 6 (IPv6)

Copyright 2013-2014, Infosys Limited

Confidential

35

IP address

Network ID

Host ID

Copyright 2013-2014, Infosys Limited

This component of an IP address


helps to uniquely identify a given
network

This component of an IP address


helps to identify a given computer on
a network identified by the previous
component

Confidential

36

IP address
IP version 4 (IPV4)

EXAMPLE: 130.195.128.25

NETWORK ID

z
HOST ID

1 0 0 0 0 0 1 0 1 1 0 0 0 0 1 1 1 0 0 0 0 0 0 0 0 0 0 1 1 0 0 1

130

195

Copyright 2013-2014, Infosys Limited

128

Confidential

25

37

IP Address
IP address of a machine or device in a network has to be unique under all
circumstances

Static address

IP Address, once assigned, is fixed for a device in a network


and it doesnt change
Used for servers, routers, printers, etc.
Allocated by the system administrators

Dynamic address

All devices are not connected to the network all the time
IP address for devices are allocated only when the devices
are connected to the network
IP addresses are limited and need to be managed efficiently
DHCP server is used to allocate an IP address to the
connected device

Guided Activity : Assignment 5


Copyright 2013-2014, Infosys Limited

Confidential

38

IP address - Types
STATIC IP CASE

Other
Computers
on Network.
Server

LAN

Network
administrator
ensures that a
Sys Adm
in Ensures
unique
address is
is assigned
that
IP IP
address
unique to a host
computer
for all nodes
Example: IP addresses of servers
IBM
Client
Compatible
computer
Static IP for LAN users

DHCP
server
LAN
1. Computer
boots up

Server

2. Another client

Dynamic IP for LAN users

Copyright 2013-2014, Infosys Limited

Confidential

39

Above the hood:

Web Fundamentals

40

Web
A system made up of hypertext documents interlinked to each other and
accessible through Internet

Hypertext
documents
A computer can access an information from web with the help of web
browser and Internet connection

Copyright 2013-2014, Infosys Limited

Confidential

41

Web fundamentals
Web Browser

Hyper Text
Transfer Protocol
(HTTP)

Retrieves and presents information resources available on


a local or remote computer
Browser uses http protocol by default
E.g. Internet Explorer, Mozilla Firefox, Google Chrome
Request-response protocol and Stateless (session state is
not tracked across requests)
Standardized (allows any HTTP client to communicate
with any HTTP server)

Uniform
Resource
Locator (URL)

Uniquely identifies a particular resource on the Internet


Contains protocol, host, port and path
E.g. http://www.infosys.com

Domain Name
System (DNS)

DNS server converts the domain names to IP addresses


E.g. www.infosys.com
216.251.50.51

Web Server

Understands HTTP protocol and is able to service


concurrent requests
E.g. Apache Tomcat

Copyright 2013-2014, Infosys Limited

Confidential

42

Working of a web server

DNS Server
(Local Network)

3. Cannot Resolve
Locally? Resolve from
other DNS

2. Translate DNS Name to


IP address
4. Returns IP Addr
202.68.33.47

The
Internet
Web Server
(Internet)
1. User Invokes URL
http://my.mydomain.com/te
st.html

my.mydomain.com
202.68.33.47

Web Browser
PC
Copyright 2013-2014, Infosys Limited

Confidential

43

Working of a web server

DNS Server
(Local Network)

3. Cannot Resolve
Locally? Resolve from
other DNS

2. Translate DNS Name 4.


toReturns IP Addr
IP address
202.68.33.47

The
Internet
Web Server
(Internet)
1. User Invokes URL
http://my.mydomain.com/te
st.html

my.mydomain.com
202.68.33.47

Web Browser
PC
Copyright 2013-2014, Infosys Limited

Confidential

Above the hood:

Web Content

45

Types of content
Static content
Content resides in a file
Author determines the
content at the time of
creation
Each request will return
exactly the same
content
Ex: HTML files, gif/jpeg
files, etc.

Dynamic content

Active content

Created on the fly


through execution of
predefined business
logic by a web server
upon a request to reflect
the current information
Content for the same
resource may vary for
each request
Ex: Account statement
page in Net banking
Requires more
processing power on the
server

Server returns
executable code as part
of the response
Browser executes the
program locally on the
client machine
Ex: JavaScript's, Java
Applets, Active-X
controls for IE
There is a potential
security risk

HTML is used to design and develop simple static web pages


Copyright 2013-2014, Infosys Limited

Confidential

46

Types of Content A Sample Web Page

Web Page
Static
Content

includes

Static
Dynamic

Dynamic
Content

Active

Active
Content
Guided Activity : Assignment 6
Copyright 2013-2014, Infosys Limited

Confidential

Introduction to HTML
Hyper Text Markup
Language

48

HTML
Overview HTML stands for Hyper Text Markup Language
It is used to design and develop Web Pages
Communication on the web happens through HTTP
HTML is
1.
2.
3.
4.
5.

A Simple mark up language (NOT a programming language)


Browser/Platform Independent (plain ASCII text format)
Not Case Sensitive
HTML is Interpreted by browser (NOT compiled)
A medium for Graphical User Interface (GUI)

Video Link
http://coursesweb.net/html/video-tutorials_t2 - HTML Document Structure

Copyright 2013-2014, Infosys Limited

Confidential

49

Structure of HTML page


Demo 1: Structure of HTML Document
<HTML>
<HEAD> <!-- Head Section -->
<TITLE>Title of the Web Page </TITLE>
</HEAD>
<BODY> <!-- Body Section -->
<!-- Contents on Web Page -->
Contents
</BODY>
</HTML>
An HTML file can be created by using a simple text editor viz notepad, text
pad, Eclipse IDE editor. HTML file must have an extension .htm or .html.
Copyright 2013-2014, Infosys Limited

Confidential

50

Building Blocks to create contents in HTML Page


Building Blocks
are

Formatting Tags
Lists
Links
Images
Tables
Forms
Character Entities

Copyright 2013-2014, Infosys Limited

Confidential

51

HTML Text Formatting Tags


<font>

Defines the font color, face and size

<br>

To insert a single line break (new line)

<i>

Displays the specified text in italics

<p>

Places the text in a new paragraph

<u>

Underlines the specified text

<hr>

Prints horizontal line

<b>

Specifies bold text

<h1>, <h2>, <h3>,


<h4>, <h5>, <h6>

Defines HTML Headings

Aligns text to center

<sub> and <sup>

To define subscripts and superscripts

<center>

Demo 2: Text Formatting Tags


Summary:
Text Formatting tags helps to define the presentation style of textual content for
better readability, look and feel.
To achieve consistency in formatting across pages, each page has to be
modified individually across pages which is tedious for large application.
The best way of achieving consistency is through style sheets.
Copyright 2013-2014, Infosys Limited

Confidential

52

Text Formatting using Cascading Style Sheets (CSS)


Demo 3: Text Formatting using Style Sheets

Style Properties are defined and placed in an external file and is saved
with extension .css
These files are then included with the HTML Documents as follows
Example: <link rel="stylesheet" href="../css/style.css" type="text/css" />
This way of including style properties to HTML is called as External Style
Sheets
Other ways of including CSS (Inline, Embedded) will be discussed later

HTML files provide structure to the content and CSS provides style
(formatting) to the content
Copyright 2013-2014, Infosys Limited

Confidential

53

Syntax for CSS


General Syntax:
selector {
property: value;
}

Example :
h3 {
font-family: Verdana;
color: #8598CC;
font-style: italic;
text-align: center;
}

selector refers to the HTML tag for which we need to apply the style
Example: h3
Any HTML tag can be a CSS selector
Example: h3,h4,h5,body,p etc.
property is the attribute of the html tag we need to modify
Example: font-family, color
Each attribute takes a value
Example: Verdana, #8598CC
Copyright 2013-2014, Infosys Limited

Confidential

54

Text formatting in CSS


font-family

Arial, Verdana, Monospace, .

font-style

Normal, italic, oblique

font-variant

normal, small-caps

font-size

x-small, small, medium, large

font-weight

normal, bold, bolder, light, x-large

CSS measurement units:


inches (in)

point size (pt)

centimeters (cm)

pixels (px)

millimeters (mm)
Demo 4: Text Formatting Tags

Copyright 2013-2014, Infosys Limited

Confidential

55

Container tags in CSS - <div>


<div> tag is used for creating logical divisions within a page. It defines a
generic container to set up tags as a group

Properties of div id contenttext


cascades into all the tags inside it.

Example:

In the above example <div> tag groups heading, list and link content
The id of <div> tag is contenttext specified inside <div> tag as follows :
<div id=contenttext>
All the properties defined for the contenttext in .css file is applicable to all the
Guided
Activity : Assignment
7
content existing within
the <div>(heading,
list and link)
Copyright 2013-2014, Infosys Limited

Confidential

56

Container tags in CSS - <span>


<span> is an inline element used to provide style properties to selective
content
Example:
<span id="EasyShopWord">EasyShop</span>
In the above example <span> tag provides style properties to
EasyShop word alone
The id of <span> is EasyShopWord
All the properties defined for the EasyShopWord in .css file is
applicable to EasyShop word alone

Demo 5: Div and Span

Copyright 2013-2014, Infosys Limited

Confidential

57

Defining IDs in CSS


IDs are unique identifiers for HTML tags which are used to specify the style
properties within the CSS file
In CSS files, IDs are defined by prefixing # with the ID names
Example: #contenttext {

border:1px solid;
border-color:#8598CC;
width: 580px;
padding:10px;
font-family:Arial;
margin-left:auto;
margin-right:auto;
}

#EasyShopWord{
font-family: Cursive;
color: #8598CC;
font-size:20px;
}

div is block level tag whereas span is an inline tag

Copyright 2013-2014, Infosys Limited

Confidential

58

Defining Classes in CSS


Classes are used to specify the style properties to HTML element s within the
CSS file
In CSS files, classes are defined by prefixing . with the ID names

.contenttext {
border:1px solid;
border-color:#8598CC;
width: 580px;
padding:10px;
font-family:Arial;
margin-left:auto;
margin-right:auto;
}

.EasyShopWord{
font-family: Cursive;
color: #8598CC;
font-size:20px;
}

In html file, classes are specified as follows :


<div align="left" class="contenttext">
Thanks for using EasyShop Manager. <br/>
Use IDs to apply style for content which occurs only once per page. Use classes to apply
style more than once per page
Copyright 2013-2014, Infosys Limited

Confidential

59

Chaining of selectors in CSS


It is possible to add tags within a div tag in HTML.

Example:
<div align="left" id="contenttext">

Usage of h4 tag inside


div tag

Thanks for using EasyShop Manager.<br/>


<h4>For any clarification you may contact anyone of us.</h4><br/><br/>
</div>
Chaining of tags is required to apply style properties to the tags within the div.

Here h4 is chained
with div id
contenttext

Example:
#contenttext h4{
font-size:12px;
font-family:Verdana;
color: #8898CC;
}

Demo 6: Chaining of Selectors


Copyright 2013-2014, Infosys Limited

Confidential

60

Chaining of selectors in CSS


Grouping: Elements may be grouped into a comma-separated list.
h1, h2, h3 { font-family: sans-serif }
Universal selector: The universal selector, written "*", matches the name of any
element type.
*.warning and .warning are equivalent
*#myid and #myid are equivalent

Type selectors : A type selector matches every instance of the element type in
the document tree.
h1 { font-family: sans-serif }

Copyright 2013-2014, Infosys Limited

Confidential

61

Chaining of selectors in CSS


Descendant selectors: A selectors to match an element that is the descendant
of another element in the document tree.
<H1>This headline is <EM>very</EM> important</H1>
h1 em { color: blue }

Child selectors: A child selector matches when an element is the child of some
element. A child selector is made up of two or more selectors separated by ">".
body > P { line-height: 1.3 }
Adjacent sibling selectors: F element immediately preceded by a sibling
element E
h1 + h2 { margin-top: -5mm }

Copyright 2013-2014, Infosys Limited

Confidential

62

Chaining of selectors in CSS


Pattern

Meaning

Matches any element

Matches an element of type E

EF

Matches any F element that is a descendant of an E

E>F

Matches any F element that is a child of an element E

E:first:-child

Matches element E when E is the first child of its parent.

E:link
E:Visited

Matches element E if E is the source anchor of a hyperlink of which the


target is not yet visited (:link) or already visited (:visited).

E:active
E:hover
E:focus

Matches E during certain user actions.

E+F

Matches any F element immediately preceded by a sibling element E.

DIV.warning

Language specific. (In HTML, the same as DIV[class~="warning"].)

E#myid

Matches any E element with ID equal to "myid".


Guided Activity: Assignment 8

Copyright 2013-2014, Infosys Limited

Confidential

63

Text Properties in CSS (Self Study)


word-spacing

measurement (px/cm)

letter-spacing

measurement (px/cm)

text-decoration

None, underline, overline, line-through

text-transform

none, capitalize, uppercase, lowercase

vertical-align
text-indent
text-align

Copyright 2013-2014, Infosys Limited

top, text-bottom, super, sub


measurement
left, right, center, justify

Confidential

64

Lists in HTML
Demo 7: Lists

<ol>

Defines the ordered list


Order can be numerical or
alphabetical

<ul>

Defines the unordered or bulleted


list

<dl>, <dt>
and <dd>

Define a description list

Copyright 2013-2014, Infosys Limited

Confidential

65

List Properties in CSS (Self Study)

list-style-type
list-style-image
list-styleposition

Copyright 2013-2014, Infosys Limited

disc, circle, square, decimal, lower-roman,


upper-roman, lower-alpha, upper-alpha

url(*.gif)

Inside, outside

Confidential

66

Links in HTML
Demo 8: Links

The following link opens CreateUser.html and name of the link is Add
User.
<a href="CreateUser.html">Add User</a>
The following link opens CreateUser.html in a new web page.
<a href="CreateUser.html" target=_blank >Add User</a>

Copyright 2013-2014, Infosys Limited

Confidential

67

Properties of Links in CSS


Links can be styled with any CSS property (e.g. color, font-family, background,
etc.).
In addition, links can be styled differently depending on what state they are in.
The four links states are:

a:link

a normal, unvisited link

a:visited

a link the user has visited

a:hover

a link when the user hover mouse pointer over it

a:active

a link the moment it is clicked

Copyright 2013-2014, Infosys Limited

Confidential

68

Embedding Images in HTML


<IMG> tag

SRC
BORDER

=url
=n

WIDTH

= n (in pixels)

HEIGHT

= n (in pixels)

ALT

= Alternate Text

Supports JPG, GIF and PNG image formats


ALT attribute was set to provide alternative text for browsers that did not display
images. ALT attribute can be used as a tool tip or placeholder information in
image-based browsers

Copyright 2013-2014, Infosys Limited

Confidential

69

Embedding Images in CSS


Demo 9: Images

#cartimage {
background-image:url(../images/Cart.jpg);
background-repeat:no-repeat;
float:right;
height:80px;
width:80px;
Properties of Cart
margin-right:20px;
Image defined in
margin-top:20px;
style.css
}

Using Cart Image in .html

Guided Activity: Assignment 9


Copyright 2013-2014, Infosys Limited

Confidential

<div id="cartimage">
</div>

70

Summary
Computer networks
Types of Network
Network Topology
Interconnecting Devices
TCP/IP Architecture
Web Fundamentals
HTML and CSS
Text Formatting Tags
<div> and <span> tag
Lists
Links
Images

Copyright 2013-2014, Infosys Limited

Confidential

71

Self Study
Study Material - Computer Networks and Web Fundamentals
Videos in Portal- http://coursesweb.net/html/video-tutorials_t2
Computer Networks
Network Topologies
Connecting Devices
TCP/IP Model
IP Address
Types of Web content

Links - Computer Networks and Web Fundamentals


http://compnetworking.about.com/od/basicnetworkingconcepts/
http://compnetworking.about.com/od/networkdesign/a/topologies.htm
http://compnetworking.about.com/od/workingwithipaddresses/l/blip.htm
http://docwiki.cisco.com/wiki/Internetworking_Basics

Copyright 2013-2014, Infosys Limited

Confidential

72

Self Study
Links - HTMLHTML

http://www.w3schools.com/
http://www.w3.org/
http://www.w3.org/wiki/HTML/Elements/

Copyright 2013-2014, Infosys Limited

Confidential

Thank You

2013 Infosys Limited, Bangalore, India. All Rights Reserved. Infosys believes the information in this document is accurate as of its publication date; such information is subject to change
without notice. Infosys acknowledges the proprietary rights of other companies to the trademarks, product names and such other intellectual property rights mentioned in this document. Except
as expressly permitted, neither this documentation nor any part of it may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, printing,
photocopying, recording or otherwise, without the prior permission of Infosys Limited and/ or any named intellectual property rights holders under this document.