Entries Tagged 'HTML' ↓

Anyone serious about having a website needs to know something about HTML, the computer code of websites.
HTML is a simple language - although some native speakers would argue that so is Swahili - it is made up of characters from your keyboard. No fancy heiroglyphics.
Browser software, such as Internet Explorer or Mozilla Firefox, reads the HTML and creates a screen display according to instructions conveyed within “tags” in the HTML. These tags tell the browser how to display text and colored areas, and how to import and display pictures in specified ways to create eye-pleasing web pages.
You can view the HTML code of any web page by right-clicking on a blank area of the web page, then selecting “View Source” or “View Page Source”. A new window will open and you will see the HTML code.
You can learn HTML by saving this code to your computer and experimenting with it. Pick a simple-looking page to start with, preferably a home page. Home pages are very often named “index.htm” or “index.html.”
With the source code visible on your screen, you can save the web page to your computer by clicking “File/Save As” or “File/Save Page As”. When you do this, place it in a new folder. Thus will help keep your learning project organized.
You can tell your browser to read the version of the locally saved file by clicking “File/Open” or “File/Open File” with the browser open, and browsing to the file you just saved. If you have a browser with tabbed viewing, use a new tab for this so you can refer back to the original version hosted on the internet.
When you open the local version, you may notice mising graphics - the pictures may not have saved along with the HTML. If so, go back to the web version. Save each missing graphic individually by right clicking on the graphic and selecting “Save Image As”, and save it in the folder you created earlier. Do not change the file name of the picture.
Go back to the browser view of the locally saved web page and refresh the screen by clicking the “Refresh” button or by pressing F5. If all goes well, the missing picture should render. An exception could be if, in the original website folder structure, the images are saved in a subfolder.
If you were advanced, you would create an identical subfolder and save the images there. But since you are a newbie, forget about it and live with what you have.
Theft Complete! Get started…
Now that you have recreated the web-based page locally, you can learn by observing and modifying the HTML. You will see the resulting change on the displayed page.
To do this, you will have the same HTML file open in the browser and also in Notepad. The browser should be pointed to the local HTML file as described above. Then, open Notepad and open the same HTML file in it. At the bottom of the Notepad window, where it says “Files of Type:” Be sure to select “All Files”. If you don’t do this, you will not even see the HTML file listed in the browse window.
Arrange the browser window and Notepad window so you can see both. I like to keep the browser maximized, and Notepad filling the bottom half of the screen “in front” of it. When I make changes in the Notepad file, I click “File/Save”, then click the refresh button on the browser. The Notepad window minimizes by itself and you will have just enough time to see the changes you made modified in the browser display.
Don’t worry if you make a mistake. If your change was unfortunate, reopen the Notepad file by clicking the appropriate button at the bottom of your screen, then, in Notepad, click “Edit/Undo” then “File/Save”. Refresh the browser and the boo-boo should go away.
I will not be teaching HTML in this article. There are great resources for learning HTML in depth at Poingo Resources.

However, I will give you a few things to start with:

1. All HTML “tags” begin and end with characters known as “angle brackets”, which are also used for “greater than” or “less than” in math equations. I can’t place them in this article because they might cause your browser to go wacky. I will use { and } in this article instead to represent angle brackets.
2. All HTML files begin with {html} and end with {/html}
3. HTML files have two main portions, “head” and “body”. The “head” portion begins with the tag {head} and ends with the tag {/head}.
4. The head contains a page title and “meta” data which is non-displayed information about the web page itself. The “head” portion of the page is non-essential. You can prove this to yourself:
In the Notepad file, remove the {head} and {/head}tags and everything between them. File/Save Notepad, refresh the browser, and see what happens. The appearance might change if, for example, the head contained a link to a separate style sheet, but the actual content should still be there.
5. The “body” portion begins with the tag {body} and ends with the tag {/body}. It contains your content, so it is quite essential.
6. In addition to the HTML tags described above, there are many other tags which format text, create tables, link to pictures, link to other sites and even open pre-written emails in your own email software.
7. Many tags, like the ones above, have starting and ending tags. For example, if I wanted to bold a portion of text, I would first place a {b} tag before the text, then follow the bolded text with {/b}.
8. Other tags don’t require an ending such as {br}, which gives you a line break, and {p} which starts a new paragraph.

Mutilate Web Page Now!

