Html Programming Examples

About Me

html

<!DOCTYPE html>
<html>
<title><tt>About Me</title>

<style type="text/css">
div
{
   width:400px;
   height:100px;
   background-color:Black;
   border:1px solid black;
}
#div2
{
   transform:rotate(30deg);
   -webkit-transform:rotate(0deg);
   background-color:Gray;
}
#div3
{
    -webkit-transform:rotate(0deg);
    background-color:Black;
}
</style>
</head>
<body>
<div><font size=7><font color=white>About Me</font></font></div>
<div id="div2"><font size=4><font color=white>By: William A. Lofquest</font></font></div>
<div id="div3"> <font color=White> I love to Golf. I like to literally play video games. I love messing with computers. Learnings fun. My favorite shirt is my dabbing leprecahn shirt. I find dad jokes humerous, sometimes.</font> </div>
<p style="border:20px;20px;border-style:solid; border-color:Black; padding: 1em;"</p><img src="https://cdn.pixabay.com/photo/2016/01/12/16/36/video-games-1136042_960_720.jpg" width="550" height="300" style = "display: block;margin-left: auto;margin-right: auto;"/>
<font size= 7<br></br><center><table>The Best Things</font></table></center>
 <p style="border:10px;10px;border-style:solid; border-color:Black; padding: 1em;"<h3> <font size=4> I love to play golf, I just started but im suprisingly good at it. I am interested on computer science and chemistry. Chemistry is what im good at. The Dun part about computers is how they work and mangae to not explode in your face. </font> </h3>
 </body>
</html>

Online HTML Editor

html

<!DOCTYPE html>
<html>
<title>All About Me</title>
<body style="background-color:dodgerblue;">
<h1><center><font face="verdana" color="FireBrick">Hey Everyone!</font></center></h1>
<h3><Center><font face="verdana" color="FireBrick">My name is Pierce and this is a website on who I am and what I do</font></center></h3>
<h2><center><font face="verdana" color="FireBrick">Who I am</font></center></h2>
<font size="4"><center>I am a 13 year old kid and enjoy doing many things. I am skilled in typing in computers and also learning how to code. I think I am getting along nicely with code and do enjoy doing it and html. This website is, as the title entails, all about me and what I do. While being skilled in computers, I have also been playing video games since I was able to walk. With all the practice I have had with games, I was able to join an Open Division Team for a competitve shooter called <strong><i>Overwatch</i></strong>. The team name is currently <i><strong>Cambrai Green</strong></i></i> (soon to be rebranded to <strong><i>Talvisota</i></strong>) and we are currently undefeated with a 4-0 record.</center></font><img src = "data:image/jpeg;base64,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" style = "display: block;margin-left: auto; margin-right: auto;"/> 
<center>But besides all that, I want to thank you for visiting my website and getting to know me</center></body>
</html>

Survey Page

html

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;
   border:1px solid black;
}
#div2
{
   transform:rotate(30deg);
   -ms-transform:rotate(30deg); /* IE 9 */
   -moz-transform:rotate(30deg); /* Firefox */
   -webkit-transform:rotate(30deg); /* Safari and Chrome */
   -o-transform:rotate(30deg); /* Opera */
   background-color:yellow;
}
</style>
</head>
<body>
<div>Hello, World!</div>
<div id="div2">Hello, CSS3!</div>
</body>
</html>

CSS

html

<!DOCTYPE html>
<html>
    <head>
        <title>Styling H1 Tags</title>
        <style>
           h1{
               color: orange;
               font-size: 35px;
               font-family: Helvetica;
           } 
           h2{
               color: blue;
               font-size: 25px;
               font-family: Helvetica;
           }
           p{
               color: red;
               font-size: 17px;
               font-family: Helvetica;
           }
        </style>
    </head>
    <body>
        <h1>Type of Animals' Food Habit</h1>
            <p>Different animals have different food habit.</p>
        
        <h2>Carnivor</h2>
            <p>Aanimals that only eat meat.</p>
            <ul>
                <li>Lion</li>
                <li>Tiger</li>
                <li>Fox</li>
            </ul>
        <h2>Omnicore</h2>
            <p>Animals that eat both meat and vegetables.</p>
            <ul>
                <li>Bear</li>
                <li>Monkey</li>
                <li>Pig</li>
            </ul>
        <h2>Herbivore</h2>
            <p>Animals that only eat vegetables.</p>
            <ul>
                <li>Panda</li>
                <li>Rabbit</li>
                <li>Hourse</li>
            </ul>
    </body>
