Chapter 1 Tutorials

Poem

1. Open a text editor, like Notepad or vi.
2. Add the standard HTML tags: html, head, title, body.
3. Add the tags for validating the page: DOCTYPE, meta for content-type.
4. Add a poem in the body of the page; have at least 4 lines in the poem.
5. Save the file with the .html extension.
6. Open a web browser.
7. From the File menu, open the file you just saved.
   1. You will notice that there is only one line of text that contains all the lines of the poem.
   2. Resize the browser until you see the line of the poem wrap to the next line.
   3. This demonstrates how word wrap works.
8. Re-edit the poem file.
   1. Add many spaces between some of the words.
   2. Add many blank lines between two of the lines.
9. In the browser, reload the file.
   1. All the text will be on one line.
   2. You will only see one space between all the words.
   3. This demonstrates how browsers compress all white space into a single space.
10. Re-edit the poem file.
    1. Add a p tag at the start of the first line (this is required in order for the page to contain valid HTML).
    2. Add the br tag at the start of the second line.
    3. Add the p tag at the start of the third line.
11. In the browser, reload the file.
    1. You will see that the second line is directly below the first line.
    2. You will see that the third line has at least one blank line between it and the second line.
    3. This demonstrates that new line characters must be added to the file with mark up.
12. Go to w3c.org and validate that the page contains valid HTML.
    1. You may ignore the warning that the form tag is missing the action attribute. This will be explained in Chapter 2.

Simple Form

1. Open a text editor, like Notepad or vi.
2. Add the standard HTML tags: html, head, title, body.
3. Add the tags for validating the page: DOCTYPE, meta for content-type.
4. Add a form to the body of the page.
   1. Add a paragraph of text that explains that the page is for entering data.
   2. Add an text input element and a submit button in the form.
5. Open the file in a browser.
   1. Enter some text in the text element.
   2. Click the submit button.
   3. Notice that the form data has been added to the end of the URL in the location box of the browser.

First JSP

1. Download and install NetBeans. You do not need GlassFish.
   1. Choose a package that includes Tomcat. I suggest that you download the one labeled Java, it contains Tomcat.
   2. We will be using Tomcat for this course.
      1. On the first page of the NetBeans installation wizard, there is an option to customize the installation. Open the customization window.
      2. On the page where you see Glassfish, be sure to install Tomcat as well. You may deselect GlassFish, you only need Tomcat.
2. Create a new web application, named Tutorials.
3. In the Project tab, open the Web Pages folder.
   1. Create a new folder named ch1.
   2. Create a subfolder of ch1 named OnePage.
      1. Create a new JSP named First.jsp.
         1. Do not use the JSP template that comes with NetBeans.
            1. Right-click the OnePage folder.
            2. Select New
            3. Select Other
            4. Select Empty File.
            5. From now on, this option will be available when you select New.
         2. Copy the contents of the SimpleForm.html into the First.jsp file.
         3. Add an EL statement that echoes the value of the contents of the text box.
   3. You will see that the index.jsp file already exists in the Web Pages folder.
      1. This is the welcome page for the application.
      2. Modify the page by adding a hypertext link to the First.jsp file.
4. Run the project.
   1. The index.jsp page will appear in the browser.
   2. Click the link for the first JSP.
   3. Enter some text in the text element.
   4. Click the submit button.
   5. Notice that the text that was entered has been echoed in the page.
   6. Notice that the form data is in the query string.
5. Validate that the index.jsp and First.jsp files contain valid HTML.

Initialized JSP

1. Create a new JSP named FormInitialized.jsp.
   1. Do not use the JSP template that comes with NetBeans.
      1. Right-click the OnePage folder.
      2. Select New
      3. Select Other
      4. Select Empty File.
      5. From now on, this option will be available when you select New.
   2. Copy the contents of the First.jsp file into the FormInitialized.jsp file.
   3. Set the initial value of the text element to the corresponding value in the query string. Use EL.
   4. You will see that the index.jsp file already exists in the Web Pages folder.
      1. This is the welcome page for the application.
      2. Modify the page by adding a hypertext link to the FormInitialized.jsp file.
2. Run the project again.
   1. Enter some text.
   2. Click the submit button.
   3. Notice that the text that was entered remains visible in the text element.
3. Validate that the index.jsp and FormInitialized.jsp files contain valid HTML.