1. Creating YourFirst Web page A hands-on tutorial approach Herman Jackson CISA 1301

2. Begin by starting your web browser. We will use it to view the web page after we create it.

3. Maximize the browser so that it fills the entire screen.

4. We will use the Notepad text editor to create the web page. Open Notepad by clicking on Start, Accessories, and Notepad.

5. Resize Notepad so that it occupies part of the screen, but leaves the browser toolbars visible.

6. Web pages use the Hypertext “markup language” (HTML). HTML consists of “tags” that instruct the browser how to display the web page. HTML tags are words or abbreviations enclosed in angle brackets like <html>. Note that HTML tags can be either uppercase or lowercase.

7. Type the six tags shown here in notepad.

8. Congratulations!You now have a basic web page.The meanings of these tags are: <html> – Beginning of web page<head> – Beginning of head section</head> – End of head section<body> – Beginning of body section</body> – End of body section</html> – End of web page

9. Now let’s save the file.In Notepad, click on File, SaveAs.

10. In the SaveAs dialog box select the A: drive and type “index.htm” as the name of the file. Click Save to save the file. • The quotes are necessary in order to get Notepad to save the file as a web page. • The name indexis the name that must be given to the first page of a web site. • The file extension htm indicates that this is a web page.

11. Now let’s open the file in the browser. In the browser, select File, Open.

12. Click on browse and select the file from the A: drive. Select index.htm, click Open then click OK.

13. Well that’s certainly boring.That’s what a blank web page looks like.Let’s add some content to the web page.Select Notepad and add your name inside the body section.

14. Save the changes and click the refresh button on the browser toolbar.

15. You should now see the updated version of the web page. Note name

16. Let’s add a border to the left hand side of the web page. We’ll end up with something like this one.

17. To create the border, open Paint. It’s in the Accessories group along with Notepad. 3. Accessories 2. Programs 4. Paint 1. Start

18. In Paint, select Image, Attributes.

19. Make the following settings and Press OK. Units – Pixels Width – 2000 Height - 30

20. Now, in the left part of the image add colors to create the border for your web page. A width of about 30-40 pixels works best.Use your imagination and creativity. Remember, this is your creation.HINT: Press Ctrl + PgDn to enlarge the image.

21. Save the file to your floppy disk.Give it any name you choose, but the name can’t contain spaces.In the Save as type box, select “gif” Save to floppy disk Name the file Save as a gif

22. Now let’s add the background to your web page. Click on Notepad and modify the body tag as shown here. <body background=“myfile.gif”> Use your filename instead of myfile.

23. Your HTML code should now look like this example.

24. Save the HTML file, select the browser, and click the refresh button. You should see something similar to the page shown here.

25. Houston – looks like we have a problem. Border and text overlap Let’s fix this

26. To fix the problem, we’ll use an HTML Table. Tables allow us to position the elements of a web page however we wish. In this situation we need a table with two cells, a left cell to display the border and a right cell for everything else.

27. HTML tables begin with a <table> tag and end with an </table> tag.Each table row begins with a <tr> tag and ends With a </tr> tag.Finally, each table cell (data) begins with a <td> tag and ends with an </td> tag.

28. Left table cell (border only) Right table cell (everything else) Our completed table will be:Type the tags to create the table now.

29. Now save the HTML file and click the refresh button on the browser. Still looks the same. We’ll have to force the left cell to be a specified width.

30. Houston – The problem is still here We need to make the left table cell wide enough to contain the entire border. Let’s make it 40 pixels wide by adding a width attribute to the TD tag. <td width=“30>

31. Add the width attribute to the first table data tag as shown here. You may find that 40 pixels to too much or too little. Adjust the number as needed for your page. Save and refresh the browser page.

32. All Right!

33. Remember that everything you want to be displayed on the web page must be in the right table cell. HTML tags are a lot like punctuation – it’s just a matter of learning what to use where.

34. Here are some websites where you can learn more about HTML. • Beginners only: http://www.davesite.com/webstation/html/ • Lots of good tricks here: http://www.htmlgoodies.com/ • For teachers: http://www.mcli.dist.maricopa.edu/tut/ • Advanced web designers: http://www.w3schools.com/ • A good one: http://www.cwru.edu/help/introHTML/toc.html • WebMonkey: http://hotwired.lycos.com/webmonkey/teachingtool/ • Advanced: http://www.htmlcodetutorial.com/