</html>

Timetable

html

<!DOCTYPE html>
<html>
<head>
   <title>time table</title>
</head>

<body bgcolor="skyblue">
    <h1 style="color:DARKCYAN;" align="center">COLLEGE TIME TABLE</h1>
    <table border="2" cellspacing="3" align="center">
        <tr align="center">
            <th></th>
            <th>8:30-9:30</th>
            <th>9:30-10:30</th>
            <th>10:3-11:30</th>
            <th>11:30-12:30</th>
            <th>12:30-2:00</th>
            <th>2:00-3:00</th>
            <th>3:00-4:00</th>
            <th>4:00-5:00</th>
        </tr>
        <tr align="center">
            <th>Monday</th>
            <th>---</th>
            <th style="color:red;">SUB1</th>
            <th style="color:blue;">SUB2</th>
            <th style="color:green;">SUB3</th>
            <th rowspan="6" align="center">L<br>U<br>N<br>C<br>H<br> </th>
            <th style="color:orange;">SUB4</th>
            <th style="color:purple;">SUB5</th>
            <th>counselling class</th>
        </tr>
        <tr align="center">
            <th>Tuesday</th>
            <th style="color:blue;">SUB1</th>
            <th style="color:yellow;">SUB2</th>
            <th style="color:green;">SUB3</th>
            <th>---</th>
            <th style="color:red;">SUB4</th>
            <th style="color:grey;">SUB5</th>
            <th>library</th>
        </tr>
        <tr align="center">
            <th>Wednesday</th>
            <th style="color:yellow;">SUB1</th>
            <th style="color:blue;">SUB2</th>
            <th style="color:red;">SWA</th>
            <th>---</th>
            <th style="color:green;" colspan="3" align="center">lab</th>
            <th></th>
            <th></th>
        </tr>
        <tr align="center">
            <th>Thursday</th>
            <th style="color:grey;">SUB1</th>
            <th style="color:orange;">SUB2</th>
            <th style="color:yellow;">SUB3</th>
            <th>---</th>
            <th style="color:purple;">SUB4</th>
            <th style="color:blue;">SUB5</th>
            <th>library</th>
        </tr>
        <tr align="center">
            <th>Friday</th>
            <th style="color:red;">SUB1</th>
            <th style="color:green;">SUB2</th>
            <th style="color:grey;">SUB3</th>
            <th>---</th>
            <th style="color:blue;">SUB4</th>
            <th style="color:yellow;">SUB5</th>
            <th>library</th>
        </tr>
        <tr align="center">
            <th>Saturday</th>
            <th style="color:orange;">SUB1</th>
            <th style="color:purple;" colspan="3" align="center">seminar</th>
            <th style="color:yellow;">SUB4</th>
            <th style="color:red;">SUB5</th>
            <th>library</th>
            
        </tr>
    </table>
</body>
</html>

Timetable

html

<!DOCTYPE html>
<html>
<head>
   <title>time table</title>
</head>

<body bgcolor="skyblue">
    <h1 style="color:DARKCYAN;" align="center">COLLEGE TIME TABLE</h1>
    <table border="2" cellspacing="3" align="center">
        <tr align="center">
            <th></th>
            <th>8:30-9:30</th>
            <th>9:30-10:30</th>
            <th>10:3-11:30</th>
            <th>11:30-12:30</th>
            <th>12:30-2:00</th>
            <th>2:00-3:00</th>
            <th>3:00-4:00</th>
            <th>4:00-5:00</th>
        </tr>
        <tr align="center">
            <th>Monday</th>
            <th>---</th>
            <th style="color:red;">SUB1</th>
            <th style="color:blue;">SUB2</th>
            <th style="color:green;">SUB3</th>
            <th rowspan="6" align="center">L<br>U<br>N<br>C<br>H<br> </th>
            <th style="color:orange;">SUB4</th>
            <th style="color:purple;">SUB5</th>
            <th>counselling class</th>
        </tr>
        <tr align="center">
            <th>Tuesday</th>
            <th style="color:blue;">SUB1</th>
            <th style="color:yellow;">SUB2</th>
            <th style="color:green;">SUB3</th>
            <th>---</th>
            <th style="color:red;">SUB4</th>
            <th style="color:grey;">SUB5</th>
            <th>library</th>
        </tr>
        <tr align="center">
            <th>Wednesday</th>
            <th style="color:yellow;">SUB1</th>
            <th style="color:blue;">SUB2</th>
            <th style="color:red;">SWA</th>
            <th>---</th>
            <th style="color:green;" colspan="3" align="center">lab</th>
            <th></th>
            <th></th>
        </tr>
        <tr align="center">
            <th>Thursday</th>
            <th style="color:grey;">SUB1</th>
            <th style="color:orange;">SUB2</th>
            <th style="color:yellow;">SUB3</th>
            <th>---</th>
            <th style="color:purple;">SUB4</th>
            <th style="color:blue;">SUB5</th>
            <th>library</th>
        </tr>
        <tr align="center">
            <th>Friday</th>
            <th style="color:red;">SUB1</th>
            <th style="color:green;">SUB2</th>
            <th style="color:grey;">SUB3</th>
            <th>---</th>
            <th style="color:blue;">SUB4</th>
            <th style="color:yellow;">SUB5</th>
            <th>library</th>
        </tr>
        <tr align="center">
            <th>Saturday</th>
            <th style="color:orange;">SUB1</th>
            <th style="color:purple;" colspan="3" align="center">seminar</th>
            <th style="color:yellow;">SUB4</th>
            <th style="color:red;">SUB5</th>
            <th>library</th>
            
        </tr>
    </table>
