This is a very basic tag to do, and some bells and whistles can be added for different purposes (like linking to a key word down the page or opening a new page with a click,) but we're just doing the very barebones of this one here today.

Basically, you can link almost anywhere on the net.

Here in our example we've linked to www.purple.com. You can replace the link with whatever URL you like.



Note that the "http://" is important when coding in a hyperlink especially on myspace.

That code will turn out like this:
LINKED TEXT

Obviously you can use whatever text you like instead of LINKED TEXT. And of course, the colour of the hyperlink will depend on either what colour parameters are defined on the page or what colour you've defined. On most browsers I believe the default colour of an unvisited hyperlink is blue, while the default visited hyperlink colour is purple. Don't quote me on that though because as I said, colours are usually customized.

You can put hyperlinks in images too. All you've got to do is wrap that hyperlink code around an image tag.

It should basically look like this:




And that code will turn out like this (with a random image I chose from my photobucket album):



You can also link BOTH an image, (or a number of images) and text (or a number of lines of text) or any combination of both with the one hyperlink:



And that tag will turn out like so:

text heretext here too

See, this is where a little formatting tag comes in handy:



That is a break. It is pretty self explainatory. If you put one of these in you'll have a line break
two and you'll have a bigger break

and so on. It comes in handy when you are using text and images together. And yes, you can insert breaks between linked text and images like so:




That will turn out like so:
text here

text here too

See? That wasn't too painful was it?

Now the most important thing to remember when hyperlinking is to CLOSE YOUR TAG! Especially if you've got other hyperlinks in your blog, page etc. Otherwise you'll hyperlink everything after the first half of the tag.


Anyhow, like I was saying in the first tutorial, it's all about practice. It's also about willpower. If you blog, use the source editor as opposed to the advanced editor. If you comment, try not to use the premade tags by photobucket. Try using links in ordinary text comments as well as images. I found that daily use of html is the best way to learn how and when to apply these tags.

I may elaborate on this a little more in the future. There's not a whole lot more to linking but I'd suggest some further reading on the wiki page.

I think our next tutorial will be on fonts and paragraph formatting. There's a heap of fontage out there though so we might just stick to some of the basics again. If you're getting bored with the basics chuck me a message and I'll gladly send you some of my personal favorite html sites.

Posting an image in HTML is actually really easy and hopefully this tutorial will help to simplify it somewhat.

First of all, an image needs to be uploaded to the web in order for you to encode it elsewhere on the web. Most of the time, this means you'll have to upload it to either your own photobucket account or to myspace or another image hosting site. But if you see an image on the web, you can usually post it somewhere else without having to upload it to your own account.

Some sites put in measures to prevent what is known as "hotlinking." I must stress also that hotlinking is rather bad form because it's using someone else's bandwidth, but debate on this gets a little convoluted for beginners. So for now we'll just assume you've seen a picture on a friend's myspace page and asked if you can use it.

Now, how do you do that?

It's simple really.

First use your mouse and right click on the image you want to use.

You'll see something like this:





Each browser is different, but what we want is the "properties." That is the image location, the size and sometimes even the author!
When you click properties you'll get something like this:





Again, not all browsers will look like this, but all you really want is that URL there. Right click on the URL and Copy it.

Next, we go back to the page where we want to post it. And here is where we write in our tag:



The black text is the actual tag itself. The red text is where your URL will go. so basically there will be nothing between those quotation marks till you right click and paste the URL of your image like so



I've used the blog window here and the result is this:





Say we wanted to do the same thing, but with an image we've uploaded to photobucket...
All you gotta do is use that same tag:





And in between the quotation marks, place the direct url:





The others around it are pre-made tags that, if all has gone well here today, you probably won't need to use.

Now, we can get into some fancy stuff!


Lets say that you wanted to put an image in your profile, but it's too big and you want it to fit nicely. You can resize the image without having to go into photoshop or opening any graphics programs with a little html.



If you wanted to keep the original proportions and do even less coding, you only need to specify either the width or the height! It'll resize the image to what ever size you want like so:



I only specified the width to be 450 pixels in the image above. You can use whatever numbers you want. One could of course make the image really short and wide. like so:

Of course, that looks a little weird. But hey, that much is up to you to decide. Depending on the image, it might look better like that.


