HTML Tutorial – htmlpress.net

Getting Started

This series of HTML tutorial lessons focuses on the basic and yet most essential lessons to get you quickly started on setting up your blog site, personal or business website. After finishing these lessons, you should be able to create your own HTML pages. You can then go to the WordPress tutorial where you can start using your HTML knowledge. Below this page is a comment section where you can leave you feedback or any other helpful comments that may improve this site.

You can choose to take these tutorials sequentially by just reading and scrolling down this page or learn by topic by selecting a topic from the table of contents located above this page.

Basics

Creating Your First HTML

In this tutorial, you can use any text editor to create a HTML web page. You can use Notepad or, if you want something more sophisticated, you can use Notepad++, Frontpage, etc.

To create your first HTML page, just type the following in you text editor:

<HTML>
Hello world!
</HTML>

You can then save your text file as first.htm or first.html. The difference between the two is that .htm is the old way of saving a file because in the early days, you can only have a file extension of three characters when you use Windows. And for simplicity’s sake will just use the three letter extension.

When you load the fie into your browser you should see Hello World in a white background. This is the most basic coding you can form with HMTL.

A more standardized way of writing this code would be the following:

<HTML>

<TITLE>

htmlpress.net

</TITLE>

<BODY>
Hello world!

</BODY>
</HTML>

If you noticed there are mark up tags enclosed using < >. These mark up tags describe the webpage. The text (htmlpress.net) in the tag <TITLE> for example, places the label on the browser’s top bar. The tag <BODY> shows what text (and later on images, links, etc.) should be the contents in a browser’s window.

Indentation in your HTML file makes your code more readable in the event that you will be using a lot of tags. For this example, you can save this as second.htm.

Building Blocks

In the real world, you would be putting more contents that just “Hello World”. Whether you are creating a blog or creating a static company website, the most basic building blocks would to have a header, some paragraphs, some image and some links.

Continuing where we left of, the body tag can contain those items mentioned above. Consider the example below:

<HTML>

<TITLE>

htmlpress.net

</TITLE>

<BODY>

<h1>HTML Tutorial</h1>
<p>This is an example of a paragraph.</p>
<p>This is another example of a paragraph.</p>

</BODY>
</HTML>

The example above contains the most basic elements of a web page. It has a title, a body, a heading and two paragraphs. Save this file as third.htm. Before proceeding with more example it is important to note that everything from the start tag to the end tag (including the tags themselves) is called an element.

Elements

An element is part of a HTML document that start with a start tag and ends with an end tag. If we take our second example:

<HTML>

<TITLE>

htmlpress.net

</TITLE>

<BODY>
Hello world!

</BODY>
</HTML>

The above HTML document shows that it has three elements. They are the Title tag:

<TITLE>htmlpress.net</TITLE>

and then the Body tag

<BODY>Hello world! </BODY>

and last but not least, the HTML tag

<HTML>

<TITLE>

htmlpress.net

</TITLE>

<BODY>
Hello world!

</BODY>
</HTML>

Attributes

HTML Elements can also have attributes which are additional information that enhances its function. A good example of this is the anchor link element.

<A href="first.htm">My first HTML document </A>

The href attribute instructs the browser to open the first.htm file when this link is clicked by a user. Attributes, in general, takes the format name=value where name is the name of the attribute and value is the value of the attribute that is enclosed in double quotation marks. As a recommendation, attributes are to be in lower case.

Headings

In our third example, a heading element was introduced. Here it is again below:

<h1>HTML Tutorial</h1>

Headings to HTML documents are like headlines to a newspaper. There are different kind of heading in a HTML document and usually the difference is in their size. Listed below are the different headings you can use:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

If these codes are to be rendered by the browser it will look like this:

Formatting

There are different ways you can format text in HTML. This part of the tutorial will show you how to format text. The most common ones are to make the text bold, italics and underline. In HTML code, it will look like these:

<b>text is formatted in bold </b>
<i>text is in italics </i>
<u>text is underlined </u>

And when these codes get rendered in the browser, they look like these:

