Lect 01-SET 372-Internet Web Programming - HTML 1

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

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

5
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.
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

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

12
Introduction

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.

14
Web Browser
 Fetches/Displays documents from web servers
 Mozilla Firefox
 Microsoft Internet Explorer (IE)
 Apple Safari
 Google Chrome
 Opera

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

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

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

19
Static Web Pages

20
Static Web Pages

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.

22
Dynamic content

23
Dynamic content

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

25
Web Languages
 JavaScript: interactive and programmable web pages
 Asynchronous JavaScript and XML (Ajax): accessing data for

web applications
 MariaDB: The MySQL Clone

26
Basic HTML

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

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

Why I need to learn HTML? 29
 Front-End Developer.
 Back-End Developer.

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)

31
Environment

What I need to learn HTML? 32
 Text Editor: Visual Studio Code, Atom.
 Browser: Google Chrome, Firefox.

33
Setting Up Environment

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>

Structure of HTML page 35

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>

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

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

39
Comments 
<p>CS courses are  a lot of fun!</p>
HTML
CS courses are a lot of fun!
output

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

41
Horizontal rule <hr />
 Should be immediately closed with />

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

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>

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" />

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

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

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

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

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

49
Formatting Elements
 <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

output

50
Formatting Elements
 <sub>: used to make the text in subscripted style.
 <sup>: used to make the text in superscripted style.

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

output

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

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

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
54
<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

55
 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

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

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

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

59
<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>

60
<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>

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

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

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

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

Resources 65
 https://www.w3schools.com/html/
 https://www.geeksforgeeks.org/html/

Questions

Lect 01-SET 372-Internet Web Programming - HTML 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lect 01-SET 372-Internet Web Programming - HTML 1

Uploaded by

Copyright:

Available Formats

Web Programming

Dr. Fatma Sakr

 Introduction to Web programming

Web Programming 21-Feb-24

 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

 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

Architecture of web application

it includes three components as following:

It includes three components as following:

 Use the textbook 1:

 by Razvan Alexandru Mezei

 Use the textbook:

 Learning php, mysql & javascript

Web Programming 21-Feb-24

 Design and implementation of a professional website:

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

 Proposal to be submitted by 29th May

Web Programming 21-Feb-24

Web Programming 21-Feb-24

 The Internet is a global network of billions of computers

 A markup language called Hypertext Markup Language,

 To bring these together, the first web browser and web

Web Programming 21-Feb-24

 Fetches/Displays documents from web servers

 Microsoft Internet Explorer (IE)

Web Programming 21-Feb-24

 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

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

 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

 Software that listens for web page requests and serve

 Web Server is mostly designed to serve static content

 Have plugins to support scripting languages like Perl, PHP,

Web Programming 21-Feb-24

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

Web Programming 21-Feb-24

Web Programming 21-Feb-24

Web Programming 21-Feb-24

 Request for the same document returns different results

 The Web server needs to run certain programs(Servlet, PHP,

Web Programming 21-Feb-24

Web Programming 21-Feb-24

Web Programming 21-Feb-24

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