You now have enough information to be dangerous. Let’s put it to use.
Lesson One - Create Obscene Text
In the Notepad file, look for a chunk of recognizable text in the body section. Change the text to something funny, stupid or obscene, because education should be interesting. Click “File/Save” in Notepad and refresh the browser. Your funky text should display. You have now mutilated your first web page. Congratulations!
Lesson Two - Bold Your Obscene Text
In the Notepad file place begin-bold {b} and unbold {/b} tags around some text. Save the Notepad file and refresh the browser. See how it looks. You have now gone boldly where you have not before.
Lesson Three - Enlarge Your Obscene Text
To make your text really big, try surrounding it with {h1} and {/h1}. In addition to making your text ridiculously large, this tag tells search engines that you think this text is REALLY IMPORTANT!!!
Lesson Four - Disappear and Reappear a Picture
As we learned earlier, pictures are separate files. They are invoked by a special tag which can look like this: <img src=”http://www.my-ftp.com/images/westgate.jpg”> Find something which looks like this and delete the entire expression, including both brackets. Save Notepad and refresh the browser. Goodbye picture!
Now go back to Notepad and click “Edit/Undo”. Again save Notepad and refresh the browser. Hello again!
Got the hang of it? Steal, mutilate and and learn.

Copyright 2006 Mark Meshulam

Author: Eric Lester

XHTML, the standard, was first released back in 2000. Roughly five years later we begin to see major websites revised to use this standard. Even the favorite whipping boy of standards-compliance punditry, Microsoft, presents their primary homepages, msn.com and microsoft.com in XHTML. Standards compliant XHTML sites are still the minority. The reason is simple. When the W3C released the new standard, the rest of the web running on HTML did not cease to function. Nor will the rest of the web, written in various flavors of HTML, cease to function any time soon. Without any pressing need to conform to the new standard, designers continue to use old, familiar methods. These methods will perform in any modern browser, so why bother switching?

These sentiments are similar to ones I experienced. A kind of “if it’s not broke, don’t fix it” mentality sets in. Whether HTML was “broken” or not is a different argument. To the casual Internet user, their standards are fairly direct. If a site displays without noticeable error and functions to their satisfaction, these standards are met. Whatever additional steps the browser took to make such display possible is irrelevant to most users. This kind of mentality is difficult to overcome in designers accustomed to their old methods.

Continue reading →

Author: Leslie Pinczi

Article: The most popular method to build webpages today is to use WYSIWYG (What You See Is What You Get) software. Microsoft FrontPage and Macromedia Dreamweaver are prime examples of WYSIWYG software. Both programs allow you to create webpages as though you were creating a document with your favourite word processing software like Microsoft Word or WordPerfect. Its as simple as entering paragraphs, headings and inserting clipart or images.

WYSIWYG software like those listed above are prefect for beginner webpage builders who want webpages constructed quickly without having to learn HTML (Hyper Text Markup Language).

All webpages are brought to life using HTML codes, regardless what webpage building software is used. WYSIWYG programs simply create the HTML codes as you construct a webpage (in the background, without you knowing), so you don’t need to understand them.

Continue reading →

There Is Nothing Wrong With Using WYSIWGY Editors, If You Already Know How To Write HTML

Author: Regina Stevens

This article is not to persuade anyone to change their existing methods of producing websites, nor is it my intention to offend anyone. I wrote this article to defend people who like to use WYSIWYG editors.

There really is nothing wrong with using a WYSIWYG editor - especially if you already know how to write HTML and scripts. When you know how to write your code, you can better understand what is going on with the code. Actually, if you don’t know how to write HTML, a WYSIWYG editor can be a good learning tool.

If you are designing websites for profit and you do not know HTML very well, then reaching project goals will be difficult and you may have some unhappy clients, which is never good. I would start out designing small websites or build websites that do not have a deadline.

Continue reading →

Author: Lala C. Ballatan

Persons engaged in website design, here’s a scoop for you! Would you just like to know that by understanding the basics of cognitive psychology around color and patterns, we could further improve our Web design!

Designing a Web site does not only concentrate on making web pages of a certain site interesting and impressive. This skill and talent must also be used to ensure the user-friendliness of a certain site and must strive to reach the widest range of users possible.

