HTML tutorials for Niteflirt and other stuff

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.

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.

I’ll put an assortment of forms here for you to use as inspiration. These will be more expensive than the little sidebar ones in the previous post. Feel free to play with them. Samples are not actually sending out email.

These email contact forms will fit nicely in the sidebar of a wordpress blog, like the slightly larger one I have in my sidebar over to the right.

Why have an email contact form? Anyone can mail you, but no one can see your email address. This includes spammers and bots. The fact that your form is in a flash object means that only humans can email you.

What do you get? If you have your own hosting, you get an html page that the form code is embedded in, a text file with the html code for the form ready to insert into your sidebar, the .swf file which is the flash form, and a .php file to manage the email. The .swf file comes with the location of your php file coded into it, the php file has your email address edited in, and the .html file has the location of your flash file edited in. So you can’t just buy and upload, I will have to edit it for you.

You get directions for inserting it into the sidebar of a Wordpress blog.

If you don’t have a blog whose sidebar you can edit, you may not be be able to install it there. It is still possible for you to put a form on a page in your blog. You can also link to an .html contact page. If you don’t have hosting, I can provide perpetual hosting for all files for a one-time fee.

These are a few samples of one possible style in a number of colors. They can be made in any color to coordinate with your blog theme. I’ll come up with a page of other styles soon. Email me if you are interested.

By the way, although these say, “Click to email me,” the email function on all the samples in this post is disabled. You can click and see what happens when you try to send an email without editing the name, address, or message. Click to clear the form and try to send again. Then fill in the form properly and see what happens. Besides not allowing you to send an unedited or blank mail, the php form does some checks to make sure the email address is really an address.

Click away!
 

The price is $15 ready to install or $20 installed.

Note: There are online article directories where website owners place their writings for the use of other webmasters looking for content for their sites. When their article is reprinted by another webmaster, their site is credited by google for having quality content.

These directories are pretty hit-or-miss. There are hundreds of categories, and bazillions of articles. Some of the articles are real gems, some have excellent information but are badly written, most are irrelevant. If you’ve got a vanilla website, you might check them out. Read the Terms of Service before you use an article you find in a directory.

When I find an interesting article that looks like exactly what I would have wanted to have written for this site, I’ll reprint it here.

Guidelines to Choose the Best Web Designer

By James Elliott

It takes immense talent and skills to design a web page which is creatively designed, neatly coded, easily downloadable, displays properly on different browsers and above all, can be indexed easily by search engines as well. This is why it becomes more important to choose a company which has a team of talented web and graphic designers, equipped to give you a high quality web solution.

Here are some useful tips to help you choose an efficient web designer.

Check out the previous works

Ask the company to show you the portfolio of their web designs. Most good web and graphic design companies will have a neatly done portfolio in their website itself.

The prior works of the designers highlight not only their talent but also what you can expect from them. Analyze whether all the pages are easy to navigate, whether the designs are impressive and professional, is the layout effective etc. Only after you are satisfied with the previous works, you should move further.

Give importance to HTML knowledge

Make sure that the web designer uses HTML to build a site along with cascading style sheets i.e. CSS. The knowledge of CSS is important for a designer as CSS allows the designer to easily and quickly make system-wide changes to the site.

This helps in saving time and energy and of course, cost. A good designer must be in the know of these things. If your designer is not familiar with CSS, then you’d better leave the task for some other designer.

Know about the features

Inquire what kind of features your web designer can provide you in your website. There are plenty of features available in web solutions today but you must know what exactly you would need. Your web designer must be able to suggest you the features that would make your site attractive and user-friendly.

For example, if you are building a product-selling site, you can have some flash components to enhance the appeal of your home page, a good admin panel to manage visitors and sales, security features to ensure secure payment gateways and so on.

Updating criteria

It is essential to know beforehand, how the web and graphic designer plan to have the site updated. It is better to have the ability to update the website on your own with the help of Content Management System (CMS), or user-friendly admin panel type interface which allow one to make changes to static content. Paying the designer every time you need to update your site is an expensive proposition and quite unnecessary in today’s hi-tech web world.

Performance of your website

To make sure your website performs well, ask your designer beforehand about the time required for loading a page and search engine indexing. If your site takes more time to load than the average website does, take it as a warning signal. It might be due to bad HTML coding. A good web designer will code the page in a way in which it loads within seconds and is easily indexed by search engines.

Get in touch with previous clients

