Foundation of Web
Programming
W.A. Alhaji 1
Course Outline
Introduction to WWW
Structuring and Formatting with
HTML
Styling with CSS
2
Learning
Outcomes
In this chapter, you will learn about:
◦ Overview of the Internet
◦ Introduction to the World Wide Web
◦ Writing a basic HTML web page
3
The Internet vs. The Web
The Internet is a worldwide
network of computers all attached
in a global networking scheme.
4
The Internet vs. The Web
The World Wide Web is a collection
of electronic documents
(containing text, graphics, and
even multimedia contents) that are
linked to one another via
hyperlinks.
5
History of the Web
Tim Berners-Lee invented the World
Wide Web in 1989, about 20 years after
the first connection was established
over what is today known as the Internet
At that time, Tim was a software
engineer at CERN, the large particle
physics laboratory near Geneva,
Switzerland. He is currently a professor
at the Department of Computer Science
University of Oxford AND MIT.
6
Growth of Internet
(www.internetlivestats.com)
7
Fundamental technologies of
WWW
WEB CLIENT: Requests and receives WEB PAGES from
server.
WEB SERVER: Receives and responds to request for WEB
PAGES by clients
HTML: HyperText Markup Language. The publishing
format for the Web, including the ability to format
documents and link to other documents and resources.
HTTP: Hypertext Transfer Protocol. Allows for the retrieval
of linked resources from across the Web
URL: Uniform Resource Locator. A kind of “address” that
is unique to each resource on the Web.
8
How the Web Works?
WWW use classical client / server architecture
◦ HTTP is text-based request-response protocol
HTTP
Page request
HTTP
Server response
Client running Server running Web
a Web Server Software
Browser (IIS, Apache, etc.)
9
Web
Client
Connected to the Internet when
needed
Usually runs web browser (client)
software such as Google Chrome,
Opera or Firefox
Uses HTTP (Hypertext Transfer
Protocol)
Requests web pages from server
Receives web pages and files from
server
10
Web
Server
Continually connected to the Internet
Runs web server software (such as
Apache or Internet Information Server)
Uses HTTP (Hypertext Transfer
Protocol)
Receives request for the web page
Responds to request and transmits
status code, web page, and associated
files
11
HTTP
Hypertext Transfer Protocol
A set of rules for exchanging files such as
text, graphic images, sound, video, and
other multimedia files on the Web.
HTTP Request
HTTP Response
Webbrowsers send HTTP requests for web
pages and their associated files.
Webservers send HTTP responses back to the
web browsers.
12
URL
Uniform Resource Locator
URL
Represents the address of a resource on the Internet.
13
What is a Web Page?
Web pages are text files containing
HTML
HTML – Hyper Text Markup Language
◦ A notation for describing
document structure (semantic markup)
formatting (presentation markup)
◦ Looks like:
A Microsoft Word document
The markup tags provide information
about the page content structure
14
Creating HTML Pages
An HTML file must have an .htm
or .html file extension
HTML files can be created with text
editors:
◦ NotePad, NotePad ++, PSPad
Or more advanced HTML editors:
◦ Macromedia Dreamweaver
◦ Netscape Composer
◦ Microsoft Visual Studio
15
Creating HTML using notepad
Step 1: Go to my computer
Step 2: double click c: / drive
Step 3: create a new folder and name it web
programming
Step 4: Open notepad in accessories
Step 5: Type your html code into your notepad
Step 6: In the notepad go to file, click save as.
Step 7: In the save as dialog box, move to the
location of web programming folder you initially
created.
Step 8: type the name of your document in the
file name box with the extension .html. Click
save
Running html in the
browser
Step 1: go to my computer
Step 2: double click c:/ drive
Step 3: go to web programming
folder
Step 4: find the document and
double click it.
◦ the html document will open with
your default browser.
Creating a simple web
page
To start - Create a Folder:
◦ You’ll find it helpful to create folders to organize your
files as you develop the web pages in this book and
create your own websites.
To create a new folder with Windows:
◦ Launch Windows Explorer (either press the Windows
key or select Start > All Programs > Accessories >
Windows Explorer), and navigate to the location where
you would like to create the new folder, such as My
Documents or your C: drive.
◦ Right Click > New > Folder.
◦ To rename the New Folder, right-click on it, select
Rename from the context menu, type in the new name,
e.g mynameWebpages and press the Enter key.
18
Creating a simple web
page
Launch Notepad or another text editor and type in
the following code.
◦ <!DOCTYPE html>
◦ <head>
◦ <title>My First Web Page</title>
◦ </head>
◦ <body>
<h1>Welcome!</h1>
<p>Hi, I am __________, with Registration number
CST/16/COM/0000. </p>
<p>I think I’ll enjoy web programming.</p>
◦ </body>
◦ </html>
Save your Document as “myFirstWebPage.html”
◦ NOTE: the quotations marks are also part of the file name
19
