diff --git a/docs/html/_category_.json b/docs/html/_category_.json new file mode 100644 index 0000000..3354615 --- /dev/null +++ b/docs/html/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "HTML", + "position": 2, + "link": { + "type": "generated-index", + "description": "HTML stands for Hyper Text Markup Language. It is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript." + } +} diff --git a/docs/html/assets/image-1.png b/docs/html/assets/image-1.png new file mode 100644 index 0000000..215f157 Binary files /dev/null and b/docs/html/assets/image-1.png differ diff --git a/docs/html/assets/image-2.png b/docs/html/assets/image-2.png new file mode 100644 index 0000000..a4be135 Binary files /dev/null and b/docs/html/assets/image-2.png differ diff --git a/docs/html/assets/img-3.png b/docs/html/assets/img-3.png new file mode 100644 index 0000000..c572e12 Binary files /dev/null and b/docs/html/assets/img-3.png differ diff --git a/docs/html/assets/img-4.png b/docs/html/assets/img-4.png new file mode 100644 index 0000000..f61379d Binary files /dev/null and b/docs/html/assets/img-4.png differ diff --git a/docs/html/best-practices-and-optimization/_category_.json b/docs/html/best-practices-and-optimization/_category_.json new file mode 100644 index 0000000..e440918 --- /dev/null +++ b/docs/html/best-practices-and-optimization/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Best Practices and Optimization", + "position": 16, + "link": { + "type": "generated-index", + "description": "In this section, you will learn best practices for writing clean, efficient HTML code and optimizing your web pages for performance." + } +} diff --git a/docs/html/forms/_category_.json b/docs/html/forms/_category_.json new file mode 100644 index 0000000..cb26af0 --- /dev/null +++ b/docs/html/forms/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Forms", + "position": 10, + "link": { + "type": "generated-index", + "description": "In this section, you will learn how to create forms in HTML. You will learn how to create text fields, radio buttons, checkboxes, and more." + } + } \ No newline at end of file diff --git a/docs/html/forms/building-form.mdx b/docs/html/forms/building-form.mdx new file mode 100644 index 0000000..3b2a72f --- /dev/null +++ b/docs/html/forms/building-form.mdx @@ -0,0 +1,223 @@ +--- +id: building-forms +title: Building Forms in HTML +sidebar_label: Building Forms +sidebar_position: 1 +tags: [html, web-development, forms, user-input, front-end-development, web-design] +description: "Learn how to create forms in HTML to collect user input effectively, with detailed examples and best practices." +hide_table_of_contents: true +--- + +Forms are an essential part of any website or web application. They allow users to interact with the website by providing input, such as text, selections, and buttons. Forms are used for various purposes, such as user registration, login, search, feedback, and more. + + +
+ +In this tutorial, you will learn how to create forms in HTML to collect user input effectively. + +## Creating a Simple Form + +To create a form in HTML, you need to use the `
` element. The `` element is used to define an HTML form that collects user input. Here's an example of a simple form that collects the user's name and email address: + +```html title="index.html" showLineNumbers + + + + + + + Simple Form + + +

Simple Form

+ + + +

+ + +

+ +
+ + +``` + +In the example above: +- We have created a simple form that collects the user's name and email address. +- The `
` element contains two `` elements for the name and email fields. +- The `type="text"` attribute specifies that the input field is a text field. +- The `type="email"` attribute specifies that the input field is an email field, which helps in validating the email address. +- The `required` attribute specifies that the input field is required and must be filled out before submitting the form. +- The ` + ``` + + +
+ +### `` element is used to create a dropdown list within a form. It allows the user to select one or more options from a list of predefined options. + +Here's an example of a ` + + + + +``` + +### ` +``` + +In the example above, the `rows` and `cols` attributes specify the number of rows and columns of the textarea, respectively. + +## Form Validation + +Form validation is an essential part of creating forms to ensure that the user input is correct and complete. HTML provides built-in form validation features that can be used to validate user input without writing custom JavaScript code. + +Here are some common form validation attributes that can be added to form elements: + +- **required:** Specifies that the input field is required and must be filled out. +- **minlength:** Specifies the minimum length of the input field. +- **maxlength:** Specifies the maximum length of the input field. +- **pattern:** Specifies a regular expression pattern that the input field must match. +- **type:** Specifies the type of input field (e.g., email, number, date). +- **min:** Specifies the minimum value for number and date input fields. + +Here's an example of a form with validation attributes: + +```html title="index.html" + + + +

+ + +

+ + +``` + +In the example above: + +- The `required` attribute specifies that both the username and password fields are required. +- The `minlength="3"` attribute specifies that the username must be at least 3 characters long. +- The `minlength="6"` attribute specifies that the password must be at least 6 characters long. + +When the user submits the form, the browser will automatically validate the input fields based on the specified attributes. If the input is invalid, the browser will display an error message to the user. + + +
+ +:::tip Key Components +1. **`
` Tag** + - Defines the start and end of a form. + - Attributes: + - `action`: URL where form data is sent. + - `method`: HTTP method (e.g., `GET` or `POST`). + +2. **Input Elements** + - **Text Input (``)**: Single-line text input. + - **Email Input (``)**: Input validation for email addresses. + - **Textarea (` + + +
+``` + +By using the `form` attribute and other form attributes, you can create interactive and functional forms in HTML that collect user input and submit it to the server for processing. + + +
+ +## Summary Table of Attributes + +| Attribute | Description | Example Value | +|-----------------|------------------------------------------------------------|---------------------------| +| `action` | URL to submit form data to | `/submit-data` | +| `method` | HTTP method (`GET`, `POST`) | `post` | +| `target` | Specifies where to display the response | `_blank`, `_self` | +| `autocomplete` | Enables/disables browser autofill | `on`, `off` | +| `novalidate` | Disables browser validation | `novalidate` (boolean) | +| `enctype` | Encoding type for form data | `multipart/form-data` | +| `name` | Unique identifier for the form | `registrationForm` | +| `accept-charset`| Character encodings supported | `UTF-8` | + +## Why Use the `form` Attribute? + +Using the `form` attribute provides several benefits: + +- **Improved Organization**: It helps in organizing form elements, especially when dealing with complex forms. +- **Better Accessibility**: Associating form controls with their respective forms enhances accessibility for users relying on assistive technologies. +- **Enhanced User Experience**: Properly structured forms lead to a better user experience, making it easier for users to fill out and submit forms. +- **Flexibility**: The `form` attribute allows form controls to be placed outside the actual `
` element, providing more flexibility in layout design. +- **Separation of Concerns**: It allows developers to separate form controls from the form structure, making it easier to manage and maintain code. +- **Consistent Behavior**: Ensures that all associated form controls are submitted together, maintaining data integrity. + + +
+ +By understanding and utilizing the `form` attribute along with other form attributes, you can create well-structured, accessible, and user-friendly forms in HTML. + +## Additional Resources + +- [MDN Web Docs: ``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) +- [W3Schools: HTML Forms](https://www.w3schools.com/html/html_forms.asp) +- [HTML Living Standard: Forms](https://html.spec.whatwg.org/multipage/forms.html) +- [CSS-Tricks: A Complete Guide to Forms](https://css-tricks.com/complete-guide-to-forms/) +- [WebAIM: Creating Accessible Forms](https://webaim.org/techniques/forms/) \ No newline at end of file diff --git a/docs/html/forms/form-input-element.mdx b/docs/html/forms/form-input-element.mdx new file mode 100644 index 0000000..16ba8e2 --- /dev/null +++ b/docs/html/forms/form-input-element.mdx @@ -0,0 +1,356 @@ +--- +id: form-input-element +title: HTML Form Input Element +sidebar_label: Form Input Element +sidebar_position: 2 +tags: [html input element, html form input element, html input types, html input text, html input password, html input email] +description: "Learn about the HTML element and its various types such as text, password, email, etc., used to create input fields within a form." +keywords: [html input element, html form input element, html input types, html input text, html input password, html input email] +hide_table_of_contents: true +--- + +The `` element is used to create input fields within a form. It can be used to create text fields, checkboxes, radio buttons, buttons, and more. The `type` attribute of the `` element specifies the type of input field to be created. + + +
+ +## Common Input Types + +Here are some common input types: + +1. **text:** Creates a single-line text input field. + + For example: + ```html + + ``` + +2. **password:** Creates a password input field where the entered text is masked. + + For example: + ```html + + ``` + +3. **email:** Creates an email input field that validates the input as an email address. + + For example: + ```html + + ``` + +4. **checkbox:** Creates a checkbox input field that allows the user to select multiple options. + + For example: + ```html + Coding + Design + ``` + +5. **radio:** Creates a radio button input field that allows the user to select a single option from a list. + + For example: + ```html + Computer Science + Engineering + ``` + +6. **submit:** Creates a submit button that submits the form data to the server. + + For example: + ```html + + ``` + +7. **button:** Creates a button that can be used to trigger JavaScript functions. + + For example: + ```html + + ``` + + +
+ +## Additional Input Types + +In addition to the common input types mentioned above, there are several other input types that can be used to create different types of input fields. Here are some additional input types: + +1. **number:** Creates a numeric input field that allows the user to enter numbers. + + For example: + ```html + + ``` + +2. **date:** Creates a date input field that allows the user to select a date from a calendar. + + For example: + ```html + + ``` + +3. **file:** Creates a file input field that allows the user to upload files. + + For example: + ```html + + ``` + +4. **color:** Creates a color input field that allows the user to select a color from a color picker. + + For example: + ```html + + ``` + +5. **range:** Creates a range input field that allows the user to select a value from a range. + + For example: + ```html + + ``` + +6. **time:** Creates a time input field that allows the user to select a time. + + For example: + ```html + + ``` + +7. **url:** Creates a URL input field that validates the input as a URL. + + For example: + ```html + + ``` + +8. **search:** Creates a search input field that allows the user to enter search queries. + + For example: + ```html + + ``` + +9. **tel:** Creates a telephone input field that validates the input as a phone number. + + For example: + ```html + + ``` + +10. **hidden:** Creates a hidden input field that is not displayed on the form but is submitted with the form data. + + For example: + ```html + + ``` + +These input types provide a wide range of options for creating different types of input fields within a form. + + +
+ +## Challenge Yourself + +### Problem description + +Create a form with the following input fields: + +1. A text input field for the user's name. +2. An email input field for the user's email address. +3. A password input field for the user's password. +4. A checkbox input field for the user's interests (e.g., coding, design). +5. A radio button input field for the user's major (e.g., Computer Science, Engineering). +6. A submit button to submit the form. +7. A button to clear the form. + +### Criteria + +1. Use appropriate input types for each input field. +2. Include labels for each input field. +3. Use the `name` attribute to identify each input field. +4. Use the `value` attribute for checkboxes and radio buttons. +5. Use the `required` attribute for required input fields. +6. Use the `form` attribute to associate the input fields with the form. +7. Use the `onclick` event to clear the form when the "Clear" button is clicked. +8. Use the `onsubmit` event to validate the form before submission. +9. Use CSS to style the form elements. + +### Solution + +You can try to create the form with the specified input fields and functionality. Here's an example solution to get you started: + +```html title="index.html" showLineNumbers + + + + + + + Form Challenge + + + +
+

Challenge Yourself

+ + + + + + + + + + + + + + +
+ Select Your Interests + + + +
+ + +
+ Select Your Major + + + +
+ + +
+ + +
+ +
+ + + + +``` + +This example demonstrates how you can create a form with various input fields and functionality using HTML and CSS. You can further enhance the form by adding more styling, validation, or custom functionality based on your requirements. + +## Conclusion + +HTML provides a wide range of input types that you can use to create different types of input fields within a form. By understanding the various input types and their attributes, you can create interactive and user-friendly forms for collecting user input on your website. \ No newline at end of file diff --git a/docs/html/how-html-works.mdx b/docs/html/how-html-works.mdx new file mode 100644 index 0000000..6e37895 --- /dev/null +++ b/docs/html/how-html-works.mdx @@ -0,0 +1,245 @@ +--- +id: how-html-works +title: How HTML works with web browsers +sidebar_label: How HTML works +sidebar_position: 2 +tags: [html, web-development, front-end-development, web-design, web-browsers, web-technology, web-pages] +description: "In this tutorial, you will learn about How HTML works with web browsers and how web browsers render HTML content." +hide_table_of_contents: true +--- + +> *We have already learned HTML in the previous tutorial. In this tutorial, we will learn about how HTML works with web browsers and how web browsers render HTML content.* + +HTML, which stands for **HyperText Markup Language**, serves as the backbone of the World Wide Web. It is the standard language used to create web pages, providing the structure and content that browsers render for users to interact with. Understanding how HTML works with web browsers is fundamental for anyone diving into web development. + + +
+ +## HTML: The Building Blocks of Web Pages + +HTML is a markup language that uses tags to define the structure and content of web pages. These tags are enclosed in angle brackets (`<` and `>`), and they tell the browser how to display the content. For example, the following HTML code snippet creates a simple web page with a heading and a paragraph: + + + + + ```html title="index.html" + + + + My First Web Page + + +

