It is possible just write subscript or superscript level means subscript within subscript.
<!DOCTYPE html>
<html>
<body>
<h1>The sub and sup elements</h1>
<p>This text contains <sub>subscript<sub>a</sub></sub> text.</p>
</body>
</html>
another example a<sub>b<sub>c</sub></sub> - useful to math calculation
(a2)2 suppose this is mathematics format - <div>(a<sup>2<sup>)<sup>2</sup></div>
1) editing content using 'content editable'
<h2 contenteditable=true>You can edit me</h2>
2) figure and figure caption added in latest html5
<figure>
<img src="http://static1.tothenew.com/blog/wp-content/uploads/2017/03/productimg.png">
<figcaption>
<p>Image of birds</p>
</figcaption>
</figure>
3) verify textbox using pattern or regular expression
<input type="text" name="rollno" pattern="[0-9]{5}" >
4) SVG elements - create scalable vector graphics.
5) Webfont - font-family style available , lots of google are free to use, which makes more better look of website.
6) animation and transition effect -using CSS different animation can do , like flipping a book.
7) audio and video new tag introduce
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a>Download this file.</a>
</audio>
8) localstorage can be done.
1) use basic mail function available in PHP
2) get file type using application/octet-stream
3) form must enctype="multipart/form-data"
4) sure to use MD5 encryption & chunk_split(base64_encode)
5) to upload file use move_uploaded_file
<?php
$from = $_REQUEST["from"];
$emaila = $_REQUEST["emaila"];
$filea = $_REQUEST["filea"];
if ($filea)
{
function mail_attachment ($from , $to, $subject, $message, $attachment)
{
$fileattachis = $attachment; // Path to the file
$fileattachis_type = "application/octet-stream"; // File Type
$start = strrpos($attachment, '/') == -1 ? strrpos($attachment, '//') : strrpos($attachment, '/')+1;
$fileattachis_name = substr($attachment, $start, strlen($attachment));
$email_from = $from; //email from
$subject = "New Attachment Message";
$email_subject = $subject;
$email_txt = $message;
$email_to = $to;
$headers = "From: ".$email_from;
$file = fopen($fileattachis,'rb');
$data = fread($file,filesize($fileattachis));
fclose($file);
$msg_txt="\n\n You have recieved a new attachment email from $from";
$semi_rand = md5(time());
$mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";
$headers .= "\nMIME-Version: 1.0\n" . "Content-Type: multipart/mixed;\n" . "
boundary=\"{$mime_boundary}\"";
$email_txt .= $msg_txt;
$email_message .= "This is a multi-part message in MIME format.\n\n" .
"--{$mime_boundary}\n" . "Content-Type:text/html;
charset = \"iso-8859-1\"\n" . "Content-Transfer-Encoding: 7bit\n\n" .
$email_txt . "\n\n";
$data = chunk_split(base64_encode($data));
$email_message .= "--{$mime_boundary}\n" . "Content-Type: {$fileattachis_type};\n" .
" name = \"{$fileattachis_name}\"\n" . //"Content-Disposition: attachment;\n" .
//" filename = \"{$fileattachis_name}\"\n" . "Content-Transfer-Encoding:
base64\n\n" . $data . "\n\n" . "--{$mime_boundary}--\n";
$ok = mail($email_to, $email_subject, $email_message, $headers);
if($ok)
{
echo "File Sent Successfully.";
unlink($attachment); // delete a file after attachment sent.
}
else
{
die("Sorry email not sent. Please try again!");
}
}
move_uploaded_file($_FILES["filea"]["tmp_name"], 'temp/'.basename($_FILES['filea']['name']));
mail_attachment("$from", "youremailaddress@gmail.com", "subject", "message", ("temp/".$_FILES["filea"]["name"]));
}
?>
<html>
<head>
<script type = "text/javascript">
function checkfile() {
with(document.filepost) {
if(filea.value ! = "") {
document.getElementById('textis').innerText = "Attaching File ... Please Wait";
}
}
}
</script>
</head>
<body>
<form name= "filepost" method="post" action="file.php" enctype="multipart/form-data" id = "file">
<table width = "300" border = "0" cellspacing = "0" cellpadding = "0">
<tr valign = "bottom">
<td height = "20">Name:</td>
</tr>
<tr>
<td>
<input name = "from" type = "text" id = "from" size = "30">
</td>
</tr>
<tr valign = "bottom">
<td height = "20">Email Address:</td>
</tr>
<tr>
<td class = "frmtxt2">
<input name = "emaila" type = "text" id = "emaila" size = "30">
</td>
</tr>
<tr>
<td height = "20" valign = "bottom">Attachment:</td>
</tr>
<tr valign = "bottom">
<td valign = "bottom">
<input name = "filea" type = "file" id = "filea" size = "16">
</td>
</tr>
<tr>
<td height = "40" valign = "middle">
<input name = "Reset2" type = "reset" id = "Reset2" value = "Reset">
<input name = "Submit2" type = "submit" value = "Submit" onClick = "return checkfile()">
</td>
</tr>
</table>
</form>
<div id="textis"></div>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.overlay {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.overlay-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.closebtn {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.closebtn:hover,
.closebtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>overlay Example</h2>
<!-- Trigger/Open The overlay -->
<button id="myBtn" onclick="openoverlay()">Open overlay</button>
<!-- The overlay -->
<div id="myoverlay" class="overlay">
<!-- overlay content -->
<div class="overlay-content">
<span class="closebtn" onclick="closebtn()">×</span>
<p>Some text in the overlay..</p>
</div>
</div>
<script>
var overlay = document.getElementById("myoverlay");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("closebtn")[0];
function openoverlay()
{
overlay.style.display = "block";
}
function closebtn()
{
overlay.style.display = "none";
}
window.onclick = function(event) //outside overlay box click also hide box.
{
if (event.target == overlay) {
overlay.style.display = "none";
}
}
</script>
</body>
</html>
in above example we have set two class one cover complete webpage, other is overlay box, one close button two hide open box.
simple display:none or block properties set from script and style. position must fixed to cover all page & background set rgba color.
Responsive means which is works on all devices, it is mobile friendly. and it's also good SEO & user interface.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
</style>
</head>
<body>
<div class="header">
<a href="#default" class="logo"><img src="logo.png"/></a>
<div class="header-right">
<a class="active" href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
<div style="padding-left:20px">
<h5>Responsive Header</h5>
<p>Some sample content..</p>
</div>
</body>
</html>
check above code on mobile which shows different view of header , which is easy to user access.
ask browser to allow location
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
using position.coords.latitude & position.coords.longitude we can get exact position in map
useful when adding google map to website or app, also track geolocation
no any other script or file required.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p><strong>Note:</strong> The geolocation property is not supported in IE8 and earlier versions.</p>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
Useful links
1) to get latitude and longitude - https://www.latlong.net/
2) google map API - https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap
1) create multiple page on single webpage
2) manage product or content or record from database using pagination method
3) large mysql data content want to fetch but it should easy to view in that case use pagination method.
4) Pagination is a method of dividing web content into discrete pages, thus presenting content in a limited and digestible manner. This method is usually employed to display resulting items on a website.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Pagination</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pagination</h2>
<p>this use to manage large content in pagination style like book content maintain over multiple pages because not possible on same page, control page size</p>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
</ul>
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
</ul>
</div>
</body>
</html>
just call page-item class , in bootstrap all style are predefined with some class name , just find that class name and use it. for example page-link is default class in bootstrap
Thank you for viewing blog, please comment if any query.
creating spinner or loader when loads webpage or any div or block , saving data state.
let us see small example,
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Colored Spinners</h2>
<p>Use any color utilites to add a color to the spinner:</p>
<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
</div>
</body>
</html>
in above example first call bootstrap.min.js and bootstrap.min.css, then use spinner-border class as above declare
Application - this is useful when loading page, loading div, or button when submit
Notes - above files bootstrap.min.js and bootstrap.min.css are free to use.
in this blog show how to make four column of same webpage , using bootstrap.
let us see example,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Four Column equal width</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Four equal width columns</h1>
<p>in this example shows setting equal column using bootstrap.</p>
<div class="row">
<div class="col" style="background-color:lavender;">Column 1</div>
<div class="col" style="background-color:orange;">Column 2</div>
<div class="col" style="background-color:lavender;">Column 3</div>
<div class="col" style="background-color:lavender;">Column 4</div>
</div>
</div>
</body>
</html>
step 1) call bootstrap.min.js and bootstrap.min.css
step 2) create div class name 'container-fluid'
step 3) create 'col' class div , in above also increase class means you can create 10 or more class.
in any query please comment.
fixed header menu using html
in this blog shows how to make fixed header or menu bar, suppose user move scroll and developer wants menubar should fixed to easy navigation from pages.
<html>
<style>
.home {
width: 100%; height:100%; overflow-y: scroll;
margin-top: 100px;
}
div.header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
</style>
<body>
<div class="header" style="width:100%; text-align: center; background: #000000; padding-top: 4%; padding-bottom: 4%;">
<p style="vertical-align: middle; color: white">Head Bar</p>
</div>
<div class="home">
<img src="photo1.jpg" style="width:100%; height:30%; max-height:30%;"/>
<div>
<p>Title 1</p>
<p>Content 1</p>
<p>Author: Alex</p>
</div>
<img src="photo2.jpg" style="width:100%; height:30%; max-height:30%;"/>
<div>
<p>Title 2</p>
<p>Content 2.</p>
<p>Author: Alex</p>
</div>
<img src="photo3.jpg" style="width:100%; height:30%; max-height:30%;"/>
<div>
<p>Title 3</p>
<p>Content 3.</p>
<p>Author: Alex</p>
</div>
</div>
</body>
</html>
in above example header class setting fixed position , if user moving scroll position it still fixed header
please comment your query or valuable message.
create full screen video using html and css
<html>
<body>
<style>
/* video: 100% width and height- cover the entire window */
#myVideo {
position: fixed;
bottom: 0;
right: 0;
min-width: 100%;
min-height: 100%;
}
/* Add content at the bottom of the video/page */
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
/* Style the button used to pause/play the video */
#abcbutton {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#abcbutton:hover {
background: #ddd;
color: black;
}
</style>
<!-- The video -->
<video autoplay muted loop id="myVideo">
<source src="hello.mp4" type="video/mp4">
</video>
<!-- Optional: some overlay text to describe the video -->
<div class="content">
<h1>Sample Text</h1>
<p>Learn with Mayur Infosys Solutions</p>
<button id="abcbutton" onclick="myFunction()">Pause</button>
</div>
</body>
</html>
above code in html and css which works on all devices, while creating webpage required full screen in these case use above sample code.
1)we set video to position fixed
2)all corner zero position , no padding
3) content also fixed and set to bottom position.
please comment if any query OR suggest new topic for blog.
in this blog shows how to get auto value into html
suppose we want maintain student data
step 1) create database it may mysql or sqlite
<?php
$servername = "localhost";
$username = "username";
$password = "password";
// Create connection
$conn = new mysqli($servername, $username, $password);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Create database
$sql = "CREATE DATABASE myDB";
if ($conn->query($sql) === TRUE) {
echo "Database created";
} else {
echo "Error creating database: " . $conn->error;
}
$conn->close();
?>
step 2) write html to get value from above created database
<html>
<body>
<div>
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, firstname, lastname FROM student";
$result = $conn->query($sql);
if ($result->num_rows > 0) { // output data of each row
while($row = $result->fetch_assoc()) {
echo "<p>id: " . $row["id"]. "</p> - <p>Name: " . $row["firstname"]. "</p> " . $row["lastname"]. "<br>";
}
} else {
echo "0 results";
}
$conn->close();
?>
</div>
</body>
</html>
from above code we get data from mysql table which shows student first name and last name,
important note - always add id & set it to primary key, into table because it is unique value in case referenece required id value is good to compare.
please comment your query,remarks.
