Learn HTML Video Tutorial

Learn HTMLI was dared to create an HTML video tutorial that covers the top 50 tags, in under 15 minutes. Well I did it!

I show how to use 50 different tags in HTML. I then give an example of each. You’ll either love it or hate it. I hope you love it of course.

If you would prefer to see this done more slowly check out Learn HTML. I go through everything much slower and provide examples as well.

I plan on covering JavaScript next and then moving back into the wonderful world of PHP and then everything WordPress Themes & Plugins.

The code used in the video follows the video. Leave questions or comments below.

Code From the Video

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />

<style type="text/css">

h1 {color:red}

</style>

<meta name="description" content="Welcome to Bob's Hardware, We sell" />

<meta name="keywords" content="Flowers, Seeds, Rakes, Shovels, Hardware Store" />

<meta name="author" content="Bob Smith" />

<title>Welcome to Bob's Hardware Store, we sell Flowers, Seeds, Rakes</title>

</head>

<body>

<h1>Text to Draw Attention to</h1>

<abbr title="A much longer description">Something Abbreviated</abbr>

<acronym title="as soon as possible">ASAP</acronym>

<b>I Want this to be Bold</b>

<big>This is going to be Big</big>

<blockquote>Indent me and show I'm important</blockquote>

<center>Center Me Please</center>

<em>I like Being Italicized</em>

<i>I like being Italicized too</i>

<p>This is a big paragraph. Really, it is!</p>

<q>You can quote me on that</q>

<s>I've been struck</s>

<small>I feel so small</small>

<strong>I'm the strongest</strong>

<sub>I'm Subscript</sub>

<sup>I'm Superscript</sup>

<img src="http://www.newthinktank.com/wp-content/uploads/2010/03/marketing-examples45_sm_sm.jpg" alt="Merrill Lynch Ad" height="415" width="300"/>

<dl>

<dt>Bicycle</dt>

<dd>- Has two Wheels</dd>

<dt>Car</dt>

<dd>- Has Four Wheels</dd>

</dl>

<ol>

<li>Car</li>

<li>Truck</li>

<li>Bicycle</li>

</ol>

<ul>

<li>Car</li>

<li>Truck</li>

<li>Bicycle</li>

</ul>

<a href="http://www.newthinktank.com" target="_blank">The New Think Tank Website</a>

<a href="http://www.newthinktank.com#Great Stuff">Some Great Stuff</a>

<a href="mailto:derekbanas@example.com?Subject=Hello%20again">Send Mail</a>

<table summary="Here is my sample table and a description of what it's about">

<caption>

Here are some things I did

</caption>

<tr>

<th>Sat</th>

<th>Sun</th>

<th>Mon</th>

</tr>

<tr>

<td>Played Ball</td>

<td>Watched Football</td>

<td>Worked</td>

</tr>

</table>

<form action="http://www.newthinktank.com/mail2.php" method="post">

<b>Send Message to this Email</b><br />
<input type="text" name="email" size=40><br />

<p><b>Subject</b><br />
<input type="text" name="subject" size=40></p><br />

<p><b>Text Area</b><br />
<textarea cols=40 rows=10 name="message">Default Text in Text Area Box</textarea></p><br />

<p><b>Text Input</b><br />
<input type="text" name="textinput" /></p><br />

<p><b>Password Input</b><br />
<input type="password" name="password" /></p><br />

<p><b>Radio Input</b><br />
<input type="radio" name="radioinput" value="Love Radio Buttons" />Love Radio Buttons
<input type="radio" name="radioinput" value="Hate Radio Buttons" />Hate Radio Buttons</p><br />

<p><b>Checkbox Input</b><br />
<input type="checkbox" name="checkboxinput" value="Love Checkboxs" />Love Checkboxs
<input type="checkbox" name="checkboxinput" value="Hate Checkboxs" />Hate Checkboxs</p><br />

<p><b>Select Input</b><br />
<select name="selectinput">
<option value="loveselect">I love select buttons</option>
<option value="hateselect">I hate select buttons</option>
</select></p><br />

<p><b>Option Input</b><br />
<select name="optioninput">
<option value="loveselect">I love option buttons</option>
<option value="hateselect">I hate option buttons</option>
</select></p><br />

<p><input type="submit" value="Send"></p>

<input type="hidden" name="submitted" value="TRUE" />

