Creating, Deploying, and Validating HTML

In this activity, you will create a simple HTML page, including metadata, deploy it to the course server and test validating HTML.

Creating a Static Page

  1. Create an HTML file named index.html (.html not .htm). In index.html, start by writing the doctype declaration for HTML5.
     <!DOCTYPE html>
    
  2. Add an HTML tag (the root element of the HTML document).
     <html lang="en">
     </html> 
    
  3. In between the opening and closing tags of the <html> element, add a <head> tag. This is where you can later put metadata content. For now, the <head> tag will contain a metadata <title>.
     <head>
       <title>My first web page</title>
     </head> 
    
  4. Below the </head> tag and above the closing </html> tag, add a <body> tag and some content.
     <body>
       <h1>HTML and CSS</h1>
       <h2>Your name</h2>
       <p>Let's design your web page</p>
     </body> 
    
  5. View your web page in a web browser directly (open the HTML file)
  6. Deploy your web page to your local development environment (XAMPP)
  7. Deploy your web page to the cs4640 server

Adding Metadata

See this short discussion for additional information about Metadata.

  1. Add metadata to the <head> of the html file.
  2. Add the <meta> element to instruct the browser which character encoding to use
     <meta charset="UTF-8">
    
  3. Add a description of the page
     <meta name="description" content="Learn basic concept and structure of HTML">
    
  4. Add the author of the page
     <meta name="author" content="Your name">
    
  5. Add the viewport to ensure proper rendering and touch zooming on different display sizes (following the mobile first design)
     <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 OpenGraph 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, Twitter, Outlook, and others to showcase your site when a link is shared on the platform.

You should at least include the following metadata elements:

These metadata properties have the following format:

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

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,

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

There is a problem with the above example. The link (i.e., the anchor element <a>) does not have a closing tag (</a>); therefore, the anchor element never closes. As a result, the rest of the paragraph and the next paragraph in the document becomes part of the anchor tag.

Sometimes, problems relate to semantic constraints in HTML5. Some HTML5 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>
       </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 validationerrors 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.