Working with Basic HTML Tags

Introduction
Objective
Welcome to the Working with Basic HTML Tags practice lab. In this module, you will be
provided with the instructions and devices needed to develop your hands-on skills.

Overview

Learning Outcomes:
In this module, you will complete the following exercise:

Exercise 1 - Working with Basic HTML Tags

After completing this lab, you will be able to:

Create a Visual Studio code workspace

Create a website home page

Exam Objectives:
The following exam objective is covered in this lab:

4.1 Compare and contrast programming language categories

Note: Our main focus is to cover the practical, hands-on aspects of the exam
objectives. We recommend referring to course material or a search engine to
research theoretical topics in more detail.

Exercise 1 - Working with Basic HTML Tags

Hyper Text Markup Language (HTML) is the standard markup language to create structured
web pages with formatted text, images, and links. You can develop HTML documents using
various HTML elements, also known as HTML tags. Various versions of HTML have been
launched over time.

You require a code editor to develop HTML documents. One example code editor is Visual
Studio Code (VS Code). Visual Studio Code is a free, cross-platform, lightweight, and powerful
source code editor that supports many programming languages.

The developed HTML pages can be displayed in various web browsers including Google
Chrome and Internet Explorer.

In this exercise, you will create the home page of the website for a content development
company named Smart Learning Solutions or SLS for short.

Note: For the purpose of this demonstration, you will be creating an HTML5
document using the Visual Studio Code (VS code), and displayed with Internet
Explorer.

Please refer to your course material or use your favorite search engine to research this topic in
more detail.

Learning Outcomes
After completing this exercise, you will be able to:

Create a Visual Studio code workspace

Create a website home page

Your Devices
You will be using the following device in this lab. Please power this on now.

PLABWIN10 - Workstation (Windows 10 Pro)

Task 1 - Create a Visual Studio Code Workspace

VS Code workspace is the working area where you can add, create, open, modify, and delete
files and folders. You can save these workspaces and work with them whenever required.
When you begin a website development, you need to create a root folder and add that folder
to the VS Code workspace. You create the web pages and subfolders in the root folder.

In this task, you will create the index.html file in the SLS VS Code workspace.

1 Click the Start button.

2 Power on and connect to PLABWIN10.

Sign in with the following credentials:

Username: PRACTICELABS\Administrator

Password: Passw0rd

To create a folder on the desktop, right-click anywhere on the desktop.

On the context menu displayed, select New > Folder.

 3 Name the folder:

SLS

Press Enter.

The new folder named SLS is now listed on the desktop.

4 To open Visual Studio Code, double-click the Visual Studio Code icon on the

PLABWIN10 desktop.
 5 The Visual Studio Code application window is displayed.

Note: Exit the How do you want to open this dialog box and the Visual Studio Code
- Getting Started webpage, if displayed.

The Welcome page of the application is displayed.

Close the Welcome page.

 6 To add the newly created folder to Visual Studio Code workspace, click File > Add

Folder to Workspace.

7 Add Folder to Workspace dialog box appears.

To select the folder, in the console tree, navigate to This PC > Desktop.

In the details pane, click SLS, and click Add.

 8 Untitled (Workspace) - Visual Studio Code window opens.

The SLS folder under UNTITLED (WORKSPACE) is displayed in the Explorer.

The SLS folder is now the root folder in the Untitled (Workspace).
 9 To save the workspace, click File > Save Workspace As.

10 The Save Workspace dialog box appears.

To save the workspace in the SLS folder, navigate to This PC > Desktop > SLS.

To provide a name for the workspace, in the File name box, type the following name:
SLS

Click Save.

Now you have the SLS workspace within the SLS root folder.
 11 Back on the Explorer window, notice that the Untitled workspace is now listed as the

SLS workspace.

In addition, notice that the SLS.code-workspace is added by default.

 12 To create an HTML file in the SLS root folder, right-click the SLS root-folder.

On the context menu, select New File.

 13 A blinking cursor appears in the textbox.

To provide the HTML file name, in the textbox, type the following name:
index.html

Press Enter.
Task 2 - Create a Website Home Page
HTML tags are instructions to the web browser specifying the document structure and display-
properties of the content. The tags usually come in pairs, with an opening/start tag and a
closing/end tag. When you open the HTML document in a web browser, the tags are not
displayed, only the specified content is displayed.

In this task, you will populate the index.html document with the required content and the
relevant tags.

To see the screenshots and code more clearly, we would suggest opening the content in Print
View.

1 Ensure that you are connected to PLABWIN10 and the SLS (Workspace) - Visual

Studio Code window is displayed.

The blank index.html file is displayed in the Editor.

