Basic Html Tutorial - Website Tutor

Website Tutor

follow this blog

12 followers

48 daily readers

rank of 2169

E-mail Subscription

Receive an e-mail notification of new posts on this site:

Basic Html Tutorial - Website Tutor

Html tute: Rounding it off

August 6th 2006 00:17

Well this post is going to finish off the basic html section of these tutorials. After that there are another four or five advanced html tutorials, and then I’m going to bring it all together and actually create a webpage for a local café.

For now, though, lets deal with:

Metatags

Metatags are designed to help search engines interact with your web page. These are placed in the <head> section of the web page. There are two main ones we will discuss:

<meta name=&#8220

escription” content=”your page description”>

Many search engines use this metatag as their description of your website. They will normally only display 100 or 200 words, so it is good to keep this short.

<meta name=“keywords” content=“keyword1 keyword2 keyword3”>

The keyword metatag is used by some search engines to work out which sites are relevant to which search. Be warned, some search engines penalize you for having too many keywords.

And now, on to comments:

Comments

Comments are pieces of html code that can be added to your webpage in order to help you, or someone else, understand the code. They wont appear on the page itself, and wont affect it at all, but can be seen when you look at the source. They take the following form:

<!-Your comment here-->

And for the final part of this post, I will deal with:

Escape Codes

There are some characters that can’t be typed directly into html. Instead you have to use their escape code. These take the form of &code;. So, for example, to use a quotation mark you would type:

"

For the copyright sign you would type

©

There are lists of all the escape characters available on the internet.

Well that’s it for today. Next week we start the advanced course.

Adam

195

Vote

Comments (1)

Add Comments

[ Link ]

Posted By: AdamB - Category: Basic Html Tutorial

Email this Post to a Friend

Basic Html 4: Pictures

July 18th 2006 10:21

This weeks lesson is going to deal with pictures. So create a new page called lesson4.html to your website folder and save a .jpg image of your choice to your website folder and call it image1.jpg.

Now, to include an image on your web page the basic code is:

<img src="source">

So to include an image the image of Oscar Wilde at http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg

you would write

<img src=" http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg">

So lets make up a basic website that does that. In lesson4.html write the following:

<html>
<head>
<title>Lesson 4</title>
</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg">
 
This is my picture of Oscar Wilde
</body>
</html>

Now, lets add the picture we prepared earlier. If a picture is in the same folder as the web page we can just write the picture name. So below "This is my picture of Oscar Wilde", write:

 
 
<img src="image1.jpg">
 
This is the picture I prepared earlier.

You may remember that the command just adds a blank line to make it all look a little neater.

Now you have two basic pictures added to your webpage.

Modifying images

There are also a few important tags that allow you to modify your images:

The width, height and border commands have obvious functions, with the width and height commands resizing the picture. However, it is considered good usage to use these even when leaving the picture the same size as it means a suitable gap will be left in the pages text while the image loads.

These take the following form:

<img src="source" border="border size" width="width" height="height">

So for the photo of Oscar Wilde above we can make it smaller and add a border.

<img src="http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg" border="3" width="30" height ="90">

The other important tag for images is the alt tag, which determines what will replace the image when the image wont display. This takes the form:

<img src="source" alt="alternative text">

So the photo of Oscar Wilde could now use the source below:

<img src="http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg" border="3" width="66" height ="96" alt="A picture of Oscar Wilde">

Images as hyperlinks

You can also use images as hyperlinks. So, we could use our image1.jpg as a link to the webpage we made in lesson 3. To do this you type:

<a href="website url"><img src="image name"></a>

Which in our case would be:

<a href="lesson3.html"><img src="image1.jpg"></a>

In the end

So at the end of this lesson lesson4.html should appear as follows:

<html>
<head>
<title>Lesson 4</title>
</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg" border="3" width="66" height ="96" alt="A picture of Oscar Wilde">
 
This is my picture of Oscar Wilde
 
 
<a href="lesson3.html"><img src="image1.jpg"></a>
 
This is the picture I prepared earlier
</body>
</html>

222

