Gloriousmess!
  • Studio
    • Illustrations & Hand-Lettering
    • Patterns
    • Projects & Plushie Portraits
    • Tumblr Sketchbook
  • Blog
  • About
    • Press
    • Terms of Use
  • Shop
  • Newsletter
  • Contact

Tech Talk: The Basic Anatomy of a Webpage

2/8/2014

0 Comments

 
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.
Picture of the structure of a webpage
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:
Picture Illustration of the elements of a webpage
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?
Illustrated picture of mysterious webpage components

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.
0 Comments

Follow us using Bloglovin'

11/23/2013

2 Comments

 
I used to scoff at the name.. until I got curious, clicked on my first "Follow with Bloglovin'" button and then I was hooked. Catching up on ALL the blogs I follow could not be easier. The blog doesn't even need to have a Bloglovin' account to be followed - you just search for it using its URL and you add it to your reading list. I get a daily digest of all the blogs that have new posts that day, straight in my inbox. One stop shop.. my favorite kind!

So here's a little reminder that you can follow our blog with your Bloglovin' account by searching for our URL (http://sharethemess.com/blog) or simply click here!
2 Comments
    Instagram
    Twitter
    Google+
    FB
    NEWSLETTER SIGN-UP

    About

    Hello and welcome to Oh, what a Gloriousmess! This is where all gorgeously awesome people and things gather - from art & design to lifestyle, mind & body tips and everything in between. Pull up your chair, make yourself comfy and come say hello - I'd love to get to know you!
    Picture of Missy Messy's signature

    RSS Feed

    Follow Along on Bloglovin'


    ** Resources **


    Tweets by @ShareTheMess

    Instagram Feed

    Archives

    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015
    April 2015
    March 2015
    February 2015
    January 2015
    December 2014
    November 2014
    September 2014
    August 2014
    July 2014
    June 2014
    May 2014
    April 2014
    March 2014
    February 2014
    January 2014
    December 2013
    November 2013

    Old Blog (Wordpress.com)


    RSS Feed

    Categories

    All
    Behind The Scenes
    Business Brain
    Daily Life
    Etsy
    Freebies
    Helping Hands
    Housekeeping
    How To
    Inspiration
    Lists
    Pretty Presents
    Questions
    Recipes
    Rhymes
    Sneak Peeks
    Sweet Stationery
    Tech Talk
    Treasury
    What The..


    Ads

    Generic_125x125
_______________________________________________________________________________________________________________________________________________________
A GLORIOUSLY WHIMSICAL COLLECTION OF ORIGINAL ILLUSTRATED HAPPINESS BY MISSY MESSY

¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

Picture
ABOUT  |  MAILING LIST |  BLOG  |  CONTACT  
© 2013 - 2015 BY GLORIOUSMESS!™ (ABN 25 828 573 470) ALL RIGHTS RESERVED.