1 Chapter -1

 An Overview of Internet and the Web

03/16/2025
 What is INTERNET?
2  The Internet is a collection of computers or networking devices connected
together which have communication between each other.
 Connection of computers that done by sharing their database.
 Term “Internet” means collection of interconnected networks.
 Network of connected computers.
 It is a cooperative effort governed by standards and rules.
 It is a big TCP/IP network connecting computers all over the world which
uses TCP/IP (Transmission Control Protocol/Internet Protocol) to
communicate and that uses client/server architecture.
 Has a decentralized design.
 Internet made up of thousands of networks worldwide.

03/16/2025
 The Internet Cont…
3
 It contains three physical components
 Computer (Client / Server)
 Networks (communication channels)
 Service
 Computers on the Internet can be classified as either
 Client computer:- Any computer on the network that requests services from another computer on
the network.
 Server computer:- Any computer that receives requests from client computers, processes and
sends the output.
 Principal activities that done on the Internet
 Web
 Email
 FTP
 Chat
03/16/2025
 Remote access
4 Pros and cons of internet
 Advantages
Disadvantages
 sharing of data - virus treat
 Enhanced communication - theft personal info
 Global audience - spamming
 Availability of information - pronography
 Outsourcing - spread of wrong info
 Online job portal - internet addiction
 Social networking - information
overloading
03/16/2025
 Provide entertainment
5 Basic concepts in using internet
 Web page: single page of website
 Website: collection web pages
 Home page: first page in the website
 www: collection of websites /hypertext languages or multimedia
 Hyper text link: used to visit d/t pages of website
 Uploading: sending information from client computer to server or
other web
 Downloading: receiving information from web to our computer
 Web browser: software used to access hyper text information
 ISP
 webserver 03/16/2025
 Cont…

6
Internet Providers:
 Research and Educational Institutions.
 Government and Military Entities.
 Businesses institute.
 Private Organizations.
 Commercial Providers.

Internet Protocols
 Email (Simple Mail Transport Protocol).
 Telnet (Login to remote host computer).
 FTP (File Transfer Protocol) - transfers files between server and client.
 HTTP (Hyper Text Transfer Protocol).

03/16/2025
7 protocols

 Are rules /standards that used to govern the transfer of data in

network architecture

 Govern communications of different devices on the internet

TCP/IP: Caries the actual way of transmission of data

HTTP: Controls the transmission of web server to the web site

FTP: For File transfer

SMTP: Control the transmission of mail between sender and

reciever
03/16/2025
8 World Wide Web

 was created in1990 by the British CERN physicist Tim

Berners-Lee.
 Also known as the web , is an information system
where documents and other web resources are
identified by by URLs, linked by hyperlinks and
accessible over the internet.
 Resources transferred via HTTP

03/16/2025
 9
websites
 A collection of publicity accessible, interlinked web pages that share a
single domian name.

 A website is hosted on at least one web server, accessible via a

network such as the Internet or a private local area network through an
Internet address known as a uniform resource locator (URL).

 Web pages, which are the building blocks of websites, are documents,
typically written in plain text interspersed with formatting instructions
of Hypertext Markup Language (HTML, XHTM).

03/16/2025
 Cont…
10 Documents in the Web
The documents in the WWW can be grouped into three broad categories
based on the time the contents of the document are determined.
 Static Documents:
- simple it refers to static HTML documents
 Dynamic Documents:
- referred to server-side dynamic documents.
- e.g. Dynamic HTML documents,
 Active Documents:
- sometimes referred as client-side dynamic documents
- e.g. Dynamic HTML documents
it is changed based on time.
03/16/2025
 1.3 Web Server
11
 Web sever is a program that waits for requests from the web browser.
 Is the software (not a computer itself) that allows a computers to
communicate but it is common to use the word ‘Server’ to refers to the
computers.
 A software program or server computer equipped to offer World Wide
Web access.
 Allow internet user to serve content over Internet using (HTML).
 Accepts requests from browsers like Netscape and Internet Explorer and
then returns the appropriate HTML documents.
 It is a computer with special software to host web pages and web
applications.

03/16/2025
 Cont…
12  Web sever provides four major functions
 Serving web pages
 Running gateway programs (CGI) and returning output
 Controlling access to the server
 Monitoring and logging all access
 Example of popular server are
 Apache
 IIS (Microsoft Internet Information Service)
Netscape Web server, …

03/16/2025
 Cont...
13 Web Server and Browser Interaction
A Web Browser acts as an interface between the user and the Web server
and it carries out the following on behalf of the user
 Contacts a web server
 Sends a request for information
 Receives the information and
 Displays it on the user's computer
How Does a Web Server Accept Connections?
 Accept network connections from browsers
 Retrieve content from disk
 Run local CGI programs
 Transmit data back to clients be as fast as possible
03/16/2025
 Support multi-threading and multi-processing
 Internet Domain Names:
14 -DNS
 The Domain Name System:
 is a hierarchy of names.
 Is "top-level domain names" (TLDs).
 Are TLDs (EDU, COM, NET, ORG, GOV, MIL, and INT), and
 the two letter country codes

03/16/2025
 DNS:
15
 Internet domain names come in four main types
1. top-level domains,
2. second-level domains,
3. third-level domains, and
4. country domains.
 Internet domain names are an identifiers we use to refer to hosts on the
Internet.

03/16/2025
 Top-level domains
16
TLD Usage
.bitnet Used for computers on the BITNET network.
.com Originally stood for "commercial" to indicate a site
used for commercial purposes, but it has since
become the most well-known top-level Internet
domain, and is now used for any kind of site.
.int Used by "International" sites, usually NATO sites.
.edu Used for educational institutions like universities.
.gov Used for Government sites.
.mil Used for Military sites.
.net Originally intended for sites related to the Internet
itself, but now used for a wide variety of sites.
.org Originally intended for non-commercial
"organizations", but now used for a wide variety of
03/16/2025

sites. Was managed by the Internet Society for

17 Third-level domains.
 Third-level domains can be used to set up individual
domains for specific purposes, such as a domain for
web access and one for mail, or a separate site for a
special purpose:
 www.livinginternet.com
 mail.livinginternet.com
 rareorchids.livinginternet.com

03/16/2025
 Country Domains
18  A few countries and example domains are shown below.
 Each country in the world has its own top-level Internet domain with a unique alphabetic designation.

Top-Level Country Example site

Domain
.ae United Arab http://www.abudhabi.ae/
Emirates
.at Austria http://www.austria.at/
.au Australia http://www.morning.com.a
u/
.bb Barbados http://www.barbados.gov.b
b/
.bm Bermuda http://www.kbb.bm/
.br Brazil http://home.iis.com.br/
.ca Canada http://www.canoe.ca/
.ch Switzerland http://www.badminton.ch
.cl Chile http://www.santiago.cl/
.us United States http://www.co.maui.hi.us/ 03/16/2025

.et Ethiopia http://www.aku.edu.et

19

Uniform Resource Locators (URLs)

03/16/2025
20

URL Defined
• Is a standard way developed to specify the location
of a resource available electronically.

03/16/2025
21
What are URLs?
• URL used to direct both people and software
applications to a variety of information, available
from a number of different Internet protocols.
• In short, a URL is a very convenient and succinct
way to direct people to a file or other electronic
resource.
• A URL is like your complete mailing address.

03/16/2025
22

Scheme Dependent Information

<scheme>:<scheme-dependent-information>

– This information is detailed with each scheme

– Most schemes include the:
– Machine making the file available
– "Path" to that file
– Example (for HTTP):
Scheme http://www.7sport.net/7sport/index.htm

