HTML5 Multimedia and CSS Fundamentals

Multimedia

Combination of video, graphics, sound, and text.

HTML5

Latest version of Hypertext Markup Language.

Embeds audio content directly in web pages.

Audio codecs

Formats for compressing audio files, e.g., AAC.

Video codecs

Formats for compressing video files, e.g., H.264.

Container formats

File formats that hold audio and video streams.

MP4

Container format supporting H.264 and AAC codecs.

Ogg

Container format supporting Theora and Vorbis codecs.

WebM

Container format supporting VP8 and Vorbis codecs.

src attribute

Specifies the URL of the media file.

autoplay attribute

Automatically starts audio when loaded.

autobuffer attribute

Starts buffering audio automatically.

controls attribute

Displays playback controls for audio.

preload attribute

Specifies loading behavior of audio on page load.

loop attribute

Repeats audio playback continuously.

Embeds video content directly in web pages.

Fallback content

Displayed if browser does not support media element.

ActiveX control

Microsoft technology for embedding multimedia.

Adobe Flash

Formerly used for multimedia content on web.

Non-supporting browsers

Browsers that do not support HTML5 features.

Accessibility

Ensuring media is usable by all users.

HTML5 code structure

Defines document type and HTML elements.

HTML5

Latest version of HTML for structuring web content.

HTML element for embedding video content.

autoplay attribute

Starts video playback automatically when ready.

muted attribute

Initial mute setting for the video playback.

controls attribute

Displays video playback controls to the user.

loop attribute

Repeats video playback automatically when finished.

preload attribute

Specifies video loading behavior on page load.

src attribute

Defines the video file location for embedding.

CSS

Cascading Style Sheets for styling web pages.

CSS file extension

.css, used for style sheets.

box model

CSS concept for layout structure using boxes.

external style sheet

CSS file linked for multiple pages styling.

internal style sheet

CSS defined within a single HTML page.

inline style sheet

CSS applied directly within HTML tags.

CSS rule structure

Selector followed by property and value declaration.

selector

HTML element targeted by a CSS rule.

simple selector

Targets a single HTML element for styling.

class selector

Styles multiple elements with the same class.

id selector

Styles a unique element identified by an ID.

universal selector

Targets all elements in a document.

pseudo classes

Styles elements based on their state or position.

CSS benefits

Improves maintenance, loading speed, and accessibility.

Generic Selector

Applies styles to any tag with a class.

Universal Selector

Applies styles to all elements in the document.

Pseudo Classes

Add special effects to selectors based on states.

Grouping Selectors

Combines multiple selectors with shared declarations.

CSS Properties

Define how HTML elements are displayed visually.

Comments in CSS

Provide explanations or notes within CSS code.

Typical Web Page Structure

Consists of containers like header, main, footer.

IDs

Unique identifiers used once per page.

Classes

Reusable identifiers for multiple elements.

Box Model

Describes layout properties: margin, border, padding.

Width and Height

Define dimensions of an HTML element.

Background-color

Sets the background color of an element.

Padding

Space between content and element border.

Margin

Space outside an element, separating it from others.

Border-width

Thickness of an element's border.

Border-color

Color of an element's border.

Border-style

Type of border: solid, dashed, etc.

Float

Positions an element to the left or right.

Clear

Prevents elements from wrapping around floated elements.

Width

Specifies element width in various units.

Height

Specifies element height, often set to auto.

Float

Positions elements left or right, allowing text wrap.

Clear

Detaches floated elements, starting on a new line.

Border

Defines element borders with color, style, and width.

Margin

Space outside the element, separating it from others.

Text Properties

Styling options for text, including color and size.

CSS Colors

Defines colors using names or hexadecimal values.

Styling Links

Defines appearance of link states: active, visited, hover.

Background-image

Sets an image as the background of an element.

Background-repeat

Controls how background images are repeated or tiled.

Background-position

Positions background images using keywords or values.

Background-attachment

Fixes or scrolls background images in the viewport.

Cascading Styles

Multiple styles compete, nearest ancestor style wins.

Inheritance

CSS properties passed from parent to child elements.

Hexadecimal Color

Color representation using hex code format.

Text-align

Specifies horizontal alignment of text within an element.

Font-family

Specifies the typeface for text in an element.

Text-decoration

Defines text styling like underline or strikethrough.

Letter-spacing

Controls space between characters in text.

Word-spacing

Controls space between words in text.

Font-size

Specifies the size of the font for text.

Font-weight

Defines the thickness of the text characters.

Font-style

Specifies the style of the font, e.g., italic.