Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Monday, June 8, 2009

Using a Background Image

Diposkan oleh Hart di 6:26 PM . Monday, June 8, 2009
0 komentar
Label:

How to add a background image to your page
Note: These effects can now all be achieved using Cascading Style Sheets.
To add a background image to your page, you will need to locate the <body> tag in your document. When you have found it, you may see just the word body, or you may see a string of commands afterward. It may look something like this:
<body bgcolor="#FFFFFF" text="#000000">
What we are going to do is add a command after the word body. So, go to the end of the word body, skip a space, and type the following:
background=""
Now your body tag should look something like this (and may have more commands):
<body background="">
Now, we are going to place the url of the image inside the quotation marks. So, if the image I want to use is at http://www.mysite.com/image1.gif, I would insert this into the command, like this:
<body background="http://www.mysite.com/image1.gif">
Your image should have the file extension .gif or .jpg . If not, you will want to covert it to one of these file types. One program that will do this is Paint Shop Pro, which is available as shareware from JASC.
Now, if your image file is located in the same directory as your HTML file, you can just type the filename of the image rather than the full url. So, if we want image2.gif to be the background image, and it is in the same directory as the page we are editing, we can type the command this way:
<body background="image2.gif">
Now, as a real example, I will use an image from my server as a background on a page. The name of the image is "next.jpg". The url for the image is http://www.pageresource.com/images/next.jpg. So, to use this as a background, I would type in this:
<body background="http://www.pageresource.com/images/next.jpg">
Now, if I put an HTML file in my "images" directory, I could use the image by typing in just the filename, like this:
<body background="next.jpg">
Okay, now you can use your own image as a background... so put a picture of yourself as a background. That's always kind of fun...
Well then, let's move on to the next section, Resizing Images.
pagesource.com

Klik disini untuk melanjutkan »»

Using a Background Color

Diposkan oleh Hart di 6:21 PM .
0 komentar
Label:

Add or change the background color on your page
Note: These effects can now all be achieved using Cascading Style Sheets.
If you want to use a background color on your page, you will need to begin by finding the <body> tag. Once you have found the tag, look for a command after the word body that says bgcolor="color". It may look like this:
<body bgcolor="gray">
Or the tag may have more commands inside and use hex codes, like this:
<body text="#000000" link="#A6CAF0" bgcolor="#808080">
And of course, the command may not be there at all. If this is the case, add it by placing a space after the word body and then type the command, like this:
<body bgcolor="gray" text="#000000" link="#A6CAF0">
Or if you don't have any other commands, just add it in like this:
<body bgcolor="gray">
To change the background color, replace the word gray inside the quote marks with a color name or a color hex code. For a list of some common color names and hex codes, click here.
So, if you wanted to change the background color to green, you would type:
<body bgcolor="green">
Or you could use the hex code for green:
<body bgcolor="#008000">
After doing this, your page will have a green background. Beautiful! Now just use any color you like in the command, and add color your pages!
All right, we only have one more body tag section left! So let's go on to the next section: Using a Background Image.
pagesource.com

Klik disini untuk melanjutkan »»

Changing the Link Color

Diposkan oleh Hart di 6:18 PM .
0 komentar
Label:

How to change the default link color on your page
Note: These effects can now all be achieved using Cascading Style Sheets.
If you want to change the link color on your page, you will need to begin by finding the <body> tag. Now look for a command after the word body that says link="color". It would look like this:
<body link="blue">
Or the tag might have some other commands as well:
<body bgcolor="#000000" text="#FFFFFF" link="#0000FF">
You may also just have the word body with nothing else there. If so, add the command after the word body, with a space between the two, like this:
<body link="blue">
Now, to change the link color, you replace the word blue inside the quotes with a different color name or hex code. For a list of some common color names and hex codes, click here.
So, if you would like to change the link color to red, you would type the following:
<body link="red">
Or using the hex code:
<body link="#FF0000">
Now, all the links on your page will be colored red rather than blue. You can also do the same things for active and visited links by adding or editing their commands. The commands are:
alink="color" For the active link color vlink="color" For the visited link color
You might have:
<body link="blue" alink="blue" vlink="violet">
To change the other colors, do the same as you did for the link color. If you need to add the commands, go ahead. Just place a space between each command, and add your colors!
Now we are going to move on to the background color command, which is very similar to the link commands we just finished. So, let's go on to Using a Background Color.
pagesource.com

Klik disini untuk melanjutkan »»

Changing the Default Text Color

Diposkan oleh Hart di 5:41 PM .
0 komentar
Label:

How to change the default font color on your page
Note: These effects can now all be achieved using Cascading Style Sheets.
Okay, to change your default text color in your HTML page, you will need to find your body tag. Now, look for the phrase text="" somewhere after the word body. You may have something like this:
<body text="black">
You may also see a weird number/letter combination, like this:
<body text="#000000">
Of course, you may not see either of these, or you may be creating the page from scratch. If you don't have the extra command yet, add it to your body tag like one of the examples above. If you have other commands, add this one onto the end, leaving a space after the previous command, like this:
<body bgcolor="blue" text="black">
Now, if you'd like to change the color, replace the black between the quote marks with a color name or hex code. For a list of some common color names and hex codes, click here.
So, if you want to change the text color to red, you could use one of the following:
Using a color name:
<body text="red" >
Or using a hex code:
<body text="#FF0000">
Now, any text you type inside the body tags will show up as your new color in the Web browser. So, now you may want to change the link color as well. Well, that's coming up in the next section: Changing the Link Color.
pagesource.com

