Blogs as graphs explained
I put an image in this post that gives a visual representation of the front page of my blog. While everyone seems to find it pretty, not many people knows what it represents, so here is an attempt at an explanation. It may help you to have this image open while you read the below.
When you’re writing an HTML page, you make use of tags. A tag is an instruction, and to mark it as such, you put it in pointy brackets: < and >. So, if you want to insert a table, you might write <table>, and a table would magically appear. It gets a bit more complicated than that, but that’s basically how it works.
In an HTML page, the first thing you do is tell the browser (Firefox, Internet Explorer, Opera or whatever takes your fancy) that the file is written in HTML. You do this with the very first thing you write - <html>. In the blogs as graphs pictures, that tag is represented by a black dot, and it’s where everything starts from.
Branching off that to the left is a group of grey circles. In order for things like Google to know what your webpage is about, you have to give information about the information on your page, or meta information, which you put inside <meta> tags in the <head> section. These don’t show up on screen, but do help to find out more about a page.
The next part is layout. I lay my website out with tables. You can’t see them because I’ve set the borders not to show, but they’re there. The red dots represent the different bits of the table.
Off to the right is a big mess of colours; that’s the posts.
It’s probably easier to explain things by looking at one post’s branch. I do the curvy grey boxes with some (very clever) use of a tag called <div>. They’re an increasingly popular way of laying out webpages, as each <div> can have its own background and so on. Anyway, they’re represented by green dots, so there are ten of them (five for each curvy box, one for the post and one for the time, date and so on). Only nine appear here because it’s all a little cramped. The blue dots are links, made with the <a> tag. They’re to get to the ‘comments’ page and things like that, but could link anywhere. The orange dots are line breaks - <br /> - that I’ve used at the end so each bit of information on date and time is on its own line.
You can tell it’s the sidebar because there’s lots of blue dots, representing the links to blogs and other webpages I like. The violet dot is the picture of a hat at the top of the sidebar and the yellow dots are <forms> - the search box.
I hope that explains things a bit. HTML is actually really easy to learn. I learnt with a fantastic resource called W3Schools.com.
I don’t know how the programme that makes the animation and graphic works, but it’s based on Traer.Physics.
xD.
