Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 27

UNIT 4

Basics of Web Design – www, W3C, Web Browser, Web Server, Web Hosting, Web Pages, DNS,
URL, Introduction to HTML, XHTML, DHTML, HTTP.
Overview of HTML 5 – Basic Formatting Tags: heading, paragraph, break, underline, bold, italic,
superscript, subscript, font and image, attributes: align, color, bgcolor, font face, border, size,
navigation links using anchor tag: internal, external, mail and image, lists: ordered, unordered and
definition, HTML media tags: audio and video

What is World Wide Web?

The development of the World Wide Web was begun in 1989 by Tim Berners-Lee and his colleagues
at CERN, an international scientific organization based in Geneva, Switzerland. They created
a protocol, HyperText Transfer Protocol (HTTP), which standardized communication between servers
and clients. Their text-based Web browser was made available for general release in January 1992.
World Wide Web, which is also known as a Web, is a collection of websites or web pages stored in web
servers and connected to local computers through the internet. These websites contain text pages,
digital images, audios, videos, etc. Users can access the content of these sites from any part of the
world over the internet using their devices such as computers, laptops, cell phones, etc. The WWW,
along with internet, enables the retrieval and display of text and media to your device.

W2C ("World Wide Web Consortium." )

W2C stands for "World Wide Web Consortium." The W3C is an international community that includes
a full-time staff, industry experts, and several member organizations. These groups work together to
develop standards for the World Wide Web.
The mission of the W3C is to lead the Web to its full potential by developing relevant protocols and
guidelines. When browsers conform to the W3C standards, it also helps Web pages appear consistent
across different browsers.
Web Browsers
Web Browsers are software installed on your PC to access the Web, such as Netscape Navigator,
Microsoft Internet Explorer or Mozilla Firefox.
On the Web, when you navigate through pages of information, this is commonly known as web
browsing or web surfing.
There are four leading web browsers − Explorer, Firefox, Netscape, and Safari, but there are many
others browsers available.

Internet Explorer
Internet Explorer (IE) is a product from software giant Microsoft. This is the most commonly used
browser in the universe. This was introduced in 1995 along with Windows 95 launch and it has passed
Netscape popularity in 1998.
Google Chrome
This web browser is developed by Google and its beta version was first released on September 2,
2008 for Microsoft Windows. Today, chrome is known to be one of the most popular web browser
with its global share of more than 50%.

Mozilla Firefox
Firefox is a new browser derived from Mozilla. It was released in 2004 and has grown to be the
second most popular browser on the Internet.
You can download a latest version of this browser by clicking here → Download Firefox

Safari
Safari is a web browser developed by Apple Inc. and included in Mac OS X. It was first released as a
public beta in January 2003. Safari has very good support for latest technologies like XHTML, CSS2 etc.

Opera
Opera is smaller and faster than most other browsers, yet it is full- featured. Fast, user-friendly, with
keyboard interface, multiple windows, zoom functions, and more. Java and non Java-enabled versions
available. Ideal for newcomers to the Internet, school children, handicap and as a front-end for CD-
Rom and kiosks.
Web server 
Web server  is a computer where the web content is stored. Basically web server is used to host the
web sites but there exists other web servers also such as gaming, storage, FTP, email etc.
Web site is collection of web pages whileweb server is a software that respond to the request for web
resources.
Web Server Working
Web server respond to the client request in either of the following two ways:
 Sending the file to the client associated with the requested URL.
 Generating response by invoking a script and communicating with database
Web hosting

When a hosting provider allocates space on a web server for a website to store its files, they are
hosting a website. Web hosting makes the files that comprise a website (code, images, etc.) available
for viewing online. Every website you’ve ever visited is hosted on a server.

The amount of space allocated on a server to a website depends on the type of hosting. The main
types of hosting are shared, dedicated, VPS and reseller. They are differentiated by the kind of
technology used for the server, the level of management provided and the additional services on offer.
web hosting is the process of renting or buying space to house a website on the World Wide Web.
Website content such as HTML, CSS, and images has to be housed on a server to be viewable online.

