ISTA 230 Introduction to Web Design (Spring 2017)

Creating HTML Documents

Below are steps for creating a basic HTML document. They do not actually go into details regarding HTML but outline the basic steps for creating an HTML document.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>My Page Title</title>
      <meta charset="utf-8">
   </head>
   <body>
   </body>
</html>

Steps for creating HTML documents

  1. Begin by opening a plain text editor. Do not use Microsoft Word or any other word-processing software for creating HTML documents! If you are unsure what text editor you should use, you can visit our Resources page for a list of recommended editors.
  2. Enter in the "doctype" for your file. Since we'll be using XHTML 1.0 Strict for all of our assignments, you will enter the following:

    <!DOCTYPE html>
    
  3. After entering the "doctype" for your file, you'll need to insert a start and end "html" tag. Because we're using XHTML 1.0, we'll need to include some attributes in our html start tag. Your document should now look like this.

    <!DOCTYPE html>
    <html lang="en">
    
    </html>
          
  4. Next you will enter your head and body tags. Your document should look like the following:

    <!DOCTYPE html>
    <html lang="en">
       <head>
       </head>
       <body>
       </body>
    </html>
          
  5. In order for your document to be valid XHTML, you must include a title element in between the head tags. You'll also want to add an element telling the browser what character set you're using. In other words, your page should look like this:

    <!DOCTYPE html>
    <html lang="en">
       <head>
          <title>My Page Title</title>
          <meta charset="utf-8">
       </head>
       <body>
       </body>
    </html>
          
  6. While you have a fully valid HTML document at this point, it doesn't actually display any content on the screen. You'll need to enter content in between the body tags to useful HTML document.
  7. Lastly, you will want to save your file. Be sure to save the file with a .html extension. Otherwise, it will be viewed as a plain text document and your HTML tags will be displayed on the screen as content. You can now view this file in any web browser or upload it to a web server and view it using the appropriate URL.

If you are having trouble saving the file with an .html extension, please visit the "Chaning File Extensions" tutorial.