html tutorial 2 adding background image.

HTML Tutorials
Adding a background image.
Coloring text. Adding hyperlinks

Handy Tip: Even if you use a WYSIWYG (what you see is what you get) webpage editor, it's still a good idea to learn the basics of raw code. This way you won't be limited when the editor doesn't co-operate in doing what you need it to do.

Bookmark This Page

HTML Tutorial #2

Adding a background image.
Coloring text.
Adding hyperlinks
Adding a background image

In the first tutorial, you learned to add a background color to your page.
In this, the second tutorial in the series, you will learn how to add a background image.

The code to add a background image is;

<body background="images/plainbgrnd.jpg">

As you see, the background command is inside the body tag. You will need to point the image to reflect the folder on your server where your files are located.

(My image source resides in an image folder, then it's the image name, in this case plainbgrnd.jpg.) Homestead people need to have the source as "files/plainbgrnd.jpg" or if you place your images with everytning else you can simply put the image name.

Taking the html code from the first tutorial and substituting a background image for the plain white background, our code would now look like this;

<html>

<head>
<title>Tanya's HTML Tutorial</title>
</head>

<body background="images/plainbgrnd.jpg">
font size="5">WELCOME TO MY WEBSITE
 Type in text here, blah blah blah. We are making a website.

<img src="http://www.hypergurl.com/images/hypermouse.gif" width="100" height="66" border="0" alt="hypergurl webhosting" >
</body>
</html>

Coloring Text.

Now let's start giving this page a more fancy look. You will now add some color to the title and to make it stand out more, you will make it bold text.

WELCOME TO MY WEBSITE

All we have done is included the color code within the font tag and introduced the bold tag 

Now your html should look like this;

<html>

<head>
<title>Tanya's HTML Tutorial</title>
</head>

<body background="images/plainbgrnd.jpg">
font size="5" color="#000080">WELCOME TO MY WEBSITE

 Type in text here, blah blah blah. We are making a website.

</body>
</html>

You see how you are telling the browser exactly how to display each item with the simply use of html tags.

Let's practice changing colors a little more and at the same time introduce you to using a line break to place your words on the next line.

Here you will use the  tag again to signify a new paragraph.
Aligned to the left.
The font tag encloses the color.
And you make the text bold 
The tag for a line break is   This is one of the few tags that do not have to be closed with a correspoding tag.
You close the bold tag
The  tag is closed where you want the colored text to finish.
And we have a link within the text to take you to another page, more on links below.
Then we finish by closing the paragraph.

>We are going to color this text purple. 
If you want to see a chart of the hexidecimal colors you can find one at 
<a href="http://www.hypergurl.com/colorchart.html">Hypergurl color chart</a>

Adding a hyperlink.

Hyperlinks are what make the internet exiting and easy to go from one place to the next. It's kind of like travelling in a fast jet versus walking a million miles to get to where you want.

Let us put in a hyperlink so that you can go back to html tutorial #1, simply by clicking on the link. We now introduce the <a> tag that commands all hyperlinking.

<a href="http://www.hypergurl.com/htmltutorial1.html">Click here to retun to html tutorial #1</a>

Again the  tag was used for the start of a new paragraph and the link was aligned with the center. The <a> tag started the hyperlink and the href signifies that a www url will be used. You can place whatever text you like and then close the </a> and the 

Now let's see what the html will look like now. And view your webpage here

<html>

<head>
<title>Tanya's HTML Tutorial</title>
</head>

<body background="images/plainbgrnd.jpg">
font size="5" color="#000080">WELCOME TO MY WEBSITE

 Type in text here, blah blah blah. We are making a website.

We are going to color this text purple. 
If you want to see a chart of the hexidecimal colors you can find one at
<a href="http://www.hypergurl.com/colorchart.html">Hypergurl color chart.</a>

<a href="http://www.hypergurl.com/htmltutorial1.html">Click here to retun to html tutorial #1</a>
</body>
</html>

Your on your way now to becoming proficient in html coding.

Hypergurl Hosting

IMPROVED PLANS
FREE Domain Name
Click for more info!

Refer A Friend

Your Email
Your Name
Friends Email
Friends Name

Home

HTML Tutorials Adding a background image. Coloring text. Adding hyperlinks

HTML Tutorial #2

HTML Tutorials
Adding a background image.
Coloring text. Adding hyperlinks