IT Fundamentals (FC0-U61) Skills Lab: Working with Basic HTML Tags

Exercise 1: Working with Basic HTML Tags

Task 1: Create a Visual Studio Code Workspace

  1. Connect to the Virtual Machine

    • Connect to a Workstation virtual machine running Windows 10.
    • Log in with the credentials provided for the lab.

  2. Create a New Folder for the Workspace

    • Right-click on the desktop, select New > Folder.
    • Name the folder and press Enter.

  3. Open Visual Studio Code (VSCode)

    • Click the Windows search bar, type VSCode, and open the application.

  4. Add the Folder to Workspace

    • Click the File tab > Add Folder to Workspace....
    • In the Add Folder to Workspace dialog box:
      • Navigate to the Desktop location.
      • Select the SLS folder.
      • Click Add.

  5. Save the Workspace

    • Click File > Save Workspace As.
    • In the Save Workspace As dialog box:
      • Name the file.
      • Click Save.
    • The SLS code-workspace is added by default.

  6. Create an HTML File

    • Right-click the SLS root folder in VSCode.
    • Select New File from the menu.
    • Name the file index.html and press Enter.

Task 2: Create a Website Home Page

  1. Confirm Environment Setup

    • Ensure you are still connected to the Windows 10 VM.
    • Open VSCode and verify the SLS workspace is active.

  2. Write the HTML Boilerplate

    • Click inside the index.html file and type the following:
      <!DOCTYPE html>
    • Press Ctrl + S to save the file.

  3. Test the HTML File in a Browser

    • Open File Explorer > Desktop > SLS folder.
    • Right-click on index.html > Open With > Internet Explorer.
    • A blank white page will appear (expected due to lack of content).

  4. Add HTML Structure

    • Modify index.html to include <html> tags:
      <!DOCTYPE html>
<html>
</html>

  5. Add the Head Section

    • Update the file to include:
      <!DOCTYPE html>
<html>
<head>
</head>
</html>

  6. Add a Page Title

    • Inside the <head> section, add:

      <title>Smart Learning Solutions</title>

    • The index.html file should now look like:

      <!DOCTYPE html>
<html>
<head>
   <title>Smart Learning Solutions</title>
</head>
</html>

  7. Add the Body Section

    • Update the file to include:
      <body>
</body>

  8. Add an HTML Comment

    • Inside the <body> section, add:
      <!-- This is a comment -->

  9. Insert Headings and Paragraphs

    • Add the following inside the <body> section:
      <h1>Welcome to LS</h1>
<p>This is a basic paragraph for HTML markup.</p>
<h3>This is also a heading</h3>

  10. Final HTML File Structure

    • Your index.html file should now look like:
      <!DOCTYPE html>
<html>
<head>
   <title>Smart Learning Solutions</title>
</head>
<body>
   <!-- This is a comment -->
   <h1>Welcome to LS</h1>
   <p>This is a basic paragraph for HTML markup.</p>
   <h3>This is also a heading</h3>
</body>
</html>

  11. Test the HTML File in a Browser

    • Open File Explorer > Desktop > SLS folder.
    • Right-click index.html > Open With > Internet Explorer.
    • The webpage should now display:
      Welcome to LS
This is a basic paragraph for HTML markup.
This is also a heading
Previous

ITF+ Module 11
Next

ITF+ Module 13