Structured Graphics in dhtml and active controls.docx

Structured graphics Creating structured graphics in DHTML (Dynamic HTML) typically involves using HTML, CSS, and JavaScript to manipulate graphical elements on a webpage. While DHTML itself does not have built-in graphic capabilities like SVG or canvas, you can use a combination of HTML elements and scripting to create dynamic, structured graphics. You can use HTML elements like div, span, img, or even SVG elements to represent graphical components. For example, a div can be styled to appear as a rectangle or circle. CSS is used for styling elements to create shapes, colors, and positions that represent graphics. You can use border-radius, background-color, width, and height properties for shapes. JavaScript is used to manipulate the DOM (Document Object Model) and make the graphics interactive or animated. You can change properties dynamically, such as position, size, and color, based on user input or time intervals <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Structured Graphics in DHTML</title> <style> /* Styling the circle */ #circle { width: 100px; height: 100px; border-radius: 50%; /* Make it round */ background-color: blue; position: absolute; left: 100px;

top: 100px; } </style> </head> <body> <div id="circle"></div> <script> // JavaScript to change the circle's position and color let circle = document.getElementById("circle"); let colors = ["blue", "green", "red", "yellow"]; let colorIndex = 0; // Change color every 1 second setInterval(() => { circle.style.backgroundColor = colors[colorIndex]; colorIndex = (colorIndex + 1) % colors.length; }, 1000); // Move the circle around every 2 seconds let x = 100; let y = 100; setInterval(() => { x += 10; y += 10; circle.style.left = x + "px"; circle.style.top = y + "px"; }, 2000);

</script> </body> </html> If you want more complex graphics, such as shapes, lines, or animations, you might want to use the <canvas> element, which allows you to draw 2D graphics with JavaScript. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Canvas Graphics in DHTML</title> </head> <body> <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas> <script> // Accessing the canvas element and its context let canvas = document.getElementById("myCanvas"); let ctx = canvas.getContext("2d"); // Drawing a rectangle ctx.fillStyle = "blue"; ctx.fillRect(50, 50, 150, 100); // Drawing a line

ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(200, 150); ctx.strokeStyle = "red"; ctx.stroke(); </script> </body> </html> Active controls Active controls in DHTML (Dynamic HTML) refer to interactive elements on a webpage that can be manipulated using HTML, CSS, and JavaScript to create dynamic, user-driven experiences. These controls include things like buttons, input fields, dropdowns, sliders, and other elements that respond to user actions, events, or changes. In DHTML, "active" refers to the ability of these controls to respond to events like mouse clicks, keyboard input, or page load, and update the page dynamically without requiring a full page reload. JavaScript plays a critical role in enabling this interactivity, often by adding event listeners that respond to actions like click, mouseover, change, etc. Buttons Buttons are one of the simplest active controls in DHTML. They can trigger actions when clicked. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Active Button Example</title> <script>

function showAlert() { alert("Button clicked!"); } </script> </head> <body> <button onclick="showAlert()">Click Me</button> </body> </html> The <button> element is used here, and the onclick event is used to trigger a JavaScript function when the button is clicked. showAlert() is a JavaScript function that displays an alert when the button is clicked. Text Input (Form Controls) Text input fields are interactive and can be used for user input. You can capture their value and take action based on that. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Active Text Input Example</title> <script> function displayInputValue() { let inputValue = document.getElementById("userInput").value;

alert("You entered: " + inputValue); } </script> </head> <body> <input type="text" id="userInput" placeholder="Enter something here"> <button onclick="displayInputValue()">Submit</button> </body> </html> The <input> element allows users to enter text, and the value property is used to retrieve the text inputted by the user. The displayInputValue() function displays the input value when the button is clicked. Dropdown (Select Box) A dropdown is another active control, which lets users select an option from a list. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Active Dropdown Example</title> <script> function showSelectedOption() { let selectedOption = document.getElementById("fruitSelect").value;

alert("You selected: " + selectedOption); } </script> </head> <body> <select id="fruitSelect" onchange="showSelectedOption()"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="orange">Orange</option> </select> </body> </html> The <select> element creates a dropdown menu with options. The onchange event triggers when the user selects an option, and the value of the selected option is retrieved using JavaScript. Checkbox Checkboxes are used for binary (yes/no) selections. They can be toggled on and off. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Active Checkbox Example</title>

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Active Slider Example</title> <script> function updateSliderValue() { let sliderValue = document.getElementById("volumeSlider").value; document.getElementById("volumeOutput").innerText = "Volume: " + sliderValue; } </script> </head> <body> <input type="range" id="volumeSlider" min="0" max="100" value="50" oninput="updateSliderValue()"> <p id="volumeOutput">Volume: 50</p> </body> </html> The <input type="range"> creates a slider. The oninput event triggers every time the user moves the slider, and the slider's value is retrieved and displayed dynamically. Radio Buttons Radio buttons allow users to choose between multiple options, but only one option can be selected at a time. <!DOCTYPE html> <html lang="en">

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Active Radio Button Example</title> <script> function showSelectedRadio() { let radios = document.getElementsByName("color"); for (let radio of radios) { if (radio.checked) { alert("You selected: " + radio.value); } } } </script> </head> <body> <input type="radio" name="color" value="Red"> Red<br> <input type="radio" name="color" value="Green"> Green<br> <input type="radio" name="color" value="Blue"> Blue<br> <button onclick="showSelectedRadio()">Submit</button> </body> </html> Audio Controls:

