's HTML/CSS Tutorial

This page will show you what some HTML and CSS codes do. We will start at a very basic level, and work up to more complicated codes. Have fun learning!

1. Create & View Your File

Open up Notepad or some basic text editor. Make a new file and save it as "testpage.html". You can save the file as .html or .htm. There is no difference.

Tip: To view what the codes in your file produced, at any time during this tutorial, go to your computer's file explorer, and find where you saved your file. Open up the .html or .htm file, and it should open in your default internet browser.

2. The Main Tags

To make any HTML page, you need to have at least the <html> tag and the <body> tag. The code below should be inserted into your .html file.

3. Make a Page Title

Almost every page on the web has a page title. For now, let's just make the title "Test Page". Insert this code between the <html> tag and the <body> tag.

As you see, there is a new tag: the <head> tag.

4. Put Text in the Page

Let's write some basic text. Without any text changes, the text below should appear the default font and size for your browser, when you view your webpage. Put the text below between <body> and </body>.

If you want to make the text bigger, you can put the font size in a style attribute, like this:

font-size:36pt is a CSS snippet that makes the text have a size of 36 points.

Here is the same text as above, but changed to Calibri font:

font-family:Calibri makes the text change from the default font to Calibri font.

If you want to make the text a little bit more exciting, you can make the text be a different color:

Note: You can replace color:Orange with whatever color you want; I am just giving an example.

5. Create a HyperLink

There is almost no webpage on the internet that doesn't have links. Here is an example of a very basic hyperlink:

To have the link be the same font and size as the text in part four, write the same code(s) in the style category.

To make your links have different looks, (not the default link look), follow the codes below...

To make one link be a different color and not have an underline, do the same as in part four, then add text-decoration:none to get rid of the underline:

To make all links on the page be a different color and not have an underline, use the following example code. Insert the code below anywhere between <head> and </head>. After you insert this code, put multiple links in the body (make sure they don't have any style changes) to test it out.

Now that you understand how to make a link and decorate it, let's make a link to a local webpage.

6. Insert a Picture

Now, we're going to put a picture onto your page. Use the <img> tag...

The picture above shows the picture with its original/default/automatic size.

To make a picture have different sizes, add these codes to the <img> tag:

500px means 500 pixels. You can specify the number of pixels high/wide you want your image to be.

7. More Extensive Learning / Cool Effects

Now that you have got down the basics, you can learn how to do more things with website coding. W3Schools is one of the best websites on the web for learning and understanding W3 (world wide web) coding languages. You can also add more snazzy effects (frequently consisting of JavaScript code) to your website, using websites like Dynamic Drive. Dynamic Drive is one of many good sources for adding effects to webpages.

8. Publish the Webpage to the Web

If you not only want to see what these codes can do, but want to go one step further by allowing anyone on the internet to visit your webpage/website (like the page you are reading right now), you can register your own domain name, or paste the HTML code you made into an HTML input field on an online website maker, such as*.

* has an HTML input field, but not a full HTML mode. For beginning web developers, this shouldn't be a problem.

© 2010-2017 by (formerly Charnco)
About  |  Contact  |  Feedback  |  Facebook