Klik disini untuk melanjutkan »»

Thursday, June 4, 2009

Using <body> Tag Attributes

Diposkan oleh Hart di 6:00 PM . Thursday, June 4, 2009
0 komentar
Label:

How to use <body> tag attributes to enhance your page
Note: These effects can now all be achieved using Cascading Style Sheets.
When you create a Web page, you can change several things in the body of your document by adding extra commands to the <body> tag. Here is what a body tag with several additions would look like:
<body bgcolor="black" text="red" link="yellow" alink="orange" vlink="white" background="image.gif">
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 explanation 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
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
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
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
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
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). So let's move on to Changing the Default Text Color
pagesource.com

Klik disini untuk melanjutkan »»

Using HTML Lists

Diposkan oleh Hart di 5:35 PM .
0 komentar
Label:

How to add an HTML list to your page
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 <ul>, and the closing tag is... yep, you guessed it... </ul>. Now, to set off each item in your list, you use the <li> tag, followed by your text, then close each list item with the </li> tag. Here is a sample list with two list items:
<ul>
<li>I am item one</li>
<li>I am item two</li>
</ul>
This will give us the bulleted list below:
•I am item one
•I am item two
Notice the list is indented somewhat from the rest of the text.
You can also use the type attribute to specify the type of bullets to be used in the list. The possible types are listed below:
Type Description
disc The default. Uses a plain colored-in disc.
circle Uses a hollow circle.
square Uses a colored-in square.
So, if you want to use the square type of bullet, you could do the following:
<ul type="disc">
<li>Disc 1</li>
<li>Disc 2</li>
</ul>
Which will give you the following list:
οDisc 1
οDisc 2
You can also use an ordered list in the same way you use the unordered list. Instead of using <ul></ul>, you would use <ol></ol>, like this:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
This gives you a numbered list rather than the bulleted list:
1.Item 1
2.Item 2
3.Item 3
You can use the type attribute to specify the type of numbering/lettering system to be used in the ordered list. The types are listed below:
Type Description
1 The default. Uses Arabic numerals.
I Uses uppercase Roman numerals.
i Uses lowercase Roman numerals.
A Uses uppercase letters.
a Uses lowercase letters.
So, if you want to use uppercase Roman numerals, you could do the following:
<ol type="I">
<li>Roman I</li>
<li>Roman II</li>
</ol>
Which will give you the following list:
I. Roman I
II. Roman II
Well, that does it for HTML lists, so lets go on to the next section: Using the Body Tag Attributes.

Klik disini untuk melanjutkan »»

Tuesday, June 2, 2009

Adding HTML Comments

Diposkan oleh Hart di 6:22 PM . Tuesday, June 2, 2009
0 komentar
Label:

Using comments in your HTML code
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 exclamation point (!) and two dashes (--). After this, you type in your comments. To end the comment, you use two dashes (--) followed directly by a greater than sign (>).
<!-- I am a comment. I feel invisible though. -->
You can comment on multiple lines, just be sure you remember to end the comment!
<!--You can't see me....unless you look at the page source code. -->
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:
<!-- This image should be aligned to the right, and have alt text --> <img src="mypet.gif" align="right" alt="Look at my Kitty Cat!" />
Of course, you do not need to have a kitty cat to qualify!
Well, that does it for comments. So, let's move on to the next section: Using HTML Lists.

Klik disini untuk melanjutkan »»

Tuesday, May 26, 2009

Some Extra Text Tags

Diposkan oleh Hart di 6:23 PM . Tuesday, May 26, 2009
0 komentar
Label:

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

Diposkan oleh Hart di 6:20 PM .
0 komentar
Label:

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

Diposkan oleh Hart di 6:14 PM .
0 komentar
Label:

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

Diposkan oleh Hart di 6:13 PM .
0 komentar
Label:

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

Manipulating Font Size and Color

Diposkan oleh Hart di 6:04 PM . Monday, May 25, 2009
0 komentar
Label:

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

Diposkan oleh Hart di 5:54 PM .
0 komentar
Label:

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

Diposkan oleh Hart di 5:41 PM .
0 komentar
Label:

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

HTML: Basic Format

Diposkan oleh Hart di 5:42 PM . Tuesday, May 5, 2009
0 komentar
Label:

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

Diposkan oleh Hart di 5:50 PM . Monday, May 4, 2009
0 komentar
Label:

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 »»

Thursday, April 30, 2009

Getting Started With HTML

Diposkan oleh Hart di 5:58 PM . Thursday, April 30, 2009
0 komentar
Label:

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:
  1. You will need to have a computer that is running. Most likely you have this already, since you are reading this page.
  2. 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. To find Notepad/BBEdit on your computer:
    • In Windows 3.x, find the program group named "Accessories" and double click to open it.
      You should see an icon like this: Notepad Icon
      Open it by double clicking on the icon.
    • 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.
  3. You will need a Web browser of your choice. If you possibly can, use the latest version of Firefox, Netscape Navigator, or Microsoft Internet Explorer.
  4. 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, Using the Materials.

pageresource.com

Klik disini untuk melanjutkan »»
Subscribe to: Posts (Atom)
 
Namablogkamu is proudly powered by Blogger.com | Template by o-om.com