So what’s this about psychology? It simply implies that by understanding the capabilities of the human eye, we can produce Website designs that are more user-friendly. Being user-friendly means that our website design will not only cater for normal sighted Internet users but also to those partially sighted, blind or estimated 8-10% of men with red-green colour blindness.

If you don’t know anything about vision and colorblindness and their reaction to various designs, then you must start learning now! ‘Normal’ vision is subject to huge variances. Even the size of elements will affect an individual user’s perception of colour. The colours and the intensity of shades you choose to use in your Website design will be discerned differently by every individual who visits your Website.

Inconsistencies in color patterns are affected by changes in the ambient lighting levels. It’s like changes in your hair color depending on the amount of lighting it was exposed. Some people even see blue colors in some objects like clothing wherein others do not perceive. These persons just happen to have more blue sensitive cones (photosensitive cells which convert light energy into nerve impulses) in their retina. They seem to view the world with ‘blue-tinted spectacles’. As a web desinger, you have to be aware that these conditions are the reasons why your perception of your Web design may be different to other people and certainly are not the same with everyone else’s.

The key aspect to contemplate to achieve accessibility, aside from impaired vision, is by being aware that your design might be manipulated by assistive technology. Screen readers or magnifiers are examples of this. They are software the physically disabled employ to enhance their experience of user interfaces. Some Web users can only read a certain combination such as yellow text on a black background, which allows no room for greyscale.

In order to have good legibility for users with certain visual difficulties and impairments, strong contrast can be a main ingredient in your design. Test the effectivity of this by manipulating screenshots of your design in a program like Adobe Photoshop. Try converting the image to greyscale then make the screenshot monochrome to see how it might be viewed using the most extreme visual manipulation — do this by increasing the contrast level to +100. This is a particularly useful approximation of difficulties colour blind users may experience in discerning one colour or shade from another.

You can start adjusting your color application now and keep in mind that your designs will not be considered impressive if few people could discern them. -30-

For comments and inquiries about the article visit http://www.ucreative.com

About the author: Lala C. Ballatan is a 26 year-old Communication Arts graduate. Book reading has always been her greatest passion — mysteries, horrors, psycho-thrillers, historical documentaries and classics. Her writing prowess began as early as she was 10 years old in girlish diaries. With writing, she felt freedom – to express her viewpoints and assert it, to bring out all concerns — imagined and observed, to bear witness.

Author: Eric McArdle

If you are a webmaster or looking to design a website of your own, you will need a web editor.

A web editor (or html editor) is basically a program that organizes your website code by color coding the different commands, and structuring your code in a logical manner.

Here’s a few web editors that you should consider:

NotePad Simply put, if you want to hand code your website top to bottom, use a word editor like notepad or microsoft word.

NoteTab Lite http://www.notetab.com Another very basic html editor with a few more features than notepad.

1stPage2000 I use this web editor and highly recommend it! There’s a novice, intermediate, and expert level so it can be easiliy used at whatever skill level. Tons of features and it’s free. http://www.evrsoft.com/download.shtml

Now, you can use a WYSIWYG editor, but they tend to screw up your code. Anyways, learning how to write your website’s code will save you time when you need to make changes because you’re familiar with your code and know what to change.

These webpage editors aren’t mandatory in order to build a website, but they should be seriously considered if you’re looking to write valid web coding!

About the author: Eric McArdle is the publisher of the TrafficaZine Online Marketing Newsletter which is a publication designed to assist the online marketing and/or web designing entrepreneur with the basic tools and resources that will greatly assist them in taking further steps into bettering their online business.

Author: Debra Hamer

Do you have a website or are you planning on creating a website in the near future? You owe it to yourself to at least learn some basic HTML (HyperText Mark-up Language). Even if someone else is creating and maintaining your website there are some basics you should know. What if that person is not available and you need to add or make changes to your website? I´ve always believed if you have a business, computer, website, or whatever, you need to know how it works. Don´t depend on someone else. Besides why pay someone else when you can do it yourself free of charge.

In this article I will explain some basic HTML formats for you. Believe me it will come in handy at one point or another. I, myself, have only learned some of the basics and I have been able to add, change, and make corrections on my own website by myself.

When you come across a website you like and would like to use a similar layout or text pattern, look at the page in HTML code. You can do this by clicking on “View’ at the top of the screen, then choose “Document Source’ or “Source’ and you can see the page as a HTML document. If you are using AOL then right click on any area on the page without any text or images, then select “View Source’. At first it will look like Greek to you but after learning some basic HTML it will start to make sense.

