Personal Website

 You will be making a personal website for yourself in native html, using and adapting the following 6 files plus adding at least one picture.  You may want to add more files.  Make sure all files are in the same folder.  Get ideas for other improvements to your html by using your textbook examples or w3schools website examples.  You can see this example run here.  Have fun, but keep your time investment manageable.

FIRST HTLM FILE:  COPY TO NOTEPAD.  SAVE AS HTML FILE NAV

<html>
<body>
<a href=”education.html” target=”main”>Education</a><br />
<a href=”contactme.html” target=”main”>Contact Me</a><br />
</body>
</html>

SECOND HTML FILE:  COPY TO NOTEPAD.  SAVE AS HTML FILE PICTURE

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

THIRD HTML FILE:  COPY TO NOTEPAD  SAVE AS education.html

<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>

FOURTH FILE:  COPY TO NOTEPAD.  SAVE AS contactme.html

<html>
<body>

<h3>Send e-mail to someone@example.com:</h3>

<form action=”MAILTO:someone@example.com” method=”post” enctype=”text/plain”>
Name:<br />
<input type=”text” name=”name” value=”your name” /><br />
E-mail:<br />
<input type=”text” name=”mail” value=”your email” /><br />
Comment:<br />
<input type=”text” name=”comment” value=”your comment” size=”50″ />
<br /><br />
<input type=”submit” value=”Send”>
<input type=”reset” value=”Reset”>

</form>
</body>
</html>

FIFTH FILE:  COPY TO NOTEPAD.  SAVE AS main.html

<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>

SIXTH AND LAST MAIN FILE:  SAVE AS index.html

<html>
<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>

</html>

Leave a Reply

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