Website Development I

Course Info Class Notes Resources Student Websites

Class No. 1:

HTML Markup for Basic Text

Introductions

These notes are at under the Class Notes tab

Course Goal

Course Approach

Course Philosophy

Course Textbook

See the for more details.


Today’s Goal

To create a HTML page that runs on our server.


Class Resources

Web Programming book reading for THIS class

Web Programming book reading for NEXT class

In your folders

For today’s exercise


HTML5 Code Template

This is the code that we will work with today.  It will also be useful to you in future classes.

We will first discuss what’s here and then you’ll have the opportunity to create a web page using this code as a starting point.

This code is similar to the code in figures 1.4 and 1.5 on page 9 of your textbook, and the discussion of that code on pages 9-15 is directly relevant today’s class discussion.

 1  <!DOCTYPE html>
 2  <html>
 3  
 4  <head>
 5    <meta charset="utf-8">
 6    <meta name="author" content="{INSERT YOUR NAME HERE}">
 7    <meta name="description" content="{INSERT A SHORT DESCRIPTION OF YOUR PAGE HERE}"
 8  <!--
 9    File:  /StudentResources/CodeSamples/HTML5_Template_v2.html
10    maintained by {INSERT YOUR NAME HERE}
11    updated by {INSERT YOUR INITIALS HERE} on {INSERT DATE} at {INSERT TIME}
12  -->
13    <!-- set the text that goes in the browser tab -->
14    <title>{INSERT YOUR PAGE TITLE HERE}</title>
15  
16    <!-- set the icon to use in the browser tab -->
17    <link href="images/OldManInTheMountain_16x16.ico" rel="icon" type="image/x-icon">
18  
19    <!-- additional head code will go here -->
20  </head>
21  
22  <body>
23    <!-- body code goes here -->
24  
25    <!-- replace the following lines with your own code or use them as templates -->
26    <h2>Insert Your Page Title Here</h2>
27    <p><em>Insert other HTML tags for your page here.</em></p>
28  </body>
29  
30  </html>


HTML Syntax

Source:  Connolly & Hoar, Fundamentals of Web Development

In general, every opening tag must have a corresponding closing tag, but there are exceptions to this rule.

Looking at the HTML5 Template code (please follow along with the handout)

Nesting

Source:  Connolly & Hoar, Fundamentals of Web Development


HTML Markup Tags

Structural Elements

Remember:  In general, every opening tag must have a corresponding closing tag, but there are exceptions to this rule.

Rendering Elements

Text Formatting Tags

These are enough tags to get us started; we’ll explore more in our next class.


Today’s Exercise

Goal:  To create a web page for page 4 of the PRO Manual.

Note:  I do not expect everyone to complete this entire exercise today.  We will continue working on it in our next class, too.

Step 1:  Set your File Explorer to display file extensions, not just file names

  1. Open File Explorer.  When you first open File Explorer you will be on the Home tab.  Notice that you see file names, but your don’t see file extensions because those extensions are hidden.
  2. Click View to display the drop down View options ribbon.
  3. In the Show/Hide section of the ribbon, click the File name extensions checkbox
  4. The file extensions — the part after the dot (.) — should now appear, making it easier to determine each file’s type and to distinguish between files with the same name.

    5. Step 2:  Load the HTML5 Template file into your editor

  5. Open the UltraEdit editor on your computer.  This should open a blank window that is ready for editing.
  6. Leave the editor open and click here to open the HTML5 Template (version 2) in your Microsoft Edge browser.
  7. Type CtrlU to view the source code for the page.
  8. Click anywhere in the browser window and type CtrlA to select all of the code.
  9. Type CtrlC to copy the code.
  10. Return to UltraEdit and type CtrlV to paste the code into the blank editor window.

    11. Step 3:  Save your copy of the HTML5 template

  11. Click File at the top left of the editor window.  A dropdown menu will appear.
  12. Click Save as.  A dialog box will appear.
  13. Once again navigate to your Dropbox (if necessary).  If you do not already have file HTML5_Template_v2.html in your Dropbox, set the file name to HTML5_Template_v2.html and click the Save button to save the raw template for future use.  Be sure to include .html as the file extension!
  14. Click File and then Save As again.  This time, change the file name to something like Exercise1.html.  As before, be sure to include .html as the file extension.
  15. You will know that you have saved the file correctly with a .html extension because UltraEdit will now have added syntax highlighting to your code.  If you do not see syntax highlighting, look at the tab label see the name of the file you saved.  If it does not end in .html, save the the file again and make sure to type .html at the end of the file name.
  16. You are now ready to begin modifying the HTML template and writing your own code to create your own web page.

    17. Step 4:  Update the documentation in your HTML file and delete the placeholder code

  17. Replace all the text within curly brackets in the template file with appropriate text such as your own name, your initials, and the current date and time.
  18. Delete all the placeholder text between the <body> and </body> tags to get ready to add your own code.

    19. Step 5:  Copy text from the PRO Manual into your HTML file

  19. Open the PRO Manual and advance to page 4.
  20. Select the first few paragraphs by positioning your mouse to the left of the start of the text, holding down the left mouse button, and dragging to highlight the text as you see below.
  21. Type CtrlC to copy the text that you have highlighted.
  22. Return to UltraEdit and your HTML file.  Click to position your mouse between the <body> and </body> tags and type CtrlV to paste in the text you copied from the PRO Manual.

    23. Step 6:  Display your HTML file in Microsoft Edge

  23. Go to the page on our course website and click the link next to your name.  You should then see a display similar to:
  24. Click the link for your HTML file (Exercise1.html in the above example) to open your file in the browser and see the result of your work.  You will see that the text you pasted in is completely unformatted and appears as a single paragraph.

    25. Step 7:  Experiment with various HTML5 tags to format your HTML file

  25. Go back to UltraEdit and add <h2> opening tags before each part of the text that should be a section title, such as:
    • What is R&D?
    • What is the purpose of R&D?
    • I have heard the term “In Processing.”  What does that mean?
    Be sure to add </h2> closing tags after each section title.  For example, the first section title should look like this:
    <h2>What is R&D?</h2>
  26. Experiment with adding other opening and closing tags introduced by the textbook around various parts of the text to make your page look more like it appears in the PRO Manual.  Try:
    <h1>...</h1>

    a large main heading

    <h2>...</h2>

    a smaller main section heading

    <h3>...</h3>

    a still smaller section heading

    <p>...</p>
    a paragraph
    <blockquote>...</blockquote>
    an indented text division
    <div>...</div>
    a text division to be styled later
    <strong>...<strong>
    display the enclosed text in boldface
    <em>...</em>
    display the enclosed text in italics
    <hr>
    a horizontal line
    • note that this is an exception to the opening/closing tag rule because there is no closing </hr> tag
    <br>
    a
    line
    break
    • this is also an exception to the opening/closing tag rule because there is no closing </br> tag
  27. As you work, make note of the issues you run into and any questions you may have so that we can all discuss them at the beginning of our next class.
  28. Consider what’s different about your web page from what appears in the PRO Manual.  These are the things that we will address in future classes.


 


This is Class No. 1.  It was last modified on Saturday, October 21, 2023 at 4:38 PM.  Copyright © 2010-2024 by Jesse M. Heines.  All rights reserved, but may be freely copied or excerpted for educational purposes with credit to the author.