We can add this target=”_blank” in the <a> tag to open link in new tab Example code <!DOCTYPE html> <head> </head> <body> <!– Opens in the same tab –> <a href=”https://en.wikipedia.org/wiki/Main_Page”>Visit Wikipedia (same tab)</a> <br> <!– Opens in a new tab –> <a href=”https://en.wikipedia.org/wiki/Main_Page” target=”_blank”>Visit Wikipedia (new tab)</a> </body> </html> Copy Code
HTML
Change button text with jQuery
Its essential to change t he button text in some applications . For example Like button. If the current is “Like”, after click on the button it the button text will be “Liked” jquery makes process efficient. <!DOCTYPE html> <html> <head> <script src=”https://code.jquery.com/jquery-3.7.1.min.js”></script> </head> <body> <button class=”like-button”>Like</button> <script> $(document).ready(function(){ $(‘.like-button’).click(function(){ var buttonText = $(this).text(); if […]
How to prevent text selection in html
Its necessary to prevent text selection when the text is ui feature, to make the webpage more professional. We can prevent the text from selecting by using this in css You cannot select this text You can select this text example code
How to create tooltip in html
Is essential to add tooltip to make web page more professional and understandable The simplest way can we add tooltip is use html inline element <span> We will add the tool in div and tooltip text(tool description) in the span Toll description will be always hide ( display none in css) until the user hover […]
Create your first chat application with Flask and Socketio
We will use socketio for real-time messaging First install our dependency for this application pip install flask pip install flask-socketio Copy Code How it will work. Every user will get an unique key. If the the other user submit the other users key that will send the message. its like sending message to unique username […]
Ajax example with flask
One of the best ajax applied in real world is username checker. In this example we will check if there is existing username This is code /project we will Our first step: Check if username exists or not Imagine we have this existing username when the user enter a username we will check it from […]
Build browser based Qr code generator with html css and javascript
The main features we will apply User will able to paste link or text and generate the qr code The dependency We will use qurcodejs a javascript library for this QR Code Generator QR Code Generator Generate QR Code The complete code. Try and customize by yourself. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta […]
Create a Simple Image Gallery for Your Website (HTML, CSS & JavaScript)
Image Gallery The essential structure of the gallery The complete code. Just place your image link in the img tag to show the image <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Image Gallery</title> <style> .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .image-wrapper { position: relative; overflow: hidden; } .zoomable […]
How to Make Analog Clock with HTML, CSS, and JavaScript
Simple Clock 12 3 6 9 The structure and the essentials So we just add this logic in the clock that’s it. We get the time from browser const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const seconds = now.getSeconds(); Copy Code Then access the clock hand from JavaScript const […]
How to get the mouse position in html
Knowing mouse position is essential if we want to apply some wonderful effect in our web application We can get the mouse position from mousemove event. In the example code we are using mousemove event. This will helps us go get the mouse coordinate in real-time In the code you will get the mouse position […]
Create Your First HTML Button: Simple Tutorial with Example
First We Will create the most simple button with html without any functionality. That means it will just show the button and do nothing.. <!DOCTYPE html> <html> <head> </head> <body> <button>Button</button> </body> </html> Copy From the code. This code is missing the functionality. That means we did not said the code when the user click […]
How to show HTML code inside HTML without Rendering
We can show html inside html by using using the html entity ‘<‘ as ‘<’ and the ‘>’ as ‘>’ Normally we use like this in html . <h1> This is H1 tag </h1> But it the result renders html and shows like this This is h1 tag So will We will use this To […]