Web Page
web page is a document available on world wide web. Web Pages are stored on web server and can
be viewed using a web browser.
A web page can cotain huge information including text, graphics, audio, video and hyper links. These
hyper links are the link to other web pages.
Collection of linked web pages on a web server is known as website. There is unique Uniform
Resource Locator (URL) is associated with each web page.
Static Web page
Static web pages are also known as flat or stationary web page. They are loaded on the client’s
browser as exactly they are stored on the web server. Such web pages contain only static information.
User can only read the information but can’t do any modification or interact with the information.
Static web pages are created using only HTML. Static web pages are only used when the information
is no more required to be modified.

Dynamic Web page


Dynamic web page shows different information at different point of time. It is possible to change a
portion of a web page without loading the entire web page. It has been made possible
using Ajax technology.
IP Address
IP address is a unique logical address assigned to a machine over the network. An IP address exhibits
the following properties:
 IP address is the unique address assigned to each host present on Internet.
 IP address is 32 bits (4 bytes) long.
 IP address consists of two components: network component and host component.
 Each of the 4 bytes is represented by a number from 0 to 255, separated with dots. For
example 137.170.4.124
IP address is 32-bit number while on the other hand domain names are easy to remember names. For
example, when we enter an email address we always enter a symbolic string such as
webmaster@tutorialspoint.com.
Uniform Resource Locator (URL)
Uniform Resource Locator (URL) refers to a web address which uniquely identifies a document over
the internet.
This document can be a web page, image, audio, video or anything else present on the web.
For example, www.tutorialspoint.com/internet_technology/index.html is an URL to the index.html
which is stored on tutorialspoint web server under internet_technology directory.
URL Types
There are two forms of URL as listed below:
 Absolute URL
 Relative URL
Absolute URL
Absolute URL is a complete address of a resource on the web. This completed address comprises of
protocol used, server name, path name and file name.
For example http:// www.tutorialspoint.com / internet_technology /index.htm. where:
 http is the protocol.
 tutorialspoint.com is the server name.
 index.htm is the file name.
The protocol part tells the web browser how to handle the file. Similarly we have some other
protocols also that can be used to create URL are:
 FTP
 https
 Gopher
 mailto
 news
Relative URL
Relative URL is a partial address of a webpage. Unlike absolute URL, the protocol and server part are
omitted from relative URL.
Relative URLs are used for internal links i.e. to create links to file that are part of same website as the
WebPages on which you are placing the link.
For example, to link an image on
tutorialspoint.com/internet_technology/internet_referemce_models, we can use the relative URL
which can take the form like /internet_technologies/internet-osi_model.jpg.
Difference between Absolute and Relative URL
Absolute URL Relative URL

Used to link web pages on different Used to link web pages within the same website.
websites

Difficult to manage. Easy to Manage

Changes when the server name or Remains same even of we change the server name
directory name changes or directory name.

Take time to access Comparatively faster to access.

Domain Name System Architecture


The Domain name system comprises of Domain Names, Domain Name Space, Name Server that
have been described below:
Domain Names
Domain Name is a symbolic string associated with an IP address. There are several domain names
available; some of them are generic such as com, edu, gov, net etc, while some country level domain
names such as au, in, za, us etc.
The following table shows the Generic Top-Level Domain names:

Domain Name Meaning

Com Commercial business

Edu Education
Gov U.S. government agency

Int International entity

Mil U.S. military

Net Networking organization

Org Non profit organization

What is HTML?

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

A Simple HTML Document


Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Example Explained

 The <!DOCTYPE html> declaration defines that this document is an HTML5 document


 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's title bar
or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

HTML Page Structure

Below is a visualization of an HTML page structure:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Learn HTML Using Notepad or TextEdit

Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).

We believe in that using a simple text editor is a good way to learn HTML.

Follow the steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC)

Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 2: Write Some HTML

Write or copy the following HTML code into Notepad:


<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML
files).

Tip: You can use either .htm or .html as file extension. There is no difference, it is up to you.
Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose
"Open with").

The result will look much like this:

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Try it Yourself »
The <!DOCTYPE> Declaration

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>

IMPORTANT COMPONENTS OF HTML

HTML Tags

Tags are coded instructions that are referred to as source code. HTML tags are keywords enclosed in a pair of
angular brackets(< and >). These tags mark the beginning and end of an HTML element. The first tag is known as
opening tag or the ON tag. The end tag is known as the closing tag or the OFF tag. It is preceded by a slash(/) .
Two types of tags are a) Container tags – These tags have a beginning and an end tag. B)Empty tags – These tags
have only an opening or a start tag. The <br> tag defines a line break, and is an empty element without a closing
tag:

<p>This is a <br> paragraph with a line break.</p>

HTML Elements

HTML documents are made up by HTML elements. An element is a collection of start tag, attributes, end tag,
content between them. Content between them. <tagname>content</tagname> eg: <h1>CHAPTER 1</h1>

All the HTML elements can be categorized into two categories (a) Block Level Elements (b)Inline Elements. Block
Elements A block-level element always start with new line and takes the full width of web page, from left to
right. Eg: <p>,<h1> etc They all start on their own new line, and anything that follows them appears on its own
new line. Inline Elements Inline elements does not start with new line and take width as per requirement. They
are mostly used with other elements. Eg: <b>,<i> etc

HTML Attributes

HTML attributes are special words which provide additional information. They are the modifier of the HTML
element. Attributes should always be applied with start tag. The Attribute should always be applied with its
name and value pair. User can add multiple attributes in one HTML element, but need to give space between
two attributes. syntax =<"value">.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading: 


Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

Attribute Value Description

Align left justify Specifies the alignment of a heading

Center

right

HTML Paragraphs

HTML paragraphs are defined with the <p> tag. Attributes are same as the heading tag.

Attribute Value Description

Align left justify Specifies the alignment of a heading

Center

right

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML <html> Tag
Example

A simple HTML document:

<html>
<head>
  <title>Title of the document</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

The <html> tag represents the root of an HTML document.


The <html> tag is the container for all other HTML elements

Body Tag

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as headings, paragraphs,
images, hyperlinks, tables, lists, etc.

Note: There can only be one <body> element in an HTML document.

Attribute Value Description


Background URL Specifies a background image for a document
Bgcolor color Specifies the background color of a document
link color Specifies the color of unvisited links in a document
text color Specifies the color of the text in a document
HTML Formatting Elements

Formatting elements were designed to display special types of text:

 <b> - Bold text


 <strong> - Important text
 <u> - underline text
 <i> - Italic text
 <em> - Emphasized text
 <small> - Smaller text
 <sub> - Subscript text
 <sup> - Superscript text

Bold
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
ITALIC
<html>
<body>

The HTML <em> element also defines emphasized text. The content inside is typically displayed in
italic.
<em>This text is emphasized</em>
HTML <small> Element

The HTML <small> element defines smaller text:

<small>This is some smaller text.</small>


HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a character below the
normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical
formulas, like H2O:

<p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears half a character above the
normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes,
like WWW[1]:

<p>This is <sup>superscripted</sup> text.</p>
Font tag
Fonts play a very important role in making a website more user friendly and increasing content
readability. Font face and color depends entirely on the computer and browser that is being used to
view your page but you can use HTML <font> tag to add style, size, and color to the text on your
website. You can use a <basefont> tag to set all of your text to the same size, face, and color.
The font tag is having three attributes called size, color, and face to customize your fonts. To change
any of the font attributes at any time within your webpage, simply use the <font> tag. The text that
follows will remain changed until you close with the </font> tag. You can change one or all of the font
attributes within one <font> tag.

HTML <font> Tag


The <font> tag defines the font characteristics. Size, color and typeface are defined by
the size, color and face attributes.

The font tag is used to change the color, size, and style of a text. The base font tag is used to set all
the text to the same size, color and face.
The font tag has basically three attributes which are given below:
 Size
 Face/Type
 Color
font Size: This attribute is used to adjust the size of the text in the HTML document using font tag
with size attribute. The range of size of the font in HTML is from 1 to 7 and the default size is 3.
Font face: Font type can be set by using face attribute with font tag in HTML document. But the fonts
used by the user needs to be installed in the system first.
Font Color: Font color is used to set the text color using font tag with color attribute in HTML
document. Color can be specify either with its name or with its hex code.
Example 1

