Author Topic: Jubal's Web Tutorials 2: Images, Formatting, and Hyperlinks  (Read 2708 times)

Jubal

  • Megadux
    Executive Officer
  • Posts: 22019
  • Karma: 99
  • Awards Awarded for oustanding services to Exilian!
    • View Profile
    • Awards
Jubal's Web Tutorials 2: Images, Formatting, and Hyperlinks
« on: January 23, 2010, 01:36:10 PM »
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.
« Last Edit: July 19, 2013, 01:37:30 PM by Jubal »
The duke, the wanderer, the philosopher, the mariner, the warrior, the strategist, the storyteller, the wizard, the wayfarer...

lordryan756

  • Citizens
    Voting Member
  • Posts: 255
  • Karma: 2
    • View Profile
    • Awards
Jubal's Web Tutorials 2: Images, Formatting, and Hyperlinks
« Reply #1 on: 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

  • Devourer of Souls
  • Megas Domestikos
    Voting Member
  • Posts: 1666
  • Karma: 10
  • I think, therefore I am.
    • View Profile
    • http://exilian.co.uk/
    • Awards
Jubal's Web Tutorials 2: Images, Formatting, and Hyperlinks
« Reply #2 on: 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

  • Megadux
    Executive Officer
  • Posts: 22019
  • Karma: 99
  • Awards Awarded for oustanding services to Exilian!
    • View Profile
    • Awards
Jubal's Web Tutorials 2: Images, Formatting, and Hyperlinks
« Reply #3 on: 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

  • Megadux
    Executive Officer
  • Posts: 22019
  • Karma: 99
  • Awards Awarded for oustanding services to Exilian!
    • View Profile
    • Awards
Re: Jubal's Web Tutorials 2: Images, Formatting, and Hyperlinks
« Reply #4 on: 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...