Hello, World!

+

This is my first web page.

+ + + ``` + + + + +

Hello, World!

+

This is my first web page.

+ + + + ![alt text](./assets/image-1.png) + + + +In this example, the `

` tag creates a heading, and the `

` tag creates a paragraph. The browser interprets these tags and displays the content accordingly. HTML tags can be nested within each other to create more complex structures, such as lists, tables, forms, and more. + + +
+ +## How Web Browsers Render HTML + +When a user requests a web page by entering a URL in the browser's address bar or clicking a link, the browser sends a request to the web server hosting the page. The server responds by sending the HTML content of the page back to the browser. The browser then parses the HTML code and renders the page on the user's screen. + +**The rendering process involves several steps:** + +1. **Parsing**: The browser parses the HTML document from top to bottom, identifying and interpreting each element and its attributes. It builds a Document Object Model (DOM) tree, which represents the structure of the web page as a hierarchical collection of nodes. Each node corresponds to an HTML element, such as a heading, paragraph, image, or link. + +2. **Rendering**: The browser uses the DOM tree to render the web page on the screen. It determines the layout of the page, including the position and size of each element, based on the **CSS** styles applied to the elements. The browser also calculates the visibility of each element, taking into account factors such as z-index, opacity, and overflow. + + :::info + **CSS (Cascading Style Sheets)** is a stylesheet language used to control the presentation of HTML elements on a web page. CSS allows developers to define styles such as colors, fonts, margins, padding, and layout properties to create visually appealing and responsive designs. + + ::: + +3. **Painting**: The browser paints the pixels on the screen according to the layout determined in the rendering step. It combines the content, styles, and layout to create the final visual representation of the web page. + +4. **Reflow and Repaint**: If the user interacts with the page, such as scrolling or resizing the window, the browser may need to reflow and repaint parts of the page to reflect the changes. Reflow involves recalculating the layout of the affected elements, while repaint involves updating the affected pixels on the screen. + +By understanding how web browsers render HTML content, web developers can optimize their code and design to create fast and responsive web pages. Techniques such as minimizing the use of inline styles, reducing the number of DOM elements, and optimizing images can help improve the performance of web pages and provide a better user experience. + + +
+ +## Handling Content and Resources in HTML + +In addition to rendering HTML content, web browsers handle various resources associated with a web page, including: + +- **CSS Stylesheets**: Browsers download and apply CSS stylesheets to control the presentation of HTML elements. Stylesheets can be linked externally using the `` tag or embedded within the HTML document using the ` + + +

+

Welcome to My Website

+
+ + +``` + + +By replacing the deprecated `
` element with CSS, you have resolved the deprecated elements error. + + +
+ +## 7. Incorrect Self-Closing Tags + +### Problem + +Incorrect self-closing tags are another common HTML error. Self-closing tags should end with a forward slash (`/`) before the closing angle bracket (`>`). For example, consider the following HTML snippet with incorrect self-closing tags: + +```html title="index.html" + + + + My Website + + + +
+ + +``` + +In the above example, the `` and `
` tags are not properly self-closed with a forward slash (`/`). + +### Solution + +To fix this error, you need to properly self-close tags with a forward slash (`/`). Here is the corrected version of the above example with correct self-closing tags: + +```html title="index.html" + + + + My Website + + + +
+ + +``` + +By properly self-closing tags, you have resolved the incorrect self-closing tags error. + + +
+ +## 8. Incorrect Case in Tags and Attributes + +### Problem + +Incorrect case in tags and attributes is another common HTML error. HTML is case-insensitive, but it is recommended to use lowercase for tags and attributes for consistency and readability. For example, consider the following HTML snippet with incorrect case in tags and attributes: + +```html title="index.html" + + + + My Website + + + A beautiful landscape + + +``` + +In the above example, the tags and attributes are written in uppercase, which can make the code harder to read and maintain. + +### Solution + +To fix this error, you need to use lowercase for tags and attributes. Here is the corrected version of the above example with correct case in tags and attributes: + +```html title="index.html" + + + + My Website + + + A beautiful landscape + + +``` + +By using lowercase for tags and attributes, you have resolved the incorrect case error. + + +
+ +## 9. Missing Closing Tags + +### Problem + +Missing closing tags is another common HTML error. All opening tags should have a corresponding closing tag to create a well-structured HTML document. For example, consider the following HTML snippet with missing closing tags: + +```html title="index.html" + + + + My Website + </head> + <body> + <h1>Welcome to My Website + </body> +</html> +``` + +In the above example, the `<title>`, `<head>`, and `<h1>` tags are missing their corresponding closing tags. + +### Solution + +To fix this error, you need to add the missing closing tags to the HTML document. Here is the corrected version of the above example with missing closing tags: + +```html title="index.html" +<!DOCTYPE html> +<html> + <head> + <title>My Website + + +

Welcome to My Website

+ + +``` + +By adding the missing closing tags, you have resolved the missing closing tags error. + + +
+ +## 10. Incorrect Comment Syntax + +### Problem + +Incorrect comment syntax is another common HTML error. Comments in HTML should be enclosed in `` to be valid. For example, consider the following HTML snippet with incorrect comment syntax: + +```html title="index.html" + + + + My Website + + + + + +``` + +In the above example, the comment is now properly enclosed in ``. + +### Solution + +To fix this error, you need to enclose comments in ``. Here is the corrected version of the above example with correct comment syntax: + +```html title="index.html" + + + + My Website + + + + + +``` + +By enclosing comments in ``, you have resolved the incorrect comment syntax error. + + +
+ +## 11. Duplicate `id` Attributes + +### Problem + +Using duplicate `id` attributes is another common HTML error. The `id` attribute should be unique within an HTML document and should not be repeated. For example, consider the following HTML snippet with duplicate `id` attributes: + +```html title="index.html" + + + + My Website + + +

Welcome to My Website

+

Lorem ipsum dolor sit amet

+ + +``` + +In the above example, both the `

` and `

` tags have the same `id` attribute value, which is not allowed. + +### Solution + +To fix this error, you need to ensure that `id` attributes are unique within the HTML document. Here is the corrected version of the above example with unique `id` attributes: + +```html title="index.html" + + + + My Website + + +

Welcome to My Website

+

Lorem ipsum dolor sit amet

+ + +``` + +By using unique `id` attributes, you have resolved the duplicate `id` attributes error. + + +
+ +## 12. Incorrectly Written Form Inputs + +### Problem + +Incorrectly written form inputs are another common HTML error. Form inputs should have a `name` attribute to identify the input when the form is submitted. For example, consider the following HTML snippet with incorrectly written form inputs: + +```html title="index.html" + + + + My Form + + +
+ + +
+ + +``` + +In the above example, the form inputs are missing the `name` attribute, which is required to identify the input when the form is submitted. + +### Solution + +To fix this error, you need to add the `name` attribute to form inputs. Here is the corrected version of the above example with the `name` attribute: + +```html title="index.html" + + + + My Form + + +
+ + +
+ + +``` + +By adding the `name` attribute to form inputs, you have resolved the incorrectly written form inputs error. + + +
+ +## 13. Forgetting Meta Tags + +### Problem + +Forgetting meta tags is another common HTML error. Meta tags provide metadata about the HTML document, such as the character encoding, viewport settings, and description. For example, consider the following HTML snippet without meta tags: + +```html title="index.html" + + + + My Website + + +

Welcome to My Website

+ + +``` + +In the above example, meta tags such as `` and `` are missing. + +### Solution + +To fix this error, you need to add meta tags to the HTML document. Here is the corrected version of the above example with meta tags: + +```html title="index.html" + + + + + + My Website + + +

Welcome to My Website

+ + +``` + +By adding meta tags, you have resolved the forgetting meta tags error. + + +
+ +## 14. Overlapping CSS and Inline Styles + +### Problem + +Overlapping CSS and inline styles is another common HTML error. Inline styles should be avoided in favor of external CSS files for better maintainability and separation of concerns. For example, consider the following HTML snippet with overlapping CSS and inline styles: + +```html title="index.html" + + + + My Website + + + +

Welcome to My Website

+ + +``` + +In the above example, the `

` tag has an inline style that overrides the CSS style defined in the ` + + +

Welcome to My Website

+ + +``` + + + + +By using external CSS files or internal CSS, you can avoid overlapping CSS and inline styles. + + +
+ +## 15. Not Testing in Multiple Browsers + +### Problem + +Not testing in multiple browsers is another common HTML error. Different browsers may render HTML and CSS differently, leading to compatibility issues. For example, a web page that looks fine in Google Chrome may have layout issues in Internet Explorer. + +### Solution + +To fix this error, you need to test your web pages in multiple browsers to ensure cross-browser compatibility. You can use tools like [BrowserStack](https://www.browserstack.com/) or [CrossBrowserTesting](https://www.smartbear.com/product/crossbrowsertesting/overview/) to test your web pages in various browsers and devices. + +By testing in multiple browsers, you can identify and fix compatibility issues before deploying your web pages to production. + + +
+ +## 16. Semantic HTML Issues + +### Problem + +Semantic HTML issues are another common HTML error. Semantic HTML elements should be used to provide meaning and structure to the content of the web page. For example, using `
` elements for headings instead of `

`, `

`, etc., can lead to semantic HTML issues. + +For example, consider the following HTML snippet with non-semantic HTML elements: + +```html title="index.html" + + + + My Website + + +
Welcome to My Website
+
About Us
+
Lorem ipsum dolor sit amet
+
© 2022 My Website
+ + +``` + +### Solution + +To fix this error, you need to use semantic HTML elements to structure the content of your web page. Here is an example of using semantic HTML elements for headings: + +```html title="index.html" + + + + My Website + + +
+

Welcome to My Website

+
+
+
+

About Us

+

Lorem ipsum dolor sit amet

+
+
+
+

© 2022 My Website

+
+ + +``` + +By using semantic HTML elements, you can improve the structure and accessibility of your web pages. + + +
+ +## 17. JavaScript Integration Mistakes + +### Problem + +JavaScript integration mistakes are another common HTML error. Integrating JavaScript code directly into HTML documents can lead to maintenance issues and performance problems. For example, consider the following HTML snippet with inline JavaScript code: + +```html title="index.html" + + + + My Website + + +

Welcome to My Website

+ + + +``` + +In the above example, the JavaScript code is embedded directly into the HTML document, which can make the code harder to maintain and debug. + +### Solution + +To fix this error, you need to separate JavaScript code from HTML documents and use external JavaScript files. Here is an example of using an external JavaScript file: + +```html title="index.html" + + + + My Website + + +

Welcome to My Website

