Tuesday, May 26, 2009

Some Extra Text Tags

. Tuesday, May 26, 2009
0 komentar

A few other tags to try out
Note: Many of these things can now be done using Cascading Style Sheets. These tags are only valid in older versions of the HTML specification.

There are a few more tags you might like to try while you are creating your pages. The tags I will be talking about in this section are <sub>, <sup>, <pre>, <nobr>, <wbr />, and the Netscape only <blink> tag.

<sub> and <sup>
These tags are used to place a number or words slightly above or below your normal text. The <sub> tag works like this:
Area<sub>1</sub>
The result is this:
Area1
And the <sup> tag allows you to use exponents if you need to:
x<sup>2</sup> + y<sup>2</sup> = 0
And this gives you:
x2 + y2 = 0
These two tags are most useful if you are writing mathematical equations and such on your page, but there are other times you may wish to use them.

The <pre> Tag
The <pre> tag is used when you want to keep the same amount of white space on your Web page as you have in your HTML code in your text editor. This may be useful when you have to post programming code. Here is an example:
<pre> x=1; y=2; if (x==1) y=2; </pre>
And this somewhat redundant code gives you this:
x=1;
y=2;
if (x==1)
y=2;
Notice how we didn't need to use <br /> or inside the <pre> tags. This can save you some headaches from writing in line breaks and spaces manually so often.

<nobr> and <wbr />
Any text you place between the <nobr> and the </nobr> tags will not break to the next line, even after reaching the end of someone's browser window.
Here is an example:

<nobr> I'll just keep writing like this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long time. </nobr>


When viewed on your Web page, this will be one really long line, like this:
I'll just keep writing like this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long time.

Unless you had a monitor with some pretty high resolution, you probably had to scroll to the right to see the end of that line. You can use the <wbr /> tag inside the nobr tags to force a line break if you want or need to do so, like this:
<nobr> I'll just keep writing like this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long <wbr /> long long long long long long long long long long long long long long long long long long long long long long long long long long long long time. </nobr>

Now you will have two lines that are not quite as long (though still pretty long in 640x480):
I'll just keep writing like this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long time.

The <blink> Tag
Yes, this is the tag everyone has been complaining about. If you are using Netscape (an older version) you can see the following reason why viewers get annoyed by this tag:
LOOK AT ME NOW!!!!!!

If you have IE, you won't see the text blink, but you can get the general idea. Actually, if the tag is used in a better way, it can help point out important things you want people to see. Just avoid the +10 font size... Here is an example:
This rule is <blink>very</blink> important!
This gives you the following:
This rule is very important!
Just use your own discretion when placing blinking text on your page, and remember it will only blink if your viewer is using Netscape (I think 2.02 - 4).
Well, that does it for this section. So, on we go to: HTML Comments.
www.pagesource.com

Klik disini untuk melanjutkan »»

Adding Images to Your Page

.
0 komentar

How to place images on 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:
<img src="image.gif" />
The img stands for image. The src stands for source. The source of the image is going to be the Web address of the image. Most often, you will be able to just type the filename of the image here, like this:
<img src="image.gif" />
The filename does not have to end with .gif. You could also use a .jpg file as well. These are two of the 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:
<img src="http://www.disney.com/pictures/image.jpg" />
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 "next.jpg". The address for the image is: http://www.pageresource.com/images/next.jpg. If my image and HTML file were in the same directory, I would type:
<img src="next.jpg" />
Otherwise, I would use the full Internet address, like this:
<img src="http://www.pageresource.com/images/next.jpg" />
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:
<center><img src="http://www.pageresource.com/images/next.jpg" /></center>
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 TextUsing an Image as a LinkUsing a Background ImageResizing an ImageUsing Image "alt" Attributes
If you would like to move on, let's go to the next section,
Some More Text Tags.
www.pagesource.com

Klik disini untuk melanjutkan »»

Linking to Other Pages

.
0 komentar

How to link to other pages in HTML
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:
<a href="http://www.someplace.com">Display Text</a>
The a stands for anchor, and the href="" is asking for a location to link to. The </a>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.pageresource.com, so to create a link to us, place this command on the page where you would like the link to show up:
<a href="http://www.pageresource.com">The Web Design Resource</a>
It will show up on your page like this:
The Web Design Resource
See how the text was colored 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.pageresource.com/html/linking.htm. To create the link, insert this url into the link tag:
<a href="http://www.pageresource.com/html/linking.htm">Linking to Other Pages</a>
Which gives us this link:
Linking to Other Pages
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:
<a href="linking.htm">Linking to Other Pages</a>
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:
Adding Images to your Page.
www.pagesource.com

Klik disini untuk melanjutkan »»

Special Characters

.
0 komentar

How to use special characters in HTML
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 © 1999 by me!
This page Copyright © 1999 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. Yes, you now get to learn the wonderful art of
Linking!
www.pagesource.com

Klik disini untuk melanjutkan »»

Monday, May 25, 2009

Keeping the Worms Away. How to Minimize Virus Threats.

. Monday, May 25, 2009
0 komentar

by Bobette Kyle

The battle against computer viruses and worms has gone on since the dawn of the virtual age. Over time, worms and viruses are evolving and the numbers are growing.

According to the Computer Knowledge Website "there were over 50,000 computer viruses in 2000 and that number was then and still is growing rapidly. Sophos, in a print ad in June 2005 claims 'over 103,000 viruses.'"

Technical experts and risk specialists understand that worm attacks and viruses are here to stay, to the extent that predicting and preempting attacks has become an industry. For example, McAffee publishes an ongoing virus information calendar where you can track expected future attacks by day or view virus/worm attack history. By methods such as this, McAffee and other security companies protect their customers by trying to stay a step ahead of new variants.
Worms can directly and adversely affect you in many ways.

No small business or individual email user is exempt from exposure to worm / virus attacks. As the number and variations of viruses grow, so does the risk to any email user.

There are several ways worms and viruses can adversely affect you. A few of these are:

1. Email worms can "spoof" your email address (put your address as the sender of infected emails), making it look like you are sending spam and viruses even though you are not.
2. They can infiltrate your systems, sending out infected emails from your computer.
3. The more malicious viruses can erase your hard drive or completely disable your computer systems.
4. Some may install software on your system (remote access trojans - RATs) that allows others to access, steal, and/or change your computer files.

If you are a list owner, this deluge of worms could tarnish your reputation with some people who do not understand spoofing. Since your email address is likely to be in a lot of email address books, your address will invariably show up as the "from" address in many infected emails.

This results in lost productivity as you sift through unwanted email, update protection systems, shore up security holes, and repair/head off other damage.
How Worm Viruses Work

As technology evolves, viruses evolve as well. At first, most viruses spread through email attachments. Now - with the proliferation of broadband "always on" connections, file downloads, instant messaging, Bluetooth-enabled mobile devices and other communications technologies - the ways worms and viruses spread have evolved as well. Still, email viruses cause the most overall problems. In December 2005, for example, the Sober-Z virus accounted for 79% of all viruses (as reported by Sophos).

In general, a worm virus is a program with the ability to spread itself through email. When the worm infects a machine, it spreads itself by sending infected email to addresses in the computer's email address book. The worm also uses one of the addresses as the "from" address, making it appear to recipients that the email came from someone else.

When a worm or virus that spreads through email infects a machine, it sends infected email to addresses in the computer's email address book. Many worms also use one of the addresses as the "from" address, making it appear to recipients that the email came from someone else.

Some worms also deposit a bit of code on your computer, presumably designed to carry out some future maliciousness.

It is all more complicated than this, of course, but I'll let the technical experts explain the nuances. Here are some recent articles about worm viruses:

Data Security Summary - January to June 2005, from F-Secure Corporation, explains all types of computer security risks, including viruses.

RATs: Remote Access Trojans and how to help avoid them from Microsoft.

Top ten viruses and hoaxes reported to Sophos in December 2005
What you can do.

Short of abandoning email and staying away from the Internet, we are all at some risk. We can, however, minimize risk by arming ourselves with (a) knowledge, (b) updated protection / security systems, and (c) communication. Also, of course, don't open unknown email attachments.

Knowledge

Sign up for email alerts through a trusted security company or monitor alert pages often. Also, make it a habit to read up on the most prevalent attacks. This way, you can recognize the signs of attack.

Here are links to three comprehensive virus/security sites:

F-Secure Security Information Center, includes information about viruses, hoaxes and other security risks.

Symantec Security Alert, sends email alerts of high-level threats, how to remove/detect viruses, etc. Also has a Security Response section on the site at http://securityresponse.symantec.com/ where you can read about current viruses and check your computer for vulnerabilities.

McAfee Security sends out alerts and breaking news. Also posts news and current threats on the site.

Updated Protection and Security Systems

In today's email and Internet environment, protection systems are no longer optional. Each computer with Internet/network/email access should have a good anti-virus and Internet security system installed and updated regularly (most have a feature that will automatically check for updates).

Some attacks exploit weaknesses in Microsoft software, so keep your Windows software up-to-date as well. Here is a link:

Microsoft's Windows Update center checks the software on your Windows computer then gives you a chance to download critical updates.

There are many firewall and anti-virus programs out there. Two popular choices are:

Norton Internet Security includes a firewall, virus protection, and other Internet security functions.

McAfee pcsecuritysuite protects your computer against viruses, hackers, and identity thieves.

Communication

Explain to others the importance of secure, protected systems and guide them to more information. If you are a writer or publisher, remind your readers to stay up-to-date and knowledgeable.

Virus and worm attacks are here to stay. That does not mean, however, that they must be detrimental to your business. Diligently follow these three steps and you will be prepared for the next wave of new viruses.

Klik disini untuk melanjutkan »»

How Computer Viruses Work

.
0 komentar

by Marshall Brain
Strange as it may sound, the computer virus is something of an Information Age marvel. On one hand, viruses show us how vulnerable we are a properly engineered virus can have a devastating effect, disrupting productivity and doing billions of dollars in damages. On the other hand, they show us how sophisticated and interconnected human beings have become.
For example, experts estimate that the Mydoom worm infected approximately a quarter million computers in a single day in January 2004. Back in March 1999, the Melissa virus was so powerful that it forced Microsoft and a number of other very large companies to completely turn off their e-mail systems until the virus could be contained. The ILOVEYOU virus in 2000 had a similarly devastating effect. In January 2007, a worm called Storm appeared by October, experts believed up to 50 million computers were infected. That's pretty impressive when you consider that many viruses are incredibly simple.
When you listen to the news, you hear about many different forms of electronic infection. The most common are:
Viruses
A virus is a small piece of software that piggybacks on real programs. For example, a virus might attach itself to a program such as a spreadsheet program. Each time the spreadsheet program runs, the virus runs, too, and it has the chance to reproduce (by attaching to other programs) or wreak havoc.
E-mail viruses
An e-mail virus travels as an attachment to e-mail messages, and usually replicates itself by automatically mailing itself to dozens of people in the victim's e-mail address book. Some e-mail viruses don't even require a double-click, they launch when you view the infected message in the preview pane of your e-mail software [source: Johnson].
Trojan horses
A Trojan horse is simply a computer program. The program claims to do one thing (it may claim to be a game) but instead does damage when you run it (it may erase your hard disk). Trojan horses have no way to replicate automatically.
Worms
A worm is a small piece of software that uses computer networks and security holes to replicate itself. A copy of the worm scans the network for another machine that has a specific security hole. It copies itself to the new machine using the security hole, and then starts replicating from there, as well.

Klik disini untuk melanjutkan »»

Manipulating Font Size and Color

.
0 komentar

How to change font sizes and colors
Note: A better method of changing font sizes and colors is the use of Cascading Style Sheets.
Okay, now we want to see how to change the font size. This is done with the following tag:
<font size="x">text to change</font>
"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:
<font size="+2">I'm a big sentence now!</font>
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:
<font size="-2">Hey, I'm Small!</font>
Will give us this:
Hey, I'm Small!
Here are some more size examples for you:
<font size="+4">Hey There</font> Hey There
<font size="+3">Hey There</font> Hey There
<font size="+2">Hey There</font> Hey There
<font size="+1">Hey There</font> Hey There
<font size="-1">Hey There</font> Hey There
<font size="-2">Hey There</font> Hey There
<font size="-3">Can you read this?</font> 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:
<font color="color">
We replace the word color with a color name or the hexadecimal color value. Let's do one using the color name to begin:
<font color="red">I'm red!</font> I'm red!
Now let's use the hexadecimal value for red. The hexadecimal representation begins with a # sign and is followed by six letters and/or numbers. Here is the example:
<font color="#FF0000">I'm red!</font> I'm red!
That is a # sign, two F's and four zeros. Usually it's easier to remember 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:
<font size="+2"><font color="gold">I am gold!</font></font> 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:
<font size="+2" color="gold">I am gold!</font> 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: Special Characters: The extra space, copyright symbol, and more.
www.pagesource.com

