|
|
LinksHomeAbsolute Beginner Beginner Intermediate Advanced The Best Site Map Other HTML
|
Hello absolute beginners. This tutorial is for those of you who have never made a webpage. If you need to know the main tags for a webpage and need to learn how to save the file correctly you are at the right tutorial. But don't worry, we will be learning how to use the font color and size aswell as many other basic tags. If you already know how to use basic HTML I recommend that you go to the beginner or imtermediate tutorials.The first thing we will learn is the basic structure of the website which looks like this: The <HTML> tag means Hyper Text Markup Language. The <HEAD> is the part of the code that you would write more andvanced markup language in. The <TITLE> there so you can cusomize what it says in the blue bar on top of the webiste. The </HEAD> tag tells the computer that you are no linger writing anything in the head of the webpage(You won't need to write anything in the head when using HTML). Between <BODY> and </BODY> tag is where we will be writing. The </HTML> tag is the end of the HTML document(don't write any code after this point). When you go to save after you have written everything (that is in green writing up above) in using notepad, go to File, go to Save As, name the document and after you name it write ".html" (without the quotes). Then change the Save as type to All Files not text document. And nnow you have the basic structure of a webpage. To edit your Webpage (Which is only a white page right now), open the page than click on View than go down to Source. You should see the notepad document that you just saved. Now comes the fun part where you get to create your very own webpage about whatever you want. First we will learn about changing the backgroung to any color. To do this you would click inside the <BODY> tag and make it say
If you haven't been building the site as we go, you might want to try this on the Test area provided below. You can also use different images a s backgrounds like I did. All you have to do is write <BODY BACKGROUND="file name.ext">. Where I wrote "file name" you would put the name of the image, and where I put ".ext" you would put the file extension. File extensions are the three letter thing that. Yours will probably be .gif, .jpg, or .bmp. And it is not necassary to write BODY again. You just write it in the BODY tag like you did with the BGCOLOR. Now we will learn three of the most basic tags. Th first one is <P>. The <P> tag will start a new paragraph for you (will skip one line then start the paragraph). The next tag we will learn is the <BR> tag. The <BR> tag will start a new line every time you write it. The third tag is the <CENTER> tag. The <CENTER> tag is basically self explanitory. It centers any text you write after you have written <CENTER>. When you are done writing all the text you want centered just write </CENTER>. This tells the computer not to center anything else unless you write <CENTER> again. The next thing we will learn is font size, color, and face. To set the font size you would write <FONT SIZE=#>. Where it says #, you would write any number from 1 to 7. 1 being the smallest and 7 being the largest. When you dont want the text to be the size you specifies write </FONT> Now that you know how to chamge font size, it would probably help if you knew how to change the color aswell. The tag used to change the font color is <FONT COLOR=any color>. When you don't want the font to be the color you previouly specified, you would do the same thing you did with font size. Write </FONT>. The last way you would change your font is with the <FONT FACE=font type goes here> tag. Where it says "font type goes here", you would write any font face such as: Arial, Fixedsys, Impact, Courier, etc. When you are done using that font type you write </FONT>. Here are some example:
If you decide to use font color or size or face at the same time you could do the following:
You need to write </FONT> twice because you used two different font tags. There is a way to do it and only use one </FONT> tag (shown below).
Now that you know how to change font color, face, and size, I will show you how to Make the font Bold, Italic, and Underlined. To make the text bold you just write <B>. And when you are done using bold text just write </B>. There is an example of the <B> tag below.
To make font italic you just write <I>. To stop using italic font you would just write </I>. There is an example of the <I> tag below.
Last but not least, we will learn the how to underline text. To do this you just write <U>. When you are done using the <U> tag, just write </U>. There is an example of the <U> tag below.
If you want to use bold, italic, or underline at the same time, the code a few examples are shown below.
If your website has more pages than one like mine, you need to know how to make links. Links are really easy to make and they are very useful. To make a link just write <A HREF="filename.html">text used as link</A>. Where it says filename.html, you would write the name of the webpage you want to link to. Make sure there are no spaces in the and that you write .html. You also have to make sure that you are using the correct capitalization because the computer is case sensitive. Where is says "text used as link" you would write whatever text you want to be a link. Like on my page at the top left there are links that say "Home", "Absolute Beginner", etc. And when you are done don't forget to write </A>. If you don't write </A>, the rest of the text on your page will be a link. Here is an example of a link:
When you try to make a link it will be blue not gray like mine. I will show you how to change the link colors in the intermediate tutorial. The next thing we will learn is how to insert images into your webpage. To insert an image just write <IMG SRC="imagename.ext">. Where I wrote "imagename", you would wrote the name name of your image. And where I wrote ".ext", you would write the file extension. If you don't know the file extension it will probably be either gif, jpg, or bmp. If you want to check the extension, go to the folder that the image is in and write click on the image then go to properties. It should say it there. Here is an example of an image.
Well, this is the end of the Absolute Beginners tutorial. If you were not following along and building a webpage, you might want to go try some of the things you learned on my HTML Writer which you probably used when we were doing bgcolor. Thanks for taking my tutorial. You are now ready for the Beginner Tutorial. |
