 |
|
|
|
|
How does HTML work?Just what is HTML anyway? "HTML" is an abbreviation for Hypertext Markup Language. It is the core language every Web page is written in. With the popularity of the Internet growing by an enormous rate, more and more people are putting up a Web page these days. One of the benefits of having a Web page is that it levels the "playing field" and gives everyone a chance to express their opinions and be heard. Case in point. Imagine you have a product or service to offer but don't have the resources that most large companies possess to reach your target audience. Simple! Put up a Web page and use it as your advertising medium. Millions of people are online and with millions more joining the Internet community every year, the possibilities are endless. HTML uses something called "tags" to tell your browser what it should display and how it should display it. Below is a "Hello World" script written in HTML.
Don't worry if you are new to HTML. I'll explain everything so just relax. The first thing to remember is that ALL pages written in HTML need to have the <HTML> tag as the very first line of code. This simply tells your browser that this is a Web page. You'll also notice (at the very bottom) that there is a second </HTML> tag but this one has the "/" mark in it. All HTML tags must have both an opening (<HTML>) and closing (</HTML>) tag. This is true for each tag you use. Next, we come to the <HEAD></HEAD> section of the page. This is where your page's title goes as well as meta tags and a few other HTML elements. Your page's title goes between the <TITLE> and </TITLE> tags and should be descriptive of your site or what you have to offer your visitors if possible.
<TITLE>Jackie's cat grooming boutique</TITLE>
Now we come to the <BODY></BODY> tags. This is the main body of your HTML document and acts as a container for any text, images, tables, forms, scripts, etc., that you want to add to your page. The final </HTML> tag closes the whole thing.
How to add comments?
Some people still use older browsers that do not support certain HTML tags. For this reason, it can be a good idea to place something like the code below in the <HEAD></HEAD> section of your page so that they will be able to at least read what the page is about even if they can't see it all. This line is called a comment. It can also be used to leave remarks to yourself about what you did or what you must do.
<!-- Welcome to Dr. Brown's Pet Shop. We offer a full line of health care products for your pets. --> (notice the "<!-- -->"). This is where your commentary goes.
How to change the background color?
If you are getting tired of looking at the default (gray) background, you can always add a little color to your page. The color code goes in the <BODY> tag at the top of your page like this...
<BODY bgcolor="#00FC00">
The number ("#00FC00") in the BGCOLOR tag is called a hexadecimal number and will give a brilliant green color to the background of your page. To add a background image, use this...
<BODY background="My_Image.gif">
What do I need to write HTML?
In order to begin writing HTML, you will need a copy of Notepad, a standard word-processor or any HTML editor (many good ones are available for free). Most HTML editors will allow you to write standard HTML and even preview the results. Some will go even further, allowing you to insert special tags and HTML code. Beyond that point, you will need to learn HTML yourself if you really want to become a successful webmaster and do all of the cool stuff you see from time to time as you are browsing around in the infinite vastness of cyberspace. In this site, I will provide elements and tags not found in most editors (as well as all of the common ones) along with numerous "live" examples and an almost fanatical obsession with stretching hypertext to it's outer limits and beyond by providing instances of some of the extraordinary things that can be done with this fascinating language. You will need one of these to get started and so that you have an environment to do your coding in. Remember to save all files with either an .HTML or .HTM extension.
How to center text?Text is important when creating a page of any kind but did you know that there is a lot more to it than just letters and numbers? With the right text tags, you can create professional looking documents that stand out and speak volumes about your site and what it has to offer. This can be important when displaying an "online resume" or trying to impress a potential client. There are also a number of neat little tricks that can be done with text. Let's start with a simple sentence to kick this thing off (well, three sentences actually)... 1# The dog jumped over the fence 2# The dog jumped over the fence 3# The dog jumped over the fence
In the example above I used the <P ALIGN=""> tag to tell the text how I wanted it to position itself on our page. You may also want to use the <CENTER> and </CENTER> tags whenever you want to center text or images on a page. For example: <CENTER>Can Freddy come out and play?</CENTER>.
How to make line breaks and returns?If you use a WYSIWYG (What You See Is What You Get) HTML editor to hammer out your code, you'll notice that after you finish a line of text, there is an automatic "carriage return" (just like on a typewriter) and the cursor jumps down to the next line. If you were to stop typing at this point and view the code being generated behind the scenes, you would see that a <P> was automatically inserted into the code the moment the cursor jumped to the next line. The only problem with this is that now there is a big gap between each line of text. Solution? Simply replace each <P> with a <BR> tag. Have a look at the two examples below.
How to make a list?There may be times when we want a bulleted or numbered list to neatly organize and display something such as a table of contents or a list of links. Below, is a numbered list...
And here is a bulleted list...
Some additional bulleted list tags...
What styles can I use?There are a variety of different type styles that may be used. Here they are...
How to add color to text?Adding color to text can liven it up a bit and make the overall look and feel of your page more attractive to visitors. Notice that we're using the <FONT> tag for this. Now, let's add some color...
Below are the tags used to control how the fonts will appear
and the way text is displayed. When using fonts, be
sure to only use the default ones so that they will be visible to
everyone. If you try to use ones that you've downloaded, it
simply won't work and even if it did, no one but you would be
able to view them anyway. In other words, the following is a
no-no: <FONT FACE="MyCoolPigHeadFont">Hey, why can't anyone else see my text?</FONT>.
You can even use styles in combination with each other. Here's an example of how to use three different styles to produce your own font style... Neat text And here is how I did it... <FONT COLOR="#0080ff"><B><FONT face="Verdana, Arial, Times" size=2><BIG><BIG><BIG><BIG>Neat text</BIG></BIG></BIG></BIG> </FONT></B></FONT> Using colored characters Did you know that you can also use color with ISO latin symbols? Anyway, here's an example of how it's done...
Just remember that you can change the color values, font size and ISO numbers to your heart's content...get fancy!
How to make horizontal rules?Sometimes it looks better if you use a horizontal rule to divide text or images on your page. However, this can also mean having to bring up your image editor, drawing the image (divider) and then uploading it to your server. If the images are fairly large they can take awhile to load. The good news is that there is a much quicker and easier way to do this...it's called a horizontal rule and you can do more with it than you might think! Below is a horizontal rule... And here is the code... <HR WIDTH="200"> But wait, it gets even better... And just think...you spent all that time drawing little lines in some paint program. Here's the code for this one and an explanation of the tags... <HR COLOR="#ff0000" WIDTH="200" SIZE="10" NOSHADE>
How do I control the layout of my page?This article should probably have gone in the "Tables" section of this site but since it deals with the subject of controlling text within tables, I'll just stick it here. Sometimes, when you start typing text into a table consisting of more than a single column and then start typing text into the next column of the table, the text in the first column will advance downward while the text in the second column will scroll upward and pretty soon it turns into a juggling act trying to get both columns of text aligned properly so it all looks somewhat respectable. This usually happens when one column contains more text than the other. Take a look at the example below and you'll see what I mean...
Enter the VALIGN tags. These tags allow you to determine how the text will appear in the cells of your table and give it a more professional appearance. Look at the second example below to see how much of an improvement these little tags made.
You can also force text to go to the bottom of your table cells. Lets examine the tags that allow us to do this. Remember, the VALIGN tag gets inserted into the <TD> tag like this: <TD VALIGN="TOP">Your text goes in this space</TD>
What is a link?
A link is usually a text description, image, or other entity that, when clicked, will take the visitor to another page or allow him to download a file.
Let's begin by creating a simple link. As a demonstration, I'll use here the feedback page from this site, so let's create a link to it so that when somebody clicks on the link, he will be taken to that page...ready?
Click here to visit my feedback page!
And here is the HTML code I used to create this link...
<A HREF="feedback.html">Click here to visit my feedback
page!</A>
Linking images
This time I'll replace the textual description with an image so that when a visitor clicks on the image he will be taken to another page or a bigger version of the same image...
and the code... <A HREF="feedback.html"><IMG SRC="samples/envelope.gif" width="61" height="31"></A>
This time, I used the <A> tag surrounding the <IMG> tag to let the browser know that I wanted this image to be linked to another page (or perhaps a file).
Now, I'll nuke the border!
Yes, now I'll get rid of that ugly blue border around the image...
and again, the code... <A HREF="feedback.html"><IMG SRC="samples/envelope.gif" width="61" height="31" border="0"></A>
Here, I just made the BORDER equal to "0".
How do I display an image?
Now, here is how you would display a simple image on your page...
When displaying an image, it is important to include the HEIGHT and WIDTH attributes of the image since it allows it to load in your visitor's browser much faster. You can find out the size of your image by going into a program like IrfanView and opening the file. Here is the code...
<IMG SRC="samples/raptor.gif" WIDTH="110" HEIGHT="75">
Notice the <IMG> tag. The IMG simply tells the browser that an image will be going here and the SRC denotes the location of the image. This is followed by the address (where the image is stored) and the HEIGHT and WIDTH of the image.
Adding alternative information to a linked image
Now we're going to add information to the linked image so that while it is loading it will give the visitor something to look at and hopefully hold their attention a little longer so they won't leave before it's finished coming up. Alternative information is also important if you are designing your site for the handicapped since most screen-readers will not recognize or be able to display images.
You'll notice that when you hover the cursor over the image above, a small window appears (neat, huh?). This is an information window and provides your visitor with something to read while the image is being loaded. Below is the code I used for this little trick...
<IMG SRC="samples/raptor.gif" WIDTH="110" HEIGHT="75" ALT="This is a raptor, an animal extinguished many million years ago">
Notice the ALT tag? This is where the line or two of text describing your link go. Information windows can contain only a few lines of text or they can contain many lines of text.
How to change the appearance of links?
In the BODY tag you can include these attributes:
For example:
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000">
Non-underlined links
Here is another neat little trick. This one causes a single link on your page to be non-underlined...
And the code...
<a href="feedback.html" style= "text-decoration:
none">Click here!</a>
All links non-underlined
And here is the code you will need to make all of the links on your page non-underlined (this line of code gets inserted between the <HEAD> and </HEAD> tags):
<STYLE> <!-- A{text-decoration:none} -->
</STYLE>
Creating a mouseOver link
Well, it's not exactly HTML but I decided to create a mouseOver anyway since this is something that HTML just can't do. The link below will turn red when you place your cursor over it, and green when the cursor leaves it.
Ok, here is the code for this one (you can change the color values to anything you want)...
<a href="feedback.html"><font onMouseOver=
"this.style.color='#ff0000'" onMouseOut=
"this.style.color='#00ff00'">This is a mouseOver
link!</font></a>
I cannot get here into the "how's" and "why's" of JavaScript, so if you like the idea just copy the code and enjoy.
Creating a message in the status bar
This is the code for a link that will cause a message to appear in the status bar when your cursor is positioned over it. I chose not to include a working demo because a status bar message can interfere with the normal messages that appear there and some people find this annoying.
<A HREF="http://www.widgets.com/anypage.html"
ONMOUSEOVER="window.status='This is a status bar message...add your
own!' ; return true">Watch the status bar...</A>
Of course, be sure to replace "www.widgets.com/anypage.html" with a real address and change the status bar message in this code.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