Machine Path

03/16/2025
23

URL Example (explained)

Scheme http://www.7sport.net/7sport/index.htm

Machine Path
• http is the scheme
hyper text transfer protocol
• two slashes (//) separate the scheme from the
machine/domain name
• www.7sport.net is the machine/domain name
• single slash (/) separates the name from the path
• Finally 7sport/index.htm is the path.
03/16/2025
24

URL Example (explained)

Scheme http://www.7sport.net/7sport/

Machine Path
• sometimes the path will end in a slash (/)
• this indicates that the URL is not pointing to a
specific file
• in this case the server returns the "default" page
– homepage.html
– home.html
– welcome.html
– default.html
03/16/2025
25

HTTP & FTP General Formats

scheme://machine.domain/full-path-of-file

– Examples:
– http://www.w3schools.com/html/html_forms.asp
(Hyper Text Transfer Protocol)
– ftp://garbo.uwasa.fi/pc/doc-net/
(File Transfer Protocol)

03/16/2025
26

HTTP URL Example (explained)

Scheme http://www.w3schools.com/html/html_forms.asp

Machine/Domain Name Path

• http is the scheme
hyper text transfer protocol
• two slashes (//) separate the scheme from the
machine/domain name
• www.w3schools.com is the machine/domain name
• single slash (/) separates the name from the path
• Finally html/html_forms.asp is the path.
03/16/2025
27
Troubleshooting URLs
Reasons for not being able to access URLs:
– the remote machine refuses the connection
– the site is very busy (e.g. peak hours of use)
– you have misspelled the URL
– the file was moved
– if all else fails you can try looking up the hierarchy by
sequentially removing the file name first, and then the last
directory in the path.
03/16/2025
28

Hyper Text Transfer Protocol (HTTP)

http://<host>:<port>/<path>?<searchpart>
– the host is the Internet address of the WWW server
– the port is the port number to connect to
(generally omitted along with the colon :)
(defaults to standard "80")
– path tells the server which file you want
(if file name is omitted you want the "home page")
– the searchpart may be used to pass information to the
server (generally omitted, along with the question
mark ?)
03/16/2025
29

HTTP URL Detailed Example

Scheme http://www.7sport.net:80/7sport/index.htm

Host Port Path

• http is the scheme

• www.7sport.net is the host name
• :80 is the port (it can be omitted)
• Finally 7sport/index.htm is the path

03/16/2025
30

Another HTTP Example

Scheme http://www.google.co.uk:80/search?hl=en&q=Football

Host Port Path Search Part

• http is the scheme

• www.google.co.uk is the host name
• :80 is the port (it can be omitted)
• search is the path
• ?hl=en&q=Football is the search part
– hl=en (search language is English)
– q=Football (search keyword is Football)
03/16/2025
31

Another HTTP Example

Scheme http://www.google.co.uk:80/search?hl=en&q=Football

Host Port Path Search Part

• http is the scheme

• www.google.co.uk is the host name
• :80 is the port (it can be omitted)
• search is the path
• ?hl=en&q=Football is the search part
– hl=en (search language is English)
– q=Football (search keyword is Football)
03/16/2025
32
DNS

Summary TLD SLD TLD Country

Scheme http://www.google.co.uk:80/search?hl=en&q=Football

Host Port Path Search Part

03/16/2025
33

Chapter two
Web Page Development Using Html

Fana Health, Bussiness and Technology College 03/16/2025

34
Web Design Fundamentals

 Technical definitions:
 A webpage is a single HTML document
 A website is a collection of related Web Pages
 Designing a good website requires more than just putting together a few pages.
 Layout of web pages is very important
 Poor layout makes for -
 Difficult navigation
 Hard to locate information on page
 Visually unappealing
woldia university computer science department 03/16/2025
35 Some guidelines
Use the appropriate balance of images, color, and space.
◦ Too many images on one page (or large images) will be slow to load.

Don’t have text wall to wall. Leave ample white space.

Use color judiciously (in other words, don’t go overboard
with color).
◦ Just because you can make every cell in a table a different color doesn’t mean you
have to.
◦ A little color in the form of bullets, etc is fine.

White or a light pastel is best for the background color.

Avoid Gray.

03/16/2025
36 Cont…
 Have a common look and feel for each page in a web site.
 There should be a sense of uniformity.
 Perhaps there is a common graphical element and color on each page
 Give the page a title (header).
 The title shows up on the top line of the web site when viewed in a web browser.
 Having no title indicates the designer doesn’t know beans about web design.

03/16/2025
37 Cont….
Utilize a common scheme for page navigation.
◦ Once you get on a page, there should be links back to the home page or other pages on the web site.
◦ example
◦ No links back to a home page indicates lack of skill in web design.

◦ A page with no link to the home page is known as an orphan page

Have a method for contacting the author or owner of the web page.
Don’t use Under Construction signs.
◦ This implies you are not on the ball.
◦ And good web designers are always making changes, so a page should really always be under
construction.

03/16/2025
38 Some Principles

 Just because you can do it, doesn’t mean you should do it.

 Know your audience and have a clear goal for your Web site.

 Don’t post an “under construction” graphic after you’ve published your

URL

03/16/2025
39 Steps to a well designed Web site

 Have a goal
 Target your audience
 Create a plan
 Select a Web service provider
 Try it out
 Maintain it

03/16/2025
Have
40
a goal for your web site

 What information do you need or want to provide?

 What were you put on earth to accomplish?
 review your mission statement
 Do you want your web site to accomplish all or some of those things?
 the more goals, the more difficult the task becomes

03/16/2025
Identify
41
your target audience
 Who is the information for?
 Do you have more than one audience?
 Can you serve them all with one Web site?
 What are the information needs of your audience?
 What are their habits, characteristics, culture, technical
capabilities, etc.
 Are they likely to start with the Web or another information
source?

03/16/2025
42
Identify your target audience(cont…)

Audience Analysis
 Who are you trying to reach?
◦ Age
◦Language and Culture
◦Level of education
◦Access to the Web (High-speed? Dial-in?)
◦Familiarity with the Web
◦Barriers to access?
03/16/2025
43 Identify your target audience(cont…)

What are they looking for at your site?

◦ Information
◦ Services
◦Community

03/16/2025
Plan
44
it out
 Identify information you already provide your audience.
 Identify information that you haven’t, but would like to provide your audience.
 Identify the sources of information you want to provide through your Web site.
 Prepare that information for the web by collecting it and converting it.

 Develop a vision for your Web site and storyboard it before construction begins.
 Share your vision and storyboard with your colleagues and your bosses.
 Estimate initial times and costs for construction.
 Decide on the software/hardware tools necessary to construct your site.

03/16/2025
Select
45
a Web service provider
 Coordinate the method for publishing and updating your Web pages.
 mail files (transfer email messages from client to server )
 FTP files(allow users to share files back and forth with one another over internet connection )
 Know your root address (domain name).
 Will you have a need for scripting and database interaction?

03/16/2025
46 Try it out: Optimize it for your audience

 Test it in-house.
 Test it on a sample audience.
 Test it on as many different computers , monitors and
browsers as possible. Why?
 Test it using various Internet connections.
 Modems
 Direct connects

03/16/2025
47 Make your site well-organized

 Decide how you want to organize your information

based on your users and what you know about
them
 Ways to organize your site:
 by department or organizational chart
 by audience type
 marketing
 by subject
03/16/2025
48 Make your site attractive
 Choose simple colors that compliment each other & work on most web browsers.
 Keep graphics less than 20,000 Bytes
(20 kilobytes) to make them download reasonably on a home modem.
 Keep animated gifs to a minimum.
 Use graphics that compliment your image.

03/16/2025
49 Make your site useful

 If you are unique, you’re already useful!

 If you are not unique, how do you differ from similar Web
sites?
 Is your content unique?
 Is your approach unique?
 Is your audience unique?
 Are you more up to date?
 Are you better organized?
 Are you more comprehensive?
03/16/2025
50 Keep your site up-to-date

 In an organization, make this part of someone’s job. Pay them to do it. It’s worth it.
 If a person is currently the “documentation person” or the “flier person,” consider
that person to be your Webmaster.

03/16/2025
51 Some more tips

 What to do,
 why to do it on the Web
 Before we get started…
 What sites are you working on?
 What’s the purpose of your site?
 What audience(s) are you trying to reach?
 Site Planning
 Determine site goals
 Analyze your audience
 Analyze the “competition”
 Know your own abilities and resources
 Map the current site
 Design your new site

03/16/2025
52 Usable Web pages

Effective:
 enable user to find required information
Efficient:
 enable information to be found quickly without additional effort
Satisfying:
 motivate user to come again and give appropriate image
To create a usable site it is essential to take a user-centered
approach to design.

03/16/2025
53 usability testing
 The testers should…
 Reflect your audience demographics
 Be (relatively) un coached
 The test should…
 Have clearly defined goals
 Be observed in some way
 Ask for tester feedback
 Notes
 Post-test interviews
03/16/2025
54

Hypertext Markup Language

(HTML)

What is HTML??
03/16/2025
55 What is HTML??

An open standard

◦ Developed by the World Wide Web Consortium (W3C)

A language used to format text and objects (such as images)

to be displayed in a Web browser.
◦ The display language of a browser

Static—it is only display.

◦ Use other technologies to add dynamic function like:

 Client-side (browser) scripting languages (JavaScript)

 Server-side programs (PHP, Java servlets)
03/16/2025
56 HTML (Cont…)

The user interface language of the Web.

An HTML file is a text file containing small markup tags.
◦ The markup tags tell the Web browser how to display the page.

 Appearance
 Layout
 Content(can’t enforce an exact look)
An HTML file must have an htm or html file extension.
 Plain-text documents can be created using any text editor.

Text mixed with markup tags

◦ Tags enclosed in angle brackets
e.g., <H1>introduction</H1>

03/16/2025
57
HTML (Cont…)

What is a markup language?

 To describe how the text should be displayed / printed.

 One where we can embed special tags or formatting commands in the text.

 HTML is a markup language

 Special formatting codes (called tags) to adjust fonts, create bulleted lists, create forms, display images,
create tables, etc.

03/16/2025
58 HTML (Cont…)

 Simple, purist design principles

 HTML describes the logical structure of a document
 Browsers are free to interpret tags differently
 HTML is a lightweight file format
 Size of file containing just ”Hello World!”:
 Postscript: 11,274 Bytes
 MS Word: 19,456 bytes
 PDF: 4,915 bytes
 HTML :28 bytes

03/16/2025
59 Why do we use HTML?

 Light
◦ Files are flat text and very small
◦ Quickly transferred over a network
 Easy to learn
◦ Smaller and less complex than other markup languages
◦ Less tags (instructions)
 Open standard
◦ Not proprietary
◦ Works with all platforms, all browsers, and all Web servers
 The rise of Internet technologies

03/16/2025
60 Some Points

 Most of the tags belong to the first category.

<tag-name> …… directives …… </tag-name>
 Tags are case insensitive
<HEAD>, <Head> and <head> are all equivalent.
 Tags may be nested
<html> <head>…</head> <body>…</body> </html>
 Most browsers have a VIEW SOURCE menu option.
◦ The HTML version of the page can be displayed.

03/16/2025
HTML Document Structure
61
 A HTML document consists of two major portions:
 Head
 Contains information about the document, like the title and “meta” data describing the contents.
 Body
 Contains the actual matter of the document.
 Gets displayed within the browser window.

<!DOCTYPE HTML>
<html>
<head>
(Header: information about the page)
</head>
<body>
(Body: Web page content)
</body>
</html> 03/16/2025
62 Basic HTML syntax
HTML syntax
 Tags
– Instructions for the browser
-Tags act like containers. They tell you something about the information that lies between their
opening and closing tags.
<tag> Some text</tag>
 Nesting
– Close tags in the opposite order in which you opened them.
<tag1><tag2>Some text</tag2></tag1>
 Attributes
– Specify attributes to use non-default behavior
<tag attribute=“value”>Text </tag>

03/16/2025
63
HTML Tags
 HTML
 <HTML> …… </HTML>

 These tags begin and end an HTML document

 Used to bracket an entire HTML document.
 Optional for most browsers.
 Html uses elements to describe the structure of pages
 Attributes: tell us more about elements
 Attributes provide additional information about the contents of an element. They
appear on the opening tag of the element and are made up of two parts: a name
and a value, separated by an equals sign.
 lang = language code
 Language code indicates the primary language of the document.
03/16/2025
 en – English
64 HTML Tags (cont.…)

 The attribute name indicates what kind of

extra information you are supplying about the
element's content. It should be written in
lowercase.
the value is the information or setting for the
attribute. It should be placed in double quotes.
Different attributes can have different values.
 Here an attribute called Lang is used to
indicate the language used in this element.
The value of this attribute on this page
specifies it is in US English.

03/16/2025
65 HTML Tags (cont…)

 HEAD
 <HEAD >……</HEAD>
 These tags are in the beginning of the document.
 Important information is stored in-between these tags
including: title, meta-data, styles, and programming scripts.
 Used to provide information about a web page.
 Nests within itself other tags like
<base>, <meta> and <title>.

03/16/2025
66 HTML Tags (cont.…)
<base>
◦Attribute: href=url
◦Specifies the base pathname for all relative URLs in
the document.
◦No end tag.
<meta>
◦Used to provide information about a document.
◦It can be used to define the character set,
◦Keywords or descriptions to aid search engines.
◦example 03/16/2025
67 The use of meta tag

03/16/2025
68 HTML Tags (cont…)
 TITLE
 <TITLE>……</TITLE>
 These tags are in-between the HEAD tags and contain the text that
appears in the title of the webpage.
 Usually appears on the title bar of the browser window.
BODY

◦ <BODY>…..</BODY>
◦ As you may have guessed, the body tags contain all the text in the body of the
document.
◦ Used to bracket the body of a HTML document.
◦ Attributes:
 background=url specifies an image file to be used as tiling background.
 bgcolor=color Sets the background color of the document.
03/16/2025
 text=color Sets the default color for the normal text in the document.
HTML Tags (cont…)
69

 alink=color Sets the color of active links.

 link=color Sets the default color for all the
links in a document.
 vlink=color Sets the color for the
visited links.


03/16/2025
70
Text Formatting in HTML
Paragraphs and Headings
 <Hn> ……. </Hn>
◦ Used to generate headings, 1 ≤ n ≤ 6.
◦ Six different levels of headings.
 <H1> is the largest, <H6> is the smallest.
 <P>
◦ Paragraph marker, used to separate text into paragraphs.
◦ End tag </P> is optional if it is only one paragraph.
◦ A series of paragraph tags <p><p>…<p> with no intervening text is treated as a single <p>.

03/16/2025
71 Text Formatting in HTML(cont…)

 <BR>
 Used to indicate that the text following <BR> should
begin on the next line.
 The amount of line spacing is less than that of a <P> break.
 Example:
This is the first line. <br>
This is the second line. <br>
This is the third.
03/16/2025
72
Text Formatting in HTML(cont…)
 <HR>
 Produces a horizontal line, which can be used to delimit
sections.
 Length of the line can be specified.
 Examples:
<hr>
<hr size=“20”> [ no shade option possible ]
<hr width=“75%”>
<hr align=“right” width=120>
 Across full width of browser, 20 pixels thick, 75% of available
page width, and 120 pixels right-justified.
03/16/2025
73
Text Formatting in HTML(cont…)
 <address> ……. </address>
 Supplies the contact information of the author.
 Generally formatted in italics, with a line break above and below.
 Example
<address>
Ato getachew worku <br>
Dept. of computer science<br>
woldia University <br>
Email: [email protected]
</address>

03/16/2025
74
Appearance of Text
 <b> ……. </b>
 Displays the enclosed text in bold.
 <i> ……. </i>
 Displays the enclosed text in italics.
 <cite> ……. </cite>
 Tells the browser that this is a citation. Usually displayed
in italics.
 Example
 <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

03/16/2025
75
Appearance of Text (cont.….)
 <pre> ……. </pre>
 Allows browser to display carefully laid out text.
 Used to display program listings.
 Example:
<pre>
main()
{ int i, j;
abc ();
} </pre>

03/16/2025
76
Appearance of Text (cont.….)
 _…….
 Displays the enclosed text as subscript.

 ^…….

 Displays the enclosed text as superscript.

 <font> ……. </font>

 Specifies the style of the enclosed text.
 Attributes: color = color name

 face = typeface
 size = value [1 to 7; 3 is the default]

03/16/2025
77 Appearance of Text (cont.….)

 <center> ……. </center>

 Centers the enclosed elements horizontally on the page.
 <P align=option> ……. </P>
 Used to align a paragraph.
 Option can be left, right or center.

03/16/2025
78
Summary

 HTML pages are text documents.

 HTML uses tags (characters that sit inside angled brackets) to give
the information they surround special meaning.
 Tags are often referred to as elements.
 Tags usually come in pairs. The opening tag denotes the start of a
piece of content; the closing tag denotes the end.
 Opening tags can carry attributes, which tell us more about the
content of that element.
 Attributes require a name and a value.
 To learn HTML you need to know what tags are available for you to
use, what they do, and where they can go.
03/16/2025
 79

79

FANA BUSSINESS,HEALTH & TECHNOLOGY

COLLEGE
DEPARTMENT OF IT

Internet Programming
Compiled by: SIMENEW SH.
Email: [email protected]
80

Cascading Style Sheet (CSS)

 Overview on CSS
81
 are a way to control the look and feel of your HTML documents in an organized and efficient
manner.
 The principle of Cascading Style Sheets (CSS) has roots in Standardized Generalized Markup
Language (SGML) from the 1980s.
 Its goals are to create a consistent look across many web-pages and to separate structure
from presentation so you can provide different style sheets for printing, browsing, or other
scenarios
 With CSS you will be able to:
 Add new looks to your old HTML
 Completely restyle a web site with only a few changes to your CSS code
 Use the "style" you create on any webpage you wish!
 82 Overview…
 Cascading style sheets provide a means to apply a presentation to an HTML structure by defining
how HTML elements are displayed.
 By using CSS, you can set background and fore-ground colors, margins, borders, fonts, positions,
and much more. You have creative control of the HTML elements, so you can decide what the
elements look like and where they display on the screen.
 A style is a rule that describes how to format a specific part of an HTML document.
 A style sheet is a set of style rules.
 83 Overview…
 You can create
 a style and apply it to many elements based on a selector.
 A style and use a selector to locate and select elements based on tag name, class name, ID, and more.
 a style that works with images, and you can create a style that works only with hyperlinks.
 a named style that you can apply to any element.
 “ the reusability is powerful”
 84 Defining CSS
 CSS code is not written the same way as HTML code is. This makes sense because CSS is not
HTML, but rather a way of manipulating existing HTML.
 A style rule, or style, is composed of two parts:
 the selector, which locates the elements in the HTML document that will be styled, and
 the declaration block, which contains the formatting instructions (declarations).
 A declaration comprises
 a CSS property,
 followed by a colon,
 followed by a value.
 Multiple declarations are always separated with a semicolon.
 85 Defining CSS…
 General CSS Format:
“Selector" { declaration;}

" selector" { "CSS Property" : "Value" ; }

body { background-color: white; color: gray; }

 HTML element we wanted to manipulate:
body{ : ; }
 Then we chose the CSS attribute color.
body {background-color ; }
 Next we choose the font color to be white. –
body {background-color : white; }
86 Defining CSS…

CSS selectors
 are the heart and soul of CSS.
 They define which HTML elements you are going to be manipulating with CSS
code and
 The selector name creates a direct relationship with the HTML tag you want to
edit.
Example:
 If you wanted to change the way a paragraph tag behaved, the CSS code would
look like:
p { PROPERTY: VALUE }
 The above example is a template that you can use whenever you are
manipulating the paragraph HTML element
 87 Creating CSS
 Cascading Style Sheets come in three flavors:
 internal,
 external, and
 inline.
Creating an inline style
 All elements have a global attribute called style that can be used to provide an inline style.
 An inline style is defined on the element to which you wish to add styling,
 don’t need a selector; just need to specify the declaration block.
 The following is an example of an inline style on the <body> element that sets the background color to
white and the font color to gray.
 <body style='background-color: white; color: gray;'>
 <body
</body> style='background-color: white; color: gray;'>
….
</body>
 Inline CSS…
88
 In the example, you don’t need an external style sheet because you defined the style on the
actual <body> element.
 You should try to avoid this technique; it violates the primary goal of separation between
structure and presentation
 doesn’t create any reusability because you will need to copy this style to each HTML document
you add to your application.
 An advantage of using an inline style is

 it always overrides styles that are defined else-where because

the inline styles are specific to the element on which the inline
style is defined.
 This specificity can solve isolated problems when a style is
applied globally in an external style sheet, but one element
needs to be styled differently.
 89 Creating an embedded style
 Instead of creating inline styles by using the global style attribute, you can uses the <style>
element to create an embedded (internal) style sheet within your HTML document.
 use CSS selectors to assign the style definitions to elements on the page.
 embedded style is located within the <head> element
 Place the CSS Code between <style> and </style>
 <html>
<head>
90
<style>
body { background-color: blue; }
p { color: white; }
</style>
</head>
<body>
<h2>Internal CSS</h2>
<p>This page uses internal CSS. Using the style tag we are able to modify
the appearance of HTML elements.</p>
</body>
</html>

 it does not provide file separation.

 It provides reuse within the files, but it does not promote reuse across HTML documents.
 use this approach when you want to have a single, stand-alone HTML document that contains
everything needed to render.
 91 Creating an external style sheet
 Instead of creating the same embedded styles in every HTML document, the best approach is to
create an external style sheet file that can be linked to all your pages.
 External CSS is a file that contains only CSS code and is saved with a ".css" file extension.
 This CSS file is then referenced in your HTML using the <link> element instead of <style>.
 Consider the example bellow
 Test.css
 Test.html
 External CSS…
92
Test.css
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
In example test.html,
Test.html  the <link> element contains the
<html> rel attribute, which specifies the
<head> rela-tionship between the current
<link rel="stylesheet" type="text/css" HTML document and the external
href="test.css" /> file as a style sheet.
</head>  The type attribute specifies the
<body> MIME type of the external file as
<h3> A White Header </h3> a text-based cascading style
<p> This paragraph has a blue font. sheet.
The background color of this page is
gray because we changed it with CSS! </p>  The href attribute specifies the
</body> relative location of the external
</html> CSS file, which is the test.css file
 93 External CSS…
Why use external CSS?
 Using an external style sheet is considered the best way to implement your styles.
 It keeps your website design and content separate.
 It's much easier to reuse CSS code if you have it in a separate file.
 Instead of typing the same CSS code on every web page, simply have many pages refer to a
single CSS file with the "link" tag.
 drastic changes can be achieved to web pages with just a few changes in a single CSS file.
 its possible to link many external style sheets to an HTML document.
 94 Creating an id selector
 An id selector is based on the id of the element.
 To set the style on a single button, you can assign an id to the button and then specify the id as
the selector, prefixed with the hash (#) symbol.
 The following example sets the style on an element whose id is btnSave.

• In this example, it doesn’t matter which type

#btnSave { of element is being accessed; all that
background-color: white; matters is that the id is btnSave.
color: gray; • across webpages, this sets the style of any
} element whose id is btnSave.
• Because the id must be unique across the
HTML document, using this approach to set
a style limits the reusability on a page
 95 Creating a class selector
 A class selector is a style with a class name of your choice, prefixed with the period (.) symbol.
 This is also called a named style.
 The class name can be assigned to any element through the class attribute.
 In the following example, a style is created with a class name of myStyle.

.myStyle { This style won’t apply to any elements until

background-color: white; you specify the class name by using the class
color: gray; attribute
}
 class selector …
96
DOCTYPE html>
html>
head> <title></title>
ink rel='stylesheet' type='text/css' href='Content/default.css' />
head>
body>
nput id='txtName' name='txtName' type='text' class='myStyle' />
button id='btnOk' class='myStyle'>Ok</button>
button id='btnSave'>Save</button>
button id='btnCancel' class='myStyle'>Cancel</button>
body>
 In this example, the class attribute specifies the myStyle style on the text box and two of the
html>buttons.
 Named styles promote reuse because they can be used on any element as needed.
 Class selector…
97
p{ color: red; font-size: 20px; } <html>
p.test1{ color: blue; } <head><style>……..</ style ></head>
p.test2{ font-size: 12px; } <body>
<p>This is a normal paragraph.</p>
<p class="test1">This is a paragraph that uses the p.test1 CSS
code!</p>
Output <p class="test2">This is a paragraph that uses the p.test2 CSS
code!</p>
……

 CSS code in classes will override the general CSS code for that element.
 In the above example p.test1 overrides the style defined for the p p{ color: red; font-size:
20px; }
 98 Using the universal selector
 If you want to apply a style to every element, you can use the asterisk (*) symbol.
 The following example applies the style to every element in the HTML document.

*{
 You should avoid using the universal selector because of the performance cost.
background-color: white;
color: gray;
}
 99 Grouping selectors
 You can group selectors when you will be applying the same style by separating each selector
with a comma.

Button, p {
background-color: white;
color: gray;
}
100

CSS properties
Measurements used for positioning objects
101

 px stands for pixels

 in inches
 mm millimeters
 cm centimeters
 Background Properties
102
 CSS background properties are used to define the background
effects of an element
 CSS properties used for background effects:
 background-color: color
 background-image: url(url)
 Sets the background image for an element
 background-repeat: repeat_type {repeat, repeat-x,
repeat-y, no-repeat}
 background-attachment: attachment_type {scroll,
fixed}
 Sets whether a background image is fixed or scrolls with the rest of the
page (default: scroll)
 Background…
103

Background Color
 The background-color property specifies the background color of an element.
 The background color of a page is defined in the body selector:
 body {background-color:#b0c4de;}
 With CSS, a color is most often specified by:
 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"
 a color name - like "red"

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
 Background…
104

Background Image
 The background-image property specifies an image to use as the background of an element.
 By default, the image is repeated so it covers the entire element.
 The background image for a page can be set like this:

body {background-image:url(‘astu.jpg');}
 Background…
105
 Background Image - Repeat Horizontally or Vertically
 By default, the background-image property repeats an image
both horizontally and vertically.

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
 Background…
106
 Background Image – Set position and no-repeat
 The position of the image is specified by the background-
position property:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
 Background…
107
 Background - Shorthand property
 To shorten the code, it is also possible to specify all the
properties in one single property. This is called a shorthand
property.
 The shorthand property for background is simply
"background":
body {
background:url('img_tree.png') no-repeat right top;
}
 Background…
108

 When using the shorthand property the order of the

property values is:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 It does not matter if one of the property values is missing,
as long as the ones that are present are in this order.
 Background…
109
 The background-position property sets the starting position of a background image.
 Values of background-position
 left top
 left center
 left bottom
 right top
right center
 right bottom
 center top
 center center
 center bottom
 Text property
110
 The color property is used to set the color of the text.

color: color

 The color can be specified by:

 name - a color name, like "red"
 RGB - an RGB value, like "rgb(255,0,0)"
 Hex - a hex value, like "#ff0000"
 The default color for a page is defined in the body selector.
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
 Text…
111
 text-decoration: specifies the decoration added to text.
 Note: The color of the decoration should be set by the "color" property.
 Set the text decoration for h1, h2, h3, and h4 elements:

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
112 Text…

 direction: direction {ltr, rtl} borwser issue??

 letter-spacing: value
 text-align: alignment {left, right, center,
justify}
 text-decoration: decoration {none, underline,
overline, line-through, blink}
 white-space: Sets how white space inside an
element is handled
normal
 <!DOCTYPE html>
<html>
113
<head>
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">In my younger and more vulnerable years my father gave me some advice
that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,'
he told me, 'just remember that all the people in this world haven't had the advantages that
you've had.'</p>
<p><b>Note:</b> Resize the browser window to see how the value "justify" orks.</p>
114 CSS (cont’d)

 text-indent :- property specifies the indentation of the first

text-indent:
line in value
a text-block.

 Note: Negative values are allowed.

 The first line will be indented to the left if the value is
negative.
 Value: Defines a fixed indentation in px, pt, cm, em, etc.
 (16px=1em).
 Text…
115
 text-transform property controls the capitalization of text.
 text-transform: transform {none, capitalize, uppercase, lowercase}
 Capitalize:Transforms the first character of each word to uppercase
 Uppercase: Transforms all characters to uppercase
 lowercase: Transforms all characters to lowercase
 Example:
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
116 Text…


word-spacing property increases or decreases the white space
word-spacing:
betweenvalue
words.

 Note: Negative values are allowed.

 Example
 Specify that the space between words in paragraphs should be 30
p pixels:
{
word-spacing:30px;
}
 CSS Font Properties
117
 The CSS font properties control all aspects of your text graphical representation.
 From the thickness of your font (font-weight) to font type (font-family) of your choice.
 Here are all the font properties at your disposal:
 font
 font-family
 font-size
 font-style
 font-weight
 font-variant
 Font…
118

Font Family
 The font family of a text is set with the font-family property.
 Note: If the name of a font family is more than one word, it
must be in quotation marks, like font-family: "Times New
Roman".
 More than one font family is specified in a comma-separated
list:
 Font…
119
 Times New Roman
Georgia
 Arial
Verdana
 Courier New
Lucida Console
 Monospace
 Sans-serif
 Eg:

p{
font-family:"Times New Roman", Times, serif;
}
 Font…
120

Font Style
 The font-style property is mostly used to specify italic text.
 This property has three values:
 normal - The text is shown normally
 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to
italic, but less supported)
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
 Font
121
Font Size
 The font-size property sets the size of the text.
 Setting the text size with pixels, gives you full control over the text size:
Eg: (16px=1em)
h1 {font-size:40px;}
h2 {font-size:30px;}

p {font-size:14px;}
font-style: style {normal, italic, oblique}
 font-weight: weight {normal, bold, bolder, lighter, 100, 200, …}
 font-size: size
 font-family: font_list (in order of precedence, separated by comma)
 Borders
122
 Box model
 describes the rectangular boxes that are generated for elements
 box model…
123
 Margin - Clears an area around the border.
 The margin does not have a background color, it is
completely transparent
 Border - A border that goes around the padding and content.
 The border is affected by the background color of the box
 Padding - Clears an area around the content.
 The padding is affected by the background color of the box
 Content - The content of the box, where text and images
appear
 Box model…
124
Width and Height of an Element
 Important: When you set the width and height properties of an element with CSS, you just set
the width and height of the content area.
 To calculate the full size of an element, you must also add the padding, borders and margins.

width:250px;
padding:10px;
border:5px solid gray;
margin:1
 Width and Height…
125
 The total width of an element should be calculated like this:

Total element width

width + left padding + right padding + left border
+ right border + left margin + right margin

 The total height of an element should be calculated like this:

Total element height

height + top padding + bottom padding + top
border + bottom border + top margin + bottom
margin
 Margin
126

Margin properties: set the top, right, bottom, and left

margin of a box.
 margin-top
 margin-right
 margin-bottom
 margin-left
 margin
 Eg: H1 { margin-top: 2em }
 Margin …
127

 The margin property is a shorthand property for

setting margin-top, margin-right, margin-bottom
and margin-left at the same place in the style sheet.
 (top->right->bottom->left)
 If there is only one value, it applies to all sides.
 If there are two values, the top and bottom margins
are set to the first value and the right and left margins
are set to the second.
 Margin…
128
 If there are three values, the top is set to the first value,
the left and right are set to the second, and the bottom is
set to the third.
 If there are four values, they apply to the top, right,
bottom, and left respectively.
 Eg:
 1) BODY { margin: 2em } /* all margins set to 2em */
 2) BODY { margin: 1em 2em } /* top & bottom = 1em,
right & left = 2em */
 3) BODY { margin: 1em 2em 3em } /* top=1em,
right=2em, bottom=3em, left=2em */
 Margin…
129

 The last rule of the example above is equivalent to the example below:
 BODY {
 margin-top: 1em;
 margin-right: 2em;
 margin-bottom: 3em;
 margin-left: 2em; /* copied from opposite side (right) */
 }
 Border properties
130
 These properties set the width of the top, right, bottom, and
left border of a box

 Border properties

 border-top-width ={thin,thick,medium,length}
 border-right-width
 border-bottom-width
 border-left-width
 border-width
 Border width
 Border…
131
 The border's thickness has an explicit value. Explicit border
widths cannot be negative
Eg:
H1{ border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium }
 Border color
 border-top-color
 border-right-color
 border-bottom-color
 border-left-color
 border-color
 Border…
132
 border-style
 The border-style property specifies what kind of border to display
 None of the border properties will have ANY effect unless the border-
style property is set!
 border-style values:
 none: Defines no border
 dotted: Defines a dotted border
 dashed: Defines a dashed border
 solid: Defines a solid border
 double: Defines two borders. The width of the two borders are the
same as the border-width value
 Border style values…
133
 groove: Defines a 3D grooved border. The effect depends on the
border-color value
 ridge: Defines a 3D ridged border. The effect depends on the border-
color value
 inset: Defines a 3D inset border. The effect depends on the border-
color value
 outset: Defines a 3D outset border. The effect depends on the border-
color value
 Border style…
134

 Border - Individual sides

 In CSS it is possible to specify different borders for different sides:
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
 The example above can also be set with a single property:
 Example
border-style:dotted solid;
 Border-style property
135
 The border-style property can have from one to four values.
 border-style:dotted solid double dashed;
 top border is dotted
 right border is solid
 bottom border is double
 left border is dashed
 border-style:dotted solid double;
 top border is dotted
 right and left borders are solid
 bottom border is double
 border-style:dotted solid;
The border-style property is used in the example
 top and bottom borders are dotted above. However, it also works with border-
 right and left borders are solid width and border-color.
 border-style:dotted;
 Border - Shorthand property
136
 To shorten the code, it is also possible to specify all the individual border properties in one
property.
 This is called a shorthand property.
 The border property is a shorthand for the following individual border properties:

 border:<border-width>|<border-style>|<color>
 The 'border' property is a shorthand property for setting the
same width, color, and style for all four borders of a box.
 border-width
 border-style (required)
 border-color
border:5px solid red;
Example
 </style>
Example
</head>
<!DOCTYPE
137 html> <body>
<html> <p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<head>
<p class="dashed">A dashed border.</p>
<style> <p class="solid">A solid border.</p>
p.none {border-style:none;} <p class="double">A double border.</p>
<p class="groove">A groove border.</p>
p.dotted {border-style:dotted;}
<p class="ridge">A ridge border.</p>
p.dashed {border-style:dashed;} <p class="inset">An inset border.</p>
p.solid {border-style:solid;} <p class="outset">An outset border.</p>
p.double {border-style:double;} <p class="hidden">A hidden border.</p>
</body>
p.groove {border-style:groove;} </html>
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
 Border…
138
 Unlike the shorthand 'margin' and 'padding' properties, the 'border' property cannot set different
values on the four borders. To do so, one or more of the other border properties must be used.
 For example, the first rule below is equivalent to the set of four rules shown after it:

P { border: solid red }

P{
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
 Positioning
139
 The CSS positioning properties allow you to position an element
 There are four different positioning methods.
 Static
 Relative
 Absolute
 Fixed

position:static #div { position:static; }

 default positioning for all elements
 the element is not positioned and occurs where it normally would in the document.
 Normally you wouldn't specify this unless you needed to override a positioning that had been
previously set.
 Position…
140
position:relative
 Allow to use top or bottom, and left or right to move the element relative to where it would
normally occur in the document.
 Let's move div down 20 pixels, and to the left 40 pixels:

#div { position:relative; top:20px; left:-40px; }

position:absolute
 the element is removed from the document and placed exactly where you tell it to go.
 Let's move div a to the top right of the page:

#div { position:absolute; top:0; right:0; width:200px; }

 Position…
141

Fixed Positioning
 An element with fixed position is positioned relative to the browser window.
 It will not move even if the window is scrolled:
 Example
 p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
 142 Position…
Overlapping Elements
 When elements are positioned outside the normal flow, they can overlap other
elements.
 The z-index property specifies the stack order of an element (which element should
be placed in front of, or behind, the others)
 An element can have a positive or negative stack order:
 Example
 img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
Example
<!DOCTYPE html>
143
<html>
<head><style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style></head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
 144 CSS Lists
 The CSS list properties allow you to:
 Set different list item markers for ordered lists
 Set different list item markers for unordered lists
 Set an image as the list item marker

List
 In HTML, there are two types of lists:
 unordered lists - the list items are marked with bullets
 ordered lists - the list items are marked with numbers or letters
 With CSS, lists can be styled further, and images can be used as the list item marker.
145 CSS List…

 Different List Item Markers

 The type of list item marker is specified with the list-style-type property:
 Example
 ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}
Example <ul class="b">
<li>Coffee</li>
<!DOCTYPE html>
146 <li>Tea</li>
<html>
<li>Coca Cola</li>
<head> </ul>
<style>
ul.a {list-style-type:circle;} <p>Example of ordered lists:</p>
ul.b {list-style-type:square;} <ol class="c">
ol.c {list-style-type:upper-roman;} <li>Coffee</li>
<li>Tea</li>
ol.d {list-style-type:lower-alpha;}
<li>Coca Cola</li>
</style>
</ol>
</head>
<body> <ol class="d">
<p>Example of unordered lists:</p> <li>Coffee</li>
<ul class="a"> <li>Tea</li>
<li>Coffee</li> <li>Coca Cola</li>
</ol>
<li>Tea</li>
</body>
<li>Coca Cola</li>
 147 List…
 An Image as The List Item Marker
 To specify an image as the list item marker, use the
list-style-image property:
 Example
 ul
{
list-style-image: url(‘bullet1.jpg');
}
 List…
148
 CSS list-style-position Property
 The list-style-position property specifies if the list-item markers should appear inside or outside the
content flow.
 The list-style-position property specifies if the list-item markers should appear inside or outside the
content flow.

Inside Indents the marker and the text. The bullets appear
inside the content flow

Outside Keeps the marker to the left of the text. The bullets
appears outside the content flow. This is default
149 Style Sheet Layers

 CSS gives you an opportunity to create layers of various divisions. The CSS layers refer
to applying the z-index property to elements that overlap with each other.
 The z-index property is used along with the position property to create an effect of layers.
You can specify which element should come on top and which element should come at
bottom.
 A z-index property can help you to create more complex webpage layouts. The following
example shows how to create layers in CSS.
150

Thank You
see you next class!
 151

151

Chapter 4

Internet Programming
152

Java script
153 JavaScript History and Versions
 JavaScript was introduced as part of the Netscape 2.0
browser
 Microsoft soon released its own version called JScript
 (European Computer Manufacture Association) ECMA
developed a standard language known as ECMAScript
 ECMAScript Edition 3 is widely supported and is what
we will call “JavaScript”
154 What is JavaScript

 Syntax is similar to Java, but it’s not Java

 Usually JavaScript code is embedded within HTML code using the script
tag: <script>…..</script>
 also use the type attribute to define the scripting language. So, the <script
type="text/javascript">
 By entering the document.write command between the <script
type="text/javascript"> and </script> tags, the browser will recognize it as a
JavaScript command and execute the code line.
 Can have more than one pair of script tags in a page,
 Semicolons: C++ and JAVA require them but in JavaScript it’s optional
155

 Scripting language (object-oriented)

 Lightweight programming language developed by Netscape
 It is a subset of Java
 Interpreted language, not compiled, The JavaScript Translator (embedded in
browser) is responsible to translate the JavaScript code.
 Designed to be embedded in browsers
 Ideal for adding interactivity to HTML pages
 Work with info from user via HTML forms
 Detect browser versions
 Create cookies
 Validate form data (client-side)
 Read and write HTML elements
 It’s free, no license required
 156 What is JavaScript
 HelloWorld example program…

<html>
<head><title>JavaScript HelloWorld!</title></head>
<body>
<script language="JavaScript">

document.write(“welcome to javaScript”)

</script>
</body>

</html>
157 What is JavaScript

 Javascript can be located in the head, body or external file

 Between the head tag of html
Ensures script is loaded before trigger event
 Between the body tag of html
 Script executes when body loads
 JavaScript interpreted first then HTML interpreted second
 External (In .js file)
 Allows scripts to run on several pages
 It provides code re usability because single JavaScript file can be
used in several html pages.
 An external JavaScript file must be saved by .js extension. It
increases the speed of the webpage.
158 What is JavaScript

<html>
<head>
<script language=“JavaScript”>
document.write (“<b> This is first </b>);
</script>
</head>

<body>
Now where does this print on the web page???? <br />
This is first
Now where does this print on the web page????
<script language=“JavaScript”>
document.writeThis might
( “This be last?
might be last?”)
</script>
 159 What is JavaScript
 Now, let JavaScript generate HTML for us…
<html>
<head><title>JavaScript HelloWorld!</title></head>
<body>
<script laguage="JavaScript">
document.write("<h2>Javascript-Generated output:</h2>"
+ "<p>This paragraph generated by JavaScript</p>"
+ "<p>It can even insert an image</p>"
+ "<img src=‘ASTU.jpg' />")
</script>
</body>
</html>
160 JavaScript Comment
 The JavaScript comments are meaningful way to deliver message.
 It is used to add information about the code, warnings or suggestions so that end user can
easily interpret the code.
 The JavaScript comment is ignored by the JavaScript engine i.e. embedded in the browser.
 There are mainly two advantages of JavaScript comments.
 To make code easy to understand the code
 To avoid the unnecessary code It can also be used to avoid the code being executed.
161 Types of JavaScript Comments

 There are two types of comments in JavaScript.

 Single-line Comment
 It is represented by double forward slashes (//). It can be used before
and after the statement.
 Multi-line Comment
 It can be used to add single as well as multi line comments. So, it is
more convenient.
 It is represented by forward slash with asterisk then asterisk with
forward slash.
 Identifier
 162
Identifier– a name given to a program element
 Syntax rules for names (identifiers):
 Must begin with letter or underscore ( _ )
 Must contain only letters, underscores, and digits (or certain other characters)
 Must not be a reserved word(keywords not used for other purposes used only
small latters )
 Case Sensitive!!
163 Variables and Data Types

 Variable simply means depends on the type of

data it contains
 JavaScript has six data types:
 Number
 String
 Boolean (values true and false)
 Object
 Null (only value of this type is null)
 Undefined (value of newly created variable)
164 Variables

 Must declare variables before they’re used in the program

 Declare at the top of the program & terminate each statement with ‘;’
 Initialize variables when appropriate
 Local variables (declared within a function) destroyed after function
exit
 Can only be accessed within the function
Syntax:
var idf [= expression];
 Example – Note Assignments
var x= 2.50;
var taxRate = .075;
var y;
165 Strings

 Strings are sequences of keyboard characters

enclosed in single or double quotes
“Hello World” or ‘Hello World’

 Variables can hold strings

var greeting = “Hello World”

 String can be empty, i.e., contain no characters

var myAnswer = “”
166 JavaScript Operators

 Operators are used to create compound expressions from simpler

expressions
 Operators can be classified according to the number of operands
involved:
 Unary: one operand (e.g., typeof i)
 Prefix or postfix (e.g., ++i or i++ )
 Binary: two operands (e.g., x + y)
 Ternary: three operands (conditional operator)
167 JavaScript Operators

 Precedence (high to low) of operators

168 Example
<html>
<head><title>JavaScript HelloWorld!</title></head>
<script language='JavaScript'>
var x = 3;
var y = 10;
document.write(typeof x + "<br/>") ;
document.write(x++ * ++y + y +x + "<br/>") ;
x = 3;
y = 10;
document.write(++x * ++y + y /x + y + "<br/>") ;
x = 3;
y = 10;
document.write( ++x * y++ + y +x + "<br/>" ) ;
document.write ( "y = " + y + " x = " + x );
</script>
</body>
169 Javascript can be used in

 Selection statements
 Loop statements

 all the syntax's are used in the javascript

code with their formula. (you have learnt in
programing I)
170 Example: Test Program
Diagnostic messages indicate in the flow of control

<html>
<head><title>JavaScript</title></head>
<body>
<script laguage="JavaScript">
var variable1 = 1; var variable2 = 2;
if(variable1 >= 0){
document.write("<p> 1 is greater than 0 </p>");
}
document.write("<p>Resuming execution after 'if' statement</p>");
else if(variable1 > variable2){
document.write("<p>1 is greater than 2</p>");
}
else {
document.write("<p>2 is greater than 1</p>");
}
171 JavaScript Switch

 The JavaScript switch statement is used to execute one code from multiple expressions.
 The syntax of JavaScript switch statement is given below.

switch(expression){
case value1:
code to be executed;
break;
case value2:
code to be executed;
break;
......

default:
code to be executed if above values are not matched;
}
172 Switch example

<script type="text/javascript">
var x = window.prompt(" enter a no. less than 2");
x= Number(x)
switch (x)
{
case 0: document.write("zero") ; break ;
case 1: document.write("one") ; break ;
default: document.write("not valid")
}
</script>
173 Working with Program Loops

 A program loop is a set of instructions that is executed

repeatedly
 Use program loops to configure a group of commands to be
executed a set number of times
 The loop uses a counter to track the number of times the
command block has been run
 There are three types of loops in JavaScript.
for loop
while loop
do-while loop
174 1) JavaScript For loop

 The JavaScript for loop iterates the elements for the fixed number of times. The syntax of
for loop is given below.
for (initialization; condition; increment)
{
code to be executed
}
Example
<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>
 175 Working with Program for Loops
<table border = 2>
<tr>
<script type = "text/javascript">
for (num = 1; num <= 4; num ++){
document.write("<td>" + num + "</td>");
}
</script>
</tr>
</table>
176 Working with Program nested for
<table borderLoops
= 2> Nesting a For loop

<script type = "text/javascript">

for (num = 1; num <= 4; num ++){
document.write("<tr>");
for (J = 1; J <= 4; J ++){
document.write("<td>" + num + “-” + J + "</td>");
}
document.write("</tr>");
}
</script>
</table>
177 2) JavaScript while loop
 The JavaScript while loop iterates the elements for the infinite number of times.The syntax of while
loop is given below.
while (condition)
{
code to be executed
}
Example
<script>
var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>
 178 Working with Program while Loops
<table border = 2> Creating a While loop

<tr>
<script type = "text/javascript">
num = 1;
while(num <= 4){
document.write("<td>" + num + "</td>");
num ++;
}
</script>
</tr>
</table>
 179 Working with Program Loops
<table border = 2>
<script type = "text/javascript">
num = 1;
while(num <= 4){
document.write("<tr>");
J = 1;
while(J <= 4){
document.write("<td>" + num + J + "</td>");
Nesting a While loop
J ++;
}
document.write("</tr>");
num ++;
}
</script>
</table>
180 3) JavaScript do while loop

 The JavaScript do while loop iterates the elements for the infinite number of times like while