</form>

</body>

</html>

- See more at: http://www.newthinktank.com/2011/01/learn-html-video-tutorial/?utm_source=rss&utm_medium=rss&utm_campaign=learn-html-video-tutorial#sthash.kEtaPO8D.dpuf

MAIL2.PHP

<html>
<head><title>PHP Mail Sender</title></head>
<body>
<?php

/* Check if the form was submitted */
if (isset($_POST['submitted'])) {
	$errors = array(); // Create an Error Array


/* Check to see if all fields have a value */
if (empty($_POST['email'])) {
	$errors[] = 'Please Enter an Email.';
}

if (empty($_POST['subject'])) {
	$errors[] = 'Please Enter a Subject.';
}


if (empty($_POST['message'])) {
	$errors[] = 'Please Enter a Message.';
}


if (empty($errors)) {


/* All form fields are automatically passed to the PHP script through the array $_POST. */
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
$textinput = $_POST['textinput'];
$password = $_POST['password'];
$radioinput = $_POST['radioinput'];
$checkboxinput = $_POST['checkboxinput'];
$selectinput = $_POST['selectinput'];
$optioninput = $_POST['optioninput'];

echo " Email: $email <br />";
echo " Subject: $subject <br />";
echo " Message: $message <br />";
echo " Text Input: $textinput <br />";
echo " Password Input: $password <br />";
echo " Radio Input: $radioinput <br />";
echo " Checkbox Input: $checkboxinput <br />";
echo " Select Input: $selectinput <br />";
echo " Option Input: $optioninput <br />";

$message = 'Text Area: ' . $message . ' Text Input: ' . $textinput . ' Password Input: ' . $password . ' Radio Input: ' . $radioinput . ' Checkbox Input: ' . $checkboxinput . ' Select Input: ' . $selectinput . ' Option Input: ' . $optioninput;

/* Sends the mail and outputs the "Thank you" string if the mail is successfully sent, or the error string otherwise. */
mail($email,$subject,$message);

echo "Message Sent, Thank you <br />";

echo "<a href='javascript:history.back(1);'>Click Here to go Back to the Previous Page</a>";

} else { // Report all errors

echo '<h2>An Error Occured</h2>
	  <p>The Following Error Occured: <br />';
	  
	  foreach ($errors as $msg) { // Show each Error
	  echo " - $msg<br />\n";
	  }
	  echo "<a href='javascript:history.back(1);'>Click Here to go Back to the Previous Page</a>";
}
} // Close the Post Submitted Check	  
	
?>
</body>
</html>

<! DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />

<style type=”text/css”>

h1 {color:red}

</style>

<meta name=”description” content=”Welcome to Bob’s Hardware, We sell” />

<meta name=”keywords” content=”Flowers, Seeds, Rakes, Shovels, Hardware Store” />

<meta name=”author” content=”Bob Smith” />

<title>Welcome to Bob’s Hardware Store, we sell Flowers, Seeds, Rakes</title>

</head>

<body>

<h1>Text to Draw Attention to</h1>

<abbr title=”A much longer description”>Something Abbreviated</abbr>

<acronym title=”as soon as possible”>ASAP</acronym>

<b>I Want this to be Bold</b>

<big>This is going to be Big</big>

<blockquote>Indent me and show I’m important</blockquote>

<center>Center Me Please</center>

<em>I like Being Italicized</em>

<i>I like being Italicized too</i>

<p>This is a big paragraph. Really, it is!</p>

<q>You can quote me on that</q>

<s>I’ve been struck</s>

<small>I feel so small</small>

<strong>I’m the strongest</strong>

<sub>I’m Subscript</sub>

<sup>I’m Superscript</sup>

<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/marketing-examples45_sm_sm.jpg” alt=”Merrill Lynch Ad” height=”415″ width=”300″/>

<dl>

<dt>Bicycle</dt>

<dd>- Has two Wheels</dd>

<dt>Car</dt>

<dd>- Has Four Wheels</dd>

</dl>

<ol>

<li>Car</li>

<li>Truck</li>

<li>Bicycle</li>

</ol>

<ul>

<li>Car</li>

<li>Truck</li>

<li>Bicycle</li>

</ul>

<a href=”http://www.newthinktank.com” target=”_blank”>The New Think Tank Website</a>

