Jubal's Web Tutorials 2: Images, Formatting, and Hyperlinks

Started by Jubal, January 23, 2010, 01:36:10 PM

Previous topic - Next topic
Print
Go Down Pages1
User actions

Jubal

January 23, 2010, 01:36:10 PM Last Edit: July 19, 2013, 01:37:30 PM by Jubal
Okay, this is the second of my web creation tutorials. In it, I'll tell you how to use a variety of useful tags to make webpages that look like more than just a block of text.

To find the first tutorial, click here;
http://www.exilian.co.uk/forum/index.php?topic=659.0

Firstly, we're going to carry on where we left off; formatting your webpages. The first two tags in this section are important for making your webpages make sense to a user. Firstly, there's the paragraph tag, <p>. Putting a <p></p> around some text will put it into a paragraph, not much else to say there. The other, a tag which we have no way of covering a tenth of the applications of here, is the <div> tag. Make friends with the div, you'll be seeing it a LOT. The div separates pages into chunks, which can then be manipulated more easily, making it a vital part of more dynamic webpages. Right now, I'm only going to talk about one use of it, using its align attribute. The align attribute exists for many tags (<p> included) and has three normal forms; left, right, and center. Center is always spelt the American way, as shown. So this:

Code Select
<div align="center"><h3>This Title Will Appear In The Centre Of The Page</h3></div>

Will appear centred.

The final formatting point for now will be colours. In the last tutorial, you used colour names such as "green" and "red" to get colours for text and backgrounds. Now we're going to do it properly...
http://html-color-codes.com/
Take any of the codes from the above site and put a hash in front of them to get your code.

Code Select
<body bgcolor="#ff0000" color="#ffffff">

This will create a red webpage with white text. Also, use the "link", "alink", and "vlink" attributes as well as "color" and "bgcolor". These three new ones are for hyperlinks, which is the next part of our tutorial.

Hyperlinks are a vital part of the world wide web. The difference between a document and a webpage is, essentially, that the latter can be linked to other pages and documents. A hyperlink is a piece of text or an image that, when clicked, takes you to another page. To make them, we need a new tag; the anchor.

Code Select
<a></a>

Anchor tags, or <a>, allow you to do things with whatever you put inside them. However, just putting an anchor tag around some text;

Code Select
<a>Why isn't this a link?</a>

Does not make it a link. You need the most important attribute of the anchor tag to allow that; the HREF attribute. Before we can use it, though, we need to have something to link to. Save two HTML pages (made in the way you saw in tutorial 1) in the same folder. Name one "index.html" and the second "me.html". Now open index.html, and put an anchor round some text. Now add the href attribute with the value "./me.html". The "./" shows that the file is in the same folder as the page it is linking from. Using "../" shows that the file is a folder above in the file structure, and for folders below use a forward slash, the below folder name, and then another forward slash before the filename. Finally, remember that to link to other websites you just need to copy the full URL (including the "http://") into the HREF attribute.
Okay, your link should now look like this;

Code Select
<a href="./me.html">This is a link!</a>

And when you load up index.html you should be able to go to me.html. Add a link into me.html to go between the pages. Well done, you can now do hyperlinks!

The final part of this tutorial will be about images. The <img> tag is used to put images into HTML. The only attribute you need for it now is the src attribute, which works like the href attribute for links; just put in the location of the image you want. Remember that for web use images have to be in .jpg, .gif or .png format. So if you have an image called image1.jpg in your website folder;

Code Select
<img src="./image1.jpg">

Will show it.

You know have seen how to make all the most basic elements of websites; links are the movement and information highways of the internet, well-structured pages its backbone. Pictures are useful, too, and make your site look like more than a boring text-block.

In the next tutorial, I'm going to show you the final stages in basic HTML; making your webpages look cleverly and properly structured. Tables, element sizing, and lists will all make your pages look far more professional.
The duke, the wanderer, the philosopher, the mariner, the warrior, the strategist, the storyteller, the wizard, the wayfarer...

lordryan756

#1
January 23, 2010, 03:54:21 PM
Sweetness! Thank you! Soon, i shall conquer the web with massive doses of Copy/Paste Webpages. lolz

Marcus

#2
January 23, 2010, 05:19:16 PM
I may be a tad pedantic, but it would be a good idea to teach the use of css for styling from the start, as it is a far better solution than using html attributes.
"So if you meet me, have some courtesy, have some sympathy, and some taste. Use all your well learned politesse, or I'll lay your soul to waste."

Jubal

#3
January 23, 2010, 06:26:08 PM
I know it is better but nevertheless I'd rather do it this way. CSS is a whole tut in itself really (probably the fourth one), and I'd rather dedicate it the space it really needs.
The duke, the wanderer, the philosopher, the mariner, the warrior, the strategist, the storyteller, the wizard, the wayfarer...

Jubal

#4
July 19, 2013, 01:37:56 PM
Finally fixed links etc from the old site.  :)
The duke, the wanderer, the philosopher, the mariner, the warrior, the strategist, the storyteller, the wizard, the wayfarer...
Print
Go Up Pages1
User actions