|
|
HTML - A Website Language Explained - For Over 35s
This is a very perfunctory look at the website code HTML, for those who never did any kind of Computer Studies at school and have never had the need or opportunity to look 'under the skirt' of your average website. There's nothing that an experienced webmaster will find here that's not very basic, but for those who have just begun to discover the 'website' and especially those venturing into... maybe starting one of their own, here's a basic understanding to pique the interest and possibly kick-start the learning process.
If you don't even know what I'm talking about when I say HTML, as a means to follow what we're talking about as we go, then just go to this page - Home Based Business & Affiliate Center and click on the 'View' option at the top of your browser and select 'Source' or 'Page Source' (depending on your browser type) from the drop-down menu. You will be confronted by a Notepad document with silly looking symbols, letters and numbers on it. Well, that is HTML code. It's the coded 'blueprint' for the web PAGE (not the whole website) that you're looking at. Keep the Notepad document open to refer to as we discuss each part.
P.S. I have had to add some spaces into the example codes that wouldn't normally be there, otherwise the example codes would actually 'work' and influence the way the article looked in those article websites that accept their article submissions with html code ability. But you'll get the idea...
HTML is nothing more than a set of instructions for your browser program (or any program used to read web pages) to interpret and present the web page in a visual form for you to see. It's made up of individual symbols, with each either have a meaning in itself or sometimes a set of them (often many characters long) representing a simple instruction to place any part of the web page, say... an image in a certain spot or to perform a function.
Firstly, at the top, you'll see the < html> tag, which is identifying the language being used. Then you see a tag. That's comparable to the 'header' on a letter, where your company name, address and phone number would go. It's there for the Search Engines, like Google and Yahoo etc, so they can, at a glance, see what the web page is and what it's about. Under the < head> tag there are < meta> tags, each of which contains information about different aspects of the web page like, the title, a short description, the program used to create it, copyright information, keywords that relate to the subject matter on the web page and other instructions that are meant solely for the Search Engine robots (spiders, crawlers - they have different names) when they visit.
The < head> section is then closed off with a < /head>. That's an important part of the html code. Every tag that contains an instruction needs to be 'finished' by using the same tag with a '/' in front. This is telling the program that this particular instruction type is finished. It's like saying 'over' at the end of a radio transmission.
There are too many different types of instructional tags to cover in a simple article, but covering a few of the most common ones will give you the basic idea. Next is the < body> tag. This is the start of the part of the web page that will be visible in the browser. In the case of my webpage example, the tag is long because it contains some specific instructions, which apply to the entire web page. They concern the background of the page (in this case an image is being used for a background that forms the vertical stripes), the colour of the page text and the different colours of any 'hyperlinks' on the page (before during and after they are being clicked by someone).
Obviously, it would be a huge task to systematically explain each entry as I have done up to now, but suffice to say, there are various kinds of tags containing coded instructions that tell the browser (or whatever program is used to produce the visual representation of the HTML code) what to put in the web page, where to put it, what colour to make it etc. Just with regard to colours, all colours of the rainbow are represented by a six digit system called the 'hexadecimal' system, which we don't need to get into except to say that each code that looks like '#A1B2C3' represents a particular colour.
The more oft used coded instructions found on a web page are:
< font> - A font tag is the instruction to the browser concerning what type, size and colour the text in between these tags is to be. When anything about the font changes, you will see the new tag containing the new instruction, which may simply be a colour change. For example:
< font face ="Arial" color="#FFFFFF size=" 4">.
This represents text written in Arial font, coloured white (#FFFFFF), size 4 (which is 14pt text).
< b>, < i>, < u> - Text can also have other tags within the < font> tag, which denote, as these do respectively, bold type, italic type and underlined type. When the bold, italic or underlined type is discontinued, there needs to be a corresponding < /b> or < /i> etc, to instruct the program to go back to the standard type.
< p> - is a paragraph break. It can also contain extra information like where to align the entry (left, right, center or justify). For example: < p align=" left">
< br> - is a single line break. It doesn't carry any extra instructions.
< table> - A table is simply a box. It can be any size, in any position and have borders or not, which are coloured or plain, dotted or solid etc. It can have a specific background colour, which is different from the main page background. It can contain different numbers of rows or columns or just be a single open box. If the table is divided into rows or columns, the different sections within the table are called 'cells' which can all have the border, size and background options as the table.
< tr> - Defines a row within a table. It is always contained between a < table> and < /table> tag.
< td> - Defines the attributes of any given cell within a table. Again, it can only be between a < table> and < /table> tag. For instance: a 'cell' or < td> tag might look like this:
< td width="100%" height="64" bgcolor="#FFFFFF" style="border: 1 solid #BF0000; padding: 2" >
In this particular code the width indicates 100% (of the table in which it is contained), the height is represented as 64 pixels - both percentages or exact pixel measurements can be chosen. The background colour is, as you can see, #FFFFFF, which is white and it has a solid border, 1 pixel thick and the border colour is #BF0000, which is a red/brown colour. You also see another attribute - padding, which in this case is '2' pixels. This is the 'buffer' zone around the inside edge of the cell so that the contents of the cell (text, image or whatever) don't sit right up against the edge of the cell border.
< a> - is an 'anchor' TAG. It is more often used to create a hyperlink to another webpage (in the same site) or another website altogether. The 'hyperlink' anchor will have the tag < a href>. Hyperlink tags will contain the location the user is to be taken. For instance, a link to my example website would look like this:
< a href="http://www.online-plus.biz" target="_new">Whatever text is to contain the link
You will also notice a 'target' attribute, which determines whether the destination of the link opens in a 'new' browser window (in this case) or it can be designated to open in the same window.
The < a> tag can also be used to 'link' to another point on the SAME web page. In this case the tag used will still be the < a href> tag but the point to which you wish it to go to will have a < a name> tag. For example:
< a href="whatever">The text to be the link< /a> and the point in the page to which it links will have a tag < a name="whatever" >Word or image at that point linked to< /a>
< img> - Is the instruction to insert an image. Of course, the program needs to know which image to insert so, this tag will contain the location of the image (using 'src', meaning source), which will generally be within a folder on the server, which hosts the website. However, essentially, the address (URL) of ANY image on any public server can be inserted and that image will appear on the web page. It is represented like this:
< img border="0" src="images/logo1.png" width="195" height="66" >
This instruction says the image (with the file name 'logo1.png') has no border ("0"), it's source (where it's located is the 'images' folder within this website). It also has the measurements of the image in pixels. If an image from another website needed to be inserted, the full URL of the image would appear. For instance, if this image was located on another website server, instead of the 'src' being just 'images/logo1.png' (which is a local website address), it would need to be 'http://www.other-website .com/images/logo1.png', so the program would know exactly where to go to retrieve the image.
That's about all that can be covered in a short (or not so short article) however, I hope that to those who have either never seen HTML code or those who have considered it some mysterious secret technical jargon, will now see it as more friendly and understandable.
In my earlier days I found such websites as W3Schools as an invaluable source in the process of understanding what all the 'gobbledygook' meant. There is also a full list of all the different HTML tags and their meanings. I'm sure my over 35's peers (and possibly even younger ones) will too.
The 2005 Edition of Steve Brennan's popular ebook title 'The Affiliate Guide Book' is available now. He also operates a number of Affiliate wesbites which include The Diet & Weight Loss Place
Free Online Tools to Design (and Maintain) Your Website
These days, it seems that everyone has a website. Unfortunately, many of these websites are either bland, or sloppily designed by people who don't understand how to use HTML effectively or are intimidated by it. And, they don't have the money to spend on a good page editor, so they limp along using the page templates that their website might provide, or they attempt to use programs like MS Word, which offers conversion to HTML. Yet, there are many free tools available that people can use to give their sites some extra polish that will put them a cut above most sites on the WWW. Here is a listing of three of my favorite online tools that will help you create and manage your site:
Through The Looking Glass
My mother used to take me along when she visited an old lady down a cobbled lane who had a crystal ball on her dining room table and a pack of playing cards. My mother was superstitious and really believed a lot of what she was told by the old lady. She wanted to know what the future held not only for herself but for me, her only little boy. I was about five or six years old at the time, and used to gaze at the reflected images upon the crystal ball of the sunlit window behind me and the lace curtains, although the old lady would place her hands at either side of the crystal ball and say that she could see the future and told of what she saw, I could only see the reflection of that window with the lace curtains. The old lady was either a genuine medium or was just guessing what my mother wanted to hear to keep her coming back for more of the same, and make herself a small income to supplement her pension.
No More Jargon! Pamper Your Audience!
When your company built its website, did you think about the content (the text) of your site? Did you write it for your customers? The answer to these questions is often 'No.'
One-Product Sales Sites: Avoid These Top Blunders
One product, one long web page: this kind of web site is sometimes called a sales letter site or mini-site, and it focuses on one and only one goal, as many sales of that one product as possible. With a one-product sales site, no distractions, no subsidiary goals, such as newsletter signups, are allowed to interfere with that goal. So let's look at some common mistakes and omissions for a sales letter site.
Sales Versus Customer Oriented Websites
Should Generating Revenue From A Website Be The Prime Motivator?
Keep Your Navigation Highly Visible
Effective navigation stands out. It's clear, obvious, and highly visible.
Website Design: 10 Smart Tips To Improve Your Ad Copy
Your website design may be affecting your sales in ways that you may not believe.
Eight Website Pitfalls, and How to Avoid Them
Clutter: Too much noise, too much text, and too little white space mean that customers ignore the content. Customers often scan pages quickly, only reading titles or input prompts until they reach the content they want. Be concise, break text up with headings, not too many fonts and consider the reading level of your audience.
Creating Your First Website
Building your first website can be very frustrating. It looks fairly easy, but almost always turns out to be more complicated than you expected.
When Good Computers Go Bad
Remember the day that you got your new computer (or the hand-me down from Uncle Larry) and you pulled that shiny case out of the box? Once you finally had all of the cables properly mangled into an unmanageable ball, you powered on, the screen lit up and off you went. The PC was fast, programs loaded in the blink of an eye, and Internet surfing was a breeze. Those were the days.
Bad Web Design: ActiveX
ActiveX uses an interesting method for enforcing security ... it doesn't. Well, that's not exactly true. What happens is when a web page requests an ActiveX control the browser determines if that control is already loaded onto your system. If it is the ActiveX control is executed. If not, the user is asked if it is okay to install the control. Additional information about where the control came from and it's security implications is also included.
Its No Good Having A Killer Product If You Dont Have A Killer Website
Read the title of this article over a couple of times in your head so it really starts to sink in.
Elements of Graphic Design for Your Website
We've all seen them. Poorly designed web sites that make you cringe as soon as they load. But how do you keep your website from becoming, well, ugh. You could hire a professional web designer, and that's expensive, or maybe you already hired a professional, or someone who claims to be professional, and you don't like what they're doing with your site. It all comes down to the K.I.S.S. principle; keep it simple stupid. And you're probably asking well what does this really mean for web design.
Having A User Friendly Website
Let's look at what your user wants to see at your website.
KIS - Keep It Simple
There are many ways to add fancy bells and whistles to your website, but most of them are not going to do you any good. In fact they will slow down the time it takes to load your website and take up valuable space that you are paying for. Besides that, people with older computers will not even be able to see some of these fancy additions you are using.
Simple Steps To Proper Web Design
Over the course of the last decade, the Internet has grown beyond all expectations. Each and everyday there is a new website that is being developed. The biggest challenge a new website will face is getting viewers to stay on their site long enough and to attain high search results with search engines.
Awards Program Debate
Daily article:
Meta Tags ? An Introduction
A long, long time ago? In a galaxy far, far away?meta tags were the key component to search engine rankings. Okay, it was about 2 years ago, but that's a long time in the Internet galaxy. Although still relevant, the evil empire?er, Darth Google, has led a movement by the search engines to de-emphasize their importance. Despite this effort, meta tags are still important. They represent the only method for a site owner to exert some control over how pages are listed in search engine results.
So Much About META Tags!
I've written about META tags in the past, and I thought I'd help you expand your search engine optimization efforts and increase your web hits.
Looking for a Web Design Company? Use a Web Design Directory
Your business website tells a lot about your company. A poorly designed website will have your visitors questioning the quality of your business. A well thought out elegantly designed site would instill confidence in your visitors that you are a credible business to deal with. There is a saying in advertising, "It is better to not advertise than to advertise poorly". The same holds true for web design. There are so many Web Design companies now. How do you make an educated decision on which one to choose? Like every market that is saturated, you always see ads that read, "Hire us we are the best". Well how do you know that statement is true? Wouldn't it be great if you had a resource available to you that pre-screened Web Design Companies to narrow down your choices? To answer that question, yes there is, use a Web Design directory. Web Design directories are usually run by companies in the Web Design Industry. Using their knowledge to pre-screen the Web Design companies that submit their contact information to the directory insures that only quality Web Design Companies are listed. Most Web Design directories are categorized by region. Some use states, some use countries all in hopes of making your search that much easier. If you live in Alabama then you simply click the link that reads, "Alabama Web Design". Some Web Design directories will also allow you the customer to submit a quote request. Then they take your information and forward it to Web Design Companies that meet your criteria. This can be very helpful, as it eases the process of finding the perfect Web Design Company for your project. Along with a directory of different Web Design Companies, you may also find helpful articles to educate yourself, and help make the decision process a little easier. Look for articles that answer your questions, "What is PHP", or "How do colors affect your visitors' experience". Articles like these can give you a little incite as to what makes up a high quality website. Your business website is very important to help strengthen your image. It is often the first impression a potential customer will have about your company. Using a Web Design directory can ensure your visitors have a positive first impression that causes them to contact you to do business.