Scribd
Upload
6 views

Lecture.1 Web

The document provides an overview of web programming including HTML, CSS, JavaScript and the relationship between them. It discusses the history of the web and basic web architecture including clients, servers and browsers. It also provides examples of HTML code and page structure.

Uploaded by

adhamelthn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Lecture.1 Web

The document provides an overview of web programming including HTML, CSS, JavaScript and the relationship between them. It discusses the history of the web and basic web architecture including clients, servers and browsers. It also provides examples of HTML code and page structure.

Uploaded by

adhamelthn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Web Programming

HTML

CSS JavaScript

Step by step Exercises


History of the Web
• Internet (1960s)
• World Wide Web - WWW (1991)
• First Web Browser - Netscape, 1994
• Google, 1998
• Facebook, 2004
• Smartphones (iPhone), 2007
• Tablets (iPad), 2010
The Web Browser

Chrome
Internet Explorer

Opera

Safari
Firefox
The Web Programming Triangle

HTML Use HTML to define the


content of web pages

Web
Programming
JavaScript
CSS
Use CSS to specify the layout of web pages Use JavaScript to program
the behavior of web pages
Basic Web Programming
• HTML
• CSS
• JavaScript

For more Dynamic Web Programming we use e.g.,


• ASP.NET
• SQL
• AJAX
• PHP
• etc.
CSS

JavaScript

Server
Web
Web Architecture

Internet Explorer Chrome Firefox Opera Safari

Web Browser
Client

HTML CSS JavaScript


Server-side

Web Server
Client-Server Example
Client
Web Browser

Response
Web Server

Request
Database

Internet Information Services (IIS), Apache, etc.


Web Platform
The Web Browser creates the visual web page you see in the browser based on
<!DOCTYPE html> the HTML code
<html>
<body>

<h1>My First Heading</h1>

HTML, CSS, JavaScript


<p>My first paragraph.</p>
Client-side
</body>
Web Browser
</html>

The code runs on the server and converted to Web Page (HTML)
HTML before sending to client (Web Browser)

Web Server Server-side


ASP.NET, PHP, ...

Internet Information Services (IIS), Apache, etc.


HTML
• HyperText Markup Language (HTML)
• The Visual Appearnce of a Web Site
• “Web Browser Language”: All Web Browser

understand HTML
• HTML 5 is the latest
• Maintained by W3C
- World Wide Web Consortium

1
3
HTML Editors
Professional HTML editors:
• Adobe Dreamweaver
• CoffeeCup HTML Editor
• Notpad++,……..
For the simple examples in this Tutorial we only
need Notepad (Windows)
What Are HTML Tags?

• Tags are used to mark up the start of an HTML element and


they are usually enclosed in angle brackets.
An example of a tag is: <h1>.
• Most tags must be opened <h1> and closed </h1> in order to
function.
HTML Code

<!DOCTYPE html>
<html>
HTML
<head>
<title> This is document title </title>
</head>
<body>
<h1> This is a heading </h1>
<p> Hello World! </p>
</body>
</html>

Web Browser
HTML Page Structure

<!DOCTYPE html>
<html>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another
paragraph.</p>

</body>
</html>

1
5
My First HTML Web Page
<tagname>content</tagname>

• The DOCTYPE declaration defines the


<!DOCTYPE html> document type
<html> • The text between <html> and</html>
<body> describes the web document
• The text between <body> and</body>
describes the visible page content
<h1>My First Heading</h1> • The text between <h1> and </h1> describes
a heading
• The text between <p> and </p> describes
<p>My first paragraph.</p>

</body>
paragraph
</html>
Students: Create this HTML Code in e.g., NotePad and Save the File as .htmL.
Then Open the File in a Web Browser (just double-click on the file)
In HTML, headings are written in the following elements:
•<h1>
•<h2>
•<h3>
•<h4>
•<h5>
•<h6>

As you might have guessed <h1> and <h2> should be used for the most
important titles, while the remaining tags should be used for sub-headings
and less important text.

You might also like