Chapter 1 Exercises

Exercise 1: Basic HTML Syntax

Now is a good time for a quick review of HTML. As you already know, all web pages are created using HTML (HyperText Markup Language), and all web browsers turn HTML code into a stylized web page seen and enjoyed by the end user.

Please take some time to refresh your knowledge on syntax by reviewing this link for HTML (click here).

Note: In this course we are using HTML in the sample scripts.

In this exercise you will be creating the HTML page shown below (Script 1-1, shown below in its end state).

Script 1-1: This sample script document shows the basics of HTML code.

The basic HTML document as displayed in the editor view.

Note: A number of Helpful Tips are located at the end of this web page for reference as you complete this exercise.

To create an HTML page:

  1. Open your HTML editor.
    You can use pretty much any application to create HTML and PHP pages. We recommend you use Brackets.
  2. Choose File > New to create a new, blank document.
    Some editors allow you to start by creating a new document of a certain type—for example, a new HTML file. If your application has this option, we strongly recommend you use it.
  3. Save this empty file as welcome.html
    (Even though you are coding with HTML, the page will still use the standard .html or .htm extension, and when saving choose Text Only [or ASCII] for the format, if you are given the option.)
  4. Navigate to the location where you wish to save the script (c:\XAMPP\htdocs\202\chapter1).
    To begin, start with the HTML header lines (Script 1-1):
    The HTML header lines as displayed in the editor view.
    A valid HTML document begins with these lines. This tells the web browser what type of document to expect.
  5. Create the head section of the page with the title Welcome to this Page!:
    Head section of the page as displayed in the editor view.

    The head section includes the charset meta tag (required for valid HTML) and the title tags. JavaScript could also be placed here.

  6. Create the body section:
    The body section as displayed in the editor view.
  7. Type </html> to complete the HTML page.
  8. Open up Cyberduck and upload the file to the production server, making sure that you are placing it in the right location there.
    In this case, it should be uploaded to your /chapter1 folder on the production server.
  9. Test the page by viewing it in your web browser (Figure 1-2).
    Navigate to http://studentuploads.ca/firstl/202/chapter1/welcome.html (replacing firstl with your actual userid.) You should find your page at that location.
    Figure 1-2: The welcome.html HTML document as it is interpreted by the web browser.
    The HTML document as displayed in the browser view.

If something doesn’t look right in your document, and you need to make changes to the script:

  1. Close the local file in Brackets that you just saved.
  2. Open a connection to the production server using Synapse.
    Synapse showing studentuploads.ca@userid@studentuploads.ca credentials.
    See the Set Up page for a refresher on how to use Synapse.
  3. Once connected with Synapse, you should see the file you just uploaded: welcome.html. Click on that file to open it. You should now be working with the welcome.html file that resides on the production server, (and not the one that resides on your local server).
  4. Make your changes to the code, and save the file by clicking Ctrl-S.
  5. Switch back to your browser, refresh, and view the changes.
  6. Once you have opened the production server version of the file with Synapse, all you have to do for further editing is to repeat this process:
    1. Make your coding changes
    2. Save with Ctrl-S
    3. Switch back to your browser
    4. Refresh and view your changes

 

Quicktips icon.

  • Unlike PHP scripts (as you will soon discover), you can test your HTML pages by opening them directly in your web browser.
  • If you wish, change the body text to This is a basic HTML page by [add your name here]!, and view in your browser again.

Click here for a thorough listing of PHP editors. The page also lists the operating system each application runs on.

← Return to Chapter 1, Assignments Page