Here’s what the listing looked like when we left off.

Just as a refresher, we added a photo here and formatted the text here.

What we’re going to do is add another photo to it, this one over on the right. Then we’ll add a photo that’s centered, and we’ll center the header text.

What we need to do is put the next photo in the second paragraph exactly the same way the first one went in. We take this piece of code

<img src=”http://help4flirts.com/images/portrait2.jpg“>

and insert it right after the header of the second paragraph, changing only the name of the image.

It looks like this, just like the last one did. There’s a photo inline with the beginning of the first sentence.

now we are going to align the photo to the right by adding ‘align=”right”‘ and put a little space between the text and the photo by adding a left margin of 5 pixels to it.
<img src=”http://help4flirts.com/images/portrait2.jpg” align=”right” style=”margin-left:5px”>

Now the photo is on the right side.

To center something, what we do is put <center>and</center> around it.
So if we put those around an image, the code will look like this:

<center><img src=”http://help4flirts.com/images/landscape.jpg”></center>
If we put these around the header text, the code will look like this:

<center><h1>Header</h1></center>

So what we do is put the center tags around both headers. We put center tags around an image we want to use as a header image. We get rid of all those line breaks (<br>), because we won’t be needing them anymore. And here’s what it looks like.

It’s a huge block of text, the default size font is really tiny, and it’s hard to read even if you’ve got good eyesight. Some callers can’t read that, so you may as well be writing in fake Latin, as far as they are concerned. Let’s do something about that.

First, let’s look at font sizes. Standard html fonts come in 7 sizes, numbered from ’1′ (smallest) to ’7′ (largest). To specify a font size, you would put a font tag on either side of the section you want to have that size. If you don’t end it, the rest of your document will be that font. This would change something to font size ’1′.
<font size=”1″>Word or sentence</font>
The default font face on Niteflirt is called Arial. The default size is ’2′. This is what Arial looks like in the standard sizes.

To change the font face from Arial to Times New Roman, use this code.
<font face=”times new roman”>Word or sentences</font>
This is what the 7 top web fonts look like in size ’3′.

There are lots of other gorgeous fonts. Avoid them. Most people don’t have them installed, and their computer will substitute something else that might look really different. Making good font choices.
Make text italic like this.
<i>This is italic.</i>

Make text bold like this.
<b>This is bold.</b>

Make text colored like this.
<font color=”red”>This is red.</font>
To make a multicolored line, color the words individually.

Here’s what it looks like when you do it all together.
<i><b><font face=”comic sans” size=”4″ color=”purple”>Comic sans size 4 purple bold italic</font></b></i>

Wow, this is getting boring. If you want more info, here’s the text file. Download it and look.

I’m just going to go in there and give that listing maroon georgia size 3 italic text. I’m going to add a header at the top, and I’m going to add a subheader before the second paragraph.
<font face=”georgia” size=”3″ color=”maroon”><i>
I’m not going to bother changing the font, so I don’t need to use the end tags on Niteflirt.

Unfortunately, you do have to also separately add font to the headers, or the color will only show up in Firefox.
<h2><font face=”georgia” color=”maroon”>My header</font></h2>

Here’s what it looks like now.

Headings, Titles

Heading sizes are numbered. The lower the number, the larger the size. You want to use headers rather than changing font size for your titles, as search engines look for header text first when deciding what is most important on your page. I can’t demonstrate very well on this page what the different default sizes look like, as my blog theme has changed the defaults, so I’ll use an image.
Here’s how you write them:

And here’s how they look:

Here’s a sample listing:

Let’s format the listing

There is a heading at the top of the listing. We’ll make it an <h1> header.
Here’s what it looks like before in the listing and the edit window:

Here’s what it looks like after:

There are a couple of subheaders lost in the text. I’ll make them <h3> headers.
Before:

After:

Try it!

The old-fashioned standard html way of doing it is to put a text attribute in the <body> tag, like so:
<body text="#000000" link="#000000" vlink="#000000" alink="#000000"> where ‘text’ is the color of the text in your listing, ‘link’ is link color, ‘vlink’ is visited link color, or the color of the links that the visitor has clicked, and ‘alink’ is the color of links that are active, or highlighted.

Niteflirt won’t let you do it this way, and if you try you’ll first get a message that you can’t put “text” within the <body> tag, and then that you aren’t allowed ‘link’, ‘vlink’, or ‘alink’ either. So what you have to do is trick it. The formula that’s searching though your code for banned snippets is looking for the entire word ‘ text’ with a space before it. You can add a ‘border’ attribute and remove those pesky spaces, and even though the code is really nonstandard, it will still work.

<body border="0"text="#000000"link="#000000"vlink="#000000"alink="#000000">

will make all the text on the page black, as #000000 is the hex code for black. There are also a number of color names you can use. So

<body border="0"text="red"link="pink"vlink="maroon"alink="purple">

will give you red text, pink links, maroon visited links, and purple active links. Of course it will do it in your listing, too. You probably don’t want that. So what you do is put it at the very bottom of your listing.

You can just copy and paste this, but you should pick a different color than pink, which is really hard to see, maybe like "#ff00ff", which is a hot pink.

<body border="0"text="red"link="#ff00ff"vlink="maroon"alink="purple">

Just in general you should look at the colors on your page to make sure they are dark enough to read and pick a different color if they are not really easy to see. Yellow feedback on a white background won’t work. Take my word for it.

So you want a slideshow, but you’ll be happy to get one of those ones where the pictures scroll from right to left? I will show you how to do that. It’s fast and simple.

There are a lot of different things you can do with marquees. If you want to learn more, you can look them up on the internet. But for now, because it’s the most useful and the easiest, I’m just going to show you the one on top.

Note: Firefox does not display this post properly within the main page. To see all the effects, click the entry title and view it as a single post.

Marquees for Niteflirt

It’s really pretty easy. The marquee tags to make images scroll from right to left are <marquee></marquee>
To make one image scroll, put one image between like this:
<marquee><img src="http://myimagesource.com/image.gif"></marquee>

To make two images scroll, put two images between them like this:
<marquee><img src="http://myimagesource.com/Image1.gif"><img src="http://myimagesource.com/Image2.gif"></marquee>

You can put a space between the images if you like
<marquee><img src="http://myimagesource.com/Image1.gif"> <img src="http://myimagesource.com/Image2.gif"></marquee>

You can even scroll text.
<br /> <h2>I want everybody to read my message as it scrolls across the screen.</h2> <p><marquee><</marquee>

I want everybody to read my message as it scrolls across the screen.

You can even reverse direction by adding a ‘direction=”right”‘ to the first tag.
<marquee direction="right"><img src="http://myimagesource.com/Image1.gif"> <img src="http://myimagesource.com/Image2.gif"></marquee>

Warning! Never scroll text from right to left!
<marquee direction="right"<br /> <h2>I want everybody to read my message as it scrolls across the screen.</h2> <p></marquee>

I want everybody to read my message as it scrolls across the screen.

Things to remember:

• A big marquee with a lot of photos in it can take a long time to download. I saw a page yesterday in the top 10 with so many marquees and slideshows on it that I thought none of the links were working. You wouldn’t want a potential caller to go away if he thought something was wrong with your page.
• Limit your marquees to one per screen. That means that the viewer should never see more than one at a time.
• Marquees don’t display properly in all browsers consistently.
• Remember, you want a guy to think, oh, she’s sexy, not did she design my daughter’s myspace page? or worst of all I think I need reading glasses, I’m going blind!

.