Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Economics & Finance
Changing text color based on the brightness of the background ensures optimal readability and contrast. This technique calculates the luminance of the background color and automatically selects either black or white text for maximum visibility. How It Works The brightness calculation uses the relative luminance formula that weights RGB values according to human eye sensitivity. The formula gives more weight to green (587), moderate weight to red (299), and less weight to blue (114) since our eyes are most sensitive to green light. Syntax The luminance calculation formula is − var luminance = ((red ... Read More
The fillText() method in HTML5 Canvas draws filled text but does not automatically handle line breaks. When you include newline characters () in your text string, they are ignored and the text appears as a single line. To create line breaks, you must manually split the text and call fillText() multiple times for each line. Syntax Following is the syntax for the fillText() method − context.fillText(text, x, y, maxWidth); To create line breaks, split the text and draw each line separately − var lines = text.split(''); for (var i = 0; i ... Read More
Beautiful webpages are a very strong means of catching user attention. In this article, we are going to see how we can add an image as the background image of a web page using HTML and CSS approaches. Methods to Set Background Image There are two primary approaches to setting an image as the webpage's background image − Using background attribute − The traditional HTML approach (deprecated in HTML5) Using CSS background-image property − The modern and recommended approach Method 1: Using Background Attribute The background attribute can be used in the ... Read More
The h1 element in HTML5 defines the most important heading on a page or within a section. Unlike earlier HTML versions, HTML5 allows multiple h1 elements when used properly within sectioning elements like , , , and . The h1 element represents a heading, not a title. Each sectioning element can have its own h1 heading that describes the content of that specific section. The first h1 element in the document body typically serves as the main heading for the entire page. Syntax Following is the basic syntax for the h1 element − Heading Text ... Read More
The HTML tag defines a potential line break point within text where the browser may choose to break a line if needed. The acronym stands for Word Break Opportunity. This element is particularly useful for long words, URLs, or code snippets that might otherwise cause horizontal scrolling or overflow issues. Syntax The tag is a self-closing empty element with the following syntax − In XHTML, it should be written as with a closing slash. How It Works The tag suggests to the browser where it can ... Read More
When working with HTML5 Canvas, you can draw images from data URLs (base64-encoded images) directly onto the canvas. A data URL contains image data encoded as a string, eliminating the need for external image files. This technique is useful for dynamically generated images or when you need to display images stored as base64 strings. Syntax Following is the basic syntax for creating an image from a data URL − var myImg = new Image(); myImg.src = dataURL; Following is the syntax for drawing the image onto the canvas − context.drawImage(image, x, y); ... Read More
The cite attribute in HTML is used to specify the source URL of a quotation or referenced content. It is commonly used with the and elements to provide a machine-readable reference to the original source, though it is not visually displayed by browsers. Syntax Following is the syntax for the cite attribute with the element − Quoted content here Following is the syntax for the cite attribute with the element − Inline quoted content Here, URL is the web address or ... Read More
Headings are the titles or subtitles of the content that you want to display on the web page. Headings help us to get an idea of the content on the web page. Headings and subheadings represent the key concepts ideas and supporting ideas in the content of the web page. HTML has different levels of heading tags from to . Heading alignment refers to the horizontal positioning of heading text within its container. In modern HTML, we align headings using the CSS text-align property with the style attribute, as the deprecated align attribute is no longer recommended. ... Read More
HTML provides the tag to create preformatted text that preserves whitespace, line breaks, and spacing exactly as written in the source code. This is essential for displaying code snippets, ASCII art, or any content where formatting matters. Note − The tag mentioned in older tutorials is deprecated and should not be used. The modern approach uses the tag combined with proper HTML entity encoding. Syntax Following is the syntax for creating preformatted text − Preformatted text content with preserved spacing and line breaks ... Read More
When streaming video files to an HTML5 video player with Node.js, it's essential to implement proper HTTP range request support to maintain video controls functionality. The HTML5 video element relies on partial content requests (HTTP 206) to enable seeking, scrubbing, and progressive loading. How HTTP Range Requests Work The browser sends a Range header (e.g., bytes=0-1023) to request specific portions of the video file. The server responds with a 206 Partial Content status and the requested byte range, allowing the video player to load segments on demand. Basic Video Streaming Setup Following example demonstrates the basic ... Read More