Klik disini untuk melanjutkan »»

Headings and Paragraphs

.
0 komentar

Using Headings, Paragraphs, and Line Breaks
Let's start out with heading tags. These tags are good for creating titles or section headings. Here are some examples:
<h1>Large Heading!</h1> will give us:
Large Heading!<h2>Heading 2</h2>
Heading 2<h3>Heading 3</h3>
Heading 3<h4>Getting Small</h4>
Getting Small<h5>Smaller Still...</h5>
Smaller Still...<h6>You must have good vision...</h6>
You must have good vision...Okay, I think you get the idea here. Now let's move on to a line break. The tag for a line break is <br />. When you insert this tag in your document, the contents will go to the next line. The <br /> tag does not need a closing tag afterward. Here is an example:
End this line now!!<br />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 wanta new line.
This gives us:
Hello, I want a new line.
To make the text move to the next line, use your <br /> tag from above:
Hello,<br />I want<br />a new line.
Now this will do what we wanted it to do:
Hello, I want a new line.
Now, let's move on to the paragraph tag, <p>. This tag will skip a vertical space after going to the next line, as though you had typed <br /> 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.<br />This is the next line.<p>This is a new paragraph. Is this cool or what?</p>
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?
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, Manipulating Font Size and Color.
www.pagesource.com

Klik disini untuk melanjutkan »»

The Wonderful Text Tags

.
0 komentar

How to use HTML tags to manipulate your text
Okay, it's time to start making our text appear in different ways. Let's start by giving you some tags to work with:
<b></b> This is the tag for bold text. Example: <b>Howdy</b> This will show up on your page like this: Howdy
Here are a few more to start working with:
<u></u> Underline text <u>Underline Me!</u> Underline Me!
<i></i> Italics <i>Isn't this fun?</i> Isn't this fun?
<strike></strike> <strike>You're Out!</strike> You're Out!
<center></center> <center>This centers text on the page</center>
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:
<b><i>I am bold AND Italic, which makes me cool!</i></b>
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 if you want to validate your HTML code). Here's another way to look at working inside out. I could write the HTML this way:
<b> <i> I am bold AND Italic, which makes me cool! </i> </b>
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!
<b><i><u>Would you stop tagging me!</b></i></u>
This will give us:
Would you stop tagging me!
But this:
<u><i><b>Would you stop</b></i>tagging me!</u>
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 <center> tag. Anything you place between the <center> and </center> tags will be centered on the page. Here is an example:
<center>I'm in the middle!</center>
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:
<center><b><i>Look at me now!</i></b></center>
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, where you will learn about headings, paragraphs, and line breaks.
www.pagesource.com

Klik disini untuk melanjutkan »»

Tuesday, May 5, 2009

What's Google AdSense?

. Tuesday, May 5, 2009
0 komentar

by: Diane Nassy

AdSense may be one of the fastest and easiest ways to monetize traffic to your web site whether you have products or services for sale, or you simply provide free content to your visitors.

Simply stated, Google AdSense enables website operators to place some code on their site that connects to Google’s ad server content database and pulls keyword-relevant advertising onto the web pages. The webmaster gets paid a percentage of the fee that Google receives from the advertiser every time a visitor clicks on an ad. There is no charge for the webmaster to participate in AdSense. All costs are covered by the advertiser who participates in the AdSense sister program called AdWords.

Google’s sends out digital “robots” which use proprietary algorithms to parse the host web page and analyze the content in an effort to determine what keywords are relevant. It reports its findings back to Google’s ad server which then serves ads matching those keywords. Given that the entire process is automated, the “ad robots” do a pretty good job of getting the advertising content right most of the time.

