Welcome to the Basic HTML guide Part 2! This is more for complete beginners who have no idea how to write any code yet. If an HTML term comes up that has not been mentioned before, it will be shown in italics and will be followed with a short description of it like this: Term (Description).

This part of the HTML Basics guide will cover more text effects (such as making your text bold, italic, etc), working with paragraphs, line breaks, etc as well as setting up links to link to other pages within your website or different websites. Remember, since I am assuming you have already read the Part 1 guide, ALL of these tags need to go between the body tags or they will not be visible on your website.

Text Effects

Sometimes when you write content for your websites, you want certain things to stand out a little differently than others. The effects within this section will help you learn some of the most used effects to make your text stand out more...

Bold, Italics, Underlined

Making your text bold is a common thing to do online and very simple to code. Just remember that like the font tag, the bold tag (as well as just about every other tags working with text) require you to close them or the effect will continue on through the rest of your webpage.

<b>This Text is Now Bold</b>

This above code would look like: This Text is Now Bold

Pretty easy, wasn't it? If you would rather have your text underlined or use italics, you would use the below codes:

<i>This Text is Now Italics</i>

This above code would look like: This Text is Now Italics

<u>This Text is Now Underlined</u>

This above code would look like: This Text is Now Underlined

What happens if you want to combine them though? You can! As long as you make sure you close EACH tag or it will then make the rest of your content be bold/italic/underlined.

<b><i><u>Your Text</u></i></b>

This above code would look like: Your Text

Heading Sizes

If you use a program like Microsoft Word, you probably have seen a Heading size before. Look back through this page. Find where it says "Text Effects", "Bold, Italics, Underlined" and "Heading Sizes". Those are all "headings" done with HTML coding. There are several different sizes you can do and each have a few basic properties you can add to them.

Heading sizes start at 1 (being the largest) and go until 6 (being the smallest, which is what was used for the "Heading Sizes" text above). I will be using the size 6 heading for the examples, but you can replace the number "6" with any number (1-6) that you wish.

<h6>Basic heading Size 6</h6>

This above code would look like:

Basic Heading Size 6

<h1>Basic heading Size 1</h1>

This above code would look like:

Basic Heading Size 1

As you might have noticed from above, when you use a heading code, there is automatically a blank line above and below the text. This is normal with all headings. If you do not want the space there, use just the plain font tags.

Adding properties to the heading tags are very easy. Unless you want to get into the more advanced properties, the only basic property for the heading tag is the alignment (alignment is where you want the object to go; Left, Right, Center). If you wanted your text aligned to the Right, it would look like this:

<h6 align="right">Your Text</h6>

This above code would look like:

Your Text

If you do not want it aligned to the right, you can replace "right" with either: left or center. If you want it aligned to the left, don't even worry about adding the code. It is set by default, like everything, to be aligned to the left.

If you want to change the color or font face for the headings, you need to either place the font tag in front of it with the settings, or you can use an embedded style property (if you want to learn how to add a style property, look through the CSS tutorials in the Webmaster section).

Blockquote

Some people enjoy using the blockquote on their websites. If used correctly, it can clean up your text and make it look very nice within your website. The blockquote code aligns your text so it looks nicer and words do not stick out all over the edges. This code can be a pain if you try and center the text first, so I would suggest setting up a table (see the Tables tutorials in the Webmaster section) first to align the text where you want it on the page and then use the blockquote.

Blockquote is a very simple, basic code to use. It requires a closing tag or the browser will continue to add the effect to the rest of your text as well. There are no properties for this code which makes it even easier to use and remember.

<blockquote>Your Text</blockquote>

This above code (extended a bit) would look like:

All of this text here would be in blockquotes. As soon as it reaches the end of the line, it bumps the text to the next line and makes sure everything is lined up nicely.

Line Breaks and new Paragraphs

When writing your content out on a webpage, line breaks and paragraphs are a very important part of the code, especially if you are planning on writing more than a few sentences. As you have noticed on this page, there are many different paragraphs. I personally prefer to use just the line break code when I need to go on to a new paragraph, however some may prefer to use the code for paragraphs instead, so both are being listed here so you can decide which one you like to use better.