To embed an audio file in an HTML document, you can use the <audio> element. This element allows you to embed sound content in your page, such as music, a podcast, or any other audio file. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Audio Example</title> </head> <body> <h1>Listen to this audio</h1> <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </body> </html> <audio>: This is the container element for audio. controls: This attribute adds built-in controls to the audio player, such as play, pause, volume, and seek bar. <source>: Specifies the path to the audio file and its type. In this case, it's an MP3 file (audiofile.mp3), but you can also use other formats like .ogg, .wav, etc. The text "Your browser does not support the audio element" will display if the browser doesn't support the <audio> tag.

Radio buttons with the same name attribute form a group, allowing only one option to be selected. The showSelectedRadio() function checks which radio button is selected and displays it. Video Controls: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Video Example</title> </head> <body> <h1>Watch this video</h1>  <video id="myVideo" width="640" height="360" controls> <source src="https://www.youtube.com/watch? v=plPnI_rVG9Q&list=RDplPnI_rVG9Q&start_radio=1" type="video/mp4"> <source src="video.ogg" type="video/ogg"> Your browser does not support the video element. </video>  <button onclick="playVideo()">Play</button> <button onclick="pauseVideo()">Pause</button>

<button onclick="changeVolume(0.5)">Set Volume to 50%</button> <script> // Get the video element const video = document.getElementById('myVideo'); // Play video function playVideo() { video.play(); } // Pause video function pauseVideo() { video.pause(); } // Change volume function changeVolume(volume) { video.volume = volume; // volume is between 0 and 1 } </script> </body> </html> Navigator Object: The JavaScript navigator object is used for browser detection. It can be used to get browser information such as appName, appCodeName, userAgent etc. The navigator object is the window property, so it can be accessed by:

window.navigator No. Property Description 1 appName returns the name 2 appVersion returns the version 3 appCodeName returns the code name 4 cookieEnabled returns true if cookie is enabled otherwise false 5 userAgent returns the user agent 6 language returns the language. It is supported in Netscape and Firefox only. 7 userLanguage returns the user language. It is supported in IE only. 8 plugins returns the plugins. It is supported in Netscape and Firefox only. 9 systemLanguage returns the system language. It is supported in IE only. <script> document.writeln("<br/>navigator.appCodeName: "+navigator.appCodeName); document.writeln("<br/>navigator.appName: "+navigator.appName);

document.writeln("<br/>navigator.appVersion: "+navigator.appVersion); document.writeln("<br/>navigator.cookieEnabled: "+navigator.cookieEnabled); document.writeln("<br/>navigator.language: "+navigator.language); document.writeln("<br/>navigator.userAgent: "+navigator.userAgent); document.writeln("<br/>navigator.platform: "+navigator.platform); document.writeln("<br/>navigator.onLine: "+navigator.onLine); </script> Screen Object: <script> document.writeln("<br/>screen.width: "+screen.width); document.writeln("<br/>screen.height: "+screen.height); document.writeln("<br/>screen.availWidth: "+screen.availWidth); document.writeln("<br/>screen.availHeight: "+screen.availHeight); document.writeln("<br/>screen.colorDepth: "+screen.colorDepth); document.writeln("<br/>screen.pixelDepth: "+screen.pixelDepth); </script> HTML <meta> tag HTML <meta> tag is used to represent the metadata about the HTML document. It specifies page description, keywords, copyright, language, author of the documents, etc.

The metadata does not display on the webpage, but it is used by search engines, browsers and other web services which scan the site or webpage to know about the webpage. With the help of meta tag, you can experiment and preview that how your webpage will render on the browser. The <meta> tag is placed within the <head> tag, and it can be used more than one times in a document. 1. <meta charset="utf-8"> It defines the character encoding. The value of charset is "utf-8" which means it will support to display any language. 2. <meta name="keywords" content="HTML, CSS, JavaScript, Tutorials"> It specifies the list of keyword which is used by search engines. 3. <meta name="description" content="Courses available in Avanthi Colleges"> It defines the website description which is useful to provide relevant search performed by search engines. 4. <meta name="author" content="thisauthor"> It specifies the author of the page. It is useful to extract author information by Content management system automatically. 5. <meta name="refresh" content="50"> It specifies to provide instruction to the browser to automatically refresh the content after every 50sec (or any given time). 6. <meta http-equiv="refresh" content="5; url=https://avanthimca.ac.in/infra"> In the above example we have set a URL with content so it will automatically redirect to the given page after the provided time.

7. <meta name="viewport" content="width=device-width, initial-scale=1.0"> It specifies the viewport to control the page dimension and scaling so that our website looks good on all devices. If this tag is present, it indicates that this page is mobile device supported. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="HTML, CSS, JavaScript, Tutorials"> <meta name="description" content="Courses available in Avanthi college"> <meta name="author" content="thisauthor"> <meta http-equiv="refresh" content="5; url=https://avanthimca.ac.in/infra"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>Example of Meta tag</h2> <p>This example shows the use of meta tag within an HTML document</p> </body> </html>

Structured Graphics in dhtml and active controls.docx

More Related Content

Similar to Structured Graphics in dhtml and active controls.docx

More from Ramakrishna Reddy Bijjam

Recently uploaded

Structured Graphics in dhtml and active controls.docx