icteducator: September 2016

Thursday, September 15, 2016

Part 5 - Images & Backgrounds

Introduction

images are a very important part of an HTML page. They make it different from an e-mail or just a printed page. They can be used as a design element to make pages look better and can be used as the background to make the page more interesting.

Images

Images are added to pages very easily. All you need to do is use an <img> tag. You must use some variables with it, though, or it will show:

Which is not very helpful. You must use the src= variable to choose the image to insert. Like a hyperlink this can either be a relative reference or a direct reference including the site's url. For example:

<img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg">

If you include an image in a hyperlink it will, by default, display a blue border round the image. To turn this off you should use the:

border="0"

variable for the image.

Resizing Images

You can resize images inside the browser using two other image variables - width and height. Even if you do not want to resize the image it is useful to specify its size using these variables as it will put a placeholder in the browser and the page will not change much when the image is loaded.

These tags can also be use to make an image bigger or smaller. All measurements are in pixels. Here is an example:

<img src="http://www.gowansnet.com/images/gnet.gif" border="0" width="80" height="30">

or

<img src="http://www.gowansnet.com/images/gnet.gif" border="0" width="10" height="10">

It is good to remember that it is probably better to resize an image in an image editing program if you are making it smaller. This is because the smaller image will have a smaller file size and will load quicker. This would not be the case if you resized it in the browser.

Alt

The final variable of an image is the alt variable. This tells the browser what the alternative text for an image should be if the browser has images turned off. It is used like this:

<img src="http://www.gowansnet.com/images/gnet.gif" alt="The Gowansnet Logo">

Finally you should also remember to use gif or jpeg images as the file sizes are much smaller.

Background Colors

You can change the background color of the page using the bgcolor variable of the <body> tag. It is used like this:

<body bgcolor="#0000FF">

which would set the background color as blue. You could also use an HTML color word.

This is a very simple tag to use as there is really no more to it. You should always remember to ONLY use a light color text on a dark background or a light color text on a dark background. NEVER use blue on red or red on blue. It is generally thought that a white background with black text is best.

Background Images

Background images can be placed on a web page. A background image is an image which is tiled behind the text. It is done using another variable of the <body> tag. It is background and it is used like this:

<body background="myimage.gif">

It is sometimes a good idea to include a background color as well so that people can read the text on the right color before the background image has loaded. Again, you should remember only to use contrasting colors.

Summary

That is the end of this tutorial. You have learnt how to create an HTML page with formatted text split into paragraphs, insert images, link between pages and link to different parts of you
r page. Watch out for our tutorials on how to create frames and tables.

Part 4 - Hyperlinks and Bookmarks

Introduction

You should know how what a hyperlink is and what it is used for. If you do not, a hyperlink is a piece of text you click to be taken to another page. A bookmark is a way of bookmarking a point on your page so that you can hyperlink to it.

The <a> Tag

The <a> tag is used when creating hyperlinks and bookmarks. It stands for anchor. The functions are explained more fully below.

<a href>

To create a hyperlink you need to use the href variable of the <a> tag. Href stands for Hyperlink REFerence. To make a piece of text or an image into a hyperlink you contain it in:

<a href="pageurlhere">Text Goes In Here</a>

Hyperlinks can specify several things:

Function	Example Code
Web Page or Site	<a href="http://www.webaddress.com/folder/page">
Local Page	<a href="pagename.html">
Local Page In A Folder Level Below	<a href="foldername/pagename.html">
Local Page In A Folder Level Above	<a href="../pagename.html">
Open E-mail Program With E-mail Addressed	<a href="mailto:yourname@yourname.com">
Bookmarked Section	<a href="#bookmarkname">
Bookmarked Section In Another Page	<a href="pagelocation.htm#bookmarkname">

Bookmarks

Bookmarks on a page are very easy to make as they also use the <a> tag. Instead of changing the href variable you use the name variable. For example:

<a name="top">The First Text In The Page</a>

