Overview

Introduction

Welcome to the Positioning HTML Contents - Part 1 Practice Lab. In this module, you will be provided with the instructions and devices needed to develop your hands-on skills.

Exam Objectives

The following exam objective is covered in this lab:

5.1 Construct and analyze styles that position content

Lab Duration

It will take approximately 20 minutes to complete this lab.

Exercise 1 - Working with CSS Positioning Properties

There are various Cascading Style Sheets (CSS) properties that help you to design neat and presentable web pages. The positioning properties such as float, absolute, and relative is one among them. You can design the page layout and set the position of the HTML elements using the CSS positioning properties. You can define the CSS positioning properties using inline styles, internal style sheet, or external style sheet.

For the purpose of this demonstration, the positioning properties are defined using inline styles for respective elements.

In this exercise, in the first task, you will download the Visual Studio Code workspace from the Intranet and extract it.

In the second task, you will add code in blog.html to apply the CSS positioning properties to various Blog page elements such as

,

, and

.

Learning Outcomes

After completing this exercise, you will be able to:

Apply CSS positioning properties to elements in HTML pages Your Devices You will be using the following device in this lab. Please power this on now.

PLABWIN10 - Windows 10 (Workstation)

Comprehensive Learning

See the full benefits of our immersive learning experience with interactive courses and guided career paths.