HTML|Css|Javascript @ 11:00 AM (IST) by Mr.Ram Kumar Day-5

Summary

The class reviewed HTML attributes and introduced image, audio, and video elements through demonstrations.

1. Review: Block and Inline Elements, and HTML Errors

• A block element generally occupies the available width, while an inline element takes up only the space its content needs.
• Browsers often try to recover from malformed HTML, so errors may not always be obvious. If the output is unexpected, inspect the code carefully.
• The class distinguished the <title> element, which names the page in the browser, from the title attribute, which can provide a tooltip.

2. HTML Attributes

The instructor grouped attributes into:

• Global attributes, which can be used on many elements.
• Event attributes, which respond to actions and are used with JavaScript.
• Element-specific attributes, such as href, src, and type, introduced alongside their corresponding elements.

Global attributes discussed included:

• dir: Sets text direction, such as rtl for right-to-left.
• contenteditable: Makes content editable on the page temporarily. Refreshing restores the original page content. The instructor presented this mainly as a demonstration rather than a feature to expose casually to users.
• accesskey: Assigns a keyboard shortcut to an element, such as a link. Choose a key combination that does not conflict with existing browser or system shortcuts, and provide users with a hint about it.
• tabindex: Influences keyboard focus order when the user presses Tab.

The class also covered HTML comments:

• Comments remain visible in the source code but are not rendered on the page.
• In VS Code, Ctrl + / toggles comments for selected lines.

Event attributes such as onclick, onmouseenter, and onsubmit were introduced. The instructor demonstrated an onclick action that triggers a pop-up, noting that event handling would be covered in more depth with JavaScript.

3. Images: <img>

The image element displays an image and uses attributes to specify its source and presentation:

• src: The image’s location.
• alt: Alternative text, useful when an image cannot load and for accessibility.
• height and width: Set the displayed dimensions.

Two ways of specifying an image source were demonstrated:

• Absolute path or URL: Points to an externally hosted image. It may stop working if the resource is moved or removed.
• Relative path: Points to a file within the project. The instructor recommended keeping media in a dedicated folder, such as assets, to make projects easier to share and maintain.

Path clarification: ./ refers to the current directory, and ../ refers to its parent directory. The subtitles describe these imprecisely as exiting a file or folder.

The instructor showed how to copy an image address for an external image and how to place a downloaded image in the project’s assets folder and reference it. Images can be wrapped in a <div> when grouping or arranging them; more precise layout and centering were deferred to CSS.

4. Audio: <audio>

The audio element plays an audio file. The attributes demonstrated were:

• src: The audio file’s path.
• controls: Shows playback controls, such as play, pause, and volume.
• muted: Starts playback without sound.
• autoplay: Attempts to start playback automatically, though browser behavior may restrict it.
• loop: Repeats playback after the file ends.

The instructor used a local audio file stored in the project’s assets folder.

5. Video: <video>

The video element plays a video file. The attributes covered were:

• src: The video file’s path.
• controls: Displays playback controls.
• autoplay, muted, and loop: Control automatic playback, sound, and repetition.
• poster: Supplies a thumbnail shown before playback.
• height and width: Set the displayed dimensions.

The instructor demonstrated using a local video file and an image as its poster. The subtitles include a demonstration of obtaining a video from an online service; for real projects, use media you have permission to download and use.

6. Assignments and Next Steps

• Image gallery: Create a gallery with at least 15 images. The theme is the student’s choice.
• Audio gallery: Create a gallery with at least 15 audio files, displaying an image and its associated audio beneath it.

The instructor said that connecting images to audio through custom behavior would require JavaScript, and that event attributes would be studied further later.

Speakers and Sources

• Mr. Ram Kumar — Instructor and primary speaker.
• Students — Unnamed participants asking and answering questions, both in class and online.
• Demonstration materials — HTML code, a code editor, and browser output; these are teaching sources rather than additional speakers.