Mystical Designs

LESSON 1 –

Basic Document structure

Just like anything else web pages have to have structure otherwise you would have shit floating all over the place and no organization whatsoever. A web page has to have certain codes in order for it to work properly. All pages should have at the bare minimum the following.

<body>

Your Website info and content go here

</body>
</html>

Ok so now you know what has to be there lets find out what those things are and what they do.

So first off the <html>

Each page MUST start with this. This is a signal to your browser to get ready to read and interpret the codes to follow. ALL codes Must be contained within “brackets” the < and >

Here is a tip to get in the habit of from the getgo! Every time you type a new set of tags start a new line not only does this make it easier to come back weeks or months later and find that one section of code that you need to change but as your skills grow and you get into more complex web design you will appreciate this habit.

So now we have

<html>

press the enter key and type in <head> the “head” (header) section of your document is where you will end up putting some snazzy little tidbits of code that do various things.

Now the <title> this is what the viewers will see in the top of their browser I’m sure you have seen this some eloquent ones and some rather not so eloquent ones. (see screen shot)

Ok so far you have this….

<title>My Web Site

now we are done with the title so you need to close it (remember I told you that all codes need to be closed at one point or another) so you will close it like this </title> ALL closing tags are nothing more then the beginning tag with one extra character the “/”

And now we are done with the head section (for now – later we will come back and add more “fun” things) so we need to close off the head section. so we have this:

</head>

Now on to the Body tag. The body area is where all the info for the page will go. Again going back to the tip I gave earlier you may want to add extra lines in between your lines of code for easy finding and easy reading. Some designers insist that it is best to type all your code in one single line and never hit the carriage return (the enter) they say it will optimize your page and make it load faster, although they are correct I have to admit that the few milliseconds faster your page loads will not make a hill of beans to anyone and like I said when you get into more complex pages it will not be worth the effort you have to go thru to find what you are looking for. So anyways back to the lesson. Hitting the carriage return anywhere in your codes will not affect your page in any way. OK so now to add some content. *come on you are almost done creating your very first webpage* so add anything you like because we will come back later and change it anyways this is nothing more then a practice exercise.

So we have…

<body>

Who ever said web design was hard?

*wipe that brow we are almost done*

ok so now we are done with the content and we need to end the page but remember I said that ALL tags must close at some point. So looking back what tags are still left open? Did you say the Body and the html? Then you are absolutely correct and if you didn’t say that then by golly I think you need a refresher course already. Ok now that we are closing tags. There is something else I need to point out and although it is not mandatory but it is common practice and you will never pass thru a certifier unless you learn how to do it and do it right. Think of your codes as doors as you walk through your house and you open doors so let’s say you come in the house and open the front door then though the kitchen door and on through the living room door. Now when you come back out you have to come back thru the living room shutting that door then back thru the kitchen shutting that door and back out the front door shutting that door. It wouldn’t make sense to shut the front door then run back to the living room and shut that door then come back to the kitchen and shut that door now would it? Well maybe if you wanted a lot of exercise you would but I don’t want all that exercise and neither does your web browser. So you might as well get in the habit of it now because if not further down the road you will run into problems.

Ok so you have closed off your tags and your page should look like this.

<body>

Who ever said web design was hard?

</body>
</html>

Now you wonder what in the world do I do with it?? Well save it of course silly. But before we get to the actual saving there are a few things you should know when saving html documents. First of all when you have a website whether it is a free host or a paid domain you MUST have an index file if you don’t then when a person goes to your website (http://www.yoursite.com) they will either recv’ and error page or get a directory of your files (and it looks bad on you the designer). So we will save this page as your index file and it will be what we work with throughout this course. *after naming this page index you can name all other pages what ever you want so long as they do not contain illegal characters which include spaces, colons, slashes, etc. If you stick with letters and numbers you will be fine. Ok now on to what extension you save the file in there are 2 different kinds .html and .htm I recommend using the .html as opposed to the .htm for various reasons but mainly b/c some web hosts do not set their servers up to automatically search for the .htm extension and therefore viewers will again get that dreadful “page not found” and we don’t want that we want to show off your talent!! Ok so if you are using notepad you will need to go to file-> save as and type in “index.html” yes you need to type in the .html or it will save as a .txt file. In an editor you can still type in the .html (in front page if you don’t it will auto add the .htm extension) You need to pick a place to store this file. I suggest now would be a good time to set up a folder just for this website you arte making you will want to save all your files just as they would be saved on your web host since you will constantly be viewing the pages you make from your computer and not the web. You are free to create this folder where ever you want but I create all my folders for each website in the “My Documents” folder I give the folder a name (usually the name of the site) so make your new folder and type in the name then save your index file (you may have to retype this name again depending on your computers default set up) before clicking save be sure to change the “save as type” from text document to “all files (*.*)”

WTG!!! You have just completed your first web page. If you want to view this file from your computer as it would appear in a website all you have to do is go thru your hard drive and find the file (mine was C:\my documents\mywebsite\index.html) click to open and Viola there it is.

Next -->