These slides are about web engineering and html. The basic introduction about web engineering and web designing.

1. Web Engineering
Instructor : Mushtaq Ahmad
Youtube Channel: How & Why
Facebook:www.facebook.com/HowWhy308

2. Objective
Understand the principles of creating an effective web
page.
Understand Static and Dynamic Websites.
Learn the language of the web: HTML and CSS.
Learn Java Script
Learn Server Side Programming

3. Internet
Internet is a network of computer networks
Data is transmitted by packet switching using the
standard Internet Protocol (IP)
Packet – a unit of information carriage
Packet switching – process of moving packets from
one node (computer device) to another

4. Internet, Packets
and Routing
At the sender, data is broken into packets and sent
to the nearest node (router)
At each router, it sends the packet to another router
that is closer to the final destination
At the receiver, packets are reassembled to get the
original data

5. TCP/IP and
Domain Names
Basic task of IP – moving packets as quickly as
possible from one router to another
Yet, it doesn’t check whether packets are delivered
successfully, thus need TCP
TCP (Transmission Control Protocol) –
disassemble/reassemble packets, error checking

6. TCP/IP and
Domain Names
We need some sort of address in order to identify
different nodes, as if every house has a mailing
address in order to receive mail from others
The one used by Internet Protocol is called IP
address
Every host on the Internet has a unique IP address,
made up of four numbers. E.g.. 192.56.215.131, each
number is between 0 and 255

7. Domain Names
The numbers in an IP address is hard to remember,
while names are easier
Domain Name System – a mapping between the
human-readable name (domain name) of a host and
its IP address
A domain name consists of two or more parts, e.g.
cs.pitt.edu
The rightmost label conveys the top-level domain,
e.g. edu

8. Domain NamesEach label to the left specifies a subdomain, in our
example, subdomain is pitt (University of
Pittsburgh), and sub-subdomain is cs (computer
science).
A top-level domain contains multiple
subdomains, each subdomain can contain
multiple sub-subdomain, so on.
The database contains the mapping between a
domain name and an IP address is stored on a
DNS server.

9. World Wide Web
The World Wide Web (commonly shortened to the
Web) is a system of interlinked, hypertext documents
accessed via the Internet.
It is created to share files/documents and overcome
the barrier of different file formats
Hypertext refers to text on a computer that will lead
the user to other, related information on demand.

10. World Wide Webhypertext documents are created using a special
kind of document formatting or “markup”
language called HyperText Markup Language
(HTML).
HTML is sent or received over
the network using HyperText
Transfer Protocol (HTTP).
A browser is a software program which
interprets the HTML documents and displays it
on the user’s screen.

11. URLs
Each document/resource on the WWW needs to have
an identifier in order to be accessed by others.
A Uniform Resource Identifier (URI), is a compact
string of characters used to identify or name a
resource.
A Uniform Resource Locator (URL) is a URL which
provides means of obtaining the resource by
describing its network “location”.

12. URLs
Two things are given by the URL
Exact location of the document
The method or protocol by which to retrieve and
display the document
Example,
http://www.cs.pitt.edu/~mehmud/cs134/inde
x.html
• http:// – specifies the protocol
• www.cs.pitt.edu – specifies the host name /
domain name
• /~mehmud/cs134/index.html – specifies the path
of the document on the host

13. Putting it All Together

14. Web page
 A document on the World Wide Web.
A Web page consists of an HTML file, with associated
files for graphics and scripts, in a particular directory
on a particular machine (and thus identifiable by a
URL).

15. Web site
A group of related HTML documents and associated files,
scripts, and databases that is served up by an HTTP server
on the World Wide Web.
The HTML documents in a Web site generally cover one or
more related topics and are interconnected through
hyperlinks.
Most Web sites have a home page as their starting point,
which frequently functions as a table of contents for the
site.

16. Web Browser
A software that lets a user view HTML documents and
access files and software related to those documents.
Originally developed to allow users to view or browse
documents on the World Wide Web.
Web browser software is built on the concept of
hyperlinks, which allow users to point and click with a
mouse in order to jump from document to document.
Most Web browsers are also capable of downloading and
transferring files.

17. Web Server
A Web Server is special software, which runs on a
computer and responds to requests made by other
computers on the network.
The web server satisfies the requests of the client
(Web Browser).
It usually has access to a resource, such as data,
that the client wants.
When the resource that the client wants becomes
available, it sends a message to the client.

18. What is HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain
text
HTML documents are also called web pages

19. HTML Tags
HTML tags are keywords (tag names) surrounded by angle
brackets
The text between <html> and </html> describes an HTML
document
The text between <head> and </head> provides information
about the document
The text between <title> and </title> provides a title for the
document
The text between <body> and </body> describes the visible
page content
HTML tags are not case sensitive: <P> means the same as <p>

20. HTML Page Structure

21. Creating HTML PageStep 1: Open Notepad/some other editor
Step 2: Write Some HTML
Step 3: Save the HTML Page
Select File > Save as in the Notepad menu. You
can use either .htm or .html as file extension.
Step 4: View HTML Page in Your Browser

22. HTML Headings
HTML headings are defined with
the <h1> to <h6> tags:
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

23. Element
The HTML <head> element has nothing to do with
HTML headings.
The <head> element is a container for metadata.
HTML metadata is data about the HTML document.
Metadata is not displayed.
The <head> element is placed between the <html>
tag and the <body> tag:

24. HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

25. HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without
starting a new paragraph.
The <br> tag is an empty tag, which means that it has
no end tag.

26. The Poem Problem
This poem will display on a single line:
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>

27. <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-
width font (usually Courier), and it preserves both spaces
and line breaks
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>