First Blood

In this dojo, we consider the box to be our main tool. A box to a web ninja is what a shell is to the Minogame turtle.

Imagine a box. We'll label it <html>. <html> is what we call a tag. They usually come in pairs: an opening tag and a closing tag. They are like the top and bottom lids on a box. The opening tag always looks like this: <some_tag>, while a closing tag always looks like this: </some_tag>.

The <html> box is the biggest box you will ever deal with, all other boxes are smaller and go inside the <html> box. The first 2 boxes that go inside are <head> and <body>(INSERT IMAGE)

Enough theory. Time to practice.

Open up Notepad (or a text editor of your choice. Note: Wordpad or MSWord will mess everything up - do not use them) and let's set up our very first html page. Write the following:

  • <html>      
  • </html>

Save the file into a location of your choice. Call it index.html. If these instructions don't make any sense, do this:

  • 1. On your harddrive create a new folder (the traditional word for folder is "directory")
  • 2. Give your folder a name. You can call it "webdojo" or "7folds" (or "mybrainhurts", if you want).
  • 3. Double-click on your new folder to open it.
  • 4. In your text editor go to the main menu and click File > Save As > Find your new folder from the "Save In" Drop-down menu
  • 5. In the Filename field type index.html and click Save button
  • 6. Now switch to the window which has your new folder open and you should see your new file there.

Now open your browser (I will assume you are using Firefox), and drag the index.html file right into the browser window. Now your browser should dispaly a blank page.

Right-click on the page inside the browser and select View Page Source. In the new source window you should see your HTML source markup.

Congratulations! You just built your very first HTML page. You're not a web designer just yet, but you are off to a good start.

 

(INSERT IMAGE)Now that we have a basic HTML page, let's finish setting it up. Every single webpage has the exact same basic structure: inside the main <html> you will always find two smaller boxes - <head> and <body>. So we'll add the <head> first:

 

<html>
      <head>
			
      </head>
</html>
						
 

And then the <body>:

 

<html>
      <head>
      			
      </head>
      			
			
      <body>
			
      </body>	
</html>
						

 

And this is what the basic source markup for any webpage should look like. Anytime you need to create a new page, always start with the main <html> box and then drop 2 other boxes <head> and <body> into it. There are no other options to consider. Every single web page has these 3 elements.

Next >>

 

Inside the Web Dojo

the HTML chamber