added HTML 5 content

Author: ajay-dhangar

docs/_scripts/MyFirstHTML5Audio.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const MyFirstHTML5Audio = () => {
+    return (
+        <div>
+            <h1>My First HTML5 Audio</h1>
+            <audio controls>
+                <source src="/audio/audio.mp3" type="audio/mp3" />
+                Your browser does not support the audio tag.
+            </audio>
+        </div>
+    );
+};
+
+export default MyFirstHTML5Audio;

docs/_scripts/MyFirstHTML5Canvas.js

@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+
+const MyFirstHTML5Canvas = () => {
+    useEffect(() => {
+        const canvas = document.getElementById('myCanvas');
+        if (canvas) {
+            const ctx = canvas.getContext('2d');
+            ctx.fillStyle = 'lightblue';
+            ctx.fillRect(0, 0, 200, 100);
+            ctx.fillStyle = 'black';
+            ctx.font = '20px Arial';
+            ctx.fillText('Hello Canvas', 50, 50);
+        }
+    }, []);
+
+    return (
+        <div>
+            <h1>My First HTML5 Canvas</h1>
+            <canvas id="myCanvas" width="200" height="100"></canvas>
+        </div>
+    );
+};
+
+export default MyFirstHTML5Canvas;

docs/_scripts/MyFirstHTML5Form.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const MyFirstHTML5Form = () => {
+    return (
+        <div>
+            <h1>Contact Us</h1>
+            <form>
+                <label htmlFor="name">Name:</label>
+                <input type="text" id="name" name="name" required />
+
+                <label htmlFor="email">Email:</label>
+                <input type="email" id="email" name="email" required />
+
+                <label htmlFor="phone">Phone:</label>
+                <input type="tel" id="phone" name="phone" />
+
+                <label htmlFor="message">Message:</label>
+                <textarea id="message" name="message" required></textarea>
+
+                <input type="submit" value="Submit" />
+            </form>
+        </div>
+    );
+};
+
+export default MyFirstHTML5Form;

docs/_scripts/MyFirstHTML5Page.js

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const MyFirstHTML5Page = () => {
+    return (
+        <div>
+            <header>
+                <h1>Welcome to My Website</h1>
+                <nav>
+                    <ul>
+                        <li><a href="#">Home</a></li>
+                        <li><a href="#">About</a></li>
+                        <li><a href="#">Contact</a></li>
+                    </ul>
+                </nav>
+            </header>
+            <main>
+                <article>
+                    <h2>My First Blog Post</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </article>
+                <section>
+                    <h2>About Me</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </section>
+                <aside>
+                    <h3>Related Links</h3>
+                    <ul>
+                        <li><a href="#">Link 1</a></li>
+                        <li><a href="#">Link 2</a></li>
+                        <li><a href="#">Link 3</a></li>
+                    </ul>
+                </aside>
+            </main>
+            <footer>
+                <p>&copy; 2021 My Website. All rights reserved.</p>
+            </footer>
+        </div>
+    );
+};
+
+export default MyFirstHTML5Page;

docs/_scripts/MyFirstHTML5Video.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const MyFirstHTML5Video = () => {
+    return (
+        <div>
+            <h1>My First HTML5 Video</h1>
+            <video controls style={{ width: '100%' }}>
+                <source src="/videos/video-1.mp4" type="video/mp4" />
+                Your browser does not support the video tag.
+            </video>
+        </div>
+    );
+};
+
+export default MyFirstHTML5Video;

docs/_scripts/MyFirstHTML5WebStorageEx1.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+
+const MyFirstHTML5WebStorageEx1 = () => {
+    const [output, setOutput] = useState('');
+
+    const saveData = () => {
+        localStorage.setItem('name', 'John Doe');
+        localStorage.setItem('email', '[email protected]');
+    };
+
+    const retrieveData = () => {
+        const name = localStorage.getItem('name');
+        const email = localStorage.getItem('email');
+        setOutput(`Name: ${name}, Email: ${email}`);
+    };
+
+    return (
+        <div>
+            <h1>My First Web Storage Example</h1>
+            <button onClick={saveData}>Save Data</button>
+            <button onClick={retrieveData}>Retrieve Data</button>
+            <p>{output}</p>
+        </div>
+    );
+};
+
+export default MyFirstHTML5WebStorageEx1;

docs/_scripts/MyFirstHTML5WebStorageEx2.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+
+const MyFirstHTML5WebStorageEx2 = () => {
+    const [output, setOutput] = useState('');
+
+    const saveData = () => {
+        sessionStorage.setItem('name', 'Jane Doe');
+        sessionStorage.setItem('email', '[email protected]');
+    };
+
+    const retrieveData = () => {
+        const name = sessionStorage.getItem('name');
+        const email = sessionStorage.getItem('email');
+        setOutput(`Name: ${name}, Email: ${email}`);
+    };
+
+    return (
+        <div>
+            <h1>My First Web Storage Example</h1>
+            <button onClick={saveData}>Save Data</button>
+            <button onClick={retrieveData}>Retrieve Data</button>
+            <p>{output}</p>
+        </div>
+    );
+};
+
+export default MyFirstHTML5WebStorageEx2;

