Skip navigation.
Work out your logic on paper

Chapter 4 Hints and Help

Chapter 4 teaches you some basic HTML tags and attributes, and shows you to create forms and tables. The chapter also introduces some basic style sheet settings. Since this book is focused on teaching programming and not HTML, it does not go into too much detail on these topics, just enough for our purposes. Pay special attention to the sections in the chapter that refer to forms. You will use forms to develop many of our Web applications that require user input.

QUESTION: Help!!! I'm not sure what steps to follow to develop my applications!

ANSWER: Here's a quick summary of the steps you should be following to develop your applications:

  1. Go to the correct chapter folder in your xampp/htdocs/webtech/coursework folder.
  2. Use a text editor to open the file you need to work on.
  3. Work on your code (you are just working on .html code in Chapter 4).
  4. Save your work in the same location with the same file name.
  5. Start your Web server if it is not already running.
  6. Open a Web browser and type http://localhost to connect to the Web server.
  7. Click the link to the coursework folder and click your way to the file you want to test(or just type the entire URL, for example: http://localhost/webtech/coursework/chapter04/modify1.html).
  8. If the file displays correctly then you can move on to the next exercises. Otherwise, go back to your text editor, make corrections to the file and save it, then view it again in your browser.
  9. When you are done with all your exercises, stop the server, then exit the server.

Be sure to always run your Web server when testing your Web pages. AND ALSO always use a URL that begins http://localhost. Although you can test .html pages by just by double-clicking the HTML files in your File Manager, this will not work once you start working with PHP programs in Chapter 5. If the URL in your browser's address window starts with file:// instead of http:// that means you are not connecting to the Web server even if it is running!

QUESTION: I modified an HTML file or PHP program but when I try to view it I still see the previous version in my Web browser. Why don't my changes show up???

ANSWER: First check that you saved your changes before you tried to view the modified file! Second, if the file is an HTML file be sure to refresh your Web browser window to view the latest verson of the file, otherwise the previous version may be displayed.

If neither of these works, perhaps your modified file was saved with a different name or in a different folder location, and you are still viewing the orginal file in your browser. Be sure to save your modified file with the same name in the original folder location (for example if you modify fixit1.html in the coursework/chapter04 folder, be sure to save your modified file as fixit.html in the coursework/chapter04 folder).

The last possibility is that the Web browser is in fact showing your file but your changes contain errors. To test this, try making an obvious and simple change (for example add XXX to an HTML heading in the file) and see if the XXX appears when you view the file in your browser window. If it does, it means you are seeing the latest version of your file so there is a code error that you will need to figure out.

QUESTION: Do I need a separate submit button for every item in my form?

ANSWER: An HTML form only needs a single submit button, not a different button for each item that the user must submit. The single submit button will send EVERYTHING that the user entered into ALL input boxes and drop down lists in the form.

QUESTION: How do I lay out my forms neatly?

ANSWER: The sample.css file that is provided in your samples folder and in all the coursework chapter folders contains styles that will layout your forms neatly if you follow the HTML of the form examples in the textbook chapters (the code for these is included in the samples folder). Look at the examples in Chapter 4 and use these as templates to create the required form elements for the exercises. More advanced page layout is beyond the scope of this course so if you wish to develop the layout of your own forms, you will need to first develop more experience with CSS.

QUESTION: My H2 tags display as bold even though I haven't set the font-weight for H2 tags in my style sheet. What's going on??

ANSWER: That's because your browser automatically assigns default styles to all of your tags and these will apply if you don't set the style in your CSS. For example your paragraphs are displayed in a certain font and size, with font-weight set to normal. Your H1 tags are also set to default styles and so are all tags. Different browser may apply different styles and the same browser may even apply different styles on different platforms.

The default font-weight for the H2 tag is usually bold, so if your style sheet does not specify a weight for H2, then it is assigned bold automatically. If you want to change this, just set the font-weight for H2 tags to normal in your CSS.

QUESTION: What if I want to just apply a style to a single page on a Web site, or even to a single tag on a Web page?

ANSWER: External stye sheets can be used to apply styles to any number of Web pages, one or more. If you want to limit a certain style, or styles, to a single page, define an internal style sheet in the <head> section of that page (styles in internal style sheets will over-ride the same styles defined in external style sheets applied to the same page). If you want to assign a style, or styles, to a specific HTML element on a page (and any elements nested inside that element), define an inline style for that element (inline styles over-ride the same style defined in either internal or external style sheets). Examples of internal style sheets and inline styles are provided at the end of Chapter 4.