How to Create a Simple Web Page in HTML?

Creating a basic web page using HTML involves structuring content, identifying text elements, adding media, and styling its appearance. Here's a step-by-step guide:

Step 1: Start with Content

Begin by outlining the raw text content you want to display on your web page. This is the foundation of your page. For example, you might want to include a heading, a paragraph of text, and maybe a list.

Step 2: Give the Document Structure

HTML uses tags to structure content. Every HTML document needs a basic structure:

<!DOCTYPE html>
<html>
<head>
  <title>My Simple Web Page</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>: Tells the browser that this is an HTML5 document.
<html>: The root element of the page.
<head>: Contains meta-information about the HTML document, such as the title. The title is displayed in the browser's title bar or tab.
<body>: Contains the visible page content.

Step 3: Identify Text Elements

Use HTML tags to define different types of text. Common tags include:

<h1> to <h6>: For headings of different sizes (h1 is the largest).
<p>: For paragraphs of text.
<ul> and <li>: For unordered lists (bullet points).
<ol> and <li>: For ordered lists (numbered lists).

Example:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>This is a simple paragraph of text.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</body>

Step 4: Add an Image

To add an image to your web page, use the <img> tag. You'll need to specify the source (src) of the image and provide alternative text (alt) for accessibility.

<body>
  <img src="image.jpg" alt="My Image">
</body>

Replace "image.jpg" with the actual path to your image file. Make sure the image file is in the same directory as your HTML file, or use an absolute or relative path to it.

Step 5: Change the Page Appearance with a Style Sheet (CSS)

CSS (Cascading Style Sheets) controls the visual presentation of your web page. You can add CSS inline, internally (within the <head> tag), or externally (in a separate .css file). For simple styling, internal CSS is common.

<head>
  <title>My Simple Web Page</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }
    h1 {
      color: navy;
    }
  </style>
</head>

This example changes the font, background color, and heading color.

Complete Example:

<!DOCTYPE html>
<html>
<head>
  <title>My Simple Web Page</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }
    h1 {
      color: navy;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Web Page</h1>
  <p>This is a simple paragraph of text.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <img src="image.jpg" alt="My Image">
</body>
</html>

Save this code as an HTML file (e.g., index.html) and open it in a web browser to see your simple web page. Remember to replace "image.jpg" with a valid image path.

askvity