+ + + +``` + +```javascript title="script.js" +alert('Hello, World!'); +``` + +By using external JavaScript files, you can improve the maintainability and performance of your web pages. + +## 18. Accessibility Issues + +### Problem + +Accessibility issues are another common HTML error. Web pages should be designed to be accessible to users with disabilities, such as screen reader users. For example, using non-descriptive link text like "Click Here" can be a barrier to users who rely on screen readers. + +### Solution + +To fix this error, you need to design your web pages with accessibility in mind. Here are some tips to improve accessibility: + +- Use descriptive link text that provides context about the link destination. +- Add alternative text to images using the `alt` attribute. +- Use semantic HTML elements to structure the content of your web pages. +- Ensure that form inputs have labels associated with them. +- Test your web pages with screen readers to identify accessibility issues. +- Follow the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/) to make your web pages accessible to all users. + +By addressing accessibility issues, you can create web pages that are inclusive and usable by everyone. + + +This tutorial has covered some of the most common HTML errors and how to fix them. By understanding and addressing these errors, you can create valid and well-structured HTML documents that are accessible to all users. + + +## Conclusion + +By understanding and fixing these common HTML errors, you can create valid and well-structured HTML documents. It is important to validate your HTML code regularly using tools like the [W3C Markup Validation Service](https://validator.w3.org/) to ensure that your web pages are error-free and accessible to all users. \ No newline at end of file diff --git a/docs/html/html-validation-and-debugging/importance-of-validating-html-code.mdx b/docs/html/html-validation-and-debugging/importance-of-validating-html-code.mdx new file mode 100644 index 0000000..b7f18d1 --- /dev/null +++ b/docs/html/html-validation-and-debugging/importance-of-validating-html-code.mdx @@ -0,0 +1,62 @@ +--- +id: importance-of-validating-html-code +title: Importance of Validating HTML Code +sidebar_label: Importance of Validating HTML Code +sidebar_position: 1 +tags: [html, web-development, validation, debugging] +description: "In this tutorial, you will learn about the importance of validating HTML code and how to use HTML validators to check for errors and ensure your code is well-formed and standards-compliant." +keywords: [html validation, html validation importance, html validation benefits, html validation tools, html validation online, html validation w3c, html validation checker, html validation error, html validation code, html validation best practices, html validation and debugging] +hide_table_of_contents: true +--- + +In this tutorial, you will learn about the importance of validating HTML code and how to use HTML validators to check for errors and ensure your code is well-formed and standards-compliant. + + +
+ +## What is HTML Validation? + +HTML validation is the process of checking your HTML code to ensure that it follows the official rules and guidelines set by the World Wide Web Consortium (W3C). The W3C is the main international standards organization for the World Wide Web and is responsible for developing and maintaining the standards for HTML. + +Validating your HTML code is important because it helps ensure that your web pages are displayed correctly across different browsers and devices. It also helps improve the accessibility, usability, and search engine optimization (SEO) of your website. + +## Importance of Validating HTML Code + +Here are some of the key reasons why validating your HTML code is important: + +1. **Cross-Browser Compatibility**: Valid HTML code is more likely to be displayed consistently across different web browsers. Browsers may interpret invalid code differently, leading to rendering issues and inconsistencies. +2. **Improved Accessibility**: Valid HTML code helps improve the accessibility of your website for users with disabilities. Screen readers and other assistive technologies rely on well-structured HTML to provide an optimal user experience. +3. **Better SEO**: Search engines like Google prefer well-structured and valid HTML code. Valid HTML can help search engine crawlers understand the content and structure of your web pages, which can improve your search engine rankings. +4. **Faster Page Load Times**: Valid HTML code is often cleaner and more efficient, which can result in faster page load times. Well-structured HTML can reduce unnecessary code and improve the performance of your website. +5. **Easier Debugging**: Valid HTML code is easier to debug and maintain. HTML validators can help you identify and fix errors in your code, making it easier to troubleshoot issues and ensure your website functions correctly. +6. **Future Compatibility**: Valid HTML code is more likely to be compatible with future web technologies and standards. By following the latest HTML specifications, you can ensure that your website remains up-to-date and future-proof. +7. **Professionalism**: Validating your HTML code demonstrates a commitment to quality and professionalism. It shows that you care about the user experience and are dedicated to creating high-quality web content. +8. **Learning Opportunity**: Validating your HTML code can help you learn more about web standards and best practices. It can improve your coding skills and help you stay informed about the latest developments in web design and development. +9. **Legal Compliance**: In some cases, validating your HTML code may be required to comply with legal standards and regulations, such as web accessibility guidelines. +10. **Client Requirements**: Clients or employers may require you to deliver valid HTML code as part of a web development project. Validating your code can help you meet their requirements and ensure client satisfaction. +11. **Community Support**: Validating your HTML code can help you become part of the web development community and contribute to the open web. By following web standards and best practices, you can help create a more accessible and inclusive web for everyone. +12. **Error Prevention**: Validating your HTML code can help prevent common errors and mistakes that can impact the functionality and performance of your website. By validating your code regularly, you can catch issues early and avoid potential problems down the line. +13. **Code Consistency**: Validating your HTML code can help maintain consistency and uniformity in your coding style. It can help you adhere to coding standards and best practices, making it easier to collaborate with other developers and work on large-scale projects. +14. **Quality Assurance**: Validating your HTML code is an essential part of quality assurance (QA) testing. It ensures that your web pages meet the required standards and specifications, helping you deliver a high-quality product to your users. +15. **Educational Value**: Validating your HTML code can be a valuable learning experience. It can help you understand the principles of web development and improve your coding skills, making you a better developer in the long run. +16. **User Experience**: Valid HTML code can enhance the user experience of your website. Well-structured HTML can make your web pages more readable, accessible, and user-friendly, leading to higher user engagement and satisfaction. +17. **Performance Optimization**: Valid HTML code can help optimize the performance of your website. By following best practices and standards, you can reduce unnecessary code, improve loading times, and enhance the overall performance of your web pages. +18. **Security**: Validating your HTML code can help improve the security of your website. Well-formed HTML can reduce the risk of security vulnerabilities and protect your website from potential threats and attacks. + +## How to Validate HTML Code + +There are several tools and services available for validating HTML code. Here are some popular options: + +1. **W3C Markup Validation Service**: The [W3C Markup Validation Service](https://validator.w3.org/) is an official tool provided by the W3C for validating HTML code. You can enter the URL of your web page or upload an HTML file to check for errors and warnings. +2. **W3C Nu Html Checker**: The [W3C Nu Html Checker](https://validator.w3.org/nu/) is another official tool provided by the W3C for validating HTML5 code. It offers more advanced validation features and supports the latest HTML specifications. +3. **Online Validators**: There are many online HTML validators available that allow you to validate your HTML code directly in your web browser. Some popular online validators include [Validator.nu](https://html5.validator.nu/), [HTML Validator](https://htmlvalidator.com/), and [HTML Tidy](https://infohound.net/tidy/). +4. **Integrated Development Environments (IDEs)**: Many IDEs and code editors include built-in HTML validators that can check your code for errors as you type. Examples include Visual Studio Code, Sublime Text, and Atom. +5. **Browser Extensions**: There are browser extensions available that can validate HTML code directly in your web browser. Extensions like [Web Developer](#) and [HTML Validator](#) can help you identify and fix HTML errors on the fly. +6. **Command-Line Tools**: If you prefer working from the command line, there are command-line tools available for validating HTML code. Examples include [HTML Tidy](http://www.html-tidy.org/) and [Nu Html Checker](https://www.npmjs.com/package/html-validate). +7. **Automated Testing Tools**: You can also use automated testing tools like [Selenium](https://www.selenium.dev/) and [Cypress](https://www.cypress.io/) to validate HTML code as part of your testing process. These tools can help you catch HTML errors and issues early in the development cycle. + +By using these tools and services, you can ensure that your HTML code is well-formed, standards-compliant, and error-free. Regularly validating your HTML code can help you maintain the quality and integrity of your website and provide a better user experience for your visitors. + +## Conclusion + +Validating your HTML code is an essential part of web development that can help you create high-quality, standards-compliant websites. By following the best practices and guidelines set by the W3C, you can ensure that your web pages are displayed correctly, accessible to all users, and optimized for search engines. \ No newline at end of file diff --git a/docs/html/html-validation-and-debugging/using-w3c-validator.mdx b/docs/html/html-validation-and-debugging/using-w3c-validator.mdx new file mode 100644 index 0000000..ba053b4 --- /dev/null +++ b/docs/html/html-validation-and-debugging/using-w3c-validator.mdx @@ -0,0 +1,50 @@ +--- +id: using-w3c-validator +title: Using the W3C HTML Validator +sidebar_label: Using the W3C Validator +sidebar_position: 2 +tags: [html, web-development, validation, debugging] +description: "In this tutorial, you will learn how to use the W3C HTML Validator to check your HTML code for errors and ensure it is well-formed and standards-compliant." +keywords: [w3c html validator, html validation, html debugging, html errors, html standards, html compliance] +hide_table_of_contents: true +--- + +In this tutorial, you will learn how to use the W3C HTML Validator to check your HTML code for errors and ensure it is well-formed and standards-compliant. + + +
+ +## What is the W3C HTML Validator? + +The W3C HTML Validator is a free online tool provided by the World Wide Web Consortium (W3C) that allows you to check your HTML code for errors and ensure it is well-formed and standards-compliant. The W3C is the international standards organization responsible for developing and maintaining the standards for the World Wide Web. + +The HTML Validator checks your HTML code against the official HTML specifications defined by the W3C, such as HTML5, XHTML, and others. It helps you identify and fix errors in your HTML code, ensuring that your web pages are correctly rendered by web browsers and accessible to all users. + +## How to Use the W3C HTML Validator + +To use the W3C HTML Validator, follow these steps: + +1. Open your web browser and go to the [W3C HTML Validator website](https://validator.w3.org/). +2. Copy and paste the HTML code you want to validate into the text area provided on the validator website. +3. Click the "Check" button to start the validation process. +4. The validator will analyze your HTML code and display a report with any errors, warnings, or information messages found. +5. Review the validation report to identify and fix any issues in your HTML code. +6. Make the necessary corrections to your HTML code and revalidate it using the W3C HTML Validator. +7. Repeat the process until your HTML code is error-free and standards-compliant. + +## Tips for Using the W3C HTML Validator + +Here are some tips to help you get the most out of the W3C HTML Validator: + +- **Validate Your Entire Web Page**: When validating your HTML code, make sure to include the entire web page, including the ``, ``, and `` elements, as well as any external CSS and JavaScript files. +- **Check for Errors Regularly**: It's a good practice to validate your HTML code regularly, especially when making changes to your website or adding new content. This helps ensure that your web pages remain standards-compliant and accessible. +- **Fix Errors Promptly**: When the validator identifies errors in your HTML code, address them promptly to prevent rendering issues and improve the user experience on your website. +- **Use the W3C CSS Validator**: In addition to the HTML Validator, you can also use the [W3C CSS Validator](https://jigsaw.w3.org/css-validator/) to check your CSS code for errors and ensure it is standards-compliant. +- **Learn from the Validation Reports**: Review the validation reports generated by the W3C HTML Validator to understand the errors and warnings found in your HTML code. This can help you learn best practices and improve your coding skills. +- **Share the Validation Results**: If you are working on a team or collaborating with others on a web project, share the validation results with your colleagues to ensure consistency and quality in the codebase. + +By following these tips and using the W3C HTML Validator, you can ensure that your HTML code is error-free, standards-compliant, and accessible to all users. + +## Conclusion + +The W3C HTML Validator is a valuable tool for web developers and designers to check their HTML code for errors and ensure it is well-formed and standards-compliant. By using the validator regularly and following best practices, you can create high-quality web pages that are accessible to all users and render correctly in web browsers. \ No newline at end of file diff --git a/docs/html/html5-apis/_category_.json b/docs/html/html5-apis/_category_.json new file mode 100644 index 0000000..0bd2e71 --- /dev/null +++ b/docs/html/html5-apis/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "HTML5 APIs", + "position": 13, + "link": { + "type": "generated-index", + "description": "In this section, you will learn about the new HTML5 APIs that are available to you in the browser. These APIs allow you to do things like access the user's camera, microphone, and location, as well as store data on the user's device." + } + } \ No newline at end of file diff --git a/docs/html/html5-apis/_scripts/CanvasExample.js b/docs/html/html5-apis/_scripts/CanvasExample.js new file mode 100644 index 0000000..d40817c --- /dev/null +++ b/docs/html/html5-apis/_scripts/CanvasExample.js @@ -0,0 +1,26 @@ +import React, { useEffect, useRef } from "react"; + +const CanvasExample = () => { + const canvasRef = useRef(null); + + useEffect(() => { + const canvas = canvasRef.current; + const ctx = canvas.getContext("2d"); + ctx.fillStyle = "red"; + ctx.fillRect(10, 10, 150, 80); + }, []); + + return ( +
+

Canvas Example

+ +
+ ); +}; + +export default CanvasExample; diff --git a/docs/html/html5-apis/_scripts/GeolocationExample.js b/docs/html/html5-apis/_scripts/GeolocationExample.js new file mode 100644 index 0000000..7c92c8f --- /dev/null +++ b/docs/html/html5-apis/_scripts/GeolocationExample.js @@ -0,0 +1,43 @@ +import React, { useState } from "react"; + +const GeolocationExample = () => { + const [location, setLocation] = useState(null); + const [error, setError] = useState(""); + + const getLocation = () => { + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition( + (position) => { + const { latitude, longitude } = position.coords; + setLocation({ latitude, longitude }); + setError(""); // Clear any previous errors + }, + () => { + setError("Unable to retrieve location."); + } + ); + } else { + setError("Geolocation is not supported by this browser."); + } + }; + + return ( +
+

Geolocation API Example

+

Click the button to get your current location.

+ + +
+ + {location && ( +

+ Latitude: {location.latitude}
+ Longitude: {location.longitude} +

+ )} + {error &&

{error}

} +
+ ); +}; + +export default GeolocationExample; diff --git a/docs/html/html5-apis/_scripts/LocalStorageExample.js b/docs/html/html5-apis/_scripts/LocalStorageExample.js new file mode 100644 index 0000000..2b30661 --- /dev/null +++ b/docs/html/html5-apis/_scripts/LocalStorageExample.js @@ -0,0 +1,35 @@ +import React, { useState, useEffect } from "react"; + +const LocalStorageExample = () => { + const [name, setName] = useState(""); + const [message, setMessage] = useState(""); + + // Load saved name from local storage on component mount + useEffect(() => { + const savedName = localStorage.getItem("name"); + if (savedName) { + setMessage(`Welcome back, ${savedName}!`); + } + }, []); + + const saveName = () => { + localStorage.setItem("name", name); + setMessage("Name saved!"); + }; + + return ( +
+

Local Storage Example

+

Enter your name:

+ setName(e.target.value)} + /> + +

{message}

+
+ ); +}; + +export default LocalStorageExample; diff --git a/docs/html/html5-apis/_scripts/SVGExample.js b/docs/html/html5-apis/_scripts/SVGExample.js new file mode 100644 index 0000000..2307616 --- /dev/null +++ b/docs/html/html5-apis/_scripts/SVGExample.js @@ -0,0 +1,14 @@ +import React from "react"; + +const SVGExample = () => { + return ( +
+

SVG Example

+ + + +
+ ); +}; + +export default SVGExample; diff --git a/docs/html/html5-apis/_scripts/SessionStorageExample.js b/docs/html/html5-apis/_scripts/SessionStorageExample.js new file mode 100644 index 0000000..3468097 --- /dev/null +++ b/docs/html/html5-apis/_scripts/SessionStorageExample.js @@ -0,0 +1,35 @@ +import React, { useState, useEffect } from "react"; + +const SessionStorageExample = () => { + const [email, setEmail] = useState(""); + const [message, setMessage] = useState(""); + + // Load saved email from session storage on component mount + useEffect(() => { + const savedEmail = sessionStorage.getItem("email"); + if (savedEmail) { + setMessage(`Your email is ${savedEmail}`); + } + }, []); + + const saveEmail = () => { + sessionStorage.setItem("email", email); + setMessage("Email saved!"); + }; + + return ( +
+

Session Storage Example

+

Enter your email:

+ setEmail(e.target.value)} + /> + +

{message}

+
+ ); +}; + +export default SessionStorageExample; diff --git a/docs/html/html5-apis/canvas-and-svg-graphics.mdx b/docs/html/html5-apis/canvas-and-svg-graphics.mdx new file mode 100644 index 0000000..3bcaa08 --- /dev/null +++ b/docs/html/html5-apis/canvas-and-svg-graphics.mdx @@ -0,0 +1,95 @@ +--- +id: canvas-and-svg-graphics +title: Canvas and SVG Graphics in HTML +sidebar_label: Canvas and SVG Graphics +sidebar_position: 3 +tags: [html, web-development, canvas, svg, graphics] +description: "In this tutorial, you will learn how to use the Canvas and SVG graphics APIs in HTML to draw shapes, images, and animations on a web page." +keywords: + [ + html canvas, + html svg, + canvas in html, + svg in html, + html5 canvas, + html5 svg, + graphics in html, + ] +hide_table_of_contents: true +--- + +import SVGExample from './_scripts/SVGExample'; +import CanvasExample from './_scripts/CanvasExample'; + +In `HTML`, you can use the Canvas and SVG graphics APIs to draw shapes, images, and animations on a web page. The Canvas and SVG graphics APIs provide a powerful way to create interactive graphics and visualizations in the browser. + +In this tutorial, you will learn how to use the Canvas and SVG graphics APIs in HTML to draw shapes, images, and animations on a web page. + + +
+ +## Canvas Graphics + +The Canvas API in HTML provides a way to draw graphics on a web page using JavaScript. The Canvas API allows you to draw shapes, images, and text on a canvas element. + +Here's an example of how to use the Canvas API to draw a rectangle on a canvas element: + +```html title="index.html" + + + + + + Canvas Example + + +

