Create Your First Webpage: A Hands-on HTML Journey from Scratch

What is a Webpage?

Before diving into creating a webpage, let's first understand what a webpage is. A webpage is essentially a text file, but written in HTML language, which is interpreted and displayed by a browser.

Imagine you are writing a letter to a friend to introduce yourself:

A normal letter is written in natural language.
A webpage uses HTML markup language to "mark" the meaning and structure of the content.

Why Do We Need HTML?

The browser needs to know:

Which text is a heading
Which text is a paragraph
Which text should be bold or italic
Where images should be placed
Where links should redirect to

HTML is like an "instruction manual" that tells the browser how to organize and display your content. After reading the HTML file, the browser renders the content into the webpage we see according to the meaning of the tags.

Preparation for Creating a Webpage

What Do You Need?

Creating a webpage is very simple, you only need:

Text Editor:
- Notepad on Windows works.
- Better choices: VS Code, Sublime Text, Notepad++.
Browser:
- Chrome, Firefox, Edge, Safari, or any other browser.
Basic File Operation Knowledge:
- How to create and save files.
- How to open local files with a browser.

Workflow

The basic process of creating and viewing a webpage:

Write HTML Code → Save as .html file → Open with Browser → View Result
        ↑                                              ↓
        └──────────────── Modify Code ←────────────────┘

This cycle is the basic workflow of Web development. Through constant "Write - Save - View - Modify", you will gradually master HTML development.

Hands-on: Creating Your First Webpage

Step 1: Create an HTML File

Open your text editor (e.g., Notepad or VS Code).
Create a new file.
Enter the following code:

html

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is the first webpage I created!</p>
  </body>
</html>

Save the file and name it my-first-page.html.

File Naming Suggestions

Use English letters, numbers, hyphens (-), and underscores (_).
Avoid using spaces and special characters.
The file extension must be .html or .htm.
Using lowercase letters is recommended.

Step 2: View in Browser

There are two ways to open your webpage:

Method 1: Double-click the file

Directly double-click the my-first-page.html file.
The system will open it with the default browser.

Method 2: Open from Browser

Open your browser.
Press Ctrl + O (or Cmd + O on Mac).
Select your HTML file.

You should see a simple webpage displaying a "Hello, World!" heading and a paragraph of text.

Understanding the Basic Structure of a Webpage

Let's analyze the code we just created to understand the meaning and function of each part.

Document Type Declaration

html

<!DOCTYPE html>

What is this?

Document type declaration, telling the browser that this is an HTML5 document.
Must be placed on the first line of the file.

Why do we need it? In the early days of the Web, there were multiple HTML versions and browser rendering modes. The <!DOCTYPE html> declaration ensures that the browser renders the page in standard mode, rather than "Quirks Mode". In standard mode, the browser parses and displays your webpage according to the HTML5 specification, ensuring consistency across different browsers.

HTML Root Element

html

<html>
  <!-- Webpage Content -->
</html>

Function:

<html> is the root element of the entire webpage.
All other elements must be contained within the <html> tags.
Can be understood as the "container of the webpage".

Principle: HTML documents use a tree structure, and the <html> element is the root node of this tree. The browser parses elements from the outside in, first reading <html>, then its child elements, forming a hierarchical Document Object Model (DOM).

Head Area - The "Brain" of the Webpage

html

<head>
  <title>My First Webpage</title>
</head>

Function of the head element:

Contains metadata of the webpage.
This information is not directly displayed on the page.
But it affects the behavior and appearance of the webpage.

Common head content:

<title>: Webpage title, displayed on the browser tab.
<meta>: Metadata, such as character encoding, author information, keywords, etc.
<link>: Links to external resources, such as CSS stylesheets.
<script>: JavaScript scripts.
<style>: Internal CSS styles.

Why call it the "Brain"? Just as the human brain controls various functions of the body but is invisible, the <head> area controls various behaviors and settings of the webpage, but these settings themselves are not displayed to the user. It tells the browser:

What is the title of the webpage?
What character encoding to use?
Which external resources need to be loaded?
How should search engines index this page?

Body Area - The "Body" of the Webpage

html

<body>
  <h1>Hello, World!</h1>
  <p>This is the first webpage I created!</p>
</body>

Function of the body element:

Contains all visible page content.
Everything the user sees in the browser is here.
Text, images, videos, links, etc., are all placed in <body>.

Why separate head and body? This is a design philosophy of Separation of Concerns:

head: Focuses on "How to do" - configuration, settings, resource inclusion.
body: Focuses on "What to do" - actual content to display.

This separation makes the webpage structure clearer and the code easier to maintain. You can modify webpage configuration individually without affecting content, or modify content without affecting configuration.

Adding More Content

Let's expand the first webpage and add more meaningful content:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Sarah's Personal Homepage</title>
  </head>
  <body>
    <h1>Welcome to My Personal Homepage</h1>

    <h2>About Me</h2>
    <p>My name is Sarah, and I am a beginner in frontend development.</p>
    <p>I am learning HTML, CSS, and JavaScript.</p>

    <h2>My Interests</h2>
    <p>I enjoy programming, reading, and traveling.</p>

    <h2>Contact</h2>
    <p>Email: [email protected]</p>
  </body>
</html>

Understanding Heading Levels

html

<h1>Welcome to My Personal Homepage</h1>
<h2>About Me</h2>
<h2>My Interests</h2>

Meaning of Heading Levels:

<h1> is the first-level heading, the highest level, and most important.
<h2> is the second-level heading, a subheading.
And so on, up to <h6>.

Why do we need levels? Heading levels are not just for styling, but more importantly to express the logical structure of the content:

Semantics: Clearly express the importance and hierarchical relationship of content.
Accessibility: Screen readers rely on heading levels to help visually impaired users understand the page structure.
SEO Optimization: Search engines understand the theme and structure of the page through heading levels.
Development Maintenance: Clear levels make code easier to read and maintain.

Best Practices:

Use only one <h1> per page as the main title.
Do not skip heading levels (do not jump directly from <h1> to <h3>).
Headings should reflect the logical structure of the content, not just for visual effects.

Using Paragraph Tags

html

<p>My name is Sarah, and I am a beginner in frontend development.</p>
<p>I am learning HTML, CSS, and JavaScript.</p>

Why use <p> tags?

Although browsers automatically display line breaks, <p> tags have deeper meaning:

Clear Semantics: Clearly indicates that this is a paragraph, not other types of content.
Style Control: Allows unified control of all paragraph styles (spacing, indentation, etc.).
Structured: Makes webpage code more organized.
Accessibility: Assistive technologies can correctly identify and process paragraph content.

Common Mistakes

Do not use multiple <br> tags to create paragraph spacing. The correct way is to use <p> tags and then control paragraph spacing via CSS. <br> should only be used for forced line breaks within a paragraph.

FAQ

Question 1: Why can't I see the result?

Possible Reasons:

File not saved: Remember to save after modification (Ctrl + S).
Incorrect file extension: Must be .html, not .txt.
Browser cache: Press F5 or Ctrl + F5 to refresh the page.

Question 2: What if Chinese characters display as garbled text?

Add a character encoding declaration in <head>:

html

<head>
  <meta charset="UTF-8" />
  <title>My First Webpage</title>
</head>

Principle Explanation:

UTF-8 is a universal character encoding.
It supports characters from almost all languages.
Without this declaration, the browser might use the wrong encoding to parse the file.
charset tells the browser which character set to use to interpret the text.

Question 3: Why do spaces and line breaks have no effect?

HTML collapses multiple consecutive spaces and line breaks into a single space:

html

<!-- Written like this -->
<p>This is a paragraph with many spaces and line breaks</p>

<!-- Displayed in browser as -->
This is a paragraph with many spaces and line breaks

Principle: This is HTML's whitespace collapse rule. Because HTML is a markup language, it believes that formatting should be controlled by tags rather than whitespace characters.

Solution:

Use <br> tags for line breaks.
Use CSS to control whitespace handling.
Use <pre> tags to preserve original formatting.

Practical Exercise

Now it's your turn! Try creating a webpage introducing your favorite book or movie:

Requirements:

Include the complete HTML basic structure.
Use <h1> for the book/movie title.
Use <h2> for subheadings of each section (e.g., "Synopsis", "Main Characters", etc.).
Include at least 3 paragraphs.
Add character encoding declaration.

Reference Structure:

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Movie Introduction - Inception</title>
  </head>
  <body>
    <h1>Inception</h1>

    <h2>Basic Information</h2>
    <p>Director: Christopher Nolan</p>
    <p>Release Year: 2010</p>

    <h2>Synopsis</h2>
    <p><!-- Movie Synopsis --></p>

    <h2>My Review</h2>
    <p><!-- Your Review --></p>
  </body>
</html>

Summary

Through this lesson, you have learned:

What is a webpage: A text file written in HTML, interpreted and displayed by a browser.
Steps to create a webpage: Write code → Save file → Open in browser.
HTML Basic Structure:

html

<!DOCTYPE html> ← Document Type Declaration
<html>
  ← Root Element
  <head>
    ← Metadata Area
    <title>...</title>
    ← Page Title
  </head>
  <body>
    ← Visible Content Area
    <!-- Content -->
  </body>
</html>

Core Concepts:
- Why <!DOCTYPE html> is needed.
- Difference and function of head and body.
- Importance of heading levels.
- Semantic value of paragraph tags.
Best Practices:
- Always add character encoding declaration.
- Use heading levels reasonably.
- Use tags to express semantics, not just style.

Create Your First Webpage: A Hands-on HTML Journey from Scratch ​

What is a Webpage? ​

Why Do We Need HTML? ​

Preparation for Creating a Webpage ​

What Do You Need? ​

Workflow ​

Hands-on: Creating Your First Webpage ​

Step 1: Create an HTML File ​

Step 2: View in Browser ​

Understanding the Basic Structure of a Webpage ​

Document Type Declaration ​

HTML Root Element ​

Head Area - The "Brain" of the Webpage ​

Body Area - The "Body" of the Webpage ​

Adding More Content ​

Understanding Heading Levels ​

Using Paragraph Tags ​

FAQ ​

Question 1: Why can't I see the result? ​

Question 2: What if Chinese characters display as garbled text? ​

Question 3: Why do spaces and line breaks have no effect? ​

Practical Exercise ​

Summary ​

Create Your First Webpage: A Hands-on HTML Journey from Scratch

What is a Webpage?

Why Do We Need HTML?

Preparation for Creating a Webpage

What Do You Need?

Workflow

Hands-on: Creating Your First Webpage

Step 1: Create an HTML File

Step 2: View in Browser

Understanding the Basic Structure of a Webpage

Document Type Declaration

HTML Root Element

Head Area - The "Brain" of the Webpage

Body Area - The "Body" of the Webpage

Adding More Content

Understanding Heading Levels

Using Paragraph Tags

FAQ

Question 1: Why can't I see the result?

Question 2: What if Chinese characters display as garbled text?

Question 3: Why do spaces and line breaks have no effect?

Practical Exercise

Summary