LEARNING HTML

XHTMLBASICS- EXERCISES

XHTML – BODY AND TEXT BASIC

  1. Create a new folder in your MySites folder called XHTML Basics.

Either…

  1. Open Notepad++, create a new file and enter the code shown below.

Or…

  1. Open DreamweaverCS6, define a new Dreamweaver site called XHTML Basicsand set the root folder as the XHTML Basicsfolder that you have just created.
  1. Create a new HTML file (select XHTML 1.0Transitional) view the page in Code View.
  1. Edit the page in Code View as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Sample Heading Tags</title>

</head>

<body>

<h1>Heading Level 1</h1>

<h2>Heading Level 2</h2>

<h3>Heading Level 3</h3>

<h4>Heading Level 4</h4>

<h5>Heading Level 5</h5>

<h6>Heading Level 6</h6>

</body>

</html>

  1. Now, save the web page asheadings.htmlmaking sure that the file is saved to the XHTML Basics folder and view the page locally in a browser. The page should appear as follows:

  1. Open the HTML file headings.html and save the file immediately as headings2.html.
  1. Edit the page in Code View as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Sample Heading Tags</title>

</head>

<body>

<h1>Heading Level 1</h1>

<p>This is a sample paragraph about HTML and XHTML. XHTML is the newest version of HTML. XHTML uses the tags and attributes of HTML along with the syntax of XML.

</p>

<h2>Heading Level 2</h2>

<h3>Heading Level 3</h3>

<h4>Heading Level 4</h4>

<h5>Heading Level 5</h5>

<h6>Heading Level 6</h6>

</body>

</html>

  1. Save the web page headings2.html and view the page locally in a browser. The page should appear as follows:

  1. Open the HTML file headings2.html and save the file immediately as headings3.html.
  1. Edit the page in Code View as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Sample Heading Tags</title>

</head>

<body>

<h1>Heading Level 1</h1>

<p>This is a sample paragraph about HTML and XHTML. <br />

XHTML is the newest version of HTML. XHTML uses the tags and attributes of HTML along with the syntax of XML.

</p>

<h2>Heading Level 2</h2>

<h3>Heading Level 3</h3>

<h4>Heading Level 4</h4>

<h5>Heading Level 5</h5>

<h6>Heading Level 6</h6>

</body>

</html>

  1. Save the web page headings3.html and view the page locally in a browser. The page should appear as follows:

  1. Open the HTML file headings3.html and save the file immediately as headings4.html.
  1. Edit the page in Code View as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Sample Heading Tags</title>

</head>

<body>

<h1align="center”>Heading Level 1</h1>

<palign="center”This is a sample paragraph about HTML and XHTML. <br />

XHTML is the newest version of HTML. XHTML uses the tags and attributes of HTML along with the syntax of XML.

</p>

<h2>Heading Level 2</h2>

<h3>Heading Level 3</h3>

<h4>Heading Level 4</h4>

<h5>Heading Level 5</h5>

<h6>Heading Level 6</h6>

</body>

</html>

  1. Save the web page headings4.html and view the page locally in a browser. The page should appear as follows:

  1. Create a new HTML file (select XHTML 1.0Transitional) view the page in Code View.
  1. Edit the page in Code View as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Blockquote Example</title>

</head>

<body>

<h1>Markup Languages</h1>

<blockquote>

HTML HyperText Markup Language<br />

DHTML Dynamic HyperText Markup Language<br />

XHTML eXtensible HyperText Markup Language<br />

XML eXtensible Markup Language

</blockquote>

</body>

</html>

  1. Save the web page as blockquote.html and view the page locally in a browser. The page should appear as follows:

XHTML – LIST BASIC

  1. Create a new HTML file (select XHTML 1.0Transitional) view the page in Code View.
  1. Edit the page in Code View as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Definition List</title>

</head>

<body>

<h1>Sample Definition List</h1>

<dl>

<dt>TCP</dt>

<dd>Transmission Control Protocol is a method (protocol) used along with the Internet Protocol (IP) to send data in the form of message units, called packets, between computers over the Internet.</dd>

<dt>IP</dt>

<dd>Internet Protocol is the method or protocol by which data is sent from one computer to another on the Internet. Each computer on the Internet is uniquely identified by an IP address.</dd>

<dt>FTP</dt>

<dd>File Transfer Protocol is a protocol used to exchange files between computers on the Internet. </dd>

<dt>HTTP</dt>

<dd>Hypertext Transfer Protocol is the protocol used for exchanging text, graphic images, sound, video, and other multimedia files on the Web.</dd>

</dl>

</body>

</html>

  1. Save the web page as definitionlist.html and view the page locally in a browser. The page should appear as follows:

  1. Create a new HTML file (select XHTML 1.0Transitional) view the page in Code View.
  1. Edit the page in Code View as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Headings and Lists</title>