Vote

Add Comments

[ Link ]

Posted By: AdamB - Category: Basic Html Tutorial

Email this Post to a Friend

Basic Html 3: Hyperlinks

July 13th 2006 05:35

Well today we're going to deal with links: those pieces of writing that take you to another website when you click on them.

These links are called anchors and use the <a>your text here</a> tags. However, as with the tag, you generally add more information to these. So the general link to a website is:

<a href="url">your text here</a>

So to link to http://www.google.com you would write <a href="http://www.google.com"> This links to Google</a>

If you are linking to a website that is in the same directory then you can just write the website name. So if you save this as "lesson3.html" in your lessons folder and then create a basic website:

<html>
<head>
<title>Lesson 3</title>
<head>
<body>
your text here
</body>
</html>

and where it says your text here you write:

<a href="lesson1.html">This is the first lesson we learned</a>
<a href="lesson2.html">This is the second lesson we learned</a>
<a href="http://www.google.com">This is a link to Google</a>

you will see the way the different links work (although you may find the page looks neater if you insert a break [by writing ] after every link.)

You can also use hyperlinks to move to a specific place within a document. You do this be creating an anchor at the place you want to jump to, by enclosing the heading in an anchor tag like below:

<a name="anchorname">your text here</a>

and to navigate to that section you write the link, followed by #anchorname where anchorname was whatever you named the anchor.

To experiment with this just create a new website and save it as "extra.html". Add the following code.

<html>
<head>
<title>Extra</title>
<head>
<body>
<a href="#second">This link takes us to part 2 of this page</a>
This is the first part of extra
 
<a name="second"> This is the second part of extra.</a>
</body>
</html>

I have added all the breaks in so it is easy to see the difference between the first part and the second part.

You may not the line: <a href="#second">This link takes us to part 2 of this page</a>

This shows you how to navigate to a particular part of a website if you are already in that website. You just go straight to the #anchorname part of the code.

Now go back to lesson3.html and add two more links after the others:

 
<a href="extra.html">This links to the extra website</a> 
<a href="extra.html#second">This takes us straight to the second part of extra</a>

So lesson3.html should look like:

<html>
<head>
<title>Lesson 3</title>
<head>
<body>
<a href="lesson1.html">This is the first lesson we learned</a> 
<a href="lesson2.html">This is the second lesson we learned</a> 
<a href="http://www.google.com">This is a link to Google</a>
 
<a href="extra.html">This links to the extra website</a> 
<a href="extra.html#second">This takes us straight to the second part of extra</a>
</body>
</html>

Now open lesson3.html by clicking on it so it opens in your web browser and play around.

And that is hyperlinks. If you have any questions then just add a comment and I will try to answer them.

Adam

108

Vote

Add Comments

[ Link ]

Posted By: AdamB - Category: Basic Html Tutorial

Email this Post to a Friend

Html Tutorial 2: Text Editing

July 6th 2006 01:03

Last lesson we constructed a simple web page and this time we are going to make it look a little neater and more presentable. We will start with a website as coded below. If you saved it last time then open it up again in your text editor. However, click save as and choose "lesson2.html" as a file name and choose save as type: "all files".

[ Click here to read more ]

112

Vote

Add Comments

[ Link ]

Posted By: AdamB - Category: Basic Html Tutorial

Email this Post to a Friend

Html tutorial 1: the basics

July 3rd 2006 09:55

This first lesson will aim to teach you how to produce a html website itself and wont worry about producing any particular content for it. If you plan to follow through all of these lessons I advise you create a folder for the lessons (called "HTML lessons" or whatever) and each week store all the files in this folder.

All lessons in the basic HTML section of this website will use notepad (but you can use any text editor).
[ Click here to read more ]

151

Vote

Comments (2)

Add Comments

[ Link ]

Posted By: AdamB - Category: Basic Html Tutorial

Email this Post to a Friend

[ Website Tutor Home ] [ Create A New Post ]

Moderated by Blog Cemetery

[ take over this inactive blog ]

Orble

Orble Homepage

Start an Orble Blog