logologo

Getting Started with HTML

Let's get started with HTML, which stands nicely for HyperText Markup Language. Think of HTML as the foundation of any website, similar to how bricks are used to build a house. Just as every building needs a solid foundation to stay up, every website needs HTML to exist on the web.

What Is HTML?

Imagine you're constructing a house. First, you lay down bricks to form the walls, windows, and doors. In the world of web development, HTML serves as these bricks, creating the basic structure of web pages.

How Does HTML Work?

HTML works by using something called "tags." Tags are like different types of bricks, each serving a unique purpose. For instance:

  • <h1> represents a large heading, like the main entrance of a house.
  • <p> stands for a paragraph, akin to a room filled with furniture, providing detailed information.
  • <img> is used to insert images, similar to hanging pictures on the walls.

An Example To Get You Started

Let's create a simple HTML page step-by-step:

  1. Start with a doctype: The doctype declaration is not an HTML tag; it's an instruction to the web browser about the version of HTML the page is written in. For modern web pages, you'll use <!DOCTYPE html> at the very beginning. It's like telling the construction workers which building code to follow.

  2. Add the <html> tag: This tag encompasses all the content on your web page, similar to the outer walls of a house enclosing all the internal components.

  3. Specify the <head>: Inside the <head> tag, you can add elements that describe the document or include external resources like CSS (which styles your HTML). Think of it as setting up the electrical wiring or plumbing before plastering the walls—invisible but crucial.

  4. Create the <body>: The <body> tag contains all the content that's visible to visitors, such as text, images, and links. This is where you decorate your house with furniture, paint, and decorations.

Here's what a very basic HTML document might look like:

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
 
<h1>Welcome to My House</h1>
<p>This is the living room. It's where we'll spend most of our time getting to know HTML.</p>
<img src="path-to-image.jpg" alt="A cosy living room">
 
</body>
</html>

Viewing Your HTML

To see your HTML in action, you simply need to:

  1. Open a plain text editor (like Notepad on Windows, TextEdit on Mac in plain text mode, or any code editor).
  2. Copy and paste the example code into the editor.
  3. Save the file with a .html extension, for example, my-first-page.html.
  4. Open the file you just saved in a web browser (like Chrome, Firefox, or Safari).

And voilà! You've built the structure of a web page using HTML. Remember, what we've discussed today is just the beginning. There's much more to explore, such as adding links, lists, tables, and forms to your web pages. As you get comfortable with these basics, you'll be well on your way to building more complex and interactive websites.