1. What you need to get started with HTML
To begin using HTML, you will need to have a few things. Here is the big list of items you need to have to get started:
You will need to have a computer that is running. Most likely you have this already, since you are reading this page.
You will need a text editor of your choice. If you have windows, Notepad will do the trick. If you have a Mac, you can use BBEdit.
In Windows 3.x, find the program group named "Accessories" and double click to open it.
You should see an icon like this: 
In Windows 95 or higher, click the "Start" button, go to the "Programs" folder, then to the "Accessories" folder. You should then see the above icon (but smaller) with "Notepad" written to the side of it. Open it by clicking over this area.
On a Mac, you should be able to find BBEdit under the Apple menu.
You will need a web browser of your choice. If you possibly can, use the latest version of Netscape Navigator or Microsoft Internet Explorer .
You will need a place to save your work. You can use your hard drive, a floppy disk, or your web server. You don't have to work online, you can write the html and use your web browser offline on your own computer. We will get to that shortly, in the next tutorial.
Okay, once you have the above materials, you can begin creating your own web pages with HTML. Let's move on to the next tutorial,
2. Using Your Materials
Okay, to begin using HTML you will want to familiarize yourself with the software you will be using. So, to get started, open Notepad (or your text editor). You should see a completely blank page. Now, type in the text below. We will make use of it later with the web browser.
Type the following:
Hi there, you have just written your first web page!
Once you have finished, go to the "File" menu and click on "Save As" . This will prompt you to create a name for your file. In the box, type in test.php . At the bottom of the prompt you should see a space that says "Save file as Type" or "Save as Type". The default is .txt, so you will need to change it. Click on the down arrow on the right side of the input box. You should be able to highlight All Files(*.*) . Click on this to make the change. You should see something similar to the picture below:
This is an example using Windows 95. The text was enlarged so you could see the part we are interested in at this point. Now you may choose the drive and directory to save to, and click on "Save". You can use this routine each time you create a new HTML file.
If you do not get the option to save the file as the type All Files(*.*) , then select the plain text file type (usually shown as Text Documents, Text Files (*.txt), or something similar in the dialogue box). Be careful not to save it just yet though if you are using Windows. Windows will save it as test.php.txt by default. To get around this, you will need to place quote marks around the filename, as shown in the image below:
If you have a Mac, the way to do this will depend on your text editor. Something similar to the methods above should work for you. If someone with a Mac would like to write up something in more detail about this (as I don't have a Mac), feel free to send it to me.
Now you will want to use your web browser to view the file you just created. So, start up your web browser. If you are given an option to connect to the internet, you can cancel the connection and you will likely end up with a blank page. You may also see an error saying the browser could not connect to "http://somepage.phpl" or something similar. You should be able to hit OK and get a blank page. Now, in the location box (where you manually type urls), type in the path to your html file. If you have the file in a directory called "myfiles", you would type the following: c:\myfiles\test.php . If the file is on a floppy disk, you can type a:\test.php , provided you did not place it in another directory on the disk. Most browsers will display the page when you hit enter.
Another option you have, especially if you hate typing paths all day, is to use the "Open Page" option. To use this, go to the "File" menu in your web browser. Look for an option that says "Open Page", "Open File", "Open Local File", or a similar phrase. Click this option and you will be able to browse for your file and open it from there. The image below shows where this can be found in Internet Explorer:
Once the page is displayed, you will see something like the following:
Hi there, you have just written your first web page!
I know, it's not much yet, but you have written your first web page. You are now prepared to begin learning how to do this, and use HTML to build a web page the way you want it done.
3. HTML: Basic Format
Now we are going to start talking about HTML tags. A tag will always begin with a less than sign, like this: <. The tags will end with a greater than sign, like this: >. An example would be the tag used to underline text, . You would place this before the text you want to underline. This is called an opening tag, which begins the operation you wish to perform. In order to end the underlining, you must use a closing tag. A closing tag will always be the same as the opening tag, but will have a forward slash before the command, like this: . So, if you would like to underline the phrase "HTML Rules!", you would write the following in your text editor:
HTML Rules!
The result of this would be:
HTML Rules!
Not all tags will require a closing tag. An example would be the image tag, which will place an image on the page. It looks like this: 
. I will explain all the extra stuff later, this is just an example of a tag that requires no closing tag to follow it. Other examples would be a line break:
, a horizontal line:
,and a paragraph:
.
Also, you do not need to capitalize the tags.
is the same as
. You can also use as much space between things as you like. So:
Underline Me!
Is the same as:
Underline Me!
Is the same as:
Underline Me!
A basic HTML file will have the format below. Read through and see if you can guess what the different tags will do: (Don't worry, I'll explain them at the end of the example.)
Everything displayed on your page will be in here.
Okay, to make sense of this, go through and find the pairs of opening and closing tags. The first one we see is . This signals the beginning of an HTML file. The closing tag , , is at the very end of the document. As you might have guessed, it signals the end of the HTML document. Everything (tags, text, images) should be between these two tags, as they are the beginning and end of your page.
The next tag we see is the tag. This opens a section in which you can title your page, use keywords, and add other descriptive information to the page. The section ends with the tag. At this time, the only part of the HEAD section we will deal with is the TITLE, which brings us to the next tag.
The tag. For instance, in the example, the title is "I Love HTML". (That's not true all the time, though).
The tag opens the section that will be displayed in the web browser. This is where most of our work will be done. To end the body section, use . The above example makes a rather boring web page (even worse than the one in the previous tutorial). The browser would display this:
Everything displayed on your page will be in here.
Yuck. All we have is a line of text aligned to the left of the screen. Well, let's go to the next tutorial and see if we can add a little life to our page of text.
44. The Wonderful Text Tags
Okay, it's time to start making our text appear in different ways. Let's start by giving you some tags to work with:
This is the tag for bold text.
Example:
Bold
This will show up on your page like this:
Bold
Here are a few more to start working with:
Underline Me!
Underline Me!
Italics
Isn't this fun?
Isn't this fun?
You're Out!
You're Out!
This centers text on the page
Having fun yet? You can also use more than one tag at a time. Let's say you wanted something in bold and italics. To do this, just place both opening tags before the text.....and remember to close both tags afterwards....like this:
I am bold AND Italic, which makes me cool!
This will show up like this:
I am bold AND Italic, which makes me cool!
Does the order of the tags make a difference? In this case, it wouldn't matter which way you opened and closed the tags. However, working from inside out will help you see your code better, and will help when the order does matter! (such as placing the tag before the tag). Here's another way to look at working inside out. I could write the HTML this way:
I am bold AND Italic, which makes me cool!
This could get rather tedious. All you need to remember is that the text you have written is affected by every tag before it that has not been closed. The effect ends when each one of those tags is closed by it's closing tag.
So lets try three things: Bold, Italic, and underline!
Would you stop tagging me!
This will give us:
Would you stop tagging me!
But this:
Would you stoptagging me!
would give us this!
Would you stop tagging me!
As you can see, the bold and italics were closed before the word "tagging"....but the underline remained open until the end of the exclamation. This caused the "tagging me!" portion to be underlined, while not being affected by the bold or italics tags!
Now let's use the center tag from above. Since the default alignment of everything is to the left, it's nice to have a way to place things in the center of the page. So let's do just that. Use the
This will give us the following:
I'm in the middle!
You can also use it with one or more of the other tags above, like this:
Look at me now!
Now you may be wondering why everything is just on one line. Well, in the next section, I'll show you how to make the text move to the next line with the line break tag. You'll also see how to use headings and paragraphs. So, let's move on to the next step,
5.Headings and Paragraphs
Let's start out with Heading tags. These tags are good for creating titles or section headings. Here are some examples:
Large Heading!
will give us:Large Heading!
Heading 2
Heading 2
Heading 3
Heading 3
Getting Small
Getting Small
Smaller Still...
Smaller Still...
You must have good vision...
You must have good vision...
O.K., I think you get the idea here. Now let's move on to a line break. The tag for a line break is
. When you insert this tag in your document, the contents will go to the next line. The
tag does not need a closing tag afterward. Here is an example:
End this line now!!
Thanks!
This will generate the following:
End this line now!!
Thanks!
Basically, a line break is like hitting the "enter" key when you are writing text. The browser will not go to the next line until it runs out of space, or sees a tag that will force it to the next line. So typing the following in your text editor will display only one line of text in the browser:
Hello,
I want
a new line.
This gives us:
Hello, I want a new line.
To make the text move to the next line, use your
tag from above:
Hello,
I want
a new line.
Now this will do what we wanted it to:
Hello,
I want
a new line.
Now, let's move on to the paragraph tag,
. This tag will skip a vertical space after going to the next line, as though you had typed
twice. This tag is good for skipping a line quickly and for knowing where you wanted a new paragraph to begin. How about an example? Well, O.K.:
This is some cool stuff.
This is the next line.
This is a new paragraph. Is this cool or what?
This will give us the following:
This is some cool stuff.
This is the next line.
This is a new paragraph. Is this cool or what?
The paragraph tag does not require a closing tag, but if you'd like to add one for your own reference, you place a
where you would like the paragraph to end, like this:
This paragraph needs a visual ending!
Here is a new paragraph....
and the end.
This will give you the same thing as using just the opening
tags, like this:
This paragraph needs a visual ending!
Here is a new paragraph....
and the end.
Both of these will give you this:
This paragraph needs a visual ending!
Here is a new paragraph....
and the end.
So, now you can create a web page full of text. Isn't it great? Well, there is still more of this in the next section,
6.Manipulating Font Size and Color
Okay, now we want to see how to change the font size. This is done with the following tag:
text to change
"x" will be replaced by a number with a + or - sign in front of it. So let's say you wanted to make the font larger. You can use the tag with a +2, like this:
I'm a big sentence now!
This will give us the following:
I'm a big sentence now!
Likewise, you can make the font smaller in the same way, using the - sign:
Hey, I'm Small!
Will give us this:
Hey, I'm Small!
Here are some more size examples for you:
Hey There
Hey There
Hey There
Hey There
Hey There
Hey There
Hey There
Hey There
Hey There
Hey There
Hey There
Hey There
Can you read this?
Can you read this?
Now, suppose you want to change the font color. This is done in much the same way. Here is the tag:
We replace the word color with a color name or the hexidecimal color value. Let's do one using the color name to begin:
I'm red!
I'm red!
Now let's use the hexidecimal value for red. The hexidecimal representation begins with a # sign and is followed by six letters and/or numbers. Here is the example:
I'm red!
I'm red!
That is a # sign, two F's and four zeros. Usually it's easier to remeber the color names, but you may want to have the hex code for more complicated colors. If you want to see a sample list of color names and hex codes, click here .
Now suppose you want to change the size AND the color. To do this, you can use two FONT tags and remember to close them both, like this:
I am gold!
I am gold!
Also, you can use the SIZE and COLOR declarations inside the same tag, and close only one tag. This is done like this:
I am gold!
I am gold!
You can also declare the font color inside the BODY tag. We will discuss this in a later section called Using the Body Tag Declarations. For now, we will move on to the next section
7.Special Characters
So, have you been wondering how to add an extra space on your page, or how to get a copyright symbol to show up? Then let's see how right now! Special characters are placed on your page by using a special reference to the character you want to use. The reference will begin with an ampersand (&), will be followed by some text or numbers, and end with a semicolon (;) . So as an example, let's say you wanted to place an extra space between two words. To do this, you place the reference where you would like to add the extra space. Here is what you would do:
Hello there!
This gives us two spaces between "Hello" and "there!", like this:
Hello there!
The first space is added just using the "space" bar on the keyboard. The web browser will see the first space, but after that additional spaces will make no difference-- you will only see one space in the browser. By adding the reference, we forced the browser to add an extra space between the two words. You can add as many spaces as you would like by repeating the reference, like this:
Hello There!
This will create the first space, and 4 additional spaces between the two words, for a total of five spaces. It will be displayed like this:
Hello  There!
The other one we will discuss is the copyright symbol. You use it the same way as an extra space, by placing its reference where you would like to see the symbol on the page. The reference for a copyright symbol is ©. Here's an example:
This page Copyright © 2004 by me!
This page Copyright © 2004 by me!
This will work the same way for any special character you want to use. Just place the reference where you want the character to be on your page. To see a list of some common special characters and their references, see a list of some special characters.
Well, now you are ready to go on to the next section.
8.Linking to Other Pages
All right, it's time to learn how to link to another page. So let's start out by seeing what tag we use for linking:
The A stands for anchor, and the HREF=" " is asking for a location to link to. The is the closing tag. The text between the tags is what will show up on your web page as a link. So, if you would like to link to our site, you would place our url, or net address, inside the quote marks. Our url is http://www.freewebknowledge.com, so to create a link to us, place this command on the page where you would like the link to show up:
The Web Design Resource
It will show up on your page like this:
See how the text was colorized and underlined? In most cases, this will indicate the text is a link. If you move your mouse over the link, you should see the cursor change into a pointing hand. The mouse attribute comes in handy when a page has a whole lot of underlined text.....
As another example, let's create a link to this particular page. Look in your location box near the top of your web browser. You should see the url for this page, which is http://www.freewebknowledge.com/html/linking.php . To create the link, insert this url into the link tag:
Which gives us this link:
If you click on this link right now, your browser will simply display this page again. If you click on the link from the first example, you will end up at our home page. Great isn't it? Now, if you want to link to your own pages from your home page, just type in the address for your page inside the link tag. This will work for any page because we are using the absolute url, which means we are using the complete address to every page we are creating a link to. If you have all of your files in the same directory, you may use a shortcut called a "local url". Before you try this, be certain any file you want to create a local url link to is in the same directory as the page you are editing. (In most cases, it will be) Now, rather than typing the full url inside the tag, you can just use the filename, like this:
This will create the same link we just did, but we didn't have to write as much.
Linking to Other Pages
If you aren't sure or have doubts, always use the absolute url. Typing in the full address will allow the link to work no matter where it is located on the internet.
If you would like to see some related tutorials, try one of these:
Changing the Link Color
Using an Image as a Link
Linking Within the Same Page
Now that you have linking down, let's move on to even more fun
9.Adding images to Your Page
So, have you been wondering how to add an image to your page? Well, let's take a look at the image tag:
The IMG stands for image. The SRC stands for source. The source of the image is going to be the net address of the image. Most often, you will be able to just type the filename of the image here, like this:
The filename does not have to end with .gif . You could also use a .jpg file as well. These are the two most common image file extensions used on the internet. If you have images in other file formats, you will probably want to convert them to .gif or .jpg . This can be done with most image editing programs. A commonly used program is Paint Shop Pro, which is available as shareware from JASC.
Now, if your images are in a directory other than the one your html document is in, you will want to link to it using the full address of the image. So, if your image is located at http://www.disney.com/pictures/image.jpg , you would use this url as the image source:
If you aren't sure, go ahead and use the full address just to be sure it will work correctly. Now let's work with a real example. One image I have on this site is called "bluenext.gif". The address for the image is: http://www.freewebknowledge.com/images/bluenext.gif . If my image and html file were in the same directory, I would type:
Otherwise, I would use the full internet address, like this:
Either option would display the image on the page, aligned to the left, like this:
If you want to center the image on the page, you would place the CENTER tag around the image tag, like this:
This will place the image in the center of the screen:
-
Keep in mind, the filename or address of the image IS case sensitive, so "image.jpg" and "IMAGE.jpg" are considered two different images to the web browser. Be sure to use the correct case in your image tags, or the image may not show up, and that's no fun.
Now, this doesn't give us everything we could possibly want, but it will allow you to add an image to your page on its own line. If you want to see more on using images, check out one of these related tutorials:
Aligning images and Wrapping Text
Using an Image as a Link
Using a Background Image
Resizing an Image
Using Image "alt" Commands
If you would like to move on, let's go to the next section
10.Adding HTML Comments
Comments can be a nice way to help yourself when you are coding your web page. Comments are invisible to a web browser when it displays your web page. The only way to view comments is to look at the source (html) code of the web page. In this way, you can leave yourself notes so that you don't forget something when you come back later to redesign the page. So, how is it done? To write a comment, you begin with a less than sign (<) followed directly by an exclaimation point (!) and two dashes (--). After this, you type in your coments. To end the comment, you use two dashes (--) followed directly by a greater than sign (>).
You can comment on multiple lines, just be sure you remember to end the comment!
To look at something more useful, you could use a comment to remind yourself that a section of code is supposed to perform a certain task:
Of course, you do not need to have a kitty cd to qualify!
Well, that does it for comments. So, let's move on to the next section.
11.Using HTML Lists
Have you been wanting to add lists to your page? Well, here is the way to add those html lists to your web pages.
To begin, we need a tag to begin and end the entire list. For starters, let's use an unordered list. This will create a list with bullets next to the list items. The opening tag is
- , and the closing tag is.....yep, you guessed it...
- I am number one
- I am number two
This will give us the bulleted list below:
- I am number one
- I am number two
Notice the
- tags, as long as you remember to close every one of them. Here is a sample of indenting further into the page:
- I am number one
- I am number two
- I am number one
- I am number two
- This is item one, how nice it is to be number one.
- Item two is much shorter!
- Item three is somewhere in between..
If you really need the list further in on the page, use the indention method above until it hits the center of the screen (this can mess up in different screen resolutions, though), or you can try using a Table to align the text instead. - Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
This will give us the following indented list:
Be careful about using the
You can also use an ordered list in the same way you use the unordered list. Instead of using
This gives you a numbered list rather than the bulleted list:
Well, that does it for HTML lists, so lets go on to the next sectio
12.Using BODY Tag Attributes
When you create a web page, you can change serveral things in the body of your document by adding extra commands to the tag. Here is what a body tag with serveral additions would look like:
Pretty long tag, isn't it? Well, you can use as many or as few of these add-ons as you wish. The options you don't use will be set to the web browser's default values. Below is a brief explaination of each attribute, with a link to the tutorial for each one. (If you are moving through the tutorials in order, we will eventually get to each one of these.) So here we go....
bgcolor="color" Tutorial-Using a Background Color
This changes the background color of your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. For a list of common colors and hex codes, click here. The default setting varies with your browser, but is usually gray or white.
text="color" Tutorial-Changing the Default Text Color
This changes the default text color the browser will display on your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. For a list of common colors and hex codes, click here. The default setting for text color is black.
link="color" Tutorial-Changing the Link Color
This changes the color of all of the non-visited links on your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. For a list of common colors and hex codes, click here. The default setting for a non-visited link is usually blue.
alink="color" Tutorial-Changing the Link Color
This changes the color of an active link on your page, which is a link that has just been clicked on by a user's mouse. You can set this to any color you would like to use. Just replace color above with a color name or hex code. For a list of common colors and hex codes, click here.
vlink="color" Tutorial-Changing the Link Color
This changes the color of a visited link on your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. For a list of common colors and hex codes, click here. The default setting for a visited link is usually violet.
background="image.gif" Tutorial-Using a Background Image
This adds a background image to your page. If you use this attribute, the background image will take the place of any background color you may have specified. If you don't use a background image, the browser will use your background color or its default background color.
Okay, now you will be prepared for the next series of tutorials (which are the ones listed for the attributes above)
0 comments:
Post a Comment