Most of us would have encountered a bit of coding and HTML at some stage, especially when setting up blogs or online stores. This is for those of you that don't quite get it, or are a bit put off by HTML. Hopefully, this will rid you of some of that uneasiness! We'll start from the very beginning and I'll talk you through the monologue I listened to in my head when I was first grappling with HTML :)
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.
We've come far since those days. We now have so many new acronyms to grapple with. PHP, CSS, and Javascript are all newer developments that essentially still use good ol' HTML and build upon the structure. Understanding HTML is not a bad place to start then, eh? :) Keep in mind that this is super basic info to get you acquainted with HTML.
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.
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.
We've come far since those days. We now have so many new acronyms to grapple with. PHP, CSS, and Javascript are all newer developments that essentially still use good ol' HTML and build upon the structure. Understanding HTML is not a bad place to start then, eh? :) Keep in mind that this is super basic info to get you acquainted with HTML.
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.
One thing to remember is that everything comes in pairs in HTML codes. You start something with the code encased in < > and you end it with a backslash, like this </ >. Kind of like fencing things in.
An html file starts off like this:
<html>
</html>
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:
An html file starts off like this:
<html>
</html>
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:
The "containers" have a beginning and and end.. the < > and the </ >.
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:
<html>
<head>
</head>
<!-- is this making sense? --->
<body>
</body>
<footer>
</footer>
</html>
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?
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:
<html>
<head>
</head>
<!-- is this making sense? --->
<body>
</body>
<footer>
</footer>
</html>
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. |
RSS Feed
