In this exercise you will you will practice creating a simple HTML document.
- 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.
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:
-
Open the
index.html
file. -
Type
<!DOCTYPE html>
on the first line. -
Create your
html
element on the next line. This will be the root element of the document. -
Add the
head
element inside thehtml
element. The head element contains data about the HTML document that does not display in the web browser. -
Add the
title
element inside thehead
element. -
Add the text
My First HTML Document
inside thetitle
element. The content of thetitle
element is the text that will be displayed in the web browser tab. -
Close the
head
tag and add thebody
element. The ``body element contains all displayable content of the webpage. -
Add the text
I successfully created my first document
inside thebody
element. This displays on the webpage.
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.
- 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.