Skip navigation.
Experiment, try things out, have fun 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 xampplite/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 Windows Explorer, 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: People often ask about ways to lay out Web pages neatly, for example to line up prompts and input boxes. Any easy way to do that is by using tables (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:

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

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 is a very simplistic approach for the purpose of this textbook. For advanced formatting, Web designers use padding and margins and width settings to indent and line up paragraphs, headings, tables, and other components. Rather than using table for layout, it is more common to apply layers so that Web page components can be located very precisely on the page. Careful layout is achieved using style sheets and you will want to research CSS to learn more. Since this course is not a complete HTML/CSS course, we're just using tables.

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 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:

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

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: That's a great question that goes beyond the scope and purpose of this book (we just need enough HTML and CSS to learn the basics of Web programming). Here's the answer, it's a bit extensive but it will give you a good feel for how to apply styles to HTML elements to achieve any format 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! :)