Scribd
Upload
67 views

HTML CODING EXERCISES Coding For Beginner - JJ TAM

The document provides code examples for various HTML elements and attributes including commenting HTML tags, creating hyperlinks, downloading files, adding controls to audio, writing bold text, defining sections, buttons, forms, and more. Each code example is accompanied by a brief description.

Uploaded by

nathalie Mtzz 04
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
67 views

HTML CODING EXERCISES Coding For Beginner - JJ TAM

The document provides code examples for various HTML elements and attributes including commenting HTML tags, creating hyperlinks, downloading files, adding controls to audio, writing bold text, defining sections, buttons, forms, and more. Each code example is accompanied by a brief description.

Uploaded by

nathalie Mtzz 04
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 46

HTML

CODING EXERCISES

CODING FOR BEGINNERS


JJ TAM
COMMENT HTML TAGS
CREATE A HYPERLINK IN HTML
DOWNLOAD A FILE
CREATE A LINK
CREATE A NOFOLLOW LINK
OPEN A LINKED DOCUMENT
CORRECT WAY TO WRITE ADDRESS
SPECIFY AN ALTERNATE TEXT
CREATE AN HTML DOCUMENT
CREATE AN HTML DOCUMENT
TO ADD CONTROLS TO AN AUDIO
WRITE BOLD TEXT USING HTML TAGS
TO SPECIFY THE BASE URL
ISOLATE A PART OF TEXT
DEFINE A SECTION
DEFINE THE DOCUMENT'S BODY
DEFINES A SINGLE LINE BREAK
DEFINE A CLICKABLE BUTTON
SPECIFY THAT A BUTTON
SPECIFY A BUTTON SHOULD BE DISABLED
SPECIFY ONE OR MORE FORMS
SPECIFY WHERE TO SEND THE FORM-DATA
SEND THE FORM-DATA
SPECIFY WHERE TO DISPLAY
SPECIFY A NAME FOR THE BUTTON
SPECIFY THE TYPE OF BUTTON
DRAW GRAPHICS, ON THE FLY,
DEFINE A TABLE CAPTION
Comment HTML tags
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to comment HTML tags</title>
</head>
<body>
<p>HTML Tutorial</p>
<!--<p>Python Tutorial</p>-->
<p>PHP Tutorial</p>
</body>
</html>
Output:
HTML Tutorial

PHP Tutorial
Create a hyperlink in HTML
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to create a hyperlink</title>
</head>
<body>
<p><a href="http://htmlexample.com">htmlexample.com</a><p>
</body>
</html>
Download a file
when clicking on the link
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Download a file when clicking on the link</title>
</head>
<body>
<p><a href="https://www.hmlresource.com/images/htmlresource-
logo.png" download>Download</a></p>

</body>
</html>
Create a link
with a media attribute
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Create a link with a media attribute</title>
</head>
<body>
<a href="https://www.htmlresource.com" media="print, handheld">Media
Attribute</a>
</body>
</html>
Create a nofollow link
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to create a nofollow link</title>
</head>
<body>
<a rel="nofollow" href="http://htmlexample.com">Example.com</a>
</body>
</html>
Open a linked document
in a separate browser tab
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to open a linked document in a separate browser tab</title>
</head>
<body>
<p><a href="https://htmlresource.com" target="_blank">Target HTML5
EXCECISES</a></p>
</body>
</html>
Correct way to write address
in a HTML document
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>What is the correct way to write address in a HTML
document</title>
</head>
<body>
<address>
Address: 21,MG Road<br>
Burdwan<br>
West Bengal.
</address>
</body>
</html>
Specify an alternate text
for the area
if the href attribute is present
HTML CODE
<body>
<img src="https://www.htmlresource.com/htmlr_images/html-area-
element.png" alt="area example"  border="0" usemap="#Map"/> 
<map name="Map">
<area shape="rect" coords="8,5,100,77"
href="https://www.htmlresource.com/mysql/mysql-tutorials.php"
target="_blank" alt="mysql tutorial"> 
<area shape="circle" coords="155,93,59"
href="https://www.htmlresource.com/php/php-home.php" target="_blank"
alt="php tutorial"> 
<area shape="rect" coords="197,136,306,188"
href="https://www.htmlresource.com/sql/sql-tutorials.php" alt="sql
tutorials"> 
</map>
</body>
Create an HTML document
which uses article element
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Create an HTML document which uses article element</title>
</head>
<body>
<article>
<h1>Tutorial of HTML5 article element</h1> 
<p>HTML5 article element represents independent item like a blog entry in
an web document.</p> 
</article>
</body>
</html>
Create an HTML document
which uses aside element
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to create an HTML document which uses aside
element</title>
</head>
<body>
<p> I visited the HTML5 tutorial of htmlresource</p>

