Introduction In this article, we will learn the basic understanding of the Progress and Mark tags available in HTML 5. Question: What is Progress in Html 5? If you are a developer or programmer, I am sure you have seen a progress bar in many applications. A progress bar control shows the progress of a process from start to finish and it also gives us an idea of how much time is left in the process to finish.For example, when you install a software, you will notice a progress bar shows how much installation is completed and how much is left. On the Web, you may notice sometime when you are uploading or download a file, you will see how much task has completed. In simple terms, "A progress bar is used to display amount of task completed when compared to overall task". The Progress tag in HTML 5 represents a progress bar control.Question: What is Mark in Html 5? In simple terms, "A mark tag is used to highlight some parts of your document". Now, let's see some sample code that shows how to use these two tags in HTML 5. Step 1: The Complete Code of progress.html looks like this: Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>templates</title> <meta name="description" content="" /> <meta name="author" content="Vijay" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> </head> <body> <div style="font-family: Verdana ; font-size: 22; text-align: center"> <header> <h1 style="color: gray">Progress - HTML 5</h1> </header> Current Downloading<progress value="72" max="100"></progress> <div> <p> This is simple example using <mark>Mark - HTML 5</mark></p> </div> <footer> <p style="color: silver">© Copyright by Vijay Prativadi</p> </footer> </div> </body> </html> Step 2: The Output of the Application looks like this: I hope this article is useful for you. I look forward for your comments and feedback . Thanks Vijay Prativadi....
Introduction
In this article, we will learn the basic understanding of the Progress and Mark tags available in HTML 5.
Question: What is Progress in Html 5?
If you are a developer or programmer, I am sure you have seen a progress bar in many applications. A progress bar control shows the progress of a process from start to finish and it also gives us an idea of how much time is left in the process to finish.
For example, when you install a software, you will notice a progress bar shows how much installation is completed and how much is left. On the Web, you may notice sometime when you are uploading or download a file, you will see how much task has completed.
In simple terms, "A progress bar is used to display amount of task completed when compared to overall task".
The Progress tag in HTML 5 represents a progress bar control.
Question: What is Mark in Html 5?
In simple terms, "A mark tag is used to highlight some parts of your document".
Now, let's see some sample code that shows how to use these two tags in HTML 5.
Step 1: The Complete Code of progress.html looks like this:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" /> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>templates</title>
<meta name="description" content="" />
<meta name="author" content="Vijay" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head> <body>
<div style="font-family: Verdana ; font-size: 22; text-align: center">
<header>
<h1 style="color: gray">Progress - HTML 5</h1>
</header>
Current Downloading<progress value="72" max="100"></progress> <div>
<p> This is simple example using <mark>Mark - HTML 5</mark></p>
</div> <footer>
<p style="color: silver">© Copyright by Vijay Prativadi</p>
</footer>
</div>
</body>
</html>
Step 2: The Output of the Application looks like this:
I hope this article is useful for you. I look forward for your comments and feedback . Thanks Vijay Prativadi....
You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.
Become a sharper developer and jumpstart your career.
$0
$
. 00
monthly
For Basic members:
$20
For Premium members:
$45
For Elite members: