Scribd
Upload
8 views19 pages

Lecture 1 - Introduction

Uploaded by

isaacishaya020
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views19 pages

Lecture 1 - Introduction

Uploaded by

isaacishaya020
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

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

You might also like