loop. But, code is executed at least once whether condition is true or false. The syntax of do while
loop is given below.
do{
code to be executed
}while (condition);
 Example
<script>
var i=21;
do{
document.write(i + "<br/>");
i++;
}while (i<=25);
</script>
181 JavaScript Functions

 Abstraction
 is used to hide certain details and only show the
essential features of the object.
 Functions allows to reduce the size of program
 It allows writing functionality once, then reuse it
 Encapsulation
 is a mechanism of wrapping the data (variables)
and code acting on the data (methods) together as
a single unit.
 Function name allows us to access a function in our
182 JavaScript Functions

 Reasons to use functions

 Facilitate communication
 Problem simplification
 Code readability
 Reusability
 Maintainability
183 JavaScript Functions

 JavaScript function syntax

function fname (argument1,arg2, ... , argument-n)

{
statement_1;
statement_2;
...
statement_m;

return return_value;
}
 JavaScript Functions can have 0 or more arguments.
184 JavaScript Functions -- Parameters

 Passing parameters to the function

 Parameters provide value to the function
 Refers to implicitly declared variables that can be
accessed within function body
 Parameters are named variables separated by commas

 Example,
function findMaxValue(num1, num2, num3)
185 JavaScript Functions

 Put functions within <script>….</script> tags within

