Web Programming

Introduction to Internet
01 Programming

Dr. Fatma Sakr

 2
Agenda

 Course Objective.

 Introduction to Web programming

 Introduction to HTML

 HTML tags

 Summary

Web Programming 21-Feb-24

 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 21-Feb-24

 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 21-Feb-24

 5

Architecture of web application

 Architecture of web application

it includes three components as following:

1. Front End (UI (User Interface))
2. Request Layer (Web API (Application Programming Interface))
3. Back End (Database, Logic)
 The Front End

The front end is referred to a web design, the only real option for front-end native languages and basically the
standard is Javascript/HTML/CSS. But there are many variations on JavaScript that are used.
 Architecture of web application

It includes three components as following:

The components of web design are three languages:
 HTML(Hyper Text Markup Language) (standard language for each explore or search
engine such as internet explore, chrome, ….etc). The version of html is html5 which is
used in this course. The tool for write the html is notepad or notepad ++ which is the
best tool . It is responsible on building the structure of web page.
 CSS (Cascade Style Sheet) is responsible for colors, style of font, size of font …..etc
 JAVA SCRIPT (JS) is responsible for animation
 9
Materials

 Use the textbook 1:

 Introduction to
the Development
of Web Applications
Using ASP .Net
(Core) MVC

 by Razvan Alexandru Mezei

 10
Materials

 Use the textbook:

 Learning php, mysql & javascript

 by Robin Nixon

Web Programming 21-Feb-24

 11
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 May

Web Programming 21-Feb-24

 12

Introduction

Web Programming 21-Feb-24

 What is the internet? 13

 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 21-Feb-24

 14
Web Browser

 Fetches/Displays documents from web servers

 Mozilla Firefox

 Microsoft Internet Explorer (IE)

 Apple Safari

 Google Chrome

 Opera

Web Programming 21-Feb-24

 Hypertext Transport Protocol (HTTP) 15

 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 21-Feb-24

 16
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 21-Feb-24

 Web Server 17

 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 21-Feb-24

 18
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 21-Feb-24

 19
Static Web Pages

Web Programming 21-Feb-24

 20
Static Web Pages

Web Programming 21-Feb-24

 21
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 21-Feb-24

 22
Dynamic content

Web Programming 21-Feb-24

 23
Dynamic content

Web Programming 21-Feb-24

 24
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 21-Feb-24

 25
Web Languages

 JavaScript: interactive and programmable web pages

 Asynchronous JavaScript and XML (Ajax): accessing data for

web applications

 MariaDB: The MySQL Clone

Web Programming 21-Feb-24

 26

Basic HTML

Web Programming 21-Feb-24

 What is HTML? 27

 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 21-Feb-24

 What is HTML? 28

 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 21-Feb-24

 Why I need to learn HTML? 29

 Front-End Developer.

 Back-End Developer.

Web Programming 21-Feb-24

 30
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 21-Feb-24

 31

Environment

Web Programming 21-Feb-24

 What I need to learn HTML? 32

 Text Editor: Visual Studio Code, Atom.

 Browser: Google Chrome, Firefox.

Web Programming 21-Feb-24

 33
Setting Up Environment

Web Programming 21-Feb-24

 HTML Tags 34

 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 21-Feb-24

 Structure of HTML page 35

Web Programming 21-Feb-24

 Structure of HTML page 36

 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 21-Feb-24

 37
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 21-Feb-24

 38
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 21-Feb-24

 39
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 21-Feb-24

 40
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 21-Feb-24

 41
Horizontal rule <hr />

 Should be immediately closed with />

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

First Paragraph

Second Paragraph

Web Programming 21-Feb-24

 42
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 21-Feb-24

 43
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 21-Feb-24

 44
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 21-Feb-24

 45
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 21-Feb-24

 46
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 21-Feb-24

 47
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 21-Feb-24

 48
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 21-Feb-24

 49
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 21-Feb-24

 50
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 21-Feb-24

 51
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 21-Feb-24

 52
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 21-Feb-24

 53
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 21-Feb-24
 54
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 21-Feb-24

 55
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 21-Feb-24

 56
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 21-Feb-24

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

 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 21-Feb-24

 58
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 21-Feb-24

 59
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 21-Feb-24

 60
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 21-Feb-24

 61
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 21-Feb-24

 62
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 21-Feb-24

 63
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 21-Feb-24

 Summary 64

 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 21-Feb-24

 Resources 65

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

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

Web Programming 21-Feb-24

Questions