Web Programming

Introduction to
01 Web Programming

Dr. Mostafa Elgendy

 2
Agenda

❖ Course Objective.

❖ Introduction to Web programming

❖ Introduction to HTML

❖ HTML tags

❖ Summary

Web Programming 15-Oct-22

 3
Course Objectives

❖ At the end of this course, you will be able to:

❖ Design and implement a professional website

❖ Learn writing web pages using HTML

❖ Make stylistic decisions with CSS

❖ Understand the client-server programming model

Web Programming 15-Oct-22

 4
Course Objectives

❖ At the end of this course, you will be able to:

❖ Use PHP for server programming

❖ Use and manipulate databases using PHP

❖ Create interactive websites with JavaScript and jQuery

❖ Enhance interactive websites with AJAX and XML

Web Programming 15-Oct-22

 5
Materials

❖ Use the textbook:

❖ Learning php, mysql & javascript

❖ by Robin Nixon

Web Programming 15-Oct-22

 6
Final Project

❖ You can start working on this from the first week of the class

❖ Design and implementation of a professional website:

❖ Professional Style

❖ Interactive

❖ You can complete the project in teams of max 5 members.

❖ Proposal to be submitted by 29th October

Web Programming 15-Oct-22

 7

Introduction

Web Programming 15-Oct-22

 What is the internet? 8

❖ The Internet is a global network of billions of

computers and other electronic devices that use a
protocol to exchange data which is known as
Hypertext Transfer Protocol, or HTTP.

❖ A markup language called Hypertext Markup

Language, or HTML was created

❖ To bring these together, the first web browser and

web server were created.

Web Programming 15-Oct-22

 9
Web Browser

❖ Fetches/Displays documents from web servers

❖ Mozilla Firefox

❖ Microsoft Internet Explorer (IE)

❖ Apple Safari

❖ Google Chrome

❖ Opera

Web Programming 15-Oct-22

 Hypertext Transport Protocol (HTTP) 10

❖ Set of commands understood by a web server and sent from a

browser

❖ Some HTTP commands (your browser sends these internally):

❖ GET filename : download

❖ POST filename : send a web form response

❖ PUT filename : upload

Web Programming 15-Oct-22

 11
Uniform Resource Locator (URL)

❖ Identifier for the location of a document on a web site

❖ Example: http://dept.ju.edu/cs/index.html

❖ Upon entering this URL into the browser, it would:

❖ Ask the DNS server for the IP address of dept.ju.edu

❖ Connect to that IP address at port 80

❖ Ask the server to GET /cs/index.html

❖ Display the resulting page on the screen

Web Programming 15-Oct-22

 Web Server 12

❖ Software that listens for web page requests and

serve HTTP content

❖ Web Server is mostly designed to serve static

content

❖ Have plugins to support scripting languages like Perl,

PHP, ASP, JSP etc.

❖ Examples:

❖ Apache

Web Programming 15-Oct-22

 13
Application Server

❖ Software framework that provides an environment where applications can run.

❖ Not limited to just HTTP. It can be provided other protocol support such as RMI/RPC

❖ Have components and features to support services such as Connection Pooling,

Messaging services.

❖ Examples:

❖ Glassfish

❖ WebSphere

Web Programming 15-Oct-22

 14
Static Web Pages

Web Programming 15-Oct-22

 15
Static Web Pages

Web Programming 15-Oct-22

 16
Dynamic content

❖ Request for the same document returns different results

depend on who made the request.

❖ The Web server needs to run certain programs(Servlet,

PHP, ASP, Servlets, JSP etc…) to process user requests.

Web Programming 15-Oct-22

 17
Dynamic content

Web Programming 15-Oct-22

 18
Dynamic content

Web Programming 15-Oct-22

 19
Web Languages

❖ Hypertext Markup Language (HTML): used for writing web

pages

❖ Cascading Style Sheets (CSS): stylistic info for web pages

❖ PHP Hypertext Processor (PHP): dynamically create pages

on a web server

Web Programming 15-Oct-22

 20
Web Languages

❖ JavaScript: interactive and programmable web pages

❖ Asynchronous JavaScript and XML (Ajax): accessing

data for web applications

❖ MariaDB: The MySQL Clone

Web Programming 15-Oct-22

 21

Basic HTML

Web Programming 15-Oct-22

 What is HTML? 22

❖ HTML stands for Hyper Text Markup Language

❖ HTML is the standard markup language for creating Web

pages

❖ HTML describes the structure of a Web page

Web Programming 15-Oct-22

 What is HTML? 23

❖ HTML consists of a series of elements

❖ HTML elements tell the browser how to display the

content

❖ HTML elements label pieces of content such as "this is a

heading", "this is a paragraph", "this is a link", etc

Web Programming 15-Oct-22

 Why I need to learn HTML? 24

❖ Front-End Developer.

❖ Back-End Developer.

Web Programming 15-Oct-22

 25
Full stack web developer

❖ A person who can develop both client and server software.

❖ In addition to mastering HTML and CSS, they also knows

how to:

❖ Program a browser (like using JavaScript, jQuery, Angular, or Vue)

❖ Program a server (like using PHP, ASP, Python, or Node)

❖ Program a database (like using SQL, SQLite, or MongoDB)

Web Programming 15-Oct-22

 26

Environment

Web Programming 15-Oct-22

 What I need to learn HTML? 27

❖ Text Editor: Visual Studio Code, Atom.

❖ Browser: Google Chrome, Firefox.

Web Programming 15-Oct-22

 28
Setting Up Environment

Web Programming 15-Oct-22

 HTML Tags 29

❖ Each tag's name is called an element

❖ An HTML element is defined by a start tag, some

content, and an end tag:

❖ syntax: <element> content </element>

❖ example: <p>This is a paragraph</p>

Web Programming 15-Oct-22

 Structure of HTML page 30

Web Programming 15-Oct-22

 Structure of HTML page 31

❖ HTML is saved with extension .html

<!DOCTYPE html>
❖ Basic structure: tags that enclose <html>
<head>
content. information about the page
</head>

❖ Header describes the page <body>

page contents
</body>
❖ Body contains the page’s contents </html>

Web Programming 15-Oct-22

 32
Page Title <title>

❖ Placed within the head of the page

❖ Displayed in web browser’s title mark and when

bookmarking the page
…
<head>
<title> HARRY POTTER AND THE DEATHLY HALLOWS - PART 2 </title>
</head>
… HTML

Web Programming 15-Oct-22

 33
Paragraph <p>

❖ Placed within the body of the page

…
<body>
<p> Harry Potter and the Deathly Hallows, the last book in the series,
begins directly after the events of the sixth book. Voldemort has
completed his ascension to power and gains control of the Ministry of
Magic</p>
</body>
HTML
Harry Potter and the Deathly Hallows, the last book in the series, begins directly after the events of the
sixth book. Voldemort has completed his ascension to power and gains control of the Ministry of Magic
output

Web Programming 15-Oct-22

 34
Comments <!-- … -- >

❖ Comments are useful for disabling sections of a page

❖ Comments cannot be nested and cannot contain a --

<!–- This tag is used to add useful information -->
<p>CS courses are <!-- NOT --> a lot of fun!</p>
HTML
CS courses are a lot of fun!

output

Web Programming 15-Oct-22

 35
Headings <h1>, <h2>, … <h6>

❖ Represents the different heading elements

<h1> Harry Potter </h1>
<h2> Books </h2>
<h3> Harry Potter and the Philosopher’s Stone </h3>
HTML

Harry Potter
Books
Harry Potter and the Philosopher’s Stone
output

Web Programming 15-Oct-22

 36
Horizontal rule <hr />

❖ Should be immediately closed with />

<p> First paragraph </p>
<hr />
<p> Second Paragraph </p>
HTML