the <head> section of the web page

<head>
<script language=“JavaScript”>

declare functions here….

</script>
</head>
186 JavaScript Functions – Local Variables

 Variables declared within a function are local

 local variable is visible only within the function body after it’s
declared

 // code here can not use carName

function myFunction() {
var carName = “Corolla";

// code here can use carName

}
187 JavaScript Functions – Local
Variables
 Write a function that returns the max of three numbers
function maxNum(num1, num2, num3){
var max = 0;
if((num1 >= num2) && (num1 >= num3)){
max = num1;
}
else if((num2 >= num1) && (num2 >= num3)){
max = num2;
}
else{
max = num3;
}
return max;
}

var arr = [];

for(i=0;i<3;i++){
arr[i] = parseInt(prompt("Enter a number"));
}

document.write(maxNum.apply(this, arr));
188 JavaScript Functions – function calling

 Calling statement: allows to invoke already declared function.

Syntax:

[idf=] functionName([Actual_parameter_list]);

 Example…somewhere in the <body>….,

var x = 1, y = 4, z = 2;

var y = findMaxValue(x, y, z);

189 Cont… Example

<html>
<body>
<script>
function getcube(number){
alert(number*number*number);
}
</script>
<form>
<input type="button" value="click" onclick="getcube(4)"/>
</form>
</body>
</html>
190 JavaScript Functions - Return
 Return keyword tells function to return some value and exit
