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: Lesson 2

Web School Awesome: Phoenix Edition

Hey kiddies, here's another round of punishment from your good friend, Breton "Insano Smartypants" Slivka. I'm gonna lay it all out for yah.

In excercise 1, I showed you how to create a basic html file, and open it in a browser to see the results. I showed you 5 types of html tag. In this lesson, the goal is to fully mark up a page of text. I will show you how to create:


  • Subheadings

  • paragraphs

  • lists

  • hyperlinks

  • anchor links

  • images

  • special characters.

  • bolding and italicizing text.



In order to accomplish that, I've got a starting point- a page about a band called the nips. I'm providing two files, one called thenips1.html and another called thenips2.html. This goal of this lesson is to step by step, modify thenips1.html until it's just like thenips2.html, and all along the way, observe the effects that our changes have on the way our page looks in the browser.

The first step is to properly set up a workspace.

  1. in your web school awesome folder, create a new folder named "Lesson 1"

  2. Linked from this blog post are a number of files. You're going to need them all. Save them in a convenient folder.

  3. Print out "lesson2.txt" so you can follow along. The lesson continues in that file.

  4. Arrange your text editor to occupy one half of your screen, and your favorite web browser to occupy the other half.

  5. Follow the instructions in the previous lesson for saving out an html file, and for opening in a browser.

  6. When you make a change in the original file, simply SAVE the change, and press the refresh button in your browser to see the results



the files:

Lesson2.txt
nipsy2.jpg
thenips1.html
thenips2.html

Web School Awesome

Webschool Awesome Lesson 1.
REMOTE E-LEARNING EDITION

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.


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

STEP 2.
open up your text editor of choice.

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

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

STEP 4.
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"


STEP 5.
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.

WHAT HAPPENED?

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

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


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.

IN SUMMARY:


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