|The Anatomy of a Website section 1|
INTRODUCTION TO HTML |
This tutorial assumes viewer has basic computer skills/no prior HTML skills.
The Internet is based upon a Language called HTML. Don't lose any sleep over this yet! It stands for Hyper Text Markup Language. All you need to know for now is that this means that we use what are called TAGS to format text, and control the layout of the objects in our html document. Each document contains two main parts. The head section, which is where we place information like the pages title, meta tags, description, key words, scripts, styles, and more. The body is where we will put everything that will be displayed on the screen. These so called tags, are the instructions given to the browser, and are always placed between a set of ( smaller than and larger than signs like this < tag > ). All our html documents file names must end in the extension (.html). Each tag should have an opening and a closing tag. The body opening tag would look like this < body >. For its closing tag you would simply add a forward slash before the tags name < /body >. By the way, note that html tags are not case sensitive.
For example:< body >, < Body >, and < BODY > all mean the same thing and are interpreted as being
Before we start going over the actual html tags, we first need to understand just what a website really is, and how we can go about building one. We will also get some great tips along the way that should make getting started much easier! The gray box will call your attention to HELPFUL TIPS !
Clicking on the link inside one of these gray box's will open a new window containing helpful information pertaining to the curent subject. We create our main or root folder which will hold all the files that we will need to build our first site. We'll name this folder first_site. This will be the name of our first site. Feel free to give your site a different name if you like. You may even come up with a better name than, First Site.
Lets start by taking a look at a screen shot that might help us understand what a Website might look like if we were veiwing the actual files rather than the site itself. Here we see the root folder with some files in it. We have a second folder within the root folder called images. I'm guessing that this is where all the images for our new site will be kept.
Website File Structure:
There are six html documents (This is how we will refer to web pages from here on in). Notice that one of these html documents is named index. All websites should have one page that is called index.html. This is not the title of the page that is seen in the title bar. Index is the name of the actual HTML file, (index.html). The index page is the first page that visiters will see when they get to the site by entering a domain name in the address box of the web browser. TIP 1-Naming your files.
Our Site will contain a total of six pages including the index page. There will be several images used. Feel free to use the images that are within this tutorial, or you can use your own. I plan to design a tutorial on Images For The Web and others, after the completion of the Anatomy of a Website tutorial