Questions #Tagged [html]

Questions: 7

What is the 403 Forbidden Error and how to resolve this error?

403 Forbidden Error is HTTP status code which means that you don't have permission to access the server for which you are trying to reach. Below are some of the examples of these errors:<br> <pre><xmp> HTTP Error 403 - Forbidden 403 forbidden request forbidden by administrative rules 403 Forbidden Access Denied You don't have permission to access Forbidden: You don't have permission to access [directory] on this server</xmp></pre> <p>This error occurs due to:<br><br> &#9679 Incorrect file or folder permissions<br> &#9679 Incorrect settings in the .htaccess file<br><br> Follow below steps in order to fix the 403 forbidden error:<br><br> &#9679 Check or reset/rename your .htaccess file<br> &#9679 Reset file and folder permissions<br> &#9679 Disable WordPress plugins<br> </p>

 

#.htaccess     #html     #error     #exception    

What will be the regex to replace/remove specific HTML pattern/string from a source string?

Below regex pattern can be used to get the required output:<br><pre><xmp>return Regex.Replace(givenstring, $"<(.|\n|{Environment.NewLine})*?>", String.Empty);</xmp></pre>

 

#html     #regex    

How to create card deck using bootstrap?

Each card in card deck has equal width and height and are not attached to each other. Below is the sample code snippet to create card deck:<br> <pre><xmp><div class="card-deck"> <div class="card"> <img src="images/example.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is testfry.com site.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> <div class="card"> <img src="images/example.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is testfry.com site.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> <div class="card"> <img src="images/example.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is testfry.com site.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> </div></xmp></pre>

 

#bootstrap     #html     #css    

How to create shadow effect for DIV tag using CSS?

Box-shadow attribute can be used to create shadow effect for DIV tag in CSS. Shadow length and thinckness can be changed by tweaking its parameters. Below is the code snippet:<br> <pre><xmp>.div_test { box-shadow: 0 2px 9px 0 rgba(0,0,0,0.1);</xmp></pre>

 

#html     #css    

How to create website page where content will load automatically after every page scroll?

We can achieve this by using "scroll" event listener where callback function checks if scroll position is near the end of the page then it will load more content. Below is the code snippet:<br> <pre><xmp><html> <style> .container>div { min-height: 40px; } </style> <body> <div class="container"> <div>1</div> <div>2</div> </div> <script> window.addEventListener("scroll", function () { var el = document.querySelector(".container"); if (el.scrollTop + el.offsetHeight > el.scrollHeight - 300) { console.log("Load more...") } }) </script> </body> </html></xmp></pre>

 

#html     #css     #javascript     #function    

How can we create grid panel using CSS?

In CSS we can use minmax() function to create grid panel effect. The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max . The minmax() function accepts two parameters, a minimum value and a maximum value.<br> <pre>minmax(min, max)</pre> Below code can be used to create grid panel:<br> <pre><xmp>CSS: body { margin: 40px; } .wrapper { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr) ) ; background-color: #fff; color: #444; } .grid { background-color: #444; color: #fff; border-radius: 5px; padding: 15px; font-size: 150%; } HTML: <div class="wrapper"> <div class="grid">A</div> <div class="grid">B</div> <div class="grid">C</div> <div class="grid">D</div> </div> </xmp></pre>

 

#html     #css    

How to display HTML tags as plain text without conversion in php?

By default in php we don't convert html tags to plain text. Lets understand this more with below example:<br><br> <pre>echo("<b>abc</b>")</pre> <p>Output:<br> <b>abc</b><br><br> In php we have special function htmlspecialchars() which can be used to display display HTML tags as plain text. Below is the syntax of this function:<br> string htmlspecialchars( $string, $flags, $encoding, $double_encode )<br> &#9679 <b>$string</b>: This parameter is used to hold the input string.<br> &#9679 <b>$flags</b>: This parameter is used to hold the flags. It is combination of one or two flags, which tells how to handle quotes.<br> &#9679 <b>$encoding</b>: It is an optional argument which specifies the encoding which is used when characters are converted. If encoding is not given then it is converted according to PHP default version.<br> &#9679 <b>$double_encode</b>: If double_encode is turned off then PHP will not encode existing HTML entities. The default is to convert everything.<br><br>Now by using this function below will be the output:</p> <pre>echo(htmlspecialchars("<b>abc</b>",ENT_QUOTES) Output: <b>abc</b> </pre>

 

#php     #html