At the beginning of the document, type:

<!DOCTYPE html>
 Note: As you type, the auto-complete option displays suggestions to complete the
tag.

To save the code, press Ctrl + S.

The <!DOCTYPE html> declaration is included only once at the beginning of the document. This
declaration indicates usage of HTML5 in the document, specifies the document type, and
helps display of web pages.

Note: The <!DOCTYPE html> declaration is not case sensitive.

All the other HTML tags are placed after this declaration in the HTML document. Just as for all
the tags, the browser does not display this declaration in the output.

2 You can view how the index.html file appears in the browser.

On the taskbar at the bottom, click the File Explorer icon to open it.

Navigate to This PC > Desktop > SLS > index.html

In the details pane, right-click index.html, and on the context menu, click Open with >
Internet Explorer.
 3 The file index.html is opened in Internet Explorer.

Note: There is no output associated with the <!DOCTYPE html> declaration. However,
if you do see any output on the screen, please recheck your code.

4 Next, access the index.html file by clicking the VS code icon on the taskbar.

Now, add the <html> tag to the page. Add the following code in 2 new lines:
<html>
</html>
 Note: Please be aware that Visual Studio Code will automatically input the closing
tag for all tags, pressing Enter in the middle of the tag will cause it to enter in a new
line.

The <html> tag is always placed after the <!DOCTYPE html> declaration in the HTML document
and is considered as the root tag in the HTML document. This tag helps the web browser
identify the document as an HTML document and acts as a container for all the other tags.
The closing <html> tag is always placed at the end of the HTML document.

Your page should look like this:

<!DOCTYPE html>
<html>
</html>

To save the code, press Ctrl + S.

The code does not give any output for the <html> tag.

5 To view the output, in Internet Explorer, click the Internet Explorer icon on the taskbar.

Click the Refresh icon in the address bar.

The index.html file is refreshed.

Note: At this stage, there is no output associated with the <html> tag. You can see
the output as and when the demonstration progresses with the inclusion of more
tags and tag content. However, if you do see any display on the screen, please
recheck your code.
 6 Next, add the <head> tag to the page.

Access the VS code window and type in the following code after the <html> tag in 2 separate
lines:
<head>
</head>

The <head> tag is included within the <html> tag. This tag acts as a container for holding the
data of the HTML document. The document data is also known as metadata. You can include
other HTML tags such as title, style, script, and link within the <head> tag.

Your code should look like this:

<!DOCTYPE html>
<html>
<head>
</head>
</html>

To save the code, press Ctrl + S.

The code does not give any output for the <head> tag.

7 To view the output, in Internet Explorer, click the Refresh icon in the address bar.
The index.html file is refreshed.

Note: At this stage, there is no output associated with the <head> tag. You can see
the output as and when the demonstration progresses with the inclusion of more
tags and tag content. However, if you do see the code on the screen, please recheck
your code.

8 Next, add the <title> tag and the relevant title to the page. Input the following code

between the <head> tags:

<title>Smart Learning Solutions</title>

You can use the <title> tag to specify the HTML page title. This title appears as the title or the
document name on the browser tab. Moreover, it is displayed as the document title in search
engine results and bookmarks. Therefore, there is only one <title> tag in an HTML document.

The title text for the document is placed between the opening and closing <title> tag.

Your code should now look like this:

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

To save the code, press Ctrl + S.

 9 To view the output, in Internet Explorer, click the Refresh icon in the address bar.

The index.html file is refreshed, and the output is displayed.

The document title Smart Learning Solutions is displayed in the browser tab.

10 Next, add the <body> tag to the page. Use the following code after the </head> tag:

<body>
</body>

You use the <body> tag to define the content to display on an HTML document. You can
include text, images, or tables within the <body> tag. An HTML document can have only one
<body> tag.

Your code should now look like this:

<!DOCTYPE html>
<html>
<head>
<title>Smart Learning Solutions</title>
</head>
<body>
</body>
</html>
To save the code, press Ctrl + S.

The code does not give any output, as there is no content included within the <body> tag.

11 To view the output, in Internet Explorer, click the Refresh icon in the address bar.

The index.html file is refreshed.

At this stage, there is no output displayed as there is no content specified inside the <body>
tag. Including other tags and tag content within the <body> tag will display the output.

12 Next, add the comment tag to the page. Use the following code within the <body>

</body> tags:

<!--This part is commented. Therefore, it can only be viewed in code view and it will not
appear in the browser. For example, you can write a description about the programming logic
used in the HTML code for further reference, better understanding, and clarity-->

The comment tag helps add descriptive text to the source code documents that need not be
executed. The web browser does not display the text included within the comment tag.