Apart from just going through the testimonials online, it is worthwhile to get in touch with the previous clients and ask them about their experience with the web design company and the web designers. You can contact them either through phone or e-mail them seeking their opinion whether they were happy and satisfied with the kind of quality and service they have got.

These are just few guidelines that can be taken into consideration while looking for a good professional web designer. These are by no means the only criteria but it will surely help to find the good ones who can be trusted with your dream project.

James Elliott is a website designer who offers Affordable Web Designs in UK. His Web Design in UK is quite popular and his articles have been appreciated over various online platforms.

Article Source: http://EzineArticles.com/?expert=James_Elliott

The first thing a lot of new flirts want to do is figure out how to add a photo to their listing. It seems like it ought to be pretty simple to do, but with no html background, a girl can find that the photo just doesn’t show, or it appears someplace she doesn’t want it to.

Here’s our example listing, which I have shrunk to a convenient size. There are actually two paragraphs here.

The first thing I’m going to do is insert an image at the beginning, using a standard image tag.
First notice that I am putting “http://myimagelocation” as the location of the image. For your image to appear, you will have to host it on your own website, on Niteflirt, or on another web host. To upload to Niteflirt, find the HTML tips link which the arrow is pointing at. Click it in your own listing edit window when you are ready to upload a photo.
<img src=”http://myimagelocation”>
Like so:

What happened is that the you only got one line of text at the bottom of the photo. That’s probably not what you were expecting. There’s also a white space on the left where the image couldn’t float all the way to the left-hand margin because the thumbnail was in the way.

To make the text start at the top and wrap around the photo, you put ‘align=”left”‘ in the tag.
<img src=”http://myimagelocation” align=”left”>
Let’s also move the whole thing down below the thumbnail by adding 7 line breaks at the beginning.
<br><br><br><br><br><br><br>
Now it looks like this.

Let’s add some white space to the right of the image so the text doesn’t touch the photo. I’m going to add ’style=”margin-right:10px”‘ to the image tag to add a 10 pixel margin on the right.
<img src=”http://myimagelocation” align=”left” style=”margin-right:10px”>
Here’s what it looks like. See how the text will now wrap around the bottom if there’s enough of it.

This has gotten kind of long, so I think I will finish up another day.

Adding another photo

One last suggestion: type out your tags. Wordpress uses non-standard characters for things like single and double quotes, and simply copying and pasting may not work.

So you want to add some photos to your listing. Before we get to that, let’s make sure you look good in those photos.

• Take the photos in a good light. Photos taken under insufficient lighting can look really grainy.
• Use the flash if you’re indoors. Use it at the correct distance. Too close and you are overexposed, too far and it won’t light you up.
• Learn to use the timer if you’re taking photos yourself. Just about every digital camera nowadays has a timer. Read the owner’s manual.
• Center yourself in the photo.
• Fill the frame as much as possible. This may mean being closer to the camera or using the zoom
• Make sure you don’t cut off your head. If you do, there’s nothing you can do to put it back.
• Photos should be in focus. Learn how the focus is supposed to work on your camera.
• Look at the pictures, delete any bad ones, and reshoot.
• Can’t get the camera to take good pictures or pictures in focus? Buy a new one or borrow somebody else’s.
• If you take photos with your cam, make sure you use lots of lighting.

There are lots of things you can do to enhance photos, and if you have the money (and lots of time to learn) I recommend Photoshop. I have Paintshop Pro, which can do a whole lot of things at a good price.

You don’t need to take the time to learn how to do all those things right now. What you need to do to those photos is crop and resize them. You want to trim off any extra space around you, and then you want to make the photo the right size for a listing. Resize a copy of the photo, not the original, then save it with a new name. Don’t resize it by changing the width and height in your image tags. That can make the page load really slowly, and it gives your viewers right-click access to full sized photos without paying for them. Don’t resize photos to make them larger, only smaller. If you need it larger, take a new photo. Enlarged photos look smeary or pixellated.

There are a lot of free image editing apps out there you can use. I haven’t evaluated any, but I know people who have used Photo filtre. Photo filtre studio is a free download trial. The page also has links to the older version. If you want one you can use for free, pick the most recent. I would try the free version before downloading the studio to see if you can use the extra features. In fact, I would wait to download until after you get used to the free one. If you aren’t ready to learn to use some of the more advanced features, you won’t be able to figure out the trial version before it expires.

A free program with more features (but harder to learn) is The Gimp. You will find lots of tutorials for it, but it will be frustrating at first if you aren’t accustomed to using graphics software.

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!