</body>
</html>

CSS Variables for Cool Colors

html

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  <title>Adapting Screen Size</title>
  
  <style>
    
    #container {
      display: flex;
      flex-direction: column;
      padding-top: 20px;
      text-align: center;
    }
    
    #insert {
      flex: 1 auto;
      color: darkblue;
      display: block;
      border: 2px dashed magenta;
    }
    
</style>
  
</head>

<body>
  <div id="container">
    <h1 onmouseover="bigBox()" onmouseout="smallBox()">Hello, world!</h1>

      <p id="insert"></p>
    
      <script>
        
        function smallBox () {
          var clientHeight = document.getElementById("container").clientHeight;
          var the_height = $(window).height();
          var padHeight = the_height - clientHeight;
          var x = "Baseline: write me to the screen<br>";
          var outPut = `${x} Window: ${the_height} Container: ${clientHeight} Pad: ${padHeight}`;
          document.getElementById("insert").style.textAlign = "center";
          document.getElementById("insert").innerHTML = outPut;
          document.getElementById("insert").style.height = padHeight;
        }
        
        function bigBox () {
          var clientHeight = document.getElementById("container").clientHeight;
          var the_height = $(window).height();
          var padHeight = the_height - clientHeight;
          var y = "Results: semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper fidelis semper semper fidelis semper fidelis semper fidelis semper fidelis semper semper fidelis semper fidelis semper fidelis semper fidelis sempersemper fidelis semper fidelis semper fidelis semper fidelis semper semper fidelis semper fidelis semper fidelis semper fidelis semper semper fidelis semper fidelis semper fidelis semper fidelis semper semper fidelis semper fidelis semper fidelis semper fidelis semper semper fidelis semper fidelis semper fidelis semper fidelis semper<br>";
          var outPut = `${y} Window: ${the_height} Container: ${clientHeight} Pad: ${padHeight}`;
          document.getElementById("insert").style.textAlign = "justify";
          document.getElementById("insert").innerHTML = outPut;
          document.getElementById("insert").style.height = padHeight ;
        }
      </script>
      
    <div id="page-pad"></div>
    <p>Bottom bottom bottom bottom bottom</p>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>

</html>

Line Break Tag

html

<!DOCTYPE html>
<html>

   <head>
      <title>Line Break  Example</title>
   </head>
	
   <body background ="https://upload.wikimedia.org/wikipedia/commons/4/4f/LFB_Pump_Ladder.jpg">
       <center>
      <p style = "font-family:arial; color:#FF0000;" title="para1" align="left"><big>RUBBER JOHNNIES!!!!</big>Hello<br />
         You delivered your assignment ontime.</p>
         <hr /><br />
         Thanks<br />
         Mahnaz
         </center>
   </body>
</html>

Online HTML Editor

html

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<body>
<form action = "https://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form>
</body>
</html>

Online HTML Editor

html

<!DOCTYPE html>
    <html>
    <head>
    <title>Variables</title>
    </head>
        <body>
            <script>
            var diamondCarats = "hello";
            alert(diamondCarats);
            </script>
        </body>
    </html>

Follow

Newsletter