![Showcase Pet Services Website](https://icons.labex.io/showcase-pet-services-website.png)
Showcase Pet Services Website
In this lab, focus on the main content area of your website. This section showcases the services of 'Pet's House'.
HTML
![Header and Home Layout](https://icons.labex.io/header-and-home-layout.png)
Header and Home Layout
We embark on a journey to create a welcoming online space for pet lovers. Our scene, Pet Paradise, features a character, Alex the Innovator, who dreams of connecting pet owners through a vibrant and informative website. Alex's goal is to showcase pet services, share stories, and build a community. This scenario is designed to be engaging, guiding students through the process of transforming Alex's vision into a digital reality.
HTML
![HTML Sample Output](https://icons.labex.io/html-sample-output.png)
HTML Sample Output
HTML is the foundation of every website, and it's essential to have a good understanding of the different elements available to create web pages. One such element is the <samp> tag that we'll be focusing on in this lab. The <samp> tag is used to display a sample or output of a computer code.
HTML
![HTML Figure Caption](https://icons.labex.io/html-figure-caption.png)
HTML Figure Caption
The HTML <figcaption> tag is used to provide captions for content inside the <figure> element. In this lab, you will learn how to use the <figcaption> tag to add captions to your images.
HTML
![Bidirectional Text Formatting with BDI](https://icons.labex.io/bidirectional-text-formatting-with-bdi.png)
Bidirectional Text Formatting with BDI
Bi-Directional Text (bidi) is a formatting style where text is written from both left to right and right to left. It is highly useful when you are writing content in multiple languages and also when the user enters input in languages other than the default language of your webpage. In such cases, having the <bdi> tag can greatly benefit you and improve the user experience.
HTML
![HTML External Content/Plugin](https://icons.labex.io/html-external-content-plugin.png)
HTML External Content/Plugin
The HTML <embed> tag can be used to include various types of content such as images, videos, and other web pages into our web page. In this lab, we will use the HTML <embed> tag to add a YouTube video to a web page.
HTML
![HTML Preformatted Text](https://icons.labex.io/html-preformatted-text.png)
HTML Preformatted Text
In HTML, the <pre> tag is used to display preformatted text. It is exactly present on the web page as it is present in an HTML file. The whitespace used inside this tag is displayed as written. The text is written between <pre> tags is displayed in a fixed-width font. It is recommended to use the <pre> tag in case of unusual formatting or if you want to write a piece of computer code.
HTML
![HTML Definition Term](https://icons.labex.io/html-definition-term.png)
HTML Definition Term
In this lab, you will learn how to use the HTML <dfn> tag to create a definition list that highlights the terms being defined. The <dfn> tag is commonly used in tutorials and educational websites to provide an interactive and informative user experience.
HTML
![HTML Navigation Links](https://icons.labex.io/html-navigation-links.png)
HTML Navigation Links
The HTML <nav> tag is an important element for creating navigation links on a website. In this lab, you will learn how to use the <nav> tag to create a navigation menu on your website.
HTML
![HTML Select List Option](https://icons.labex.io/html-select-list-option.png)
HTML Select List Option
The HTML <option> tag is used to define the options in a drop-down list in an HTML form. It is attached to the <select> tag and its variants such as <datalist> and <optgroup>. This tag helps users make a selection from a list of choices. This lab will guide you through the steps to implement an HTML drop-down list using the <option> tag.
HTML
![HTML Citation Formatting with `<cite>` Tag](https://icons.labex.io/html-citation-formatting-with-cite-tag.png)
HTML Citation Formatting with `<cite>` Tag
This lab will introduce you to the HTML <cite> tag, which is used to display a citation in a different format from normal text. In this lab, you will learn how to use the <cite> tag along with the <blockquote> tag to cite the author of a quotation in your HTML document.
HTML
![HTML Option Grouping](https://icons.labex.io/html-option-grouping.png)
HTML Option Grouping
The <optgroup> tag in HTML is used to create a grouping of options within a dropdown list. This lab will take you through the steps to create an optgroup and customize it using attributes.
HTML
![HTML Table Column](https://icons.labex.io/html-table-column.png)
HTML Table Column
HTML <col> tag is used to define the properties of each column of a table separately. In this lab, you will learn how to use the <col> tag to style columns of an HTML table.
HTML
![HTML Table Data Cell](https://icons.labex.io/html-table-data-cell.png)
HTML Table Data Cell
In this lab, you will learn about the HTML <td> tag which is used to define table data in an HTML table. You will also learn about the various attributes that can be used with this tag.
HTML
![HTML Multiline Input](https://icons.labex.io/html-multiline-input.png)
HTML Multiline Input
HTML <textarea> tag allows users to enter and submit free text within a form. In this lab, we will create a simple HTML form with a <textarea> input and apply some commonly used attributes.
HTML
![HTML Table Body](https://icons.labex.io/html-table-body.png)
HTML Table Body
In HTML, the <tbody> tag is used to indicate the body of a HTML table, consisting of a set of rows within the table. This lab will guide you through the steps to create a simple HTML table with the <tbody> tag.
HTML
![HTML Template Definition](https://icons.labex.io/html-template-definition.png)
HTML Template Definition
The <template> tag in HTML allows you to create reusable content that is not rendered on a page when it is loaded. This is useful when you have content that is not needed at the start of the page loading but can be accessed later using JavaScript. This lab will guide you through the steps to create an HTML template.
HTML
![HTML Table Header Cell](https://icons.labex.io/html-table-header-cell.png)
HTML Table Header Cell
In HTML, the <th> tag is used to define one cell as a header of a group of cells. There are two types of HTML table cells: header cell and standard cell. The header cell is used as a header for the group of cells and the standard cells contain data for a table.
HTML