text is formatted in bold
text is in italics
text is underlined

Links

We briefly covered links in the Attribute section above. In this tutorial, there are two types of links. A hyperlink is a link that references another document on the web while an anchor is a link that references a destination inside the document. An example of an anchor is the table of contents above wherein if you click a topic, it goes to the relevant section on this web page.

Hyperlink

A hyperlink references another document on the web and the code can be written like this:

<a href="http://www.animeandmanga.org">Website developed using WordPress and HTML </a>

When this is rendered in a browser, it will look like this:

Website developed using WordPress and HTML

This HTML code will open the website on the same browser. If you like to open the link on a new browser then you can use the target attribute. The hyperlink will then look like this:

<a href="http://www.animeandmanga.org" target="_blank">Website developed using WordPress and HTML </a>

Thus, this link will have a different effect when the user clicks on it:

Website developed using WordPress and HTML

Anchor

Anchors are links to other parts of the HTML document. An example in the tutorial given earlier was the table of contents of this page. The HTML code starts like this:

<div id="0">
<h2>Table of Contents</h2>

The attribute id gives this tag a special identification that the browser can recognize. You can either use the attributes id or name. In order for an anchor to reference this id the following code is needed:

<a href="#0">Go to table of contents</a>

When the user clicks on the link below, the browser then goes to the table of contents.

Go to table of contents

Lists

Lists are ways to display items in vertical sequence. The different kind of list are: unordered, ordered and definition.

Unordered Lists

Unordered lists are made up of bullet points. An example of an unordered list in HTML is shown below:

<ul> <li>first</li> <li>second</li> <li>third</li> </ul>

This is how it would look like when the browser renders the code above:

first
second
third

Ordered List

Ordered lists are made up with a numeric sequence. An example of an unordered list in HTML is shown below:

<ol> <li>first</li> <li>second</li> <li>third</li> </ol>

This is how it would look like when the browser renders the code above:

first
second
third

Images

Images are the life of a web page. Besides content, images spices up a web page and makes it more interesting. To place an image on your HTML document, just use the image tag as shown below:

<img src="http://htmlpress.net/wp-content/uploads/2010/06/helloworld.jpg" > </img>

You can also code it this way:

<img src="http://htmlpress.net/wp-content/uploads/2010/06/helloworld.jpg" / >

The forward slash at the end signifies and end tag. The browser then rendes ths tag like this:

The challenge with placing an image is that when the image is smaller than the width of the paragraph, then you have a blank space next to the image. In the case of the image above, the blank space is on to the image’s right side. To make the text fill in the blank you can use the align attribute

<img src="http://htmlpress.net/wp-content/uploads/2010/06/helloworld.jpg" align="left" / >

By using the align attribute, this paragraph now fill in the spaces. The image is postioned on the left side as specified by its align attribute. If you need to have the image on the right side the just specify align=”right”. To achieve a cleaner effect, enclosed the image and the text in a paragraph tag.

You can also change the dimensions of the image by using the width and height attributes. Using this may distort the image if you do not adjust the image proportionally with the correct ratio measurements. Here’s an example:

<img src="http://htmlpress.net/wp-content/uploads/2010/06/helloworld.jpg" width="60" height = "40" align="left" / >

Commony use file extensions that can be displayed as image are .jpg, .bmp, .gif, .png, etc. There are differences in using these different images. This will be part of the advanced html tutorial. This basic tutorial will be good enough to get you started with setting up your website.

Tables

In this tutorial, you will learn how to create HTML tables. Tables are used to display data in an organized way. Some use this also to format the HTML document into sections. Below is an example code for a table:

<table border="1"> <tr> <td>1st row, cell 1</td><td>1st row, cell 2</td> </tr> </table>

This table renders in the browser like this:

1st row, cell 1

1st row, cell 2

To add another row just add a tr and the two td tags. The border size is increased as well so that you can see the difference.

<table border="6"> <tr> <td>1st row, cell 1</td><td>1st row, cell 2</td> </tr> <tr> <td>2nd row, cell 1</td><td>2nd row, cell 2</td> </tr> </table>

