Creating Your First HTML Page
Creating an HTML page is easy, even if you have no prior programming experience. In this lesson, we’ll walk you through the process of creating your first HTML page step-by-step.
Setting Up Your Development Environment
Before you start creating your HTML page, you’ll need to set up a development environment. Here’s what you’ll need:
- A text editor: This is where you’ll write your HTML code. You can use any text editor you like, such as Notepad (Windows), TextEdit (Mac), or Sublime Text (cross-platform).
- A web browser: This is where you’ll view your HTML page. You can use any modern web browser, such as Chrome, Firefox, or Safari.
Once you have a text editor and a web browser, you’re ready to create your first HTML page.
Creating the HTML Page
Here’s how to create your first HTML page:
- Open your text editor and create a new file.
- Type the following code into your text editor:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
This code creates a basic HTML page with a heading (<h1>) and a paragraph (<p>) of text.
- Save the file with a .html extension. For example, you could name the file “my-first-html-page.html”.
- Open the file in your web browser. You can do this by double-clicking on the file or by opening your web browser and selecting File > Open and then navigating to the file.
- You should see your HTML page displayed in your web browser. It should show the heading “Hello, World!” and the paragraph “This is my first HTML page.”
Understanding the HTML Code
Let’s take a closer look at the HTML code we just created:
<!DOCTYPE html>: This is the document type declaration, which tells the web browser that this is an HTML5 document.<html>: This is the opening tag for the HTML document.<head>: This is the section of the document that contains metadata, such as the title of the page.<title>: This tag defines the title of the HTML page, which is displayed in the browser’s title bar.</head>: This is the closing tag for the head section.<body>: This is the section of the document that contains the content of the page.<h1>: This tag defines a heading level 1, which is typically used for the main heading of a page.</h1>: This is the closing tag for the h1 heading.<p>: This tag defines a paragraph of text.</p>: This is the closing tag for the paragraph.