Making A Basic Webpage by Fred Sgrosso --Winter 2001

The first step is to learn the basics of making a simple page w/o photographs. ( Note the code is not case sensitive).

01.Start with Microsoft Notepad. (Which can be found under Start/Programs/Accessories/Notepad)

02. At the top of the page put the HTML and Head designation by doing this:

<html><head>

03. Put in the Title: < title > First Webpage < /title > Your own title goes here

04. Note < > are used to hide the information from the viewer, but are read by the browser and search engines. / = end of function.

05. Next is the place for the Meta Tags which are not necessary now. These tags are for search engines to catalog your webpage.

06. End Head by < /head >

07. Put in the Body designation. <body> That is the main part of the document. Also the background color, images, and sound go here (later).

Using <P> will give a space between paragraphs.

Adding a <BR> gives a single space.

<B>=bold print</B>= end bold

<I>=Italic </I> end italic.

<H4>=font heading--bold font style and the number indicates size--bigger number=smaller font. (H1-H5). Using the H font size gives bold font w/o using the <b> attribute.

08. Start writing.

09. End the body portion of the page when you are finished: </body>

10. End the html: </html>


That is it! I will summarize the code format for a template:
<html>
<head>
<title>First Webpage</title>
</head>
<body><P> Your Text goes here. </body>
</html>


11. Make a new folder and call it Webpage or anything you want. All webpage items will go into this folder. This is important!

12. Now if you have not already put in the five main lines, copy any or all of the above 5 items that you missed, and paste them into your notepad document. Add your text. Under File click on "Save as" and call the file index.html in your new folder. Always add the .htm or .html extension to your new file. That way the computer will direct the default browser to open the document up as a webpage. The file name would look something like this: C://webpage/index.html If you can use Microsoft's Internet Explorer, it is generally easier to use for this application. The "index" designation is used for the first page of your webpage.

After modifying your webpage, always save your file and 'refresh' the browser to show the updates.

13. To test your new page, open up your new folder and double click on index.html If the stars are in the right position, your browser will open and your words will be there for you to read, and it should look like a webpage. It maybe necessary to go "offline" to do this w/o activating your modem. On Explorer, this function is under "File" --"Work offline". The print will be light and rather small, unless you use the <B>(BOLD) option (or the Hx font code>. The paragraph(s) will be aligned to the left.


14. Another way to make your own page is to go to a webpage you like, right click on the page (not on a picture) and then click on "view source" which will bring up the notepad html code for that page. While in the webpage, save it to your new folder. Now it is on your hard drive--- edit out what you do not want and put in your own photos and text. Rename it by using the "save as" function and voila! You have your own new page ready to go.

The next step is adding your photographs.

15. The code needed for images is: <center><img src ="xxxxxxx.jpg" ></img> Where xxxxxxx.jpg= the file name of your image. I try to keep my file names short, so the programs do not truncate them. Seven characters is usually my limit. I generally use jpg images. You can use gif images but the quality is poor. This code will place the photo in the center of the page. Placing <left< or <right< in place of <center> will move the image accordingly. You must have the image in the same folder as the html file that you made in the previous step.

16. The above is the easy part. Now for some information on sizing your image so it will fit on your page. First: the resolution of the image should be 70-100 pixels/inch (ppi) or sometimes is referred to as dots/inch (dpi). I generally use 100 ppi for sharper looking images and easy math when making calculations.

17. The image size should be about 400x600 pixels or smaller for a horizontal image (where 600 is the horizontal dimension). For a vertical the height should be no more than 500 and 450 is probably better. If the picture is too tall the viewer will have to scroll to see the whole image or go to Full Screen mode, (this is done by pressing F11 with Explorer 5.x). For systems that are set up for 800X600 screen resolution, you would have some room for margins. On 640X480 displays, the picture would appear to nearly fill the screen on horizontal images and overfill on vertical images. On 1024X768 high resolution settings the image will appear smaller with a bigger space around the photo.

18. You should strive to make the image file size in the order of 35-50kb or less. Put no more than 4 images/page and the viewer will not have to wait for an eternity to open your page. Look at the bottom of the webpage folder when single clicking your image file to find the image file size. (Do this with the folder at full size or nearly full size, otherwise the file size will not show up.) Another way is to go to File and then to Properties.

19. Below is what the Notepad page will look like with the photo inserted. As mentioned earlier, make a folder for the webpage and image files. Put in a picture with a file name to match the name in your document, exactly---even to case considerations. Add the image code to your notepad and save it with the .htm or .html extension. When you double click on it--it should open as a webpage. When the page is open, you can right click on the page in Microsoft Explorer (using the 'View source')--you will get the notepad back ready for modification. This latest version of your page is the one to use from now on.

Just drag your mouse over this section below and right click to save. Then Paste it into your Notepad. Save it as an .htm or .html file.You will have to go to your web folder and double click the new file to have it open.

<html>
<head>
<title>First Webpage</title>
</head>
<body><P> Your Text goes here.
<b> Using the bold font code will give print like this.
<center><img src ="xxxxxxx.jpg" ></img>Your image goes here.
</body>
</html>


20. Getting your page uploaded: This is difficult to teach. Most places that allow you to have your webpage will instruct you in this procedure. What you should know is the URL or address of your webpage. Some URL's have no www in front of them...some do. It is important to know the exact URL. Know your password and user name. If you use the File Transfer Protocol (FTP) method of uploading...once you know the FTP address you can do it with Microsoft Explorer with no problem. Example: Mediaone/AT&T ftp address looks like this: ftp://fredhome@people.ne.mediaone.net/
You will be asked for your user name and password. Save the link under 'Favorites', and you will be able to go there directly.

21. Good Html software---free--Netscape composer (very simple) and 1st page 2000 by --Evrsoft ( www.evrsoft.com ) (degree of complexity is user controlled)

22. Some useful Code...Right click and go to 'view source' then look for this section--the code is there.

23. A good book: 'HTML For The World Wide Web' by Elizabeth Castro

MY WEBPAGE: http://people.ne.mediaone.net/fredhome/index.htm
Good Luck!
My email is: fredhome@mediaone.net

To go back to the Home Page: Click here