From 77127e901f4ed5d747e60795aef4569811921b8e Mon Sep 17 00:00:00 2001 From: Ajay-Dhangar Date: Fri, 10 Jan 2025 20:27:53 +0530 Subject: [PATCH] added more content in Docs --- .../html/html5-apis/_scripts/CanvasExample.js | 26 +++ .../html5-apis/_scripts/GeolocationExample.js | 43 ++++ .../_scripts/LocalStorageExample.js | 35 +++ docs/html/html5-apis/_scripts/SVGExample.js | 14 ++ .../_scripts/SessionStorageExample.js | 35 +++ .../html5-apis/canvas-and-svg-graphics.md | 146 ++++++------ docs/html/html5-apis/geolocation-api.md | 190 ++++++++++------ .../local-storage-and-session-storage.md | 136 ++++++++---- docs/html/intro-html.md | 17 +- .../multimedia-attributes-and-controls.md | 209 +++++++++++------- 10 files changed, 576 insertions(+), 275 deletions(-) create mode 100644 docs/html/html5-apis/_scripts/CanvasExample.js create mode 100644 docs/html/html5-apis/_scripts/GeolocationExample.js create mode 100644 docs/html/html5-apis/_scripts/LocalStorageExample.js create mode 100644 docs/html/html5-apis/_scripts/SVGExample.js create mode 100644 docs/html/html5-apis/_scripts/SessionStorageExample.js diff --git a/docs/html/html5-apis/_scripts/CanvasExample.js b/docs/html/html5-apis/_scripts/CanvasExample.js new file mode 100644 index 000000000..d40817c33 --- /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 000000000..7c92c8fbc --- /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 000000000..2b306617d --- /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 000000000..23076165b --- /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 000000000..346809701 --- /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.md b/docs/html/html5-apis/canvas-and-svg-graphics.md index 42eae3094..1ef4a1a14 100644 --- a/docs/html/html5-apis/canvas-and-svg-graphics.md +++ b/docs/html/html5-apis/canvas-and-svg-graphics.md @@ -5,91 +5,89 @@ 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, + ] --- -# Canvas and SVG Graphics in HTML - -## Introduction -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. Both Canvas and SVG offer powerful tools for creating rich web graphics, but they serve slightly different purposes. Canvas is ideal for dynamic, pixel-based graphics, while SVG is best suited for static or interactive vector graphics. - -## Using Canvas -The HTML `` element is used to draw graphics on a web page. The actual drawing is done with JavaScript. Here's a basic example that draws a rectangle: -```html - - - - - - +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

+ + + ``` -### Example Explained -- The `` element creates a drawing surface. -- JavaScript is used to access the drawing context and perform the drawing. -- The `getContext("2d")` method gets the 2D drawing context. -- Various methods are used to draw on the canvas. + + + + +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 -## Using SVG -SVG (Scalable Vector Graphics) is used to define vector-based graphics for the Web. Here's a basic example that draws a circle: +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. -```html - - - - +Here's an example of how to use SVG graphics in HTML: + +```html title="index.html" + + + + + + SVG Example + + +

SVG Example

