xHTML and stuff: 2011

Wednesday, 27 April 2011

Javascript

As I want to use javascript to load up xml files of the information for my website I needed to find some code which enabled me to do this and modify it.

I managed to find this website with a good example of how to do it and modified it to work with my website

http://www.codeproject.com/KB/scripting/xmldso.aspx

Here is the code for the site:

<script type="text/javascript">
//<![CDATA[
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","XML/Weapons.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("HK416");
for (i=0;i<x.length;i++)
{
document.write("<h1>HK416<\/h1>");
document.write("<p /><img src=images/HK416.jpg img id=imgstyle img width=30% img height=30%/>");
document.write("<p /><b>Name: <\/b>");
document.write(x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue);
document.write("<br /><b>Manufacturer: <\/b>");
document.write(x[i].getElementsByTagName("MANUFACTURER")[0].childNodes[0].nodeValue);
document.write("<br /><b>Weight: <\/b>");
document.write(x[i].getElementsByTagName("WEIGHT")[0].childNodes[0].nodeValue);
document.write("<br /><b>Length: <\/b>");
document.write(x[i].getElementsByTagName("LENGTH")[0].childNodes[0].nodeValue);
document.write("<br /><b>Cartridge: <\/b>");
document.write(x[i].getElementsByTagName("CARTRIDGE")[0].childNodes[0].nodeValue);
document.write("<br /><b>Fire rate: <\/b>");
document.write(x[i].getElementsByTagName("FIRERATE")[0].childNodes[0].nodeValue);
document.write("<br /><b>Magazine size: <\/b>");
document.write(x[i].getElementsByTagName("MAGAZINESIZE")[0].childNodes[0].nodeValue);
}
document.write("<\/table>");
//]]>
</script>

CSS menu's

As the main site uses CSS dropline menu's I needed to find a way in which to create a menu easily.

I found this example and edited it for my main site.

http://www.cssmenumaker.com/builder/menu_info.php?menu=066

Here is the edited verison:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional1.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head><title>Weapons of war</title>
<link href="css1.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<div class="Banner">
<img src = "Banner.jpg" alt=""/>

</div>

<div class="nav">
<div class="table">
<ul class="select"><li><a href="#"><b>WEAPONS</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="HK416.html">HK416</a></li>
<li><a href="M16A4.html">M16A4</a></li>
<li><a href="MK17.html">MK17</a></li>
<li><a href="L85A2.html">L85A2</a></li>
<li><a href="AK74.html">AK74</a></li>
</ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>EXPLOSIVES</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="AT4.html">AT4</a></li>
<li><a href="SMAW.html">SMAW</a></li>
<li><a href="Gustav.html">Carl Gustav</a></li>
<li><a href="LAW.html">LAW</a></li>
<li><a href="RPG7.html">RPG-7</a></li>
</ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>TANKS</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="T90.html">T90</a></li>
<li><a href="T72.html">T72</a></li>
<li><a href="Challenger.html">Challenger</a></li>
<li><a href="Leopard.html">Leopard</a></li>
<li><a href="Abrams.html">Abrams</a></li>
</ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>VEHICLES</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="Bradley.html">Bradley</a></li>
<li><a href="M113.html">M113</a></li>
<li><a href="Warrior.html">Warrior</a></li>
<li><a href="BTR80.html">BTR-80</a></li>
<li><a href="BMP3.html">BMP-3</a></li>
</ul>
</div>
</li>
</ul>

</div>
</div>

<div class="bar"></div>
</body>
</html>

Wednesday, 23 March 2011

Chapter 9 + 13 - Javascript and forms

This website uses javascript and forms to allow you to check what has been entered within a form and to check if valid.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head><title>Chapter 14</title>
  <link href="css1.css" rel="stylesheet" type="text/css" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script type="text/javascript">
  
  </script>

</head>

