Learn HTML Video Tutorial
I 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>
Excellent. The material and the recorded session made to understand the concepts very well. Thank you so much
You’re very welcome. I’m glad you enjoyed it 🙂
How do I start a bidding program on my website?
What do you mean by a bidding program?
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?
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
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.
br, img, and input don’t have closing tags
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
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
tutorial is good…
i needed in tutorials is about frames
can u send me the links about frames…
Do you mean iFrames? If you mean regular frames my best advice is to never use them.
thank you, i enjoyed my weekend with your tutorial. It’s time to see Python Tutorial!!
You are very welcome. Thank you for taking the time to show your appreciation
Nice tutorials really enjoyed it and this 15 min HTML is a great video it covers almost everything that is mostly used in HTML 🙂
Thank you 🙂 If you liked that, you’ll flip over my newer tutorial Learn HTML in 15 minutes
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
Thank you 🙂 I have a bunch of videos here HTML Video Tutorial. I then cover CSS and how to make a web page from scratch in this tutorial CSS Video Tutorial. This looks like a good html book Head First HTML and CSS. I hope that helps
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
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
But i didn’t receive any mail in my PHP why?
But I didn’t receive any mail in my PHP why?
What are you trying to do? To send mail you have to have those services set up
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
You have to set up your server to received mail. That is probably the issue. Do you know if you have done that?
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.
You can embed html directly in the email. It may help to go to MailChimp and use their editor. Then you can copy and paste the HTML that it generates for you. I made a tutorial about MailChimp a while back. I hope that helps
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?
I don’t know why you got that email?
hello i want to know how to make spaces in beetween the lines and how to post it to the internet please email me
You could use br, but the best way to control the layout of the different parts in your website is to use CSS. All styling should be done using CSS for best results. I have a CSS video tutorial to help.
How do I get a difforent URL for my site
You could forward to the different url. This is normally set up by your hosting company.