+ + - + ``` -### Example Explained -- The `` element defines a container for SVG graphics. -- The `` element is used to draw a circle. -- Attributes of the `` element define the shape's properties. - -## Differences Between Canvas and SVG -- **Canvas** is pixel-based, whereas **SVG** is vector-based. -- Canvas is better for dynamic graphics and intense computational tasks. -- SVG is better for high-quality static graphics, and it supports interactivity and animation. - -## Comparison of SVG and Canvas -The table below shows some important differences between Canvas and SVG: - - - - - - - - - - - -
SVGCanvas
-
    -
  • Resolution independent
    • -
  • Support for event handlers
    • -
  • Good text rendering capabilities
    • -
  • Slow rendering if complex
    • -
  • Not suited for game applications
    • -
- 		-
    -
  • Resolution dependent
    • -
  • No support for event handlers
    • -
  • Poor text rendering capabilities
    • -
  • You can save the resulting image as .png or .jpg
    • -
  • Well suited for graphic-intensive games
    • -
-
+ + + + +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 -Both Canvas and SVG graphics play important roles in modern web development. Choosing between them depends on the specific needs of your project. Canvas offers a flexible pixel-based approach for dynamic graphics, while SVG provides a scalable, interactive solution for vector graphics. Understanding how to use both technologies allows you to take full advantage of their capabilities to create engaging and visually appealing web pages. -Remember to consider the performance implications of each approach and test across different browsers to ensure compatibility and optimal user experience. \ No newline at end of file +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.md b/docs/html/html5-apis/geolocation-api.md index 55f09a276..f209e2628 100644 --- a/docs/html/html5-apis/geolocation-api.md +++ b/docs/html/html5-apis/geolocation-api.md @@ -5,94 +5,140 @@ 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, + ] --- -# Geolocation API in HTML +import GeolocationExample from './\_scripts/GeolocationExample'; -## Introduction -In this tutorial, you will learn how to use the Geolocation API to get the user's current location in a web page. The HTML Geolocation API is crucial for creating location-aware web applications. It allows you to locate a user's position and use this information to provide a more personalized user experience. +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. -## Locating the User's Position -The HTML Geolocation API is used to get the geographical position of a user. Since accessing a user's location can compromise privacy, the API only works if the user grants permission. +In this tutorial, you will learn how to use the Geolocation API to get the user's current location in a web page. -### Using HTML Geolocation -The `getCurrentPosition()` method is used to return the user's position. Here's a basic example that displays the latitude and longitude: + -```html +## 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" - - -

HTML Geolocation

-

Click the button to get your coordinates.

- - - -

- - - + + + + + Geolocation API Example + + +

Geolocation API Example

+

Click the button to get your current location.

+ +

+ + ``` -### Example Explained -- Checks if Geolocation is supported by the browser. -- If supported, runs the `getCurrentPosition()` method. If not, displays a message to the user. -- If `getCurrentPosition()` is successful, it returns a coordinates object to the `showPosition` function. -- The `showPosition()` function outputs the Latitude and Longitude. + + + + +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 -### Handling Errors and Rejections -Errors are handled by passing a second function to `getCurrentPosition()`, which deals with potential errors: +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 -function showError(error) { - switch(error.code) { - case error.PERMISSION_DENIED: - x.innerHTML = "User denied the request for Geolocation." - break; - case error.POSITION_UNAVAILABLE: - x.innerHTML = "Location information is unavailable." - break; - case error.TIMEOUT: - x.innerHTML = "The request to get user location timed out." - break; - case error.UNKNOWN_ERROR: - x.innerHTML = "An unknown error occurred." - break; - } -} +let watchId = navigator.geolocation.watchPosition( + successCallback, + errorCallback, + options +); ``` -## Location-specific Information -Geolocation can enhance user experience by providing location-specific information, such as up-to-date local information, points-of-interest near the user, and turn-by-turn navigation. +### `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. -## The `getCurrentPosition()` Method - Return Data -The method returns an object with various properties, such as latitude, longitude, accuracy, and more, depending on availability. +Here's an example of using the `clearWatch()` method: -| Property | Returns | -|---------------------------|---------------------------------------------------| -| coords.latitude | The latitude as a decimal number (always returned)| -| coords.longitude | The longitude as a decimal number (always returned)| -| coords.accuracy | The accuracy of position (always returned) | -| coords.altitude | The altitude in meters above the mean sea level (if available)| -| coords.altitudeAccuracy | The altitude accuracy of position (if available) | -| coords.heading | The heading as degrees clockwise from North (if available)| -| coords.speed | The speed in meters per second (if available) | -| timestamp | The date/time of the response (if available) | +```javascript +navigator.geolocation.clearWatch(watchId); +``` ## Conclusion -The HTML Geolocation API is a powerful tool for web developers looking to create location-aware web applications. By understanding how to request and handle a user's location, developers can significantly enhance the user experience by providing personalized content and services based on the user's geographical location. Remember to always respect user privacy and handle location data responsibly. \ No newline at end of file + +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.md b/docs/html/html5-apis/local-storage-and-session-storage.md index 80acac288..7c098c28e 100644 --- a/docs/html/html5-apis/local-storage-and-session-storage.md +++ b/docs/html/html5-apis/local-storage-and-session-storage.md @@ -5,70 +5,110 @@ 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. -Based on the structure and content of the `geolocation-api.md` file you provided, here is a similar structure for a `local-storage-and-session-storage.md` file: +keywords: + [ + html local storage, + html session storage, + local storage in html, + session storage in html, + html5 local storage, + html5 session storage, + ] --- -# Local Storage and Session Storage in HTML -## Introduction -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. These APIs provide a way to save key/value pairs in a web browser. The data stored in Local Storage persists until explicitly deleted, while data in Session Storage is cleared when the page session ends. +import SessionStorageExample from './_scripts/SessionStorageExample'; +import LocalStorageExample from './_scripts/LocalStorageExample'; -## HTML Web Storage Objects -HTML web storage provides two objects for storing data on the client: +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. -- window.localStorage - stores data with no expiration date -- window.sessionStorage - stores data for one session (data is lost when the browser tab is closed) + +## Local Storage -## Using Local Storage -Local Storage is used to store data that does not expire with the session. Here's a basic example of setting and retrieving a value: +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. -```html - - - - - -``` +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:

