Atryeu Designs ~ A resource center for Web/Graphics Design, Computers and the Internet

Welcome to the Basic HTML guide! 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).

HTML stands for Hyper Text Markup Language and is very widely used across the world wide web as a way to create documents. It may seem hard to understand at first, but with some practice it becomes easy to memorize.

HTML coding is made up of Tags (A tag is a small piece of code; for example: ) to create an overall document. Nearly 99.9% of the webpages you view will all be created with the same few opening and closing tags (A closing tag is written exactly the same as regular/opening tag except it has a forward slash in front) seen below:

In the above code, the HTML opening and closing tags tell the browser where the document starts and were it ends. Within the "head" tags, you can place the title of your site, meta tags to help search engines and such, as well as stylesheets and javascript codes. Usually most anything placed within the head tags are not actually visible on the website aside from a few exceptions. Within the "body" tags you place your actual website content which would be the images, links, text, etc.

The Head Tag

There are lots of things you can place within the head tag, but for now I will only show the site title. For further information about the content of the head tag, you can view the other tutorials/guides.

Title Tag

The "title tag" is how you add your website's title to the document normally. Anything placed within the title tag will be displayed at the very top of the browser you are using. If you look at the top of it now, it should say "Atryeu Designs...."

The above code is what the title tags look like. Pretty simple. Just remember that this code always needs to go between the head tags! When you add it into your basic website document you have so far, the code should look something like the below:

<html>
<head>
<title>Your Website Title</title>
</head>
<body>
</body>
</html>

The Body Tag

Within the body tag you will place all of your website's content. There is no limit to how much information and coding can be placed here and there are hundreds of different things you can do to change the appearance of your webpage from here as well. In this guide, I will only be covering a few things however. To continue on after this, feel free to check out the other HTML guides I have written.

Backgrounds

A lot of people, especially people building small personal sites, like to have something other than the plain white background that is default for all pages. As almost everybody has most likely seen online, you can change your background to a very large variety of colors. You can even place an image in the backgound if you prefer it to a plain solid color. To change the background's solid color, see the below code:

<html>
<head>
<title> Your Website Title </title>
</head>
<body bgcolor="black">
</body>
</html>

The above code, as you can probably guess, will change your website's background color to solid black. You have a large selection of color names you can use, or you can use a hex code (A hex code is a code for a color; example: #000000 is the same as writing black). In my opinion, a hex code is better to use because you have a larger range of colors to use rather than using certain color names. What if you do not want a solid color and prefer an image instead? Here's an example:

<html>
<head>
<title> Your Website Title </title>
</head>
<body background="image.jpg">
</body>
</html>

The above code would add the image "image.jpg" to the background of your website instead. When using an image, you want to make sure the image name is spelled correctly, it is on the host (A website host is a place to put your website. There are many free ones online but also many paid ones without banner ads) and the file size is not very large.

Tips for Backgrounds

Think ahead so the text will be readable over your background!

If you use an image, make sure it's a small file so it loads quickly (remember some people still use dial up!)

Don't use blinding colors (such as yellow). It's hard on the eyes.

Font Tags

A Font tag will allow you to change your text's face (font face is the type of font used, such as Arial or Verdana), size and color. There are many other types of tags that will change the look of your text and those will be covered in the second HTML guide instead. As before, I will show you the codes but I will also show you what they look like afterwards since they will not interfere with my current layout.

<html>
<head>
<title> Your Website Title </title>
</head>
<body>
Your Text
</body>
</html>

The above would look like: Your Text

If you wanted to change the size of the text, it would look like this:

<html>
<head>
<title> Your Website Title </title>
</head>
<body>
Your Text
</body>
</html>

The above would look like: Your Text

Changing the color is basically the same as everything else. You can also combine properties (a property for an HTML code tells that particular tag to have a certain attribute, like a certain color, size, etc) into one tag like this:

<html>
<head>
<title> Your Website Title </title>
</head>
<body>
Your Text
</body>
</html>

The above would look like: Your Text

Tips for Fonts

Make sure the color, size and face are easy to read

Make sure the color is visible on your background

Use basic fonts everybody has (such as Arial, Times New Roman, Verdana...)

ALWAYS close the font tag otherwise it will continue through the page.

Adding Images

A website with nothing more than plain text can get a little boring. It is nice to have a few images, with the content or a layout image, just to add something extra to the site. An image is very simple to add and has some interesting properties you can setup such as the size and adding a border.

Let's say you are wanting to display an image on your web host called "puppy.gif" on one of your pages. To do that, you would use the below code:

<html>
<head>
<title> Your Website Title </title>
</head>
<body>
<img src="puppy.gif">
</body>
</html>

When you view the page, if the image is located on the host and spelled correctly, you should see it displayed where you placed it. Is the image to large for the page and it needs to be smaller? No problem!

<html>
<head>
<title> Your Website Title </title>
</head>
<body>
<img src="puppy.gif" width="200" height="200">
</body>
</html>

The above code will use that same image from the last code but would resize the image so it is only 200x200 pixels (a pixel is a very small dot that helps make up a small piece of an image). You can enter any size you like into the width and height properties but you do not want to make the numbers higher than the actual size of the image itself. Trying to enlarge an image this will can distort it so it does not look correct.

Let's say you want to decorate the image a little and add a bit of a border to it as well as setup a code to when you move the mouse over the image, some text is displayed.

<html>
<head>
<title> Your Website Title </title>
</head>
<body>
<img src="puppy.gif" width="200" height="200" border="2" alt="This is my Puppy">
</body>
</html>

Using the above code will create a "size 2" border around the image. (*Note: You can change the color of the border by adding the property: bordercolor="black). When you move the mouse over the image, the text "This is my Puppy" will be displayed.

As you can see, these simple codes to get you started are very easy to learn and will not take much to memorize so you can use them constantly while writing code for a website. Remember that there are far more properties and types of code that can be added to these but I have only listed the basics to get you started.

HTML Basics Part 2 will cover more information about ways to change your text, how to add links to other pages/sites and other little extras. If you are just beginning, be sure you read through the Part 2 guide as well!!