<body>
  <h1>JavaScript Form Handling</h1>
  <form method="post" action="http://webdevfoundations.net/scripts/formdemo.asp" onsubmit="return validateForm();">
   <div>
    <label for="userName">Name:</label>
    <input type="text" name="userName" id="userName" />
   <div>

   <div>
    <label for="userAge">Age:</label>
    <input type="text" name="userAge" id ="userAge" />
   </div>

   <div>
    <input type="submit" value="Send information" />
   </div>
  </form>
</body>
</html>

CSS:
body
{
background-color: #FFFFFF;
color: #000000;
font-size: 12px;
font-family: Arial, Verdana, sans-serif;
margin: 0px;
}

div
{
  padding-bottom: 10px;
  width: 250px;
  text-align: right;
}
label
{
  padding-right: 5px;
}

Thursday, 17 March 2011

Chapter 3 + 4

Chapter 3 and 4 were all about CSS. It taught how to use spans and divs, style sheets, specific comands for borders, image editing as well as more.

Here is the html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head><title>Chapter 4</title>
  <link href="css1.css" rel="stylesheet" type="text/css" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  <div id="wrapper1">

   <h1>Chapter 4 website</h1>

   <div id="wrapper2">
   This is random text which has been placed here to add content to the page

   <h2>Definition lists</h2>
   <dl>
    <dt>Definition<dt>
     <dd>This is an example</dd>
    <dt>Lists</dt>
     <dd>This is an example</dd>

   </dl>

   <p>

   <h2>Ordered lists</h2>
   <ol type="A">
    <li>Ordered</li>
    <li>List</li>
   </ol>

   <p>

   <h2>Unordered lists</h2>
   <ul type="square">
    <li>Un-</li>
    <li>Ordered</li>s\
    <li>List</li>
   </ul>

   <p>

   <h2>Physical style elements</h2>
   <b>Bold</b><br>
   <u>Underlined</u><br>
   <i>Italics</i><br>

   <p>

   <h2>Hyperlinks</h2>
   <a href="http://google.com%22%3egoogle%3c/a%3E%3Cbr>
   <a href="http://google.com%22%3egoogle%3c/a%3E%3Cbr>

   <p>

   <h2>Images</h2>
   <img src="image.JPG" />

   <p>


   <p id="footer">This is an example footer</p>
   </div>



  </div>

</body>
</html>

here is the css:
body
{
background-color: #FFCCCC;
color: #000000;
font-size: 12px;
font-family: Arial, Verdana, sans-serif;
margin: 0px;
}
h1
{
background-color: #CC0033;
font-size: 30px;
padding-left: 5px;
padding-top: 15px;
border-bottom: 1px dashed #000000
}

h2
{
font-size: 16px;
border-bottom: 1px dashed #000000;
}
dt
{
font-weight: bold;
}
a
{
font-weight: bold;
font-color: #000000;
}

.dashedborder
{
border: 1px dashed #000000
}

#footer
{
font-size: 8px;
font-style: Italic;
}

#wrapper1
{
width: 800px;
margin-left: auto;
margin-right: auto;
padding-bottom: 5px;
background-color: #FF9999;
border: 1px solid #000000;
}

#wrapper2
{
width: 780px;
margin-left: auto;
margin-right: auto;
}

Thursday, 10 February 2011

Chapter 2 - Basics of html

Chapter 2 contained most of the basic tags within the language of html and showed you how to use them effectively.

Here is the html which I wrote for the website:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional1.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head><title>Chapter 1</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

  <h1>Chapter 2 website</h1>
  This website was created to demostrate the teqniques which were used in chapter one this teqniques included:
  <dl>
   <dt>Definition<dt>
    <dd>This is an example</dd>
   <dt>Lists</dt>
    <dd>This is an example</dd>

  </dl>

  <p>

  <ol type="A">
   <li>Ordered</li>
   <li>List</li>
  </ol>

  <p>

  <ul type="square">
   <li>Un-</li>
   <li>Ordered</li>
   <li>List</li>
  </ul>

  <p>

  <b>Physical style elements</b>

  <p>

  <a href="http://google.com%22%3elinks%3c/a>

  <p>

</body>
</html>