<aside>
<h4>HTML5 tutorial</h4>
<p>I can develop excellent web applications with HTML5 and related
APIs (like GeoLocation, Drag and Drop, WebSocket etc.)in HTML5
tutorial.</p>
</aside>
</body>
</html>
OUTPUT
I visited the HTML5 tutorial of htmlresource
HTML5 tutorial
I can develop excellent web applications with HTML5 and related
APIs (like GeoLocation, Drag and Drop, WebSocket etc.)in
HTML5 tutorial.
To add controls to an audio
HTML CODE
<body>
<audio controls>
<source src="https://www.htmlresource.com/html-css-
exercise/basic/solution/beach.ogg" type="audio/ogg">
<source src="https://www.htmlresource.com/html-css-
exercise/basic/solution/beach.mp3" type="audio/mpeg">
</audio>
</body>
Write bold text using HTML tags
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to write bold text using HTML tags</title>
</head>
<body>
<p>"htmlresource" is normal text - and <b>"htmlresource"</b> is bold
text.
</body>
</html>
OUTPUT
"htmlresource" is normal text - and "htmlresource"  is bold text.
To specify the base URL
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to specifie the base URL/target for all relative URLs in a
document</title> 
<base href="https://www.htmlresource.com/">
</head>
<body>
<ul>
<li><a href="php/php-home.php">PHP Tutorial</a></li>
<li><a href="javascript/javascript.php">JavaScript Tutorial</a></li>
<li><a href="mysql/mysql-tutorials.php">MySQL Tutorial</a></li>
</body>
</html>
Isolate a part of text
That might be formatted
In a different direction

HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><span class="heading">How to isolate a part of text that might be
formatted in a different direction from other text outside it</span></title>
</head>
<body>
<p>
In the example below, usernames are shown along with the number of
points in a contest.
If the bdi element is not supported in the browser, the username of the
Arabic user would confuse the text (the bidirectional algorithm would put
the colon and the number "80" next to the word "User" rather than next to
the word "points").
</p>
<ul>
<li>User <bdi>hrefs</bdi>: 40 points</li>
<li>User <bdi>jdoe</bdi>: 60 points</li>
<li>User <bdi> ‫< ﺗﺮﺣﻲ ب‬/bdi>:80 points</li>
</ul>
<p><b>Note:</b> The bdi element is currently supported only in Firefox
and Chrome.</p>
</body>
</html>
OUTPUT
In the example below, usernames are shown along with the number
of points in a contest. If the bdi element is not supported in the
browser, the username of the Arabic user would confuse the text
(the bidirectional algorithm would put the colon and the number
"80" next to the word "User" rather than next to the word "points").
User hrefs: 40 points
User jdoe: 60 points
User 80:‫ ﺗﺮﺣﻴﺐ‬points

Note:  The bdi element is currently supported only in Firefox and


Chrome.
Define a section
that is quoted from another source
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html blockquote tag example</title> 
</head>
<body>
<blockquote>Freedom is not worth having if it does not connote freedom to
err. It passes my comprehension how human beings, be they ever so
experienced and able, can delight in depriving other human beings of that
precious right.</blockquote> 
</body>
</html>
OUTPUT
Freedom is not worth having if it does not connote freedom to err.
It passes my comprehension how human beings, be they ever so
experienced and able, can delight in depriving other human beings
of that precious right.
Define the document's body
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define the document's body</title>
</head>
<body>
We are learning HTML body element.
</body>
</html>
OUTPUT
We are learning HTML body element.
Defines a single line break
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define a single line break</title>
</head>
<body>
<p>The quick brown fox jumps<br>over the lazy dog.</p>
</body>
</html>
OUTPUT
The quick brown fox jumps
over the lazy dog.
Define a clickable button
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define a clickable button.</title>
</head>
<body>
<button type="button" onclick="console.log('Welcome Friends')">Click
Me!</button>
</body>
</html>
Specify that a button
automatically get focus
when the page load
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The example of autofocus attribute with button element.</title>
</head>
<body>
<button type="button" autofocus onclick="console.log('Welcome
Friends')">Click Me!</button>
</body>
</html>
Specify a button should be disabled
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example of HTML disabled attribute with button</title>
</head>
<body>
<form action="example.php" method="post">  
First Name : <input type="text" name="Fname"><br> 
<button type="button" name="Submit" disabled>Submit</button>
</body>
</html>

