Changing Fonts

Making Paragraphs with HTML

Headers

I undoubtedly suck at Photoshop, since I don’t have it. But I have been watching this series of tutorials based on a guy’s breakup with his wife. It’s incredibly entertaining, and if you actually did the tutorials, you would be a lot less sucky at Photoshop.

If you haven’t been watching these, start with season 1 episode 1.

Link

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.

Probably you’ve heard the acronym ‘FTP’. Unless you’ve had to use it, you probably don’t know much about it. As far as FTP goes, what you don’t know can suddenly become extremely inconvenient for you.

FTP stands for File Transfer Protocol. It’s a way of moving files from one computer to another computer over the web. It is a lot faster than downloading them through HTTP, or Hyper Text Transfer Protocol, which you access through links on regular html webpages. If I installed an FTP server on my computer, I could set you up an account and give you a username and password. You could then open your FTP client, go to the FTP address of my computer, log in, and download files from any directories that I had given you access to. I could choose to allow you to upload files, too.

In review…

The FTP server is the remote computer that hosts files for transfer. The FTP client is the software you use to get those files.

FTP for downloading purchased content

This is what happens when you buy content. The files are so large that it would take too long to transfer them just by clicking a link on a webpage, so they may set you up an account and let you download them that way.

My favorite FTP client is a free one, FTP995. It’s really easy to set up and use. I used to use Ipswitch, which I paid for, but I like this one better.

The content company will give you their FTP address, your username, and your password. You just type that info in at the top. Click Connect, and you will go there and login.

Files will appear on the right and left side of the window. The ones on the right side are the remote computer. The ones on the left are your own computer. You need to decide where you want to put the content before downloading it. The top listing on the left is just directories and folders. Double click on a directory to find a subdirectory. Right click on a directory to create a new directory. If you are new to this and don’t have a directory where you put your photos, I recommend going to My Pictures and creating a new Content directory there. If you have bought photos of more than one model, create a new subdirectory within that for each new model, and within that for each set. Double-click the folder at the top with two dots next to it (which represents the directory you are in) to move back up a level.

When you reach the place where you want to download to and are all set, right-click the file on the right you want to download and select ‘download’ from the menu. Then wait. When it’s done, it will appear in the location on the left.

I know it seems like a pain, but it would be a nightmare later to straighten out if you get everything mixed up.

They will have the files zipped when you download. If double-clicking on the file icon doesn’t open it, this company also has a free unzip utility.
Software995

FTP for creating and managing websites

I know a lot of people who realize the need for a website find the idea of constructing one and putting it online to be somewhere between daunting and downright scary. It looks like there are so many things that can go wrong that if you make the wrong mistake you could inadvertently start World War III or cause the end of civilization as we know it.

Many webhosts capitalize on newbie fear by providing sitebuilders and a variety ways of getting a page online without having to use ftp. Most of them are very limiting. You will never learn how to run a website properly while using a setup like that. But the worst part is that when you start needing more services, they charge outrageous prices for them. It rapidly adds up to far more than the cost of a real web host, and you may not even be able to take your site with you when you do make the move. You’ll have to create a new one.

It’s not rocket science. It’s not even hard after you’ve done it like once. It’s just a different way of thinking that you may not be accustomed to. So let’s look at FTP.

Again, you install the FTP client software. Your webhost has given you the FTP address you need, your FTP username and password. Fill it in and connect. Then all you have to do is right-click a file on the left to select the ‘Upload’ option to upload it to your domain on the right.

Call your first html page index.html or index.htm. Upload it and this is what will show when somebody types your domain name in. Call your other pages whatever you want to and link to them from your index page.

Images? Videos? Recordings? Create an ‘Images’, ‘Videos’, or ‘Recordings’ directory and upload to it.
FTP995

You can even download something you accidentally deleted or forgot where you put it.

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!

I’ve been making templates to sell lately, and in the template I mention that you can space photos by adding a spacer strip to them in your graphics program. I thought it would be a good time to put a little tutorial in here about that.

I’ve got a nice little thumbnail photo of a chocolate waffle which I decided to post to a couple of blogs of mine. I like to have blog posts start with a thumbnail photo at the upper left with the text running down the right and wrapping around the photo.

I also like to have photos and other images alternate with text wrapping around them, which you can do by adding ‘align=”left”‘ or ‘align=”right”‘ to your image tag, like so:

<img src="http://myimagehost.com/image.gif" align="left">

Unfortunately, as you can see up there, the text touches the photo. That’s the default in html. There are a lot of different ways to fix this, depending on the circumstances. But if I’m editing the photo for a blog of mine or for Niteflirt, I often just add a spacer strip to save code.

