Personal Website Html

Web Example:

Book examples:

This code is the top level of your page. Call it index.html.  It calls other html files and puts them in one of your 3 frames: You can change the name of the html files you call for each frame, and you can change the content of each html file.

<?xml version = “1.0″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
   “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
<html xmlns = “http://www.w3.org/1999/xhtml“>
   <head>
     <title>Sample Program</title>
   </head>
    <frameset cols = “200,*”>
     <frame name = “leftframe” src = “nav.html” />
     <frameset rows = “175,*”>
         <frame name = “picture” src = “picture.html” />
         <frame name = “main” src = “main.html” />
     </frameset>
   </frameset>
</html>

This is the nav.html file.  It is what is put in the left frame of your personal page.  If you put this file in the same location on your computer as the index html file above, it will appear in the left frame, with any changes you make.

<?xml version = “1.0″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
 
<html xmlns = “http://www.w3.org/1999/xhtml“>
 
   <head>
      <title> Quiz Example 1
      </title>
   </head>
   <body>
      <p>       
       <a href=”education.html” target=”main”>Education</a>           
         </a><br />       
       <a href=”contactme.html” target=”main”>Contact Me</a>
         </a><br />
      </p>
   </body>
</html>

This is picture.html.  It is called by your index program and it is put in the top frame.  It calls a picture.  If you put a picture of you in the same place on your computer, and change the name of the jpeg, it will display your picture.

<html>
<body>
<p>
<h1>Ab Van Etten</h1>

<img src=”Ab&LauraVanEtten.jpg” alt=”Ab and Laura” width=”44″ height=”44″ />
</p>
</body>
</html>

This html file is called main.html, and it is the first one called for the bottom middle frame.

<html>
<body>

<table border=”1″>
  <caption>Welcome to my Online Resume!  Click on the links for more info</caption>
  <tr>
    <th>Topic</th>
    <th>Data</th>
  </tr>
  <tr>
    <td>Address</td>
    <td>123 Lacey</td>
  </tr>
  <tr>
    <td>Phone</td>
    <td>222-5555</td>
  </tr>
</table>

</body>
</html>

This is the code for education.html.  Look at the code for nav.html above.  When you click on the link called Education, this html file is called up, and the contents put in the bottom middle, or main frame.

<html>
<body>

<h1>Oregon State University</h1>
<ol>
  <li>1975-1979, BS in Math</li>
  <li>More stuff</li>
  <li>Even more stuff..</li>
</ol>

</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>