docs/_scripts/MyFirstHTML5WebStorageEx3.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+
+const MyFirstHTML5WebStorageEx3 = () => {
+    const [output, setOutput] = useState('');
+
+    const getLocation = () => {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(showPosition, showError);
+        } else {
+            setOutput('Geolocation is not supported by this browser.');
+        }
+    };
+
+    const showPosition = (position) => {
+        const latitude = position.coords.latitude;
+        const longitude = position.coords.longitude;
+        setOutput(`Latitude: ${latitude}, Longitude: ${longitude}`);
+    };
+
+    const showError = (error) => {
+        setOutput(`Error: ${error.message}`);
+    };
+
+    return (
+        <div>
+            <h1>My First Geolocation Example</h1>
+            <button onClick={getLocation}>Get Location</button>
+            <p>{output}</p>
+        </div>
+    );
+};
+
+export default MyFirstHTML5WebStorageEx3;

docs/_scripts/MyFirstHTML5WebStorageEx4.js

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+
+const MyFirstHTML5WebStorageEx4 = () => {
+  const [location, setLocation] = useState(null);
+  const [error, setError] = useState(null);
+  const [watchId, setWatchId] = useState(null);
+
+  const startTracking = () => {
+    if (navigator.geolocation) {
+      const id = navigator.geolocation.watchPosition(
+        (position) => showPosition(position),
+        (error) => showError(error)
+      );
+      setWatchId(id);
+    } else {
+      setError('Geolocation is not supported by this browser.');
+    }
+  };
+
+  const stopTracking = () => {
+    if (watchId) {
+      navigator.geolocation.clearWatch(watchId);
+      setWatchId(null);
+      setLocation(null);
+      setError(null);
+    }
+  };
+
+  const showPosition = (position) => {
+    const { latitude, longitude } = position.coords;
+    setLocation(`Latitude: ${latitude}, Longitude: ${longitude}`);
+  };
+
+  const showError = (error) => {
+    setError(`Error: ${error.message}`);
+  };
+
+  return (
+    <div>
+      <h1>My First Geolocation Example</h1>
+      <button onClick={startTracking}>Start Tracking</button>
+      <button onClick={stopTracking}>Stop Tracking</button>
+      <p>{location ? location : error}</p>
+    </div>
+  );
+};
+
+export default MyFirstHTML5WebStorageEx4;

docs/html-5/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "👩🏻‍💻 HTML 5",
+  "position": 5,
+  "link": {
+    "type": "generated-index",
+    "description": "Learn the basics of HTML5 and how to create a simple webpage."
+  }
+}

docs/html-5/graphics.mdx

@@ -0,0 +1,59 @@
+---
+sidebar_position: 5
+---
+
+import MyFirstHTML5Canvas from '../_scripts/MyFirstHTML5Canvas';
+
+# 🙋🏻 HTML Graphics
+
+HTML5 introduces new graphics elements and APIs that allow developers to create interactive graphics and animations directly in the browser. These elements and APIs provide powerful tools for creating visually rich and engaging web applications.
+
+Some of the new graphics elements and APIs introduced in HTML5 include:
+
+- **Canvas Element**: The `<canvas>` element is used to draw graphics, animations, and interactive content directly in the browser using JavaScript. It provides a drawing surface that can be manipulated with JavaScript to create custom graphics and animations.
+
+- **SVG Element**: The `<svg>` element is used to embed scalable vector graphics (SVG) in a web page. SVG is a markup language for describing two-dimensional graphics and animations that can be scaled to any size without losing quality. The `<svg>` element provides a powerful tool for creating high-quality graphics and animations in web applications.
+
+- **WebGL API**: The WebGL API is a JavaScript API for rendering 3D graphics in a web browser. It provides a low-level interface to the graphics hardware, allowing developers to create high-performance 3D graphics and animations directly in the browser.
+
+By using these new graphics elements and APIs, you can create visually rich and interactive web applications that provide a more engaging user experience for your website visitors. These elements and APIs provide powerful tools for creating custom graphics, animations, and visual effects that enhance the look and feel of your web applications.
+
+## Example
+
+Here's an example of how you can use the `<canvas>` element to draw a simple graphic in an HTML document:
+
+```html title="index.html"
+<!DOCTYPE html>
+<html>
+<head>
+    <title>My First HTML5 Canvas</title>
+</head>
+<body>
+    <h1>My First HTML5 Canvas</h1>
+    <canvas id="myCanvas" width="200" height="100"></canvas>
+    <script>
+        const canvas = document.getElementById('myCanvas');
+        if (canvas) {
+            const ctx = canvas.getContext('2d');
+            ctx.fillStyle = 'lightblue';
+            ctx.fillRect(0, 0, 200, 100);
+            ctx.fillStyle = 'black';
+            ctx.font = '20px Arial';
+            ctx.fillText('Hello Canvas', 50, 50);
+        }
+    </script>
+</body>
+</html>
+```
+
+<BrowserWindow url="http://.../index.html">
+  <MyFirstHTML5Canvas />
+</BrowserWindow>
+
+In this example, we've used the `<canvas>` element to draw a simple graphic in an HTML document. We've created a canvas with a width of 200 pixels and a height of 100 pixels and used the `getContext('2d')` method to get a 2D drawing context for the canvas. We've then used the `fillRect()` and `fillText()` methods to draw a blue rectangle and text on the canvas.
+
+By using the `<canvas>` element and JavaScript, you can create custom graphics and animations directly in the browser, making your web applications more visually engaging and interactive for your website visitors. The `<canvas>` element provides a powerful tool for creating dynamic and interactive graphics that enhance the user experience of your web applications.
+
+## Conclusion
+
+HTML5 introduces new graphics elements and APIs that provide powerful tools for creating custom graphics and animations directly in the browser. By using these elements and APIs, you can create visually rich and interactive web applications that provide a more engaging user experience for your website visitors. These elements and APIs allow you to create high-quality graphics, animations, and visual effects that enhance the look and feel of your web applications.