Canvas Example

+ + + + +``` + + + + + +In the above example, we create a canvas element with an id of `myCanvas` and a width of `200` pixels and a height of `100` pixels. We then get the canvas context (`2d`) and draw a red rectangle on the canvas using the `fillRect` method. + +## SVG Graphics + +SVG (Scalable Vector Graphics) is an XML-based language for describing two-dimensional vector graphics. SVG graphics can be created and manipulated using HTML and CSS. + +Here's an example of how to use SVG graphics in HTML: + +```html title="index.html" + + + + + + SVG Example + + +

SVG Example

+ + + + + +``` + + + + + +In the above example, we create an SVG element with a width of `200` pixels and a height of `100` pixels. We then draw a blue rectangle on the SVG element using the `rect` element. + +## Conclusion + +In this tutorial, you learned how to use the Canvas and SVG graphics APIs in HTML to draw shapes, images, and animations on a web page. The Canvas and SVG graphics APIs provide a powerful way to create interactive graphics and visualizations in the browser. Experiment with different shapes, colors, and animations to create stunning visual effects on your web pages. \ No newline at end of file diff --git a/docs/html/html5-apis/geolocation-api.mdx b/docs/html/html5-apis/geolocation-api.mdx new file mode 100644 index 0000000..7bd8500 --- /dev/null +++ b/docs/html/html5-apis/geolocation-api.mdx @@ -0,0 +1,147 @@ +--- +id: geolocation-api +title: Geolocation API in HTML +sidebar_label: Geolocation API +sidebar_position: 1 +tags: [html, web-development, geolocation-api] +description: "In this tutorial, you will learn how to use the Geolocation API to get the user's current location in a web page." +keywords: + [ + html geolocation api, + geolocation api, + html geolocation, + geolocation api in html, + html5 geolocation api, + ] +hide_table_of_contents: true +--- + +import GeolocationExample from './\_scripts/GeolocationExample'; + +In `HTML`, you can use the Geolocation API to get the user's current location. The Geolocation API provides a simple method to get the user's current location (latitude and longitude) using JavaScript. + +In this tutorial, you will learn how to use the Geolocation API to get the user's current location in a web page. + + +
+ +## Getting User's Current Location + +To get the user's current location, you can use the `navigator.geolocation` object in JavaScript. The `navigator.geolocation` object provides methods to retrieve the user's current position. + +Here's an example of how to get the user's current location using the Geolocation API: + +```html title="index.html" + + + + + + Geolocation API Example + + +

Geolocation API Example

+

Click the button to get your current location.

+ +

+ + + +``` + + + + + +In the above example: + +- We have an HTML button that calls the `getLocation()` function when clicked. +- The `getLocation()` function checks if the browser supports geolocation. If supported, it calls the `navigator.geolocation.getCurrentPosition()` method with the `showPosition()` function as a callback. +- The `showPosition()` function displays the latitude and longitude of the user's current location. + +When you click the "Get Location" button, the browser will prompt you to allow or deny access to your location. If you allow access, the browser will display your current latitude and longitude. + + +
+ +## Geolocation API Methods + +The Geolocation API provides the following methods: + +| Method | Description | +| ---------------------- | --------------------------------------------------------------------------------------------- | +| `getCurrentPosition()` | Retrieves the device's current position. | +| `watchPosition()` | Continuously monitors the device's position and triggers a callback function when it changes. | +| `clearWatch()` | Stops the `watchPosition()` method from monitoring the device's position. | + +### `getCurrentPosition()` Method + +The `getCurrentPosition()` method is used to retrieve the device's current position. It takes the following parameters: + +- `successCallback`: A callback function that is called when the position is successfully retrieved. +- `errorCallback`: A callback function that is called when an error occurs. +- `options`: An optional parameter that specifies the options for retrieving the position. +- `options.enableHighAccuracy`: A boolean value that indicates whether the device should provide a high-accuracy position. +- `options.timeout`: A timeout value in milliseconds after which the error callback is called. +- `options.maximumAge`: The maximum age of a cached position that is acceptable. +- `options.maximumAge`: The maximum age of a cached position that is acceptable. +- `options.maximumAge`: The maximum age of a cached position that is acceptable. + +Here's an example of using the `getCurrentPosition()` method: + +```javascript +navigator.geolocation.getCurrentPosition( + successCallback, + errorCallback, + options +); +``` + +### `watchPosition()` Method + +The `watchPosition()` method is used to continuously monitor the device's position. It takes the following parameters: + +- `successCallback`: A callback function that is called when the position is successfully retrieved. +- `errorCallback`: A callback function that is called when an error occurs. +- `options`: An optional parameter that specifies the options for retrieving the position. + +Here's an example of using the `watchPosition()` method: + +```javascript +let watchId = navigator.geolocation.watchPosition( + successCallback, + errorCallback, + options +); +``` + +### `clearWatch()` Method + +The `clearWatch()` method is used to stop the `watchPosition()` method from monitoring the device's position. It takes the `watchId` returned by the `watchPosition()` method as a parameter. + +Here's an example of using the `clearWatch()` method: + +```javascript +navigator.geolocation.clearWatch(watchId); +``` + +## Conclusion + +In this tutorial, you learned how to use the Geolocation API to get the user's current location in a web page. You can use the Geolocation API to build location-aware web applications that provide personalized experiences based on the user's location. diff --git a/docs/html/html5-apis/local-storage-and-session-storage.mdx b/docs/html/html5-apis/local-storage-and-session-storage.mdx new file mode 100644 index 0000000..634ad92 --- /dev/null +++ b/docs/html/html5-apis/local-storage-and-session-storage.mdx @@ -0,0 +1,116 @@ +--- +id: local-storage-and-session-storage +title: Local Storage and Session Storage in HTML +sidebar_label: Local Storage and Session Storage +sidebar_position: 2 +tags: [html, web-development, local-storage, session-storage] +description: "In this tutorial, you will learn how to use the Local Storage and Session Storage APIs in HTML to store data locally in the browser." +keywords: + [ + html local storage, + html session storage, + local storage in html, + session storage in html, + html5 local storage, + html5 session storage, + ] +hide_table_of_contents: true +--- + +import SessionStorageExample from './_scripts/SessionStorageExample'; +import LocalStorageExample from './_scripts/LocalStorageExample'; + +In `HTML`, you can use the Local Storage and Session Storage APIs to store data locally in the browser. The Local Storage and Session Storage APIs provide a simple way to store key-value pairs in the browser. + +In this tutorial, you will learn how to use the Local Storage and Session Storage APIs in HTML to store data locally in the browser. + + +
+ +## Local Storage + +Local Storage is a type of web storage that allows you to store data locally in the browser. The data stored in Local Storage persists even after the browser is closed and reopened. Local Storage is useful for storing user preferences, settings, and other data that you want to persist across browser sessions. + +Here's an example of how to use Local Storage in HTML: + +```html title="index.html" + + + + + + Local Storage Example + + +

Local Storage Example

+

Enter your name:

+ + +

+ + + +``` + + + + + +In this example, we use the `localStorage` object to store the user's name locally in the browser. When the user enters their name and clicks the "Save Name" button, the name is saved to Local Storage. If the user visits the page again, their name is retrieved from Local Storage and displayed as a welcome message. + +## Session Storage + +Session Storage is another type of web storage that allows you to store data locally in the browser. The data stored in Session Storage persists only for the duration of the browser session. When the browser is closed, the data stored in Session Storage is cleared. + +Here's an example of how to use Session Storage in HTML: + +```html title="index.html" + + + + + + Session Storage Example + + +

Session Storage Example

+

Enter your email:

+ + +

+ + + +``` + + + + + +In this example, we use the `sessionStorage` object to store the user's email locally in the browser for the duration of the browser session. When the user enters their email and clicks the "Save Email" button, the email is saved to Session Storage. The saved email is displayed when the user visits the page again during the same browser session. + +## Conclusion + +In this tutorial, you learned how to use the Local Storage and Session Storage APIs in HTML to store data locally in the browser. Local Storage is useful for storing data that you want to persist across browser sessions, while Session Storage is useful for storing data that you want to persist only for the duration of the browser session. By using Local Storage and Session Storage, you can create web applications that remember user preferences and settings, providing a better user experience. \ No newline at end of file diff --git a/docs/html/images/_category_.json b/docs/html/images/_category_.json new file mode 100644 index 0000000..8fcb36d --- /dev/null +++ b/docs/html/images/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Images", + "position": 8, + "link": { + "type": "generated-index", + "description": "In this section, you will learn how to work with images in your web pages." + } + } \ No newline at end of file diff --git a/docs/html/images/assets/gif-image.gif b/docs/html/images/assets/gif-image.gif new file mode 100644 index 0000000..92fc4b9 Binary files /dev/null and b/docs/html/images/assets/gif-image.gif differ diff --git a/docs/html/images/assets/jpeg-image.jpg b/docs/html/images/assets/jpeg-image.jpg new file mode 100644 index 0000000..8ab16ac Binary files /dev/null and b/docs/html/images/assets/jpeg-image.jpg differ diff --git a/docs/html/images/assets/png-image.png b/docs/html/images/assets/png-image.png new file mode 100644 index 0000000..d614b99 Binary files /dev/null and b/docs/html/images/assets/png-image.png differ diff --git a/docs/html/images/assets/svg-image.svg b/docs/html/images/assets/svg-image.svg new file mode 100644 index 0000000..e8a34c1 --- /dev/null +++ b/docs/html/images/assets/svg-image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/html/images/image-attributes.mdx b/docs/html/images/image-attributes.mdx new file mode 100644 index 0000000..66ab1b5 --- /dev/null +++ b/docs/html/images/image-attributes.mdx @@ -0,0 +1,153 @@ +--- +id: image-attributes +title: Image Attributes in HTML +sidebar_label: Image Attributes +sidebar_position: 2 +tags: [html, web-development, image-attributes, images] +description: "In this tutorial, you will learn about image attributes in HTML. Image attributes define the appearance, behavior, and alignment of images on web pages." +keywords: + [ + HTML image attributes, + HTML img tag, + image attributes in HTML, + image alignment, + image behavior, + image appearance, + web development, + HTML tutorial, + ] +hide_table_of_contents: true +--- + +Images are an essential part of web development and are used to enhance the visual appeal of web pages. In HTML, images are inserted using the `` (image) tag, which specifies the location of the image file and other attributes that control its appearance and behavior. + + +
+ +## Image Attributes + +When inserting an image in HTML, you can use various attributes to control the appearance, behavior, and alignment of the image. Here are some common image attributes that you can use with the `` tag: + +### The `src` Attribute + +The `src` attribute is the most important attribute of the `` tag and specifies the URL of the image file to be displayed. It can be a relative or absolute URL pointing to the location of the image file on the web server or the internet. + +Here's an example of using the `src` attribute to insert an image into a web page: + +```html title="index.html" + + + + + + Image Example + + +

My Pet

+ A cute dog + + +``` + +In this example, the `src` attribute specifies the URL of the image file, and the `alt` attribute provides alternative text for the image, which is displayed if the image cannot be loaded or accessed by the user. + + +<> +

My Pet

+ A cute dog + + + +### The `alt` Attribute + +The `alt` attribute provides alternative text for the image, which is displayed if the image cannot be loaded or accessed by the user. It is also used by screen readers to describe the content of the image to visually impaired users. + +Here's an example of using the `alt` attribute with an image: + +```html title="index.html" + + + + + + Image Example + + +

My Pet

+ A cute dog + + +``` + +In this example, the `alt` attribute provides a description of the image content, which is useful for accessibility and SEO purposes. + + +<> +

My Pet

+ A cute dog + + + +### The `width` and `height` Attributes + +The `width` and `height` attributes specify the dimensions of the image in pixels. These attributes can be used to control the size of the image displayed on the web page. + +Here's an example of using the `width` and `height` attributes with an image: + +```html title="index.html" + + + + + + Image Example + + +

My Pet

+ A cute dog + + +``` + +In this example, the `width` and `height` attributes are used to set the dimensions of the image to 400 pixels in width and 300 pixels in height. + + +<> +

My Pet

+ A cute dog + + + +### The `title` Attribute + +The `title` attribute adds a title or tooltip to the image that is displayed when the user hovers over it with the mouse cursor. It provides additional information about the image content. + +Here's an example of using the `title` attribute with an image: + +```html title="index.html" + + + + + + Image Example + + +

My Pet

+ A cute dog + + +``` + +In this example, the `title` attribute is used to provide a title for the image, which is displayed as a tooltip when the user hovers over the image. + + +<> +

My Pet

+ A cute dog + + + +## Conclusion + +By using image attributes in HTML, you can control the appearance, behavior, and alignment of images on web pages. These attributes help make your web content more accessible, visually appealing, and informative to users. \ No newline at end of file diff --git a/docs/html/images/image-formats-and-optimization.mdx b/docs/html/images/image-formats-and-optimization.mdx new file mode 100644 index 0000000..822dcc8 --- /dev/null +++ b/docs/html/images/image-formats-and-optimization.mdx @@ -0,0 +1,199 @@ +--- +id: image-formats-and-optimization +title: Image Formats and Optimization +sidebar_label: Image Formats and Optimization +sidebar_position: 3 +tags: [html, web-development, image-formats, image-optimization] +description: "In this tutorial, you will learn about image formats and optimization techniques for web development. Image formats like JPEG, PNG, and GIF are commonly used for displaying images on websites. Optimizing images can help improve website performance and reduce loading times." +keywords: + [ + image formats, + image optimization, + web development, + image compression, + image quality, + image file formats, + JPEG, + PNG, + GIF, + SVG, + image optimization techniques, + image loading times, + image performance, + image size, + ] +hide_table_of_contents: true +--- + +Image optimization is an essential aspect of web development that involves reducing the file size of images without compromising their quality. Optimizing images can help improve website performance, reduce loading times, and enhance the user experience. + + +
+ +In this tutorial, you will learn about different image formats commonly used in web development and techniques to optimize images for the web. + +## Image Formats + +There are several image formats available for displaying images on websites. Each format has its own characteristics, advantages, and use cases. Here are some of the most commonly used image formats in web development: + +### JPEG (Joint Photographic Experts Group) + +JPEG is a popular image format that is widely used for photographs and complex images. It supports millions of colors and is ideal for images with gradients, shadows, and complex color schemes. JPEG images can be compressed to reduce file size, but repeated compression can lead to a loss of image quality. + +Here's an example of a JPEG image: + +```html title="index.html" + + + + + + JPEG Image Example + + +

JPEG Image Example

+ A beautiful landscape + + +``` + +In this example, the `src` attribute specifies the URL of the JPEG image file, and the `alt` attribute provides alternative text for the image. + + +<> +

JPEG Image Example

+ ![JPEG Image Example](./assets/jpeg-image.jpg) + + + + + +### PNG (Portable Network Graphics) + +PNG is a lossless image format that supports transparency and is commonly used for images with text, logos, and graphics. PNG images are ideal for images that require a transparent background or sharp edges. While PNG images can be compressed, they are generally larger in file size compared to JPEG images. + +Here's an example of a PNG image: + +```html title="index.html" + + + + + + PNG Image Example + + +

PNG Image Example

+ A logo with transparency + + +``` + +In this example, the `src` attribute specifies the URL of the PNG image file, and the `alt` attribute provides alternative text for the image. + + +<> +

PNG Image Example

+ ![PNG Image Example](./assets/png-image.png) + + + + +
+ +### GIF (Graphics Interchange Format) + +GIF is a popular image format that supports animations and is commonly used for simple graphics and short animations. GIF images are limited to 256 colors and are ideal for images with flat colors and simple shapes. GIF images can be compressed to reduce file size, but they are generally larger than JPEG and PNG images. + +Here's an example of a GIF image: + +```html title="index.html" + + + + + + GIF Image Example + + +

GIF Image Example

+ A simple animation + + +``` + +In this example, the `src` attribute specifies the URL of the GIF image file, and the `alt` attribute provides alternative text for the image. + + +<> +

GIF Image Example

+ ![GIF Image Example](./assets/gif-image.gif) + + + +### SVG (Scalable Vector Graphics) + +SVG is an XML-based vector image format that is ideal for images that require scalability and responsiveness. SVG images are resolution-independent and can be scaled to any size without losing quality. SVG images are commonly used for icons, logos, and illustrations on websites. + +Here's an example of an SVG image: + +```html title="index.html" + + + + + + SVG Image Example + + +

SVG Image Example

+ An SVG illustration + + +``` + +In this example, the `src` attribute specifies the URL of the SVG image file, and the `alt` attribute provides alternative text for the image. + + +<> +

SVG Image Example

+ ![SVG Image Example](./assets/svg-image.svg) + + + + +
+ +## Image Optimization Techniques + +Optimizing images for the web involves reducing the file size of images without compromising their quality. Here are some techniques to optimize images for web development: + +### 1. Choose the Right Image Format + +Selecting the appropriate image format based on the content and characteristics of the image can help reduce file size and improve loading times. For example, JPEG is suitable for photographs, while PNG is ideal for images with transparency. + +### 2. Compress Images + +Use image compression tools to reduce the file size of images without losing quality. There are several online tools and software applications available for compressing images, such as TinyPNG, ImageOptim, and Squoosh. + +### 3. Resize Images + +Resize images to the appropriate dimensions required for display on the web. Avoid using large images that need to be scaled down using CSS, as this can increase loading times and affect performance. + +### 4. Optimize Alt Text + +Provide descriptive and meaningful alternative text for images using the `alt` attribute. Alt text is essential for accessibility and SEO purposes and helps visually impaired users understand the content of the image. + +### 5. Lazy Loading + +Implement lazy loading for images to defer the loading of images that are not visible on the screen. Lazy loading can help improve page load times and reduce the initial load time of web pages. + +### 6. Use Responsive Images + +Use responsive images that adapt to different screen sizes and resolutions. Implement the `srcset` attribute to provide multiple image sources based on the device's pixel density and screen size. + +By following these image optimization techniques, you can enhance website performance, reduce loading times, and improve the user experience. + +## Conclusion + +Optimizing images is an essential aspect of web development that can help improve website performance and reduce loading times. By choosing the right image format, compressing images, resizing images, and implementing other optimization techniques, you can enhance the user experience and create faster-loading web pages. diff --git a/docs/html/images/inserting-images.mdx b/docs/html/images/inserting-images.mdx new file mode 100644 index 0000000..5b587fa --- /dev/null +++ b/docs/html/images/inserting-images.mdx @@ -0,0 +1,104 @@ +--- +id: inserting-images +title: Inserting Images in HTML +sidebar_label: Inserting Images +sidebar_position: 1 +tags: [html, web-development, images, inserting-images] +description: "In this tutorial, you will learn how to insert images in HTML. Images are used to enhance the visual appeal of web pages and provide additional information to users." +keywords: [HTML images, image insertion, img tag, alt attribute, web development, HTML tutorial] +hide_table_of_contents: true +--- + +Images are an essential part of web development and are used to enhance the visual appeal of web pages. In HTML, images are inserted using the `` (image) tag, which specifies the location of the image file and other attributes that control its appearance and behavior. + + +
+ +## Inserting an Image + +To insert an image in HTML, you use the `` tag with the `src` attribute, which specifies the URL of the image file. Here's an example of inserting an image into a web page: + +```html title="index.html" + + + + + + Image Example + + +

My Pet

+ A cute dog + + +``` + +In this example, the `` tag is used to insert an image of a pet (a cute dog) into the web page. The `src` attribute specifies the URL of the image file, and the `alt` attribute provides alternative text for the image, which is displayed if the image cannot be loaded or accessed by the user. + + +<> +

My Pet

+ A cute dog + + + +## Why Use Images? + +1. **Visual Appeal:** Images enhance the visual appeal of web pages and make content more engaging and attractive to users. +2. **Informational Value:** Images can convey information more effectively than text alone, helping users understand the content better. +3. **Brand Identity:** Images can help establish and reinforce brand identity by using logos, colors, and visual elements that represent the brand. +4. **Emotional Impact:** Images evoke emotions and create a connection with users, making the content more memorable and impactful. +5. **Accessibility:** Providing alternative text for images (using the `alt` attribute) ensures that users with visual impairments or those using screen readers can understand the content. +6. **SEO Benefits:** Images can improve search engine optimization (SEO) by providing additional context and relevance to the content, leading to better visibility in search results. +7. **Engagement:** Images can increase user engagement and interaction with the content, encouraging users to spend more time on the website. +8. **Storytelling:** Images can help tell a story or convey a message more effectively than text alone, creating a richer and more immersive user experience. +9. **Product Showcase:** Images are essential for showcasing products, services, and portfolios, allowing users to see what is being offered visually. +10. **Social Sharing:** Images are highly shareable on social media platforms, increasing the reach and visibility of the content across different channels. + +By using images effectively in web development, you can create visually appealing and engaging web pages that attract and retain users' attention. Remember to optimize images for web use by resizing, compressing, and using the appropriate file formats to ensure fast loading times and optimal performance. + + +
+ +## Image Attributes + +The `` tag supports several attributes that control the appearance and behavior of images on web pages. Here are some commonly used attributes: + +- **`src`**: Specifies the URL of the image file. +- **`alt`**: Provides alternative text for the image (required for accessibility). +- **`width`**: Sets the width of the image in pixels or as a percentage of the containing element. +- **`height`**: Sets the height of the image in pixels or as a percentage of the containing element. +- **`title`**: Adds a title or tooltip to the image that is displayed when the user hovers over it. +- **`style`**: Applies CSS styles to the image, such as colors, borders, margins, and padding. +- **`class`**: Assigns a class name to the image for styling and scripting purposes. +- **`id`**: Specifies a unique identifier for the image that can be used for scripting or styling. + +Here's an example of an image with additional attributes: + +```html title="index.html" + + + + + + Image Attributes Example + + +

My Pet

+ A cute dog + + +``` + +In this example, the image has additional attributes such as `width`, `height`, `title`, and `style` to control its size, title text, and border style. + + +<> +

My Pet

+ A cute dog + + + +## Conclusion + +Images play a crucial role in web development by enhancing the visual appeal of web pages, conveying information effectively, and creating engaging user experiences. By inserting images using the `` tag and optimizing them for web use, you can create compelling and visually appealing content that attracts and retains users' attention. \ No newline at end of file diff --git a/docs/html/intro-html.mdx b/docs/html/intro-html.mdx new file mode 100644 index 0000000..3090a0f --- /dev/null +++ b/docs/html/intro-html.mdx @@ -0,0 +1,147 @@ +--- +id: intro-html +title: Introduction of HTML +sidebar_label: Introduction of HTML +sidebar_position: 1 +tags: + [ + html, + introduction of html, + what is html, + why learn html, + how to use html, + html syntax, + html structure, + html elements, + html attributes, + ] +description: "In this tutorial, you will learn about HTML, its importance, what is HTML, why learn HTML, how to use HTML, steps to start using HTML, and more." +hide_table_of_contents: true +--- + +HTML stands for **Hyper Text Markup Language**. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of elements that you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. + + +
+ +:::note +HTML is a markup language that defines the structure of your content. HTML consists of a series of elements that you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. +::: + +## What is HTML? + +HTML, which stands for **Hyper Text Markup Language**, is the standard markup language for creating Web pages and design documents on the World Wide Web. It is a system of tags and codes that define the structure and presentation of text and images in a document. HTML is a markup language, not a programming language, and is used to create static web pages that are displayed in web browsers. HTML is important because it provides a standardized way to define elements, making it easier for computers and software applications to interpret and display the content correctly. + +:::info + +1. **Markup Language**: Markup language is a system of rules that uses tags or codes to define the structure and presentation of text and images in a document. HTML is a markup language. Markup languages are different from programming languages, which are used to create web applications, and are static and don't use logic or algorithms. Markup languages are important because they provide a standardized way to define elements, making it easier for computers and software applications to interpret and display the content correctly. +2. **Hyper Text**: HyperText is text which is not constrained to be linear. It can contain links to other web pages. The World Wide Web is a classic example of hyper text, with web pages containing links to other pages, sometimes in other websites. HyperText is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page. +3. Different between Markup Language and Programming Language: + + | No. | Markup Language | Programming Language | + | --- | --------------- | -------------------- | + | 1. | It is used to define the structure and presentation of text and images in a document. | It is used to create web applications. | + | 2. | It is static and doesn't use logic or algorithms. | It is dynamic and uses logic and algorithms. | + | 3. | It provides a standardized way to define elements. | It provides a way to create web applications. | + | 4. | It is used to create web pages. | It is used to create web applications. | + +4. **Structure and Content**: HTML is used to define the structure and content of a web page. It consists of a series of elements that you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. + + **For example, the following HTML code creates a simple web page:** + + + + ```html + + + + Page Title + + +

This is a Heading

+

This is a paragraph.

+ + + ``` + + + +
+

This is a Heading

+

This is a paragraph.

+
+ + + + +5. **Web Pages**: HTML is used to create web pages that are displayed in web browsers. Web pages are documents that are displayed in web browsers, such as Google Chrome, Mozilla Firefox, etc. Web pages can contain text, images, videos, links, and other elements. HTML is used to define the structure and content of a web page, and is the foundation of the World Wide Web. +6. **Platform Independent**: HTML is platform-independent, which means that it can be used on any operating system, such as Windows, macOS, Linux, etc. HTML is supported by all major web browsers, such as Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, etc. This makes HTML a versatile and widely used markup language for creating web pages and design documents on the World Wide Web. + +::: + + +
+ +## Why Learn HTML? + +Learning HTML is essential for anyone who wants to create web pages and design documents on the World Wide Web. HTML is the foundation of the World Wide Web and is used to define the structure and content of web pages. Here are some reasons why you should learn HTML: + +1. **Create Web Pages**: HTML is used to create web pages that are displayed in web browsers. Web pages can contain text, images, videos, links, and other elements. HTML is used to define the structure and content of a web page, and is the foundation of the World Wide Web. +2. **Understand Web Development**: HTML is the foundation of web development and is used in conjunction with other technologies, such as CSS (Cascading Style Sheets) and JavaScript, to create interactive and dynamic web pages. By learning HTML, you will gain a better understanding of web development and how web pages are created. +3. **Build Websites**: HTML is used to build websites, which are collections of web pages that are linked together and hosted on the World Wide Web. Websites can be used for a variety of purposes, such as e-commerce, blogging, social networking, and more. By learning HTML, you will be able to build websites and share your content with the world. +4. **Career Opportunities**: Learning HTML can open up a wide range of career opportunities in web development, web design, digital marketing, and other related fields. Web development is a growing industry, and there is a high demand for skilled professionals who can create and maintain web pages and websites. By learning HTML, you will be able to take advantage of these career opportunities and build a successful career in the tech industry. +5. **Personal Growth**: Learning HTML is a valuable skill that can help you grow personally and professionally. By learning HTML, you will gain a better understanding of how the World Wide Web works, and how web pages are created and displayed in web browsers. You will also develop problem-solving skills, creativity, and critical thinking skills that can be applied to other areas of your life. +6. **Contribute to the Web**: By learning HTML, you will be able to contribute to the World Wide Web and share your ideas, knowledge, and creativity with others. You can create web pages and websites that showcase your work, promote your business, or share your interests with the world. HTML is a powerful tool that can help you connect with others and make a positive impact on the web. +7. **Stay Relevant**: HTML is a foundational technology that is used by millions of people around the world every day. By learning HTML, you will stay relevant and up-to-date with the latest trends and developments in web development and design. You will be able to create modern, responsive, and user-friendly web pages that meet the needs of today's users and devices. +8. **Express Yourself**: HTML is a versatile and flexible markup language that allows you to express yourself and create unique and engaging web pages. You can use HTML to add text, images, videos, links, and other elements to your web pages, and customize the appearance and layout of your content. By learning HTML, you will be able to express yourself creatively and share your ideas with the world. +9. **Learn Other Technologies**: HTML is often used in conjunction with other technologies, such as CSS (Cascading Style Sheets) and JavaScript, to create interactive and dynamic web pages. By learning HTML, you will gain a solid foundation in web development and be able to learn other technologies more easily. You will be able to create modern, responsive, and user-friendly web pages that meet the needs of today's users and devices. +10. **Have Fun**: Learning HTML can be a fun and rewarding experience. You can experiment with different elements, styles, and layouts, and create web pages that reflect your personality and interests. You can learn new skills, solve problems, and express yourself creatively through HTML. By learning HTML, you will be able to unleash your creativity and have fun building web pages that showcase your talents and passions. + + +
+ +## How to use HTML? + +HTML is used to create structured documents for the web. To start using HTML, you'll need a basic understanding of its syntax and structure, as well as a text editor to write your code and a web browser to view your web pages. + +### Steps to start using HTML + +**1. Set up your development environment**: To start using HTML, you'll need a text editor to write your code and a web browser to view your web pages. You can use any text editor, such as Notepad, Sublime Text, Visual Studio Code, or Atom, to write your HTML code. You can also use an online code editor, such as CodePen, or JSFiddle, to write and test your HTML code. You can use any web browser, such as Google Chrome, Mozilla Firefox, Microsoft Edge, or Safari, to view your web pages. + +**2. Create your first HTML document**: To create your first HTML document, follow these steps: + + - Open your text editor and create a new file with an `.html` extension, such as `index.html`. + - Add the following code to your file: + + ```html title="index.html" + + + + My First HTML Document + + +

Hello, World!

+

This is my first HTML document.

+ + + ``` + + - Save your file and open it in a web browser. You should see the text "Hello, World!" displayed in the browser window. + + +
+

Hello, World!

+

This is my first HTML document.

+
+ + +**3. Learn HTML syntax and structure**: HTML consists of a series of elements that you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. Each element is enclosed in angle brackets `< >` and consists of a start tag, content, and an end tag. For example, the `

` element is used to define a heading, and the `

` element is used to define a paragraph. + +**4. Explore HTML elements and attributes**: HTML provides a wide range of elements and attributes that you can use to create structured documents for the web. Some common HTML elements include headings, paragraphs, lists, links, images, tables, forms, and more. Each element has its own purpose and can be customized using attributes, such as `id`, `class`, `style`, `src`, `href`, and more. + + +
+ +## Conclusion + +HTML is the standard markup language for creating web pages and design documents on the World Wide Web. HTML is important because it provides a standardized way to define elements, making it easier for computers and software applications to interpret and display the content correctly. By learning HTML, you will be able to create web pages, understand web development, build websites, and contribute to the web. HTML is a versatile and widely used markup language that can help you express yourself, learn other technologies, and have fun building web pages. So, start learning HTML today and unleash your creativity on the web! \ No newline at end of file diff --git a/docs/html/links-and-anchors/_category_.json b/docs/html/links-and-anchors/_category_.json new file mode 100644 index 0000000..a33b259 --- /dev/null +++ b/docs/html/links-and-anchors/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Links and Anchors", + "position": 7, + "link": { + "type": "generated-index", + "description": "In this section, you will learn how to create links and anchors in your HTML document." + } + } \ No newline at end of file diff --git a/docs/html/links-and-anchors/creating-hyperlinks.mdx b/docs/html/links-and-anchors/creating-hyperlinks.mdx new file mode 100644 index 0000000..b4eb925 --- /dev/null +++ b/docs/html/links-and-anchors/creating-hyperlinks.mdx @@ -0,0 +1,134 @@ +--- +id: creating-hyperlinks +title: Creating Hyperlinks in HTML +sidebar_label: Creating Hyperlinks +sidebar_position: 1 +tags: [html, web-development, hyperlinks, links] +description: "In this tutorial, you will learn how to create hyperlinks in HTML. Hyperlinks are used to link one web page to another, or to link to a specific section within the same web page." +keywords: [HTML hyperlinks, HTML links, anchor tag, href attribute, web development, HTML tutorial] +hide_table_of_contents: true +--- + +Hyperlinks, also known as links, are an essential part of web development. They allow users to navigate between different web pages or sections within the same page. In HTML, hyperlinks are created using the `` (anchor) tag, which defines a clickable link to another location. + + +
+ +In this tutorial, you will learn how to create hyperlinks in HTML, link to external websites, link to specific sections within a page, and use relative and absolute URLs. + +## Creating a Basic Hyperlink + +To create a basic hyperlink in HTML, you use the `` tag along with the `href` attribute, which specifies the URL of the page or resource you want to link to. Here's an example of a simple hyperlink: + +```html title="index.html" + + + + + + Hyperlink Example + + +

Welcome to my website!

+

Click here to visit my portfolio.

+ + +``` + +In this example, the text "here" is a hyperlink that, when clicked, will take the user to the specified URL (in this case, my portfolio website). + + +<> +

Welcome to my website!

+

Click here to visit my portfolio.

+ + + +## Linking to Sections within a Page + +You can also create hyperlinks that link to specific sections within the same web page. To do this, you need to use the `id` attribute to define an anchor point within the page and then create a hyperlink that points to that anchor. Here's an example: + +```html title="index.html" + + + + + + Internal Link Example + + +

Welcome to my website!

+

Click here to jump to the About section.

+

About

+

This is the About section of the page.

+ + +``` + +In this example, the text "here" is a hyperlink that, when clicked, will scroll the page to the section with the `id="about"`. This technique is commonly used for creating navigation menus and linking to different sections of a long web page. + + +<> +

Welcome to my website!

+

Click here to jump to the About section.

+

About

+

This is the About section of the page.

+ + + + +
+ +## Using Relative and Absolute URLs + +When creating hyperlinks, you can use both relative and absolute URLs to specify the target location. Relative URLs are used to link to resources within the same website, while absolute URLs are used to link to external websites or resources. + +### Relative URLs + +Here's an example of a hyperlink using a relative URL: + +```html title="index.html" + + + + + + Relative URL Example + + +

Welcome to my website!

+

Click here to learn more about me.

+ + +``` + +In this example, the hyperlink points to a file named `about.html` in the same directory as the current page. Relative URLs are useful for linking to pages within the same website without specifying the full URL. + + +
+ +### Absolute URLs + +For linking to external websites or resources, you can use an absolute URL like this: + +```html title="index.html" + + + + + + Absolute URL Example + + + +

Welcome to my website!

+

Click here to visit AI Buddies.

+ + +``` + +In this case, the hyperlink points to an external website (AI Buddies) using an absolute URL. Absolute URLs include the full address of the resource, including the protocol (`http://` or `https://`), domain name, and path. + +## Conclusion + +Hyperlinks are a fundamental part of web development, allowing users to navigate between different pages and sections of a website. By using the `` tag and the `href` attribute, you can create clickable links that enhance the user experience and provide easy access to relevant content. \ No newline at end of file diff --git a/docs/html/links-and-anchors/link-attributes.mdx b/docs/html/links-and-anchors/link-attributes.mdx new file mode 100644 index 0000000..f0fead5 --- /dev/null +++ b/docs/html/links-and-anchors/link-attributes.mdx @@ -0,0 +1,124 @@ +--- +id: link-attributes +title: Link Attributes in HTML +sidebar_label: Link Attributes +sidebar_position: 2 +tags: [html, web-development, link-attributes, links] +description: "In this tutorial, you will learn about link attributes in HTML. Link attributes define the behavior, appearance, and target of hyperlinks in web pages." +keywords: + [ + HTML link attributes, + HTML hyperlinks, + anchor tag, + href attribute, + target attribute, + rel attribute, + web development, + HTML tutorial, + ] +hide_table_of_contents: true +--- + +Hyperlinks, also known as links, are an essential part of web development. They allow users to navigate between different web pages or sections within the same page. In HTML, hyperlinks are created using the `` (anchor) tag, which defines a clickable link to another location. + + +
+ +In this tutorial, you will learn about link attributes in HTML that define the behavior, appearance, and target of hyperlinks in web pages. + +## The `href` Attribute + +The `href` attribute is the most important attribute of the `` tag and specifies the URL of the page or resource you want to link to. It can be an absolute URL (e.g., `https://.../page.html`) or a relative URL (e.g., `page.html`). + +Here's an example of a hyperlink with the `href` attribute: + +```html title="index.html" + + + + + + Hyperlink Example + + +

Welcome to my website!

+

Click here to visit a page.

+ + +``` + +In this example, the `href` attribute specifies the URL of the page that the hyperlink points to. + + +
+ +## The `target` Attribute + +The `target` attribute specifies where the linked document will be opened when the hyperlink is clicked. It can have the following values: + +- `_self`: Opens the linked document in the same window or tab. +- `_blank`: Opens the linked document in a new window or tab. +- `_parent`: Opens the linked document in the parent frame. +- `_top`: Opens the linked document in the full body of the window. + +Here's an example of a hyperlink with the `target` attribute: + +```html title="index.html" + + + + + + Hyperlink Example + + +

Welcome to my website!

+

+ Click here to visit a + page in a new tab +

+ + +``` + +In this example, the `target` attribute is set to `_blank`, which opens the linked document in a new tab. + + +
+ +## The `rel` Attribute + +The `rel` attribute specifies the relationship between the current document and the linked document. It is commonly used to indicate the type of link being used. Some common values for the `rel` attribute include: + +- `nofollow`: Instructs search engines not to follow the link. +- `noopener`: Prevents the new page from having access to the window.opener property. +- `noreferrer`: Prevents the Referer header from being sent to the linked page. +- `external`: Indicates that the link points to an external resource. +- `nofollow noreferrer`: A combination of `nofollow` and `noreferrer`. +- `noopener noreferrer`: A combination of `noopener` and `noreferrer`. + +Here's an example of a hyperlink with the `rel` attribute: + +```html title="index.html" + + + + + + Hyperlink Example + + +

Welcome to my website!

+

+ Click here + to visit a page with security measures. +

+ + +``` + +In this example, the `rel` attribute is set to `noopener noreferrer`, which adds security measures to the link. + +## Conclusion + +Link attributes in HTML provide additional functionality and control over hyperlinks in web pages. By using attributes like `href`, `target`, and `rel`, you can customize the behavior, appearance, and security of your links to create a better user experience for your website visitors. Experiment with different attributes to see how they affect the behavior of your hyperlinks and enhance the usability of your web pages. \ No newline at end of file diff --git a/docs/html/lists/_category_.json b/docs/html/lists/_category_.json new file mode 100644 index 0000000..9c35467 --- /dev/null +++ b/docs/html/lists/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Lists", + "position": 6, + "link": { + "type": "generated-index", + "description": "In this section, you learn how to create and manage lists in your app. for example, you can create an ordered list, unordered list, or definition list. You can also create a list with a custom icon or a list with a custom bullet." + } + } \ No newline at end of file diff --git a/docs/html/lists/definition-lists.mdx b/docs/html/lists/definition-lists.mdx new file mode 100644 index 0000000..f0ab72d --- /dev/null +++ b/docs/html/lists/definition-lists.mdx @@ -0,0 +1,75 @@ +--- +id: definition-lists +title: Definition Lists +sidebar_label: Definition Lists +sidebar_position: 4 +tags: [html, web-development, definition-lists, lists] +description: "In this tutorial, you will learn the basics of definition lists in HTML. We will cover what they are, common use cases, examples and you'll also get to see what they look like in real code." +keywords: [html definition lists, html lists, definition lists in html, html dl, html dt, html dd, html definition list example, html definition list tutorial, html lists tutorial, html in 2024] +hide_table_of_contents: true +--- + +Definition lists in HTML are used to represent a list of terms and their corresponding definitions. Each term in the list is displayed with a definition following it. Definition lists are commonly used for glossaries, dictionaries, metadata, and other scenarios where a term-definition relationship is required. + + +
+ +## Creating a Definition List + +To create a definition list in HTML, you use the `
` (definition list) tag. Each term in the list is represented by the `
` (definition term) tag, and each definition is represented by the `
` (definition description) tag. Here's an example of a definition list with three terms and their definitions: + +```html title="index.html" + + + + + + Definition List Example + + +

Glossary of Terms

+
+
HTML
+
HyperText Markup Language
+
CSS
+
Cascading Style Sheets
+
JS
+
JavaScript
+
+ + +``` + + +<> +

Glossary of Terms

+
+
HTML
+
HyperText Markup Language
+
CSS
+
Cascading Style Sheets
+
JS
+
JavaScript
+
+ + + +In this example, the definition list contains three terms and their corresponding definitions: "HTML" with the definition "HyperText Markup Language," "CSS" with the definition "Cascading Style Sheets," and "JS" with the definition "JavaScript." + + +
+ +## Why Use Definition Lists? + +1. **Term-Definition Relationship:** Definition lists establish a clear relationship between terms and their definitions, making them ideal for glossaries, dictionaries, and metadata. +2. **Structured Information:** Definition lists organize information in a structured format, enhancing readability and comprehension. +3. **Concise Presentation:** By pairing terms with their definitions, definition lists provide a concise and informative way to present content. +4. **Accessibility:** Screen readers and assistive technologies can interpret definition lists, improving the accessibility of the content. +5. **Consistency:** Using definition lists ensures a consistent presentation of terms and definitions, maintaining clarity and coherence. +6. **Styling:** Definition lists can be styled using CSS to match the design of a website or application, enhancing the visual appeal. +7. **Semantic Meaning:** Definition lists add semantic meaning to the content, helping search engines and browsers understand the structure of the information. +8. **Versatility:** Definition lists can be used in various contexts to present structured data, making them a versatile choice for different types of content. + +## Conclusion + +In this tutorial, you learned about definition lists in HTML and how to create them using the `
`, `
`, and `
` tags. Definition lists are a powerful tool for presenting structured information in a concise and organized manner. By using definition lists, you can create glossaries, dictionaries, metadata, and other content that requires a clear term-definition relationship. Experiment with definition lists in your projects to enhance the readability and accessibility of your content. \ No newline at end of file diff --git a/docs/html/lists/list-intro.mdx b/docs/html/lists/list-intro.mdx new file mode 100644 index 0000000..0c89895 --- /dev/null +++ b/docs/html/lists/list-intro.mdx @@ -0,0 +1,116 @@ +--- +id: list-intro +title: "HTML Lists Introduction" +sidebar_label: Lists Introduction +sidebar_position: 1 +tags: [html, web-development, lists] +description: "In this tutorial, you will learn about lists in HTML. Lists are used to display a collection of items in a structured format." +keywords: [html lists, html ul, html ol, html dl, html list items, html list tags] +hide_table_of_contents: true +--- + +Lists in HTML are used to display a collection of items in a structured format. Lists are essential for organizing content, creating navigation menus, and presenting information in a readable manner. HTML provides three types of lists: unordered lists, ordered lists, and definition lists. + + +
+ +## Types of Lists in HTML + +There are three main types of lists in HTML: + +1. **Unordered Lists (`
    `):** Unordered lists are used to represent a collection of items without any specific order or sequence. The list items are typically displayed with bullet points. +2. **Ordered Lists (`
      `):** Ordered lists are used to represent a collection of items in a specific order or sequence. The list items are typically displayed with numbers or letters. +3. **Definition Lists (`
      `):** Definition lists are used to represent a list of terms and their corresponding definitions. Each term is displayed with a definition following it. + +## List Structure + +### 1. Unordered Lists + +Unordered lists are created using the `
        ` tag. Each item in the list is represented by the `
      • ` (list item) tag. The items are displayed with bullet points by default. + +
        + +```html title="Unordered List Example" +
          +
        • Item 1
          • +
        • Item 2
          • +
        • Item 3
          • +
        +``` + + +
          +
        • Item 1
          • +
        • Item 2
          • +
        • Item 3
          • +
        +         + +
        + + +
        + +### 2. Ordered Lists + +Ordered lists are created using the `
          ` tag. Each item in the list is represented by the `
        1. ` tag. The items are displayed with numbers or letters by default. + +
          + +```html title="Ordered List Example" +
            +
          1. Item 1
            2. +
          2. Item 2
            3. +
          3. Item 3
            4. +
          +``` + + +
            +
          1. Item 1
            2. +
          2. Item 2
            3. +
          3. Item 3
            4. +
          +           + +
          + + +
          + +### 3. Definition Lists + +Definition lists are created using the `
          ` tag. Each term in the list is represented by the `
          ` (definition term) tag, and each definition is represented by the `
          ` (definition description) tag. + +
          + +```html title="Definition List Example" +
          +
          Term 1
          +
          Definition 1
          +
          Term 2
          +
          Definition 2
          +
          Term 3
          +
          Definition 3
          +
          +``` + + +
          +
          Term 1
          +
          Definition 1
          +
          Term 2
          +
          Definition 2
          +
          Term 3
          +
          Definition 3
          +
          +           + +
          + + +
          + +## Conclusion + +In this tutorial, you learned about the different types of lists in HTML: unordered lists, ordered lists, and definition lists. Lists are an essential part of web development and are used to organize and present information in a structured format. You can use lists to create navigation menus, display content in a readable manner, and improve the overall user experience of your web pages. Experiment with different list types and styles to enhance the visual appeal and usability of your websites. \ No newline at end of file diff --git a/docs/html/lists/ordered-lists.mdx b/docs/html/lists/ordered-lists.mdx new file mode 100644 index 0000000..46e3407 --- /dev/null +++ b/docs/html/lists/ordered-lists.mdx @@ -0,0 +1,284 @@ +--- +id: ordered-lists +title: "HTML Ordered Lists" +sidebar_label: Ordered Lists +sidebar_position: 3 +tags: [html, web-development, ordered-lists, lists] +description: "In this tutorial, you will learn about ordered lists in HTML. Ordered lists are used to display a list of items in a specific order, such as numerical or alphabetical order." +keywords: [html ordered lists, html ol, html list items, html list tags, html ordered list example, html ordered list tutorial, html lists tutorial, html in 2024] +hide_table_of_contents: true +--- + +Ordered lists in HTML are used to represent a collection of items in a specific order, such as numerical or alphabetical order. Each item in the list is displayed with a number or letter to indicate its position in the sequence. Ordered lists are commonly used for steps in a process, rankings, and other scenarios where the order of items is important. + + +
          + +## Creating an Ordered List + +To create an ordered list in HTML, you use the `
            ` (ordered list) tag. Each item in the list is represented by the `
          1. ` (list item) tag. Here's an example of an ordered list with three items: + +```html title="index.html" + + + + + + Ordered List Example + + +

            Steps to Create a Website

            +
              +
            1. Plan your website structure.
              2. +
            2. Create wireframes and mockups.
              3. +
            3. Develop and test your website.
              4. +
            + + +``` + + +<> +

            Steps to Create a Website

            +
              +
            1. Plan your website structure.
              2. +
            2. Create wireframes and mockups.
              3. +
            3. Develop and test your website.
              4. +
            + +             + +In this example, the ordered list contains three items that represent the steps to create a website. Each item is displayed with a number to indicate its position in the sequence. + + +
            + +## Why Use Ordered Lists? + +1. **Sequential Order:** Ordered lists help convey information in a specific sequence, making them ideal for steps, rankings, and other ordered content. +2. **Clarity:** The use of numbers or letters provides clarity and structure to the content, making it easier for users to follow. +3. **Organization:** Ordered lists organize information in a logical and hierarchical manner, improving the readability and comprehension of the content. +4. **Accessibility:** Screen readers and assistive technologies can interpret ordered lists, enhancing the accessibility of the content. +5. **Consistency:** Using ordered lists ensures a consistent presentation of items, especially when the order is essential to understanding the content. +6. **Styling:** Ordered lists can be styled using CSS to match the design of a website or application, enhancing the visual appeal. +7. **Semantic Meaning:** Ordered lists add semantic meaning to the content, helping search engines and browsers understand the structure of the information. +8. **Easy to Implement:** Creating ordered lists in HTML is straightforward and requires minimal markup, making it easy for developers to include ordered content in web pages. + + +
            + +## Attributes of Ordered Lists (`
              `) + +The `
                ` tag in HTML supports several attributes that allow you to customize the appearance and behavior of ordered lists. Here are some common attributes used with ordered lists: + +### 1. `type` + +The `type` attribute specifies the type of numbering used for the list items. The possible values are: + +1. **Numbers (default):** The list items are numbered with Arabic numerals (1, 2, 3, ...). + +
                + ```html +
                  +
                1. Item 1
                  2. +
                2. Item 2
                  3. +
                3. Item 3
                  4. +
                + ``` + + +
                  +
                1. Item 1
                  2. +
                2. Item 2
                  3. +
                3. Item 3
                  4. +
                +                 + +
                + +2. **Uppercase Letters:** The list items are numbered with uppercase letters (A, B, C, ...). + +
                + ```html +
                  +
                1. Item 1
                  2. +
                2. Item 2
                  3. +
                3. Item 3
                  4. +
                + ``` + + +
                  +
                1. Item 1
                  2. +
                2. Item 2
                  3. +
                3. Item 3
                  4. +
                +                 + +
                + + +
                + +3. **Lowercase Letters:** The list items are numbered with lowercase letters (a, b, c, ...). + +
                + ```html +
                  +
                1. Item 1
                  2. +
                2. Item 2
                  3. +
                3. Item 3
                  4. +
                + ``` + + +
                  +
                1. Item 1
                  2. +
                2. Item 2
                  3. +
                3. Item 3
                  4. +
                +                 + +
                + +4. **Uppercase Roman Numerals:** The list items are numbered with uppercase Roman numerals (I, II, III, ...). + +
                + ```html +
                  +
                1. Item 1
                  2. +
                2. Item 2
                  3. +
                3. Item 3
                  4. +
                + ``` + + +
                  +
                1. Item 1
                  2. +
                2. Item 2
                  3. +
                3. Item 3
                  4. +
                +                 + +
                + + +
                + +5. **Lowercase Roman Numerals:** The list items are numbered with lowercase Roman numerals (i, ii, iii, ...). + +
                + ```html +
                  +
                1. Item 1
                  2. +
                2. Item 2
                  3. +
                3. Item 3
                  4. +
                + ``` + + +
                  +
                1. Item 1
                  2. +
                2. Item 2
                  3. +
                3. Item 3
                  4. +
                +                 + +
                + +### 2. `start` + +The `start` attribute specifies the starting value of the list items. This attribute is useful when you want the list to start at a value other than 1. + +
                +```html +
                  +
                1. Item 5
                  2. +
                2. Item 6
                  3. +
                3. Item 7
                  4. +
                +``` + + +
                  +
                1. Item 5
                  2. +
                2. Item 6
                  3. +
                3. Item 7
                  4. +
                +                 + +
                + +### 3. `reversed` + +The `reversed` attribute reverses the numbering of the list items. The last item in the list is numbered first, and the first item is numbered last. + +
                +```html +
                  +
                1. Item 1
                  2. +
                2. Item 2
                  3. +
                3. Item 3
                  4. +
                +``` + + +
                  +
                1. Item 1
                  2. +
                2. Item 2
                  3. +
                3. Item 3
                  4. +
                +                 + +
                + + +
                + +### 4. `compact` + +The `compact` attribute is a deprecated attribute that specifies whether the list should have reduced spacing between items. It is not recommended for use in modern web development. + +### 5. `class` + +The `class` attribute specifies one or more CSS classes to apply to the list for styling purposes. + +```html title="index.html" + + + + + + Styled Ordered List + + + +

                Styled Ordered List

                +
                  +
                1. Item 1
                  2. +
                2. Item 2
                  3. +
                3. Item 3
                  4. +
                + + +``` + + +<> +

                Styled Ordered List

                +
                  +
                1. Item 1
                  2. +
                2. Item 2
                  3. +
                3. Item 3
                  4. +
                + +                 + +## Conclusion + +Ordered lists in HTML are a useful way to present information in a specific order. By using the `
                  ` tag, you can create lists that are numbered or lettered to indicate the sequence of items. The attributes of the `
                    ` tag allow you to customize the appearance and behavior of ordered lists, making them versatile for various scenarios. \ No newline at end of file diff --git a/docs/html/lists/unordered-lists.mdx b/docs/html/lists/unordered-lists.mdx new file mode 100644 index 0000000..b82064a --- /dev/null +++ b/docs/html/lists/unordered-lists.mdx @@ -0,0 +1,180 @@ +--- +id: unordered-lists +title: "HTML Unordered Lists" +sidebar_label: Unordered Lists +sidebar_position: 2 +tags: [html, web-development, unordered-lists, lists] +description: "In this tutorial, you will learn about unordered lists in HTML. Unordered lists are used to display a list of items in no particular order." +keywords: [html unordered lists, html ul, html list items, html list tags, html unordered list example, html unordered list tutorial, html lists tutorial, html in 2024] +hide_table_of_contents: true +--- + +Unordered lists in HTML are used to represent a collection of items without any specific order or sequence. Each item in the list is displayed with a bullet point or other marker to indicate that it is part of a list. Unordered lists are commonly used for navigation menus, itemized lists, and other scenarios where the order of items is not important. + + +
                    + +## Creating an Unordered List + +To create an unordered list in HTML, you use the `
                      ` (unordered list) tag. Each item in the list is represented by the `
                    • ` (list item) tag. Here's an example of an unordered list with three items: + +```html title="index.html" + + + + + + Unordered List Example + + +

                      My Favorite Fruits

                      +
                        +
                      • Apple
                        • +
                      • Orange
                        • +
                      • Banana
                        • +
                      + + +``` + + +<> +

                      My Favorite Fruits

                      +
                        +
                      • Apple
                        • +
                      • Orange
                        • +
                      • Banana
                        • +
                      + +                       + +In this example, the list contains three items: "Apple," "Orange," and "Banana." Each item is displayed with a bullet point by default. + + +
                      + +## Why Use Unordered Lists? + +1. **Flexibility:** Unordered lists are versatile and can be used in various contexts, such as navigation menus, itemized lists, and feature lists. +2. **Visual Hierarchy:** The use of bullet points or other markers helps create a visual hierarchy that distinguishes list items from surrounding content. +3. **Accessibility:** Screen readers and other assistive technologies can interpret unordered lists, making content more accessible to users with disabilities. +4. **Consistency:** Using unordered lists ensures a consistent and structured presentation of items, improving the overall readability of the content. +5. **Styling:** Unordered lists can be styled using CSS to match the design of a website or application, providing a cohesive visual experience. +6. **Semantic Meaning:** Unordered lists add semantic meaning to the content, helping search engines and browsers understand the structure of the information. +7. **Easy to Implement:** Creating unordered lists in HTML is straightforward and requires minimal markup, making it easy for developers to add lists to web pages. +8. **Cross-Browser Compatibility:** Unordered lists are supported by all major web browsers, ensuring consistent rendering across different platforms. + +## Customizing Unordered Lists + +You can customize the appearance of unordered lists using CSS to match the design of your website. Common styling options include changing the bullet style, size, color, and spacing. Here's an example of customizing the bullet style of an unordered list: + +```css title="styles.css" +ul { + list-style-type: square; + color: #007bff; +} +``` + +In this CSS code snippet, we set the `list-style-type` property to "square" to change the bullet style of the unordered list to squares. We also change the color of the bullets to blue using the `color` property. + + +
                      + +## Nested Unordered Lists + +Unordered lists can be nested within other lists to create a hierarchical structure. This is useful when you have a list of items that contain sub-items or categories. Here's an example of a nested unordered list: + +```html title="index.html" +
                        +
                      • Fruits +
                          +
                        • Apple
                          • +
                        • Orange
                          • +
                        • Banana
                          • +
                        +
                        • +
                      • Vegetables +
                          +
                        • Carrot
                          • +
                        • Broccoli
                          • +
                        • Spinach
                          • +
                        +
                        • +
                      +``` + + +
                      +
                        +
                      • + Fruits +
                          +
                        • Apple
                          • +
                        • Orange
                          • +
                        • Banana
                          • +
                        +
                        • +
                      • + Vegetables +
                          +
                        • Carrot
                          • +
                        • Broccoli
                          • +
                        • Spinach
                          • +
                        +
                        • +
                      +
                      +                       + +In this example, the main list contains two items: "Fruits" and "Vegetables." Each item has a nested list of sub-items. This structure helps organize the content into categories and subcategories. + + +
                      + +## Attributes of the `
                        ` Tag + +The `
                          ` tag supports several attributes that allow you to customize the appearance and behavior of unordered lists. Some common attributes include: + +- `type`: Specifies the type of bullet or marker used for list items. Possible values include "disc," "circle," and "square." +- `start`: Specifies the starting value of the list items. Useful for creating lists that do not start at 1. +- `compact`: Deprecated attribute that specifies whether the list should have reduced spacing between items. Not recommended for use in modern web development. +- `class`: Specifies one or more CSS classes to apply to the list for styling purposes. +- `id`: Specifies a unique identifier for the list, which can be used for scripting or styling purposes. +- `style`: Specifies inline CSS styles to apply to the list. +- `title`: Specifies a title or tooltip for the list, which is displayed when the user hovers over the list. +- `aria-*`: Attributes for defining accessible roles, states, and properties for assistive technologies. +- `role`: Specifies the role of the list in the document structure. + + +### Example: Using the `type` Attribute + +You can use the `type` attribute to change the bullet style of an unordered list. Here's an example: + +
                          + +```html title="index.html" +
                            +
                          • Item 1
                            • +
                          • Item 2
                            • +
                          • Item 3
                            • +
                          +``` + + +
                            +
                          • Item 1
                            • +
                          • Item 2
                            • +
                          • Item 3
                            • +
                          +                           + +
                          + +In this example, we use the `type="circle"` attribute to change the bullet style of the unordered list to circles. + + +
                          + +## Conclusion + +Unordered lists in HTML are a versatile and effective way to present a collection of items without a specific order. By using the `
                            ` and `
                          • ` tags, you can create structured lists that enhance the readability and organization of your content. Whether you're creating a simple list of items or a complex hierarchy of categories and subcategories, unordered lists provide a flexible and accessible solution for displaying information on the web. \ No newline at end of file diff --git a/docs/html/multimedia/_category_.json b/docs/html/multimedia/_category_.json new file mode 100644 index 0000000..7fafa8e --- /dev/null +++ b/docs/html/multimedia/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Multimedia", + "position": 12, + "link": { + "type": "generated-index", + "description": "In this section, you will learn how to use the multimedia in html. You will learn how to add images, videos, and audio to your web pages." + } + } \ No newline at end of file diff --git a/docs/html/multimedia/adding-audio-and-video.mdx b/docs/html/multimedia/adding-audio-and-video.mdx new file mode 100644 index 0000000..a71cb87 --- /dev/null +++ b/docs/html/multimedia/adding-audio-and-video.mdx @@ -0,0 +1,79 @@ +--- +id: adding-audio-and-video +title: Adding Audio and Video in HTML +sidebar_label: Adding Audio and Video +sidebar_position: 1 +tags: [html, web-development, multimedia, audio, video] +description: "In this tutorial, you will learn how to add audio and video to your HTML documents using the