Getting Started
The first thing I discovered is how much things have changed in web development over the past 5 years. I haven't really done much in the way of building applications, but simply have put together quick bullshit websites for various portfolios needing to be shown to get jobs. This never required any extensive scripting, and was always a means to an end.
So the first thing I really discovered was how little I know.
So, first things being first, I needed to figure out how to write up my initial .html file.
This was relatively easy. All you gotta do to learn this is google "standard html file" or something like it.
also, the most valuable resources have been:
Most Valuable Resources:
- http://www.w3schools.com/ - these are the guys responsible for standardizing the web. They seem to know what they're talking about to. So the first thing you want to do is read everything you can on this page (even if it seems irrelevant to your project at this point, you'll want to be familiar with this websites content).
- http://stackoverflow.com/ - number two on my list, and should probably be number one - this site is basically the yahoo answers for web developers. Nearly every post is useful in some way, and nearly every question has some intelligent response (if it doesn't, just wait for it). Lots of cool shit on this page.
- http://www.google.com/ - when it doubt, google it. Google will likely send you to stackoverflow.com, but it also points you to other stuff that's useful, and even stuff that you didn't know was going to be useful.
With these three resources, you should be able to learn just about everything there is to know about web development. More resources to be added as they come to mind...
Basic HTML Document
DocType
So basically, what I learned (and kinda already knew) was that you need to first declare your document type. This is simple (so far) and all you need is to write at the top of your document:
<!DOCTYPE HTML>
I don't think it needs to be capitalized... i just like how it looks... and don't forget the "!". It's important. That's why it's a "!"... you dig?
HTML Tag
Second thing is to define your html element...
<!DOCTYPE HTML>
<html>
</html>
Pretty simple right? So the next thing you need to do is add the <head> and <body> elements...
Head Tag
The <head> element basically acts as a container for stuff that isn't to be displayed to the user, but rather describes how the browser should interpret those elements, interact with those elements, and where the page should look (externally) for that information... so if you want to reference something externally, like a script or a style sheet, it's best to do it in the head element. For more information on the head element you can visit: http://www.w3schools.com/html/html_head.asp
Body Tag
The <body> element is the contexts of your page... like the body of a letter. For more information on the body element you can visit: http://www.w3schools.com/tags/tag_body.asp
Both of these are written between the html tags: <html></html>... when an element is defined within these tags, it's referred to as "wrapping", or using a "wrapper". You can imagine these tags as bookends, or arms that wrap around everything that's between them, and effectively holding it all together.
Opening and Closing Tags
<> = open tag.
</> = close tag.
When an open tag is used, you almost always have to use a close tag.
There are very few exceptions to this... so few that it's safe to assume there are none.
Your document now looks like this (if you've done it correctly).
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
Formatting your "code"
I like to indent my html tags, because it makes the document much easier to read. This is called "formatting" in some circles. Having readable HTML, CSS3, and JavaScript documents is going to be crucial to maintaining productivity and navigability when working through various functions and debugging your work.
General rule: if it's a child, indent it.
Sometimes this can get messy, but if your situation is getting messy, you need to rethink how you're structuring your project. We'll talk more about this later on.
Now, if you load up your document, you'll notice it says "untitled" in the tab. This is bullshit, and we should change it. To do this, we need to add the <title> element which will describe the text that is in that tab, and also may be referenced elsewhere, but I haven't found any other use for it.
<title> elements must be a child of <head>. So with that information our document now looks like this:
<!DOCTYPE HTML>
<html>
<head>
<title>
Title of my project: A learning experience.
</title>
</head>
<body>
</body>
</html>
Now we want to add some content to the page. This is done by adding anything between the <body> tags.
<!DOCTYPE HTML>
<html>
<head>
<title>
Title of my project: A learning experience.
</title>
</head>
<body>
ANYTHING!!!
</body>
</html>
That's pretty much it for the basic HTML document requirements. The next post will deal more with linking our CSS3 style sheets, JavaScript, and our init() function; which will initialize the app for us. Also, we will go over the design of our "game".
Thanks for reading!
the document should look like this document:
ReplyDeletehttp://www.envartist.com/HTML5/learningHTML5/