Order, form and function have always appealed to me and so it's no wonder that I took to webpage layouts quite quickly. The basic skeleton of a webpage has pretty much remained the same since that first time I tried to build my own webpage. That was nearly a decade and a half ago! Eesh.
I started teaching myself how to build & code one using Window's Notepad and referring to my favorite websites and blogs's source code at the time. I don't think Google was around then.. we're talking about the era when the common search engines reigning supreme were Yahoo!, AltaVista, Ask Jeeves and WebCrawler to name a few. I stumbled upon this magical manual called the Page Source (right click anywhere blank on most webpages and you should see that option come up) and started noticing patterns repeating for each website. A bit of trial and error, a few web searches and I was coding my own early version of my online home, complete with a guestbook I tried to get all my cool friends to sign.
Think of it as HTML 101. The way I process and present this information stems more from experience than "proper" schooling and a fancy degree. But hey, if it's worked for me for the past 15 years, I can't be too far off! The guys at Getawebsite have a good, basic overview of the different acronyms if you're curious.
An html file starts off like this:
There are 3 main "containers" that fit inside an .html file, and they, in turn, act as containers for other bits to go inside. As you can see from the doodle, you have the head, body and footer tags. The footer element (the pair of tags) is the most vague to describe, so here is a better example in pictures. Here is the gist of what each element does, or the point of having it at all:
So, for example, anything that belongs in the Head section will be found between <head> and </head>.
You'll notice that all the "keywords" of code start and end with < > ..this is quite important! If you don't surround your set of coded instructions with these, the words will just be words and show up exactly how you typed them on your webpage. They automatically don't show up and get interpreted as code as soon as you put them between the < > symbols. Psst, these codes between the < > symbols are called tags.
Just for fun, you can write secret messages or notes in html by surrounding the words like this:
<!-- typeyourmessagehere --->
This gets quite useful when you have long chunks of code and you're not sure where one bit ends and the next bit starts, so you insert one of these reminder notes in between. The exclamation point is crucial in hiding your little message!
So adding all of that in, your very basic HTML file structure should be looking like this:
<!-- is this making sense? --->
I color-coded and indented the paired tags so help you see their relationship to each other. Can you see what I mean by "everything in pairs" and "fencing things in" as well as the "containers" analogy?
Now, I tend to think of everything that can go into these main "containers" as building blocks. These "building blocks," or tags, are sometimes enough to convey the code, but other times, it takes a group of them to do that.
A loopy, fruity analogy, but maybe it'll work for you too. Think of some tags like apples and oranges, perfectly happy by itself whereas other tags are like grapes, where they have to be grouped to be seen as an entity. Um. Too kooky? Sorry. There's a reason why my brain's a gloriousmess ;)
So the question is, what GOES in the three basic sections of the webpage?
Well, the possibilities are endless, so that's another post for next time! Keep your eyes peeled for more Tech Talk, coming at you monthly on the first Saturday of each month.