About Me

I'm just someone struggling against my own inertia to be creative. My current favorite book is "Oh the places you'll go" by Dr. Seuss

Sunday, August 3, 2008

Web School Awesome

Webschool Awesome Lesson 1.

HTML 101

Okay guys, this is where your uncorrupted and untouched knowledge of html will come in handy. Too many lessons and teachers will teach you how to go making pages the wrong way. Since nobody has done that to you yet, I can teach you the right way, and you don't have to unlearn a bunch of bullshit.  (if I haven't told you by now what I mean by "the right way" and "the wrong way" you can go ahead and ask me.)

How Web School Awesome works is I tell you how to do something, and then I tell you what  happened. This way by the time I start talking theory, you have already experienced the practice, and thus know what I'm talking about already.

Exercise 1: your first web page.
This one is EASY, has only 5 steps, and it will take you 10 minutes, tops.

Tools needed:
a computer (mac or pc will be fine)
A web browser. (I prefer firefox or safari, but any one will do for this lesson)
A text editor.  on the PC, use notepad. On a mac, use textedit.

Make a new folder called WSA  (it stands for Web School Awesome)

open up your text editor of choice.

In your new document, type in the following text: (don't copy and paste!)

    <title>Web School Awesome Rocks!</title>
<h1>Web School Awesome</h1>
this is my first web page ever. SWEET!

Save as plain text, with HTML as the file extension.
It is important to know how to save as PLAIN unformatted text.   So pay attention to this bit.

How to do this on a MAC with TextEdit:
Click the "Format" menu and select "Make Plain Text"
Click the "File" menu and select "save"
navigate to the WSA folder.
next to "Save As" type skeleton.html as the filename
in the "Plain Text Encoding" pull down menu, select "Unicode (UTF-8)'
click "save"
a pop up dialogue will ask you whether you really want to use .html as the extension. Click "Use .html"

How to do this on a PC with Notepad
click the "File" menu and select "save"
Navigate to the WSA folder
next to "File Name:" type "skeleton.html"
in the pull down menu "save as type" select "all files"
in the pull down menu "text encoding" select "utf-8"
click "save"

open the results in a web browser. You can do this by using file>open on most web browsers, or simply drag the skeleton.html file's icon directly into your browser's window.

What you should see is "Web School Awesome Rocks!" in the TITLE bar of the browser.
"Web School Awesome" in large type at the top of the page.
and "this is my first page ever. SWEET!" in small text at the bottom.


Let's look at the content of our file again.

    <title>Web School Awesome Rocks!</title>
<h1>Web School Awesome</h1>
this is my first web page ever. SWEET!

note that in the file where it says "Web School Awesome Rocks!", to the left there is "<title>" and to the right of it, there is "</title>".   These two html tags tell the web browser to put the text between them, into the browser's title bar!  <title> is an opening tag, and </title> is a closing tag (because of the forward slash). All together  <title>Web School Awesome Rocks!</title>  is an "element".

There's 5 elements in skeleton.html.  They are all nested inside eachother, like a box full of boxes. Also like boxes, there are different kinds, and the different kinds hold different sorts of things.

the first is <html> ....      </html>, and it's the biggest box, and it contains all the other boxes. Always.
the next sort of box is <head> .... </head> Inside this box you put information about the web page, like its title.
then in <title>.... </title> (which goes inside <head>) well, for the third time already! you put its TITLE!
<body>...</body> goes outside of <head>, but is still inside <html>. Inside <body> you put everything you want to show up inside the actual browser window.

and finally, <h1>...</h1> is a box 
for headers! That's why the text inside of it is rendered really large by the browser. That large serif font is the default style for text inside <h1> tags.  When I teach you CSS, you'll be able to change how <h1> tags are rendered to whatever font, size, or color you want! You'll even be able to replace it with an image.

note: <h1> is just for first level headers. There is also <h2>, <h3>, <h4>, <h5> and <h6>, for progressive levels of sub-headers.


<html>  contains the whole document
<head> contains information about the document
<title> contains the title of the document
<body> contains the content of the document
<h1> through <h6> contain different levels of headers for the document.

There are many more different kinds of "boxes" "tags" "elements" or whatever other euphamism I've used to refer to them. I will cover more in excercise 2.

Until then, Be seeing you....

No comments: