Now that you can manipulate your text, and link to other pages, where do you go next? Well, you could learn the basics about tables, or you could learn how to put an image into your Web site. I'll start out teaching you about images.
Images
To put an image into a site, type <IMG src="location">, replacing 'location' with the url of the image, including the extension (.gif, .jpg, etc). To make text wrap around it, you must add the align attribute. Type <IMG src="location" align="left"> to align the image to the left side of the screen, and make all text wrap around it. Replace left with right or center to align it differently. If you want a border, you should add the border attribute. Type <IMG src="location" border="1"> to make a border of 1 pixel around the image. 1 could be replaced with any positive value. You can also make an image a link by surrounding it with a link tag. For <IMG> tags, it is illegal to put a closing tag.
Basic Tables
Tables are what make a good site great, a great site awesome, and and awesome site the best. With tables, you can have more control than ever before. Without tables you can't align text in columns like you could in a newspaper. That's about the least important thing that they can be used for. In the next few paragraphs, I will explain to you the basics of tables.
Let's dive right in! To start a table, add a <TABLE> tag. Every section in a table is a cell. To create a cell, you have to create a table row first. Type <TR> to create a table row. Then, to make a cell, type <TD>. All of these tags require closing tags (</TABLE>, </TR>, </TD>) and they must be closed in the order opposite that they were written in. For example, if you started a table, made a table row, then wanted another row after that, you would type the following (I'll add a border to make it easier to see):
<TABLE border="1">
<TR>
<TD>
Put the first cell's info here
</TD>
</TR>
<TR>
<TD>
Second cell's information here
</TD>
</TR>
</TABLE>
Analysis:
Click here to see what your browser would display. The first tag starts the table, the second creates a row within the table, the third creates a cell within the row. Then we put the the first cell's information in, followed by closing the table cell. We then close the table row, and create a new one. In this cell, we put the second cell's information. We then close that table cell, close the row, and then close the table. The border attribute I added in puts a border on around all the table cells. I did this to make a visual for you.
There are many more attributes for tables, but that's in another tutorial. Tables are probably the hardest part of static HTML, but once you get the hang of it, you have much more control over your site. Don't let confusing-at-first-glance code pull you away from tables. Tables are confusing at first glance, but once you have the basics down, and realize that tables are the easiest in the long-run; you'll have absolute power over site design. And don't forget, you can always embed tables within each other; a great way to have complete control over your site.
Frames
Frames are another form of layout in many sites. They are the mini-browsers within the main browser. They can scroll independently of the main browser, but are still viewed in the main browser. They have many advantages, but unfortunately also have numerous disadvantages too. They are great for companies/people that want to have their images or links visable at all times, especially those who are just starting out. They are also easier to make than most tables, although in the long-run it takes more code to use frames. They can be rather annoying if you have your screen resolution set low because most of they time the author of the site makes the frames so they can't scroll, no matter what. If you are expecting that to happen, I would suggest using tables instead. They also are a hassle to get working right.
To create a frame, you must define which frame goes where, how wide it is, give it a name, and tell the browser what to display in that frame. To do this, you have to make a major change in your site. The home page of your site must now contain the frameset, and nothing else. Don't worry though, it loads what you want the user to see depending on your code. To first define a frame, type <FRAMESET cols="#%, #%" border="#" frameborder="no/yes" framespacing="#"> and </FRAMESET> to replace the <BODY> and </BODY> tags. Then within the <FRAMESET> and </FRAMESET> tags, type <FRAME src="URL of first%" name="moses" scrolling="yes/no/auto" noresize frameborder="no/yes" framespacing="#"> for each frame, replacing the #'s with numbers, yes/no/auto with yes no or auto, and URL with the location of the page to be displayed in that frame. Don't close the <FRAME> tag, it's illegal. Make sure to put as many <FRAME> tags as you define columns/rows. The previous code probably sounds confusing to you, so I'll explain it in depth in the next few paragraphs.
The first attribute to the <FRAMESET> tag is the cols attribute. This can be replaced by rows or you can have both. It will define the number of columns, as well as the thickness of each, from left to right. Therefore the first percentage would be on the left, the second on the right. The next attribute I put in there was the border attribute. It defines the width of the border of the frame in pixels. The third attribute was the frameborder attribute. This one turns the border on or off. Then I put the framespacing attribute, which defines the distance between the frames in pixels.
The first attribute to the <FRAME> tag was the src attribute. This tells the browser where to find the file to load into that frame. The second attribute was the name attribute. It gives the frame a name, used when linking from one frame to another. The third attribute I used was the scrolling attribute. It tells the browser whether or not to have a scrollbar on the frame. The fourth attribute was the noresize attribute. It tells the browser that the viewer of the page will not be able to resize the frame. Very useful and I suggest keeping that one in. The fifth attribute was the frameborder attribute. It tells the browser whether or not to display a border around the frame. The last attribut was the framespacing attribute. It tells the browser the number of pixels to put between that frame and others touching it.
<< Previous | Top | Next >>
Basic Information