<a href=”http://www.newthinktank.com#Great Stuff”>Some Great Stuff</a>

<a href=”mailto:derekbanas@example.com?Subject=Hello%20again”>Send Mail</a>

<table summary=”Here is my sample table and a description of what it’s about”>

<caption>

Here are some things I did

</caption>

<tr>

<th>Sat</th>

<th>Sun</th>

<th>Mon</th>

</tr>

<tr>

<td>Played Ball</td>

<td>Watched Football</td>

<td>Worked</td>

</tr>

</table>

<form action=”http://www.newthinktank.com/mail2.php” method=”post”>

<b>Send Message to this Email</b><br />
<input type=”text” name=”email” size=40><br />

<p><b>Subject</b><br />
<input type=”text” name=”subject” size=40></p><br />

<p><b>Text Area</b><br />
<textarea cols=40 rows=10 name=”message”>Default Text in Text Area Box</textarea></p><br />

<p><b>Text Input</b><br />
<input type=”text” name=”textinput” /></p><br />

<p><b>Password Input</b><br />
<input type=”password” name=”password” /></p><br />

<p><b>Radio Input</b><br />
<input type=”radio” name=”radioinput” value=”Love Radio Buttons” />Love Radio Buttons
<input type=”radio” name=”radioinput” value=”Hate Radio Buttons” />Hate Radio Buttons</p><br />

<p><b>Checkbox Input</b><br />
<input type=”checkbox” name=”checkboxinput” value=”Love Checkboxs” />Love Checkboxs
<input type=”checkbox” name=”checkboxinput” value=”Hate Checkboxs” />Hate Checkboxs</p><br />

<p><b>Select Input</b><br />
<select name=”selectinput”>
<option value=”loveselect”>I love select buttons</option>
<option value=”hateselect”>I hate select buttons</option>
</select></p><br />

<p><b>Option Input</b><br />
<select name=”optioninput”>
<option value=”loveselect”>I love option buttons</option>
<option value=”hateselect”>I hate option buttons</option>
</select></p><br />

<p><input type=”submit” value=”Send”></p>

<input type=”hidden” name=”submitted” value=”TRUE” />

</form>

</body>

</html>

