Friday, July 31

A little HTML here, a little CSS there, and what do you have?

A blog that's held together with what is essentially duct tape.
Which is rapidly becoming an increasingly accurate description of my blog.

I don't know html, or css or xhtml or any of the web related languages. I know a bit of Java and some C++, everything else I just sorta grope my way through. It helps a lot though that the source code for websites are freely available (at least for every web site I've ever seen), and that I know how to program so figuring out what others are doing is a bit more straightforward to me (to say nothing of having the internet available to look up everything I don't understand) So most edits I try to make to my site require a look through the code of sites that have elements I'm looking to add. Not long ago, I decided to add a few little things to my blog to make it look a bit more ....interesting.

I figured a nice RSS feed and twitter button would be a good place to start.
After an exhaustive search through many lines of code I finally got something done, though I like to think I learned something through this whole process, which I intend to share with you all:

The internet is an awesome tool for learning (though you don't need me to tell you that)
While reading random articles (today's topic was the whole Google Voice debacle) I came across this blog, which had this very cool icon for twitter on the right side of the page that followed the page as it scrolled down. I wanted to put that in my blog so I looked through the source code and found this:

<style type="text/css">
div#fixme { position: absolute; top: 200px; right:0px; }
body #fixme { position: fixed; top: 200px; right:0px; }
</style>

<div id="fixme">
<a href="http://twitter.com/riverturninc"><img src="http://www.riverturn.com/images/twitter3.png" alt="Twitter" /></a>
</div>

Now I didn't know what it meant at first. But I recognized the obvious little things like the image source or the page where it linked to. So I changed that accordingly, but i still wanted to have one for my RSS feed, so I duplicated it accordingly (changing fixme to another name for the duplicate ...took me a while to realize that) But after seeing it on the my page I realized that it was too annoying to leave as it was, so I made some modifications to change it to the way it is now, I didn't know how to. So I did what any internet addicted blogger with a goal to accomplish would do .... I turned to Google. and I found what I was looking for:
This in particular was quite handy in allowing me to change different things in the code and see what happens.
This was also quite useful by giving a quick rundown of CSS positioning.
Besides those few sites, I just messed with stuff til I got an idea of what they did
Which I suppose is in many ways the core of programming in general, getting a feel of what code does by trying it yourself, see what happens when you change certain parameters. Eventually you come to understand what each thing does on a level that can never truly be reached just by reading
(note: If you do this with something important, or at least something that you don't want screwed up, back up the code first before you mess with it)
Also, credit where credit is due:
The RSS image was found here, which got it from here.
And the twitter image was from this site.

Hope you enjoyed the show. See ya and happy coding (or whatever it is you do with your free time)

2 comments:

  1. I think you forgot to link to wherever you were looking to link to at the end.

    I think the best place to learn html, css, java, and a bunch of other things is W3Schools.

    ReplyDelete
  2. oops you're right
    I had linked them, but blogger spazed on me when I posted cause of changing the text size/displaying html so I had to copy the text itself without the links
    then I forgot to include them again
    coincidentally one of the places that helped me is that site

    ReplyDelete