Added docs for HTML Basics

docs/html/html-basics/attributes-and-values.md

@@ -0,0 +1,107 @@
+---
+id: attributes-and-values
+title: HTML Attributes and Values
+sidebar_label: Attributes and Values
+sidebar_position: 3
+tags: [html, web-development, attributes, values]
+description: In this tutorial, you will learn about HTML attributes and values. HTML attributes provide additional information about elements, and values define the specific settings or properties of the attributes.
+keywords: [html, web development, attributes, values, html attributes, html values, html tutorial, html basics, web design, web pages, websites, html structure, html attributes tutorial, html values tutorial, html in 2024]
+---
+
+HTML Attributes and Values are used to provide additional information about HTML elements and define specific settings or properties for those elements. In this tutorial, you will learn about HTML attributes and values and how they are used in web development.
+
+<AdsComponent />
+
+## HTML Attributes
+
+HTML attributes are used to provide additional information about HTML elements. They are added to the opening tag of an element and consist of a name and a value. Attributes can be used to specify various settings or properties for elements, such as the source of an image, the target of a link, or the style of an element.
+
+Here is an example of an HTML element with attributes:
+
+```html title="index.html"
+<a href="https://www.example.com" target="_blank">Visit Example</a>
+```
+
+In this example, the `<a>` element is an anchor element used to create hyperlinks. It has two attributes: `href` and `target`. The `href` attribute specifies the URL of the link destination, and the `target` attribute specifies how the link should be opened (in a new tab or window).
+
+HTML attributes can be added to various elements to customize their behavior or appearance. Some common attributes used in HTML include:
+
+| Attribute | Description |
+| --------- | ----------- |
+| `src`     | Specifies the source URL of an image, audio, or video element. |
+| `href`    | Specifies the URL of the link destination for anchor elements. |
+| `alt`     | Specifies alternative text for images if the image cannot be displayed. |
+| `class`   | Specifies one or more class names for an element to apply CSS styles. |
+| `id`      | Specifies a unique identifier for an element to reference it in CSS or JavaScript. |
+| `style`   | Specifies inline CSS styles for an element to customize its appearance. |
+
+## HTML Attribute Values
+
+HTML attribute values define specific settings or properties for attributes. They are assigned to attributes using the `=` sign and enclosed in quotes (`"` or `'`). The value of an attribute can be a string, number, URL, color, or other data types depending on the attribute.
+
+Here is an example of an HTML element with attribute values:
+
+```html title="index.html"
+<img src="image.jpg" alt="Image Description" width="200" height="150">
+```
+
+In this example, the `<img>` element is an image element with attributes such as `src`, `alt`, `width`, and `height`. The attribute values specify the image source URL, alternative text, width, and height of the image, respectively.
+
+HTML attribute values can be used to customize the behavior, appearance, or functionality of elements on a web page. By using attributes and values effectively, you can create interactive and visually appealing web pages for users.
+
+:::tip
+### Best Practices for Using HTML Attributes and Values
+
+- Use attributes to provide additional information about elements and improve accessibility.
+- Use attribute values that are relevant and descriptive to enhance the user experience.
+- Avoid using inline styles (`style` attribute) for complex styling and prefer external CSS for better maintainability.
+- Validate attribute values to ensure they are correct and follow the HTML specification.
+- Keep attribute values consistent across similar elements for a cohesive design.
+- Use attributes and values that are supported by all major browsers for better compatibility.
+- Test your web pages across different devices and browsers to ensure attributes and values work as expected.
+- Follow best practices for SEO by using attributes like `alt` for images and `title` for links.
+- Keep attribute values short and concise to improve readability and maintainability of the code.
+
+By following these best practices, you can create well-structured and user-friendly web pages that adhere to web standards and provide a positive experience for visitors.
+
+:::
+
+## For Example
+
+Let's consider an example where we use HTML attributes and values to create a simple web page with an image and a link:
+
+```html title="index.html"
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>My Web Page</title>
+</head>
+<body>
+  <h1>Welcome to My Web Page</h1>
+  <img src="/img/img-5.png" alt="An image" width="300" height="200" title="Image Title">
+  <p>This is a simple web page with an image and a link.</p>
+  <a href="https://ajay-dhangar.github.io" target="_blank">Visit My Portfolio</a>
+</body>
+</html>
+```
+
+Now, let's visualize the web page created using the above HTML code:
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+    <h1>Welcome to My Web Page</h1>
+    <img src="/img/img-5.png" alt="An image" width="300" height="200" title="Image Title" />
+    <p>This is a simple web page with an image and a link.</p>
+    <a href="https://ajay-dhangar.github.io/" target="_blank">Visit My Portfolio</a>
+</>
+</BrowserWindow>
+
+In this example, we have used HTML attributes like `src`, `alt`, `width`, `height`, `title`, `href`, and `target` to create a web page with an image and a link. The attribute values define the source URL, alternative text, dimensions, title, link URL, and link target for the elements.
+
+By using attributes and values effectively, you can create engaging and informative web pages that provide a rich user experience.
+
+## Conclusion
+
+HTML attributes and values play a crucial role in web development by providing additional information about elements and customizing their behavior or appearance. By using attributes effectively and assigning appropriate values, you can create interactive and visually appealing web pages that meet the needs of users. Understanding how attributes and values work is essential for building accessible, responsive, and user-friendly websites. In the next sections, we will explore more advanced topics related to HTML attributes and values to enhance your web development skills.

docs/html/html-basics/document-structure.md

@@ -1,5 +1,5 @@
 ---
-id: document-structure.md
+id: document-structure
 title: HTML Document Structure
 sidebar_label: Document Structure
 sidebar_position: 4