Logo of the best adult webmasters' tutorials website.

No WYSIWYG

←... First Webpage Tutorial

Free From WYSIWYG...

I'm glad you decided to stick around! You are on the fast track to becoming completely WYSIWYG free.

The emphasis in this series of tutorials is to get you understanding what's going on. It's my thought that once you see how the things interact with each other, the specifics necessary for coding a real site will come much, much easier to you.

HTML Basics...

If you look at the very top bar of your browser window you'll notice that it says something bland like "Untitled" or something similar. That's because we haven't entered anything into the code yet. Fix it by making the following change...

<html>
  <head>
    <title>ChangRox.com</title>
  </head>
  <body>

  </body>
</html>

Now, (re)save your Notepad file (Ctrl+S) then refresh your browser window. The title should have changed to "ChangRox.com". And no, there is no practical way to get rid of the browser name that follows your title.

Put something on the page by making the following change...

<html>
  <head>
    <title>ChangRox.com</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

Save, refresh and you should see "Hello World!" staring at you.

"Hello World!" is the traditional first line of most tutorials. There is a mildly interesting story behind why tutorial writers use that. You can read about it here.

Notice how we've introduced the paragraph <p> tag and it's corresponding closing </p> tag. In this case, it's not absolutely necessary to use it. You could have just put the text in there without any tags and it would have worked, but for reasons that won't make any sense right now, you should get into the habit of having EVERYTHING enclosed in something.

Also note that the closing </p> tag used to be considered optional. In fact, it will work without it, but it's very bad form not to use it. And that's not the only one that has changed over the years. With just a few exceptions, EVERY opening tag should now have a corresponding closing tag. The reason why will easily become apparent to you in the very near future so I'm not going to bog you down with it now. Just trust me, if you don't close your tags, it will come back to bite you in the ass.

But, I digress, and I told you I wouldn't. So let's put some color into this thing...


Beginner CSS Tutorial... →



Valid XHTML 1.0 Transitional Valid CSS!

© 2008 - 2011 fapmaster.com