OUTPUT
Specify one or more forms
the button belongs to
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to specify one or more forms the button belongs to</title>
</head>
<body>
<form method="POST"
action="https://www.htmlresource.com/html-css-
exercise/basic/solution/button-form-answer-demo.php" id="form1">
First   name  : <input type="text" name="fname"><br>
Last    name : <input type="text" name="lname"><br>
Present Address : <input type="text" name="add"><br>
E-mail  : <input type="text" name="mail"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>
</body>
</html>
OUTPUT
Specify where to send the form-
data
when a form is submitted
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to Specify where to send the form-data when a form is
submitted.</title>
</head>
<body>
<form action="https://www.htmlresource.com/html-css-
exercise/basic/solution/button-formaction-
answer-demo.php" method="post">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit">Submit</button><br>
<button type="submit" formaction="https://www.htmlresource.com/html-
css-
exercise/basic/solution/button-formaction-admin-demo.php">Submit as
admin</button>
</form>
</body>
</html>
OUTPUT
Send the form-data
(which HTTP method to use)
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to send the form-data,which HTTP method to use</title>
</head>
<body>
<form action="https://www.htmlresource.com/html-css-
exercise/basic/solution/button-formmethod-answer-demo.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
Address: <input type="text" name="place"><br>
<button type="submit">Submit</button>
<button type="submit" formmethod="post"
formaction="http://localhost/html-css-exercise/basic/solution/button-
formmethod-post-answer.php">Submit using POST</button>
</form>
</body>
</html>
OUTPUT
Specify where to display
the response after submitting the form
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to specify where to display the response after submitting the
form</title>
</head>
<body>
<form action="https://www.htmlresource.com/html-css-
exercise/basic/solution/button-formtarget-answer-demo.php"
method="POST">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit">Submit</button>
<button type="submit" formtarget="_blank">Submit to a new
window/tab</button>
</form>
</body>
</html>
OUTPUT
Specify a name for the button
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to specify a name for the button</title> 
</head>
<body>
<form action="https://www.htmlresource.com/html-css-
exercise/basic/solution/button-name-answer-demo.php" method="post">
Choose your favorite topic:
<button name="topic" type="submit"
value="JavaScript">JavaScript</button>
<button name="topic" type="submit" value="PHP">PHP</button>
</form>
</body>
</html>
OUTPUT
Specify the type of button
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to specify the type of button</title>
</head>
<body>
<form action="https://www.htmlresource.com/html-css-
exercise/basic/solution/button-type-answer-demo.php"
method="post"id="nameform">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
Address: <input type="text" name="add"><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
</body>
</html>
OUTPUT
Draw graphics, on the fly,
via scripting
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to use to draw graphics, on the fly, via scripting</title>
</head>
<body>
Canvas
<style>
#FirstCanvas{
width: 500px;
height: 300px;
border: 3px solid red; 
background-color: blue;
}
</style>
<body>
<canvas id="FirstCanvas"></canvas>
</body>
</html>
OUTPUT
Define a table caption
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define a table caption</title>
</head>
<body>
<table border="1">
<caption>First column holds Student code and second column holds
percentage of marks obtained by the student</caption> 
<tr>  
<th>Student code </th>
<th>% of marks </th> 
</tr>
<tr>  
<td>S001</td>
<td>85</td>
</tr>
<tr>  
<td>S002</td>
<td>86</td>
</tr>
<tr>  
<td>S003</td>
<td>72</td>
</tr>
<tr>  
<td>S004</td>
<td>89</td>
</tr>
</table
</body>
</html>
OUTPUT
Specify the column properties
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to specify the column properties of each column within a
column group element</title>
</head>
<body>
<table class="table table-bordered">
<colgroup>
<col span="3" style="background-color:#cc66Ff">
<col style="background-color:#cc66Ff">
</colgroup>
<tr>
<th>COL-1</th>
<th>COL-2</th>
<th>COL-3</th>
</tr>
<tr>
<td>MySQL</td>
<td>PHP</td>
<td>SQL</td>
</tr>
<tr >
<td>MySQL Exercise</td>
<td>PHP Exercise</td>
<td>SQL Exercise</td>
</tr>
</table>
</body>
</html>
OUTPUT
Define important text
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define important text</title>
</head>
<body>
<p>This is an example of <strong>HTML strong tag.</strong></p>
</body>
</html>

OUTPUT
This is an example of HTML strong tag.
Specify a list of pre-defined options
for input controls
HTML CODE
<!doctype html>
<html>
<head>
<title>HTML5 datalist example</title>
</head>
<body>
<input list="Languages" />  
<datalist id="Languages">
<option value="PHP">
<option value="ASP">
<option value="Python">
<option value="Ruby">
<option value="Java">
</datalist>
</body>
</html>
OUTPUT
Define a description
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define a description/value of a term in a description
list</title>
</head>
<body>
<dl>  
<dt>PHP</dt>
<dd>A server side scripting language.</dd>   <dt>JavaScript</dt>
<dd>A client side scripting language.</dd>   </dl>
</body>
</html>
OUTPUT
PHP
A server side scripting language.
JavaScript
A client side scripting language.
Define a dialog box
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define a dialog box or window</title>
</head>
<body>
<style>
table, th, td {
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<th>March <dialog open>This is an open dialog window</dialog></th>
<th>April</th>
<th>May</th>
</tr>
<tr>
<td>31</td>
<td>30</td>
<td>31</td>
</tr>
</table>

</body>
</html>
OUTPUT
Define a section
in a document
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define a section in a document</title>
</head>
<body>
<div>
<h1>htmlresource Tutorial</h1>
<p>This is example of division</p>
</div>
</body>
</html>
OUTPUT

htmlresource Tutorial
This is example of division

You might also like