<html>
    <head>
        <title>Example of Font Type</title>
    </head>
      
    <body>
        <font face = "Times New Roman" size = "6">
                             GeeksforGeeks!!</font><br />
        <font face = "Verdana" size = "6">
                             GeeksforGeeks!!</font><br />
        <font face = "Comic sans MS" size =" 6">
                             GeeksforGeeks!!</font><br />
        <font face = "WildWest" size = "6">
                             GeeksforGeeks!!</font><br />
        <font face = "Bedrock" size = "6">
                             GeeksforGeeks!!</font><br />
    </body>
</html>  

ANOTHER OPTION
To change the text font in HTML, use the style attribute. The style attribute specifies an inline style for
an element. The attribute is used with the HTML <p> tag, with the CSS property font-family, font-size,
font-style, etc.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Font</title>
   </head>

   <body>
      <h1>Our Products</h1>
      <p style = "font-family:georgia,garamond,serif;font-size:16px;font-style:italic;">
         This is demo text
      </p>
   </body>

</html>

HTML <img> Tag

The <img> tag is used to embed an image in an HTML page.


Images are not technically inserted into a web page; images are linked to web pages. The <img> tag
creates a holding space for the referenced image.

The <img> tag has two required attributes:

 src - Specifies the path to the image


 alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
 align -Top bottom middle left right - Text after the image is displayed at the top, bottom, middle, left ,
right aligned with respect to screen
 alt - Specifies an alternate text for an image
 border in terms of pixels Specifies the width of the border around an image height Pixels/% Specifies
the height of an image hspace pixels Specifies the whitespace on left and right side of an imag

Note: Also, always specify the width and height of an image. If width and height are not specified, the
page might flicker while the image loads.

<img src="img_girl.jpg" alt="Girl inajacket" width="500" height="600">

How to add border in Html

Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor
in which we want to use the inline property for adding the border.

<!Doctype Html>  
<Html>     
<Head>      
<Title>     
Add the border using inline property  
</Title>  
</Head>  
<Body>   
<h1> Hello User </h1>  
<h2> Your are at JavaTpoint Site </h2>  
</Body>   
</Html>  

Now, place the cursor inside the opening tag of that text around which we want to add the border.
And then, we have to type the style attribute. And then, we have to type the border property in the
style attribute same as shown in the following block:

14.1M
286
History of Java

1. <h1 style="border:"> Hello User!!! </h1>  

Step 3: And then we have to give the border color in the border property.

1. <h1 style="border:orange;"> Hello User!!! </h1>  
Step 4: We can also give the style and width of the border which we want to add in the Html code. If
we want to add then we have to type the border-width and border-style property just after
the border property.

1. <h1 style="border:orange; border-width:5px; border-style:solid;"> Hello User!!! </h1>  

Step 5: And, at last, we have to save the Html file and then run the file in the browser.

<!Doctype Html>  
<Html>     
<Head>      
<Title>     
Add the border using inline property  
</Title>  
</Head>  
<Body>   
<font style="border:blue; border-width:10px; border-style:outset;">  
JavaTpoint </font>  
<center>  
<h1 style="border:orange; border-width:5px; border-style:solid;"> Hello User!!! </h1>  
<h2 style="border:green; border-width:8px; border-style:dashed"> Your are at JavaTpoint Site!.... <
/h2>  
</center>  
</Body>   
</Html>  

HTML | bgcolor attribute


 Last Updated : 30 Sep, 2019
The HTML bgcolor attribute is used to set the background color of an HTML element.
Syntax:
<"tag" bgcolor="Value">
Supported tags:
 body
 marquee
 table
 tBody
 td
 tFoot
 th
 tHead
 tr
Example
<HTML>
<HEAD bgcolor="cyan">
<TITLE>MY SITE</TITLE>
</HEAD>
<BODY bgcolor="cyan">
<P align="center">NOTEPAD</P>
</BODY>
</HTML>

HTML Links
The HTML Links are hyperlinks that means when you click on a link, it jump son another document.
Syntax
Following is the syntax −

<a href=”URL” target=”value” >Link Content</a>

Here URL specifies the destination address and it can be either local or external


address. target attribute defines where to open the linked document and it can take the following
values:

Value Explanation

_blank It opens the linked document in a new tab or window.

_parent It opens the linked document in the parent frame.

_self It opens the linked document in the same window.

_top It opens the linked document in the full body of the window