+ + +

+ - + var savedName = localStorage.getItem("name"); + if (savedName) { + document.getElementById("message").innerHTML = "Welcome back, " + savedName + "!"; + } + + ``` -### Example Explained -- The `setItem()` method is used to store data in Local Storage or Session Storage. -- The `getItem()` method is used to retrieve data from Local Storage or Session Storage. -- Data stored in Local Storage remains until it is explicitly removed, while data in Session Storage is cleared when the session ends. + + + + +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 -## Handling Data -You can also remove data from storage or clear all data: +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. -```javascript -// Remove item -localStorage.removeItem("lastname"); +Here's an example of how to use Session Storage in HTML: -// Clear all items -localStorage.clear(); +```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 -The Local Storage and Session Storage APIs provide powerful capabilities for web developers to store data directly in the browser. This can enhance user experience by allowing web applications to save user preferences, shopping cart contents, and more across sessions. Remember to consider privacy and security when storing sensitive information. -This markdown file provides a structured and comprehensive guide similar to your `geolocation-api.md` file, focusing on Local Storage and Session Storage in HTML. \ No newline at end of file +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/intro-html.md b/docs/html/intro-html.md index 56487f73a..f1b026bf2 100644 --- a/docs/html/intro-html.md +++ b/docs/html/intro-html.md @@ -3,7 +3,18 @@ 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] +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. --- @@ -117,7 +128,7 @@ HTML is used to create structured documents for the web. To start using HTML, yo

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. @@ -128,4 +139,4 @@ HTML is used to create structured documents for the web. To start using HTML, yo ## 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 +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! diff --git a/docs/html/multimedia/multimedia-attributes-and-controls.md b/docs/html/multimedia/multimedia-attributes-and-controls.md index 5d4df3b70..b11b907ae 100644 --- a/docs/html/multimedia/multimedia-attributes-and-controls.md +++ b/docs/html/multimedia/multimedia-attributes-and-controls.md @@ -5,105 +5,158 @@ sidebar_label: Multimedia Attributes and Controls sidebar_position: 3 tags: [html, web-development, multimedia, multimedia-attributes, multimedia-controls] description: In this tutorial, you will learn about the multimedia attributes and controls available in HTML for embedding audio and video content in your web pages. +keywords: [html multimedia attributes, html multimedia controls, html audio attributes, html video attributes, html multimedia controls, html audio controls, html video controls] --- -## Multimedia Attributes and Controls -Both `