Basic lessons in HTML, CGI, SEO, domain registration, hosting - build an on line business! » HTML

Floating Images – Part II

AdminP — Mon, 29 Aug 2011 19:44:28 +0000

We’ve seen how to use the align tag to make images ‘float’ to one side or the other of your page. We’ve also seen how the text will wrap around these images. But what if you don’t want the text to wrap?

Since a floated image will affect all the elements that follow it, you will need to insert a special line break: clear to control the text. Using the clear attribute along with the regular br tag indicates that the text should not start until the specified margin is cleared. This ‘specified margin’ would be at the end of the image or images.

How to Stop Text from Wrapping

To stop the text from wrapping you would place the cursor at the place where you want to stop wrapping text and elements to the side of the image. In most cases this will follow the image. The code used would look like:

– to stop flowing content until there are no more floating images aligned to the left margin

– to stop flowing content until there are no more floating images aligned to the right margin

You can use
– to stop flowing content until there are no more floating images on either margin

To see how this might look, we’ve taken the same HTML code we used for our last sample, but this time we’ve included the clear attribute to see how the text is affected.

Begin HTML Code Sample (Using clear Attribute):

SAMPLE PAGE WITH FLOATING IMAGES & CLEAR ATTRIBUTE

Floating Image . . . Left Side

This image has been coded to float to the left of the page using a clear attribute. Notice how the heading and text now display below the image around the image.

Floating Image . . . Right Side

Notice how the image floats to the right side of the page… but since we’ve used a clear attribute, the text and heading appear below the image.

How to Add Space Around an Image

If you look at the sample above, you’ll see that the text and heading associated with the second image are butted right up next to the images. However, you can use the vspace and hspace attributes to add a margin of space around the images. Both of these are included in the same line of code you would use for the image. For example, to add space around an image you would use the following:

hspace=”x” for horizontal space where x is the number of pixels you want to add on both the right and left sides of the image

vspace=”x” for vertical space where x is the number of pixels you want to add on both the top and bottom sides of the image

Your code might look like …

… where we’ve placed 10 pixels on the left and right side; and 5 pixels on the top and bottom.

Note that you do not have to add both horizontal and vertical space at the same time. However, using this attribute does not allow for adding space to only one side of the image. If you want to have space on only one side of the image or if the space needs to be uneven, you would do better to use a graphics program to add in the blank space.

Don’t miss our post next week, we’ve got a super new FREE program to tell you about.

How to Make Images Float

AdminP — Mon, 22 Aug 2011 19:41:41 +0000

We’ve seen how an image can be placed in a specific area of a page by using tables. However, you can also include images by using the ‘align’ attribute to make images float along one side or other of the page. If you’re familiar with using Word Press, this ‘align’ process is much the same as inserting images in your post. When you align an image on a page – left or right, you have the image display with the text and other elements wrapping around. The code used to accomplish this is within the page’s HTML code.

Floating a Image on One-side

Sample line of code:

Type [ image_name.jpg is the image name and location of the image on the server ]
Type either align=”left” or align=”right” depending on which side you want the image to float to. Remember, any text associated will flow to the opposite side of the page.
Add other image attributes, i.e., width, height, border, etc. before you….
Type the final /> to close the line
Create the elements, text that should flow next to the image

Floating an Image on Both-sides

To float both left and right side images on one page you put in two (2) lines of code; one for the left image and one for the right image. The screen capture below shows the results when having two (2) images float on one page.

To force the text to wrap for our sample, we’ve put our images inside of a table with a width of 400 pixels. We’ve placed the code used below for reference.

Note: we’ve use the paragraph tag

to begin a new paragraph and have the text align with the new image. Use the

tag to close paragraphs, text, etc. associated with any image.

HTML Code:

SAMPLE PAGE WITH FLOATING IMAGES

Floating Image . . .

Left Side This image has been coded to float to the left of the page. Notice how the heading and text wrap around the image.

Floating Image . . . Right Side

Notice how the image floats to the right side of the page, while the text and heading appear to the left. More text will continue to wrap around the image filling in the blank space.

Helpful Tips

When aligning images, remember it will be the image that appears left or right – not the text.
Place the image directly before the text it is to ‘disrupt’.
The text will continue to appear on the opposite side from the image until there is no more text or a break is encountered.

Conclusion

This is an easy way to include images and incorporate them with text without having to use tables. However, there may be times when you don’t want the text to wrap. Next week we’ll look at how to stop elements from wrapping and we’ll learn how to add space around a floating image.

HTML: Creating a Marquee

AdminP — Mon, 08 Aug 2011 19:14:18 +0000

If you want to have a marquee on your page without using JAVA, try using the following HTML code to insert a scrolling marquee anywhere on your web page. Your marquee can be words, sentences, or even images. The information contained in your marquee code will start at one point (on the screen) and float across much like the advertising marquees you see at some businesses.

Marquee Code for our sample text:

This is a sample marquee scroll

To see this code in action, visit this link…. Marquee

For our sample, we’ve coded our text to scroll across 85% of the screen with a height of 15 (pixels). We’ve set our delay at 175 milliseconds; our direction to scroll is ‘left‘ and we want our loop to be ‘infinite‘. Note: You can use marquee code inside of tables also.

Marquee Attributes

Width and Height – you can assign width and height to your marquee area as either a percentage of the area where the marquee is to display or in pixels. In our sample we’ve used a percentage for the width and a pixel designation for the height.

Scroll Delay – use this attribute to control the amount of time (in milliseconds) that passes before the text scrolls again.

Behavior – allows you to select the type of movement you want to use:

Scroll – use this for text that starts at one side of the screen and disappears off the other side.

Slide – use this for text that starts at one side and stops when it reaches the other side.

Alternate – use this for text that starts at one side and bounces back when it reaches the other side.

Direction – this determines the direction the text starts from (left or right).

Loop – allows you to select the number of times the marquee is to pass across the screen. You can also make the text appear continuously by using ‘infinite’ in place of a number.

Other – additional placement and attributes of the marquee can also be controlled by using the following attributes as well. This information is contained in the first tag.

HSPACE (Horizontal space)

VSPACE (Vertical Space)

ALIGN (Align – left, right, center)

BGCOLOR (Background color)

Marquee Content

This code is placed between the beginning and ending marquee tags HTML Code for Content Goes Here

Images – If you want to use images inside the scroll, keep them as small and as few as possible.

Font – color, face and size: use the same code you would use anywhere else in your HTML docuement to control how the text displays.

A scrolling marquee can be used to highlight a specific section of a page, draw attention to a special offer or display a larger quantity of information that you might think you have space for. Hope you have fun using this bit of code.

HTML Tables: Column Spanning

AdminP — Mon, 09 May 2011 20:07:20 +0000

We’ve seen how using borders, rules, cellpadding, cellspacing and background colors for tables can give you a lot of control over how your information will display; however, there may be times when you will want to change the way the cells. i.e, columns display.

In this post, we’re going to see how to change the way columns display within a specific row. All HTML code will be shown in blue. (Note: The terms column and cell can be used interchangeably.)

You can control the number of columns, i.e, cells, a line of text is to span by using colspan=N where N is the number of columns to span. This allows manipulation of the columns within individual rows. For each of our examples below, we’ll be using a table that has 3 rows and 3 columns (cells), a border of 1 and cellpadding of 10.

Example 1

Our first table will have a heading in row 1 that we want to span all 3 columns and be centered (Figure 1:4):

Our Heading

Row 2 Cell-1 Row 2 Cell-2 Row 2 Cell-3

Row 3 Cell-1 Row 3 Cell-2 Row 3 Cell-3

Note: There are no vertical borders in row 1 since we are spanning all three (3) columns but the remainder of the table displays with all 3 columns.

Example 2

Next, let’s say we want our table to have a heading in row 1 that again spans all three columns, have our second row display with 2 columns where the first column spans columns 1 and 2 of row 3. Row 3 has no changes. (Figure 2:5)

Our Heading

Row 2 Cell-1 Row 2 Cell-2

Row 3 Cell-1 Row 3 Cell-2 Row 3 Cell-3

Example 3

In our final example, we will have our heading spanning 3 columns, row 2 will have no changes, and row 3 will have 2 columns … where the first column remains as is but with the second column spanning columns 2 and 3. (Figure 3:6)

Our Heading

Row 2 Cell-1 Row 2 Cell-2 Row 2 Cell-3

Row 3 Cell-1 Row 3 Cell-2

Conclusion

From these simple examples, you can see how using colspan= offers a lot of flexibility with many useful applications. Want to learn more about writing HTML tables?

Get the HTML Quick Start Guide by Elizabeth Castro available from Amazon

. . . where you’ll learn much more about writing tables, i.e, tables and forms, captions, column groups – as well as everything else you need to write your own HTML web pages.   These quick start guides are the best because they use pictures rather than lengthy explanations.

HTML Tables: Colored Backgrounds

AdminP — Mon, 02 May 2011 19:47:03 +0000

.

We’ve seen how to write the HTML code for external table borders and internal table rules, but there are other simple pieces of HTML code that can be added to the
  code where you want the colored background to show for the whole row.

Table with background color for Row 1 Cell-3; and Row 2 Cell 1 (Figure 3):
Note:   The bgcolor= should be in the
code to change how the table displays.

These extra bits of code can change the not only the appearance of the table by giving the table or portions of it a colored background but also control  the layout of the table by manipulating the placement of the table’s cells.

While both of these will affect how the table is displayed, for our purposes of this post, we’ll only be covering the specific HTML code used to get a colored background for:

Whole tables

Table rows

Table cells

Colored Backgrounds

Using background color for either the whole table, the rows or cells can help separate blocks of information presented in the table or highlight the whole table on a page making the table and it’s contents stand out.

For our examples, we’ll be using a table with 2 rows and 3 columns, and hexadecimal colors for the backgrounds. We’ll also be using a border of 1 and cellpadding of 10 to make viewing the different rows and cells easier. As usual, all HTML code will be shown in blue.

Note: The bgcolor= is in the
code thus affecting the whole table.
Table with complete colored background (Figure 1):

Row 1 Cell-1 Row 1 Cell-2 Row 1 Cell-3

Row 2 Cell-1 Row 2 Cell-2 Row 2 Cell-3

Table with background color for Row 1 only (Figure 2):

Row 1 Cell-1 Row 1 Cell-2 Row 1 Cell-3

Row 2 Cell-1 Row 2 Cell-2 Row 2 Cell-3

Note:   The bgcolor=  should be in the
cell code  for the cell(s) where you want the background color to show.

Row 1 Cell-1 Row 1 Cell-2 Row 1 Cell-3

Row 2 Cell-1 Row 2 Cell-2 Row 2 Cell-3

Conclusion

We’ve given you some basic examples of how you can use colored backgrounds in tables – but, don’t think this is all you can do.   You may want to have a table with a colored background and then assign different colors to the rows or cells.    There are no limits – so be creative and have some fun with tables.

Join us next time when we’ll discuss how to use cellspanning to control how our table displays the heading and other information.

Our Heading
Row 2 Cell-1	Row 2 Cell-2	Row 2 Cell-3
Row 3 Cell-1	Row 3 Cell-2	Row 3 Cell-3