This step-by-step instrucion illustrates how to make an on-line page in the standard 4.566 project format for students who have no previous experience in making a web page. No HTML coding is explained in details.
I assume you use IE (Internet Explorer) or Firefox here.
- In your desktop, make a new folder. It may have any name, but I name it MY_FOLDER.
Then make a new text file in it.
Open MY_FOLDER > File menu > New > Text document
This new file gets a name New Text Document or New Text Document.txt
If it does not have .txt suffix, do the following to display the suffix.
Tools menu > Folder Options > View tab > Turn off: Hide extensions for known file types > Click Apply
Now change its name and suffix to a name ending with .html suffix. I will name it MY_Page.html - Open MY_PAGE.html with NotePad (or WordPad)
(right_click on MY_PAGE.html) > Open with > NotePad - Open this page.
- In your browser, copy the source code of the example page you opened.
[IE] View menu > Source > Select all text and copy as usual
[Firefox] (right-click on page) > View Source > Select all text and copy as usual - Paste the copied text into MY_PAGE.html in NotePad
- Save the text file in NotePad
- In desktop, drag the saved text file (My_Page.html) onto your browser window. It will show the example page but all images are missing as you did not copy any images from the example. If you download the images and place them in MY_FOLDER, they will show as well but it is not needed for now.
- In NotePad, find < TITLE > tag near the top of MY_PAGE.html
The text between < TITLE > and < /TITLE > is the text showing at the top of the browser window when you open the page.
You can change this text, save MY_PAGE.html in NotePad, and click the RENEW/REFRESH button on the browser, or reload the page by dragging the file again from desktop to the browser window. - Likewise, change other page content such as your name, paragraph text, image filenames, movie filenames, caption, etc.
Change it one by one as you test the page by reloading it to the browser, instead of changing many things at once.
This will prevent making mistakes.
Here are some tips for changing page text.
- The pair of < xxx > and < /xxx > are tags which format the page text, and you should not change those tags. Instead, change the text between the tags.- To have a carriage return in your text, put <br> tag between your text lines.
- Do not use special characters such as & , >, and < for your page text.
Here are some tips for changing page images/movies.
- To replace an image, prepare your image in .jpg format and put it in MY_FOLDER. The illustrations in the page template work best if they are prepared to be 500 pixels in width. In MY_PAGE.html, change the file name inside the tag,
< img src="xxxxxx.jpg" >
to the name of your image file.- If you have a movie to replace, you may just send your movie file with the rest of the page files to TN and ask him to replace as it may involve resizing and recompression for optimized performance. If you like to try yourself, prepare your movie in .mp format and put it in MY_FOLDER. In MY_PAGE.html, change the file name inside the tags,
< Source src="xxxxxx.mp4" type="video/mp4 > and < param name="src" value="xxxxx.mp4" >
to the name of your movie file. - Your page will have a visiter counter at the bottom.
To make this, you will need to have a unique counter ID.
In your HTML document, go to the bottom and find a line including
http://stuff.mit.edu/cgi/counter/takehiko_counter_woongki_01
Then just change its takehiko_counter_woongki_01 to some unique name of your choice such as takehiko_counter_yourname_01. - When you are done, zip the html file and image/movie files together
and post it on Dropbox and email TN, so he can copy it and uploade it to the server for this class.
2013 All rights reserved. Last modified: Jan. 30, 2014 by TN