Open up the photo in Paintshop Pro. Click ‘Layers/Promote background layer’ so you can work on the background layer. Now click ‘Image/Canvas size’. The following dialog box comes up.

Your image will now have a transparent margin on its right and lower sides, which will show as a checkerboard background in PSP.

Now click ‘Layers/New raster layer’. Accept the defaults in the dialog box that pops up.

Paintshop Pro has helpfully put a new transparent raster layer on top of the current layer. This is going to be our new background, so we want it beneath the current layer. Look at the Layers palette in the right sidebar. (If you don’t have your layers palette showing, go to ‘View/Palettes/Layers’ to make it appear.) Click on the transparent layer and drag it beneath the layer with your image one it.

Now, with the transparent layer still selected, click ‘Layers/Duplicate’. I said I’m going to be putting this in two blogs. One has a white background and one has a black background. I’m going to be making two different images, one with a white spacer and one with a black spacer.

I’m going to give the image a drop shadow. Click on the image layer, then click ‘Effects/3D Effects/Drop Shadow…’ The following dialog box will come up.

The window at the left shows your original. The one at the right shows what the drop shadow will look like at the current settings. You can’t see the new drop shadow here. You have to drag the picture over to see it if it’s bigger than a small button.

I generally choose a shade of gray for a drop shadow on a white background, rather than black. 7 pixels of vertical and horizontal offset is good for a photo like this. I tick the box ‘Shadow on a new layer’ because I want to be able to control whether the gray shadow shows up on my black background coming up.

Now I select white in the Materials palette and floodfill (the bucket on the toolbar) one of the background layers. Then I fill the other with black.

If you have a different background color to match, you can use a color picker to select the background color for proper matching.

If you don’t have a solid color background, you can save the image as a .png file, but older versions of IE will not display the transparency properly. It’s a tradeoff.

Select ‘Edit/Copy merged’ then ‘Edit/Paste as new image’ to create a new image with a spacer. Save the original as a .psp file to preserve its layers, and the new one as a .gif or .jpg. Note that the background is white here because the black background is hidden beneath the white background.

Now I’m going to click the little eye next to the gray shadow layer and the white background layer. This will make these two layers invisible, and the black layer will show. Again, select ‘Edit/Copy merged’ and ‘Edit/Paste as new image’.

You can’t see it here, but this image with the black background will look perfect in the blog I have with a black background.

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!

.

Okay, so you want everything about your page to be cool. You’ve got a cool background. You found a cool font. You want cool colors. Maybe you even want one of those cool non-scrolling background photos like you see on MySpace.

Step back. Take a breath. The first rule of text is that you want to make it as readable as possible. This is your message that you’re trying to use to promote yourself, and at least in theory having potential callers read your text will improve your chances of having them call you, right?

The harder you make it to read your text, the greater the likelihood that someone will just go away without reading it. People who wear reading glasses often have the most money to spend on you.

Now I know that may seem hard to believe, when probably you’re yourself attracted to pages that are maximally cool. So I think the best thing to do will be to look at some really bad examples that I’ve collected here and there.

The animated background

Animated backgrounds make it harder to read text. The most readable text has as much contrast as possible.

Believe it or not, there really is text on that twinkly, starry background. Black text. I’ve reduced the size of the animation to make it fit in the column and load more quickly. Click on it to see what you find when you highlight the text on that page. Do you think anybody read her page?

The most readable text is black on white. It’s all downhill from there.

Bad font choice

Now let’s look at another one with contrast issues. The contrast problem is obvious, but this one also has a font selection problem.

The fact is that there are thousands of fonts out there to choose from. Some of them are free to download, others may cost a bit. But a person’s computer will only display a font they have installed. So if I, as my own page designer, find a really cool font that I want on my page, a reader who does not have that font installed will see something very different.

A girl had a question about her page. I was the only one who had this font installed (she didn’t even have it installed herself), so I was the only one who was able to see the page as the designer intended, which was completely illegible. Everyone else was seeing a different font. An ugly one, which was still really hard to read with the black on brown. Click the image to see a larger version.

OK, let’s look at a MySpace background. The site was slow, so I wasn’t able to find one of those pages where the text scrolls over the giant, non-scrolling photo. This is a non-scrolling photo background of someone in my network. I guess.

So what can you do? Use a template where the text background is a solid color, and there is plenty of contrast between the text and the background. If you want to use a high-contrast background, like a photo, use it around the perimeter of the page. And choose fonts that the viewer is likely to have on their computer. Here’s a link to a page with a table showing the fonts that everybody is likely to have installed on their computer. A good designer will use a fancier font to make graphic images, like headers, rather than using an attractive but unusual font for content text. And maybe test out your listing on somebody who hasn’t seen it to see how easy it is to read.