This tutorial is for anyone that would like to make a webpage using HTML, it is designed for anyone with no prior knowledge of HTML. When you use a website creator HTML knowledge will be a very useful skill to fine tune your projects. But if you have some knowledge on HTML this tutorial will be good to touch up on some of the elements you may have forgoten or have not learnt yet.
As you work your way through this tutorial you will find out how easy HTML code is. HTML is not a programming language but is just a simple code to change the looks of text and layout of content.
Note: This tutorial is not quite finished yet, but it covers all the main elements of HTML coding, have fun.
Getting started with HTML
Ok, lets get straight into it! The first thing you need to learn about HTML is, you can use any old text-editor to make HTML pages.
Well here we go, you are now going to make your first webpage.
Firstly, you will need to open a text-editor.
For Microsoft Windows users:
Open NotePad or WordPad. You can find both these programs by going to the “Start Menu” > “All Programs” > “Accessories”. Once you have found NotePad or WordPad launch it(start it).
I suggest that you use NotePad++. It is a much superior version of NotePad. Download it here.
For Mac users:
Open Simple Text.
Once you have started your text editor type in the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> My first home page title </title> </head> <body> Welcome to your first webpage </body> </html>
Now save your webpage as ‘index.html'(without the quotes) on your desktop. Make sure when you goto ‘save as’ you put in index.html with the .html part if you do not the file will save as a .txt file.
Once you have saved your first page, open your web browser(the program you are using to view this page). Then goto “file” in the top left corner, now click on “Open file” or “Open…” and then select your ‘index.html’ file, press open.
Wowy your first webpage. Was that easy or what!
Tips:
- You can save your HTML page as .htm or .html there is no difference
- If you are using a WYSIWYG editor. Try switching it to ‘code mode'(if you can)
- Using code to make web pages (instead of a WYSIWYG editor) will give you much more control on how your page will look and your page will become easier to change
Understanding HTML Tags
So now you can create a web page and display it on your web browser.
Now to learn the most important element of HTML coding, tags.
HTML Tags
Below you will see the code from the last section in this tutorial.
Also you can see there are these funny things with words in them (like <html> and <head>) these are called tags.
Note: The below code is the basic setup of a HTML webpage.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> My first home page title </title> </head> <body> Welcome to your first webpage </body> </html>
<!DOCTYPE …
As you can see the first thing on your code is the <!DOCTYPE … tag, this tag tells the browser to change to whatever mode has been specified, don’t worry if you haven’t have a clue what i am talking about. You don’t need to know what this tag does, just remember to place it at the very top of your page. For more information on the !DOCTYPE tag see: !DOCTYPE Tag and Understanding the !DOCTYPE Tag
<html> and </html>
The <html> tag is one of the most important tags to have on your page. The <html> tag tells your web browser that everything in-between <html> and </html> is a HTML document. The closing tag ‘</html>‘ specifies the end of a HTML document. More on closing tags below.
<head> </head> and <title> </title>
The <head> tag goes straight after the <html> tag, as you can see above. You must also close the <head> tag (<head></head>). The head tag is where you place the title tag and other information that does not get displayed in the ‘window area’. We will cover more on this later, now you will learn what the title tag is used for. The <title> tag is used to display what that particular page is about. The format for this tag(and most other tags) is <Opening tag> Content </Closing tag>.
So for the title tag it is: <title> My first home page title </title>.
You’re probably wondering why you can’t see the content of the title tag on your page, thats because it gets displayed in the top left corner of the whole window. On this page you will see it is “Understanding HTML Tags”.
Here is an example:
<body> and </body>
This tag, like the title tag it is a ‘wrapping’ around the content. eg. <body> Content of the whole page </body>
All displayed content goes between the <body> and </body> tags. On your page the content would be: “Welcome to your first webpage”. In the next section of this tutorial you will learn how to format your text content.
Attributes
Attributes are an add-on to a tag. They are used in the following format: <body bgcolor=”blue”></body>. This attribute tells the web browser to display blue as the background color of your page. Attributes are always used in the opening tag and must have quotes around the variable (blue is the variable for this example). Quotes can be either single or double.
Tips:
- Make sure you understand this page, if you don’t read it again. This page contains all the key elements of a webpage
- Remember to always include the <!DOCTYPE… > tag at the top of every HTML webpage
- Remember to place all your content between the <body> and </body> tags
- Only place text inside the <title> tag
- Use the above code in every webpage you make, the above code is the ‘bare bones’ of a webpage
How To Format Text In HTML
Now you know how to create a HTML page with the basic setup.
So now it is time to add your very own style to your site, first we will start off with easy coding like formatting text then we will move onto harder coding like HTML tables and lists.
Tags for formatting text
There are allot of tags for formating text in HTML, but first you need to know, web browsers count all spaces as ONE and enter(new lines) as ONE space. ie.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> My first home page title </title> </head> <body> Welcome to your first webpage </body> </html>
This code would produce:
Welcome to your first webpage
You must use tags to make new lines. Also you should use the paragraph tag (as shown below).
Paragraph tag
The paragraph tag is used to declare where a paragraph of text is. eg.
<p>HTML is the best code on the web for making web pages.</p>
This code would produce:
HTML is the best code on the web for making web pages.
Well that was easy enough, and text formatting does not get any harder.
Line Breaks
Line breaks are used to stop the current line and start the text on the next line. eg.
<p>HTML is the best code on the web <br> for making web pages.</p>
This code would produce:
HTML is the best code on the web
for making web pages.
No closing tag? No there is no closing tag for the <br> tag. This is because it does not need to wrap around anything.
Emphasized and bold text
There will come a time where you need to make some text stand out. The best tags to do this are: <em> and <strong> The format for these tags is; <em>Emphasized text</em> and <strong>Bold text</strong>. eg.
<p>HTML is the <em>best</em> code on the web for <strong>making</strong> web pages.</p>
This would produce:
HTML is the best code on the web for making web pages.
Comments
Comments are only used by humans and are hidden from view when published(you can view a comment in the source code). They can be used to hide code and leave notes for later, or simply state where you are in your HTML code. The syntax for a comment is: <!– Comment –> eg.
<!-- This is a hidden comment, <em>It has tags in it</em> - but they will not be shown. --> <p>HTML is the best code on the web for making web pages.</p>
This would produce:
HTML is the best code on the web for making web pages.
As you can see comments are not shown, and they can be used on multiple lines.
Tips:
- Use to create more spaces then one
- To make text stand out use <em> and <strong> tags
- To make line breaks use the <br> tag
- Always use the <p> tag when using text
HTML Headings
Time to add a little structure to your site.
<h1> to <h6>
Headings in HTML are done by tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
<h1> is the biggest heading and <h6> is the smallest. The h1 tag should be the first heading on your page and use smaller headings for sub-headings. Here is an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> My first home page title </title> </head> <body> <h1>My very first webpage</h1> <p>Welcome to your first webpage, it now has headings and a little bit of structure</p> <h2>What you have learnt so far</h2> <p>You have learnt how to make a webpage, format the text and create headings.<br> It was quite fun =).</p> </body> </html>
The heading tags also create one line break after the heading.
Tips:
- Use the h1 tag at the top of your page
- As sub headings use h2 h3 h4 h5 and h6
- Remember h1 is the biggest heading and h6 is the smallest
HTML Lists
There are three types of lists, they are: Ordered list, Unoredered list and a definition list.
In this section i will not give you the whole page code, as it would take up alot of room. Just simply add the list code to your page.
Ordered and Unordered HTML Lists
The ordered list starts with the ol tag and the unordered list starts with the ul tag. Between the ol and ul tags goes the li tag, which adds a ‘list item’ for everytime added. eg.
Ordered list:
The ordered list is commonly used for steps on a webpage. As it shows numbers at the start of every li tag. eg.
<ol> <li> Step number 1 </li> <li> Step number 2 </li> <li> Step number 3 </li> </ol>
Unordered list:
Unordered lists are very commonly used. I use an Unordered list at the bottom of this page for the tips. This type of list displays bullets, hence not ordered. eg.
<ul> <li> Quote of the day </li> <li> Quote of the month </li> <li> Quote of the year </li> </ul>
Definition HTML List
Definition lists are most commonly used for glossaries. This type of list is rarly used. The definition list involes a few different tags then the Ordered or the Unordered list. The definition list starts with the dl tag. Between the <dl> and </dl> tags go the <dt> and <dd> tags. eg.
<dl> <dt> This is the Definition Term </dt> <dd> This is where the Definition Description goes </dd> <dt> HTML </dt> <dd> A code used for making web pages, HTML is an abbreviation for Hyper Text Markup Language. </dd> </dl>
Tips:
- Use the definition list in glossaries
How to link in HTML
Now you have given your page structure, now time to give your website structure.
Creating hyperlinks
Hyperlinks are how you link to another page on your site, or to another site. We use the <a href=”URL”>link text</a> tag to link. The attribute ‘href’ defines the destination URL. Between the opening and closing tags, you place the displayed text. eg.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> My first home page title </title> </head> <body> <h1>My very first webpage</h1> <p>Welcome to your first webpage, it now has headings and a little bit of structure</p> <h2>What you have learnt so far</h2> <p>You have learnt how to make a webpage, format the text and create headings.<br> It was quite fun =). You found out how to do this at <a href="http://html-tips.net/">HTML-Tips.net</a> </p> </body> </html>
The text, “HTML-Tips.net” between the opening and closing tags, can be anything at all. The URL “http://html-tips.net/” in the attribute “href” can only be a valid URL.
The two types of URL
There are two types of links, external and internal. The external link is to a different website and internal links are to pages in your own website.
For internal links you may use the full URL or the ‘reletive’ URL.
The full URL is typed like this:
<a href="http://html-tips.net/webpage.htmll">Webpage at HTML Tips</a>
The relative URL is typed like this:
<a href="webpage.htmll">Webpage at HTML Tips</a>
The reletive URL can only be used if your webpage with the hyperlink is in the same directory(folder) as the webpage being linked to.
External links must have the full URL. eg. http://html-tips.net
Tips:
- The href=”” attribute is used to specify the URL
- Place the displayed text between opening and closing tags
- You may open a link in a new window with the target=”_blank” attribute – This is not advised to do, because it is annoying for the user
- For more information on ‘a’ tag visit: html A tag (anchor tag)
HTML Tables
HTML tables are mainly used for sorting data, they can also be used for a page layout.
Like in the last section i will not give you the whole page code, as it would take up alot of room. Just simply add the table code to your page.
Structure of a HTML Table
The basic HTML table has 3 different tags, they are: <table>, <tr> and <td>. The <table> tag is used to define that you are starting a table (you must include the border=”1″ attributes for the borders to show). The <tr> tag specifies a table row and lastly the <td> tag (which is placed inside the <tr> tag) this tag is the table data-cell, this is where your content goes. eg.
<table border="1"> <tr> <td> Row 1, Cell 1 </td> <td> Row 1, Cell 2 </td> </tr> <tr> <td> Row 2, Cell 1 </td> <td> Row 2, Cell 2 </td> </tr> </table>
Add this code to your page. Take note of how the “Row 1, Cell 1” etc is displayed.
Tips:
- The <td> tag always goes inside the <tr> tag
- Specify the border=”1″ attribute if you want the borders to show