The History of Google AdSense

Google AdSense has its roots in the old “Google Content-Targeted Advertising” program which they introduced back in March of 2003. Although this program was similar in concept to AdSense, there was no automated way of participating. Each webmaster negotiated a deal directly with Google, and websites that served less than 20 million page views per month were not welcome to participate.

As Google grew, they began to see how much money they were leaving on the table by excluding the smaller sites, which greatly outnumbered the sites serving over 20 million hits that were willing to serve other people’s ads. Their answer to that problem was AdSense which has no minimum traffic requirements and is open to all sites meeting Google’s content and decency requirements.

How much can you make running Google AdSense?

The answer to that question depends upon three factors:

1.How much traffic your site draws
2.How many visitors click on your ads
3.How much those ads pay per generated click

With some ads paying as much as $5 or more, it’s possible that you can generate a serious income with AdSense. There are relatively well documented cases of some people earning as much as $500 per DAY and more. Numbers like that are rare exceptions however. Even so, there is no reason why you can’t earn somewhere around $1,000 per month, or more, once you get the hang of it.

How to get started using Google AdSense

Make a visit to Google’s AdSense Site (https://www.google.com/adsense/) and sign up. Make sure that you read their Acceptable Use Policy and that you follow their content requirements. Google has their own “AdSense Police” who will have no problem booting you out of the program if you fail to walk the line.

Using Google AdSense on your site is like collecting free money. There’s no reason not to do it and potentially thousands of dollars worth of reasons to do it.

Klik disini untuk melanjutkan »»

HTML: Basic Format

.
0 komentar

Now we are able to start learning about HTML tags. An HTML 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, <u>. 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 be the same as the opening tag, but will have a forward slash before the command, like this: </u>. So, if you would like to underline the phrase "HTML Rules!", you would write the following in your text editor:

<u>HTML Rules!<u>

The result of this would be:

HTML Rules!

In the past, not all tags would require a closing tag. An example would be the image tag, which places an image on the page. It looks like this:

<img src="myimage.gif">

Other examples would be a line break: <br> and the horizontal rule: <hr>. These are called empty tags, which do not have a closing tag. With the new coding standards in place, these need to be closed. Since they do not have closing tags, they are closed with a forward slash in the opening tag, like this:

<img src="myimage.gif" />
<br />
<hr />

Also, in the past you could capitalize the tags.

was the same as

. With the new standards, all HTML tags are supposed to be in lowercase, so this is what we will use in the examples here.

You can use as much space between things as you like. So:

<u> Underline Me! </u>

Is the same as:

<u>Underline Me!</u>

Is the same as:

<u>
Underline Me!
</u>

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.)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>I Love HTML</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
Everything displayed on your page will be in here.
</body>
</html>

Okay, to make sense of this, we'll go through the tags. The first one we see declares the doctype (for more on this, see the explanation at W3Schools). This document uses XHTML Transitional. The next tag we see is the opening <html>tag (which is the last tag to be closed at the end of the document).

The next tag we see is the <head> 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 </HEAD> tag. At this time, the only part of the HEAD section we will deal with is the title (meta tags are explained in the meta tag tutorial), which brings us to the next tag.

The <title> tag allows you to create a title for your page. The title is only used for bookmarks, search engines, and as the name of the browser window. It will not show up on your Web page unless you type it in the body section (explained below). To end your title, use the </title> tag. For instance, in the example, the title is "I Love HTML" (That's not true all the time, though).

The <body> 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 </body>. 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. Let's go to Text Tags.

www.pagesource.com

Klik disini untuk melanjutkan »»

Monday, May 4, 2009

Using Your Materials

. Monday, May 4, 2009
0 komentar

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:
<html>
<head>
<title>Test Page
</title>
</head>
<body> Hi there, you have just written your first Web page!
</body>
</html>
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.htm
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.htm.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.html" 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.htm
If the file is on a floppy disk, you can type
a:\test.htm
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 some versions of 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 use HTML to build a Web page! Let's move on to Basic Formatting.
source :pagesource.com

Klik disini untuk melanjutkan »»
 
Namablogkamu is proudly powered by Blogger.com | Template by o-om.com