Changing colors of a link

<!DOCTYPE html>
<html>
<head>
<title>HTML Link Color</title>
</head>
<body>
<h2>About</h2>
<p>
Our <a href="/about/about_team.htm" style="color: red">Team</a>
comprises of programmers, writers, and analysts.
</p>
</body>
</html>
Internal Links in html
An internal link is used in html page to navigate properly in the webpage. If you want to go to any
specific location in the same page by clicking on a link, you can create an internal link in the
webpage. <a> tag is used for link creation in html page.
Syntax:
<a href= “#link1”> MyLink</a>
Here “href” contain the location name where the link will navigate us when we click on “MyLink”. The
location is given a name for reference and the name contain “#” at the time of creating link.

<a name= “Link1”> my link starts here </a>


This is the place where we will reach on click.

Example:
<html>
<head>
</head>
<body>
<a id="home">main menu</a>
<a href="#lession1">Lession.1</a><br />
<a href="#lession2">Lession.2</a><br />
<a href="#lession3">Lession.3</a><br />
<a href="#lession4">Lession.4</a><br />
<br />

<a id="lession1">Introduction of Lession.1</a>


<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<a href="#home">main menu</a><br />
<br />
<br />
<a id="lession2">Introduction of Lession.2</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<a href="#home">main menu</a><br />
<br />
<p id="lession3">Introduction of Lession.3</p>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<a href="#home">main menu</a><br />
<br />
<article id="lession4">Introduction of Lession.4</article>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<a href="#home">main menu</a><br />
</body>
Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

Example
<a href="default.asp"> <img src="smiley.gif" alt="HTMLtutorial" width=40% height= 40%>
</a>
HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Example

An unordered HTML list:

 Item
 Item
 Item
 Item

An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item

Unordered HTML List

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) by default:

Example
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:


Example
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:

Example
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
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 a term in a description list

<dd> Describes the term in a description list


HTML Ordered Lists

The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item 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:
<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Uppercase Letters:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified
number,

you can use the start attribute:

Example
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Note : List can be reversed by using reversed attribute - Specifies that the list order should be descending
(9,8,7...) start number Specifies the start value of an ordered list

Nested HTML Lists

Lists can be nested (list inside list):

Example
<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>
HTML Email Tag
HTML <a> tag provides you option to specify an email address to send an email. While using <a> tag
as an email tag, you will use mailto: email address along with href attribute. Following is the syntax of
using mailto instead of using http.
<a href = "mailto: abc@example.com">Send Email</a>
This code will generate the following link which you can use to send email.
Send Email
Now, if a user clicks this link, it launches one Email Client (like Lotus Notes, Outlook Express etc. )
installed on your user's computer. There is another risk to use this option to send email because if
user do not have email client installed on their computer then it would not be possible to send email.
Default Settings
You can specify a default email subject and email body along with your email address. Following is the
example to use default subject and body.
<a href = "mailto:abc@example.com?subject = Feedback&body = Message">
Send Feedback
</a>
This code will generate the following link which you can use to send email.
HTML5 features include native audio and video support without the need for Flash.
The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to
set src attribute to identify the media source and include a controls attribute so the user can play and
pause the media.
HTML media tags: audio and video
Multimedia on the web is sound, music, videos, movies, and animations. Multimedia elements (like
sounds or videos) are stored in media files. Multimedia files also have their own formats and different
extensions like .wav, .mp3, .mp4, and .avi. : HTML audio tag is used to define sounds such as music
and other audio clips. Currently there are three supported file format for HTML5 audio tag. 1. mp3 2.
wav 3. Ogg
(Three video formats supported for HTML video tag: 1. mp4 2. webM 3. ogg Example : Attribute Value
Description autoplay Specifies that the video will start playing as soon as it is ready controls Specifies

Difference between HTML, XHTML, DHTML and XML


Key difference: HTML stands for HyperText Markup Language. It is a well known mark up language
used to develop web pages. It has been around for a long time and is commonly used in webpage
design. XHTML stands for Extensible HyperText Markup Language. It is a markup language written in
XML. Essentially, it is a hybrid between HTML and XML specifically designed for Net device displays.
It is HTML defined as an XML application. DHTML is essentially Dynamic HTML. It is a new way of
looking at and controlling the standard HTML codes and commands. DHTML is a collection of
technologies that are used to create interactive and animated web sites. XML stands for Extensible
Markup Language. It is a specification developed by the W3C. It is a markup language designed
especially for Web documents. It defines a set of rules for encoding documents in a format that is
both human-readable and machine-readable.

HTML stands for HyperText Markup Language. It is a well known


mark up language used to develop web pages. It has been around for a long time and is commonly
used in webpage design. XML or Extensible Markup Language defines a set of rules for encoding
documents in a format that can be read by both, human and computer.

HTML is written using HTML elements, which consist of tags, primarily and opening tag and a closing
tag. The data between these tags is usually the content. The main objective of HTML is to allow web
browsers to interpret and display the content written between the tags. The tags are designed to
describe the page content. HTML comes with predefined tags. They allow one to insert images, text,
videos, forms and other pieces of content together into a cohesive webpage.

Elements of HTML are the basic building blocks of all websites. HTML allows images and objects to be
embedded in the webpage. It can also be used to create interactive forms. HTML also provides the
means to create structured documents. It does this by denoting structural semantics for text such as
headings, paragraphs, lists, links, quotes and other items. However these days, web pages are rarely
designed using only HTML. HTML allows for the programmer to embed scripts written in languages
such as JavaScript, which many often do. This changes the look and behavior of the HTML web pages.
XHTML, on the other hand, stands for Extensible HyperText
Markup Language. It is a markup language written in XML. It is a collection of XML markup languages
that mirror or extend versions of HTML. Essentially, it is a hybrid between HTML and XML specifically
designed for Net device displays. It is HTML defined as an XML application.

XHTML uses three XML namespaces that correspond to three HTML 4.0 DTDs: Strict, Transitional, and
Frameset. These namespaces are used to qualify element and attributes names by associating them
with namespaces identified by URI references. The namespaces also prevent identically custom-named
tags, which may be used in different XML documents from being read the same way. Hence, each
custom tag is read differently.

XHTML markup must conform to the markup standards defined in a HTML DTD. In fact, XHTML is
almost identical to HTML 4.01. However, it is a stricter and cleaner version of HTML 4.01.

As XHTML is in part HTML, it is supported by almost all major browsers. However, in order to be
compatible with the said Net devices, XHTML must go through a modularization process. In this, the
device designer will specify which elements are supported by using standard building blocks. The
content creators can then target these building blocks or modules. These modules conform to certain
standards. Hence, XHTML extensibility makes sure that the layout and presentation stays more-or-less
the same over various platforms.

Whereas, DHTML is essentially Dynamic HTML. It is a new way of


looking at and controlling the standard HTML codes and commands. DHTML is a collection of
technologies that are used to create interactive and animated web sites. DHTML gives more control
over the HTML elements. It allows one to incorporate a client-side scripting language, such as
JavaScript, a presentation definition language, such as CSS, and the Document Object Model in HTML
web pages. 

DHTML also allows the pages to change at any time, without returning to the Web server first. It allows
scripting languages to change a web page's look and function after the page has been fully loaded and
during the viewing process. It also allows the user to add effects to their pages that are otherwise
difficult to achieve.

Wikipedia list additional DHTML features, such as DHTML allows the developers to:
 Animate text and images in their document, independently moving each element from any
starting point to any ending point, following a predetermined path or one chosen by the
user.
 Embed a ticker that automatically refreshes its content with the latest news, stock quotes,
or other data.
 Use a form to capture user input, and then process, verify and respond to that data without
having to send data back to the server.
 Include rollover buttons or drop-down menus.

Moreover, XML stands for Extensible Markup Language. It is a


specification developed by the W3C. It is a markup language designed especially for Web documents. It
defines a set of rules for encoding documents in a format that is both human-readable and machine-
readable. It allows designers to create their own customized tags. It also enables the definition,
transmission, validation, and interpretation of data between applications and organizations.

XML is a text-based data format with strong support via Unicode for languages. It emphasizes
simplicity, generality, and usability over the Internet. It is also widely used for the representation of
arbitrary data structures, especially in web services. Programmers often use APIs while processing XML
data and schema systems to aid in the definition of XML-based languages.

You might also like