Web Design and Programming-Lab-3-HTML-I-Exercise

CSE-312
Web Design and Programming Lab-I
Lab-3: HTML-I
Md. Rafsan Jani
Assistant Professor
Department of Computer Science and Engineering
Jahangirnagar University

Internet
 What the Internet is:
–A world-wide network
of computer
networks
–At the lowest level,
since 1982, all
connections useTCP/IP
–TCP/IP hides the
differences among
devices connected to
the Internet
2

History of Internet
Origins
–In the 1960s, the U.S. Department of Defense (DoD)
became interested in developing a new large-scale
computer network.
–The purposes of this network were communications,
program sharing, and remote computer access for
researchers working on defense-related contracts.
–One fundamental requirement was that the network be
sufficiently robust so that even if some network nodes
were lost to sabotage, war, or some more benign cause,
the network would continue to function.
3

History of Internet Cont…
Origins cont…
–The DoD’s Advanced Research Projects Agency (ARPA)
funded the construction of the first such network, which
connected about a dozen ARPA funded research
laboratories and universities.
–The first node of this network was established at UCLA
in 1969
–Because it was funded by ARPA, the network was named
ARPAnet.
• Despite the initial intentions, the primary early use of ARPAnet
was simple text-based communications through electronic mail.
4

Origins cont…
–Because ARPAnet was available only to laboratories and
universities that conducted ARPA-funded research, the
great majority of educational institutions were not
connected.
–As a result, several other networks were developed
during the late 1970s and early 1980s, with BITNET and
CSNET among them.
–BITNET, which is an acronym for Because It’s Time
Network, began at the City University of NewYork.
• It was built initially to provide electronic mail and file transfers.
5

Origins cont…
–CSNET, which is an acronym for Computer Science
Network, connected the University of Delaware, Purdue
University, the University of Wisconsin, the RAND
Corporation, and Bolt, Beranek, and Newman (a research
company in Cambridge, Massachusetts). Its initial purpose
was to provide electronic mail.
–For a variety of reasons, neither BITNET nor CSNET
became a widely used national network.
6

Origins cont…
–A new national network, NSFnet, was created in 1986.
–It was sponsored, of course, by the National Science
Foundation (NSF). NSFnet initially connected the NSF-
funded supercomputer centers that were at five
universities.
–Soon after being established, it became available to other
academic institutions and research laboratories.
–By 1990, NSFnet had replaced ARPAnet for most
nonmilitary uses, and a wide variety of organizations had
established nodes on the new network by 1992, NSFnet
connected more than one million computers around the
world. 7

Origins cont…
–In 1995, a small part of NSFnet returned to being a
research network.
–The rest became known as the Internet, although this
term was used much earlier for both ARPAnet and
NSFnet.
8

Internet History Summary
Origins
–ARPAnet - late 1960s and early 1970s
• Network reliability
• For ARPA-funded research organizations
BITnet, CSnet - late 1970s & early 1980s
• email and file transfer for other institutions
–NSFnet - 1986
• Originally for non-DOD funded places
• Initially connected five supercomputer centers
• By 1990, it had replaced ARPAnet for non-military uses
• Soon became the network for all (by the early 1990s)
–NSFnet eventually became known as the Internet
9

Internet Protocols
Internet Protocol (IP) Addresses
–Every node has a unique numeric address
–Form: 32-bit binary number
• IP addresses usually are written (and thought of) as four 8-bit
numbers, separated by periods
• New standard, IPv6, has 128 bits (1998)
Organizations are assigned groups of IPs for their
computers
– For example, a small organization may be assigned 256 IP
addresses, such as 191.57.126.0 to 191.57.126.255.
10

Domain Names
Domain names
–Because people have difficulty dealing with and
remembering numbers, machines on the Internet also
have textual names
–Form: host-name.domain-names
–First domain is the smallest; last is the largest
–Last domain specifies the type of organization
–Fully qualified domain name - the host name and all of
the domain names
–DNS servers - convert fully qualified domain names to
IPs 11

Host & Domain Names
 Each host name on a subnet must be unique
 There is a hierarchy of domain names
