Found 2556 Articles for HTML

How to make an image draggable in HTML?

Adeeba Khan
Updated on 22-Nov-2023 17:27:38

447 Views

The ability to create draggable elements within a web page is one of the new features and skills that HTML5 offers for web developers. It becomes a very popular and widely utilized feature. It simply means to move a picture to another location by dragging it there with the cursor. By employing mouse or touch motions, users will be able to drag an image or other content around the page. In this article, we'll look at how to build a draggable image in HTML5. It's simple to make any HTML5 element draggable, including photos. The 'draggable' feature is utilized. It accepts ... Read More

How to make an svg scale with its parent container

Adeeba Khan
Updated on 22-Nov-2023 16:52:50

1K+ Views

SVG, or Scalable Vector Graphics, is a markup language built on XML which is employed to produce vector graphics. SVG pictures can be scaled to any size without losing quality because they are independent of resolution. They are the best option for designing visuals that must be viewed on many devices with various screen widths. We'll talk about making an SVG scale with its parent container in this article. The fundamentals of SVG, how to design one, and how to make it responsive will all be covered. What is SVG? Let's first define SVG before learning how to make an ... Read More

How to use text-overflow in a table cell?

Abhishek
Updated on 20-Nov-2023 18:39:22

245 Views

The text-overflow property in CSS is used to handle the overflown text on the web page. This property helps us to show the overflown text in a specific way. The text-overflow property is used with two more other properties with fixed value to show overflowed text in a specific manner and those properties are white-space: nowrap; and overflow: hidden; with the given values. Once these properties are set on the element, we can use the text-overflow property with different values as written below − clip − It is the default value of this property in which the overflowed text ... Read More

How to use SVG with :before or :after pseudo element?

Abhishek
Updated on 20-Nov-2023 17:59:50

960 Views

The :before and :after pseudo elements are used to add the content just before the start of an HTML element and just at the end of the same or any other element. These pseudo selectors help to add content or any other effect without using the un-necessary elements in the HTML DOM. You can add content or any color and CSS effects on the element using these selectors. The :before selector as the name suggests will add the content before the element and the :after element will add the content after the element. You can add any image, color, background ... Read More

How to use font awesome icon as a cursor?

Abhishek
Updated on 20-Nov-2023 17:40:04

127 Views

In general, we see the design of cursor on any web page as an arrow by default or we can change the type of cursor to a particular type using cursor property of the CSS and assign it any kind of cursor of our choice such as pointer, grab, zoom in, zoom out etc. But, did you know? That we can change the type of cursor to any other type then the ones provided by the CSS. It is possible, as we can use any image to assign the design style to a cursor and can use any font-awesome icon ... Read More

How to sort HTML elements by data-attribute?

Abhishek
Updated on 20-Nov-2023 17:31:52

166 Views

In this article, we are going to learn about the ways of sorting the child elements of an element in the HTML document with the help of data attribute. The are many data attribute available in HTML to use. We can sort the elements by using any of those data attributes. In this article, we will sort the elements with the help of two different data attributes, where one will sort the elements according to the length of the value given to it and another will sort according to the numerical values. The data attributes are listed below − ... Read More

How to set the maximum value of progress bar using HTML?

Abhishek
Updated on 20-Nov-2023 15:25:57

60 Views

The progress bar on any website is used to represent the percentage of any work that is completed like the download progress of any song or movie from any website. You can use the progress bar to show the amount of song or movie that is downloaded and remaining. In HTML, we can use the element to show a progress bar on the website to represent the amount of completed and the remaining work. You can handle the value of the progress bar on your own by defining the attributes with the element itself. Let us now understand ... Read More

HTML Cleaning and Entity Conversion - Python

Rohan Singh
Updated on 16-Oct-2023 12:00:11

221 Views

Hypertext markup language i.e. HTML is a markup language that is used to create webpages content on the internet. HTML document files may contain some unwanted or malicious elements which can cause several issues while rendering the webpage. Before processing the HTML content we need to perform HTML cleaning for removal and cleaning of the malicious elements in the file. HTML entities are special characters that need to be converted into corresponding HTML representations to ensure proper rendering in browsers. In this article, we will understand cleaning and entity conversion methods using Python. HTML Cleaning HTML cleaning is done ... Read More

How to write to an HTML file in Python?

Rohan Singh
Updated on 16-Oct-2023 11:47:04

3K+ Views

HTML is a markup language that is used for creating web page structure and content in any web-related projects. Python provides various libraries and methods for writing to an HTML file. Python can be used to write to an HTML file using the open() function and write() method. In this article, we will explore how to write to an HTML file in Python, including the necessary syntax and examples. Writing to an HTML file To write to an HTML file we need to first open the HTML file and then add content to it in HTML syntax using tags. Once ... Read More

How to find height of text in HTML canvas using JavaScript ?

Aman Gupta
Updated on 13-Oct-2023 15:42:53

728 Views

Overview A canvas is a HTML element that provides us to display any type of custom text or graphics on the web page. A canvas makes a graphics editable through which we can make our own custom text or design. A canvas element can be added to the HTML using tag or using JavaScript we can add it through the 'document' object 'createElement' method. As we have to find the height of the text that is written in the HTML canvas, we can use the ''textMetrics" objects measureText() property to calculate height of the text. Syntax The Syntax used ... Read More

Advertisements