How to use grid area to create grid layout
grid area is an important part of the grid. It helps us to create layouts easily while writing less code. Grid is used to create a 2d layout with the help of…
Html code is the basic building block of web development for beginners it becomes difficult to learn it by themself. Here is a complete list of HTML code examples with syntax and how to use this code or tags in HTML.
I you want to use the button with a link then you can use a hyperlink tag to create a button with CSS or you can put your button under <a> tag
<button class="btn">click me</button>
<a href="btn">click me</a>
<style>
.btn{
outline:none; //toremove default ouline from button
border:none; // to remove border
text-decoration:none;
}
</style>
You can use the video tag of html5 to embed video in your HTML page or webpage.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4"> //video type and source
<source src="movie.ogg" type="video/ogg"> //aletrnate video type with source
</video>
to show tabular data you will have to use the table tag of HTML.
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
tr:nth-child(even) {
background-color: #dddddd;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Nodel</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro FF Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico city</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Tenure</td>
<td>Austria courty</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK nation</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
For the HTML code of registration. You will need to use of form tag and inputs to enter the information like email name mobile number etc.
For the HTML code of the login page, you can use the same code as the registration page. The only thing you need to change is the title of the page and submit function which you want to perform on submit of the login form.
The HTML form is the most important element of website design and web development as most of the frontend web pages need this tag if you are designing a login or registration page of another dashboard page.
<form action="/action.php">
<label for="firstname">First name:</label><br>
<input type="text" id="firstname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lastname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
See the following html form example with html and css code ready to use .
Blinking text is can be created using CSS3 animation. You can use css3 @keyframe animation of css3
To open and webpage using a hyperlink tag you can add the target attribute to open the webpage or HTML in a new tab.
<a href="https://frontendzone.com" target="_blank">open page</a>
top 5 Best gradient background with CSS and HTML
Ashish Yadav is a passionate Software Engineer and technology enthusiast having 3 years of experience in web development with a deep interest in the ever-evolving world of technology.
With a background in computer science and extensive experience in software development, Ashish brings a unique perspective to his writing in the tech blogosphere & love to learn and work on technologies
grid area is an important part of the grid. It helps us to create layouts easily while writing less code. Grid is used to create a 2d layout with the help of…
Hello guys in this article we are going to see how to create moving background animation in CSS for the website. So here we are going to use @keyframe animation and translate…
System design is the process of defining systems and architectures to satisfy specific requirements. It includes the process of building architecture, components, or interfaces to satisfy the specific requirement which translates requirements…
Hello coders, in the blog we will learn how to reload a page in the React JS application Unlike the traditional web development practices where a simple page refresh could suffice, ReactJS,…
in this article, we will learn how to add an image in HTML. the syntax of adding an image in HTML is the same whether it reacts or another technology. <img/> is…