– Top level
• Country (if not US) – e.g. BD, UK, FR, IE
• Category - COM, MIL, GOV, EDU, ORG etc (or
COM.BD,AC.BD, GOV.BD, ORG.BD etc)
• NB: domain registration does not necessarily correspond
to physical location!
– Second level
• Organisation (e.g. JU.AC.BD)
– Third level
• Subnet (e.g. CSE.JU.AC.BD)
 Host names may be aliased
 Host names are obtained from databases called name servers
12

IP Numbers and domain names
 BdRen (Bangladesh Research and Education Network)
–*.ac.bd
–128.*.*.*
 Jahangirnagar University
–*.ju.ac.bd (also aliases – e.g. *.juniv.ac.bd)
–128.243.*.*
 Computer Science
–*.cs.ju.ac.bd
–128.243.20.* 128.243.21.* 128.243.22.*
 Library (Unix server)
–library.cs.ju.ac.bd
–128.243.21.16
13

Domain Name Conversion
 Fully qualified domain names must be converted to IP
numbers before communication can take place over the
Internet
–DNS servers
14

Other Protocols
Problem: By the mid-1980s, several different
protocols had been invented and were being used
on the Internet, all with different user interfaces
(e.g. telnet, FTP, Usenet, mailto)
–telnet, was developed to allow a user on one computer
on the Internet to log onto and use another computer
on the Internet;
–FileTransfer Protocol (ftp), was developed to transfer files
among computers on the Internet;
–Usenet, was developed to serve as an electronic bulletin
–mailto, was developed to allow messages transfer 15

The World-Wide Web
A possible solution to the proliferation of different
protocols being used on the Internet
Origins
–Tim Berners-Lee at Conseil Européen pour la
Recherche Nucléaire (CERN) or European Organization
for Particle Physics proposed the Web in 1989
• Purpose: to allow scientists to have access to many databases
of scientific work through their own computers
–Document form: hypertext
–Pages? Documents? Resources?
• We’ll call them documents
–Hypermedia – more than just text – images, sound, etc.
16

The World-Wide Web
Web or Internet?
–It is important to understand that the Internet and the
Web are not the same thing.
–The Internet is a collection of computers and other
devices connected by equipment that allows them to
communicate with each other.
–Where as, the Web is a collection of software and
protocols that has been installed on most, if not all, of
the computers on the Internet.
–Some of these computers run Web servers, which
provide documents, but most run Web clients, or
browsers, which request documents from servers and
display them to users. 17

Client and Server
 Clients and Servers are programs that
communicate with each other over the Internet
 A Server runs continuously, waiting to be contacted
by a Client
–Each Server provides certain services
–Services include providing web pages
 A Client will send a message to a Server requesting
the service provided by that server
–The client will usually provide some information,
parameters, with the request
18

Web Browsers
Browsers are clients - always initiate, servers react
(although sometimes servers require responses)
Mosaic - NCSA (Univ. of Illinois), in early 1993
–First to use a GUI, led to explosion ofWeb use
–Initially for X-Windows, under UNIX, but was ported to
other platforms by late 1993
Most requests are for existing documents, using
HyperText Transfer Protocol (HTTP)
–But some requests are for program execution, with the
output being returned as a document
19

Web Browsers Statistics
Source: https://www.w3schools.com/browsers/ 20

Web Servers
Provide responses to browser requests, either
existing documents or dynamically built documents
Browser-server connection is now maintained
through more than one request-response cycle
All communications between browsers and servers
use HypertextTransfer Protocol (HTTP)
21

Web Server Operation
• Web servers run as background processes in
the operating system
–Monitor a communications port on the host,
accepting HTTP messages when they appear
• All current Web servers came from either
1.The original from CERN
2.The second one, from NCSA
22

Web Server Operation Details
• Web servers have two main directories:
1.Document root (servable documents)
2.Server root (server system software)
• Document root is accessed indirectly by clients
–Its actual location is set by the server configuration file
–Requests are mapped to the actual location
• Virtual document trees
• Virtual hosts
• Proxy servers
• Web servers now support other Internet protocols
23