First you will need a word processor program such as Windows “Notepad’ or any other word processor you might have. You are working with simple text. You will need to save your document using the “save as’ command and give it an html suffix, ex: Mynewdocument.html or Mynewdocument.htm (you can use either suffix html or htm).

HTML works in a simple, logical format. It reads top to bottom and left to right. What are used to set sections apart like bigger text, smaller text, bold text, underlined text are tags. Tags are commands. If you wanted a line of text to be bold you will place a tag at the point you want the bold text to start and a tag at the end of where you want the bold text to stop.

All tags start with the less-than sign < and end with the greater-than sign >, always. What is between these signs is the tag or command. You will need to learn what tag does what. Let´s first learn the bold command. The following is an example of making your text bold. The tag for bold is “B’. You can use uppercase or lowercase, it doesn´t matter. Here is an example:

This is how it will look in HTML format - <B>This text needs to be bold</B>

Here is how it will look when converted to normal view – This text needs to be bold   Did you notice the slight difference in the ending tag? There is a slash / before the b. That means it is the end tag. Only the text between the start and end tags will be in bold. Now let´s add a twist by putting one of the words in italics.

This is how it will look in HTML format - <B> This <I>text</I> needs to be bold</B>

Here is how it will look in normal view – This text needs to be bold   There are some tags that are an exception to the rule about having to have a start and end tag. You don´t have to have an end tag when using these tags. Here are some examples.

<HR> this command places a line across the page. HR stands for “horizontal reference’.

 this command breaks the text and jumps to the next line, like the return key.

<P> this command stand for “paragraph’, it does the same thing as the  command but skips a line.

Every page you create with HTML will need the HTML tag <HTML> which denotes it is an HTML document and the end HTML tag </HTML> will be at the end of your document. The next tags will be your start Title tag <Title> and your end Title tag </Title>. The title of your document will go in between these two tags. The title will show up in the title bar on your browser when you are looking at the page in normal view.

The following are some tags for Headings (there are 6 heading commands) and Font size (there are 12 font size commands):

<H1>This is Heading 1</H1> – H1 is the largest heading   <H6>This is Heading 6</H6> - H6 is the smallest heading   So, by using H1 through H6 you can change the size of your heading. Same applies to your font size. You will use <font size =’+1’> through <font size=’+12> and don´t forget your end tags!

You may notice that your text always starts at the left of the page. If you want your text to start in the center or to the right you will need to specify where you want your text to start. Here are some examples of aligning text:

<CENTER>Center this Text!</CENTER> - your text will be centered on the page.

To align to the right you need to set the text as a paragraph unto itself by using the <p> tag and adding an attribute to it.

<P ALIGN=’right’>Text here will align on the right of the page</p>

Why did I put an end tag </p> since the paragraph command does not require an end tag (remember exceptions to the rule?) Anytime you use an attribute tag, as in the above example, you will need to have an end tag, whether you´re using the paragraph command <p> or the return command . Using the <P> or

command by itself does not require an end tag, but if you are adding an attribute then an end tag must be used.

Adding an image to your page would require the following tag:

<IMG SRC=’image.jpg’> -you would replace “image.jpg’ with your own image file. IMG stand for image and SRC stand for source. You´re telling your browser where to find your image file. Your image file could have a gif, jpg, or a bmp association.

Ok now let´s get a little more complicated and create a hyperlink on your document. This creates blue underlined words on the page that someone can click on and go to another location. An example is you´re creating a link to another website.

<A HREF=http://wwwmyhomepage.com”>Myhomepage</A> - this is what in looks like in HTML code. Note you are adding a description of the link that will be underlined, see the example below.

Myhomepage – what it looks like in normal view. When someone clicks on this link they would be taken to that particular page. I just used Myhomepage as an example.

This is a very important HTML format for when you need to add links onto your webpage. You may already know or will learn that reciprocal linking is very important in promoting your website and obtaining a higher pagerank with the search engines. Sometimes the HTML code is provided for you and all you have to do is “copy and paste’ the code into your webpage. Often it is not, so you have to figure out how to put the information into HTML code yourself. Just learning this HTML command has been a timesaver for me.

