Apprendre HTML de zéro ⚙️ MAJ en description
Table of Contents
Introduction
This tutorial is designed to help you learn HTML from scratch. HTML (HyperText Markup Language) is the foundational language for creating web pages. By following this guide, you will understand the basic structure of HTML documents, common tags, and how to create your first web page. This knowledge is essential for anyone looking to dive into web development.
Step 1: Setting Up Your Environment
Before you start coding, you need a proper environment to write and test your HTML.
- Choose a text editor: Options include Notepad (Windows), TextEdit (Mac), or more advanced editors like Visual Studio Code, Sublime Text, or Atom.
- Create a new file: Name it
index.html
. - Open the file in your chosen text editor to start writing your HTML code.
Step 2: Understanding the Basic Structure of an HTML Document
Every HTML document has a specific structure. Here’s how to set it up:
- Start with the
<!DOCTYPE html>
declaration, which tells the browser that this document is an HTML5 document. - Use the
<html>
tag to open the HTML document. - Inside the
<html>
tag, include the<head>
and<body>
sections.- The
<head>
section contains meta-information about the document, such as the title. - The
<body>
section contains the content that will be displayed on the web page.
- The
Here’s a basic template:
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<h1>Welcome to Your First Web Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Step 3: Adding Content to Your Web Page
Now that you have the basic structure, let’s add some content.
- Use headings to organize your content:
<h1>
for the main title<h2>
for subheadings<h3>
for smaller headings
- Add paragraphs using the
<p>
tag. - Insert links with the
<a>
tag:<a href="https://www.example.com">Visit Example</a>
- Include images using the
<img>
tag:<img src="image.jpg" alt="Description of image">
Step 4: Formatting Your Content
To make your content visually appealing, you can use various HTML tags for formatting:
- Bold text: Use the
<strong>
tag. - Italic text: Use the
<em>
tag. - Lists: Create ordered lists using
<ol>
and unordered lists using<ul>
:<ul> <li>Item 1</li> <li>Item 2</li> </ul>
Step 5: Validating Your HTML
After writing your HTML, it’s essential to check for errors.
- Use the W3C Markup Validation Service to validate your HTML. This tool will help you identify any mistakes in your code, ensuring that your web page displays correctly across different browsers.
Conclusion
In this tutorial, you have learned the basics of HTML, including how to set up your environment, structure your HTML document, add content, format it, and validate your code. As a next step, consider exploring CSS (Cascading Style Sheets) to enhance the appearance of your web pages or JavaScript for interactivity. Keep practicing by creating more complex web pages to strengthen your skills!