Web Server Operation : Apache
•Apache (open source, fast, reliable)
–Directives (operation control):
ServerName
ServerRoot
ServerAdmin,
DocumentRoot
Alias
Redirect
DirectoryIndex
UserDir
24

Web Server Operation : IIS
•IIS
-Internet Information Server (IIS) by Microsoft
-Operation is maintained through a program with a GUI
interface
25

URLs
General form:
scheme:object-address
–The scheme is often a communications protocol, such as
http, https, telnet or ftp
For the http protocol, the object-address is: fully
qualified domain name/doc path
For the file protocol, only the doc path is needed
28

URLs
Host name may include a port number, as in
zeppo:80 (80 is the default, so this is silly)
URLs cannot include spaces or any of a collection
of other special characters (semicolons, colons, ...)
The doc path may be abbreviated as a partial path
–The rest is furnished by the server configuration
If the doc path ends with a slash, it means it is a
directory
29

Multipurpose Internet Mail Extensions (MIME)
Originally developed for email
Used to specify to the browser the form of a file
returned by the server (attached by the server to
the beginning of the document)
Type of specifications
–Form: type/subtype
• The most common MIME types are text, image, and
video. The most common text subtypes are plain and
html. Some common image subtypes are gif and jpeg.
Some common video subtypes are mpeg and quicktime.
–Examples: text/plain, text/html, image/gif, image/jpeg
30

Multipurpose Internet Mail Extensions (MIME)
Server gets type from the requested file name’s
suffix (.html implies text/html)
Browser gets the type explicitly from the server
Experimental types
Subtype begins with x-
–e.g., video/x-msvideo
Experimental types require the server to send a
helper application or plug-in so the browser can
deal with the file
31

The Hyper Text Transfer Protocol
 The protocol used by ALLWeb communications
 Invented byTim Berners-Lee in 1990
–RFC 1945 (1996) - HTTP/1.0
–RFC 2068 (1997) - HTTP/1.1
–RFC 2616 (1999) - HTTP/1.1
• (update to 2068)
 Application level, client-server protocol
–Primarily for distributed hypermedia systems
–Flexible - thus has many other uses - e.g.:
• Nameservers
• Distributed & collaborative document management
systems
32

Features of HTTP
 HTTP is small and fast
–Minimal performance overhead
–Easy to implement
 HTTP is a stateless protocol
–Each request is an independent transaction - unrelated
to any previous requests (unlike session-based
protocols, e.g. FTP)
–Advantage
• Simplifies server design - information about previous
transactions does not need to be stored
–Disadvantage
• More information must be included in each request
33

HTTP Operation
 On the Internet HTTP usually uses TCP/IP connections
 TCP Port 80 is the default (though others can be
specified)
 HTTP uses a Request/Response paradigm
–Client establishes a connection to the server, and
sends it a request
–Server responds to the request by generating a
response (which may or may not contain content)
HTTP Server
Apache
MS IIS
Client
Firefox
Internet Explorer
HTTP request
(URL)
HTTP response
(HTML data) 34

HTTP Request
 Delivered from a client to a server containing instructions
for the server
 Contains
–the method to be applied to the data resource
–the identifier of the resource
–the protocol version in use
 Most commonly used methods:
–GET - Fetch a document
–HEAD - Fetch just the header of the document
–POST - Execute the document, using the data in body
–PUT - Store a new document on the server
–DELETE - Remove a document from the server 35

