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>
<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>
<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>
<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>
<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>
<title>Active Checkbox Example</title>

<html lang="en">
<head>
<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>
<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>
<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>
<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">
</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 (20)

More from Ramakrishna Reddy Bijjam (20)

Recently uploaded (20)

Structured Graphics in dhtml and active controls.docx