Creating a portfolio using HTML coding (building a website)
1. In the folder “Junior High Portfolios”, right click, select “new”, and then “folder”. Name the folder with your first name and last initial, all lower case, no spaces.
2. Go to your “Thanks M’am” folder in “Language arts” and open your paper in Word.
3. Go to “file” save as, and select “other formats”. The select “Web Page” and save it to the new folder you created in “Junior High Portfolios” When you save it, name it “thanks”. Since you are saving it as a web page, Word will automatically add a .htm file extension to it.
4. Go to the “Charles” folder and do the same thing (save it as a web page named “charles” in your new folder)
Now we will create an index page with links to your two essays.
1. Open Internet Explorer and go to “mrwaite.yolasite.com” and click on the link that says
“HTML Tips – web page codes”
2. Open up notepad by going to “Programs” then “Accessories”, then “Notepad”
3. Copy and paste the “basic page code” from the HTML Tips page into Notepad.
4. Save the file into your new folder as “index.htm” and then close notepad.
5. Go to the file in the “Junior High Portfolios” and click on it to open it. It should open in Internet Explorer.
6. Hit the “F12” Key. A panel will open at the bottom of Internet Explorer. Click on “file” in that panel, and select “Customize Internet Explorer View Source”, then make sure “Notepad” is checked. You can then close (X out) the bottom panel.
7. Right click on the web page and select “view source” . Notepad will open to show the codes you will be working with.
Finally – the links
1. Copy and paste the “Link Code” from the HTML Tips page into Notepad two times. It looks like this:
<a href="page.html">click here for page!</a> <a href="page.html">click here for page!</a>
2. Where it says “page.html”, change it to “thanks.htm”, and on the second one, change it to “charles.htm”. Hit “control S” to save your work.
3. Go to your new web page and hit refresh. You should now see the two links. Click on them to see if they work!
Add an image to your page
1. Find an image that you like. Make sure it is not too large. Right click on the image and select
“Save picture as” and save it to you new folder. If it has a really long name or string of numbers, rename with a simple name, all lower case. Make sure that you notice what type of image file it is - .jpg, .gif, .png, or other.
2. Copy the image code from the HTML Tips page. It looks like this:
<img src="image.jpg">
3. Substitute the name of your image in place of where it says “image.jpg”. Your image may be a .jpg or another type of file. Make sure you have the image name and file type in the code.
4. Hit “control S” to save your file, then refresh your browser to see if it shows up.
