Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles on Trending Technologies
Technical articles with clear explanations and examples
HTML5 canvas ctx.fillText won\'t do line breaks
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 MoreHow to set background image of a webpage?
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 MoreHow to properly use h1 in HTML5?
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 MoreHow to indicate a potential word break point within a section in HTML?
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 MoreDrawing an image from a data URL to a HTML5 canvas
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 MoreHTML cite Attribute
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 MoreHow to set Heading alignment in HTML?
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 MoreHow do we create preformatted text in HTML?
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 MoreStreaming a video file to an HTML5 video player with Node.js so that the video controls continue to work
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 MoreHTML rel Attribute
The rel attribute of the element specifies the relationship between the current document and the linked document. This attribute was introduced in HTML5 for the element and helps define the semantic relationship between clickable regions in image maps and their target destinations. Syntax Following is the syntax for the rel attribute in the element − The value can be one or more space-separated keywords that define the relationship type. Rel Attribute Values The rel attribute accepts the following values that define different types of relationships − ...
Read More