Unit-V: Image Manipulations, Audio and Video & Introduction to JavaScript
Unit-V: Image Manipulations, Audio and Video & Introduction to
JavaScript
I. Image Manipulations, Audio and Video
This section focuses on integrating
and controlling various media types within web pages, enhancing both aesthetics
and functionality.
A. Image
Positioning and Display
1.
Position an Image:
CSS position
property:
·
static (default): Renders elements in
normal document flow.
·
relative: Positions an
element relative to its normal position. Use top, bottom, left, right for offset. Doesn't affect other elements' positions.
·
absolute: Positions an
element relative to its nearest positioned ancestor
(not static). Removed from normal flow.
·
fixed: Positions an element relative to
the viewport. Stays in place even when the page scrolls.
·
sticky: Mix of relative and fixed. Behaves
relatively until a certain scroll point, then becomes fixed.
CSS float
property: Used to wrap text around images (e.g., float: left;, float: right;).
Flexbox/Grid
Layout: Modern, robust methods for precise image placement within complex
layouts.
2.
How to display a shortcut icon in a browser's tab
area (Favicon):
·
Use the <link> element within the
<head> section of your HTML.
·
rel="icon" or rel="shortcut icon" (for broader browser support).
·
href="path/to/your/favicon.ico" (or .png, .gif).
·
type="image/x-icon" (or image/png, image/gif).
·
Example: <link
rel="icon" href="images/mycollege_logo.png"
type="image/png">
·
It's recommended to provide multiple sizes for different
devices/resolutions.
3.
<iframe> (Inline Frame):
·
Embeds another HTML document within the current document.
·
Syntax: <iframe
src="url_of_page" width="value" height="value"
frameborder="0"></iframe>
·
Use Cases: Embedding maps, YouTube videos,
external content, advertisements.
·
Considerations: Security (sandbox attribute),
accessibility, performance, responsive design.
4.
Create an Image Sprite File:
o Concept: Combining multiple
small images (icons, buttons) into a single, larger image file.
o Benefits: Reduces the number
of HTTP requests, leading to faster page loading.
o Implementation
(CSS):
§ Define a div or span for each "sprite" element.
§ Set background-image to the sprite file.
§ Use background-position to display the desired part of the sprite.
§ Define width and height for the visible area of each sprite.
o Example: For a social media
icon sprite, you'd define different background-position values for
Facebook, Twitter, Instagram icons.
B. Audio and Video
Integration
- Implement an audio player using
the audio element:
- Syntax: <audio controls src="audio/mysong.mp3"
type="audio/mpeg"></audio>
- Attributes:
- controls:
Displays default browser controls (play, pause, volume, scrub bar).
- autoplay:
Starts playback automatically (often discouraged for user experience).
- loop:
Repeats the audio.
- muted:
Mutes the audio by default.
- src:
Path to the audio file.
- Multiple Sources: Provide different formats
for cross-browser compatibility.
HTML
<audio controls>
<source src="audio/mysong.mp3" type="audio/mpeg">
<source src="audio/mysong.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
2.
Handle different audio file formats:
- Common Formats:
- .mp3:
Widely supported, good compression.
- .ogg
(Vorbis): Open-source, good quality, less widespread than MP3.
- .wav:
Uncompressed, high quality, large file size.
- Strategy: Provide multiple <source> elements within the <audio> tag, allowing the browser to choose the
first supported format.
3.
Implement a video player using the video
element:
o Syntax: <video controls src="video/myclip.mp4"
type="video/mp4" width="640"
height="360"></video>
o Attributes: Similar to audio (controls, autoplay, loop, muted, src).
o Additional Video
Attributes:
§ poster: URL of an image to display before the video starts playing.
§ width, height: Sets the dimensions of the video
player.
§ preload: Hints to the browser whether to pre-load video metadata, entire video,
or nothing (auto, metadata, none).
o Multiple Sources: Similar to audio
for different video formats.
HTML
<video controls width="640" height="360" poster="images/video_thumbnail.jpg">
<source src="video/myclip.mp4" type="video/mp4">
<source src="video/myclip.webm" type="video/webm">
Your browser does not support the video element.
</video>
·
Common Video Formats: .mp4 (H.264), .webm (VP8/VP9), .ogg (Theora).
C. Web Page Styling
and Layout
1.
Cover a web page's background with an image:
- CSS background-image: body { background-image: url('images/background.jpg'); }
- background-repeat: no-repeat, repeat-x, repeat-y, repeat.
- background-size:
- auto:
Default size.
- cover:
Scales the background image to be as large as possible to cover the
entire container, potentially cropping parts of the image.
- contain:
Scales the background image to be as large as possible without cropping,
ensuring the entire image is visible within the container.
- Specific values (e.g., 100% auto, 500px 300px).
- background-position: center center, top left, 50% 50%,
etc.
- background-attachment: scroll
(default), fixed (image stays fixed when
scrolling).
- Shorthand: background: url('images/background.jpg') no-repeat center center /
cover fixed;
2.
Web Fonts:
- Concept: Using custom fonts that
are not typically installed on a user's computer.
- Methods:
- Google Fonts:
Easiest method. Link the font from Google's CDN in your HTML <head> and use it in your CSS font-family.
- @font-face CSS rule: Self-hosting fonts.
CSS
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
/* Add more formats for wider browser support */
}
body {
font-family: 'MyCustomFont', sans-serif;
}
·
Formats: .woff2 (most efficient), .woff, .ttf, .otf, .svg.
3.
Center a web page's content:
- Block-level elements (e.g., div,
p, img
when display: block):
- Set a width.
- margin: 0
auto;
(top/bottom margin 0, left/right margin auto).
CSS
.container {
width: 80%; /* or fixed width */
margin: 0 auto;
}
- Inline-level elements (e.g., span,
a, text):
- Apply text-align: center; to their parent
block-level element.
- Flexbox: Modern and powerful for
centering in various directions.
- To
center children horizontally and vertically within a flex container:
CSS
.container {
display: flex;
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
height: 100vh; /* Example: full viewport height */
}
·
CSS Grid: Similar to Flexbox, for more complex
2D layouts.
4.
Cover a web page's background with a color
gradient:
- CSS background-image with linear-gradient() or radial-gradient():
- Linear Gradient:
- linear-gradient(direction, color-stop1, color-stop2, ...);
- Direction: to right, to bottom left, angle (e.g., 45deg).
- Example: body { background-image:
linear-gradient(to right, #FF0000, #0000FF); } (Red to Blue, left to right)
- Radial Gradient:
- radial-gradient(shape size at position, color-stop1, color-stop2,
...);
- Shape: circle, ellipse.
- Size: closest-corner, farthest-corner, closest-side, farthest-side.
- Position: center, top left, 50% 50%.
- Example: body { background-image:
radial-gradient(circle at center, #FFFF00, #00FF00); } (Yellow to Green, from center outwards)
II. Introduction to
JavaScript
JavaScript adds interactivity and
dynamic behavior to web pages.
A. Fundamentals
1.
Button control with an Event Handler:
·
Concept: JavaScript reacts to user actions
(events) like clicks, mouseovers, key presses.
·
HTML: <button
id="myButton">Click Me</button>
·
JavaScript (in a <script> tag or external .js
file):
JavaScript
// 1. Get a reference to the button
element
const myButton = document.getElementById('myButton');
// 2. Attach an event listener
myButton.addEventListener('click', function() {
alert('Button clicked!'); // Action to perform on click
});
·
Older method (inline event handler - generally
discouraged): <button
onclick="alert('Button clicked!')">Click Me</button>
2.
Syntax rules for functions, variables, identifiers,
and assignments:
- Variables:
- Declaration:
- var:
Oldest, function-scoped, can be re-declared and re-assigned (avoid if
possible).
- let:
Block-scoped, can be re-assigned, but not re-declared in the same
scope. (Recommended for variables that
change)
- const:
Block-scoped, cannot be re-assigned after initial declaration. (Recommended for variables that don't change)
- Naming (Identifiers):
Must start with a letter, underscore _,
or dollar sign $.
Subsequent characters can be letters, digits, _,
or $.
Case-sensitive. (e.g., userName, totalAmount, _privateVar).
- Assignment: variableName = value; (e.g., let age = 30;, const PI = 3.14;).
- Functions:
- Declaration:
JavaScript
function greet(name) {
return "Hello, " + name + "!";
}
// Calling the function
let message = greet("Alice"); // message will be "Hello, Alice!"
§ Parameters: Variables listed
inside the parentheses () in the function definition.
§ Return Value: return keyword sends a value back from the function.
B. Document Object
Model (DOM)
1.
Document Object Model (DOM):
·
Concept: A programming interface for HTML and
XML documents. It represents the page as a tree structure, where each HTML
element is a "node."
·
Purpose: Allows JavaScript to access,
manipulate, and update the content, structure, and style of a web page
dynamically.
·
Key Objects:
·
document: The top-level
object representing the entire HTML document.
·
element: Represents an HTML tag (e.g., <div>, <p>, <img>).
·
attribute: Represents
attributes of an element (e.g., src, href, id, class).
·
text: Represents the text content within
elements.
·
Common DOM Manipulation Methods:
·
document.getElementById('id'): Gets an element
by its ID.
·
document.querySelector('selector'): Gets the first
element matching a CSS selector.
·
document.querySelectorAll('selector'): Gets all elements
matching a CSS selector (returns a NodeList).
·
element.innerHTML: Gets or sets the
HTML content of an element.
·
element.textContent: Gets or sets the
text content of an element.
·
element.style.property: Gets or sets CSS
styles (e.g., element.style.color = 'blue';).
·
element.setAttribute('name', 'value'): Sets an
attribute.
·
element.classList.add('className'), element.classList.remove('className'): Manipulate CSS classes.
·
document.createElement('tagName'): Creates a new
HTML element.
·
parentNode.appendChild(childNode): Adds a new child
element.
·
parentNode.removeChild(childNode): Removes a child
element.
2.
Form with a text control and a button:
·
HTML:
HTML
<input type="text" id="myTextInput" placeholder="Enter your name">
<button id="submitButton">Submit</button>
<p id="displayMessage"></p>
·
JavaScript:
JavaScript
const textInput = document.getElementById('myTextInput');
const submitBtn = document.getElementById('submitButton');
const displayMsg = document.getElementById('displayMessage');
submitBtn.addEventListener('click', function() {
const userName = textInput.value; // Get the value from the text input
if (userName) {
displayMsg.textContent = "Hello, " + userName + "!";
textInput.value = ''; // Clear the input field
} else {
displayMsg.textContent = "Please enter your name.";
}
});
3.
Event-handler attributes (Inline Event Handlers):
·
Concept: Directly embedding JavaScript code
or function calls within HTML attributes.
·
Examples:
§ <button
onclick="alert('Hello!');">Click Me</button>
§ <img onmouseover="this.src='image2.jpg'"
onmouseout="this.src='image1.jpg'" src="image1.jpg">
- Pros: Simple for very small,
isolated actions.
- Cons: Generally
discouraged for larger projects.
- Mixes
HTML and JavaScript, making code harder to read and maintain.
- Poor
separation of concerns.
- Difficult
to manage multiple event listeners.
- Security risks with eval().
- Modern Approach: Use addEventListener() in external JavaScript files.
4.
Rollover using mouse events:
·
Concept: Changing an element's appearance
(e.g., an image) when the mouse cursor hovers over it.
·
HTML: <img
id="rolloverImage" src="images/normal.png" alt="Normal
State">
·
JavaScript (using mouseover and
mouseout events):
JavaScript
const rolloverImg = document.getElementById('rolloverImage');
rolloverImg.addEventListener('mouseover', function() {
this.src = 'images/hover.png'; // Change to hover image
this.alt = 'Hover State';
});
rolloverImg.addEventListener('mouseout', function() {
this.src = 'images/normal.png'; // Change back to normal image
this.alt = 'Normal State';
});
·
CSS-only Rollover: For simple image
changes, CSS hover pseudo-class is often preferred
(e.g., using background-image or changing opacity and swapping via a transition).
III. Case Study: Create a webpage involving audio and video of your
college day activities
Objective: Design and
implement a simple, responsive webpage showcasing college day activities using
embedded audio and video, along with basic image manipulations and JavaScript
interactivity.
Features to Include:
- Header:
- College name and logo (use <img>
and position it).
- Favicon in the browser tab.
- Navigation (Optional but good
practice):
- Links to different sections
of the page.
- Introduction/About Section:
- Brief text about college
day activities.
- Background image covering
the section, perhaps with a slight overlay for readability.
- Image Gallery (Image
Manipulations):
- Display several images of
college events.
- Implement an image sprite
for navigation icons or social media links related to the college.
- Use CSS to center the image
gallery content.
- Consider a simple image
hover effect using JavaScript (e.g., change border or apply a filter) or
CSS.
- Audio Section:
- Embed an audio player (<audio>) with controls.
- Provide at least two different audio formats
(e.g., .mp3, .ogg)
for cross-browser compatibility.
- Example: Background music
or recordings of college anthems/speeches.
- Video Section:
- Embed a video player (<video>) with controls
and a poster image.
- Provide at least two different video formats
(e.g., .mp4, .webm).
- Example: Highlights reel of
annual day, sports day, or cultural events.
- Interactive Element (JavaScript):
- Create a simple form (e.g.,
"Share Your Favorite Memory").
- Include a text input (<input type="text">) and a submit button (<button>).
- When the button is clicked,
use JavaScript (event handler, DOM manipulation) to:
i.
Get the text input value.
ii.
Display a personalized message on the page (e.g., "Thanks for
sharing, [User's Name]!").
iii.
Clear the input field.
- Footer:
- Contact information or
copyright notice.
- Use a CSS color gradient as
the background for the footer.
Steps for Implementation:
1) HTML Structure (index.html):
a) Set up basic HTML5
boilerplate.
b) Link CSS file (styles.css) and JavaScript file (script.js).
c) Create semantic
sections (e.g., <header>, <main>, <section>, <footer>).
d) Include all image,
audio, and video elements with appropriate attributes.
e) Add the form
elements.
2) CSS Styling (styles.css):
a) Basic resets and
typography.
b) Style the header,
navigation, and footer.
c) Apply background
images and color gradients where specified.
d) Use flexbox or margin: 0 auto; to center content.
e) Style image gallery
elements, audio/video players.
f) Implement image
sprite CSS.
g) Add responsive
design considerations (e.g., media queries for smaller screens).
h) Incorporate web
fonts (e.g., from Google Fonts).
3) JavaScript
Interactivity (script.js):
a) Get references to
HTML elements using document.getElementById() or document.querySelector().
b) Attach event
listeners (e.g., click, mouseover, mouseout).
c) Implement the form
submission logic to read input and update the DOM.
d) (Optional) Add more
interactive elements like image carousels or modals if time permits.
Assets Needed:
·
College Logo image.
·
Favicon image (.ico or .png).
·
Several images for the gallery.
·
Image sprite file (if implemented).
·
An audio file in at least two formats (e.g., .mp3, .ogg).
·
A video file in at least two formats (e.g., .mp4, .webm) and a poster image.
Self-Reflection:
·
Does the page load quickly? (Consider image optimization, proper
audio/video loading).
·
Is it user-friendly? (Clear navigation, accessible controls).
·
Is the code well-organized and commented?
·
Is the design visually appealing and responsive?
Comments
Post a Comment