First Paragraph

Second Paragraph

Web Programming 15-Oct-22

 37
More HTML tags

❖ Some tags can contain additional information called

attributes

❖ syntax:

❖ <element attribute="value"> content </element>

❖ example: <a href="page2.html">Next page</a>

Web Programming 15-Oct-22

 38
More HTML tags

❖ Some tags don't contain content; can be opened and closed in one tag

❖ syntax:

❖ <element attribute="value" attribute="value" />

❖ Examples:

❖ example: <hr />

❖ example: <img src=“Harry.jpg" alt="pic of Harry Potter" />

Web Programming 15-Oct-22

 39
Nesting tags

❖ Tags must be correctly nested: a closing tag must match the most
recently opened tag

❖ The browser may render it correctly anyway, but it is invalid HTML

<p>
<a href=" deathlyHallows-book.html"> Harry Potter and
the Deathly Hallows Book </p>
<p>
This text also links to Harry Potter Book</a>
</p>
HTML

Web Programming 15-Oct-22

 40
Line Break <br>

❖ br should be immediately closed with />

❖ br should not be used to separate paragraphs or used multiple times in a

row to create spacing
<p>One Ring to rule them all, One Ring to find them,
<br /> One Ring to bring them all and in the darkness
bind them.</p>
HTML

One Ring to rule them all, One Ring to find them,

One Ring to bring them all and in the darkness bind them
output

Web Programming 15-Oct-22

 41
Links <a>

❖ The href attribute specifies the destination URL

❖ Links or anchors are inline elements, so they must be placed inside a

block element such as a p or h1
<p>
Search <a href="http://www.google.com/">Google</a>
now!
</p>
HTML

Search Google now!

output

Web Programming 15-Oct-22

 42
More about anchors

❖ Types of URLs that can appear in anchors:

❖ Absolute: to another web site

❖ Relative: to another page on this web site

<p><a href=“deathlyHallows-book.html">
Harry Potter and the Deathly Hallows Book</a></p>
<p><a href=http://en.wikipedia.org >Wikipedia</a></p>
HTML

Harry Potter and the Deathly Hallows

Wikipedia
output

Web Programming 15-Oct-22

 43
Formatting Elements

❖ Used to format the page:

❖ <b>: used to make the text in bold style.

❖ <i>: used to make the text in italic style.

<p><i>Harry Potter</i> and the <b>Deathly</b>
Hallows Book</p>
HTML

Harry Potter and the Deathly Hallows Book

output

Web Programming 15-Oct-22

 44
Formatting Elements

❖ Used to format the page:

❖ <u>: used to make the text in underlined style.

❖ <mark>: used to mark the text.

<p><u>Harry Potter</u> and the <b>Deathly</b>
Hallows <mark>Book</mark></p>
HTML

Harry Potter and the Deathly Hallows Book

output

Web Programming 15-Oct-22

 45
Formatting Elements

❖ Used to format the page:

❖ <sub>: used to make the text in subscripted style.

❖ <sup>: used to make the text in superscripted style.

<p>Harry _Potter and the <b>Deathly</b>
Hallows ^Book</p>
HTML

Harry Potter and the Deathly Hallows Book

output

Web Programming 15-Oct-22

 46
Images <img>

❖ The src attribute specifies source of the image URL

❖ HTML also requires an alt attribute describing the image.

<img src="images/tobby.jpg" alt=“Tobby from Harry Potter" />

HTML

Web Programming 15-Oct-22

 47
Images <img>

❖ If placed inside an anchor, the image will become a link

❖ The title attribute specifies an optional tooltip

<a href="http://harrypotter.net/">
<img src="images/dumbledore.jpg"
alt=“Dumbledore from Harry Potter"
title="Alas! Ear wax!"/> </a>

HTML

Web Programming 15-Oct-22

 48
Unordered list: <ul>, <li>

❖ ul: represents a bulleted list of items (block)

