HTML

In this activity, we’ll explore HTML, metadata about our pages, and the W3C validation service to ensure we’re creating valid HTML.

Create a Static Web Page

To start, we will work on a static web page.

Choose from one of the following options around which to design your website:

  • Create your personal website or web page
    • You are encouraged to explore and experience with HTML to design your own page and layout.
  • Create a static page of a website of your choice (be creative!)
    • This could be a website around a shared hobby, a new business idea, etc!
  1. Design your web page — you are recommended to draw the UI without coding or implementation.
  2. Transform your drawing into an HTML file.
    • Create an HTML file to be the main/first page of your site. Therefore, you should name the file index.html (not index.htm).
    • Question: Why do we use this naming convention? See Apache’s documentation.
  3. Include the following HTML framework for your page. Note that the document type is defined as HTML (<!DOCTYPE html>). 
     <!DOCTYPE html>
 <html lang="en">
     <head></head>  
     <body></body>
 </html>
  4. Inside the <head> element, Add <title> element containing the title of the page. 
     <title>Your Title Here</title>
  5. Inside the <body> element, add at least the following elements:
    • <header> element to help semantically structure the web page.
      • Include a heading <h1> with the title or a strong heading.
      • A smaller subheading <h2> element containing tagline or some important phrase.
        • Note: observe how content in <h1> and <h2> are displayed by default.
      • A <nav> element to include and organize your navigation menu.
        • You should create 4 links to other pages in your navigation menu. (For this activity, these links will result in HTTP 404 errors; however, you will create new HTML files in Homework 2.)
    • <section> element containing a group of content about your website.
      • An <h2> element containing a specific phrase about this web page/site.
      • A paragraph <p> giving a brief intro or few sentences about you or your web page.
      • Include an image using the <img ... /> tag with an alt alternate text attribute.
    • <section> element containing a group of 3 highlights about you or your site.
      • Each highlight will be a <section> element containing an image <img>, a highlight title <h3>, and a brief paragraph <p>.
      • Add an anchor <a> tag to link the content of the <h3> to another page in your site. This could be one of the other 4 pages linked in your navigation or another page.
      • Note: this is a design decision. How many highlights should be on this home page? Two — may leave too much space, four — may become crowded, three — seems about right. However, this depends on the content of your page. The most important factor is “balance.”
    • Add a <footer> element at the end of the page.
      • Include copyright information about your site inside a <small> element so that it will be rendered in small print.
      • Add the same navigation menu from the header to the footer. Why should you provide navigation at the top and bottom of the page?
  6. Experiment with other HTML Elements, including those you may not have been familiar with already.
  7. (Optional) If you haven’t already (i.e., for Homework 0) or would like more practice deploying your HTML, consider viewing the index.html file in each of the following ways:
    1. View your web page in a web browser directly (open the HTML file)
    2. Deploy your web page to your local development environment (Docker)
    3. Deploy your web page to the cs4640 server

Metadata

Next, we will review Open Graph metadata and its use in the web.

See this short discussion for additional information about Metadata. Specifically, metadata is included in the <head> of the html file.

  1. Add the <meta> element to instruct the browser which character encoding to use 
     <meta charset="UTF-8">
  2. Add a description of the page 
     <meta name="description" content="...list your description here, and be specific but brief...">
  3. Add the author of the page 
     <meta name="author" content="Your name and your partner's name">
  4. Add the viewport to ensure proper rendering and touch zooming on different display sizes (following mobile first design, which we will discuss soon) 
     <meta name="viewport" content="width=device-width, initial-scale=1">

    The width=device-width sets the width of the page to follow the screen-width of the device (which will vary depending on the device) the initial-scale=1 sets the initial zoom level when the page is first loaded by the browser.

Add Open Graph Metadata

The Open Graph protocol is a set of metadata that enables your webpages to interconnect more deeply in a social graph. It’s used by Facebook, X (formerly known as Twitter), Outlook, and others to showcase your site when a link is shared on the platform. Review their website for more details on what information Open Graph supports.

You should at least include the following metadata elements:

  • og:title - The title of the object (i.e., page)
  • og:type - The type of object (likely “website”)
  • og:image - An image to represent your object (page)
  • og:url - The URL that will be used
  • og:description - A short description of your object
  • og:site_name - The larger web site name

These metadata properties have the following format:

<meta property="og:title" content="The Tardis Tales">

Try using a different title, image, description and site name in the Open Graph metadata than the one in your HTML’s <title> and <meta> elements.

Publish your page on the cs4640 server, then try to share it with others (either through Outlook, iMessage, or similar service) to see the preview information provided. If you have a Mac, you can directly share through Safari and see the preview immediately. If you have Outlook, try sending an email with a link to your new page.

Question: What information was shared about your page in the preview? How did it differ from the HTML contents and <meta> elements?

When HTML Goes Wrong

What happens when we do not create “good” HTML? In this activity, we will look at a few different examples.

W3C Validation Service

When an HTML document does not comply with the W3C’s HTML5 standard, most web browsers do their best to render the document using their detault settings. HTML5 provides detailed instructions for web browser developers on how to handle mistakes or issues in an HTML5 document; for example, how to handle problems such as missing optional end tags.

However, there are still many problems that web browsers may not be able to handle properly. A common problem is a missing closing tag or mistyped opening and/or closing tag. For example, consider the following HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>A First Example</title>
  </head>
  <body>
    <p>
      Try including an anchor tag 
      <a href="http://www.cs.virginia.edu">CS website 
      without a closing tag.
    </p>
    <p>
      Then add another paragraph. 
      Try running this example and see how it looks. 
    </p>
  </body>
</html>

Question: How does your browser render the example above? How does the browser build this HTML into a DOM tree?

Copy the above HTML and submit it to the W3C’s Markup Validation Service.

Question: Does the service provide enough information to fix the HTML syntax errors?

Fix the initial problem, then consider the following additional html snippet just before the closing </body> tag:

<p>
Here is a first paragraph
<p>
  Then another paragraph. 
  Try running this example and see how it looks. 
</p>

Question: Does this also contain a syntax error in HTML? It may be helpful to review the HTML Specification

Add it to your earlier HTML and test it with the W3C Markup Validation Service.

Sometimes, problems relate to semantic constraints in HTML. Some HTML elements may have a specific role or meaning, and should appear only once in an HTML document. For instance (as shown below), having multiple intances of the <main> element, which describes the main content of an HTML document, in an HTML document would cause the document to be invalid.

<body>
  <main id="main1">This is the main content of the document</main>
  <main id="main2">Here is more main content of the document</main>  
</body>

Now we will test out the HTML validation service provided by W3C. This service will help us ensure that we’re writing good HTML5; it will also provide error messages to help us clean up our code.

  1. Create an HTML file and enter the following code 
     <!DOCTYPE html>
 <html>
   <head>

   </head>
   <body>
     <p>Hello World!</p>
     <title>Hello World example</title>
     <main id="main1">An example HTML Document</main>
     <main id="main2">Experimenting with W3C's Validation Service</main>  
   </body>
 </html>
  2. Go to W3C’s Markup Validation Service. Upload your HTML file to validate. The code (previous step) has some problems that should cause validation errors when checking it through the W3C’s validation service.
  3. Inspect the validation results. Try to correct it. Repeat step 2 until the file is valid.
  4. Upload the HTML you created earlier and ensure it is valid. Likewise, try some of the errors we’ve mentioned above see how the validation service alerts you to those problems.

Submission

Answer the questions (inline above) on Gradescope in today’s Activity assignment. Then upload your HTML file.