Abdelrahman Gamal Watch on YouTube

#1 كورس html كامل بالعربي | download vscode

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

Table of Contents

Introduction

This tutorial is designed to teach you the fundamentals of HTML (HyperText Markup Language) and guide you through creating a simple web page using HTML code. By following these steps, you'll gain a better understanding of HTML tags, structure, and basic web design principles.

Step 1: Understanding HTML and Its Structure

  • What is HTML?

    • HTML is a markup language used to describe the content of web pages.
    • It is not a programming language; rather, it structures the content for web browsers to render it correctly.

  • Types of HTML Tags

    • Content Display Tags: These tags display their content directly on the web page (e.g., <img>, <input>).
    • Text Description Tags: These tags describe their content and can contain other tags (e.g., <div>, <p>). They consist of:
      • An opening tag (e.g., <p>)
      • Content (e.g., "Hello World")
      • A closing tag (e.g., </p>)

Step 2: Setting Up Your Environment

  • Download Visual Studio Code

  • Creating an HTML File

    • Open Notepad or your chosen code editor (e.g., Visual Studio Code).
    • Go to File > Save As.
    • Name your file (e.g., test.html).
    • Ensure the file extension is .html or .htm.
    • Select All Files in the "Save as type" dropdown.
    • Choose UTF-8 for encoding to support Arabic characters and click Save.

Step 3: Writing Basic HTML Code

  • Basic HTML Template

    • Open the test.html file you created.

    • Enter the following code to set up a simple HTML page:

      <!DOCTYPE html>
<html lang="ar">
  <head>
    <meta charset="UTF-8">
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My First Web Page</h1>
    <p>This is a paragraph in Arabic.</p>
  </body>
</html>

    • Explanation of the Code:

      • <!DOCTYPE html>: Informs the browser that this document is an HTML5 document.
      • <html lang="ar">: Defines the language of the content (Arabic in this case).
      • <head>: Contains meta-information about the document.
      • <body>: Contains the content displayed on the web page.

Step 4: Saving and Viewing Your HTML Page

  • After entering the code, save the file.
  • Open the file in a web browser by double-clicking on it.
  • You should see your first web page displayed with the title and content you created.

Step 5: Exploring Additional HTML Elements

  • Common HTML Elements to Try

    • Add images using the <img> tag:
      <img src="image-url.jpg" alt="Description of image">
    • Create links using the <a> tag:
      <a href="https://www.example.com">Visit Example</a>
    • Make lists using <ul> for unordered lists and <ol> for ordered lists:
      <ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

  • Tips for Writing HTML

    • Always close your tags properly to avoid rendering issues.
    • Use comments to make notes in your code:
      <!-- This is a comment -->

Conclusion

You've now learned the basics of HTML, including its structure, how to set up your coding environment, and how to create a simple web page. Experiment with different tags and attributes to enhance your understanding and skills. As a next step, consider exploring CSS to style your web pages or dive deeper into JavaScript for interactive functionality. Happy coding!

Table of Contents

Recent