</head>

<body>

<h1>Web Servers and Web Browsers</h1>

<h2>Popular Web Servers</h2>

<ol>

<li>Apache Web Server</li>

<li>Microsoft IIS</li>

<li>Sun Java System Web Server</li>

</ol>

<h2>Popular Web Browsers</h2>

<ul>

<li>Internet Explorer</li>

<li>Firefox</li>

<li>Opera</li>

</ul>

</body>

</html>

  1. Save the web page as ordered-unorderedlists.html and view the page locally in a browser. The page should appear as follows:
  1. Open the HTML file ordered-unorderedlists.html and save the file immediately as ordered-unorderedlists2.html.
  1. Edit the page in Code View as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Headings and Lists</title>

</head>

<body>

<h1>Web Servers and Web Browsers</h1>

<h2>Popular Web Servers</h2>

<oltype="A"

<li>Apache Web Server</li>

<li>Microsoft IIS</li>

<li>Sun Java System Web Server</li>

</ol>

<h2>Popular Web Browsers</h2>

<ultype="square"

<li>Internet Explorer</li>

<li>Firefox</li>

<li>Opera</li>

</ul>

</body>

</html>

  1. Save the web page ordered-unorderedlists2.html and view the page locally in a browser. The page should appear as follows:

XHTML – TEXT FORMATTING

  1. Create a new HTML file (select XHTML 1.0Transitional) view the page in Code View.
  1. Edit the page in Code View as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Web Design Steps</title>

</head>

<body>

<h1>Web Design Steps</h1>

<ul>

<li<strong>Determine the Intended Audience</strong<br />

<em>The colours, images, fonts, and layout should be tailored to thepreferences of your audience.<br />

The type of site content (reading level, amount of animation, etc.) shouldbe appropriate for your chosen audience.</em>

</li>

<li<strong>Determine the Goals of the Site</strong<br />

<em>Some common goals of web sites are: to be informative,to create a personal home page, to establish a corporate web presence,&nbsp;and to do business in e-commerce.</em>

</li>

<li<strong>Determine the General Content and Create a SiteFlowchart</strong<br />

<em>The site flowchart is sometimes called a Storyboard. <br />

Common organizational structures for web sites are: hierarchical, linear,and random.</em>

</li>

<li<strong>Sketch a Tentative Page Layout</strong<br />

<em>Be consistent in your overall layout -- color, typefaces, logo location,navigation bar, etc.<br />

Plan your Home Page Layout to avoid scrolling.<br />

Plan your Content Page Layout to be consistent, with easy navigation.</em>

</li>

</ul>

<p<small>Copyright &copy; 2012 Your name. All Rights Reserved.</small>

</p>

</body>

</html>

  1. Save the web page as design.html and view the page locally in a browser. The page should appear as follows:

XHTML – HYPERLINKS

  1. Create a new HTML file (select XHTML 1.0Transitional) view the page in Code View.
  1. Edit the page in Code View as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>My Web Site</title>

</head>

<body>

<h1>My Web Site</h1>

<p>Search <a href="

<p<a href=" College</a</p>

<p<a href="resume.html">My Resum&eacute;</a</p>

<p<a href="favourites.html">Favourite Web Sites</a</p>

<p>Contact: <a href = "mailto:"> </a</p>

</body>

</html>

  1. Save the web page as links.html and view the page locally in a browser. The page should appear as follows:

You are now going to create two other pages which will link to the above page.

  1. Create a new HTML file (select XHTML 1.0Transitional) view the page in Code View.
  1. Edit the page in Code View as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>My Web Site</title>

</head>

<body>

<h1>Resum&eacute;</h1>

<p>Job Objective: Entry-Level Web Developer</p>

<p<a href="links.html">Home</a> | Resum&eacute; | <a href = "favourites.html">Favourites</a</p>

</body>

</html>

  1. Save the web page as resume.html and view the page locally in a browser. The page should appear as follows:
  1. Create a new HTML file (select XHTML 1.0Transitional) view the page in Code View.
  1. Edit the page in Code View as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Favourite Sites</title>

</head>

<body>

<h1>Favourite Sites</h1>

<ul>

<li>Hobbies</li>

<li>XHTML</li>

<li>JavaScript</li>

<li>Professional Groups</li>

</ul>

<p<a href="links.html">Home</a> | <a href="resume.html">Resum&eacute;</a> | Favourites

</p>

<body>

</html>

  1. Save the web page as favourites.html and view the page locally in a browser. The page should appear as follows:
  1. Validate your pages using the W3C (World Wide Web Consortium) HTML validator (Markup Validation Service) at:

A - Learning HTML - XHTML Basics - ExercisesVersion 1

Page 1 of 16