Complete HTML Lab Guide to Learn Website Structure

Introduction

Websites are the cornerstone of the internet, and at their core, they are built using three fundamental technologies:

HTML (HyperText Markup Language) — defines the structure and content of web pages.
CSS (Cascading Style Sheets) — adds styling to make the websites visually appealing.
JavaScript — enables interactive and dynamic behavior on websites.

In this lab, we focused on the first pillar, HTML, to understand how web pages are structured and rendered by browsers.

What is HTML?

HTML is a markup language used to create the skeleton of a webpage. It uses elements or tags to instruct the browser on how to display content. Each HTML document follows a standard structure that ensures consistency across browsers.

Core Components of an HTML Document

The lab presented a simple HTML document, which contains the following essential components:

<!DOCTYPE html>
This declaration defines the document type as HTML5, ensuring modern web standards are used for rendering the page.
<html>
The root element of the HTML page; all other elements nest inside this tag.
<head>
Contains metadata and information about the page, such as the page’s title, linked stylesheets, and scripts.
<body>
This section holds all the content displayed on the webpage, such as text, images, buttons, and other interactive elements.
Content Elements
- <h1>: Defines a large heading, usually the main title on the page.
- : Defines paragraphs or blocks of text.

HTML Elements and Attributes

HTML elements can be enhanced using attributes that provide additional information or functionality:

Class Attribute (class)
Used to group elements for styling or scripting purposes. For example:
This is bold text.
ID Attribute (id)
Unique identifier for an element, used to apply specific styles or to select the element via JavaScript. Example:
This paragraph has a unique ID.
Source Attribute (src)
Commonly used in <img> tags to specify the image location. Example:
<img src="img/cat.jpg" alt="Cute Cat">

Lab Exercises: Practical HTML Manipulation

Rendering HTML

The lab provided an interactive HTML rendering tool. By entering HTML code in the input box and clicking "Render HTML Code," you could instantly see how your HTML would display on the page a great way to learn HTML basics hands-on.

Fixing a Broken Image

One of the images of cats was broken. By identifying and fixing the broken <img> tag (correcting the src attribute), the hidden answer text was revealed:

Answer: HTMLHERO

Adding a Dog Image

Next, the lab asked to add a dog image by inserting another <img> tag at a specific line with the source img/dog-1.png. This demonstrated how to add multiple images to a page.

The text displayed on the dog image revealed the next answer:

Answer: DOGHTML

Conclusion

This lab is an excellent primer for understanding how websites are built and structured using HTML. Learning how to manipulate HTML tags and attributes helps in web development and also provides a foundational skill for web security professionals who analyze or test websites.

Complete HTML Lab Walkthrough & Explanation: TryHackMe Pre-Security