David Nguyen

Programming Assignment: Creating an HTML Document

Programming Assignment: Creating an HTML Document

David Nguyen's photo
David Nguyen
Jul 9, 2024·

2 min read

Lab Instructions: Creating an HTML Document

In this exercise you will you will practice creating a simple HTML document.

Tips: Before you Begin

To view your code and instructions side-by-side, select the following in your VSCode toolbar:

  • View -> Editor Layout -> Two Columns

  • To view this file in Preview mode, right click on this README.md file and Open Preview

  • Select your code file in the code tree, which will open it up in a new VSCode tab.

  • Drag your assessment code files over to the second column.

  • Great work! You can now see instructions and code at the same time.

Task 1: Create a valid HTML document that displays a piece of text.

Objectives

  • Add the DOCTYPE.

  • Add the HTML, head and body elements.

  • Add the title element.

  • Add the text to the body element.

Follow the Step by Step instructions below:

  1. Open the index.html file.

  2. Type <!DOCTYPE html> on the first line.

  3. Create your html element on the next line. This will be the root element of the document.

  4. Add the head element inside the html element. The head element contains data about the HTML document that does not display in the web browser.

  5. Add the title element inside the head element.

  6. Add the text My First HTML Document inside the title element. The content of the title element is the text that will be displayed in the web browser tab.

  7. Close the head tag and add the body element. The ``body element contains all displayable content of the webpage.

  8. Add the text I successfully created my first document inside the body element. This displays on the webpage.

Final Step: Let's submit your code!

Nice work! To complete this assessment:

  • Save your file through File -> Save

  • Select "Submit Assignment" in your Lab toolbar.

Your code will be autograded and return feedback shortly on the "Grades" tab.
You can also see your score in your Programming Assignment "My Submission" tab.

Tips

  • Ensure that the DOCTYPE is declared at the beginning of the file.

  • Remember that HTML documents have a specific structure.

  • Review the lessons What is HTML? and HTML Documents.

<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Document</title>
</head>
<body>
    <p>I successfully created my first document</p>
</body>
</html>