So, for you DIY webmaster's out there, I've put together answers to 10 common webpage formatting annoyances.
Q: How do I properly embed a YouTube video on my site?
The easiest way to embed a YouTube video on your site is to use the code that YouTube provides for you on every video.
If you look at the bottom of the video you wish to embed you will see a box that looks like this one:
You can grab the embed code by simply clicking in the text box under the word "Embed" – this will highlight the code and you can then copy it (Ctrl C) and paste it into your web page at the appropriate position.
If you paste the code into Wordpress, make sure you're in Text mode and not Visual.
Q: What is a "Favicon" and how do I make one?
A: A Favicon is that tiny icon that many web browsers display in front of your URL name on certain websites. It also gets displayed on the task bar when the site is open, and in the favorites menu.
Your Favicon is just a tiny icon file, only 16x16 pixels, that is always named "favicon.ico" and that should reside in the root directory of your site – so if your URL is http://mysite.com then your Favicon is located at http://mysite.com/favicon.ico. In many cases that all there is to it, but to insure compliance with all web browsers you should also put the following line into the head of your HTML document.
<link REL="SHORTCUT ICON" HREF="favicon.ico"/>So how do you make a Favicon? There are a lot of ways, but one of the easiest is to use one of the online tools designed just for that purpose. A few possibilities are:
http://tools.dynamicdrive.com/favicon/
http://www.favicongenerator.com/
These tools take a square image and turn it to a properly formatted Favicon.
Remember that a Favicon is small; it is only a 16 x 16 icon, so it can't display a lot of detail. Keep that in mind before you convert your photo to a Favicon, the result may not be exactly what you wished for!
I like to make my own favicons using the tools I mentioned earlier in response to editing images. Because of the various devices and services these days that access websites, I make two sizes of favicons, 16x16 and 32x32 and put them both in the root website folder.
Q: How can I paste text from a Word document into my site without getting a bunch of gibberish characters?
A: This is a common problem that is usually the root of many formatting issues. People edit text in Microsoft Word and then paste it into your HTML editor or a WordPress post. It looks good until you publish the article or page and see mismatched fonts, misalignment or a bunch of "nonsense" characters like backwards question marks and diamonds throughout it. How can you stop this from happening?
First it helps to understand the reason it occurs. Word has a number of characters that have no HTML equivalent. Look at the double-quotes, such as "these". If you look carefully you'll see that the opening and closing quotes are different. But HTML only has one type of double-quote.
Fortunately the solution is pretty simple. You copy the Word document text into Notepad first. Then you edit Notepad, replacing the offending double quotes (and single quotes and apostrophes too) with the actual characters from your keyboard. Then you copy the final result into your HTML editor.
WordPress has an "Cleanup messy code" Word button on the toolbar to make importing Word text simple, without having to do the interim step of using Notepad.
Next we get into links...
Q: How do I make a link? How do I turn a picture into a link?
A: Hyperlinks are the greatest feature of the World Wide Web – seriously! You're probably too young to remember what it was like to visit a web page for the first time and click a link to get more information. The ability to link pages and to correlate information is what brought us to where we are today.
How do we make a hyperlink, or a link as we commonly refer to them?
A hyperlink is defined with an HTML "anchor" (a) tag. Like most HTML tags it has an opening and a closing tag, and everything in between the two will act as a link.
The following example is a simple link to Google:
<a href="http://google.com">Google</a>
I called it a "simple" link, I'll show you a more complex one in a minute. The first part, "<a href='http://google.com'>" is the opening tag. The hyperlink reference (href) statement gives the destination of the link, in this case Google's home page at http://google.com . Clicking on the word "Google" will send you to Google's page, leaving your original page. The "</a> is the closing tag for this hyperlink.
Now I will show you another link to Google, this one more complex:
<a title="Go To Google" href="http://google.com" target="_blank">Google</a>
You will notice that here are a few more parameters in this link. The "target='_blank'" statement will cause the hyperlink (Google in this case) to open up in a different page, very useful if you want to link your visitors to another page but keep your page open as well. On some browsers this will open in another tab instead. The next statement is "title='Go To Google'". This statement will cause the text "Go To Google" to be displayed when you hover over the link. This can be useful to provide instructions or more details about the link.
Now we know how to make a link (hyperlink). And we know how to put a graphic on our page. So to make a picture into a link we just put both methods together.
<a title="Go To Google" href="http://google.com" target="_blank">
<img alt="Go To Google" src="images/google.gif" border="0" />
</a>
If you've been paying attention you'll see how this works – we just made a hyperlink and placed an image of the Google logo in between its opening and closing tags. It's as simple as that. Once again this link will open in a new window or tab, remove the "target='_blank'" if you'd rather stay on the same page.
Q: When I post links on my site some end up with "%20" characters in them - how do I get rid of these?
A: Believe it or not this is usually perfectly OK, it just looks funny. The "%20" character is the HTML representation of a space character.
This occurs when you upload a file, say your brand new e-book, and the file has spaces in its name. So if the name was "My New E-Book.pdf" it will be translated into "My%20New%20>E-Book.pdf".
The solution? Simple – don't have spaces in the name! Sounds like a silly answer, but it's correct. So name your e-book ""My_New_E-Book.pdf", replacing the spaces with underscores or dashes.
I'm sure that was the easiest answer in this article!
Q: How do I align my text the way I want it? How do I change the fonts on my page?
A: Text alignment in modern web pages is determined by styling information. This information can be included on the web page itself or can be in a separate sheet called a style sheet – the style sheet will be a document ending in the extension ".css" (for Cascading Style Sheet).
To change the way your text is aligned or the font used (or a myriad of other display parameters) the first thing you need to do is find the style associated with the text you wish to modify.
Open your web page in your favorite text editor (I discuss Text Editors in the General Questions section if you don't have one yet) and look at the beginning of the document for a line that looks like this:
<link href="css/style.css" rel="stylesheet" media="screen" type="text/css" />
If you see a line like this it means your page is using a separate style sheet document, in this example it's called "style.css" and it resides in the "css" directory. You should open up this file as well in your Text Editor. You may also find this style information is embedded directly into the tags that surround the text you wish to modify – this is not a great design technique but it often happens when the code is generated by WYSIWYG (What You See Is What You Get) web page editors. OK, we will now assume you have found the styling information. If it's the third type I mentioned (embedded directly into the tags) then you need look no further, otherwise your next task is to determine which styling information is associated with the text you want to modify. First, look in the HTML document and find the actual text you want to modify (hint: use your Text Editors "search" function). Once you find the text look before it and after it for one of the following tags:
<div>- This is a "division" tag, its section will end with a tag
<span> - This is a "span" tag, its section will end with a tag
<p> - This is a "paragraph" tag, its section will end with a tag
HTML tags are usually (with a few exceptions) structured so that you have an opening and a closing tag. If you place a tag within a tag it must be "nested" as in the following illustration:
<div> - The opening division tag
<p> - The opening paragraph tag
Some Text To Display
</p> - The closing paragraph tag
<p> - The second opening paragraph tag
Some More Text To Display
</p> - The second closing paragraph tag
</div> - The closing division tag
With a good Text Editor if you select the opening tag it will highlight the corresponding closing tag, which is very handy on a big HTML document as it can get confusing otherwise.
Using the above example we can apply styling information in a couple of different ways. If the styling information was applied to the opening "div" (division) tag then it would affect both lines of text. If instead we applied it to one of the opening "p" (paragraph) tags it would only affect the text within that paragraph.
It is common practice to create a style that affects ALL of the tags, for example a style might be defined that affects all of the paragraph tags so that every paragraph on the page has the same font. In areas where you want the paragraphs to be in a different font you would use division (div) or span tags and define a new paragraph font for that specific area.
To identify which style applies to which area we can use a few methods. Of course if the style is embedded into the actual tag then it's a no-brainer. But if the style is defined in a separate CSS page or at the top of the HTML page it needs to have a way of identifying which page elements it will affect.
One method of identifying the element being styled is to assign it an ID. The ID is simply a name you use for reference, like "top" or "left" or "latest_post". An element assigned an ID can only appear once within a document.
If you want to create a style that you can use in several places within your page you assign it a "class". Like an ID it has a name that is used to make it easy to remember, but unlike an ID it can be reused within a document.
Confused yet? I don't blame you; even seasoned web developers often wrestle with style sheets. But don't worry, once you start using them they become much easier to understand.
OK, now that we've had a style sheet primer we can FINALLY get to the answer to the question – how do you change the font or alignment (or color or size) of the text? The answer is by modifying one of the following parameters (this is just a partial list):
color: - The color of the text, can be a name like “green” or a value like #346723
text-align: - The alignment of the text, values are center, left, right or justify
font-family: - The font family, often more than one is specified as you can’t be sure what the user will have available. Value examples are Ariel, Times New Roman, serif
font-size: - The font size in points, values are a number like 12, 18, 24
For a complete and thorough discussion of CSS and how to use it I highly recommend the excellent W3 Schools tutorial at http://www.w3schools.com/css/default.asp . Their tutorial not only teaches you everything you'd ever need to know about CSS, it also has a feature to let you experiment by changing settings and seeing the results instantly.
Let's summarize for those who just want the facts. To change fonts, text alignment and a host of other display parameters we do the following:
- We make a copy of our HTML and CSS files, just in case we mess something up!
- We identify the text we want to change.
- We determine which style sheet entry defines the style for our text.
- We either:
- Change that style sheet entry to meet our requirements or
- Copy that entry and create a new one with its own unique ID or Class, and then change our HTML page to use our new ID or Class.
Q: How do I add my logo to my page?
A: A logo is just a graphics file, an image. Graphics files come in a variety of formats, three of which are common on the web:
- GIF Format – This is an old format made popular by AOL in the days before the Internet. It's features (and limitations) are:
- It can only display a limited number of colors, which limits its use to drawings and icons.
- It can have a transparent background, meaning you can place a transparent GIF on a page and its "empty" areas will inherit the pages background color.
- It can be animated. Animated GIF's can be neat when applied tastefully, or they can be a horror when overdone.
- JPEG Format – A standard that allows for lots of colors in a very small file. It's features are:
- Millions of possible colors, making it ideal for pictures. Your digital camera probably saves in this format.
- No transparent background – if you use a JPEG for your logo you need to match its background to your page color.
- No animation.
- PNG Format –Combines the small size and rich colors of a JPEG with transparency of a GIF. Its features are:
- Millions of Colors.
- Transparent background possible. Note that this can cause problems with Internet Explorer version 6, but there is a fix for that.
- No animation.
To place a logo or any graphics on a page you use an HTML image (img) tag. For example, if we have a file named "logo.png" and we had it in our "images" directory we would place it on our page as follows:
<img src=”images/logo.png” alt=”My Logo” border=”0” />
The "src=" statement gives the name and location of the image relative to where the page is, in our case it is "images/logo.png" as we have our logo in a directory called "images".
The "alt=" statement is optional, but it is used to display text for old browsers that couldn't display images or browsers for the sight impaired. Some browsers, like Internet Explorer, will display this name when you hover over the image.
The "border=0" statement is also optional, but should be included if you don't want a border around the image. If you leave it out some browsers will place a border around the image, and some won't. If you put a number other than 0 here it will specify the width of the border in pixels.
One last thing about the image (img) tag – it is "self closing". You will note that it ends with a "/" character, and that unlike the tags we saw earlier there is no corresponding "</img>" tag to go along with it.
Some common problems for advanced DIYers...
Q: How do I make my web pages load faster?
Page load time is an important factor; users on slow Internet connections will not want to wait 2 minutes while your home page loads. Also, Google has started to consider load time in the way they rank pages.
Here are a few tips for making your page load faster:
- Graphics are usually the biggest culprit in slow page loads. Try to do the following:
- If you can, reduce the number of graphics on your page.
- Don't use HTML (r WordPress) to resize your graphics, do it yourself instead. A smaller graphic will take less memory space and will load a lot faster.
- Consider using PNG's instead of GIF's if you can.
- Keep all your images in a common directory, rather than scattered all over the place.
- Consider using thumbnail images (small images that link to big ones) f possible – they load much faster
- If you have embedded style sheets on your page consider moving them to external style sheets (CSS files). Many browsers will cache these so that subsequent page loads will be faster. It also allows you to use the same styles on different pages within your site.
- Same with JavaScript – if you use it on your page consider putting it in its own (.js) file.
- You can compress JavaScript files with tools like the YUI compressor from Yahoo - http://developer.yahoo.com/yui/compressor/. This removes the "white space" that makes the files readable by humans but is unnecessary for web browsers. Make sure you have finished editing the file first!
- If possible, move scripts to the bottom of your page. This will allow the displayable section of the page to load first.
If you're using WordPress there are a number of plugins that can cache web pages so they're readily available for visitors. Some performace plugins can integrate with Content Delivery Networks (CDNs) which will host your images and other site files in different regions around the world, reducing the distances files have to travel to reach visitors in different locations.
You can test your page load speed and get a good idea of which elements are slowing it down by visiting http://www.websiteoptimization.com/services/analyze/
Q: The picture on my webpage is too big, how do I fix it?
A: If you post a lot of pictures on your website, get used to using a good photo editor. There are dozens of good programs to choose from, I use SnagIt for quick tasks and Corel Paintshop for complex image editing.
If you're a Windows user you likely have Microsoft Photo Editor installed on your computer, which works great for simple image manipulation tasks.
There are also a number of free online image editing services that don't require you to install any special software. One popular one is Picnik, popular because it integrates with the flickr photo management website - http://www.picnik.com/
Resizing an image is important – while it is possible to use HTML or WordPress to resize an image it is much better to set it to the right size in the first place. It will drastically reduce the time it takes for the image to load, as I mentioned in response to the previous question about improving page load times. Smaller pictures result in smaller files.
Making an image larger should only be done as a last resort; the quality is usually degraded when you do this.
There are two operations that you can do to make your picture a different size:
- Resize – as it implies, this changes the size of the picture while keeping all the information intact. One thing that you will want to set here is the "aspect ratio", the ratio between the height and the width of the picture. You will usually want to preserve this ratio, as if you don't it can make the resulting image appear distorted. But in some cases, such as when the image needs to be an exact size, you may need to break this rule.
- Crop – this is the equivalent to taking a pair of scissors and cutting a section of your picture out. You might want to take a face shot of one individual from in a group picture, or eliminate a lot of unnecessary background.
Often your image manipulation will consist of both cropping and resizing – this is often the best way to make a picture fit perfectly without distorting it.
Q: Why do I have raw code displaying on part of my site, how do I get rid of it?
A: You probably have some incomplete HTML somewhere on your page. It may be a simple ">" character after a line of text, or as several odd characters. In most cases it means that you have either neglected to provide a closing tag (or perhaps didn't write the entire closing tag) for a page element, or added an extra ">" character after a closing tag.
The following examples illustrate this; in both cases the code has an error:
<p>This is my wonderful website!</p
This would show up as:
This is my wonderful website!</p
And in this example:
<p>This is my wonderful website!</p>>
You would get a display like this:
This is my wonderful website!>
If you're on WordPress, look at your page in the Text tab of the editor and scan for out of place characters.
If using a Text or HTML editor like Dreamweaver, look at your page in the code widow. Most tools highlight the matching closing tag for every opening tag, making this easier to spot. Some editors have HTML validators and will even fix these problems for you.
Q: Why does my website look weird in Internet Explorer (IE), yet looks normal in Firefox and Chrome?
A: Welcome the wonderful world of web development! You will soon find that one of the biggest frustrations that a web developer faces is to have a site display properly in all the different web browsers. Often a site that looks great in Firefox will exhibit problems in Internet Explorer or Safari.
There have been times that I wanted throw my computer out the window because my site looked great in Chrome and Firefox, yet was not right in IE! So, what can we do about this?
Web browsers function by interpreting the HTML code in your site and applying styling information provided in either the HTML page or in a separate Cascading Style Sheet (CSS) file. The key word in the last statement is "interpreting", and different browsers interpret these codes differently. The result is the page you think looks great in your favorite browser may not look so great in someone else's browser. And that is not a good situation.
If you don't want to mess with HTML and CSS (who could blame you), then find an expert on a site like Craigslist or Fiverr to resolve the issue for you.
If you're a DIYer and want to learn how to fix these issues yourself, keep reading.
- Start by arming yourself with all of the popular web browsers, so you can check your pages yourself rather than suffer the embarrassment (and lost sales opportunities) of having someone else point out the flaws when you page is published. If you are on a Windows computer the list would include:
- Microsoft Internet Explorer – actually IE came with your Windows computer so you already have it if you're on a PC. It's the browser that you will find causes the most problems, but as it's also one of the most popular browsers you must always check your designs with it. To make life even more interesting, there are different results with different versions of IE, as of this writing version 9 is the most current but there are still a large number of users with versions 8,7 and even 6 that you need to cater to.
- Firefox – You must always test with Firefox, especially if your target audience is tech-savvy as it's likely the browser that they will be using. It's available for both PC and Mac users at http://www.mozilla.com/en-US/firefox/firefox.html.
- Safari – included with Macs, Safari is also available for Windows users. As it's the standard browser for Apple users there is a large audience who are using Safari, so you need to make sure your site looks good for them. You can download a copy for Windows at http://www.apple.com/safari/download/
- Chrome – this is Google's browser, based upon the same technology that drives Safari so it often produces similar results. It has become quite popular, and since it's a Google product you can be sure it will continue to be popular. Download it at http://www.google.com/chrome
- Opera: not as common but used by many professionals and purists, Opera is known for its faithful interpretation of HTML standards so it's a good browser to test on. It is also a popular browser on many mobile platforms, another reason you want to check your site on it. It's available at http://www.opera.com/
- Most browsers come with built in code inspectors so you can view the HTML and CSS behind any element on your page. This is essential in pinpoint problems, especially with CSS. There are also browser debugging add-ons you can install if your browser lacks a built in tool, or if you just don't care for the one it has.
- Run your design through the verification service at http://validator.w3.org. Not only will it tell you if your theme meets with standards (always the best way to ensure cross-browser compatibility), it will also list the errors it finds and offer suggestions as to how to repair them.
- Check how your site looks on dozens of different platforms and browsers at http://browsershots.org. This is an excellent free service that eliminates the need for owning dozens of computers just to check your website.
- Also remember that different sized screens will display your site differently. http://viewlike.us is a good site to test this.
- Google. When you run into a wall, a search on Google may lead you to a forum or tech help site that has the answer you're looking for.
Armed with these tools and a lot of practice, you should be able to fix most problems. Occasionally, there's that problem that's seems impossible to fix. That may be the time to bring in an expert, or perhaps remove the element that's causing problems.
Note: If you are buying a WordPress theme for your new site do yourself a favor and check it out on your selection of browsers first. If it doesn't look good on one of them either reject the theme then contact the designer to get it fixed or apply one if the other techniques I mention here to get it working.
No comments:
Post a Comment