How I Constructed My First Web Page
John Wakeman
CGS 1570
Getting Started:
1. To begin I opened Microsoft Word and selected a new page; this time choosing a webpage though as opposed to opening up a word document. After that I opened the homepage directory through the Osprey machine and logged in using my N-number and password. To create my homepage I had to type “mkdir homepage”, which developed my own personal folder to insert various pages. This is what the osprey machine looks like when it is open:
W E L C O M E T O O S P R E Y
Please report any problems to the
ITS
(904) 620-HELP (4357), its-support@unf.edu
osprey:~$ mkdir homepage
2. Then I went back to my webpage on Microsoft Word and started inserting different pictures, and also added various texts to the page.
3. Then added some information about myself, including my name and where I go to school.
Creating My Index.htm page:
1. After I had added some text and a picture of myself I decided to add a table detailing my current schedule for the Summer A term. That was not to difficult, all I had to do was move my cursor to the top menu and select “table”, and chose what size table I wanted to use. Since I am only taking two classes right now I chose to use just two columns and three rows.
The table looks like this:
|
M T W R |
|
|
|
T R F |
|
2. I also chose to add hyperlinks to my two classes so that when you click on them you are immediately directed to that class site. To do that I highlighted each of them separately and went to the top of the page and clicked on the “insert hyperlink” toolbar. Then I typed in the address corresponding to that particular class’s website. Then I also added a link to the UNF homepage.
As you can see here:
I am currently a sophomore at the
University of North
Florida.
3. After that I had to save it so I went to the file taskbar and clicked “save as”, and saved it as a webpage title index.htm. Then I went back to the osprey web server and moved my cursor to the top of the menu and clicked on this folder that was colored blue and yellow. When I did that it took me to a separate osprey page where I could view my homepage folder.
4. There was nothing in it yet because I had yet to insert my index.htm and index_files into it. To do that I simply went to the left side of the screen and found the page titled index and its index_files, then I dragged them over to the homepage folder.
5. After that I saved it in the homepage directory on the Osprey machine and then I was able to view it on the internet.
Creating My Links.htm page:
1. To begin creating a link to my favorite links page, I first had to open my index.htm page on Microsoft Word. Then I added text saying “links.htm” and changed the color of the font. Like this:
2. After that I opened up a new webpage to create my links page. There I added some links, including Google, Mxtabs.net, and Fluidgroove.net.
3. To have them link to their website when you click on the picture I went to the top of the page and selected the “insert hyperlink” toolbar. To insert the
4. hyperlink I had to highlight the site that I wanted to link, and then I just had to type in the address on the “insert hyperlink” menu. I did that for all three and held CTRL and clicked on them to see if they actually worked.
5. After that I saved it as a webpage of course, titled links.htm. After that I went back to my index.htm page and inserted a hyperlink in the “linbks.htm” text.
6. To link it to the links page I had to type in its address which was www.unf.edu/~n00180221/links.htm.
7. Then I went back to the Osprey machine and once again opened up my homepage folder. Just like with the index.htm page I just clicked on the links.htm file and its links_ files and dragged them over to my homepage.
8. Then I saved it again on the Osprey machine and was able to go to my links page on the internet.
9. I also chose to add a link back to the homepage, simply titled “home”. To do this I just added text and inserted a hyperlink to my homepage, where I had to type in the address to my index.htm.
Creating My Resume Page:
1. To create a page for my resume I added text on my index.htm page that read “my resume”. Then I saved my index page and opened up an entirely new web page.
2. After that I created my resume and saved it as “myresume.htm”.
3. Then I went back to my index page and inserted a hyperlink in the “myresume” text. To do that I just did the same thing that I did for the links page.
4. I also chose to add a link back to the homepage, simply titled “home”. To do this I just added text and inserted a hyperlink to my homepage, where I had to type in the address to my index.htm.
Creating my journal.htm page:
1. To begin I added text on my index.htm page simply titled “journal.htm”.
Then I opened up another blank web page and copy and pasted the journals tables from our class section on the blackboard site. Then I added hyperlinks for each day, which led to the journal that I had written for that day.
2. I also chose to add a link back to the homepage, simply titled “home”. To do this I just added text and inserted a hyperlink to my homepage, where I had to type in the address to my index.htm.
Putting It on the Web:
1. Now to add all of those pages to the web I went back to the osprey machine and opened up the page containing my homepage folder.
2. Then I simply dragged over my index.htm, its files, links.htm, its files, and finally my resume.htm and its files.
3. Then I saved it on the Osprey machine and was able to view it again on the internet.