You can place the comment tag anywhere in the HTML code - that is anywhere within the
<HTML> tag. The comment tag is opened with the tag <!- - and closed with - ->.

Your code should look like this:

<!DOCTYPE html>
<html>
<head>
<title>Smart Learning Solutions</title>
</head>
<body>
<!--This part is commented. Therefore, it can only be viewed in code
view and it will not appear in the browser. For example, you can write a description about the
programming logic used in the HTML code for further reference, better understanding, and
clarity-->
</body>
</html>

To save the code, press Ctrl + S.

In the above code, the comment tag is placed within the <body> tag.

13 To view the output, in Internet Explorer, click the Refresh icon in the address bar.

The index.html file is refreshed.

The browser does not display the descriptive text included in the comment tag.

14 Next, add the <h1> tag to the page. Use the following code on a new line after the

comment within the <body> tag:

<h1>Welcome to Smart Learning Solutions</h1>

The <h1> tag should be used for the most important heading on the HTML page. Therefore, this
tag normally only appears once on a web page.

Note: An HTML page has six levels of headings - h1 to h6. The <h2> - <h6> tags
should be used for subheadings. You should not skip any heading levels when
building an HTML page.

Your code should look like this:

<!DOCTYPE html>
<html>
<head>
<title>Smart Learning Solutions</title>
</head>
<body>
<!--This part is commented. Therefore, it can only be viewed in code
view and it will not appear in the browser. For example, you can write a description about the
programming logic used in the HTML code for further reference, better understanding, and
clarity-->
<h1>Welcome to Smart Learning Solutions</h1>
</body>
</html>

To save the code, press Ctrl + S.

In the above code, the welcome text is included in the <h1> tag.

15 To view the output, in Internet Explorer, click the Refresh icon in the address bar.

The index.html file is refreshed, and the text Welcome to Smart Learning Solutions is displayed
in the output.
 16 Next, add the introduction paragraph about the company. Use the following code on a

new line after the heading 1 tag:

<p>Smart Learning Solutions is an organization that primarily focuses on delivering content

development solutions for educational purposes.</p>

You can use the <p> tag to specify paragraph text in the HTML document. You can have
multiple <p> tags in an HTML document.

Your code should now look like this:

<!DOCTYPE html>
<html>
<head>
<title>Smart Learning Solutions</title>
</head>
<body>
<!--This part is commented. Therefore, it can only be viewed in code view and it will not appear
in the browser. For example, you can write description about the programming logic used in
the HTML code for further reference, better understanding, and clarity-->
<h1>Welcome to Smart Learning Solutions</h1>
<p>Smart Learning Solutions is an organization that primarily focuses on delivering content
development solutions for educational purposes.</p>
</body>
</html>

To save the code, press Ctrl + S.

The code will display the text included in the <p> tag.
 17 To view the output, in Internet Explorer, click the Refresh icon in the address bar.

The index.html file is refreshed, and the output is displayed.

Notice that the paragraph text included within the <p> tag is displayed.

18 Now add another heading by inputting the following code on a new line after the <h1>

tag:

<h3>What do we offer?</h3>

The <h3> tag is used to specify a lower level of heading in a document.

Note: You will use the <h2> tag in a later module.

This is what your code should now look like:

<!DOCTYPE html>
<html>
<head>
<title>Smart Learning Solutions</title>
</head>
<body>
<!--This part is commented. Therefore, it can only be viewed in code view and it will not appear
in the browser. For example, you can write description about the programming logic used in
the HTML code for further reference, better understanding, and clarity-->
<h1>Welcome to Smart Learning Solutions</h1>
<p>Smart Learning Solutions is an organization that primarily focuses on delivering content
development solutions for educational purposes.</p>
<h3>What do we offer?</h3>
</body>
</html>

To save the code, press Ctrl + S.

19 To view the output, in Internet Explorer, click the Refresh icon in the address bar.

The index.html file is refreshed, and the output is displayed.

The heading text included in the <h3> tag is displayed. Observe the difference in the output of
<h1> and <h3> tags.

Note: You can save the index.html and VS Code workspace files on your system. For
more information on how to save the files on local systems, please visit our Help and
Support page.
 Keep all devices that you have powered on in their current state and proceed to the
next exercise.

Review
Well done, you have completed the Working with Basic HTML Tags practice lab.

Summary
You completed the following exercise:

Exercise 1 - Working with Basic HTML Tags

You should now be able to:

Create a Visual Studio code workspace

Create the website home page

Feedback

Shutdown all virtual machines used in this lab, before proceeding to the next
module. Alternatively, you can log out of the lab platform.