The above code will render like this:

1st row, cell 1	1st row, cell 2
2nd row, cell 1	2nd row, cell 2

You can choose not to have any borders on your table by setting the border attribute to zero and it should look like this:

1st row, cell 1	1st row, cell 2
2nd row, cell 1	2nd row, cell 2

The good thing about using HTML tables is that they are so easy to layout. It’s like having a read-only spreadsheet on your web page. you also can control the spacing in and around the cells. This tutorial will show you how by using the cellpadding and cellspacing attributes.

Cellpadding. This attribute defines the are between the borders and the contents of your table cell. To illustrate, study the code below.

<table border="1" cellpadding="10"> <tr> <td>1st row, cell 1</td><td>1st row, cell 2</td> </tr> <tr> <td>2nd row, cell 1</td><td>2nd row, cell 2</td> </tr> </table>

The cellpadding attribute goes into the table tag. It’s best to have a border when using cellpadding so that you can see the effect of this attribute. HEre’s how it will render:

1st row, cell 1	1st row, cell 2
2nd row, cell 1	2nd row, cell 2

Cellspacing. This attribute on the other hand defines the space within the border itself. So a code like this (notice the white space within the border):

<table border="1" cellspacing="10"> <tr> <td>1st row, cell 1</td><td>1st row, cell 2</td> </tr> <tr> <td>2nd row, cell 1</td><td>2nd row, cell 2</td> </tr> </table>

Will render itself like this:

1st row, cell 1	1st row, cell 2
2nd row, cell 1	2nd row, cell 2

These three attributes: border, cellpadding and cellspacing are the most commonly used attributes in using tables. And generally, you use tables to present data and not to format the layout of your website. Although some new developers are guilty of doing that since it is quick and easy to understand.

In order to format the layout of your website, you should use the DIV tag. This will be the next topic in this tutorial.

Div

The div tag is another way of formatting elements on your web page and even the layout of the web page. And it is more powerful than tables because it has more flexibility in terms of formatting layouts. To start of this tutorial, examine the following code below:

<html> <body>

<div align="center"> hello world </div>

</body> </html>

All this code does, if you saved it as a html file, is to display the word hello world and center it on the web page at the top. By default, div takes the full width of the body tag but not the full height. The height is determined by the number of rows in the div tag. If you want to see borders on your div area just enter the following after the align attribute:

style="border: 1px solid blue;"

Introducing: style. So far in this tutorial, you are shown the conventional way of setting attributes for a tag. A standard practice nowadays is to use the style convention in setting attributes of a tag. This method partly has something to do with CSS – or Cascading Style Sheets. With CSS, this component allows the developer to modify all the attributes of a html tag in one area. This way if you have a html page(s) that have 3000 rows of code, and you just would like to modify the color of the all the header tags, then you don’t have to go through all the rows and hunt then down. You can actually place the CSS codes on a HTML tag, HTML page or in its own .css file. But CSS is more of an advance topic so we won’t cover this here.

Now that you are introduced to the div tag and using the style convention for setting attributes, it’s time to use them to create your own web page layout. The goal is to create something like this when seen on your browser:

In order to achieve that kind of layout, it’s important to envision how your divs will be placed on the page. In theory, it should be placed like this:

There’s probably around seven div tags in order to create this kind of layout and most are nested on each other. To start off, create the first div tag with the blue border. your code should look something like this:

<html>

<body style="margin: 0; padding: 0;">

<div align="center" style="border: 1px solid blue;"> hello world! </div>

</body> </html>

Notice in the body tag, there is this following style attribute: style=”margin: 0; padding: 0;”. If you remove that, there will be a gap between the div’s border and the inner edge of the browser’s frame. So having this style attribute will ensure that you don’t get these gaps. This is especially useful if you want to put a background color to your div’s.

Also note that the width is almost the width of the browser’s window but the height is slightly higher than the height of the text. Later on in this tutorial, you will learn how to control the height of div tags.

Now, it’s time to put in the main container that will hold the header, the content and the footer. In order to achive this your code should look like this:

<html>

<body style="margin: 0; padding: 0;">

<div align="center" style="border: 1px solid blue;">

<div id="wrapper" style="display: table; width: 640px; border: 1px solid green;">

<div id="header" style="width: 100%; border: 1px solid red;">

banner

</div> <div id="content" style="width: 100%; border: 1px solid blue;">

content

</div> <div id="footer" style="width: 100%; border: 1px solid orange;">

footer

</div> </div>

</div>

</body> </html>

The id attribute is used so that it will be easy to reference a particular div in this tutorial. And the id attribute is just that – to identify a div tag or to give reference to it. The id is not part of the style because it does not affect the look and feel of the div tag. Different color were also assignd to the div tags so that it ie easy to differentiate them from one another.

Now the only thing missing here are the columns in the content div and to adjust the heights of the div tags. You can put a fix height by enter something like this in the div’s style: height: 600px;. This could look like the outcome you want if the monitor’s resolution would be 800×600 but it wouldn’t solve the issue of not having a full height div if the computer resolution has a higher configuration.

To ensure that the height is the full height, all you need to do is to set the height attribute of the body tag to 100%. The div tags will follow this lead since it is contained in the body tag. And so to add the columns, this should be the resulting code:

<html>

<body style="margin: 0; padding: 0; height: 100%;">

<div align="center" style="border: 1px solid blue; height: 100%;">

<div id="wrapper" style="display: table; width: 640px; border: 1px solid green; height: 100%;">

<div id="header" style="width: 100%; border: 1px solid red;">

banner

</div> <div id="content" style="width: 100%; display: table; text-align: left; border: 1px solid blue;">

<div id="left-column" style="width: 70%; float:left; padding=10px; border: 1px solid cyan;"> content left </div>

<div id="right-column" style="width: 30%; height: 100%; float:right; padding=10px; border: 1px solid gray;"> content right </div>

</div> <div id="footer" style="width: 100%; border: 1px solid orange;">

footer

</div>

</body> </html>

And there it is. A full web page layout using the div tag. As you may have noticed, the above code still needs some refinement and so we will leave this up to you as part of your home study assignment.

We have now reached the end of our basic HTML tutorial. The skills gained here are just enough to create a basic website made up of HTML documents. The objective here is to knwo the basic building blocks of HTML so that you can open and configure a hosting account, upload some HTML files and point your domain to this hosting accunt. Once you type your domain name to this hosting account, your HTML document should show up.

Once you have created your website, the next step in this tutorial would be to enhance it by using WordPress. But before that, you can either practice the lessons mentioned above or proceed to the next tutorial – which is setting up your own website.

WordPress

WordPress. Now that you have the basic knowledge of creating web pages using HTML from this tutorial, it’s time to introduce WordPress. WordPress is a Content Management System (CMS) designed initially to create websites for blogging. However, because of its flexible design, developers find it easy to create WordPress themes – and WordPress plugins – to create websites for different purposes i.e. shopping carts, real estate, portfolio, etc. WordPress themes are files that give the look and feel of your site. This basically means that all the layout planning using the div tag has been done for you. And there’s a wide selection of free themes that you can choose and upload to your website. wordPress plugins are programs you can upload to give additional functionality to your site. And what’s more interesting with WordPress is that you can set up a website in minutes – without any coding! Having HTML knowledge through this tutorial though means that if you would like to do more for your website, then it would be like a walk in the park.

Our WordPress Tutorial will show you how easy it is to install WordPress on your hosting server. And once installed, the tutorial will take you to the login page and the WordPress editor. In this tutorial, it will show that you the WordPress editor is like any Word processing software where you can actually just type in your contents and format the words or paragraph by pressing some buttons. What makes it more powerful is that you can switch the editor so that it will show the html codes behind it. And this is where you can start to extend the look and feel of your site.

So start your wordPress tutorial now and have your website setup in minutes!

If you have any feedback or comments on the turorials and to help make this website a better experience for you, please feel free to comment below.

Do you find this tutorial useful? Help us maintain this website tutorial. Here’s how.