html all tag
HTML basics exercises
1)
Create a webpage that prints your name to the
screen.
<html>
<body>
<!-- print name to the screen
-->
John
</body>
</html>
2)
Create a webpage that prints the numbers 1 - 10
to the screen.
<html>
<body>
<!--
print the numbers 1 to 10 to the screen -->
1
2 3 4 5 6 7 8 9 10
</body>
</html>
3)
Create a webpage and set its title to
"This is a webpage".
<html>
<head>
<!--set
the title of the page-->
<title>This
is a webpage</title>
</head>
<body>
<p
class="note">
The
title tag goes in the head section of an HTML document.
</p>
</body>
</html>
4) Create a webpage that prints the message "When was
this webpage created? Check page's title for the answer." to the screen,
and set the title of the page to the current date.
<html>
<head>
<!--set
the title of the page to the current date-->
<title>January
9th, 2009</title>
</head>
<body>
<!--print
a message-->
When
was this webpage created?
Check
page's title for the answer.
</body>
</html>
5)
Create a webpage that prints any text of your
choosing to the screen, do not include a head section in the code.
<html>
<!--there
is no head section in this HTML code-->
<body>
<!--print
a message-->
The
giraffe is a very interesting animal.
</body>
</html>
6) Repeat exercise #5, but this time include a head section in
the code.
<html>
<head>
<title>Print
some text</title>
</head>
<body>
<!--print
a message-->
The
giraffe is a very interesting animal.
</body>
</html>
HTML text exercises
7) Print your name in green.
<html>
<body>
<font
color="green">John</font>
</body>
</html>
8) Print the numbers 1 - 10, each number being a different
color.
<html>
<body>
<font
color="green">1</font>
<font
color="blue">2</font>
<font
color="gray">3</font>
<font
color="#008080">4</font>
<font
color="#0008B">5</font>
<font
color="brown">6</font>
<font
color="#dcdcdc">7</font>
<font
color="#800000">8</font>
<font
color="purple">9</font>
<font
color="#688e23">10</font>
</body>
</html>
9)
Prints your name in a Tahoma font.
<html>
<body>
<font
face="Tahoma">John</font>
</body>
</html>
10) Print a paragraph with 4 - 5 sentences. Each sentence
should be a different font.
<html>
<body>
<p>
<font
face="Courier New">
HTML
stands for Hyper Text Markup Language.
</font>
<font
face="Times New Roman">It is the core
language
of the world wide web and is used to define
the
structure and layout of web documents by using
various
tags and attributes.
</font>
<font
face="Helvetica">
Although
a fundamental language of the web, HTML is a
static
language - content created with it does not change.
</font>
<font
face="Georgia
HTML
is used to specify the way webpages look, not how they
function.
</font>
</p>
</body>
</html>
11)
Print a paragraph that is a description of a
book, include the title of the book as well as its author. Names and titles
should be underlined, adjectives should be italicized and bolded.
<html>
<body>
<p>
One
particular book which is recommended reading is <u>The Street
Lawyer</u> by <u>John Grisham</u>. This book is about a lawyer
who begins re-evaluating his priorities in life when a bad
incident
occurs within his law firm. Consequently, he becomes acquainted with the inner
city streets, and realizes the harsh existence of the homeless, and vows to
give them a chance in the courts. <u>The Street Lawyer</u> is a
<b><i>great</i></b>
book.
It is <b><i>well written</i></b> and
<b><i>interesting</i></b>. Other books by <u>John
Grisham</u> include <u>The Firm</u>, <u>The Pelican
Brief</u>, and <u>The Client</u>.
</p>
</body>
</html>
12)
Print your name to the screen with every letter
being a different heading size.
<html>
<body>
<h4>J</h4>
<h3>o</h3>
<h2>h</h2>
<h1>n</h1>
</body>
</html>
HTML text formatting exercises
13) Print the squares of the numbers 1 - 20. Each number should
be on a separate line, next to it the number 2 superscripted, an equal sign and
the result. (Example: 102 = 100)
<html>
<body>
1<sup>2</sup>
= 1
<br
/>
2<sup>2</sup>
= 4
<br
/>
3<sup>2</sup>
= 9
<br
/>
4<sup>2</sup>
= 16
<br
/>
5<sup>2</sup>
= 25
<br
/>
6<sup>2</sup>
= 36
<br
/>
7<sup>2</sup>
= 49
<br
/>
8<sup>2</sup>
= 64
<br
/>
9<sup>2</sup>
= 81
<br
/>
10<sup>2</sup>
= 100
<br
/>
11<sup>2</sup>
= 121
<br
/>
12<sup>2</sup>
= 144
<br
/>
13<sup>2</sup>
= 169
<br
/>
14<sup>2</sup>
= 196
<br
/>
15<sup>2</sup>
= 225
<br
/>
16<sup>2</sup>
= 256
<br
/>
17<sup>2</sup>
= 289
<br
/>
18<sup>2</sup>
= 324
<br
/>
19<sup>2</sup>
= 361
<br
/>
20<sup>2</sup>
= 400
</body>
</html>
14)
Prints 10 names with a line break between each
name. The list should be alphabetized, and to do this place a subscripted
number next to each name based on where it will go in the alphabetized list.
(Example: Alan1). Print
first, the unalphabetized list with a subscript number next to each name, then
the alphabetized list. Both lists should have an <h1> level heading.
<html>
<body>
<h1>Unalphabetized
list</h1>
Bill<sub>3</sub>
<br
/>
Roger<sub>5</sub>
<br
/>
Sandra<sub>6</sub>
<br
/>
Stacy<sub>7</sub>
<br
/>
William<sub>10</sub>
<br
/>
Thomas<sub>8</sub>
<br
/>
Wendy<sub>9</sub>
<br
/>
Jane<sub>4</sub>
<br
/>
Andy<sub>1</sub>
<br
/>
Anna<sub>2</sub>
<h1>Alphabetized
list</h1>
Andy
<br
/>
Anna
<br
/>
Bill
<br
/>
Jane
<br
/>
Roger
<br
/>
Sandra
<br
/>
Stacy
<br
/>
Thomas
<br
/>
Wendy
<br
/>
William
</body>
</html>
15)
Print two paragraphs that are both indented
using the command.
<html>
<body>
<p>
Computer
programming is defined as telling a computer what to
do
through a special set of instructions which are then
interpreted
by the computer to perform some task(s). These
instructions
can be specified in one or more programming
languages
including (but not limited to) Java, PHP, C, and
C++.
A computer goes through a series of steps whose purpose
is
to achieve something - a series of steps that are
instructed
to it in great detail by computer programs.
Essentialy,
computer programming is the process by which these
programs
are designed and implemented.
</p>
<p>
While
computer programming can be a great tool used to achieve
many
things, there are a few misconceptions when it comes to
the
subject, a few misconceptions that should be cleared up.
One
misconception about computer programming is that you would
need
to have some kind of special software to write programs -
this
is hardly the case.
</p>
</body>
</html>
16) Print two lists with any information you want. One list
should be an ordered list, the other list should be an unordered list.
<html>
<body>
<b>Hardware
devices</b>
<ol
type="I">
<li>CD-ROM
drive</li>
<li>DVD
drive</li>
<li>Hard
disk</li>
<li>Modem</li>
</ol>
<b>Web
languages</b>
<ul
type="square">
<li>HTML</li>
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
</ul>
</body>
</html>
1) Prints an h1 level heading followed by a horizontal line
whose width is 100%. Below the horizontal line print a paragraph relating to
the text in the heading.
<html>
<body>
<h1>Cookie</h1>
<hr
width="100%" />
<p>
A
delicious confection that is quite popular when it comes to
sweets.
Cookies come in various varieties including chocolate
chip,
raisin, and macademia nut. A very different type of
cookie
is a small text file stored on a user's computer by
a
web server.
</p>
</body>
</html>
2)
Print some preformatted text of your choosing.
(hint: use the <pre> tag)
<html>
<body>
<b>A
sample Java program:</b>
<pre>
class
DataClass{
public static void main(String[] args){
System.out.println("Here
is some text.");
}
}
</pre>
<p>
Using
the pre element you can display text however you want with all the spaces and
line breaks preserved.
</p>
</body>
</html>
3) Print a long quote and a short quote. Cite the author of
each quote.
<html>
<body>
<blockquote>
"Anyone
who has lost track of time when using a
computer
knows the propensity to dream, the urge
to
make dreams come true and the tendency to miss
lunch."
- Tim Berners-Lee
</blockquote>
<br
/>
<q>"Hi,
Super Nintendo Chalmers!"</q> - Ralph Wiggum
</body>
</html>
4) Print some deleted and inserted text of your choosing.
<html>
<body>
HTML
stands for
<del >Hyper Translation Markup Language</del
<ins>Hyper
Text Markup Language</ins>.
</body>
</html>
5) Print a definition list with 5 items.
<html>
<body>
<dl>
<dt>HTML</dt>
<dd>A markup language</dd>
<dt>Pen</dt>
<dd>A writing tool</dd>
<dt>Lettuce</dt>
<dd>A vegetable</dd>
<dt>Technology</dt>
<dd>The development of tools which
serve as a means to
certain
objectives</dd>
<dt>Megabyte</dt>
<dd>A unit of data consisting of 1024
kilobytes</dd>
</dl>
</body>
</html>
6) Print two addresses in the same format used on the front of
envelopes (senders address in top left corner, receivers address in the
center).
<html>
<body>
<address>
Dilbert
H.<br />
</address>
<br
/><br />
<center>
<address>
Someone
A. Person<br />
5555
Street Avenue<br />
Metrpolitan,
Metropolis 11111
</address>
</center>
</body>
</html>
7)
Print ten acronyms and abbreviations of your
choosing, each separated by two lines. Specify the data that the abbreviations
and acronyms represent.
<html>
<body>
<abbr
title="Abstract">Abstr.</abbr>
<br
/><br />
<abbr
title="Biochemistry">Biochem.</abbr>
<br
/><br />
<abbr
title="Example">Ex.</abbr>
<br
/><br />
<abbr
title="Literature">Lit.</abbr>
<br
/><br />
<abbr
title="Mathematics">Math.</abbr>
<br
/><br />
<acronym
title="World Wide Web Consortium">W3C</acronym>
<br
/><br />
<acronym
title="Institute
of Electrical
and
Electronic Engineers">IEEE</acronym>
<br
/><br />
<acronym
title="International Standards Organization">
ISO
</acronym>
<br
/><br />
<acronym
title="Hyper Text Markup Language">HTML</acronym>
<br
/><br />
<acronym
title="Beginners All Purpose
Symbolic
Instruction Code">BASIC
</acronym>
<p>
Move
your mouse over an abbreviation or acronym to get more data.
</p>
</body>
</html>
HTML link exercises
8)
Create some links to various search engines
(google, yahoo, altavista, lycos, etc).
<html>
<body>
<a
href="http://www.google.com">
Search
the web with Google!
</a>
<br
/><br />
<a
href="http://www.yahoo.com">
Search
the web with Yahoo!
</a>
<br
/><br />
<a
href="http://www.bing.com">
Search
the web with Bing!
</a>
<br
/><br />
<a
href="http://www.altavista.com">
Search
the web with Altavista!
</a>
<br
/><br />
<a
href="http://www.lycos.com">
Search
the web with Lycos!
</a>
</body>
</html>
9)
Create links to five different pages on five
different websites that should all open in a new window.
<html>
<head>
<title>Links
to various pages</title>
</head>
<body>
<a
href="http://www.landofcode.com/about.php"
target="_blank">
Landofcode.com
about page
</a>
<br
/><br />
<a
href="http://www.hostforweb.com" target="_blank">
HostForWeb
Web Hosting
</a>
<br
/><br />
<a
href="http://www.gmx.com" target="_blank">
GMX
email
</a>
<br
/><br />
<a
href="http://www.weather.com" target="_blank">
Find
out local weather
</a>
<br
/><br />
<a
href="http://www.math.com/homeworkhelp/Algebra.html"
target="_blank">
Learn
about algebra
</a>
</body>
</html>
10)
Create a page with a link at the top of it that
when clicked will jump all the way to the bottom of the page.
<html>
<body>
<a
href="#bottom">Click here to jump to the bottom of the
page</a>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<a
name="bottom">The bottom of the page</a>
</body>
</html>
11) Create a page with a link at the bottom of it that when
clicked will jump all the way to the top of the page.
<html>
<body>
<a
name="top">The top of the page</a>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<a
href="#top">Jump to the top of the page</a>
</body>
</html>
12) Create a page with a link at the top of it that when
clicked will jump all the way to the bottom of the page. At the bottom of the
page there should be a link to jump back to the top of the page.
<html>
<body>
<a
name="top">The top of the page</a>
<br
/><br />
<a
href="#bottom">Jump to the bottom of the page</a>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<p>Some
text</p>
<a
href="#top">Jump to the top of the page</a>
<br
/><br />
<a
name="bottom">The bottom of the page</a>
</body>
</html>
HTML image exercises
13) Display five different images. Skip two lines between each
image. Each image should have a title.
<html>
<head>
<title>Five
images</title>
</head>
<body>
<img
src="/images/apple.jpg" alt="Apple" title="Apple"
/>
<br
/><br />
<img
src="/images/sky.jpg" alt="Sky" title="Sky" />
<br
/><br />
<img
src="/images/swan.jpg" alt="Swan" title="Swan"
/>
<br
/><br />
<img
src="/images/tree.jpg" alt="Tree" title="Tree"
/>
<br
/><br />
<img
src="/images/waterfall.jpg" src="Waterfall" title="Waterfall"
/>
</body>
</html>
14) Display an image that has a border of size 2, a width of
200, and a height of 200.
<html>
<body>
<img
src="/images/tree.jpg" width="200" height="200"
alt="Tree" border="2" />
</body>
</html>
15) Display an image that when clicked will link to a search
engine of your choice (should be opened in a new window).
<html>
<body>
<a
href="http://www.yahoo.com" target="_blank">
<img
src="/images/swan.jpg" alt="Swan" />
</a>
</body>
<p>
Click
on the image to be taken to the Yahoo search engine.
</p>
</html>
16) Display an image that when clicked will link to itself and
will display the image in the browser by itself.
<html>
<body>
<a
href="/images/apple.jpg" target="_top">
<img
src="/images/apple.jpg" alt="Apple" />
</a>
<p>
Click
on the image to see it in the browser by itself.
</p>
</body>
</html>
HTML basics
<html>
<body style="background-color:black;">
<p
style="color:yellow;">
The background color of a webpage
can be set through the CSS background-color attribute.
</p>
<p
style="color:yellow;">
Learn all about CSS with our <a
href="/css-tutorials/" target="_blank">CSS tutorials</a>.
</p>
</body>
</html>
<html>
<body>
<!--
This
is a comment, it will not be seen on a webpage.
-->
<p>
But
this text sure will be seen!
</p>
</body>
</html>
<html>
<head>
<title>The
page of all pages</title>
</head>
<body>
<p>
The
title of a webpage appears in the upper left corner of a web browser window. If
you look at the upper left corner of your web browser window now you will see
the title "Online code editor"
</p>
</body>
</html>
<html>
<body>
This
is a very simple HTML document with just some text on it.
</body>
</html>
HTML text
21)
Displaying bold, italic, or underlined
text
<html>
<body>
<b>Here is
some bold text</b>
<br />
<i>Here is
some italic text</i>
<br />
<u>Here is
some underlined text</u>
<br
/><br />
<b><u><i>
Here is some
bold, italic, and underlined text
</i></u></b>
</body>
</html>
<html>
<body>
<h6>Headings</h6>
<h5>come in</h5>
<h4>a few different
sizes</h4>
<h3>Use them</h3>
<h2>for page</h2>
<h1>organization</h1>
</body>
</html>
<html>
<body>
<font
color="green">
The font element is deprecated in
HTML 4 and CSS should be used instead.
</font>
<font size="6">
Although deprecated, the font
element is not obsolete, it can still be used.
</font>
<font
face="Courier">
The font element can be used for
backward compatibility -
</font>
<font face="Verdana"
color="gray" size="8">
for browsers that do not support
CSS.
</font>
<p>
As an alternative to the font
element, you can use stlyesheets to set the size, font, and color of text.
Learn more about stylesheets at our <a href="/css-tutorials/"
target="_blank">CSS tutorials</a>.
</body>
</html>
<html>
<body>
<h6
style="color:green;">The text</h6>
<h5
style="color:#228B22;">will gradually</h5>
<h4
style="color:#006400;">get</h4>
<h3 style="color:rgb(25,
66, 30);">bigger</h3>
<h2 style="color:rgb(14,
9, 256);">and bigger</h2>
<h1
style="color:black;">and bigger</h1>
<font
color="blue"><b><i>
Some text can be blue, bold, and
italic
</i></b></font>
<br />
<font color="teal"
size="4" face="Verdana"><u><i><b>
And some text can be teal, bold,
italic, and underlined
</b></i></u></font>
</body>
</html>
HTML text
formatting
<html>
<body>
<abbr
title="Miscellaneous">Misc</abbr>
<br /><br />
<acronym title="Hyper Text
Markup Language">HTML</acronym>
<p>
Move your mouse over 'Misc' to see
what it is an abbreviation of. Move your mouse over 'HTML' to see what it is an
acronym of. The information will appear in a small box (called a tooltip) next
to the text.
</p>
</body>
</html>
<html>
<body>
<address>
Someone A. Person<br />
P.O. BOX 123<br />
</address>
</body>
</html>
<html>
<body>
<b>Square numbers:</b>
<br /><br />
1
<br />
4
<br />
9
<br />
16
<br />
25
<br />
36
<br />
49
<br />
64
<br />
81
<br />
100
</body>
</html>
<html>
<body>
<code>
Use the code element to display
computer programming code
</code>
<br /><br />
<kbd>Use the kbd element for
input from the keyboard</kbd>
<br /><br />
<tt>Use the tt element for
teletype text</tt>
<br /><br />
<samp>Use the samp element
for sample text</samp>
<br /><br />
<var>Use the var element to
display variables</var>
</body>
</html>
29) Definition lists
<html>
<body>
<b>A definition
list:</b>
<dl>
<dt>HTML</dt>
<dd>Stands for Hyper Text Markup Language. A computer language
used to create webpages.</dd>
<dt>Guitar</dt>
<dd>A stringed musical instrument.</dd>
</dl>
</body>
</html>
<html>
<body>
HTML stands for
<del >Hyper
Translation Markup Language</del >
<ins>Hyper Text Markup
Language</ins>.
</body>
</html>
<html>
<body>
<p>
Horizontal lines can have widths
of various sizes.
</p>
<b>100%:</b>
<hr width="100%"
/>
<b>50%:</b>
<hr width="50%" />
<b>other sizes:</b>
<hr width="80%" />
<hr width="60%" />
<hr width="70%" />
<hr width="32%" />
<hr width="12%" />
<hr width="86%" />
</body>
</html>
<html>
<body>
Colors:
<ol>
<li>Green</li>
<li>Blue</li>
<li>Gray</li>
<li>Orange </li>
<li>Teal</li>
</ol>
</body>
</html>
<html>
<body>
<b>An ordered list with
numbers (default):</b>
<ol>
<li>Telephone</li>
<li>Cellular phone</li>
<li>Television</li>
<li>Fax machine</li>
</ol>
<b>An ordered list with
lowercase letters:</b>
<ol type="a">
<li>Telephone</li>
<li>Cellular
phone</li>
<li>Television</li>
<li>Fax machine</li>
</ol>
<b>An ordered list with
uppercase letters:</b>
<ol type="A">
<li>Telephone</li>
<li>Cellular
phone</li>
<li>Television</li>
<li>Fax machine</li>
</ol>
<b>An ordered list with
lowercase roman numerals:</b>
<ol type="i">
<li>Telephone</li>
<li>Cellular
phone</li>
<li>Television</li>
<li>Fax machine</li>
</ol>
<b>An ordered list with
uppercase roman numerals:</b>
<ol type="I">
<li>Telephone</li>
<li>Cellular
phone</li>
<li>Television</li>
<li>Fax machine</li>
</ol>
</body>
</html>
Thank you so much!!!
ReplyDelete