3/6/2022

Web Design and

Programming
Lecture 1:
An Introduction
Assoc. Prof.
Ali A. Al-Ani

Department of Computer Science

College of1 Science

Course Objectives

1. To get introduced with the history of web.

2. To learn how to create web pages using HTML.

3. To learn how to construct style documents for web pages using CSS .

4. To learn how to create dynamic web pages using JavaScript which is a client-side

script language.

Department of Computer Science

College of2 Science

1
 3/6/2022

Lectures will be interactive. This means:

1. You will need to study the new material before every lecture (slides, book, and
online material).

2. We will have a lab on every lecture, so you will need to code in almost every
lecture.

3. You will post your questions on the board before each lecture. If you do not post
any questions, I assume you have understood everything. Therefore…

4. You may be called in class to explain the material to your classmates.

Department of Computer Science

College of3 Science

Recommended book

• “Web Programming Step by Step” by Marty Stepp, Jessica

Miller, Victoria Kirst.

• A useful web site for learning more about web development:

http://www.w3schools.com

Department of Computer Science

College of4 Science

2
 3/6/2022

Web Document
• When we examine the elements of
the web document construction, it
can consist of up to three layers
content, presentation, and behavior
as illustrated below

Department of Computer Science

College of5 Science

Internet an Overview
• The Internet is a global system of interconnected computer networks that use the standard
Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.

• It is a network of networks that consists of millions of private, public, academic, business,

and government networks, of local to global scope, that are linked by a broad array of
electronic, wireless and optical networking technologies.

• The term Internet actually refers to the combined collection of academic, commercial, and
government networks connected over international telecommunication backbones and
routed using IP addressing.

Department of Computer Science

College of6 Science

3
 3/6/2022

Internet Applications
• The internet has gained popularity rapidly as it is used for various purposes. Few of the main
applications of internet are listed below:

1. E- mail (Electronic mail):

2. FTP (File transfer protocol).

3. E- Commerce.

4. Video Conferencing.

Department of Computer Science

College of7 Science

IP
• Every computer and device (modem, router, Smartphone, cars, etc.) connected to the
Internet is assigned a unique numeric IP address (IP stands for Internet Protocol) that
identifies the host for communication purposes

• The designers of the Internet Protocol defined an IP address as a 32-bit number and this
system, known as Internet Protocol Version 4 (IPv4), is still in use today. However, due to
the enormous growth of the Internet and the predicted depletion of available addresses, a
new addressing system (IPv6), using 128 bits for the address, was developed in 1995, and is
being deployed worldwide since the mid-2000s.

Department of Computer Science

College of8 Science

4
 3/6/2022

IP
• For example, the computer that hosts test.com has the IP address 208.201.239.100. All
those numbers can be dizzying, so fortunately, the Domain Name System (DNS) was
developed to allow us to refer to that server by its domain name, “test.com”, as well. The
numeric IP address is useful for computer software, while the domain name is more
accessible to humans.

• Matching the text domain names to their respective numeric IP addresses is the job of a
separate DNS server.

Department of Computer Science

College of9 Science

Internet an Overview
• IPV4 address is a 32 bit number, which uses the decimal doted notation consisting of 4
decimal numbers each ranging from 0 to 255 separated by dots. Network administration
divides the IP address into two parts. – the most significant 8 bits are called network
address portion the remaining bits are known as rest bits or host bits or identifiers and they
are used for host numbering in a network.

Department of Computer Science

College 10
of Science

5
 3/6/2022

URL

• Every page and resource on the Web has its own special address called a URL, which

stands for Uniform Resource Locator. It’s nearly impossible to get through a day without

seeing a URL plastered on the side of a bus, printed on a business card, or broadcast on a

television commercial.

• Some URLs are short and sweet. Others may look like crazy strings of characters separated

by dots (periods) and slashes, but each part has a specific purpose.

Department of Computer Science

College 11
of Science

The parts of a URL

• A complete URL is generally made up of three components: the protocol, the site name, and
the absolute path to the document or resource, as shown below

Department of Computer Science

College 12
of Science

6
 3/6/2022

Browsers
• A web browser or Internet browser is a software application for retrieving, presenting, and
traversing information resources on the World Wide Web.
• Primary function of a browser is to identify the URI and brings the information resource to
user.
• All major browsers allow users to access multiple information resources at the same time in
different windows or in tabs. Major browsers include pop up blockers to prevent windows to
open without users consent.
• Some special web browsers are Internet Explorer, Mozilla, Firefox, Google Chrome, Safari,
Opera, Mobile browsers.

Department of Computer Science

College 13
of Science

Main Elements of Web Browsers

Department of Computer Science

College 14
of Science

7
 3/6/2022

Search Engine
• A web search engine is designed to search for information on the World Wide Web and FTP

servers. The search results are generally presented in a list of results and are often called

hits. The information may consist of web pages, images, information and other types of

files. Some search engines also mine data available in databases or open directories.

• Web search engines work by storing information about many web pages, which they retrieve

from the html itself. These pages are retrieved by a Web crawler (sometimes also known as

a spider) — an automated Web browser which follows every link on the site.
Department of Computer Science
College 15
of Science

Search Engine

Department of Computer Science

College 16
of Science

8
 3/6/2022

Web
The Web is an Internet-based distributed information system.

1. Anyone with a computer connected to the Internet can easily retrieve information by giving
a Web address or by simply clicking a mouse button.

2. The Web is a great way to disseminate information and making it available 24/7.

3. There is no central control or administration for the Web.

4. Maintainers and administrators can control and update Web content from anywhere on the
Web. All these make the Web a powerful tool for mass communication, e-business and e-
commerce.

Department of Computer Science

College 17
of Science

Web  Internet
• The terms Internet and World Wide Web are often used in everyday speech without much
distinction. However, the Internet and the World Wide Web are not one and the same.

• Internet: a physical network connecting millions of computers using the same protocols for
sharing/transmitting information (TCP/IP).

• World Wide Web: a collection of interlinked multimedia documents that are stored on the
Internet and accessed using a common protocol (HTTP).

• Key distinction: Internet is hardware; Web is software.

Department of Computer Science

College 18
of Science

9
 3/6/2022

History of the Web

• In 1989, Tim Berners-Lee at the European Particle Physics Laboratory (CERN) designed a
hypertext system for linking documents over the Internet.

• Designed a (Non-WYSIWYG "What You See Is What You Get" ) language for specifying
document content, which evolved into HyperText Markup Language (HTML)

• Designed a protocol for downloading documents and interpreting the content, which
evolved into HyperText Transfer Protocol (HTTP)

• Implemented the first browser -- text-based, no embedded media

Department of Computer Science

College 19
of Science

W3C
• The World Wide Web Consortium (called the W3C for short) is the organization that

oversees the development of web technologies. The group was founded in 1994 by Tim

Berners-Lee, the inventor of the Web.

• In the beginning, the W3C concerned itself mainly with the HTTP protocol and the

development of the HTML. Now, the W3C is laying a foundation for the future of the Web by

developing dozens of technologies and protocols that must work together in a solid

infrastructure..
Department of Computer Science
College 20
of Science

10
 3/6/2022

Department of Computer Science

College 21
of Science

The End

Department of Computer Science

College 22
of Science

11