UNIT I WEBSITE BASICS, HTML 5, CSS 3, WEB 2.

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.

BASIC INTERNET PROTOCOL:

A computer communication protocol is a detailed specification of how communication between two
computers will be carried out in order to serve some purpose.
TCP/IP:
TCP/IP is fundamental to the definition of the Internet. TCP and IP are actually two different
protocols.
IP, the Internet Protocol:
A key element of IP is the IP address, which is simply a 32-bit number. At any given moment, each
device on the Internet has one or more IP addresses associated with it (although the device associated
with a given address may change over time).
IP addresses are normally written as a sequence of four decimal numbers separated by periods
(called “dots”), as in 192.0.34.166. Each decimal number represents one byte of the IP address. The
function of IP software is to transfer data from one computer (the source) to another computer (the
destination)
The IP software running on the source creates a packet, which is a sequence of bits representing the
data to be transferred along with the source and destination IP addresses and some other header
information, such as the length of the data.
If the destination computer is on the same local network as the source, then the IP software will send
the packet to the destination directly via this network.
If the destination is on another network, the IP software will send the packet to a gateway, which is a
device that is connected to the source computer’s network as well as to at least one other network.
The gateway will select a computer on one of the other networks to which it is attached and send the
packet on to that computer. This process will continue, with the packet going through perhaps a dozen
or more hops, until the packet reaches the destination computer.
IP software on that computer will receive the packet and pass its data up to an application that is
waiting for the data

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)

World Wide Web:

 The Web is the collection of machines (Web servers) on the Internet that provide information,
particularly HTML documents, via HTTP.
 Machines that access information on the Web are known as Web clients. A Web browser is
software used by an end user to access the Web.
  Originally, one of several systems for organizing Internet-based information
Competitors: Gopher, ARCHIE
 Distinctive feature of Web: support for hypertext (text containing links) Communication via
Hypertext Transport Protocol (HTTP) and Document representation using Hypertext Markup
Language (HTML).
Hypertext Transport Protocol HTTP:
 HTTP is a form of communication protocol, in particular a detailed specification of how web
clients and servers should communicate.
 The basic structure of HTTP communication follows what is known as a request–response
model. Client sends a request.Server sends a response
 HTTP is a stateless protocol:
 The protocol does not require the server to remember anything about the client between
requests.
 The protocol dictates that an HTTP interaction is initiated by a client sending a request message
to the server; the server is then expected to generate a response message.
 HTTP implementations send these messages using TCP.
 Typical browser-server interaction:
o User enters Web address in browser
o Browser uses DNS to locate IP address
o Browser opens TCP connection to server
o Browser sends HTTP request over connection
o Server sends HTTP response to browser over connection
o Browser displays body of response in the client area of the browser window.

HTTP Request Message:

Every HTTP request message has the same basic structure:
Start line
Header field(s) (one or more)
Blank line
Message body (optional)

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)

Syntax: scheme: scheme-depend-part

Ex: In http://www.example.com/ the scheme is http
Request-URI is the portion of the requested URI that follows the host name (which is supplied by the
required Host header field)
Ex: / is Request-URI portion of http://www.example.com/
URI’s are of two types:
Uniform Resource Name (URN):Can be used to identify resources with unique names, such as
books (which have unique ISBN’s). A URN is designed to be a unique name for a resource rather
than specifying a location at which to find the resource
Uniform Resource Locator (URL): Specifies location at which a resource can be found.In
addition to http, some other URL schemes are https, ftp, mailto, and file.

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.

Header field structure:

field name : field value
field name : field value
Field name is not case sensitive .Field value may continue on multiple lines by starting continuation
lines with white space .Field values may contain MIME types, quality values, and wildcard characters
(*’s)
 Multipurpose Internet Mail Extensions (MIME): Convention for specifying content type of a
message .In HTTP, typically used to specify content type of the body of the response
 MIME content type syntax:

top-level type / subtype

Examples: text/html, image/jpeg
 COMMON HEADER FIELDS:

Host: host name from URL (required)