I hope this article has helped you learn some basic HTML and how it can benefit you. I know, I know there are HTML text editors out there you can use and they can do all of this for you. I have used a couple myself, but I still like to know how to do things on my own. I bet you do too!  Sometimes it´s just faster and easier to do it yourself.

I´ve just given you some very basic formats in using HTML, but you can find a lot more resources and information about learning HTML on the internet. Just do a search and I´m sure you will be overwhelmed at what´s out there.

About the author: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Debra Hamer is the owner of the http://profitfromhomebiz.com website where you can find lots of tips, tools and resources for starting your own work at home business. Visit her PlugInProfitSite at http://www.pluginprofitsite.com/main-4256 to have your own website setup and ready to go within 24 hours,  complete with everything you need to start making a profit. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Author: RKD Unger

10 Search Engine Optimisation (SEO) tips for HTML designers Article by Rkd Unger: www.internet-marketing-australia.com

Web design and SEO component

Search engine optimisation has been a hot topic for a while. Many owners understand that without professional SEO service their investments in websites are likely to fail.

It is typical though to see a professionally designed pages that miss or ignore the SEO component.

Web designers have plenty of things to take care of or worry about.

Static or dynamic, ASP or PHP, HTML or XHTML, browser compatibility - this is just a very short list of problems they face.

Being busy with their primary tasks web designers often miss search engine issues.

That can be a primary reason for many websites and web pages not to appear in search results at all.

Although SEO should be performed by specialists, some initial efforts can be applied during the web design stage.

10 Tips for Web Designers

1.Do not miss the Title tag. Although it is optional, it has a maximum weight for search engines. SEO specialists spend hours researching and creating good titles. Do your client a favor - if SEO is not budgeted for make sure that every page you work on has a meaningful title. 2.Do not miss DESCRIPTION meta tag. All meta tags are optional. Be aware that description is second important SEO issue. Try to match it to title.

3.Make sure that title and description are located within HEAD.

4.Do not use dynamic pages if you can. The project architecture may dictate usage of PHP, ASP etc. However search engines are reluctant to index them.

5.JScript is fun to use but it makes it harder for search engines to understand the content of the page. If you need just a menu highlight try to use style instead of script.

6.Pages with Flash are difficult to optimise for search engines. How about web sites that are built on Flash? They impress visitors. However how do visitors find such websites?

7.Utilise style sheets. Most of modern pages use style sheets. Very few utilise them effectively. That is why web pages are overloaded with HTML attributes. That makes them heavier and slower in load.

8.Search engine look for text - not images. If possible use text rather than image.

9.Text of the page should be at least 250 words. Search engines do not score pages with just a few sentences.

10.Text of the page shouldn’t be very lengthy. To make search engines happy stick with the page size of 15KB - including images.

About the author: RKD is the founder of http://www.internet-marketing-australia.com. He is the author of IMOR/SEOR methodology for search engine analysis of web sites.

I’d mentioned earlier how enclosing my recent entries lists in headers had caused Google’s search results to become increasingly irrelevant. Too many people were being brought to the wrong entry.

Not wanting to waste my <h6>s I moved them to my breadcrumbs (which appear only on individual entry archives). Caused Google to grab the text just below: my Amazon associate links. Speaking from the vantage of greed that might be desirable (unless at some future date Google should look on it as black hat SEO).

On some but not all archives I’m using them for my list of my theme or category archive pages. May prove an equally fruitless direction but it is interesting to see that Google really does take headers seriously.

A couple of months back I added more headers to my weblogs markup. For a long time all I had was <h1>, <h2> and <h3> for entry title, weblog name and titles within entries.

I shuffled some of that about, making the individual entry’s link to the theme archive a <h3>, making the sidebar section names <h4>. And I thought I’d each line item in the list recently commented on entries in<h6>.

Google noticed and took my word for it that I knew what I was doing. Tracking my search engine responses I saw that individual entry archives were drawing more and more inappropriate hits. The more popular the search phrase the more likely it having been marked as a headline in the sidebar would bring folks to a wholly irrelevant page.

If I’d really given the issue a five seconds proper thought I’d realize that what I’d done was wrong if only because the list of recently commented on entries changes every day. The visitor would arrive and even if been of that rare species willing to look or I had Google highlight working there’d be nothing relevant for them to see.

I’ve made my recently comments list merely a list again and used <h6> for my breadcrumbs at the bottom of the page.