A Very Quick, Basic HTML Tutorial

Here is a very simple introduction to HTML page creation and tags. You will learn about the HTML tags html, head, title, body, h1, and p. Enjoy!

What You Will Learn:

How to use tags
how to construct a very basic webpage, using notepad.

What you need:

A Computer
Notepad or TextEdit or BBEdit or Dreamweaver
A Web Browser (Firefox, Safari, Internet Explorer, Chrome, Opera)



Have notepad open and your preferred browser. In notepad you are going to type two tags. Tags are used to create HTML documents so that you can view webpages in browsers and other user agents. They are created with the greater than and less than symbols (ie: ). They must have an opening tag, and a closing tag, which is defined with a closing slash (ie: , there ARE exceptions). Content that you want included in your webpage content or design must be placed between html tags. You can view a list of tags here: W3 Schools.com.

Create the Page

Type the following tags.

HTML Code:
  1.  
  2. </html>
  3.  

The <html> tags tell the document that it is going to be a webpage, not just a text file.

A webpage is also created with the use of the <head> tag and <body> tag. Type these in between your opening <html> tag and your closing </html> tag.

HTML Code:
  1. <head></head>
  2. <body></body>
  3. </html>
  4.  

If you noticed, each tag has a slash where it ends. You must place content between tags.

Save Your Document

You will want to save your document in a specific way in order to completely ensure that it will be an HTML document. From your text editor's file menu, click 'Save As'. For the file's name, give it the name "index.html". Save it to your desktop.

The word 'index' is important when creating a website, as this is the default name for a website's first viewed page. When a domain name is typed in the URL box, the browser first looks for index.html, index.php, etc. It is possible to change this later.

How to Title Your Document

Lets look at the <head></head> tag pair at the top of your HTML document. This area of the code is used for invisible elements including CSS and Javascript. You can link to other files here for design or interactive purposes, or more. Things that are placed here are processed by either the browser or the website's server, depending on what type of code it is.

Now that you have saved, let's give the document a title with the tag pair <title> </title>. This tag is specifically used to give your webpage a name that will show up at the top of your browser window. It will not show up inside of your web page's content because we are going to put it into the head of the document. Let's type in 'Hello World' between our opening and closing <title> tags.

HTML Code:
  1. <head>
  2. <title>Hello World</title>
  3. </head>
  4. <body></body>
  5. </html>
  6.  

Yay! Now we can test this little change in our web browser. You can either drag the icon from your desktop to your open browser window, or right click it and open with your browser window, OR if you are using Dreamweaver, simply click your menu File » Preview in Browser and choose one.

The change you will see at the top is that the name of your web page says Hello World.

Creating Content on Your Page

Now lets create something on the page that you can actually see. We will go to our <body> </body> tag pair section and in between, we are going to create the paragraph <p> tag. In between the opening and closing <p> tag, type: Hello world, again!

HTML Code:
  1. <head>
  2. <title>Hello World</title>
  3. </head>
  4. <body>
  5. <p>Hello world, again!</p>
  6. </body>
  7. </html>
  8.  

Save your document, go to your open browser page and click the refresh button (or Control+R or Command+R)

You can now see words on your web page. It is selectable and is in the default font of your browser. To make these words bold, you can use the <strong> </strong> tag pair. The <b> tag used to be the tag for creating bold text, but it is now deprecated or barely used.

HTML Code:
  1. <head>
  2. <title>Hello World</title>
  3. </head>
  4. <body>
  5. <p><strong>Hello world</strong>, again!</p>
  6. </body>
  7. </html>
  8.  

Save your document, go to your open browser page and click refresh again. You will see that 'Hello world' is in bold letters and ', again!' is not. To create italics, use the <em> </em> tag pair. <i> </i> is now the old tag pair to do the same thing.

You can create more than one paragraph tag pair for multiple paragraphs. Browsers have their own spacing measurements for paragraphs, so the space between them may vary.

HTML Code:
  1. <head>
  2. <title>Hello World</title>
  3. </head>
  4. <body>
  5. <p><strong>Hello world</strong>, again!</p>
  6. <p>Here is a second paragraph! It can have multiple sentences and can run as long as you would like. However, it is recommended to keep paragraphs from running too long so that visitors do not lose interest... or go blind.</p>
  7. </body>
  8. </html>
  9.  

Create a Page Title or Header.

Lastly, lets create a heading. People must know what page they have just visited. For this, we can use one or more of the following tag pairs:

HTML Code:
  1. <h1> </h1>
  2. <h2> </h2>
  3. <h3> </h3>
  4. <h4> </h4>
  5. <h5> </h5>
  6. <h6> </h6>
  7.  

By default, these tags go in size order, with the <h1> tag being the biggest and <h6> being the smallest. This can be changed easily by using CSS, but that is for later :). Let's insert some text between the <h1> HTML tag pair.

HTML Code:
  1. <head>
  2. <title>Hello World</title>
  3. </head>
  4. <body>
  5. <h1>I Am A Title on Your Web Page!</h1>
  6. <p><strong>Hello world</strong>, again!</p>
  7. <p>Here is a second paragraph! It can have multiple sentences and can run as long as you would like. However, it is recommended to keep paragraphs from running too long so that visitors do not lose interest... or go blind.</p>
  8. </body>
  9. </html>
  10.  

Save your document, go to your open browser page and click refresh one more time. You can see all your changes, and your new header. You can try out all of the header tags.

HTML Code:
  1. <head>
  2. <title>Hello World</title>
  3. </head>
  4. <body>
  5. <h1>I Am A Title on Your Web Page!</h1>
  6. <h2>I Am A Title on Your Web Page!</h2>
  7. <h3>I Am A Title on Your Web Page!</h3>
  8. <h4>I Am A Title on Your Web Page!</h4>
  9. <h5>I Am A Title on Your Web Page!</h5>
  10. <h6>I Am A Title on Your Web Page!</h6>
  11. <p><strong>Hello world</strong>, again!</p>
  12. <p>Here is a second paragraph! It can have multiple sentences and can run as long as you would like. However, it is recommended to keep paragraphs from running too long so that visitors do not lose interest... or go blind.</p>
  13. </body>
  14. </html>
  15.  

And that concludes our very quick and simple HTML tutorial!

Comments  

0 #1 byron 2011-11-19 15:57
i like how you did it you not only recored it but you also wrote it on the page :)
Quote

Add comment


Security code
Refresh

Search

Visit fbetting.co.uk Betfair Review