User-Agent: type of browser sending request
Accept: MIME types of acceptable documents
Connection: value close tells server to close connection after single
request/response
Content-Type: MIME type of (POST) body, normally application/x-www-
form-urlencoded
Content-Length: bytes in body
Referer: URL of document containing link that supplied URI for this HTTP
request
HTTP Response Message:

Status line
Header field(s) (one or more)
Blank line
Message body (optional)

Response Status Line:

Example: HTTP/1.1 200 OK

Three space-separated parts:

 HTTP version
 status code
 reason phrase (intended for human use)
Status code:
Three-digit number.
First digit is class of the status code:
1=Informational
2=Success
 3=Redirection (alternate URL is supplied)
4=Client Error
5=Server Error
Other two digits provide additional information

HTTP/1.1 Response Header Fields:

Connection, Content-Type, Content-Length

Date: date and time at which response was generated (required)
Location: alternate URI if status is redirection
Last-Modified: date and time the requested resource was last modified on the server
Expires: date and time after which the client’s copy of the resource will be out-of-date
ETag: a unique identifier for this version of the requested resource (changes if resource
changes)

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:

1. Reformat the URL entered as a valid HTTP request message.

2. If the server is specified using a host name (rather than an IP address), use DNS to convert
this name to the appropriate IP address.
3. Establish a TCP connection using the IP address of the specified web server.
4. Send the HTTP request over the TCP connection and wait for the server’s response.
5. Display the document contained in the response. If the document is not a plain-text document
but instead is written in a language such as HTML, this involves rendering the document:
positioning text and graphics appropriately within the browser window, creating table borders,
using appropriate fonts and colors, etc

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.

FIRST HTML EXAMPLE

