Ok, ok, as I promised I decided I would go ahead and throw together this little tutorial to get those of you interested in web design started off (without those flashy programs Widescreen uses
).
All you will need for this tutorial, is a computer, a keyboard, and the program "Notepad" (installed in every version of Windows released to date...usually found under Start Menu->All Programs->Accesories->Notepad).
Let's start slowly since this may end up somewhat complicated for some by the time we are done
How could you possibly put up a page created in notepad on the worldwide web and your browser (Internet Explorer or Netscape) will know that it should have all these bright images and links and stuff? Well, the answer is because of the code used in webpages.
When you make a webpage, it is up to you what code exactly you want to include, depending upon what you want to display
Let's start off by talking a little bit about our terminology.
browser=a window onto the internet...popular browsers include Internet Explorer, Mozilla, Netscape, and Opera
HTML=Hyper-Text Markup Language...in essence, the language of a webpage
tag=code...a tag is what you see between < and >
Now is a good idea to talk about the basic ideas behind an html document (aka...a webpage).
--there are different versions of HTML. The latest standard (as determined by the W3 Consortium) is HTML 4.01. Above and beyond this there is XHTML, XML, CSS, and javascript....in this tutorial we will limit ourselves to HTML 4.01 only
--differnet browsers display things differently...be careful when using tags that only work under one browser as other visitors of your webpage may see something different than what you intended.
--most tags (though not all!!) have a starting and a closing tag. This tells the browser when you are starting something and when you are ending it.
Let's start off with some basics....
Every web page has the following basic format:
Let's examine this a little before we add onto it
The first "tag" we see in this code, is < html > (please note I have added spaces in this tag merely so the webpage won't pick it up...when you are designing a webpage, there are no spaces in this tag). This tells the browser that you are beginning an html document. This tag has an associated closing tag at the very end of the document...< /html >.
We also see a < head > tag in this piece. This is the head of the document. Things placed in the head tag will not usually display on the webpage, but this does not mean it isn't important. Meta tags are always placed in the head tag and can help improve your website's ranking, but we will leave this for future discussion
The < title > tag tells the browser what the title of the page is. This is displayed all the way at the top of the window in the blue title bar...the same bar you have your minimize and maximize and close window buttons.
Notice we close the title and head tags and then we start our body tag. The body tag opens up the body of the webpage for us to edit. You can place links, pictures, and text in here as you desire (these tags will be left for another tutorial). This is what will display in the window.
After you add your body in, you would close your body tag to tell the browser this page is done, and then close the html tag to tell the browser the html document is complete. It is not necessary to close these tags (because after your browser reaches this point everything has been displayed so if they are not closed, it won't actually hurt anything)...this is done just for conformity to the standards and so all browsers will display the page the same.
Now is when I will discuss a very important part of making a webpage. Let's say you have copied the above code and pasted it into your notepad and saved it....if you doubleclick on it, the page will open in notepad. Why? Because it is saved as a txt file.
When you go to save your webpage, this is the key. What you will need to do if you intend for a browser to see this code as it is intended is save the file in an html format. To do this, when you go to save your new webpage in notepad, choose File->Save As-> from here, change the file type drop down menu at the very bottom to *All files instead of *.txt.
Now name this page index and type after the name ".htm" or ".html" (either is acceptable and will work in any browser). THIS IS WHAT TELLS A BROWSER THIS DOCUMENT IS A WEBPAGE.
Now if you go to see your new document in Windows Explorer or My Computer, it should display as index.html rather than index.txt. If you doubleclick on it, it will open in your default browser (Internet Explorer for most).
The reason you save this page as index is because almost every single webhost on the internet will automautically look for index.html first. In other words, if you type www.anywebsite.com, the servers that are hosting www.anywebsite.com will look for index.html in that site's root directory...if it is not found you will usually get a Page Cannot Be Displayed error, even if there are other pages in this directory.
If you have gotten this far and can open your new page in IE, you have accomplished the biggest hurdle...actually making your page. Now you may want to add content to it, but this is up to you.
I plan to write another tutorial here shortly on how to do some basic things with your new page, but play with this for now to get the hang of it. Add stuff into the body tag to see what happens. Experiment
Just to recapp....
- The first page of your website should ALWAYS be named index.html or index.htm.
- Your basic format for your webpage should be as shown above...html tag, then head tags with any content in them that is necessary, then body tags, then close the body and html tags
- You MUST change the file type you save your page as from *txt to *Any file type and then you MUST manually type in .html or .htm after your file name.
I hope this can start you off on the fun adventure of webdesign as it has for me
Click here for Part 2 of this tutorial! -->
How to make a basic website, --Part 1
Dec 14 2004, 02:11 PM
Post
#1
United States
