Learn How to Write HTML W3C

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:

<!DOCTYPE> : Defines what type of document your using. This will almost always be the same on every HTML page you ever create.
<a> : Defines a link, that if clicked will take the user to another web page
<b> : Tells the browser, you want the text inclosed to be bold.
<body> : Your main content will reside between to body tags
<br /> : Creates a line break.
<em> : Italicizes the text between these tags.
<form> : Defines an area in which the visitor can interact with your website.
<h1> to <h6> : Defines text that you want to emphasize, such as a title.
<head> : You describe the content of the document, between to head tags.
<hr /> : Draws a horizontal line on your web page, to separate content.
<html> : Defines the beginning and ending of your html page.
<img /> : Tells the browser, you want to insert an image.
<li> : Defines an item in a list, you wish to bullet, or number
<ol> : Tells the browser, an ordered list is about to be defined
<p> : Defines that a paragraph of text is being defined.
<table> : Tells the browser, you’d like to present your information in table format.
<title> : Defines the title of your document
<ul> : Tells the browser, an unordered list is about to be defined

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.

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.

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.

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!

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…

This is where you would list keywords that you think pertain to your website. In this case Flowers, Seeds, Rakes, Shovels, Hardware Store.

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

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

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:

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>

<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>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>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>

The New Think Tank

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>

Some Great Stuff

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>

Some Great Stuff

The final trick I’ll show you is how to create a link that will cause the visitor’s email application to open.

Send me a Message

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:

Here are some things I did

</caption>

<tr>

</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.

Here are some things I did
Sat	Sun	Mon
Played Ball	Watched Football	Worked

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:

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.

<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 />

Above are two text input codes. You should understand what <p>, <b> and <br /> do already. The second line creates a simple text entering tool in the browser. You define that it is a text input tool by typing in input type=”text”. You assign the text the visitor enters to a name with, name=”subject”. Subject is what we call a variable name. The last line of code, size=40 tells the browser that you want the text box displayed, to be 40 characters long.
Send Message to this Email

Subject

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

The above code creates a multi-row text area box. <textarea, tells the browser that you want to display a text area. cols=40 and rows=10, tells the browser that you want the text area to be 40 characters wide and 10 characters tall. name=”message”, creates the variable name message and assigns what your visitor types in to it. Where I have “Default Text in Text Area Box”, is where you would type in default text for the text area box. Then I close the text area block with a closing tag </textarea>.

Text Area

Default Text in Text Area Box

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

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

The first line of code is another simple text box, like I described already. The second box, is almost the same except that the text entered will be represented with dots, so nobody will be able to see the password when it is typed in.

Text Input

Password Input

<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 />

The above code creates either or Radio Buttons, for the visitor to check. <input type=”radio”, tells the browser that radio button code is coming. name=”radioinput”, is the variable name to assign the result the visitor clicks. You can see that the same variable name is used in both lines of code being “radioinput”. value=”Love Radio Buttons”, provides the visitor with a preselected answer. />Love Radio Buttons, ends the tag and then displays the text “Love Radio Buttons” next to the Radio Button.

Radio Input

Love Radio Buttons

Hate Radio Buttons

<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 />

The check box Input is almost the same as the radio button, except the user has the option of selecting both boxes, or none if they so choose.

Checkbox Input

Love Checkboxs

Hate Checkboxs

<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 />

Both, of the above lines of code create a drop down selection tool for you visitors to select from. <select name=”selectinput”>, tells the browser to create a Select Drop Down tool. <option value=”loveselect”>, creates a variable to assign the answer to. >I love option buttons</option>, defines the text that will show up in the drop down box and then closes the option. </select><br />, closes the select tool and then creates a new line.

Select Input

Option Input

This line of code creates a submit button. Value defines the text that will be displayed on the button. When the user clicks the button, all of the variables and their values are matched up and sent to the defined application. In this case mail2.php.

This is called a hidden tag. This is not displayed to the user and is used to pass information without the visitor knowing. In this case it is assigning “TRUE” to the variable named submitted.

</form>

This is the end of the form data. Don’t forget to insert the form ending tag!

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>

h1 {color:red}

</style>

<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>

<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>

<dl>

<dt>Bicycle</dt>

<dd>- Has two Wheels</dd>

<dd>- Has Four Wheels</dd>

</dl>

<ol>

<li>Truck</li>

<li>Bicycle</li>

</ol>

<ul>

<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>

Here are some things I did

</caption>

<tr>

</tr>

<tr>

<td>Played Ball</td>

<td>Watched Football</td>

<td>Worked</td>

</tr>

</table>

<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 />

</form>

</body>

</html>

10 Responses to “Learn How to Write HTML W3C”

larry says:

February 9, 2012 at 7:45 pm

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

Reply
- admin says:
  
  February 12, 2012 at 7:54 am
  
  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
  
  Reply
sharat says:

July 28, 2012 at 6:27 am

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.

Reply
sharat says:

July 28, 2012 at 6:28 am

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.

Reply
Diane says:

February 12, 2013 at 2:35 pm

Send Mail

This is how I learned to do emails? Is this code wrong?

bolm@windstream.net

Reply
- Derek Banas says:
  
  February 12, 2013 at 6:07 pm
  
  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
  
  Reply
Diane says:

February 12, 2013 at 9:26 pm

Can you please tell me what software you are using to build web sites with your apple computer

Reply
- Derek Banas says:
  
  February 13, 2013 at 8:19 am
  
  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
  
  Reply
  - Diane says:
    
    February 13, 2013 at 1:05 pm
    
    Thanks you
    
    Reply
    - Derek Banas says:
      
      February 15, 2013 at 9:40 am
      
      You’re welcome 🙂
      
      Reply