Today, I’m going to completely explain the Hyper-Text Markup Language (HTML). You’ll probably be surprised by how uncomplicated it is. I hope?
A web browser reads HTML, which is just a text file filled with tags. Tags are just words or individual characters in angled brackets, that tell the browser what test needs emphasis, is a paragraph, where to get images, how to take a visitor to another page, etc. There are 89 total tags, but most of the time you will use only 20 total tags. Here are the most common tags:
That is basically all you need to know, about tags in HTML. I will cover all tags in detail for completion reasons. I just don’t want to overwhelm you now. The part that is HTML below will be Black and my comments will be in a blue box. So, right now I’ll show you an HTML file with pretty much everything possible in it.
<! DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
You don’t need to remember this or anything. Just Copy and Paste it from here. It tells the browser exactly what type of HTML format you are following.
<html>
The tag <html> defines the beginning of your HTML file.
<head>
The tag <head> is used to describe the content of your web page.
<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />
This line tells the browser, what language you are writing in. Just cut and paste it, unless you are writing in a different language? I’m writing in english.
<style type=”text/css”>
h1 {color:red}
</style>
This code is used to describe how you want certain things styled on the page. This will be explained further in the Cascading Style Sheet Tutorial and you shouldn’t worry to much about it right now. This code is just telling the browser that text surrounded by the <h1> tags should be red.
<link rel=”stylesheet” type=”text/css” href=”styles.css” >
Again don’t worry about this right now. It also pertains to Cascading Style Sheets. It is telling the browser, that it will find styling information at the location styles.css. The first two options are telling the browser that what your referencing is a style sheet and that the location is styles.css. That’s it!
<meta name=”description” content=”Welcome to Bob’s Hardware, We sell” />
This is where you write a description of the web page. By doing so search engines will be able to easily figure out what’s on your site. In this case Welcome to Bob’s Hardware, We sell…
<meta name=”keywords” content=”Flowers, Seeds, Rakes, Shovels, Hardware Store” />
This is where you would list keywords that you think pertain to your website. In this case Flowers, Seeds, Rakes, Shovels, Hardware Store.
<meta name=”author” content=”Bob Smith” />
Here you can write in your name as the creator of the website, if you want.
<title>Welcome to Bob’s Hardware Store, we sell Flowers, Seeds, Rakes
Here you should put a title for your website. Basically, a short description of the site will do. Then after your done typing your title end it with the </title> tag. I’ll explain why next.
</head>
You start a tag with the tag name in brackets like this <head> and end that tags section like this </head>
Now you know everything there is to know about the header section of a web page. Now I’ll go over everything in the Body section. Remember the body is where all of your content resides.
<body>
This is how you tell a browser that your content is coming next and that they should display it to your visitors.
<h1>Text to Draw Attention to</h1>
Here you are defining a header, that will draw emphasis to certain information on your website. This is how all the different header tags effect text:
An H1 Header
An H2 Header
An H3 Header
An H4 Header
An H5 Header
An H6 Header
<abbr title=”A much longer description”>Something Abbreviated</abbr>
It’s up to you whether you want to skip over any tags and come back later. This is the abbreviation tag. It is used to display a pop-up box with more information, if the visitor drifts their mouse over the word. Here is an example:
Something Abbreviated
<acronym title=”as soon as possible”>ASAP</acronym>
The acronym tag is identical to the abbreviation tag, as far as the visitor knows. It also displays a pop-up. Use it if you like. It looks like this:
ASAP
<b>I Want this to be Bold</b>
The <b> or bold tag, makes your text bold. You can use it if you don’t like using headers, but search engines seem to consider information that is defined with header tags to be more important.
I’m Bold
<big>This is going to be Big</big>
The <big> tag will stretch your font to make it bigger. This tag is also, barely used.
This is going to be Big
<blockquote>Indent me and show I’m important</blockquote>
The <blockquote> tag indents all text that lies between it. It is used to draw emphasis to a paragraph of text as shown with this paragraph. These blue boxes on the screen are Block Quote’s.
The <br /> or line break tag forces the browser to skip to the next line before displaying more text. It is very useful. Special note this tag doesn’t have a closing tag, like most other tags that start like this <title> and end with </title>.
<center>Center Me Please</center>
The <center> tag, will center all the text that lies between it and </center>.
Center Me Please
<em>I like Being Italicized</em>
The <em> or emphasized tag, tells the browser to italicize the text contained between the opening and closing </em> tags.
I like Being Italicized
The <hr /> or horizontal rule tag will place a horizontal line on the screen, where ever it is used. Special note this tag doesn’t have a closing tag, like most other tags that start like this <title> and end with </title>.
<i>I like being Italicized too</i>
The <i> or italic tag, tells the browser to italicize the text contained between the opening and closing </i> tags.
I like being Italicized too
<p>This is a big paragraph. Really, it is!</p>
The <p> or Paragraph tag, is used to define that you want to force a new line after the paragraph closing tag is used </p>. In essence it creates paragraphs.
<q>You can quote me on that</q>
The <q> or quotation tag, will put quotation marks around the text it incapsulates.
You can quote me on that
<s>I’ve been struck</s>
The <s> or Strike-Through tag, will draw a line through the text it surrounds.
I’ve been struck
<small>I feel so small</small>
The <small> tag, will shrink the font of your text.
I feel so small
<strong>I’m the strongest</strong>
The <strong> tag, bolds your text much like the <b> tag does.
I’m the strongest
To finish off the text decoration tags we have <sub> or subscripted and <sup> superscripted tags. They are best described by looking at the example below.
I’m Subscripted
And I’m Superscripted
Yes, I skipped a couple of tags, either because they are never used or because it is considered to be in bad form to use them. Next I’ll go over every tag you use to create lists.
It’s All About your Image Tag
Now I’ll cover the <img> tag. You would use this to place an image into your web page. The code looks like this:
<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/marketing-examples45_sm_sm.jpg” alt=”Merrill Lynch Ad” height=”415″ width=”300″/>
This is what the code means:
- <img> – Tells the browser that an image is available to display.
- src=” – Defines the location, on the web, of the image to display.
- alt=” – Defines what text a person sees if they can’t see the image and what text is displayed if the visitor drifts their mouse over the image.
- height=” – Defines the height of the image.
- width=” – Defines the width of the image
There are other optional attributes that could be used to define the image but these are considered to be the most important. This is how the image would look:
List Tags
If you like lists, your in the right place. I’ll show you the code and then an example of what the list will look like. Here come the list tags:
This is called a Definition List. I don’t use them, but if they are useful for you to use, get to it!
<dl>
<dt>Bicycle</dt>
<dd>- Has two Wheels</dd>
<dt>Car</dt>
<dd>- Has Four Wheels</dd>
</dl>
A browser would decode the code above and output this:
- Bicycle
- – Has two Wheels
- Car
- – Has Four Wheels
This is called an Ordered List. It is called that because when used the list items are numbered. The code looks like this:
<ol>
<li>Car</li>
<li>Truck</li>
<li>Bicycle</li>
</ol>
A browser would decode the code above and output this:
- Car
- Truck
- Bicycle
Finally, this is an Unordered List. It is called that because when used the list items are bulleted.
<ul>
<li>Car</li>
<li>Truck</li>
<li>Bicycle</li>
</ul>
A browser would decode the code above and output this:
- Car
- Truck
- Bicycle
Link or Anchor Tags
Here I’ll explain what goes into creating a link in HTML. When I say link, I mean a word or string of words that send you to another web page when clicked. This is what a link looks like in HTML:
<a href=”http://www.newthinktank.com” target=”_blank”>The New Think Tank Website</a>
This code means the following:
- a – Points out to the browser that this is a link
- href – Tells the browser that when the link is clicked, the visitor should be sent to the web address in quotes.
- target – Defines where the new web page should be opened.
- _blank – Tells the browser to open the linked web page in a new window
- _self – Tells the browser to open the web page in the current browser window. (Default)
There are other options, but they are almost never used
The text between the > and </a>, will be displayed for the visitor to click on. In this case the The New Think Tank Website, will be displayed. You can also link to content on the same web page.
<a name=”Great Stuff”>Some Great Stuff</a>
If you defined important information on a website using #. You could create a link that would go directly to it by writing the following code.
<a href=”http://www.newthinktank.com#Great Stuff”>Some Great Stuff</a>
The final trick I’ll show you is how to create a link that will cause the visitor’s email application to open.
<a href=”derekbanas@example.com?Subject=Hello%20again”>Send Mail</a>
You would just enter the above code, but instead enter your email address.
Table Tags
Now, I will go over the creation of tables. Here is the code needed to create a table in your web page:
<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>
Here are some things I did Sat Sun Mon Played Ball Watched Football Worked What all the Table Code Means
<table> – This defines the beginning of the table. You don’t need to include a summary, but it provides help if your visitor is blind. In fact, nobody will see the summary unless they are using a screen reader.
<caption> – The text entered between the caption tags will be shown, normally above the table. This is also optional.
<tr> – This tells the browser that everything till </tr>, will make up a row of the table.
<th> – This tag defines that the text inside, is a header for the table.
<td> – This tag tells the browser that the information contained is a normal column of information.
</table> – This tag closes the Table.
Everything About Forms
Forms provide you with the ability to interact with your visitors. The following HTML code would create a simple way for someone to send you a message and tell you what they think of Form tools. Here is the code:
<form action=”mail2.php” method=”post”>
This line of code is used to tell the browser, that a form is coming and you want it to pass the data to mail2.php, when the visitor clicks the submit button. I’ll explain method=”post” now. There are two ways to pass data for processing with the mail2.php application. If you choose to use “post”, the information being past will be hidden to the visitor. If instead you used “get”, the information would be past as part of the address. For example after the visitor clicks submit:
- If you used “post” : The address in your browser would look like this http://www.newthinktank.com/mail2.php
- If you used “get” : The address in your browser would look like this http://www.newthinktank.com/mail2.php?email=emailname@emailaddress.com&subject=Hi…
You would use get, when you want people to be able to bookmark or favorite the page. If you don’t then use post because it is more secure.
Well, that’s it for now. If you have any questions, comment below.
Here is the HTML code, without my comments:
till next time…
<! 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=”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><br />
<p><b>Text Area</b><br />
<textarea cols=40 rows=10 name=”message”>Default Text in Text Area Box</textarea><br />
<p><b>Text Input</b><br />
<input type=”text” name=”textinput” /><br />
<p><b>Password Input</b><br />
<input type=”password” name=”password” /><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<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<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><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><br />
<p><input type=”submit” value=”Send”>
<input type=”hidden” name=”submitted” value=”TRUE” />
</form>
</body>
</html>
Hi,
Would you point me to the right HTML tutorial which you talk about inline and block elements’ layout formatting? Although I watch the video second time. I am not aware of you mentioned in the tutorial.
Thank you in advance
That’s more of a CSS issue. Here is my updated HTML Video Tutorial and my CSS Video Tutorial. My How to Layout Websites Tutorial will teach you everything in between
After seeing your tutorial, i checked all the tags which u mentioned in your tutorial but the radio input and check box input are not showing the selection option.In place of radio button t4ext box is being displayed, same with check box too.
After seeing your tutorial, i checked out all the tags which u mentioned in your tutorial but the radio input and check box input are not showing the selection option.In place of radio button t4ext box is being displayed, same with check box too.
Send Mail
This is how I learned to do emails? Is this code wrong?
bolm@windstream.net
Put this in a link tag with this being the value for href “mailto:email@domain.com&Subject=Your Subject”
Like this derekbanas@verizon.net
Can you please tell me what software you are using to build web sites with your apple computer
I make websites using adobe illustrator and photoshop. I code using eclipse and handle HTML, CSS, javascript, etc with a basic text editor named text wrangler
Thanks you
You’re welcome 🙂