The below code is how you set up a paragraph for your website.

<p>This is Paragraph 1</p>
<p>This is Paragraph 2</p>

This above code (extended a bit) would look like:

This is Paragraph 1

This is Paragraph 2

A line break is also just as simple to write and they can be used to either end a line quickly and skip to a new line, or to create paragraphs, like I have been doing on this page.

This is Line 1<br>
This is Line 2<br>

This above code would look like:
This is Line 1
This is Line 2

You can skip more than one line by using more than one line break code.

Links

When you design a website, you probably want to have more than one page or you will want to link to another site somewhere. To do this, you need to create a website link, also called a Hyperlink. Creating a link is very simple to do and there are not a whole lot of properties to memorize for it. You can create a link using text or images. You can create links to download files or send you an email. You can also create links with an ImageMap (an image you setup a special HTML code with to create links over certain parts of an image, for example a piece of text or an object in the picture).

Creating a Webpage Link

If you want to allow a visitor to access another page of your website, or you wish to point visitors to a website you like, you need to setup a link. You can do this by setting up a text link or an image link. You MUST close all open links or it will create a great big link out of most of your website.

<a href="http://www.atryeu.net">Link 1</a>
<a href="index.php">Link 2</a>
This above code would look like:
Link1
Link 2

Both of those links will take you back to this website's homepage. If you are linking to another website you usually will want to type out the entire link to that website. If you are just linking to a file on your website, you can use the second option. If you are going to link to a file in another folder you need to type the link out a bit different but it is not difficult and I will show an example shortly.

Let us say you want to use an image to link to another website or file though? All you would do is put the anchor tag (an anchor tag is another name for the "link tag") around the image code.

<a href="http://www.atryeu.net"><img src="images/buttons/button01.jpg"></a>

This above code would look like:

Don't want that nasty border around the image? No problem! You can add the border code mentioned in the first Basic HTML tutorial and set it to 0 so no border will be displayed.

<a href="http://www.atryeu.net"><img src="images/buttons/button01.jpg" border="0"></a>

This above code would look like:

Linking to Files in another Folder

Let us say that you want to link to a file in another folder on your website. This may sound a little confusing at first, but you should be able to catch on to it pretty easily. If you have ever had to use DOS, this should be very simple to understand.

When linking to a file in another folder, you can easily just use the full link to that file. If your website is being hosted on a free site, they sometimes have those long annoying URLs and can be annoying to type out over and over, so instead of using the full link to the file, you can just use the path to a file.

For example, let us say you have a file named "file.jpg" you want to link to that is located inside of a folder called "images" on your website. Rather than creating a great big link to that file, you could simply use the path, like below:

That tells the browser it should look for "file.jpg" inside of the "images" folder. It is just the same as typing out: http://www.atryeu.net/images/file.jpg but it's faster to type out. If you want to link to a file that is located in a folder inside another folder, you would simply type out: "images/folder/file.jpg" to link to it.

What if the page you are working on is already located in a folder, and you want to link to a file in the previous folder? That also is very simple to do!

Those two periods and the forward slash tell the browser that it needs to go to the start of your folder system and look for "file.jpg" in your main folder.

Now let us pretend that we need to link to "file.jpg", but we need to go backwards one folder and then locate the file in a folder titled "pictures". We would use a similar setup as the one before:

That code tells the browser it needs to go back to the main folder, and then look inside the "pictures" folder to find the image. Not to hard, right?

I hope this last part of the Links section was not too confusing. File paths can be a bit tricky at first but they are simple once you get the hang of using them. It just takes a bit of practice! You can also use the file paths when you want to use the image tag or certain other tags to embed files to your site.

There is one final "Basic HTML" tutorial you can look through for further information that will not be covered in the other tutorials. For example, adding background music, using a hyperlink to jump around to areas of the current webpage, creating email links and a few other random bits of codes.