Using Notepad to Create a Web Page


HTML is a very simple web development language to master. Although there are many HTML Editors, such as Adobe-Macromedia Dreamweaver, Microsoft FrontPage and Open Source Nvue, which are programs that make creating HTML web pages even easier, all we really need is a simple text editor like Notepad which comes standard with most Windows Operating Systems. In the following examples we will explore some of the basic HTML tags by using Notepad to create some simple HTML pages and view them using Internet Explorer.

Also, for the sake of simplicity, save all of your CIS121 web pages, images and objects in ONE folder on your PC. This will make it much easier to transfer your web pages to the web server and allow your relative addresses to work.


Step 1

 

To open Notepad click Start, then Programs, then Accessories, and then Notepad.

 

NOTE: To learn more you can visit the following web site: W3Schools HTML Tutorial .

Step 2

The first thing you want to get in the habit of doing when creating a web page is to save your web page. Save this assignment’s page to ‘journal.htm’ (without the apostrophes).

Create a folder on your PC and name it something like CIS121_website or create separate subdirectories, like in the image below, but make sure all files pertaining to the website are in one designated folder. You will want to save your journal.htm file in this folder. It is very important that you note we are saving the file with the name Journal and an extension of htm or html.

Figure 1

Step 3

Now, type the code that you see below in Figure 2 into your Notepad work area.

______________________________________________________________________

Figure 2

________________________________________________________________________

Now that you have your code entered correctly we will need to save our page again. Before you save your page, make sure and double check, then triple check your code to make sure it is typed exactly the way you see it above. If you have trouble with this, you may ask a friend to proof read your code to spot any typing errors you may have made. The most challenging part of learning a new language is finding and fixing typing errors in the code. HTML tags need to be pretty exact. I can't stress enough how important it is to type carefully and precisely.

Also, don't forget that all of your html tags need to be in lower case and that you need an ending tag for every starting tag. When you do this, your tags will conform to xhtml specifications.

            Be sure to save your work after you have entered this.

Step 4

Start your Internet browser (Internet Explorer) and test your page.

Start Internet Explorer

Click File on the Menu bar, select Open, click Browse to locate your Journal.html file, and click OK. If you have done everything right, your page should display and should look something like the following:

Figure 3

If it doesn't, you should re-open your Journal.htm file in Notepad and check to make sure that you entered everything correctly.

Step 5

Now is time to fill in the rest of your code. The following code has been validated for proper XHTML coding. Open your Journal.htm file in Notepad and edit your code so that it looks like the following:

Figure 4

The indented code is only there to make it easier to read. If you don't want to indent the code, you don't need to. Make sure that you have typed in the code exactly as you see it above. When done, save your file.

The above should have given you a good start with your Journal.htm web page. For each assignment, you will be expected to add to this journal. By end of the term, each cell, (and you will have to add even more) should be filled with information in it, such as the date and subject of the assignment and what you learned. Everything you need to add to this web page is included in the code examples above. Remember: in a table, every row is created with the tr (Table Row) tags. The td (Table Data) tags are used to identify cells within a row. Any information (text, images, and objects) that is to appear in a cell goes between the associated <td> tags.