Will create a bookmark called top in the text which the tag surrounds. An image can also be contained in this tag. You can then link to this using a standard hyperlink:

<a href="#top">Back To Top</a>

You can name bookmarks anything you like. Bookmarks are very useful on pages which are very long as they can be used to quickly go to another part of the page.

Part 3 - Positioning Text

Introduction

In the last part we finished with the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>
<center>
Welcome To My Homepage
</center>
</body>
</html>

Which displayed the words 'Welcome To My Homepage' in large, red, Arial letters in the middle of your page.

In this part I am going to show you how to position text (or anything else) on your page. I will also show you some other useful HTML tags.

The Tag

The tag is extremely. P stands for Paragraph. It is used to break up text into paragraphs. To define a paragraph you just include the text inside the and tags. This will then group the text together and leave a space after it (like the paragraphs on this page.

The tag has an attribute which can be added to it. This is the align option. You can specify three types of alignment (like in a word processor) - left, center and right. For example to align the text right you use:

Text

It is up to you to decide whether to use the <center> tag or the tag. I usually use the <center> tag as it is shorter which will reduce loading times. It is hardly ever necessary to use the align="left" attribute as nearly all browsers automatically align text to the left but some people use it.

The Tag

Sometimes you will not want to leave a space after your paragraphs. To do this you should use the (break) tag. This tag is very useful as, wherever you insert it, it will start a new line. To create a new line without a space you use the tag and to create a line break you use . There is no end tag for the tag.

For example:

This text is on a line
This text is on the next line

This is text after a line break

This is text after 3 tags.

The <hr> Tag

The <hr> tag is another very useful way of breaking up your page. It will insert a horizontal line like this:

As you can see this is an extremely simple to use tag. It has no closing tag. There are a few attributes for them but they are rarely used. You can change the height (in pixels) the width (in % of window or pixels) and the color (Internet Explorer only). Here is an example of how to create a line 30 pixels high, 50% of the window in blue (you will see it in gray if you are not using Internet Explorer:

<hr width="50%" size="30" color="#0000FF">

Comment Tags

Comment tags are useful if you want to put notes into your HTML code which will not show up on the page. They can be used for copyright notices, little notes to tell you what each section of code is about, notes to people reading your code or anything else you want to use them for. Some web hosts use them so that their servers will know where to insert banners (they look for a specific comment which you must add). These comments take the form:



The browser will ignore anything in a  tag.

Part- 2 Adding Text in HTML

Introduction

In part 1 I explained how to declare an HTML document and I explained how HTML was built up using <tag>text</tag>. Below is the HTML you added in the last part.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
</body>
</html>

For this section of the tutorial I will show you how to create a simple homepage. The first thing you will want to do is change the title of the page from Untitled to:
My Personal Homepage

To do this change the tag:
<title>Untitled</title>
to
<title>My Personal Homepage</title>

The Tag

The tag set are the most common and one of the most versatile tags found in HTML. Using the tags in the basic form they will show text on the page (but they can be changed). To start off we will just display the text:

Welcome To My Homepage

on the screen. To do this you need to add:

Welcome To My Homepage

between the <body> and the </body> tags. This will display the text in a standard font size, black, in Times New Roman. Not the most interesting thing for your homepage.

Size, Color and Face

These are the three things you can set for a piece of text. These are the first tag attributes you have come across. We will start with the Face attribute. Instead of having a new tag for font face (the font it will be displayed in) you add it to the font tag like this:
Welcome To My Homepage
As you can see you enclose the name of the font in quotation marks "" after an equals sign. You do not need to include this in the end tag.

More than one attribute can be added to a tag so it is easy to display this in a different size. The only thing you must remember is that sizes in HTML are not the same as normal font sizes (measured in point sizes (pt). They are a single number which relate to a standard font size in the following way:

HTML Font Size	Standard Font Size
1	8 pt
2	10 pt
3	12 pt
4	14 pt
5	18 pt
6	24 pt
7	36 pt

You can make a nice large title by changing the tag to the following:

Welcome To My Homepage

As you can see, once you know a tag it is easy to add extra options to it. The final one you will learn is the color tag. You must make sure that you must use the American spelling for this. Color is a little different to the other attributes. It can be changed using an HTML Color Word (a standard color name) but only some color names work with this (you can see a list of them here). You can also use HEX codes. HEX codes are in the format #000000 (# followed by six numbers). The first 2 numbers are the amount of Red, the second 2 are Green and the last 2 are blue. To made this text red you could either use:

Welcome To My Homepage

or

Welcome To My Homepage

Centering The Text

Finally you will want to center the text so that it looks like a real title. To do this you can use the <center> tag. To do this simply enclose everything you want centered in the <cente
r> tags like this:

<center>
Welcome To My Homepage
</center>

Which would display text like this:

Welcome To My Homepage

Summary

You have now learnt how to display text on your web page and how to format the color, size and font of it. You have also learnt how to center things on the page. This is the code you should now have for your website.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>
<center>
Welcome To My Homepage
</center>
</body>
</html>

HTML Introduction Part 1 - Your First Page

Introduction

HTML is the language that makes the web work. It is the usual programming language used for most web sites you will visit. It is understood by nearly every computer in the world and is one of the most universal ways of creating documents. HTML may not have the best formatting tools and you cannot guarantee that your pages will look the same in every single browser but without it there would be no internet.

You can, of course, use a WYSIWYG (What You See Is What You Get) HTML editor to make websites but they have 3 main disadvantages:

They sometimes use excess code to create a look on a page which slows down loading times
They do not always create fully compatible code
Some WYSIWYG editors change any HTML code you enter by hand

Because of these you can create much better pages by writing HTML by hand. I must admit that I don't do this much because it is much slower than using a WYSIWYG editor but I still know HTML as it is always good to have a background knowledge. I assure you that if you learn HTML you will create better web pages.

This tutorial will show you the basics of writing HTML.

What Software?

You do not actually need any specialist software to write HTML code and many web designers argue that the best web sites are created in Notepad! For this tutorial, though, I will be using one of my favorite web design programs, FirstPage 2000. It is free and you can download it here.

Some of the advantages of using an HTML editor is that it will color code your HTML code so that it is easier to read, 'clean up' your code when you have finished, and you can use buttons in the software to insert repetitive code.

It doesn't matter if you are using Notepad, FirstPage 2000 or another HTML editor, this tutorial will actually be teaching you the language.

Understanding HTML

The actual HTML language is very easy to learn once you know the basics. HTML is made up of a tag. A tag is a piece of text contained in <> and looks something like this:

<tag>

There are two types of tag. Opening and closing tags. Closing tags are only different as they have a / before them:

</tag>

Tags appear in pairs like this:

<tag></tag>

You are probably not really understanding this so I will explain further. Anything between two tags will have those tags applied to them. A good example of this is using the <center> tag to center align text:

<center>Text in here is centered</center>

Nearly all tags have a closing tag but a few do not. What you must remember is:

<Tag>Text</Tag>

Declaring HTML

Open the program you are using to write HTML. If you are using an HTML editor you will have some code already entered. If you do not have it already, enter the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>

</body>
</html>

I will explain what all this means below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

This tells the browser what language is being used for the page. It is not entirely necessary but it is good to add it in.
<html>
Tells the browser that this is the beginning of an HTML document.

<head>
This is the beginning of the header section. The header section contains the configuration options for the page (like title).
<title>Untitled</title>
This tells the browser what to display as the title of the page. This appears in the title bar at the top of the browser. Enter the name of your page between the <title> tags.
</head>
End of the header section.

<body>
</body>
Everything between these is in the body of the page. This is where all text, images etc. are. This is the most important part of the page.

</html>
Shows the end of the HTML document.

Summary

This concludes this week's tutorial. You have learned how HTML is structured using <tag>text</tag>. You must always remember that whatever is between a starting tag <tag> and an ending tag </tag> will have the tag applied to it. You have also learned how to set the page's title and declare an HTML document