Vyperion Web Design - [http://vyperion.iwarp.com/]  
Home Tutorials Free Web Space Providers Web Site Utilities
Html Tutorial - Lesson #2

 
Lesson #2

Ok, before we start with what you actually put in a web document, I think we should look at the way browsers work. Here's an example.

Look
at
this
 

Look what happens.

Look at this
 

Another Example.

Hey!
Why
isn't
this
working?!?!?!
 

And.... here's the result.

Hey! Why isn't this working?!?!?!
 

Hmmm. Well, this is happening because browsers don't recognize formatting. Unless you tell it otherwise, it will just display everything in a steady stream until it comes to the edge of the browser window or you use a line break.

Hey!<br>
Why<br>
isn't<br>
this<br>
working?!?!?!
 

And the result.

Hey!
Why
isn't
this
working?!?!?!
 

<br> basically says 'Make a new line'. Also notice that 
doesn't use a closing tag (</br>). Another tag, similar to 
is <p>. <p> tells the browser to put in it paragraph form, and then to skip a line.

<p>Hey!
<p>Why
<p>isn't
<p>this
<p>working?!?!?!
 

And here's the result.

Hey!

Why

isn't

this

working?!?!?!
 

There is more. Remember earlier when we typed
Hey!
Why
isn't
this
working?!?!?!
and it all showed up on the same line? Well, that happens because that is the way all browsers work. You might think it stupid at first, seeing as how 2 tabs, 5 spaces, 2 returns, and 10 more spaces, would all end up as 1 little space on the browser, but actually this is a good thing. It gives you absolute control over the appearance of the document. If you want more than 1 consecutive space, there is a little code that means 'space' to the browser, it is. So just add that code to everything that you want more than 1 consecutive space with. Like this.

Look&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
at&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
this
 

Let's see what happens.

Look     at     this
 

If you want mulitple blank lines just use a space (&nbsp; ) and a line break (br). Like this.

Look&nbsp;<br>
at&nbsp;<br>
this&nbsp;<br>
 

That should appear like this.

Look 
 

at 
 

this
 

&nbsp; has an & in front of it, this denotes to the browser that it is a special character. There are a lot of these special characters, here are some more.

  • &nbsp; ( space )
  • &lt; ( < less­than symbol)
  • &gt; ( > greater­than symbol)
  • &amp; ( & ampersand symbol)
  • &quot; ( " quotation mark)
  • ­ ( ­ soft hyphen)
  • &reg; ( ® )
  • &copy; ( © Copyright symbol)


You don't need to use these ALL of the time, in fact, you should utilize them very rarely. Next up are 3 tags that are instrumental in any HTML document, and they are pretty self explanitory. The <left>, <center>, and <right> tags. They justify where you want something to be on the page, and as I said are pretty self­explanitory. They also use closing tags, </left>, </center>, and </right>. Try this.

<left>This text is on the left</left>
<center>This text is centered</center>
<right>This text is on the right</right>
 

That should appear like this.

This text is on the left.
This text is centered.
This text is on the right.
Great!  I think that is enough on how browsers work and interpret data.  Let's move on.

 
Lessons

Lesson #1
Lesson #2 
Lesson #3


 
Tutorials

Html Tutorial
Table Tutorial

Being Written

Form Tutorial
Frame Tutorial
CSS (Cascading StyleSheets) Tutorial
JavaScript Tutorial
DHtml (Dynamic Html) Tutorial


 
Weekly Poll Links Free Vyperion Email Contact Me