Skip navigation.
Take control of your own learning

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 approach used in the Fourth Edition is quite dated and makes use of tables to line up prompts and input boxes (see page 87 in the textbook for some discussion of this). If you add a table (<table>) in your form, you can combine a prompt and either input box or drop down in each row (<tr>). The prompt goes in the first column of the row (first <td> and the input box or dropdown goes in the second column (second <td>). Here's an example:

<table>
<tr><td>Enter your age</td><td><input type= "text" name="age" /></td></tr>
</table>

Add more rows for each prompt/input combination.. See the separate answer below if you would like to make your Submit button appear right justified below the form, with more space around it.

However note that this older approach to form layout that was used in the first four editions of the textbook to minimize complexity for beginning students. Web designers use padding and margins and width settings to layout paragraphs, headings, tables, images, and other page components. The Fifth Edition of the book takes this approach and a PDF of the Fifth edition Chapter 4 is available here.

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 (as described in the book) can be used to apply styles to any number of Web pages, one or more. If you want to set a certain style or styles just for a specific page or even for a specific tag in page you can create internal stylesheets in the head section of your HTML, or apply inline styles to a tag. Any styles set in this manner will over-ride similar styles set in the external style sheet. Here is an example of an internal style sheet in the head section:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

And here is an example of an inline style for a specific tag in your HTML:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Either way you can still use an external style sheet. Styles in your internal style sheet will take precedence over that, and an inline style takes precedence over both..

QUESTION: If I use a table to layout my form, how can I align my Submit button to the bottom right of the form, with more space to separate it from the rows above?

ANSWER:Before answering this question directly, note that using tables for form layout is a dated and simplistic approach that was used in the first four editions of the textbook to minimize complexity for beginning students. Web designers now use padding and margins and width settings to layout paragraphs, headings, forms, tables, images, and other page components. The Fifth Edition of the book takes this approach and a PDF of the Fifth edition Chapter 4 is available here.

Now here's a direct answer to your question, with regard to form layout using a table, it's a bit extensive but will give you a feel how to apply CSS to HTML tables to achieve any layout that you want..

Here are four things you probably want to do to make your Submit button look the way you want:

  1. Even though there's just one <td> in the Submit button row, it would be nice to line it up with the second <td> in the rows above it...
  2. .. and also make it right-justified within the <td> so it lines up with the right side of the table.
  3. Then change the height of the <td> with the Submit button so it has more height than the previous rows.
  4. And last, align the button so that it appears at the bottom of this higher row, which means the extra height appears between the button and the row above it.

Here's how we achieve these, and the good news is that once you do this once you can use it in all your forms.

1. The <td> tag has a colspan attribute that we can use to make a <td> span across multiple columns of the table. To make the <td> with the Submit button span across 2 columns:

<td colspan = "2">

2.,3, and 4. If we want all td's with a Submit button to have a height of, say 50 pixels, with the text aligned to the bottom and right-justified, we can create a special style in our CSS style sheet just for these <td>'s. Here is what we add to the sample.css (or other .css) file:

td.submit{ height:50px; vertical-align:bottom; text-align:right}

What we are saying here is that any <td> that has a class of "submit" will automatically have a height of 50 pixels, the content will be vertically aligned to the bottom of this height, and the content will also be right-aligned within the <td>. Add this line to your sample.css file and save the file.

We can then apply this to our Submit button in our HTML form using the class attribute:

<td class="submit">

But remember we also want to use colspan so that the <td> will span two columns, so this becomes:

<td class="submit" colspan = "2">

The HTML for your entire table row now looks something like this:

<tr><td class="submit" colspan = "2"><input type="submit" value="Submit"/></td></tr>

Add this line to your .html file and save the file. As long as your .html file is referencing the sample.css file your Submit button will now appear the way you want it.

If you're wondering " How on earth am I going to know all these options, or remember the syntax?", the answer is that it really doesn't take long to get a feel for this, and it's covered in an HTML/CSS course or book. Once you get the general idea you tend to learn things as you need them. You become skilled at it faster than you realize. Also a lot of Web design tools will do this work for you, although it's still good to be able to do it yourself. Plus it's kind of fun to see how you can format pages just be tweaking your CSS! :)