❖ li: represents a single item within the list (block)

<ul>
<li>No shoes</li>
<li>No shirt</li>
<li>No problem!</li>
</ul>
HTML
• No shoes
• No shirt
• No problem!
output
Web Programming 15-Oct-22
 49
Unordered list: <ul>, <li>

<ul>
<li>Harry Potter characters:
<ul>
<li>Harry Potter</li> • Harry Potter characters:
<li>Hermione</li> • Harry Potter
<li>Ron</li>
• Hermione
</ul>
</li> • Ron
<li>LOTR characters: • LOTR characters:
<ul> • Frodo
<li>Frodo</li> • Bilbo
<li>Bilbo</li> • Sam
<li>Sam</li> output
</ul>
</li>
</ul> HTML

Web Programming 15-Oct-22

 50
Unordered list: <ul>, <li>

❖ If you leave a list open, subsequent contents will be indented

<ul>
<li>No shoes</li>
<li>No shirt</li>
<li>No problem!</li>
<p>Paragraph after list...</p> HTML
• No shoes
• No shirt
• No problem!

Paragraph after list... output

Web Programming 15-Oct-22

 51
Ordered list: <ol>, <li>

❖ ol: represents a numbered list of items

<p>Apple business model:</p>

<ol>
<li>Beat Microsoft</li>
<li>Beat Google</li>
<li>Conquer the world!</li>
</ol> HTML

Apple business model:

1. Beat Microsoft
2. Beat Google
3. Conquer the world output

Web Programming 15-Oct-22

 52
List of definitions: <dl>, <dt>, <dd>

❖ dl represents a list of definitions of terms

❖ dt represents each term, and dd its definition

<dl>
<dt>newbie</dt> <dd>one who does not have mad skills</dd>
<dt>jaded</dt> <dd>tired, bored, or lacking enthusiasm </dd>
<dt>frag</dt> <dd>a kill in a shooting game</dd>
</dl> HTML
newbie
one who does not have mad skills
jaded
Tired, bored, or lacking enthusiasm
frag
a kill in a shooting game output

Web Programming 15-Oct-22

 53
Tables <table>, <tr>, <td>

❖ table defines the overall table, tr each row, and td each

cell

❖ Useful for displaying large row/column data sets

❖ th cells in a row are considered headers

❖ a caption at the start of the table labels its meaning

Web Programming 15-Oct-22

 54
Tables <table>, <tr>, <td>

<table >
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

Web Programming 15-Oct-22

 55
Tables <table>, <tr>, <td>

<table >
<caption>Important data</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

Web Programming 15-Oct-22

 56
Computer code <code>

❖ code: a short section of computer code

<p>
The <code>ul</code> and <code>ol</code>
tags make lists.
</p> HTML
The ul and ol tags make lists.
output

Web Programming 15-Oct-22

 57
Preformatted text <pre>

❖ Displayed with exactly the whitespace / line breaks given in the text

❖ Shown in a fixed-width font by default

<pre>
Bill Gates speaks
You will be assimilated
Microsoft fans delirious
</pre> HTML
Bill Gates speaks
You will be assimilated
Microsoft fans delirious
output

Web Programming 15-Oct-22

 58
Preformatted text <pre>

❖ When showing a large section of computer code, enclose it in a pre to preserve

whitespace and a code to describe the semantics of the content

<pre><code>
public static void main(String[] args) {
System.out.println("Hello, world!");
}
</code></pre> HTML
public static void main(String[] args) {
System.out.println("Hello, world!");
}
output

Web Programming 15-Oct-22

 Summary 59

❖ Introduction to Web programming

❖ Different between static vs dynamic web pages

❖ Different between web vs application server

❖ Understand the client-server programming model.

❖ Learn writing web pages using HTML

Web Programming 15-Oct-22

 Resources 60

❖ https://www.w3schools.com/html/

❖ https://www.geeksforgeeks.org/html/

Web Programming 15-Oct-22

Questions