-
CSS Background Image
Posted on October 5th, 2011 No commentsFor my hypertext essay page, I would be using a background image. Note that it is an image and not a background colour. So I knew that I would face a problem with the background image when the page scrolls down. The background image would repeat itself and it would look hideous and that is not what I intend to do. I want my background image to stay put and have the text and images scroll on top of the background image.
This was my first attempt in putting in the background image without any CSS code. I just used the basic code
<body background=”image.jpg”>
Notice how the background image appears again when I scroll to the bottom?
It took me awhile to differentiate the different css background codes available on w3school website. I tried each one of them to familiarize myself with all the different codes. Coding with HTML and CSS is not easy as it looks and it needs lots of practice and patience!
I find that w3school code provided was a bit lengthy, so I search for alternative codes to use to make my background image to stay put. I found this simple website, Page Resource and all I have to do is just type:
bgproperties=”fixed”
Viola, problem fixed! So the actual code now looks like this:
<body background=”image.jpeg” bgproperties=”fixed”>
There, I have scrolled right to the end of the page and my background image is fixed. Only the text is moving. Thank goodness for all the HTML and CSS tutorials online!
-
Imagemap
Posted on September 16th, 2011 No commentsLast 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.
-
Links gone wild
Posted on August 20th, 2011 No commentsI was getting bored of seeing the permalink in numbers. I wanted “Pretty Permalinks” as quoted from WordPress. Below is the screen shot of what the WordPress wrote about the default permalink and I do agree with it.
The next thing I know, I was clicking on the ‘Change Permalinks’
I wanted my permalinks to seem more organize with the date showing with the title on the permalink as well. So I chose it and clicked SAVE.
Then, I click on one of my blog post’s title to see the oh-so-pretty-permalinks and I was mortified!
The permalink was obviously prettier but they can’t link to my old permalink but luckily the post was still on my blog. I quickly search back where to change back to the default permalink.
There, I found it under the Settings instead of the Posts section. *Phew* Everything was back to normal.
————————————————————————————————————————–
The problem with WordPress is –> It is not user-friendly!
I found out the problem and it would be a hassle to change the permalinks. I need to get the Apache mod rewrite and a permalink redirect plugin. I guess I’ll shall stick back to “ugly” default permalinks for now. I shall explore how to change to the “pretty” permalinks once my annotated bibliography assignment is done. Goodbye for now!
-
Week 3 Lab Activities
Posted on August 3rd, 2011 No commentsWe did a lot for this week’s lab. We were still at the stage of setting up the blog which I have already experiment and change or add. For example we were to add a category link for a our blog. It took me some time to get used to all the links on my dashboard, clicking on each one of them to see where it leads me to. For the category link, I prefer to add new categories straight from my new post instead of navigating to the categories link.
This is what I usually do to add a new category:
Instead of this:
Next, adding the category link to the blog we have to go to Widgets under the Appearance menu and drag the Category menu to the sidebar.
It’s all pretty straightforward.
Another thing that we learn in the lab yesterday was on ‘trackbacks’ and ‘pingback’. Honestly, I did not know what these two term means at all. Gosh!
Well according this this website, it states that ‘Trackback is to let a site know that you are referencing them on your on site and the Trackback URL is different from the regular permanent link URL’.
Seth mentioned that Pingback is similar in a way. The only difference between Trackback and Pingback is how the notification is delivered. Pingback is through e-mail meanwhile, trackback is goes straight to the website itself. The other main purpose of Trackback is to increase blog traffic. Interesting!
Here’s a very useful link on using Trackback for WordPress: http://www.optiniche.com/blog/117/wordpress-trackback-tutorial/
-
HTML Text Formats
Posted on August 3rd, 2011 No commentsThis 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
<ins> – Inserted text
<del> –Deleted text
