Recently, a friend of mine asked about how to get into HTML and CSS. It’s her resolution. Codeacademy‘s many have ALSO asked the very same question as they created a resolution behind the idea. Hopefully, there is a purpose towards learning HOW to HTML and it doesn’t start with “everybody’s doing it”. To generate content by oneself – makes sense. To keep it in reserves for when one needs to whip it out on a CMS that gives one the right to HTML in blog posts – cool. But to just have around because a certain mayor is doing it – doesn’t reaaaaaaally cut it. Coding usually solves problems with syntax and is a very useful skill. Just saying.
The way I started didn’t rely on websites, but a big book on HTML in ’99. Then, I started exploring tags, methods, structures, and the like. Mostly through geocities, homestead, and a slew weird video game website ideas. Actually taking courses was another good step which ultimately made me more aware of the skill that I needed. These days, it’s more expanded.
Hopefully, they’ll start these lovely people off with what the internet is. From its’ 1970s start up until its’ first graphical updo that transpired in the early 90s when HTML was taking shape and tags, such as the <img> one, were getting rules of engagement from BBS systems to form what we have today. Oh, I’m sure they go THAT far. As for myself, I’ll give a bit of what happens when sites are accessed. Then again, I still have to dig more into that myself. The conversations were very deep.
As the web is made up of a vast mass of computers connected to each other, think of it as a pretty much as a crapload of universes in Stargate. Browsers usually have a translator in hand for what browsers are about to give to the user visually. Or, Web Browser Engine, if you will.
Example: The Mozilla Firefox client is the prodominent user of the Gecko rendering engine, while Safari and Chrome use the Webkit one. Internet Explorer takes either the reformed Lynx version or Trident(as it did for countless years up to the recent 10 preview). And Opera uses Presto. Because of some decrepencies, rendering engines differ in terms of how things are translated. From more padding on some elements to elements that have not received translations yet. Even different platforms do the same. Sometimes, web browser engines can be compared to a translator with a foreign language: some translators know certain words that others have yet to uncover.
Each of these computers have addresses, or IP Addresses and URLs. The web browser is similar to a Stargate, or a car dashboard, or door, if anything. After the address is plugged in, the browser takes the user to the address. This opens the universe with the computers files on hand in the folder where the address is pointing to. There is a default page chosen, which usually is index.html – which is coded in HTML or Hypertext Markup Language. They can made in Notepad, or editors like Adobe Dreamweaver to get a bit more help with the syntax. Pages are formulated this way:
<!doctype “html”>
<html>
<head>
</head>
<body>
</body>
</html>
Instead of seeing disjointed sentences and egos of words through greater and less than signs, the browser acts as an interpreter for the pages that be. It translates the page’s tag markup into something more visual. Well, the body part.
<body>
<p>…that went well.</p> <strong>this is me bolding something</strong> and this is me <em>adding an emphasis to it</em>
</body>
Each of these things, like the <p>, are called elements. The body tag deals with visible elements.
The head usually is accessed first for meta information, the title, and any sort of behavior code, or javascript, that needs to be accessed prior to setting up the page.
<!doctype “html”>
<!– What type of document this is. The start of html according html5 standards. –>
<html lang=”en”>
<!– the first html tag that is needed on ALL documents(html5 declaration). –>
<head>
<title>That great site</title>
<meta charset=”utf-8″ />
<style>
/* ///// [ get the style] /////////////////////*/
@import “style.css”;
</style>
</head>
In a situation, where server-side code(where the code relies on an engine gives access to non-client side elements such as databases) is being used, it’s the same deal, yet the code(whether it be php, asp.net, cold fusion) is interpreted into HTML so that the browser can STILL use it.
When it comes to how the page loads, the content, or HTML, is gathered first to give the page a map to use.
Content is important. A page should always be laid out in a way where elements, that need to be first, SHOULD BE FIRST. I know, I know. Yelling – but seriously. If the stylesheet can not be acquired, at least the rendering will get these elements in the way they were meant to come together. The presentation and behavior come after this. Presentation being the Cascading Stylesheets, that creates the visual effect of the page through its’ own set of code. It controls font display, borders around elements, images, placement to a degree. Stylesheets are style guides in a way because they give out these rules for elements to
follow.
At times, the sheet is declared by calling it, or them, in a separate file, usually in the head.
<style>
@import “/style.css”‘
</style>
<link href=”/style.css” type =”text/stylesheet” />
Styles are declared this way:
/* Making the paragraph tags turn into red and give them a different font type. */
p { color: red; font-family: arial;}
Behavior, Functionality, or Javascript as we call it, is used for functional issues such as getting Google Analytics or making a page have pre-loaders.
How one should go about building web pages: Well, remember the page’s basic framework. Then start with the html content to lay out what’s needed. When that’s good, get on to the css presentation to make the page look the way you would like. When the presentation’s all well and good, IF one has functionality that’s needed. Nowadays, JavaScript libraries, such as Dojo, Protoype, and the infamous JQuery, handle MOST of that, inorder to ensure that the page is ready before actions happen.
<script>
// Saying hello
alert(“hello”);
</script>
As for further reading material, I have several suggestions for the online part:
http://w3schools.com to start one off right.
http://www.kirupa.com/
http://alistapart.com/
http://smashingmagazine.com/
http://sitepoint.com
If you’re into books: HTML Utopia: Designing Without Tables by Rachel Andrew & Dan Shafer from Sitepoint is a highly recommended title to understand the CSS portion of internet coding.
The latest version of the HTML markup is 5, but it feels more like a hodgepodge because there isn’t very much support for a certain features across browsers. XHTML(or extensive HTML) is a good point to go with, also.
There are many ways to learn how to HTML. As for me right now – hey, I gave a basic rundown for getting into it. Though validators won’t be around until the 2014, you could still use HTML5 today pending that one has a boilerplate attached to get browsers that AREN’T sending you updates automatically – if they didn’t exist. I’ll expand on it more in other posts.
As for Adobe Proto, I do like the current system build minus those small things. Still, a great idea to use this for a tablet build. Definitely worth the $10 purchase for anyone into the site planning game hands down. 
If you’re coming, make sure you’ve got the Android 3.2(or Honeycomb) installed. As… I’m doing… right… NOW!