HTML basic tags


<!DOCTYPE html> :defines the HTML page

<!–….–> : this is the comment tag

<form> : defines an HTML form for user input

<div> : defines a section in a document.

<head> : contains metadata & information for the document.

<html> defines the root of an HTML document.

<meta> : defines metadata about an html document.

<b> : defines a bold text.

<body> : contains the mean visible codes of a document.

<button> : defines clickable buttons.

<em> : defines emphasized text.

<h1> to <h6> : defines html heading.

<input> : defines an input control.

<label> : defines a label for an <input> element.

<title> : defines a title for the document.

<script> : defines JavaScript codes.

<style> : defines css styling.

  • Programming
  • Alert with inline scripting
    <DOCTYPE html> <html>    <head>       <title>alart</title>    </head>    <body>      <p>we will give an alert with button using inline scripting.</p>      <h3>click button to alert</h3>      <button onclick=”alert(‘I love Code-xombi, what about u?’)”>Click</button>    </body> </html>More
  • Creating an alert button
    <!DOCTYPE html> <html>   <head>     <title>background change</title>   </head>   <body>     <button id=”tio”>click</button>     <script>      document.getElementById(“tio”).onclick= function(){      alert(‘hello, i would love to know u more.’)      }    </script>   </body> </html> OUTPUT: This is the output of the alert code above.More
  • Styled button
    <!DOCTYPE html> <html>   <head>     <title>styled button</title>   </head>   <body>     <button id=”btn”>BUTTON</button> <span>This is a styled button</span>     <style>      #btn{        background:blue;        color:white;        width:10em;        height:7em;        border-radius:20em;        border:solid;        border-color:green gold;        border-width:1em;      }    </style>   </body> </html>More
  • How to alert with button.
    <!DOCTYPE html> <html>   <head>     <title>background change</title>   </head>   <body style=”background:black;text-align:center;”>   <h1 style=”background:blue;”>Click button to alert</h1>     <button id=”tio” style=”background:blue;width:20em;height:5em;”>click</button>     <script>      document.getElementById(“tio”).onclick= function(){      alert(‘hello’)      }    </script>   </body> </html>More
  • Background change onclick.
    <!DOCTYPE html> <html>   <head>     <title>background change</title>   </head>   <body>     <div onclick=”change(this)” style=”background-color:red;width:100%;height:30em;color:blue;text-align:center;line-height:30em;”>click me to change</div>     <button id=”tio”>click</button>     <p id=”tfr”>i am a boy</p>     <button id=”ctc” onclick=”answer()”>change</button>     <script>      function change(element){        let gyt= element.style.backgroundColor;        if (gyt == “red”){          element.style.backgroundColor=”green”;        } else{          element.style.backgroundColor=”red”;        }      }    </script>   </body> </html>More
  • Body Font Size
    In the table below, select a body font size in pixels (px) to display a complete “px to em and percent” conversion table. Tip: The default font size is usually 16px.pxempercent 5px 0.3125em 31.25% 6px 0.3750em 37.50% 7px 0.4375em 43.75% 8px 0.5000em 50.00% 9px 0.5625em 56.25% 10px 0.6250em 62.50% 11px 0.6875em 68.75% 12px 0.7500em 75.00% 13px…More
  • How to creat a tooltip
    <!DOCTYPE html><html> <head> </head> <body>       <div class=”tooltip_div”>Left Tooltip<span class=”tooltip”>This is the Tooltip text</span></div>       <style>        body {text-align:left;}.tooltip_div {       position: relative;    display: inline-block;} .tooltip {    visibility: hidden;}.tooltip_div:hover .tooltip {    visibility: visible;}    </style>   </body> </html>More
  • Simple way to creat calculator with HTML,CSS & JS.
    <!DOCTYPE html> <html> <head>       <tittle>calculator</tittle>       <style>                      table{                       border:20px solid blue;                       background:black;                       border-radius:30px;                       height:auto;                   }               input[type=button]{                       color:white;                       height:100px;                       width:60px;                       background:blue;                   }               input[type=text]{                       height:100px;                       width:308px;                       background:blue;                       border-radius:20px;                       color:red;                   }               input:active[type=button]{                       background:red;                       border:black 10px solid;                       border-radius:20px;                   }               body{                       background:rgb(40 60 80);                   }           </style>   </head> <body>     <table>       <tr>           <td>            <input type =”text” id=”result” disabled>                   </td>           </tr>       <tr>               <td>                       <input type=”button”…More
  • HTML basic tags
    html basic tagsMore
  • HTML code Skeleton
    <!DOCTYPE html> <html> <head> <title>….</title> </head> <body> </body> </html>More
  • Faster, More Flexible Editing of Your Sidebars, Headers, and Footers: Blocks for Widgets
    Great news: the block editor you’re familiar with in pages and posts is now part of the widgets editor. Faster, More Flexible Editing of Your Sidebars, Headers, and Footers: Blocks for WidgetsMore

Leave a Comment