top of page

 

Basic Program

​

<!DOCTYPE html>

<html>

<body>

 

<p>This is a sentence.</p>

<p>This is a sentence.</p>

<p>This is a sentence.</p>

 

</body>

</html>

​

Output

​

This is a sentence.

This is a sentence.

This is a sentence.

 

Change Background Color

​

<!DOCTYPE html>

<html>

<body style="background-color:powderblue;">

 

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

 

</body>

</html>

 

Output

​

​

This is a heading

This is a paragraph.

 Bold Formatting

 

​

<!DOCTYPE html>

<html>

<body>

 

<p>This text is normal.</p>

 

<p><b>This text is bold.</b></p>

 

</body>

</html>

​

Output

​

 

This text is normal.

This text is bold.

 

Using “del” to delete

 

<!DOCTYPE html>

<html>

<body>

 

<p>My favorite color is <del>blue</del> red.</p>

 

</body>

</html>

 

Output

​

​

​

My favorite color is blue  red.

 

How to use comments for debugging

 

<!DOCTYPE html>

<html>

<body>

 

<p>This is a paragraph.</p>

<!--

<p>Look at this cool image:</p>

<img border="0" src="pic_trulli.jpg" alt="Trulli">

-->

<p>This is a paragraph too.</p>

 

</body>

</html>

 

Output

​

 

This is a paragraph.

This is a paragraph too.

 

 Inserting an Image

​

<!DOCTYPE html>

<html>

<body>

 

<h2>Italian Trulli</h2>

<img src="pic_trulli.jpg" alt="Italian Trullti" style="width:100%">

 

</body>

</html>image

 

Output

​

​

 

Italian Trulli

 

 

Inserting Animated images

 

<!DOCTYPE html>

<html>

<body>

 

<h2>Animated Images</h2>

 

<p>HTML allows moving images:</p>

 

<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">

 

</body>

</html>

 

Output

Animated Images

HTML allows moving images:

​

​

​

 

Clickable Areas

 

​

<!DOCTYPE html>

<html>

<body>

 

<h2>Image Maps</h2>

<p>Click on the sun or on one of the planets to watch it closer:</p>

 

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

 

<map name="planetmap">

  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">

  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

</map>

 

</body>

</html>

​

Output

Image Maps

Click on the sun or on one of the planets to watch it closer:

 

​

 

Table with borders

​

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

}

</style>

</head>

<body>

 

<h2>Table With Border</h2>

 

<p>Use the CSS border property to add a border to the table.</p>

 

<table style="width:100%">

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>

    <th>Age</th>

  </tr>

  <tr>

    <td>Joe</td>

    <td>blow</td>

    <td>20</td>

  </tr>

  <tr>

    <td>Harry</td>

    <td>Harold</td>

    <td>100</td>

  </tr>

  <tr>

    <td>Joe</td>

    <td>Doaks</td>

    <td>110</td>

  </tr>

</table>

 

</body>

</html>

 

Output

Table With Border

Use the CSS border property to add a border to the table.

​

​

          Firstname         Lastname           Age

          Joe                     blow                     20

         

          Harry                 Harold                 100   

         Joe                      Doaks                  110

 

 

 Adding a YouTube Video with object

​

<?xml version="1.0" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

 

<head>

  <title>Adding a YouTube Video</title>

</head>

 

<body>

  

<h1>Embedding a YouTube Video</h1>

 

<object width="1280" height="720"><param name="movie" value="http://www.youtube.com/watch?v=bnkI8tBNrPY"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/watch?v=bnkI8tBNrPY" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="720"></embed></object>

 

 

</body>

 

</html>

Adding an MP3 player using Flash

 

​

<?xml version="1.0" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

  <head>

    <title>Adding an MP3 player using Flash</title>

  </head>

  <body>

 

<h2>Flash MP3 Player Using object element</h2>

 

<object type="application/x-shockwave-flash" width="600" height="240"

    data="flash/xspf_player.swf?playlist_url=flash/playlist.xspf">

    <param name="movie" value="flash/xspf_player.swf?playlist_url=flash/playlist.xspf" />

</object>

 

 

  </body>

</html>

​

Adding an MP3 without specifying player

​

<?xml version="1.0" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

  <head>

    <title>Adding an MP3 without specifying player</title>

  </head>

  <body>

 

<object width="400" height="80" type="audio/mpeg">

  <param name="src" value="Clementine.mp3" />

  <param name="autoplay" value="true" />

  <param name="autostart" value="1" />

  <embed src="Clementine.mp3" width="400" height="80" ></embed>

</object>

  </body>

</html>

 

Building a Basic Form

​

<!DOCTYPE html>
<title>My Example</title>

<form method="get" action="/html/codes/html_form_handler.cfm">
  <p>
    <label>Name
      <input type="text" name="customer_name" required>
    </label> 
  </p>

  <p>
    <label>Phone 
      <input type="tel" name="phone_number">
    </label>
  </p>

  <p>
    <label>Email 
      <input type="email" name="email_address">
    </label>
  </p>

  <fieldset>
    <legend>Which Uber do you require?</legend>
    <p><label> <input type="radio" name="taxi" required value="car"> Car </label></p>
    <p><label> <input type="radio" name="taxi" required value="van"> Van </label></p>
    <p><label> <input type="radio" name="taxi" required value="SUV"> SUV </label></p>
  </fieldset>

  <fieldset>
    <legend>Extras</legend>
    <p><label> <input type="checkbox" name="extras" value="baby"> Car Seat </label></p>
    <p><label> <input type="checkbox" name="extras" value="wheelchair"> Wheelchair Access </label></p>
    <p><label> <input type="checkbox" name="extras" value="stroller"> Stroller </label></p>
  </fieldset>

  <p>
    <label>Pickup Date/Time
      <input type="datetime-local" name="pickup_time" required>
    </label>
  </p>

  <p>
    <label>Pickup Place
      <select id="pickup_place" name="pickup_place">
        <option value="" selected="selected">Select One</option>
        <option value="office" >Office</option>
        <option value="residence" >Residence</option>
        <option value="store" >Store</option>
      </select>
    </label> 
  </p>

  <p>
    <label>Dropoff Place
      <input type="text" name="dropoff_place" required list="destinations">
    </label>

    <datalist id="destinations">
      <option value="office">
      <option value="residence">
      <option value="store">
    </datalist>
  </p>

  <p>
    <label>Special Instructions
      <textarea name="comments" maxlength="500"></textarea>
    </label>
  </p>

  <p><button>Submit Booking</button></p>

</form>

<hr>
<p>More info: <a href="/html/tags/html_form_tag.cfm"><code>form</code></a>, <a href="/html/tutorial/html_forms.cfm">HTML Form Tutorial</a>, <a href="/html/codes/html_form_code.cfm">HTML Form Code</a>, <a href="/html/codes/html_form_to_email.cfm">Form to Email</a>.</p>

​

​

​

bottom of page