Thursday, September 28
Sunday, September 3
Geek News Central
Do you like hearing tech news? A great podcast that I really like is Geek News Central. You can grab the feed here.
Frames
What Are Frames?
The person, whose browser can't see frames, gets the message and the person who can read frames will get the frames page. You know, you could just put the HTML code in there rather than a message. That way, the user would see the page and never know. I hope this
has helped some, Happy Web Building!
Frames are kinda different from anything done in html in that you are not making a page in the traditional sense. What you are making is a template where you can put more than one page. Here's an example using TABLE commands:
| Page_1 | Page_2 |
Above is a simple table. Read about tables in the Tables Tutorial. In fact, I would strongly urge you to read it first. This will be easier to understand if you do so.
Now imagine that the table above is the entire viewing screen of your browser. Frames are used to do just that, break up the screen. Other pages go in the frame cells. Frames allow you to display more than one page at the same time, in the same screen.
If that table above were a browser screen using FRAME commands, there would be THREE pages involved: The frames page that breaks up the page and "Page1.htm", "Page2.htm". The frame commands that would create a page like the example above would look like this:
<HTML>
<HEAD>
<TITLE>First Frame Page</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
<FRAME SRC="PAGE_1.htm">
<FRAME SRC="PAGE_2.htm">
</FRAMESET>
</HTML>
Basic Frame Commands
Neat, huh? There's two pages displayed at the same time. You simply split the screen into two parts and placed a different page in each part. Look again at the HTML frames code above; here's what's going on: FRAMESET starts any frame page. It alerts the browser that FRAMES are going here. COLS denotes that I want columns. In this case, I want two; each 50% of the screen.
Can I do other percentages? Of course you can.
Just separate the percentages by commas and get it all to add up to 99% or 100%. 99%. You see, 33%, 33%, 33% adds to 99 and splits the screen three ways. The browser just distributes the final 1% over the three spaces.
FRAME SRC denotes the source of the frame. Frames read the way you do, from left to right. The first source offered will be the left. I only have two frame sections so I need only 2 sources.
</FRAMESET> ends the whole thing.
Some Quick Questions:
Q: Do I have to write pages skinny enough to fit in only one-half of the page frame?
A: No. The browser will cram it all in the page, but it sometimes looks smashed.
Q: What if my page is taller than the screen? How do I put in a vertical scroll bar?
A: The browser will do it for you.
Q: Can I get rows too?
A: Yup. Here's how you do it...
| Page1.htm |
| Page2.htm |
Here's the FRAMES code I'll use to do it:
<FRAMESET ROWS="75%,25%">
<FRAME SRC="Page1.htm">
<FRAME SRC="Page2.htm">
</FRAMESET>
What is Happening Here?
Remember that frames read left to right like you. I told the browser I wanted FRAMES by using the FRAMESET command. I then broke up the page horizonally, instead of vertically, as before.
Naming Cells and Using Targets
Now we know how to break up the screen through FRAMESET percentage commands. Now, to control page changes (links) in your frames. There are 3 basic methods of changing pages within frames:
- Click on a link in a frame -- just that frame changes.
- Click on a link in a frame -- another frame on the screen opens the page.
- Click on a link in a frame -- the frames disappear and you get a regular page.
Here's how you do all three!
Click on a link in a frame -- just that frame changes pages.
This is the default. It just happens without you doing anything extra. So, if that's all you want to do, you already know what you need. Browsers are programmed to handle frame clicks this way. The other two methods require a little more coding.
Click on a link in a frame -- another frame on the screen receives the information.
Now it's time to discuss 2 new commands, "NAME" and "TARGET." Let's say I'm doing a very simple frame page with only three frames. It'll look something like this:
| Frame1 |
| Frame2 |
| Frame3 |
In order for me to ask the browser to send info to another frame, I have to make a point of naming each of the frames. Name them whatever you wish, but keep it simple. Here's what the FRAMESET command will look like, with NAMES:
<FRAMESET>
<FRAMESET ROWS="50%, 50%">
<FRAME NAME="A" SRC="cell_1.htm">
<FRAME NAME="B" SRC="cell_2.htm">
<FRAME NAME="C" SRC="cell_3.htm">
</FRAMESET>
Okay, great... you've named the cells. See the "NAME=" attributes I put in the FRAME SRC tags above? Good. Now that you have the frames named, you can make any link inside of them targeted. Basically, you're going to add a TARGET attribute to the usual <A HREF>. Let's say this example link is in cell a above:
<A HREF="http://www.cbs.com" TARGET="C">
You can guess what will happen. When you click on the link, cell a will remain the same and cell c will open the page.
Leaving a Frames Page Completely
So now you can send information from any frame to any frame. The problem is you're still on the frames page -- and some of the larger pages are squished. Say you want to have someone click on a frame and have the link to pop up as its own page, in a full browser window. Well, you have to tell the browser to do that. Remember, the default is to have the page stay in the same frame. You need to TARGET the link to open by itself. Simple enough. Just follow the format above but make the TARGET, "_top." Note the underline before the word "top." It looks like this: <A HREF="http://www.cbs.com" TARGET="_top">
Encountering Non-Frames-Ready Browsers
That's a problem. Most browsers today accept frames, but many still don't, text-only browsers for example. The "frames-challenged" will get an error code if they attempt to log on to a page with frames. Either that or they'll get a blank page. There's a few ways around it.
- Don't do frames.
- Write a page without any frames and offer a choice to go to a framed page or to a non-framed page. That means you have to write two pages.
- Use <NOFRAME> and </NOFRAME> commands.
<FRAMESET COLS="50%,50%">
<NOFRAME>
The page you are attempting to enter uses frames. Click <A HREF="page.html">Here</A> for a non-frames version of this page.
</NOFRAME>
<FRAME SRC="PAGE_A.htm">
<FRAME SRC="PAGE_B.htm">
</FRAMESET>
</HTML>
The person, whose browser can't see frames, gets the message and the person who can read frames will get the frames page. You know, you could just put the HTML code in there rather than a message. That way, the user would see the page and never know. I hope this
has helped some, Happy Web Building!
Tables
In the next few minutes, I will show you how to do some simple stuff with tables!
Before I explain this table to you, here's the code I wrote to give me the table:
<TABLE>
<CAPTION>Veggies!</CAPTION>
<TR>
<TD>Green Beans</TD>
<TD>Corn</TD>
<TD>Cucumber</TD>
</TR>
<TR>
<TD>Lettuce</TD>
<TD>Squash</TD>
<TD>Celery</TD>
</TR>
<TR>
<TD>Onion</TD>
<TD>Asparagus</TD>
<TD>Carrots</TD>
</TR>
</TABLE>
Now, don't be worried by this. It looks strange, but look again. There's only 4 commands being used over & over. Here's what we use:
<TABLE> starts and ends the whole thing.
<CAPTION> and </CAPTION> places a caption over your table. The caption will be bolded and centered.
<TR> is used when you want a new Table Row to start. Notice that you need to end every table row with an </TR>. See that above?
<TD> denotes Table Data. This goes in front of every piece of information you want in a cell. You need to end every one that you open with a </TD>. See how it's done above.
And finally you finish with </TABLE>.
Now some more stuff to do with tables!
Here's the same table we worked with before but with more code added.
<TABLE CELLSPACING="1" CELLPADDING="1" BORDER="3">
<CAPTION>Veggies!</CAPTION>
<TR>
<TD>Green Beans</TD>
<TD>Corn</TD>
<TD>Cucumber</TD>
</TR>
<TR>
<TD>Lettuce</TD>
<TD>Squash</TD>
<TD>Celery</TD>
</TR>
<TR>
<TD>Onion</TD>
<TD>Asparagus</TD>
<TD>Carrots</TD>
</TR>
</TABLE>
Now, you're using the 3 new commands listed below :
CELLSPACING (all one word) gives the amount of space between cells.
CELLPADDING (all one word) gives the amount of space (or padding) between the cell border and the cell contents. Note the cell border walls tend to fill out. A higher number fills out more. Try a few different settings to see what looks best.
BORDER tells the table how large the border should be. This is in terms of pixels. Try different numbers. I happen to like the look of BORDER=3. BORDER=0 gets rid of the borders altogether.
Now, we'll go into more uses for the table, including, not only entire page design/layout, but color as well.
For starters, let's take a look at a regular table:
<TABLE BORDER="0">
<TR><TD>
</TD></TR></TABLE>
Now, if you want the background color of your whole table to be the same, you'd put the code within the start tag, like so:
<TABLE BGCOLOR="#FFFFFF">
Same thing with a background image:
<TABLE BACKGROUND="image.gif">
Now, if you just want to color one cell, you'd do this:
<TABLE BORDER="0">
<TR><TD BGCOLOR="#FFFFFF">
</TD></TR></TABLE>
Or, for a one celled background image:
<TD BACKGROUND="image.gif">
With the TD attributes, you can have every cell be a different color or background image. With this in mind, you can use tables in your whole page design & layout.
I hope this tables tutorial has been helpful. Happy table building!
Before I explain this table to you, here's the code I wrote to give me the table:
<TABLE>
<CAPTION>Veggies!</CAPTION>
<TR>
<TD>Green Beans</TD>
<TD>Corn</TD>
<TD>Cucumber</TD>
</TR>
<TR>
<TD>Lettuce</TD>
<TD>Squash</TD>
<TD>Celery</TD>
</TR>
<TR>
<TD>Onion</TD>
<TD>Asparagus</TD>
<TD>Carrots</TD>
</TR>
</TABLE>
Now, don't be worried by this. It looks strange, but look again. There's only 4 commands being used over & over. Here's what we use:
<TABLE> starts and ends the whole thing.
<CAPTION> and </CAPTION> places a caption over your table. The caption will be bolded and centered.
<TR> is used when you want a new Table Row to start. Notice that you need to end every table row with an </TR>. See that above?
<TD> denotes Table Data. This goes in front of every piece of information you want in a cell. You need to end every one that you open with a </TD>. See how it's done above.
And finally you finish with </TABLE>.
Now some more stuff to do with tables!
Here's the same table we worked with before but with more code added.
<TABLE CELLSPACING="1" CELLPADDING="1" BORDER="3">
<CAPTION>Veggies!</CAPTION>
<TR>
<TD>Green Beans</TD>
<TD>Corn</TD>
<TD>Cucumber</TD>
</TR>
<TR>
<TD>Lettuce</TD>
<TD>Squash</TD>
<TD>Celery</TD>
</TR>
<TR>
<TD>Onion</TD>
<TD>Asparagus</TD>
<TD>Carrots</TD>
</TR>
</TABLE>
Now, you're using the 3 new commands listed below :
CELLSPACING (all one word) gives the amount of space between cells.
CELLPADDING (all one word) gives the amount of space (or padding) between the cell border and the cell contents. Note the cell border walls tend to fill out. A higher number fills out more. Try a few different settings to see what looks best.
BORDER tells the table how large the border should be. This is in terms of pixels. Try different numbers. I happen to like the look of BORDER=3. BORDER=0 gets rid of the borders altogether.
Now, we'll go into more uses for the table, including, not only entire page design/layout, but color as well.
For starters, let's take a look at a regular table:
<TABLE BORDER="0">
<TR><TD>
</TD></TR></TABLE>
Now, if you want the background color of your whole table to be the same, you'd put the code within the start tag, like so:
<TABLE BGCOLOR="#FFFFFF">
Same thing with a background image:
<TABLE BACKGROUND="image.gif">
Now, if you just want to color one cell, you'd do this:
<TABLE BORDER="0">
<TR><TD BGCOLOR="#FFFFFF">
</TD></TR></TABLE>
Or, for a one celled background image:
<TD BACKGROUND="image.gif">
With the TD attributes, you can have every cell be a different color or background image. With this in mind, you can use tables in your whole page design & layout.
I hope this tables tutorial has been helpful. Happy table building!
Images & Image Links
Let's start w/a basic image tag: <IMG SRC="image.gif" ALT="text" WIDTH="specified in pixels" HEIGHT="ditto">.
Now, let's break down these attributes, one by one.
SRC-This is the source/url of your image file.
ALT-This is text that will be seen when you mouse over the image. Also, if some of your viewers have a TEXT ONLY Browser, they'll be able to see the text you wrote. So, it's probably a good idea to be somewhat descriptive.
WIDTH/HEIGHT (specified in pixels)-By specifying the width & height of your image, the browser makes it load faster, which makes, happy visitors! If you don't know the pixel width & height of your image, you can find out by using an Image Editor/Maker. For the sake of explanation, I'll use Photoshop. Click on the Image menu, then click Image Size. When the Image Size dialog box comes up, DON'T CHANGE ANYTHING! Just take note of the height & width, write them down if you need to.
Now, let's make Image Links
To begin, we need a basic link. If you dont know how to make a link, please refer to the links tutorial. Now here's our link: <A HREF="page.html"></A>.
Instead of putting text between the <A></A> tags like we would normally do, we put an image tag. If you'd like, you can refer back to that tutorial.
Here's how it'll look:
<A HREF="page.html"><IMG SRC="image.gif" WIDTH="specifiedinpixels" HEIGHT="ditto" ALT="description" BORDER="0"></A>
That's It, I hope this has been helpful!
Now, let's break down these attributes, one by one.
SRC-This is the source/url of your image file.
ALT-This is text that will be seen when you mouse over the image. Also, if some of your viewers have a TEXT ONLY Browser, they'll be able to see the text you wrote. So, it's probably a good idea to be somewhat descriptive.
WIDTH/HEIGHT (specified in pixels)-By specifying the width & height of your image, the browser makes it load faster, which makes, happy visitors! If you don't know the pixel width & height of your image, you can find out by using an Image Editor/Maker. For the sake of explanation, I'll use Photoshop. Click on the Image menu, then click Image Size. When the Image Size dialog box comes up, DON'T CHANGE ANYTHING! Just take note of the height & width, write them down if you need to.
Now, let's make Image Links
To begin, we need a basic link. If you dont know how to make a link, please refer to the links tutorial. Now here's our link: <A HREF="page.html"></A>.
Instead of putting text between the <A></A> tags like we would normally do, we put an image tag. If you'd like, you can refer back to that tutorial.
Here's how it'll look:
<A HREF="page.html"><IMG SRC="image.gif" WIDTH="specifiedinpixels" HEIGHT="ditto" ALT="description" BORDER="0"></A>
That's It, I hope this has been helpful!
Links
For starters, we need the <A></A> tags. This is where all your link info goes, URL, etc. Ok, let's focus on the <A HREF=""></A> tag. Your URL & text info will go within this tag.
First let's focus on the HREF attribute. Here's an example of how the tag will look: <A HREF="http://www.yoururl.com"> HREF lets you know that, what follows is an URL & that you're going to link to it. Now say you want your link to read, My Site!
Well, here's how we do it. Note the </A> tag that occurs at the end? This makes it so your link will read the way you want.
Here's an example:
<A HREF="http://www.domain.com">My Site!</A>
Here's how it actually looks: My Site!
Now we'll go over the target attribute. This attribute has many good uses. (In use with frames, for example) You can use this attribute to open a new browser window, or to break your site out of Frames. First, I'll show how to open a new window for your link: <A HREF="http://www.yoururl.com" TARGET="_blank">My Site!</A> This opens a new window when you click on the link.
Here's how it works: My Site!
Now for a frame breaking link. Here's an example: <A HREF="http://www.yoururl.com" TARGET="_top">My Site!</A> This opens the new page "on top" of the old page, thereby breaking the page out of any Frames. Cool, Huh!
Here's how this one works: My Site!
I hope this helps!
First let's focus on the HREF attribute. Here's an example of how the tag will look: <A HREF="http://www.yoururl.com"> HREF lets you know that, what follows is an URL & that you're going to link to it. Now say you want your link to read, My Site!
Well, here's how we do it. Note the </A> tag that occurs at the end? This makes it so your link will read the way you want.
Here's an example:
<A HREF="http://www.domain.com">My Site!</A>
Here's how it actually looks: My Site!
Now we'll go over the target attribute. This attribute has many good uses. (In use with frames, for example) You can use this attribute to open a new browser window, or to break your site out of Frames. First, I'll show how to open a new window for your link: <A HREF="http://www.yoururl.com" TARGET="_blank">My Site!</A> This opens a new window when you click on the link.
Here's how it works: My Site!
Now for a frame breaking link. Here's an example: <A HREF="http://www.yoururl.com" TARGET="_top">My Site!</A> This opens the new page "on top" of the old page, thereby breaking the page out of any Frames. Cool, Huh!
Here's how this one works: My Site!
I hope this helps!
Text & Link Colors
In the next few minutes I will show how to assign text & link colors for your webpage!
For starters, we need the <BODY></BODY> tags. This is where all your webpage info goes, content, images, etc. But, for now, we will focus on the <BODY> tag. Your text color & link color info will go within this first tag.
First let's focus on the text color. Here's an example of how the tag will look: <BODY TEXT="#000000"> Notice the TEXT attribute, that stands for the TEXTCOLOR We're using hexadecimal code here to get our TEXTCOLOR. In this case, our TEXTCOLOR is black (#000000) We can make it any color we want, though. However, it's a good idea to make your TEXTCOLOR contrast with the background color, so it's more readable.
Now, for those links. The first tag atribute is pretty much self-explanatory: <BODY LINK="#FF00FF">. There's also ALINK, which stands for Active LINK, and VLINK, which stands for Visited LINK.
For starters, we need the <BODY></BODY> tags. This is where all your webpage info goes, content, images, etc. But, for now, we will focus on the <BODY> tag. Your text color & link color info will go within this first tag.
First let's focus on the text color. Here's an example of how the tag will look: <BODY TEXT="#000000"> Notice the TEXT attribute, that stands for the TEXTCOLOR We're using hexadecimal code here to get our TEXTCOLOR. In this case, our TEXTCOLOR is black (#000000) We can make it any color we want, though. However, it's a good idea to make your TEXTCOLOR contrast with the background color, so it's more readable.
Now, for those links. The first tag atribute is pretty much self-explanatory: <BODY LINK="#FF00FF">. There's also ALINK, which stands for Active LINK, and VLINK, which stands for Visited LINK.
Backgrounds
For starters, we need the <BODY></BODY> tags. This is where all your web page info goes, content, images, etc. But, for now, we will focus on the tag itself. Your background color & background image info will go within the opening tag. Let's first focus on the background color.
Here's an example of how the tag will look: <BODY BGCOLOR="#FFFFFF">
Notice the BGCOLOR attibute, that stands for BackGroundCOLOR We're using hexadecimal code here to get our BGCOLOR. In this case, our BGCOLOR is white (#FFFFFF) but, we can make it any color we want. In fact, if your going to use a background image, it's a good idea to make your BGCOLOR the same as the dominating color in your background image, it just looks better that way.
Now, for that background image. This tag atribute is pretty much self-explanatory: <BODY BACKGROUND="image.gif"> After you upload an image & it's stored in your websites directory, the image is given its own URL. Then all you have to do is put the image's URL in where it says image.gif. Cool, huh?
I hope this sheds some light on how to use background colors & background images.
(P.S.)
Here's some great resource sites for web development that I've found:
http://www.htmlgoodies.com
http://www.webreference.com
Here's an example of how the tag will look: <BODY BGCOLOR="#FFFFFF">
Notice the BGCOLOR attibute, that stands for BackGroundCOLOR We're using hexadecimal code here to get our BGCOLOR. In this case, our BGCOLOR is white (#FFFFFF) but, we can make it any color we want. In fact, if your going to use a background image, it's a good idea to make your BGCOLOR the same as the dominating color in your background image, it just looks better that way.
Now, for that background image. This tag atribute is pretty much self-explanatory: <BODY BACKGROUND="image.gif"> After you upload an image & it's stored in your websites directory, the image is given its own URL. Then all you have to do is put the image's URL in where it says image.gif. Cool, huh?
I hope this sheds some light on how to use background colors & background images.
(P.S.)
Here's some great resource sites for web development that I've found:
http://www.htmlgoodies.com
http://www.webreference.com
Meta Tags
What is a <meta> tag? Glad you asked!
The <meta> tag is always found at the top of an HTML document between the <head> and the </head> tag. It has a variety of uses, but one of the most common is used to either reload or redirect pages after a specified amount of time. The reload function is fairly simple, and it looks like this: <meta http-equiv="Refresh" content="30">
Now, let's break this down. http-equiv gives the name of the http function that you want done by the server and content is the amount of time in seconds you want to wait before the server goes ahead with that function.
If you want to redirect users to another page, you would add the URL to the tag, to tell the server where it should go.
<meta http-equiv="refresh" content="30; URL=http://www.hotwired.com/frontdoor/index.html">
In this case, when the 30 seconds are done, we're redirected to a new page, which is specified by the URL in the tag.
The <meta> tag is also used to convey information about your document that won't be seen anywhere within it, unless you view the source code. Many people use it to add keywords to their pages - which helps control how the page is indexed by search engines.
For Example: <meta name="keywords" content="html, tutorials, web design">
You will need the name element to give the information a name. If you use the <meta> tag several times in one document to do many different things, it's important to keep the tags straight otherwise you might have trouble remembering what each one does. The content attribute also differs here. Rather than assigning a refresh time, you use this space to add the keywords.
In the above example, your document will be referenced by the additional keywords html, tutorials & web design. Try to use words that relate to your content.
The uses for <meta> tags are continuously expanding, so when I find out more, I'll be sure to let you know.
The <meta> tag is always found at the top of an HTML document between the <head> and the </head> tag. It has a variety of uses, but one of the most common is used to either reload or redirect pages after a specified amount of time. The reload function is fairly simple, and it looks like this: <meta http-equiv="Refresh" content="30">
Now, let's break this down. http-equiv gives the name of the http function that you want done by the server and content is the amount of time in seconds you want to wait before the server goes ahead with that function.
If you want to redirect users to another page, you would add the URL to the tag, to tell the server where it should go.
<meta http-equiv="refresh" content="30; URL=http://www.hotwired.com/frontdoor/index.html">
In this case, when the 30 seconds are done, we're redirected to a new page, which is specified by the URL in the tag.
The <meta> tag is also used to convey information about your document that won't be seen anywhere within it, unless you view the source code. Many people use it to add keywords to their pages - which helps control how the page is indexed by search engines.
For Example: <meta name="keywords" content="html, tutorials, web design">
You will need the name element to give the information a name. If you use the <meta> tag several times in one document to do many different things, it's important to keep the tags straight otherwise you might have trouble remembering what each one does. The content attribute also differs here. Rather than assigning a refresh time, you use this space to add the keywords.
In the above example, your document will be referenced by the additional keywords html, tutorials & web design. Try to use words that relate to your content.
The uses for <meta> tags are continuously expanding, so when I find out more, I'll be sure to let you know.
Subscribe to:
Posts (Atom)