Posted on September 16th, 2011 No comments
Last week when Hugh showed us examples of hypertext essay from previous student blogs, I was curious on how the student manage to make one single image that links to different webpage. This was the example shown http://raws.adc.rmit.edu.au/~s3239750/hypertextessay/map.html.
Today I finally had some time to explore how to do it by following simple instructions from this book ‘HTML and CSS in 24 Hours’ which I borrowed from the library. See the results here.
The steps are pretty easy and I thought I should put it down as a blog entry for my group members to try it out as well.
Step 1 (Image):
- Choose an image
- Cut the image into vertical strips using Photoshop (or any image editor) and save each image separately
- Place the images into the ‘Project’ folder using Cyberduck software. I randomly name my images that I’ve cut as “first”, “second” and so forth.
Step 2 (coding):
- Insert <a href /> tag to link to first image then <img src /> tag to insert image
Here’s an example of my HTML code:
<a href=”http://raws.adc.rmit.edu.au/~s3308292/blog2/”><img src=”first.jpg” alt=”Yu-Ann’s blog” title”Yu-Ann’s blog (click to view blog)” style=”border:none”/></a>
- The second part of the code with alt is just to attribute the image. I think it still works without putting that in. (I haven’t tried it out.)
- Continue doing the same code by just replacing the links and images.
That’s it! Don’t forget to save and upload the new page.
It’s really simple. I hope that I’ll be able to integrate this ‘imagemap’ into my hypertext essay project.
Posted on August 3rd, 2011 No comments
This post is to test what I can do with HTML text formats. I think this will be
hardFUN as you don’t have to see the same size and boring text fonts. Or is this making you dizzy?
In Week 3′s lab, we started a few basic HTML coding and I decided to explore more on my own. Let’s see what else I have tried on my own.
<b> – Bold text
<i> – Italic text
<big> – Big text
<small> – Small text
<em> – Emphasized text
<strong> - Strong text
<sub> – This is a Subscripted text
<sup> – While this is a Superscripted text