HTML Questions and Answers
How to add space between text in html?
You can use special character
to add space. Alternatively, you can use css rules like padding/margin etc.How to add link in html?
You can use below syntax to add link in html.
<a href='https://www.softpost.org'>softpost</a>
Explain important attributes of a tag excluding href
- download - linked document will be downloaded
- referrerpolicy - what info to be sent in header - no-referrer|origin|same-origin
- rel - relationship between current document and linked document - author|tag|license|help|external|noreferrer
- target - _self(default-same frame), _blank(new window/tab), _parent(parent frame), _top(full body), framename
What are the global attributes
Attributes that can be applied to any html element are called as global attributes. Here is the list of global attributes.- accesskey - shortcut key to access html element
- class - class name for element
- contenteditable - can we edit content?
- data- - used in java script
- dir - text direction
- draggable - Can element be dragged
- id - id attribute of an element
- lang - language used in an element
- spellcheck - spelling and grammar check is turned on for an element?
- style - inline style of an element
- tabindex - tabbing order of an element
- title - title of an element
- translate - element content should be translated?
What are event attributes in html?
When user interacts with html page, different types of events (mouse, keyboard, clipboard, form) occur. Some of the events are listed below.- DOMContentLoaded - after DOM is loaded. Does not wait for images+css+js etc
- onload - after document (DOM+images+css+js) is loaded
- onbeforeunload - before document is unloaded
- onfocus - fires when element gets focus
- onblur - fires when element loses focus
- oninput, onchange - fires when something changes.
- onselect - fires when text is selected in input or textarea element
- onreset - fires when form is reset
- onsubmit - fires when form is submitted
Difference between oninput and onchange events
oninput fires when value of an input or textarea element is changed. onchange fires when value of an input or textarea element is changed but only after element loses focus. In addition to this, onchange event works withselect elements as well.How to add background image in html
You can use below css to add background image.
<style>
body {
background-image: url('softpost.jpg');
background-repeat: no-repeat;
}
</style>
What is background-size and background-attachment properties
background-size property sets the size of background image and background-attachment property sets whether background image position is fixed in a viewport or scrolls.How to add a border in html
You can use below css to add border
<style>
div {
border: solid 1px red;
}
</style>
How to add, reference or link css file in html
CSS stands for cascaded style sheets. CSS can be imported or included in 3 ways.- inline
<html> <body style='color:red'> </body> </html>
- internal - using style element
<html> <head> <style> body { background-color: yellow; } </style> </head> </html>
- external css file
<html> <head> <link rel="stylesheet" href="softpost-styles.css"> </head> </html>
How to add a favicon in html
Create an image and use link tag as shown below.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
</html>
How to add a search bar in html
You can use input element along with ajax to create search bar.How to bold text in html
We can use strong tag Or we can use font-weight css
<!DOCTYPE html>
<html>
<body>
We can use <strong>strong tag</strong>
Or we can use <span style='font-weight:bold'>font-weight</span> css
</body>
</html>
This is how you can bold 1 word in html.How to break a line in html
You can use any block type element. or you can use <br/> You can also start/add a new line in html by using block element like p or div tag. This is how you go to or enter next line in html.How to bullet point in html
- Brisbane
- Mumbai
How to number list in html
- Brisbane
- Mumbai
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Brisbane</li>
<li>Mumbai</li>
</ul>
<ol>
<li>Brisbane</li>
<li>Mumbai</li>
</ol>
</body>
</html>
How to build a website in html
We can follow below steps to build website.- Find requirements of website
- Choose js and css framework
- Develop html pages
- Choose domain
- Deploy on heroku or other hosting provider
How to bring element to front in html
You can use z-index css property to bring the element to front. When 2 elements overlap, you can increase z-index of the element which needs to be brought to the front. z-index property works only on elements for which position is not static. But z-index works for flex childrens even though position is not static.How to background color in html
You can use background-color css property.How to underline in html
You can use text-decoration css property. It can have below values.- underline: line under the text
- line-through: line through the text
- overline: line above the text
How to blur background in html
css filter property can be used to apply effects like blur, contrast, grayscale, hue-rotate, drop-shadow etc.How to change image size in html
How to change font in html
How to comment in html
<!DOCTYPE html>
<html>
<body>
<!--
You can comment like this
-->
</body>
</html>
This is how you write comments in html.
How to change text color in html
You can use color css property. This is how you set text color in html.How to create a table in html
Using table, tr, td, th, thead, tbody tags.How to disable a button in html
You can use disabled attribute.
<!DOCTYPE html>
<html>
<body>
<button disabled>Click Me</button>
</body>
</html>
Graphics and Canvas
hr tag can be used to draw horizontal line. We can draw a line using canvas.How to download file in html
Add download attribute to anchor tag.Layouts in HTML
You can divide a page into sections using layout concept.How to display an image in html
Use img tagHow to display text in html
Use p or spantagHow to disable input in html
Add disabled attribute.
<!DOCTYPE html>
<html>
<body>
<input placeholder='Enter name' disabled></input>
</body>
</html>
How to disable a link in html
Click Me!
<!DOCTYPE html>
<html>
<body>
<a href='/' style='pointer-events: none;'>Click Me!</a>
</body>
</html>
How to display variable value in html
You can do this by using JavaScript.
<!DOCTYPE html>
<html>
<body>
<h1>Id is <span id="num"></span></h1>
<script>
let number = 12
document.getElementById("num").innerHTML = number;
</script>
</body>
</html>
How to escape characters in html
< - use <
> - use >
" - use "
' - use '
& - use &
How to edit image size in html
You can specify the image size using height and width properties.How to edit text in html
Just add contenteditable attribute to the element.How to enable scroll in html
You can use animation libraries like AOS(Animate on Scroll) to add scrolling effect in html.How to format text in html
You can use below tags to format text.- strong - make the text bold
- i - make the text italic - You can italicize text
- em - Emphasized text
- mark - Marked text
- ins - Inserted text
- sub - Subscript text
- sup - Superscript text
Table Questions
- How to fix table column width in html
- How to make a table in html
- How to freeze table header in html
How to find coordinates in html
You can use java script to get the co-ordinates.
function getCoordinates(event) {
let points =
"X: " + event.clientX +
" - Y: " + event.clientY;
console.log("Co-ordinates -> ", points)
}
document.addEventListener("click", getCoordinates);
How to set font size in html
You can use font-size css property to set font size.How to get input value in html
You can use JavaScript to get input value.
function getValue(event) {
var x = document.getElementById("myInputBox").value;
}
How to group radio buttons in html
How to get user input in html
You can use prompt function in JavaScript to get user input.
function getUserInput(event) {
let name = prompt("Your city?","Brisbane");
}
How to go back a folder in html
How to give space in html
You can use to add a space in html.
How to go to a specific part of a page in html
How to get current date in html
You can use Date function to get current date.
Console.log("Current date in GMT format ", new Date())
//to get current year in html
Console.log("To get year ", new Date().getFullYear())
How to hide div in html
You can hide div in 2 ways - display:none or visibility:hidden In same way, you can hide text and button as well.How to highlight text in html
You can use mark tag. By default, Mark tag highlights text in yellow color. Alternatively you can apply background-color css property.How to hide password in html
You can change the type attribute of input element to "password"How to hide scrollbar in html
To hide scrollbars, Set the overflow css property to hidden. But this will also remove scrolling functionality.
/* Hide scrollbar for Chrome, Safari, Opera */
.myelement::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.myelement {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
How to indent text in html
Use text-indent css property.This is how you can indent paragraphs as well.How to justify text in html
How to jump to part of page in html
You can use href="#id1" This is how you navigate within a page in html and link to section of page in html.JavaScript Questions
- How to link javascript in html
- How to call javascript function in html
- How to add javascript in html
- How to use jquery in html
- How to add javascript file in html
- How to run javascript in html
How to display json in html
You can use innerHTML to set the data.How to keep text on same line in html
How to keep footer at bottom in html
How to know which button was pressed in html
Use event object to get the target element.How to keep header fixed in html
Use position fixed and sticky.How to know if a checkbox is checked in html
Use JS to find out the input element property.How to access key in html
How to link to another page in html
- How to hyperlink in html
- How to go to another page in html
- How to navigate to another page in html
How to link email in html
you can use mailto: in href.How to make a navigation bar in html
How to move text down in html
How to make a button in html
You can use button tag. You can name a button by adding text within tags.How to name classes in html
How to not underline links in html
You can use text-decoration:none css to remove underlines from links.How to name a div in html
How to outline text in html
How to overlap elements in html
You can use position css property.How to output text in html
How to work with images
- How to position images in html
- How to overlap images in html
- How to make image fit screen in html and How to fit background image in html
- How to link(hyperlink) an image in html
- How to keep image aspect ratio in html
- How to insert image in html
- How to get image from folder in html
- How to flip an image in html
- How to fit image in div in html
- How to move image in html
- How to put images side by side in html
- How to put text next to image in html
- How to overlay text on an image in html
- How to insert background image in html
- How to have text next to image in html
- How to put text over an image in html
- How to rotate an image in html
- How to use svg in html
How to put footer at bottom of page in html
How to print in html
How to quote in html
How to quote code in html
How to make quiz in html
How to escape quotes in html
How to create and read QR code in html
How to make QR code converter in html
How to use quill delta in html
What are non printable characters in html
How to use QML in html ?
How to remove underline from link in html
How to redirect to another page in html
How to remove space between lines in html
How to remove bullets from a ul in html
How to remove scrollbar in html
How to refresh page in html
How to set background color in html
How to space out text in html
How to skip a line in html
How to separate paragraphs in html
How to scroll to section in html
How to tab in html
How to type in html
How to take input in html
How to table in html
How to turn text into a link in html
How to truncate text in html
How to underline in html
How to use div in html
How to use unicode in html
How to unbold text in html
How to use google fonts in html
How to use custom font in html
How to validate input in html
How to validate email in html
Alignment
- How to align and center in html
- How to align vertically text in html
- How to align horizontally in html
- How to vertically center text in html
- How to right align text in html
- How to put text in the middle in html
- How to center a table in html
- How to center text in html
- How to align images in html
- How to position text in html
How to validate form in html
How to know viewport in html
How to tell if mobile device in html
How to get value from input in html
How to wrap text in html
How to wrap text around an image in html
How to write a paragraph in html
How to write text on image in html
How to write tags in text in html
How to write notes in html
How to write special characters in html
Tools
yaml to html converter and vice versa
xml to html converter and vice versa
xls to html converter and vice versa
Embed stuff
- How to Embed music in html page
- How to Embed youtube video in html page
- How to center a youtube video in html
- How to embed custom video in html
- How to embed an image in html
- How to embed a link in html
- How to insert video in html
Color picker and date picker in html
How to create zip in html
How to disable zoom in html
How to Zoom in and out html
How to zoom image in html
How to upload/download zip and pdf
How to upload an image, video in html
How to convert html website to app
Web development and Automation testing
solutions delivered!!