UNIT I Notes (Upto HTML)
UNIT I Notes (Upto HTML)
UNIT I Notes (Upto HTML)
Web Essentials: Clients, Servers and Communication – The Internet – World wide web –
HTTP Request Message – HTTP Response Message – Web Clients – Web Servers –
HTML5 – Tables – Lists – Image – HTML5 control elements – Drag and Drop – Audio –
Video controls - CSS3 – Inline, embedded and external style sheets – Rule cascading –
Inheritance – Backgrounds – Border Images – Colors – Shadows – Text – Transformations
– Transitions – Animations. Bootstrap Framework
ARPANET:
The Internet traces its roots to a project of the U.S. Department of Defense’s then named Advanced
Research Projects Agency, or ARPA.
ARPANET provides communication between geographically dispersed computers from different
manufacturers running different operating systems.
The ARPANET computer network was launched in 1969 and by year’s end consisted of four
computers at four sites running four different operating systems.
By 1983, ARPANET nodes were split off to form a separate network called MILNET, there were only
113 nodes in the entire network, and these were primarily at universities and other organizations
involved in DoD-sponsored research.
Email first available on ARPANET in 1972
Internet protocols— including the File Transfer Protocol (FTP) and Simple Mail Transfer Protocol
(SMTP), which underlie many of the Internet’s file transfer and e-mail operations, respectively— were
initially developed under ARPANET.
NSFNET was at the center of the Internet, that is, the collection of computer networks connected via
the public backbone and communicating across networks using TCP/IP.
Primary purpose: connect supercomputer centers
Secondary purpose: provide backbone to connect regional networks
The Internet is the collection of computers that can communicate with one another using TCP/IP
over an open, global communications network.
IP software also adds some error detection information (a checksum) to each packet it creates, so that if
a packet is corrupted during transmission, this can usually be detected by the recipient. The IP standard
calls for IP software to simply discard any corrupted packets.
Limitations of IP:
No guarantee of packet delivery (packets can be dropped)
Communication is one-way (source to destination)
TCP, the Transmission Control Protocol, is a higher-level protocol that extends IP to provide additional
functionality, including reliable communication based on the concept of a connection.
Once a connection has been established, TCP provides reliable data transmission by demanding an
acknowledgment for each packet it sends via IP. Essentially, the software sets a timer after sending
each packet.
The TCP software on the receiving side sends a packet containing an acknowledgment for every TCP-
based packet it receives that passes the checksum test. If the TCP software sending a packet does not
receive an acknowledgment packet before its timer expires, then it resends the packet and restarts the
timer.
TCP adds to IP is the concept of a port. The port concept allows TCP to be used to communicate with
many different applications on a machine
UDP:
UDP (User Datagram Protocol) is an alternative protocol to TCP that also builds on IP. The main
feature that UDP adds to IP is the port concept that we have just seen in TCP. However, it does not
provide the two-way connection or guaranteed delivery of TCP. Its advantage over TCP is speed for
simple tasks.
In UDP
No connection concept
No transmission guarantee
Advantage of UDP vs. TCP:
Lightweight, so faster for one-time message.
DNS(Domain Name Service):
One Internet application that is often run using UDP rather than TCP is the Domain Name Service
(DNS).
DNS is the “phone book” for the Internet
Map between host names and IP addresses
DNS often uses UDP for communication
Internet host names consist of a sequence of labels separated by dots. The final label in a host name is
a top-level domain.
There are two standard types of top-level domain:
generic (such as .com, .edu, .org, and .biz) and
country-code (such as .de, .il, and .mx)
Each top-level domain is divided into subdomains (second-level domains), which can be further
divided into subdomains, etc.
E.g., in www.example.com, example is a second-level domain
A host name plus domain name information is called the fully qualified domain name of the
computer. Above, www is the host name, www.example.com is the FQDN
C:\>nslookup www.example.org
Server: slave9.dns.stargate.net
Address: 209.166.161.121
Name: www.example.org
Address: 192.0.34.166
C:\>nslookup 192.0.34.166
Server: slave9.dns.stargate.net
Address: 209.166.161.121
Name: www.example.com
Address: 192.0.34.166
the qualified name and IP address of the DNS server that is providing the domain name
information
nslookup command can be used to find the IP address given a fully qualified domain name.
Looking up a host name given an IP address is known as a reverse lookup.
Even if multiple qualified names are associated with an IP address, only one of the names
will be returned by a reverse lookup. This is known as the canonical name for the host.
SMTP supports transfer of e-mail between different e-mail servers, while FTP is used for
transferring files between machines. Another higher-level TCP protocol, Telnet, is used to
execute commands typed into one computer on a remote computer. Telnet can also be used to
communicate directly (via keyboard entries) with some TCP-based application. The primary
TCP-based protocol used for communication between web servers and browsers is called the
Hypertext Transport Protocol (HTTP)
START LINE:
GET / HTTP/1.1
Every start line consists of three parts, with a single space used to separate adjacent parts:
1. Request method
2. Request-URI portion of web address
3. HTTP version
HTTP Version:
The initial version of HTTP was referred to as HTTP/0.9. In 1997, HTTP/1.1 was formally defined,
and is currently an Internet Draft Standard .Essentially all operational browsers and servers support
HTTP/1.1
Request-URI portion of web address:
The second part of the start line is known as the Request-URI.
The concatenation of the string http://, the value of the Host header field (www.example.org, in this
example), and the Request-URI (/ in this example) forms a string known as a Uniform Resource
Identifier (URI).
A URI is an identifier that is intended to be associated with a particular resource (such as a web page or
graphics image) on the World Wide Web.
Every URI consists of two parts: the scheme, which appears before the colon (:), and another part that
depends on the scheme.
Uniform Resource Identifier (URI)
Request Method:
GET:
It requests the data from a specified resource.it return the resource specified by the Request-URI as the
body of a response message.
The query string (name/value pairs) is sent inside the URL of a GET request
GET/RegisterDao.jsp?name1=value1&name2=value2
POST- It submits the processed data to a specified resource. Pass the body of this request message on
as data to be processed by the resource specified by the Request-URI.
HEAD: return the same HTTP header fields that would be returned if a GET method were used, but not
return the message body that would be returned to a GET.
PUT: store the body of this message on the server and assign the specified Request-URI to the data
stored so that future GET request messages containing this Request-URI will receive this data in their
response messages.
DELETE : respond to future HTTP request messages that contain the specified Request-URI with a
response indicating that there is no resource associated with this Request-URI.
Status line
Header field(s) (one or more)
Blank line
Message body (optional)
WEB CLIENT:
Web client is software that accesses a web server by sending an HTTP request message and
processing the resulting HTTP response.
Web browsers running on desktop or laptop computers are the most common form of web client
software, but there are many other forms of client software, including text-only browsers,
browsers running on cell phones, and browsers that speak a page (over the phone, for example)
rather than displaying the page.
browser must perform a number of tasks:
WEB SERVER:
1. Receive HTTP request via TCP
2. Map Host header to specific virtual host (one of many host names sharing an IP address)
3. Map Request-URI to specific resource associated with the virtual host
i. File: Return file in HTTP response
ii. Program: Run program and return output in HTTP response
4. Map type of resource to appropriate MIME type and use to set Content-Type header in HTTP
response
5. Log information about the request and response
HTML5:
HyperText Markup Language 5 -markup language that specifies the structure and content of
documents that are displayed in web browsers.
Editing HTML5:
Create HTML5 documents by typing HTML5 markup text in a text editor (such as Notepad, TextEdit,
vi, emacs) and saving it with the .html or .htm filename extension.
Computers called web servers store HTML5 documents. Clients (such as web browsers running on
your local computer or smartphone) request specific resources such as HTML5 documents from web
servers.
Headings:
HTML5 provides six heading elements (h1 through h6) for specifying the relative importance
of information
Heading element h1 is considered the most significant heading and is rendered in the largest
font.
Each successive heading element (i.e., h2, h3, etc.) is rendered in a progressively smaller font.
LINKING:
A hyperlink references or links to other resources, such as HTML5 documents and images.
Web browsers typically underline text hyperlinks and color them blue by default.
<html>
<head>
<title>anchor tag</title>
</head>
<body>
<a href="https://www.google.com"> GO
TO GOOGLE </a>
</body>
</html>
The strong element indicates that the content has high importance. Browsers typically render
such text in a bold font.
Links are created using the (anchor) element.
Attribute href (hypertext reference) specifies a resource’s location, such a
a web page or location within a web page
a file
an e-mail address
When a URL does not indicate a specific document on the website, the web server returns a
default web page called index.html, but most web servers can be configured to use any file as the
default web page for the site.
If the web server cannot locate a requested document, it returns an error indication to the web browser
(known as a 404 error), and the browser displays a web page containing an error message.
Hyperlinking to an E-Mail Address:
Anchors can link to an e-mail address using a mailto:URL. When a user clicks this type of anchored
link, most browsers launch the default e-mail program (e.g., Mozilla Thunderbird, Microsoft Outlook
or Apple Mail) to enable the user to write an e-mail message to the linked address.
IMAGE:
The img element’s src attribute specifies an image’s location
Every img element must have an alt attribute, which contains text that is displayed if the client cannot
render the image.
The alt attribute makes web pages more accessible to users with disabilities, especially vision
impairments.
Width and height are optional attributes. If omitted, the browser uses the image’s actual width and
height Images are measured in pixels.
alt attribute:
A browser may not be able to render an image. Every img element in an HTML5 document must have
an alt attribute. If a browser cannot render an image, the browser displays the alt attribute’s value
<!DOCTYPE html>
<html>
<head>
<title>anchor tag</title>
</head>
<body>
<img src="apple.jpg" alt="cannot be displayed"/>
</body>
</html>
Void Elements:
Some HTML5 elements (called void elements) contain only attributes and do not markup text i.e., text
is not placed between a start and an end tag. void elements can be terminated (such as the img element)
by using the forward slash character (/) inside the closing right angle bracket (>) of the start tag.
<img src = "jhtp.png" width = "92" height = "120" alt = "Java How to Program book cover" />
Horizontal rule:
A horizontal rule, indicated by the <hr> tag renders a horizontal line with extra space above and below
it in most browsers.
HTML LIST:
HTML can have Unordered Lists, Ordered Lists, or Description Lists
Unordered List:
Style Description
list-style type:disc The list items will be marked with bullets (default)
list-style-type:circle The list items will be marked with circles
list-style-type:square The list items will be marked with squares
list-style-type:none The list items will not be marked
DISC CIRCLE
<ul style="list-style-type:disc"> <ul style="list-style-type:circle">
<li>Coffee</li> <li>Coffee</li>
<li>Tea</li> <li>Tea</li>
<li>Milk</li> <li>Milk</li>
</ul> </ul>
Using a type attribute <ul type="disc">, instead of <ul style="list-style-type:disc">, also works.
But in HTML5, the type attribute is not valid in unordered lists, only in ordered list.
HTML TABLE:
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
<html> Output:
<head>
<title>Table</title>
</head>
<body>
<table border="1" cellspacing="0">
<caption><b>Earnings</b></caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2" >50<td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2"> March sickleave</td>
<td>not applicable
</tr>
</tbody>
<tfoot>
<tr>
<th>Sum</td>
<th>180</td>
</tr>
</tfoot>
</table>
</body>
</html>
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
HTML FORMS:
Submit Button:
<input type="submit"
value="submit"/>
COLOR:
<input type=color>
DATE:
<input type=date>
The date input type enables the user to
enter a date in the form
DATETIME:
<input type=datetime>
number:<input type="number"
min="1" max="7" Value="6">
<input type="checkbox"
name="cse" value="cse">
<input type="radio" value="male">
<header>
<h1>American Airlines</h1>
<h2>Doing What We Do Best</h2>
</header>
Nav:
• Groups of hyperlinks on an HTML5 web page, which enable the user to navigate around the
page or website, should be enclosed between <nav> </nav> tags.
• This may typically be a horizontal menu in the document header, or a vertical menu down the
edge of the page.
• Note that the <nav> element is simply a wrapper around the menu – it does not replace any
structural elements.
<header>
<img id=”logo” src=”logo.png” alt=”Logo”>
<h1>Building better websites</h1>
<nav id=”horizontal”>
<p>
<a href=”#html”>Markup</a> |
<a href=”#js”>Scripting</a> |
<a href=”#css”>Style Sheets</a> </p>
</nav>
</header>
<h1>Newspaper</h1>
Next, in the body, insert two section elements
<section>
<!-- Articles to go here -->
</section>
<section>
<!-- Articles to go here -->
</section>
ASIDE:
• <aside> </aside> tags that can be nested within an <article> element in order to incorporate
content that is somewhat related to the main content of that article.
• These allow for supplemental, yet separate, content to be included – typically displayed as a
sidebar or footnote
<article>
<h2>Cynicism</h2>
<p> <q>A cynic is a man who knows the price of everything<br>but the value of nothing.</q>
<br>
</p>
<aside>Oscar Wilde (1854 – 1900)<br> was an Irish writer and poet.</aside>
</article>
Create a style sheet to control the position of the paragraph and aside element in the first article
{display: table-cell; padding-right: 20px ; }
FOOTER:
• a <footer> element might contain the author’s name, the author’s contact details within an
<address> element, or copyright and legal disclaimers within a <small> element.
• <Footer><small>Copyright © Example Corporation</small></Footer>
FIGURE:
• An <img> tag can be nested within a <figure> </figure> element to embed an image that is
related to the main text content, but whose removal would not disrupt the text’s meaning.
<figure >
<img src=”front.png” alt=”Front-end” width=”118” height=”108”>
<figcaption>Figure 1:Front-end Technologies</figcaption>
</figure>
AUDIO:
• External audio resources, such as MP3 music files, can be embedded in an HTML5 document
using <audio> </audio> tags.
• The <audio> element can include an src attribute, to specify the URL of the audio resource to
embed, and may include additional attributes to determine how the audio resource will be
used:
• autoplay – a Boolean attribute that specifies the browser should immediately begin
playing the audio resource.
• loop – a Boolean attribute that specifies the browser should play the audio resource
repeatedly.
• controls – a Boolean attribute that specifies the browser should display user controls to
start or stop the audio playing.
• preload – accepts values of “auto” or “none” to suggest the browser should load the
audio resource so it is ready to play.
• Boolean attributes, like the autoplay, loop and controls attributes, need have no assigned value
– their presence alone within the element is sufficient for the browser to understand their
purpose.
• Browsers rely upon an in-built “codec” (coder-decoder) to decode audio resources so they can
be played. Sadly, not all browsers incorporate the same audio codec:
• Advanced Audio Coding (AAC) – codec “mp4a.40.2” is supported by modern browsers such
as Microsoft Edge, Internet Explorer, Firefox, and Chrome for MP3 audio.
• Ogg audio – codec “vorbis” is supported by other browsers for audio files in OGG format.
<audio src=”audio.mp3” autoplay > </audio>
<audio src="audio.mp3" controls> </audio>
Embedding video:
• External video resources, such as MP4 video files, can be embedded in an HTML5 document
using <video> </video> tags.
• To determine how the video resource will be used, the <video> element can include src,
autoplay, loop, controls and preload attributes, just like the <audio> element in the previous
example.
• Additionally, the dimensions of the area in which to display the video on the page can be
specified to width and height attributes.
<video src="video.mp4"controls >
</video>