HTML is one of the most popular language to create interactive web pages. The space inside the div tag is marked by either enclosing it with a border or coloring it up. First, the method is given where the height and width are specified for the div tag to create the empty area. In the second example, the pre tags are used with line-height numbers, within the div tags to create the empty space. In the third example, the tags are used with line-height numbers, within the div tags. Example 1: By using height and width values Step ... Read More

Overview We can create animated banners using the HTML and CSS, HTML provides the layout of the banner and CSS provides the styling of the banners with the animations. Sometimes in the banners which are made for advertisement purpose links are embedded to them, so to highlight the link to the user of the web page the developer makes the link animated so it can be visible throughout the web content and that should increase the interest of the users to click it. Syntax The syntax to create a link in the HTML is − Algorithm Step 1 − Create ... Read More

Overview Cookies are the temporary storage, which stores the user data in the form of key value pairs. Cookies are stored on the clients systems. When a user visits a website then a request is sent to the server to which the website is hosted, then it loads the content and sends it back to the receiving end(receiver is the client or a user). The server sends the cookie to store the user data for its future use. But it all depends upon the user whether he wants to store the login credentials to the cookie or not. In the ... Read More

Overview An image overlay is an overlapping of two images or icons, in which one icon or an image is displayed on the screen while the other icon displays on the screen when the cursor is hovering over the first image. So to achieve this feature we should have basic knowledge of HTML and CSS with its properties of transition and animation. So for creating an overlay we will see a few examples regarding the creation of an inner overlay icon. Algorithm Step 1 − Create a HTML file in your text editor and create a HTML boilerplate in the ... Read More

Overview In HTML we can create the list in two types which are of ordered list and unordered list. So when the lists are created these are followed up with the numbering, alphabet or roman numbers in the ordered list and in the unordered list as dots. So sometimes we need to change these bullets with an image. This can be achieved using the Cascading Styles Sheet (CSS) styling property list-style-image. By using any image url or an image address we can set it to the value of list-style-image which will show as a bullet before the list items. In ... Read More

Overview A loader is a web component which is used by almost all of the web applications. To build a loader ring we should have some prior knowledge about Cascading Styles Sheet (CSS) as the CSS involves the styling and animating part of the loader ring. As the loader component is loaded before the original content loads to the web page. The main styling properties that will be used to build this feature are animation, transition and keyframes. These three CSS properties will make a simple static animation loading ring to the animated loader ring. Algorithm Step 1 − Create ... Read More

Overview Animated bars are the graphically animated bars which are created using HTML and CSS. The layout of the animated bars are created using HTML and the styling of the bars are made using CSS. The normal bars can be created normally but we have to create the bars with animation so we will be using the CSS transition animation properties to make it animated. We will be building an animated bar same as the music animated bars synchronizer. Algorithm Step 1 − Create a HTML file in your text editor and add the HTML boilerplate in it. Step 2 − Now ... Read More

Overview A slider is a component which makes a slideshow like animation when the forward and backward navigation buttons are clicked. A slider consists of different images in an order one after another. We can create this working slider using HTML and CSS. So in the CSS we will be using the nth child selector to make the slider working. The nth child selector will select the particular child from the parent div and will make the image display on the front page. Algorithm Step 1 − Create an index.html file in a folder and open it in a text ... Read More

Overview To build the wave image background, here the main role play is of Cascading Styles Sheet (CSS) as without any use of svg or png image we will be going to create a wave image background that can be used for the web pages background. So to build this component you should have a good understanding of CSS as to build this component we are going to use the CSS position property and the before and after selector. So using these properties and selector we can achieve the deployment of the wave image background. Algorithm Step 1 − Create a HTML ... Read More

Nowadays, creating Neon text on the web page is a trend to make it attractive. We can create a Neon text on the web page to generate an eye-catching effect and draw a user’s attention towards the important information that the web page contains. We can use neon texts with logos, heading, advertisements, etc., to highlight them. In this tutorial, we will customize the values of the text-shadow CSS property to create neon text. Syntax Users can follow the syntax below to create neon text using HTML and CSS. text-shadow: 0 0 1.5rem white; We used the ‘text-shadow’ CSS ... Read More