You will be making a personal website for yourself in native html, using and adapting the following 6 files plus adding more links, html pages, and pictures. Make sure all files are in the same folder. Get ideas for other improvements to your html by using the w3schools website examples. You can see this example run here. Have fun, but keep your time investment manageable. At the same time, this is your first chance to show your commitment to this program. Put is some serious thought and effort. I will post your site to the Handouts folder. Make sure you use the file structure here. Do not use an html editor. The point here is to get used to writing and modifying html files so we can use JavaScript later.
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