Document Type Declaration: The document type declaration (DOCTYPE) is required in HTML5
documents so that browsers render the page in standards mode. Some browsers operate in quirks mode
to maintain backward compatibility with web pages that are not up-to-date with the latest standards.
Comments: Insert comments in your HTML5 markup to improve readability and describe the content
of a document. The browser ignores comments when your document is rendered.
Comments start with <!- -ends with- ->
html, head and body Elements: HTML5 markup contains text (and images, graphics, animations,
audios and videos) that represents the content of a document and elements that specify a document’s
structure and meaning.
The html element encloses the head section (represented by the head element) and the body section
(represented by the body element).
The head section contains information about the HTML5 document, such as the character set (UTF-8,
the most popular character-encoding scheme for the web) that the page use—which helps the browser
determine how to render the content—and the title.
The head section also can contain special document-formatting instructions called CSS3 style sheets
and client-side programs called scripts for creating dynamic web pages.
The body section contains the page’s content, which the browser displays when the user visits the web
page.
Start Tags and End Tags : HTML5 documents delimit most elements with a start tag and end tag. `
 A start tag consists of the element name in angle brackets
For example, <html>
 An end tag consists of the element name preceded by a forward slash (/) in angle brackets
For example, </html>
 There are several so-called “void elements” that do not have end tags.
 Many start tags have attributes that provide additional information about an element, which
browsers use to determine how to process the element. Each attribute has a name and a value
separated by an equals sign (=).
Title Element:
 The title element is called a nested element, because it’s enclosed in the head element’s start
and end tags
 Titles usually appear in the title bar at the top of the browser window, in the browser tab on
which the page is displayed, and also as the text identifying a page when users add the page to
their list of Favorites or Bookmarks, enabling them to return to their favorite sites.
Paragraph Element:
All text placed between the <p> and </p> tags forms one paragraph.

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

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles).

Unordered List:

Unordered HTML Lists - The Style Attribute

A style attribute can be added to an unordered list, to define the style of the marker or
simply type=”circle"

Style
list-style type:disc
list-style-type:circle
list-style-type:square
list-style-type:none
Description
The list items will be marked with bullets (default)
The list items will be marked with circles
The list items will be marked with squares
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.

Ordered HTML Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be
marked with numbers.
Ordered List:
 Ordered List
1. Apples
2. Bananas
3. Lemons
4. Oranges

Ordered HTML Lists - The Type Attribute

A type attribute can be added to an ordered list, to define the type of the marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Numbers:

HTML Glossary Lists

A description list, is a list of terms, with a description of each term.
The <dl> tag defines a description list.
The <dt> tag defines the term (name), and the <dd> tag defines the data (description).
Description List:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Result:
A Description List
Coffee
- black hot drink
Milk
- white cold drink
Nested HTML Lists
List can be nested (lists inside lists).
 Nested Lists:
<ul>
<li>Coffee</li> Result: A Nested List
<li>Tea  Coffee
<ul>  Tea
<li>Black tea</li> o Black tea
<li>Green tea</li> o Green tea
</ul>  Milk
</li>
<li>Milk</li>
</ul>

HTML List Tags

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines the term in a description list
<dd> Defines the description in a description 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>

HTML Table Tags

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:

FORM NAME=“ ” ACTION=“ ” METHOD=“ ”> </FORM>

It has three main attributes:

1) NAME: used to identify the form.
2) ACTION: points towards which page the data is to be sent.
3) METHOD: takes one the two values GET/POST. Defines what kind of action is to be performed.
<form name=“test.html” action="/action_page.php" method="post
Text Box (Single Line):
<input type=“text” name=“full
name” value=“urname” placeholder=
“enteryourname” maxlength=“100”
required>
required: with HTML5 came the required attribute
Textarea:
<textarea name=“your message” Text Between the Tags: text areas don’t support
cols=“20”rows=5”
placeholder=“yourmessage”>please
enter your message here.</textarea>
password:
<input type="password">
no </input> tag.
type: specifies what kind of form field it is.
name: all your fields should have a unique name.
value: if you want to specify a ‘default value’ then you can do it
here. The actual value of the text box is whatever the user puts
in before they submit the form.
placeholder: This is a description which only appears when the
text box is empty (or where value=“ "). This is an alternative to
writing words next to your text box to inform the user of what
you want to go in the box.
maxlength: what is the maximum number of characters allowed
in the text box
Cols and rows: this determines the size of your textbox.
the value="" attribute. Instead whatever appears between your
opening and closing <textarea> tags will be the default value,

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>

The Datetime input type enables the

user to enter a date (year, month, day),
time (hour, minute, second, fraction of a
second) and the time zone set to UTC (yyyy-mm-ddThhmm+ff.gg)
(Coordinated Universal Time or
Universal Time, Coordinated).

EMAIL: <input type=email

placeholder="name@domain.com"
required>
The email input type enables the user
to enter an e-mail address or a list of e-
mail addresses separated by commas.

The month input type enables the user

to enter a year and month
Month: <input type="month">

number:<input type="number"
min="1" max="7" Value="6">

<input type="checkbox"
name="cse" value="cse">
<input type="radio" value="male">

HTML5 SEMANTIC ELEMENTS:

<main> – a structural element to contain the main content

<article> – a structural element to contain stand-alone items of content, such as a self-contained
topic
<section> – a structural element to group together associated content, such as articles related to a
common topic
<aside> – a structural element to contain related content
 <figure>, <figcaption> – structural elements to contain stand-alone illustrations, diagrams, or
photos for reference
<header> – a structural element to contain page header content, such as a title, logo, and
navigation.
<footer> – a structural element to contain page footer content, such as copyright information and
contact details
HTML HEADER:
HTML5 provides a grouping solution with the <header> </header> element. This can be used to
enclose both the heading and sub-heading, like this:

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

Section and Article:

• <section> and <article> elements, it helps to consider the way a newspaper contains various
sections – news, sport, real estate, and so on. Each section contains various articles.

<h1>Newspaper</h1>
Next, in the body, insert two section elements
<section>
<!-- Articles to go here -->
</section>
<section>
<!-- Articles to go here -->
</section>

Within the first section element, insert a section heading

<h2>News Section</h2>
Now, insert a section heading in the second section element
<h2>Sport Section</h2>
After the heading in each section, add two articles that each contain an article heading and a single
paragraph
<article>
<h3>Article #1</h3>
<p>Article content...</p>
</article>
<article>
<h3>Article #2</h3>
<p>Article content...</p>
</article>

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 &copy; 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>