...

Creating Your First HTML Document

Creating Your First HTML Document

 

HTML Banner

Prerequisites: 

  • I suggest reading the "Intro to HTML" article before doing the exercises. It will help you with the terminology we will be using. 
  • If you don't already have an IDE (integrated development environment) would also suggest you read the "Setting up VS Code for HTML" article so you can follow along with the exercises. 

Creating and Opening a Folder

  1. Create a folder somewhere you can locate it for your first HTML document. 
  2. Then, open VS Code. 
  3. Open the folder you created by clicking "File" → "Open Folder".
    4. VS Code Screen. File in menu

    VS Code Screen. Open Folder from dropdown


  4. Navigate to where you created your folder and select it.
  5. Click "Select Folder".

Creating an HTML Document

  1. Right-click (Control + Click for Mac) in the area below your file name.

    2. VS Code Explorer area with right-click area highlighted

  2. In the menu that pops up, click on "New File".

    3. VS Code - Right Click Menu. New File Highlighted


  3. Type the name of your HTML document with ".html" at the end. I suggest "index.html".

    4. VS Code. Type file name


  4. An index.html tab will open on the right side of the window. 
  5. Type "!" and hit enter.

    6. VS Code. Exclamation point shortcut


  6. A boilerplate of the doctype, head, and body will appear. If you aren't sure what that is, check out the "Intro to HTML" article.

    7. VS Code - Boilerplate


  7. You've created an HTML document!

Adding Content

  1. The first we're going to do is change the title of the page. Look for the <title> Document </title> line in the boilerplate. Change the word "Document" to whatever you want to name your page. Here I changed the title to "My First Document". 

    2. 1
    		 
        <title>My First Document</title>

  2. Now, look for the <body></body> tags. Here is where we are going to add the visible content.
  3. In between the body tags, we are going to add a <h1> tag. Click between the body tags and press enter. In VS Code you can type "h1" and press enter for the <h1></h1> tags to appear. Type the title of your page in between the <h1> tags.

    4.  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First Document</title>
  </head>
  <body>
    <h1>My First Document</h1>
  </body>
</html>

  4. In the lower right of your window, click "Go Live". It will open a browser window and show you your document.


    5. VS Code. Go Live Button Location


  5. Now let's add some paragraphs. Press enter so you are under the <h1> element. 
  6. In VS Code you can type "p" and press enter for the <p> </p> tags to appear. Place the cursor between the <p> tags and press enter. 
  7. In VS Code you can type "lorem25" and press enter to produce "Lorem Ipsum" with 25 words.
    • Lorem Ipsum is placeholder text.


    VS Code. Lorem Ipsum shortcut

    VS Code. Lorem Ipsum Text


  8. Repeat steps 6 and 7 a few times changing the number for the Lorem Ipsum as you see fit. In my example, I will place 5 paragraphs.
  9. Look at your browser page. It should look similar to this:

Congratulations! You've created your first HTML document with some content! If you want to learn how to make it look better head over to the "Intro to CSS" article!

Top photo by Janette Campbell with elements from W3C.

If this post has left you feeling inspired or equipped with new knowledge, why not consider fueling my creativity with a small coffee purchase?

Every sip will bring me one step closer to producing more engaging content!

Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)