immediately

Syntax:
return expression;

 Function can have multiple return statements but only the first can be
executed in any given function call

 Normally used to return the final result of a calculation to the calling

program
191 Function with Return Value example

<html>
<body>
<script>
function getInfo(){
return "hello javascript! How r u?";
}
</script>
<script>
document.write(getInfo());
</script>
</body>
</html>
192 JavaScript Functions – Global
Variables
 Global variables are those declared outside of
functions
 Are visible throughout the program

var globalHello = “Hello!”;

function writeHello() {
document.write(globalHello);
}
// outputs “Hello!”
193 JavaScript Functions

 Example of Confirm
Built-In Functions
<script type="text/javascript">
 Prompt
function msg(){
 Alert var v= confirm("Are u sure?");
 Confirm if(v==true){
alert("ok");
}
else{
alert("cancel");
}
}
</script>

<input type="button" value="delete record" onclick="msg()"/>

194

JavaScript objects
 195 Object Introduction
 A javaScript object is an entity having state and behavior (properties
and method).
 Everything" in JavaScript is an Object: a String, a Number, an Array, a
Function....
 An object is a set of properties
 A property consists of a unique name (within an object) with an
associated value
 The type of a property depends on the type of its value and can vary
dynamically.
 An object is just a special kind of data, with properties and
methods.
 There are no classes in JavaScript
 196 Object Creation
 Objects are created using new expression
 A constructor is a function
new object([argument list])
 When called via new expression, a new empty Object is created and passed to the constructor along
with the argument values
 Constructor performs initialization on object
 There are 3 ways to create objects.
 By object literal
 By creating instance of Object directly (using new keyword)
 By using an object constructor (using this keyword)
 197 Object Methods
 Methods are the actions that can be performed on objects.
 Creating objects in JavaScript using the constructor function
function rect (length, width){
this.length = length;
this.width = width;
}
 One can use the new keyword and call our rect constructor function
myrect = new rect (100, 200);
 To add methods to your objects, first define a function
 Then associate that function with a particular object.
function makeLonger() {
this.length += 5;
198

THE END!!!
Thank you