33 Responses to “Learn HTML Video Tutorial”

  1. Venky says:

    Excellent. The material and the recorded session made to understand the concepts very well. Thank you so much

  2. san says:

    My name is san, I am the guy who asked you questions about forums in your youtube videos. You sent me these links to learn

    I have a few questions;

    Does the doctype already define the character set with that abbreviation EN for ENglish?

    Why is it necessary to have this below?

    for the character set, what is ISO-8859-1? how does it as EN version. Where that # originated?
    Do my questions make sense?

    • admin says:

      ISO-8859-1 is the default character set in most browsers. It tells the browser that your document will use the original 255 ASCII characters.

      Here are other character sets

      ISO-8859-1 Latin alphabet part 1 North America, Western Europe, Latin America, the Caribbean, Canada, Africa
      ISO-8859-2 Latin alphabet part 2 Eastern Europe
      ISO-8859-3 Latin alphabet part 3 SE Europe, Esperanto, miscellaneous others
      ISO-8859-4 Latin alphabet part 4 Scandinavia/Baltics (and others not in ISO-8859-1)
      ISO-8859-5 Latin/Cyrillic part 5 The languages that are using a Cyrillic alphabet such as Bulgarian, Belarusian, Russian and Macedonian
      ISO-8859-6 Latin/Arabic part 6 The languages that are using the Arabic alphabet
      ISO-8859-7 Latin/Greek part 7 The modern Greek language as well as mathematical symbols derived from the Greek
      ISO-8859-8 Latin/Hebrew part 8 The languages that are using the Hebrew alphabet
      ISO-8859-9 Latin 5 part 9 The Turkish language. Same as ISO-8859-1 except Turkish characters replace Icelandic ones
      ISO-8859-10 Latin 6 Lappish, Nordic, Eskimo The Nordic languages
      ISO-8859-15 Latin 9 (aka Latin 0) Similar to ISO 8859-1 but replaces some less common symbols with the euro sign and some other missing characters
      ISO-2022-JP Latin/Japanese part 1 The Japanese language
      ISO-2022-JP-2 Latin/Japanese part 2 The Japanese language
      ISO-2022-KR Latin/Korean part 1 The Korean language

  3. san says:

    I don’t see you have an opened tag for the br, and the forward is placing after. Is this the only tag that does not need a closing tag?
    Send Message to this Email

    Thank you for your videos.

  4. Dale says:

    Splendid tutorial you had, Derek.

    Beats the crap out of the “commercial” manuals or books I’ve read.

    I’m a merchant who’s venturing into online retailing and had been learning WordPress/CSS/php(for e-cart)/theme-ing to set up my own web-shop. However, the available commercial “manuals/books” had been difficult to understand as these authors seemed to be living in their own worlds and speaking their own languages, and I’m talking about books for beginners, or at least what the cover page says.

    One frustration I had was that authors uses a new code/term but neglected to explain it and then go on to make reference to it subsequently. There are more examples but you get the picture.

    I was also turned off by many online tutorials which exhibited the same I-am-in-my-own-world syndrome or others who had hidden agendas to sell you their services or “plugins” but strategically omitting crucial parts of the code/explanations.

    For your tutorials (I did the HTML, CSS and WordPress theme(halfway through), it had been sheer joy. There’s really nothing more I need to elaborate.

    Please keep it up and I’ll stay tuned to your site.

    Cheers!
    Dale

    • admin says:

      Thank you Dale 🙂 Yes I go out of my way to not sell stuff here. In the real world I’m told I’m an idiot on almost a daily basis because I don’t sell anything.

      I just figured it would be nice to provide tutorials on random subjects and not force people to buy anything, submit personal information, or anything. I hope to some day make enough money from my 2 ads to do this full time. I’m actually getting very close to that point. When I do the only thing that will change is that you can expect tutorials on a more regular basis.

      Thanks for taking the time to show your appreciation.

      Derek

  5. praveen joy says:

    tutorial is good…
    i needed in tutorials is about frames
    can u send me the links about frames…

  6. dikien says:

    thank you, i enjoyed my weekend with your tutorial. It’s time to see Python Tutorial!!

  7. Akshay says:

    Nice tutorials really enjoyed it and this 15 min HTML is a great video it covers almost everything that is mostly used in HTML 🙂

  8. ken says:

    This is a great post! It has helped me a lot. If I want to learn HTML further and know it really well, do you have any recommendations? Know a good book? Online course?
    Thanks
    Ken

  9. Bill says:

    Excellent tutorial. I originally started this by searching for Javascript tutorials and I found yours. I followed the 30 minute Javascript speed tutorial…great video but it took me a while to follow it completly. And then I thought I better step back and check out the HTML videos you have. You do an excellent job of no nonsense training…I really like it. Now…onto the next one….then CSS.
    Bill

    • admin says:

      Thank you 🙂 The best way to learn from my videos is to print out the code. Then as you are watching, pause the videos and take notes. I try to force people to interact with the videos. Then after they are over execute the code on your own while making changes to really understand everything. I hope that helps make the learning experience more fruitful

  10. Anonymous says:

    But i didn’t receive any mail in my PHP why?

  11. sarrarov says:

    But I didn’t receive any mail in my PHP why?

  12. sarrarov says:

    Well I wrote this in my html of my site

    Send Message to this Email

    Subject

    Text Area
    Default Text in Text Area Box
    Text Input

    Password Input

    Radio Input
    Love Radio Buttons
    Hate Radio Buttons
    Checkbox Input
    Love Checkboxs
    Hate Checkboxs
    Select Input

    I love select buttons
    I hate select buttons

    Option Input

    I love option buttons
    I hate option buttons

    And when I clicked send I didn’t received any message in http://beitannahl.com/mail.php
    like you and you can visit my website to see that

  13. Patty says:

    Hi there, I do bulk email advertising and I am fairly new at this. How can I make my splash page (landing page) pop up when people open up the email? Usually I use a template that the company provides but the information on my splash page is much better than the stuff that I come up with using the company’s templates.

  14. Nikola says:

    Hi, just one question, I received mail by:

    derekbanas@p3nlhg1094.shr.prod.phx3.secureserver.net

    where is that came from, is that something random, and how would I make this with my email prefix?

  15. Luis Merlin says:

    hello i want to know how to make spaces in beetween the lines and how to post it to the internet please email me

  16. Ripcord says:

    How do I get a difforent URL for my site

Leave a Reply

Your email address will not be published.

Google+