Request message
METHOD /path-to-resource HTTP/version-number
Header-Name-1: value
Header-Name-2: value
[optional request body]
General request message structure
GET /index.html HTTP/1.1
Host: www.juniv.edu
Accept: text/*
User-Agent: Mozilla/2.02Gold (WinNT; I)
Example
36

HTTP Headers
Four categories of header fields:
General, request, response, & entity
Common request fields:
Accept: text/plain
Accept: text/*
If-Modified_since: date
Common response fields:
Content-length: 488
Content-type: text/html
37

HTTP Response
 Message generated by a server after receiving and
interpreting a request
 Responses contain:
–Status line with the protocol version, a status code, and
a “reason phrase”
–Response-Header (containing information about the
server)
–Entity Header (meta-information)
–Entity Body (data)
38

Response message
HTTP/version-number status-code
message
Response-Header-Name-1: value
Response-Header-Name-2: value
Entity-Header-Name-1: value
Entity-Header-Name-2: value
[optional entity body]
General response message structure
HTTP/1.1 200 OK
Server: Apache (Red-Hat/Linux)
Content-Type: text/html
Content-Length: 9934
<HTML>
<HEAD>
<TITLE>School of Computer
Science</TITLE>
…
Example
39

HTTP Response
Status code is a three-digit number; first digit
specifies the general status
1 => Informational
2 => Success
3 => Redirection
4 => Client error
5 => Server error
The header field, Content-type, is required
40

Some HTTP Status Codes
 200 : OK
 201 : Created
 202 :Accepted
 204 : No Content
 301 : Moved Permanently
 302 : Moved Temporarily
 400 : Bad Request
 401 : Unauthorized
 403 : Forbidden
 404 : Not Found
 500 : Internal Server Error
 503 : Service Unavailable
41

Introduction to HTML
 HTML, or HyperText Markup Language is designed
to specify the logical organization of a document,
with important hypertext extensions.
–hypertext refers to the fact thatWeb pages can contain
multimedia, provide links for jumping within & without
–markup refers to the fact that it works by augmenting
text with special symbols (tags) that identify structure
and content type
 HTML allows you to mark selections of text as titles
or paragraphs, and then leaves the interpretation of
these marked elements up to the browser.
–For example, one browser may indent the beginning of a
paragraph, while another may only leave a blank line.
42

 It is not designed to be the language of a word processor
such as MSWord.
 HTML instructions divide the text of a document into
blocks called elements.
 These can be divided into two broad categories –
– those that define how the BODY of the document is to be
displayed by the browser,
– and those that define information `about' the document, such
as the title or relationships to other documents.
 The detailed rules for HTML (the names of the
tags/elements, how they can be used) are defined using
another language known as the standard generalized
markup language, or SGML.
43

 SGML is wickedly difficult, and was designed for
massive document collections.
 Fortunately, HTML is much simpler! However, SGML
has useful features that HTML lacks.
 For this reason, markup language and software
experts have developed a new language, called XML
(the eXtensible markup language) which has most of
the useful features of HTML and SGML.
44

History of HTML
 HTML 1.0 was originally developed by Tim Berners-
Lee while at CERN, and popularized by the Mosaic
browser developed at National Center for
Supercomputing Applications (NCSA) in 1989.
 During the course of the 1990s it has blossomed
with the explosive growth of the Web and has been
extended in a number of ways.
 The Web depends on Web page authors and
vendors sharing the same conventions for HTML.
 HTML 2.0 was developed under the aegis of the
Internet Engineering Task Force (IETF) to codify
common practice in late 1994.
45

History of HTML
 In late 1994, Tim Berners-Lee, who developed the
initial version of HTML, started the World Wide Web
Consortium (W3C), whose primary purpose was to
develop and distribute standards for Web technologies,
starting with HTML.
 HTML 3.2 (1996) W3C proposed much richer
versions.
– Achieving interoperability lowers costs to content providers
since they must develop only one version of a document.
– If the effort is not made, there is much greater risk that the
Web will devolve into a proprietary world of incompatible
formats, ultimately reducing the Web's commercial potential
for all participants.
46

History of HTML
 The HTML 4.0 was published in late 1997 by W3C
 The 4.01 version of HTML was approved by W3C in
late 1999
 HTML5 can be said for as an extended version of
HTML 4.01 which is the latest version, published in
the year 2014.
 Each version of HTML has attempted to reflect
greater consensus among industry players so that
the investment made by content providers will not
be wasted and that their documents will not
become unreadable in a short period of time
47

HTML Vision
 HTML has been developed with the vision that all
manner of devices should be able to use information
on theWeb:
–PCs with graphics displays of varying resolution and
color depth,
–cellular telephones,
–handheld devices,
–devices for speech for output and input,
–computers with high or low bandwidth, and so on.
48

HTML Tags
 HTML tags can be considered as hidden keywords
or commands incorporated in HTML which holds
the capability to define how your browser will
display the content and format of the web page.
 Most tags of HTML have two sections, an opening,
and a closing part, and any text written within that
has its effect based on the category of the tag.
 The most common example is the <html> tag which
has both starting tag and ending tag.
 HTML tag which is usually written as <html>….
</html> or <HTML>…. </HTML> is the only tag
which is a must for writing HTML pages
50

HTML Tags
 HTML tag has both a opening <html> and a closing
tag </html>.
 The closing of tags is done by a forward slash (/) at
the very start of the tag name.
 These types of tags having both opening and closing
tags are called container tags.
 Those who only have an opening tag and no closing
tag are called empty tags.
51

HTML Elements
 HTML Elements represent semantics, or meaning.
–For example,The title element represents the title of the
document.
–Most HTML elements are written with a start tag (or
opening tag) and an end tag (or closing tag), with the
content in between.
 Elements can also contain attributes that define
additional properties of an element. For example, a
paragraph, which is represented by the p element,
would be written as:
52

HTML Tags Vs Elements
 Technically, an HTML element is the collection of
start tag, its attributes, an end tag and everything in
between.
 On the other hand an HTML tag either opening or
closing is used to mark the start or end of an
element.
 However, in common usage the terms HTML
element and HTML tag are interchangeable i.e. a tag
is an element and element is a tag.
53

HTML Attribute
 Attribute is the characteristics of any HTML tag that needs
to be placed within the opening tag.
 Attributes are case insensitive.
 HTML attributes consist of two parts:
– a name and
– a value
 For an attribute, the name defines the property to be
implemented.
– For example, BODY Tag, <body> carries many attributes such as
bgcolor, background using that you can give a specific image or
background texture to your page.
 The value defines the value which you want to assign to the
property and is set within quotations.
54

HTML Attribute
 There are four essential attributes which you can
implement on almost all HTML elements:
–id
–title
–class
–style
55

id Attribute
 This attribute can be implemented for providing
unique identification to any element.
 There are two primary reasons that you might want
to use an id attribute on an element.
–The id attribute provides a unique identifier which
eventually makes possible in identifying the HTML
element.
–When you are containing two elements having the same
name within the same script, id attribute helps to
distinguish the two same elements via the unique ID.
<p id = "para1"> Paragraph 1 in your HTML document.</p>
<p id = "para2"> Paragraph 2 in your HTML document.</p>
56

title Attribute
 The title attribute gives a recommended title for
your element.
 Its behavior depends on the element upon which it's
implemented, even though this is often implemented
to display a tooltip if the cursor hovers (comes
over) the element.
<h3 title="Welcome to my Journal">Please visit</h3>
57

class Attribute
 This attribute is implemented by combining an
element through a stylesheet (CSS), and identify the
element's class.
 For more about class attribute, you can follow the
Cascading Style Sheet (CSS).
 Here's an example of class attribute:
<p class = "classname1">
This is a sample paragraph text.
</p>
58

style Attribute
 This attribute gives you a chance for specifying the
rules for Cascading Style Sheet (CSS) in your
element.
 Here's an example of style attribute:
<p style = "font-family:arial;">An example of style attribute.</p>
59

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<p id="test">See It!!</p>
</body>
</html>
60

Example Anatomy
 The <!DOCTYPE html> declaration defines this
document to be HTML5
 The <html> element is the root element of an
HTML page
 The <head> element contains meta information
about the document
 The <title> element specifies a title for the
document
 The <body> element contains the visible page
content
 The <h1> element defines a large heading
 The <p> element defines a paragraph 61

<!DOCTYPE> Tag
 The <!DOCTYPE> declaration represents the
document type, and helps browsers to display web
pages correctly.
 It must only appear once, at the top of the page
(before any HTML tags).
 The <!DOCTYPE> declaration is not case sensitive.
 The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
62

HEAD Tag
 The HEAD tag is another important tag used to add
the header in HTML.
 It is used to give various additional information
about the page along with description and title to
your page; which gets displayed in the title bar or
acts as an indicator of what information to use or
on which page you are currently in.
 HTML metadata is data about the HTML document.
Metadata is not displayed. Metadata typically define
the document title, character set, styles, links,
scripts, and other meta information.
 The following tags describe metadata: <title>,
<style>, <meta>, <link>, <script>, and <base>. 63

<title>Element
 The <title> element defines the title of the
document, and is required in all HTML/XHTML
documents.
 The <title> element:
–defines a title in the browser tab
–provides a title for the page when it is added to favorites
–displays a title for the page in search engine results
64

Body Element
 This tag is used to give the body, i.e., the visible
section of the HTML document.
 All formatting and writing of content are done in
the opening <body> and the closing </body> tag.
 If your HTML code does not have a body tag
associated with it, the HTML code will still run as
written in the above example (only show the title in
the title bar).
 It is to be noted that, together these three
necessary tags, <html>, <head> and <body> makes
up the skeleton of an HTML document and these
are the only foundation tags upon which all web
pages are created or developed. 65

<hn>Element
 Any content or article starts having a nice heading,
provides the headline or the topic name of any
document.
 Similarly, in HTML code also, different sizes of
heading can be given on your web page.
 HTML allows six sizes for heading that uses
elements name in the format of <hn>, where n
starts from 1 till 6; like this:
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
66

Aligning Text
 The ALIGN attribute can be inserted in the <p>
and <hn> tags to right justify, center, or left justify
the text
 For example,
<h1 ALIGN=CENTER> The NewYork Times </h1>
would create a centered heading of the largest size

HTML Formatting
 Formatting is one of the crucial sections of every
development.
 For making any project or article or content looks
attractive, readable and user-intractable, formatting
plays a very important role.
 Formatting can be defined as the appearance of your
documentation or presentation of your HTML code
in a meaningful and nicer way.
 Formatting is mainly done for making the layout
attractable.
68

HTML Formatting Cont…
Tag Meanings
<u> For making text underlined.
<b> For making the text Bold.
<strong> Used in those texts which are important and
needs to highlight.
<i> For making the text italics.
<em> For emphasizing the texts.
<mark> To make the texts marked or highlighted.
<small> For making texts small in size than the regular
texts surrounded.
<big> For making texts bigger or larger than the rest
of the texts surrounded.
69

HTML Formatting Cont…
70
Tag Meanings
<del> To show texts that have been deleted or removed or
replaced.
<ins> To show texts that have been inserted or added
<sub> To give a subscript effect to any text.
<sup> To give a superscript effect to any text.
<strike> For displaying any text as strikethrough.
<tt> For displaying any font as a mono-spaced font.
This tag is abbreviated as typewriter type font tag.

HTML Comments
71
 Comments are an essential part of HTML; it helps
to provide the details of what is written in the
HTML source code.
 HTML comment tags are completely ignored to
display by the browsers. It's used to insert
comments into the source code.
–When more than one developers work on the same
application or web page, HTML comments can help to
understand the source code.
–Comment can be used anywhere to add information
about HTML, which will be helpful for developers to
understand the existing code in the future easily.

HTML Comments
72
 For writing comments in HTML, they begin with
the <! -- (starting comment tag) and ends with the
close comment tag, i.e. -->.
 Comments in HTML can be visible if and only if
anyone tries to view the source code of the page,
but anything is written within  does not
get rendered when you will render your HTML
based web page through your browser.

Resources
 https://www.w3schools.com/html/default.asp
 https://code.visualstudio.com/Download
 https://www.freecodecamp.org/learn
 https://caniuse.com/
73

Web Design and Programming-Lab-3-HTML-I-Exercise

More Related Content

Similar to Web Design and Programming-Lab-3-HTML-I-Exercise

Recently uploaded

Web Design and Programming-Lab-3-HTML-I-Exercise