In Paris they simply stared when I spoke to them in French; I never did succeed in making those idiots understand their language.
Mark Twain
We need to be on the same web page, but we also need to be sure we're readin' and writin' the same language once we get there. Sure, there's a ton of stuff we can do to the blog knowing absolutely nothing about things with letters like HTML or CSS. But then again, that means we're changing stuff and have no idea what we're actually changing. It seems daunting, all those acronyms and crazy letters, but it's not that bad and it will help to take a look at those languages that will be used both by us and Google to write our blogsite.
These days, there's about as many languages for web design as there are web design companies. Most languages have quirky little acronyms - it's an unfortunate side effect of the fact that they are typically invented by people that can quote episode titles of Quantum Leap and own twenty-sided dice. Now, I'm not going to give a long lesson on HTML/XML/XHTML/CSS/javascript/JAVA/AJAX/php/mySQL... the list goes on and on. Suffice (and redundant) to say, there's a ton of programming languages out there, most based on something called C++, or the BASIC that was used back in the 80s. Really, it's like the romance languages, if you know French or Spanish, Italian's not too hard to learn - some work, but it's not like jumping to Sanskrit. They all get invited to the family picnic, they're all closely related. If you really want to learn this stuff, start out over at W3Schools - it's the official school website for the W3 which is the official organization for web language standards that web designers should comply with. But for our purposes, here's a brief overview of what this stuff is:
Your blog is going to be stored on Google's computers; think of them as your cyber-waiter, they're even called servers. You ask for a blog entry, they bring it to you. You ask them to bring your profile, they bring it to you. You ask them to bring you a margarita, well, get a bartender. You are sitting at your computer (or your employer's), which they call a client. Since you are reading this, you probably are running Firefox or Safari or some other internet browser software, perhaps you go old school with NovaTerm on your Commodore 64. Whatever. Now, let's say that the Server is a magazine company that uses some form of microfiche to save on mail costs - they send the articles and ads to your mailbox (your computer, the Client), and your browser actually takes all the microfiche and turns it into a readable magazine and displays it on your screen. That little program you use to cruise the web is a cyber-babelfish. You will learn that most browsers translate the same, except for the most popular one - yeah, the browser whose name I don't mention. Uh, here's a hint though:
So let's continue to use our magazine metaphor today - a website is a magazine, k? A blog or web page is like an article or page of a magazine, and as we go about designing the magazine, we need to set up where things go, how things look, and it'd probably help to have everyone agree on how to write our little editorial and design comments when doing that.
HTML stands for "HyperText Markup Language". "HyperText" was a phrase that was originated by people that watch Star Trek or need some Xanex, don't be afraid of it, it just means that it's "words on the internet". All a 'mark up language' means is it's the comments that you would 'mark up' a document with - the editor's marks and designer's marks on where things need to go. For magazines, it'd be what page an article goes on and how the ads are framed around it, where we put that weird little fragrance insert, the 100 CDs for a penny ad, and the plethora of subscription cards that fall out whenever we pick up a copy. For our kitchen metaphor - it's the directions on the ingredient card - how everything should be put together. HTML breaks all web pages into two parts, the head and the body. The head has all the inside information, like the title of the page, a description, where to find the 'translation dictionaries' for your browser to translate the page, all the CSS style notes (below), and other stuff that you need to manage the page. The body of the HTML is just that, the body of our article. It does things like set up information into neat tables and divisions, as well as determine what should be printed as the article's paragraphs and what should be emphasized or used as the title. Once we've done that, then we'll apply our CSS to place those things where they make sense... speaking of...
If HTML is the nerdy engineer who does the structure of our site, CSS is his smokin' hot wife that makes the place look good. CSS is "Cascading Style Sheets". This actually makes sense when you look at it, and unlike HTML, sounds kinda sexy. It should, it's the fashionistas and designer department of our little magazine company. They are sheets of instructions on how the style of your page should look - that's pretty frikkin' simple. Uh, oh, but that 'cascading', that's not just some silk sheets cascading behind the models for the cover shot, is it? Nope, but don't worry, it just means that the rules you write 'cascade', that is if you set a rule on something, everything 'inside' it, be it a page, a section, an article, or a type of article, everything 'downstream' is going to go ahead and be the same way. Okay, to go back to the magazine idea - if I say for example the magazine should use a Verdana font for it's lettering, than every article, add, index, and well, everything will use Verdana unless I tell it otherwise - it cascades down from on high. The actual rule is written like this: "#magazine {font-style:verdana;}" - there's more to it, but that's the jist of it. So unless we say something different down the line, everything in the magazine is going to be written with the Verdana font. If I say something like "#articles {color: blue;}", well then all articles are going to be printed in blue ink, regardless of whether the articles are recipes, travel guides, whatever; and they're all still in Verdana, because it 'cascaded down' onto the smaller detail... and we can go from there and say for example something like... "#articles .opinions {font-size: smaller;}" and "#articles .coverstory {font-size: larger; color: black;}", so on and so forth... all opinions would be Verdana, blue, and smaller, all cover stories would be Verdana, blue, and larger - oh, but then we said ignore the cascade and make them black... so there you go. Check out Lynda.com or W3Schools for in depth tutorials, because it can get really confusing... oh, and if your wondering, this article is written in the Verdana font.
We'll get to Javascript later - it's kind of our 'action and interaction' language, and there's several others - but the last one I want to mention is going to be one of the first things we mention in this next part: XML. XML is simply the way we write HTML and all the other languages. It is our rules of style in writing all this - what do we capitalize, how we use tabs and spaces, and it governs the way that we use our outline format. 'It's simply the grammar for our languages. Don't worry, there's no words to learn in XML, only the structure, which is pretty self evident if you have any sense of manners or logic.
So... HTML determines the layout of our magazine, CSS the style, color, etc., and XML the way that we should write HTML and CSS so other people can understand it, get it? Other languages are used in our magazine on the 'server side' - they do things like deliver the feedback, make some personalization, or what have you - you could say they manage the subscriber list, print the address labels, and take complaints. Others specialize in making videos and games, so on and so on. For now, we're going to concentrate on HTML and CSS, and we'll explain some of their commands and what we're looking at when we open up our actual design in our next post...
