The Scribe's Old Brush (part 1)

Now that you know how to put a page together, let's look at the most common elements that go into them.

One of the most important elements of every webpage which is often overlooked by beginners is the <title>. If we think of it as another box, we should put it inside the <head> box. and inside the <title> we put some text.

Here is what your source markup will look like:

 

<html>
      <head>
            <title>
                  The Scribe's Old Brush
            </title>		
      </head>
	
      <body>
	
      </body>
</html>
						

 

Type this up or copy and paste it into you index.html file and open that file in a browser.

The browser page is still empty, but look at the very top of the browser window itself. It now has the name of the browser you are using, followed by the text you put inside the <title> box.

 

Kata Practice: Remove the current text inside the <title> box and write anything you like. Save the file and hit the REFRESH button on your browser (or press the F5 button if you are using Windows).

 

Spiritual Advice from your Sensei:

If you are thinking: who cares what the top of the borwser window says, I never even look there! Very true most people don't. But web crawlers (scripts launched by search engines which automatically catalogue - or "crwal" - the contents of the web) find this information extremely important. WIthout going into too much detail, let me say that your standing with most search engines and the ability of users to find your website, depends to a great extent on how well your page's title matches the rest of the page content.

A webpage without a title is like a faceless ghost. A page with a title not matching the content is like an impostor. Neglect it and you will share the pitiful fate of all those websites cursed to remain at the very end of a search engine's listing

The Scribe's Old Brush (part 2)

Now let us look at the most common elements found inside the <body> of a web page:

  • div
  • h1(h2, h3)
  • p
  • br
  • a
  • img
  • ul/li
  • ol/li

You will find yourself using these all the time. There are many more elements, most are esoteric and rare. I will leave it up to you to do your own reasearch after your formal training with me is complete.

We will start with the most common element - the paragraph tag or <p>. Every time you want text to display in the body of the webpage, it will most likely go inside the <p> tag.

Here is how it looks in real life:

 

<html>

      <head>
            <title>
                  The Scribe's Old Brush
            </title>		
      </head>
	
	
	
      <body>
            <p>

		
            </p>
      </body>
</html>
						

 

All you need to do now is put some text inside of the tag and set up as many tags as you need:

 

<html>

      <head>
            <title>
                  The Scribe's Old Brush
            </title>		
      </head>	
	
      <body>
            <p>
                  According to the Wikipedia, a ninja was someone specially 
                  trained in a variety of unorthodox arts of war.
            </p>
            <p>
                  The methods used by ninja included assassination, espionage, 
                  and a variety of martial arts.
            </p>
      </body>
</html>
	
						

 

Right alongside the <p> tag you will find a <br> tag. The <br> tag is unpaired, meaning there is no such thing as a </br> tag. You use the <br> tag anytime you want to start a new line within the same paragraph. Observe:

 

<html>
      <head>
            <title>
                  The Scribe's Old Brush
            </title>		
      </head>	
	
      <body>
            <p>
                  According to the Wikipedia, a ninja was someone specially 
                  trained in a variety of unorthodox arts of war.<br>
                  The methods used by ninja included assassination, espionage, 
                  and a variety of martial arts.
            </p>
      </body>
</html>
	
						

 

To make sure you understand exactly what <br> does, simply remove it from the example given above and watch how the browser responds to that.

Kata Practice: add at least 4 more text paragraphs to this page (look up the article on ninjas on wikipedia, if you need more ninja-related text).

The Scribe's Old Brush (part 3)

We're almost done. Just a few more common basic elements to look at

Now that you know how to make the browser display your basc text, we'll discuss all the variations. All of the following tags work pretty much the same way the <p> tag does. You take your text and surround it with an opening tag and a matching closing tag.

To tell the browser that you want a heading for your text you use one of the "h" tags (h1, h2, h3). Let's see what it looks like:

 

<html>

      <head>
            <title>
                  The Scribe's Old Brush
            </title>		
      </head>	
	
      <body>
            <h1>Unleash your inner Ninja</h1>

            <p>
                  According to the Wikipedia, a ninja was someone specially 
                  trained in a variety of unorthodox arts of war.
            </p>
            
            <h2>Silent and Deadly</h2>
            <p>
                  The methods used by ninja included assassination, espionage, 
                  and a variety of martial arts.
            </p>

            <h3>Ninja Roots</h3>
            <p>
                  Ninja is the on'yomi reading of the two kanji used to write 
                  shinobi-no-mono, which is the native Japanese word for people 
                  who practice ninjutsu.
            </p>
      </body>
</html>
	
						

 

As always, don't hesitate to update your index.html file to see how the source markup is displayed in your browser.

Moving on to the <a> tag, or anchor tag. It's used to link an object on the page (image, text, etc.) to a different page. This is how you do it:

 

      <p>	
            Find out more about <a href="http://en.wikipedia.org/wiki/Ninja">ninjas 
            on Wikipedia.org</a>!
      </p>
	

 

You stick your link text inside the <a> pair of tags (opening and closing tags) and write the target url (the address of the page, which you can get in a lot of cases by copying it from the address bar of your browser) inside the parentheses after a href=

Sometimes you don't want the browser to load the page you are linking to in the same window, effectively replacing your page. You can instead tell the browser to open the link in a new window by doing this:

 

      <p>
            Find out more 
            about <a href="http://en.wikipedia.org/wiki/Ninja" target="_blank">ninjas 
            on Wikipedia.org</a>!
      </p>
	

 

Notice the target="_blank" after the href attribute of the <a> tag

You can find out much more about how the anchor tag works and what other options are available for it at w3schools.com.

 

Kata Practice: set up 2 more html files. Call them about_ninjas.html and i_am_a_ninja.html. Structure them according to what you've learned so far. Make sure that each page containes at least 3 paragraphs, each with its own heading. Set up a paragraph at the top of each page (including index.html) which contains links to any other of the three pages. Once you are done, you will realize that you have just created a basic menu system. Congratulations on building your first website!

Next >>

 

Inside the Web Dojo

the HTML chamber