Pierre Giraud Watch on YouTube

COURS COMPLET HTML ET CSS [9/71] - Création d'une page HTML

3 min read 4 months ago
Published on Sep 24, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, you'll learn how to create your first complete HTML page that includes text. This guide is based on a comprehensive course by Pierre Giraud and will walk you through the essential steps to get started with HTML. Understanding how to structure a webpage with HTML is a fundamental skill for web development.

Step 1: Setting Up Your HTML Document

  1. Create a New File

    • Open a text editor (e.g., Notepad, Visual Studio Code).
    • Save a new file with the name index.html.

  2. Basic HTML Structure

    • Start by typing the following boilerplate code to set up your HTML document:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
</head>
<body>
</body>
</html>
    • Replace Your Page Title with an appropriate title for your webpage.

Step 2: Adding Text Content

  1. Insert Text Inside the Body

    • Within the <body> tags, add text elements using HTML tags. For example:
    <h1>Welcome to My First Page</h1>
<p>This is my first paragraph of text on a webpage!</p>
    • Utilize different heading sizes (<h1> to <h6>) for various sections, and use paragraph tags (<p>) for text blocks.

  2. Format Text

    • To emphasize certain words, use the <strong> tag for bold text or <em> for italicized text. For example:
    <p>This text is <strong>bold</strong> and this is <em>italic</em>.</p>

Step 3: Saving and Viewing Your Page

  1. Save Your Changes

    • After adding your content, save the index.html file.

  2. Open in a Web Browser

    • Locate the file in your file explorer.
    • Right-click and choose "Open with" followed by your preferred web browser (e.g., Chrome, Firefox).
    • You should see your text displayed as a webpage.

Step 4: Experimenting with More HTML Elements

  • Try adding more HTML elements such as:

    • Lists: Use <ul> for unordered lists and <ol> for ordered lists.
    • Links: Use the <a> tag to create hyperlinks. For example:
    <a href="https://www.example.com">Visit Example.com</a>
    • Images: Use the <img> tag to include images. For example:
    <img src="image.jpg" alt="Description of image">

Conclusion

You've now created a basic HTML page with text, links, and images! This foundational knowledge is essential for web development. Next steps could involve learning CSS to style your page or exploring more complex HTML elements. Keep experimenting with different tags and structures to enhance your understanding. Happy coding!

Table of Contents

Recent