NetiQuette! Helping your learn
HTML Class
SafetiQuette Gallery Contact Us


HTML Basics


Coding Tips: basic skills you need to know

It is important to learn some very basic skills if you wish to become an HTML coding whiz! This set of tutorials will teach you the fundamentals you need to know to code your web pages properly.

Copy and Paste

One of the handiest skills you need to learn is how to Copy and Paste in Windows. This will save you a lot of time and effort once you have mastered it! The process is quite simple and can be done in 4 steps:
  1. Highlight the text you wish to copy: Click down once, with your cursor on one side of the text you want to copy, with your left mouse button. Hold the mouse button down. Then drag your mouse pointer over the text until all of the text you wish to copy is colored differently than the rest of the text on the page. Now let go of the mouse button. If you have highlighted correctly, the text should stay colored differently.

  2. Click on Edit/Copy: Click on Edit (on the top tool bar) and then when the little menu drops down, click on Copy. This will copy the text you highlighted into the Windows clipboard. You will see nothing happen but that is normal. If you prefer using keyboard shortcuts, press down the CTRL key with one finger and hold it down, then press the letter C with another finger, and then let both go. CTRL-C is the Copy shortcut key combination.

  3. Place your cursor: Decide where you want the new text to go on your document and click once where you want the new text to be inserted. The cursor should flash.

  4. Click on Edit/Paste: Click on Edit (on the top tool bar) and then when the little menu drops down, click on Paste. This will paste whatever happens to be in the Windows clipboard into your document, in the place you specified. If you prefer using keyboard shortcuts, press down the CTRL key with one finger and hold it down, then press the letter V with another finger, and then let both go. CTRL-V is the Paste shortcut key combination.
Here is a block of example text you can practice on:

Coding HTML Tags

To properly code HTML you need to know how your HTML TAGS are written. Is that simple or what?

An HTML Tag is actually made up of TWO separate tags with some stuff in between:

  • An Opening Tag
  • A Tag Attribute(s) to help define the Opening tag
  • A Value for the Attribute(s)
  • Text or an Image you want the tag to affect
  • A Closing Tag

    The Opening Tag

    The Opening Tag consists of an angular bracket < followed by a tagname and then completed with a closing angular bracket >.

    Let's pretend the tagname of the tag we want to use is EXAMPLE. We would code the EXAMPLE Opening Tag like this:

    <EXAMPLE>

    The Tag Attribute(s)

    A Tag Attribute lets you help define the tag it resides in more precisely and allows you to specify more functions within the same tag:

    <EXAMPLE ATTRIBUTE=>

    The Value

    Values can be a number or a word depending on which attribute you are using:

    <EXAMPLE ATTRIBUTE="VALUE"

    An Opening tag consists of a Tagname, Attribute(s) and a Value for each Attribute(s). Now our Opening Tag is complete, so we can close it off with the 'other bracket':

    <EXAMPLE ATTRIBUTE="VALUE">

    The Text Or Image To Affect

    Now that we have the Opening Tag complete, we need to give the Opening Tag something to actually work on. We do that by defining some text, or perhaps a graphic WITHIN the Tag:

    <EXAMPLE ATTRIBUTE="VALUE"> Text we want to affect here

    The Closing Tag

    All that remains now is to finish it off by adding the Closing Tag. This tells the browser to stop creating the effect we defined in the Opening Tag. A Closing Tag consists of a bracket, a forward slash (not a backward slash), the tagname and then the 'other bracket', like this:

    </EXAMPLE>

    So, here is our complete example tag:

    <EXAMPLE ATTRIBUTE="VALUE"> Text we want to affect here </EXAMPLE>

    Combining Tags With Several Attributes

    Learning to properly COMBINE Attributes is extremely important! Let's use the <FONT> tag to illustrate the way you combine attributes into a single tag.

    What happens when you want black text, slightly larger than normal, displayed in Arial, on your page? (Don't worry, these attributes are discussed in detail in another tutorial)

    This is how most beginners will code this scenario:

    <FONT SIZE="4"><FONT FACE="Arial"><FONT COLOR="#000000">testing the tags and attributes</FONT></FONT></FONT>

    Bzzzzztt...WRONG!!!!!... thanks for playing...

    As you can see each attribute was given it's own Opening and Closing Tag. All this will do is give you a zillion Closing Tags and confuse your poor browser. What you SHOULD do, is COMBINE all of the attributes into ONE <FONT> tag like this:

    <FONT SIZE="4" COLOR="#000000" FACE="Arial">testing the tags and attributes</FONT>

    All you really need to do is take all the Attributes and Values and nest them inside ONE Opening Tag. The order of the attributes is up to you. As long as you have them all set with the correct values, in quotes, it will work just fine!

    Nesting Tags Properly

    Nesting Tags is simply the process of applying more than one tag to the same block of text or object.

    Let's take a simple font tag for example:

    <FONT SIZE="2">Nesting the Tags</FONT>

    Here is how it looks on your page:

    Nesting the Tags

    Now let's say we want to have that text appear bolded. We have to add the Bold Tag set around the text we want to affect:

    <FONT SIZE="2"><B>'Nesting the Tags'</B></FONT>

    Here is how the newly bolded text will appear on your page

    'Nesting the Tags'

    Now let's add a third tag to our text. Let's display our text in Italics by adding the Italics Tag set to our text:

    <FONT SIZE="2"><B><I>Nesting the Tags</I></B></FONT>

    Now our text will be displayed like this:

    Nesting the Tags

    Learning how to properly nest multiple tags around one block of text or an object is crucial to successfully coding your web pages.

    If you look at our final example above, the opening tags have been put in a certain order and the closing tags ALL appear in the EXACT OPPOSITE ORDER. For example:

    <TAG1><TAG2><TAG3> [text or object here] </TAG3></TAG2></TAG1>

    Making sure you have your multiple tags nested properly takes a little getting used to, but if you get into the habit at the very beginning it will become second nature to you in short order.


    • Home Message Boards Coming Soon More To Be Added








    N.Tessier & NetiQuette
    All rights Reserved