The last thing I'm going to teach you today is something rather neat! Of course, I'm the sort of person that likes to read the street and store signs in the Simpsons, or find easter eggs in DVDs...So the 'alt' tag was fun to learn and something I miss since migrating to opera. There's a different tag that should work on opera but I've not learned it yet. Regardless, 'alt' stands for alternative text. It is the text you'll see if you have images turned off in your browser. But in some browsers, it will also roll down in a little box beside the mouse when your mouse hovers over the image. This is what's known as a "mouse over."

Anyhow since I'm not psychic and I can't tell which browsers you're using, I can't tell whether you'll be able to see the effects in here. But I can show you how to do it! And if you're using Internet Explorer you should be able to see it.





All you need to do is add the green text in, and put whatever text you like between those green quotation marks. You don't need the width and height tags, but I thought I'd include them to show you how to do the full thing.





Place your Cursor over the hamburger and don't move it for a couple seconds...

Neat huh?

Now remember, this is the sort of thing that will get much easier the more you practice. You can practice in the comments here if you like and you can even use any of the images I've posted in this blog. You can save the pics of the tags too if it helps.

I didn't have as much time as I would have liked to spend on this blog, so if you have any questions, please don't hesitate to ask them here or in mail. Remember, it's nothing to be embarassed about. The only stupid question is the question unasked!

In the next tutorial, I'll be covering hyperlinks. Hopefully you'll join me then too :)

The purpose of this blog is to provide some basic tutorials in HTML. I may end up doing a few CSS tutorials as we progress but for now it's probably best to just start at the very very beginning.

Some important things to remember:

When I link to other sites and pages the links will open in a new window or tab. The reason for this is so that you can come back here and continue reading without having to click your back button. Please remember this when you click because some browsers read this as "virus like" behaviour. I can assure you that any site I link to will be virus free and relatively dial-up friendly, ie. not loaded with thousands of images or embedded video, mp3 or midi files. I also abhor popups and spam but in some cases they're simply unavoidable. I'll try to avoid linking to sites with popups here.

I'm going to leave comments open to all that wish to stop by. This is a privilage which I hope will not be abused by the many spammers and drama queens on myspace. Because it's a privilage and not a right I'll be reporting any abuse of this privilage to myspace. This is not to say that I don't welcome comments and questions but I'll not tolerate trolling or offensive remarks, especially towards other readers. I want this blog to be a safe and stress free environment so that people can learn without being heckled or harassed. It's okay to have a bit of fun with this but I draw the line at harassment.

Some of you are already scratching your heads. That's okay, that's the whole purpose of this blog; to help alleviate some of the confusion regarding coding. I'd also love if you'd send me as many questions as you need answered and I'll try to answer a couple of them every Wednesday in this blog. (Keep in mind I'm in Australia and Wednesday means Tuesday night for you Americans.) I'll also try to keep the tutorials coming every Friday/Thursday. If this schedual changes, I'll let you know here!

We've got a lot of work to do, so let's begin!

When you see a page on the web it's the result of coding. One of the most affective means to discover how a page is coded is by viewing the source. This is easily done by right clicking with your mouse and selecting "source" (on Internet Explorer/IE,) or "View Source." This should open a new page with a bunch of what seems random words and characters. It's actually a bit like popping the hood on a car, the code is the mechanics behind a webpage.

Try it with this site: www.purple.com It should have an FAQ in a link on the first page but after a couple seconds it will refresh and you will see a blank purple page. Try viewing the source on it.

One thing you should immediately recognise is where they have defined the language as HTML and if code is what's under the hood, this tag is the ignition. HTML stands for HyperText Markup Language. There are other programming languages out there like CSS or javascript, but for now we're sticking with good old reliable HTML.

By defining the language as HTML, you're essentially creating a html document or telling the browsers that hit the site how to read it. For sites like myspace it's unneccessary to define the language as it's already been done for you. And when you create a HTML document in many html editors the editors will automatically define the language for you as well. Most of you will never need to even know this but I'm nothing if not pedantic!

The mathematical symbols "less than," and "greater than," < and >, are what completes what is known as a tag. They're quite important as without them, the code would simply appear as text on the page, and who wants to read auto coloured fonts with a white background? That's just dull!

There is so much you can do with a little HTML knowledge and hopefully you'll find something you can use here. Remember, HTML is only another language. If you know how to write a little you'll find a whole new world opens up for you.

Our next blog will be on how to put an image on a web page.