Showing posts with label html basics. Show all posts
Showing posts with label html basics. Show all posts

Wednesday, July 14, 2010

Basic HTML for beginners

For this post I'd like to touch on the most basic concepts of writing HTML. I'll try to keep this short and sweet.

First - use a text editor or html editor. Notepad is good, Wordpad is bad. Word is bad. I personally like to use Notepad++ or JEdit. Both of these are great editors and add many features that I can't live without now, like syntax highlighting.

Second - Close all tags. Get in the habit of closing all tags. It's easiest to remember if you do this when you open the tag. Some editors automatically insert the closing tag one the opening tag is typed in. An example of an opening tag is <html>. The closing tag for this opening tag looks like this </html>. Another example of an opening and closing tag would be <b></b>. There are special cases where tags can self-close. An example of this would be the page break tag <br />. Most browsers will interpret <br> just fine but it's not w3c compliant any longer. It needs to be self closed. To self close a tag such as this, you just add a space and a forward slash like <br />. If it doesn't make sense to wrap an opening and closing tag around something, then it is probably a self closing tag.

Third - Use a doctype. At first this doesn't seem at all important because the code will work without it, and let's face it, these things are difficult to remember usually. Though, HTML5 has a simple doctype of:
<!doctype html>
Using a doctype will tell the browser how to handle certain nuances in the code.

Lastly - Learn good SEO from the start. Learn to utilize keywords within your title, meta keywords, meta description, and heading tags. Learn to do good page interlinking within your site. Learn to use good keywords in your anchor tag text.

These are some of the things to keep in mind when starting to learn HTML.

Friday, July 9, 2010

HTML Do's and Don'ts

There have been a few conventions used in HTML through the years that have been overruled by the world wide web consortium and their web standards. There have also been some basic ways to do things that are still taught to beginners but no longer meant W3C standards. Let's go over a few.

One of my big HTML pet peeves is when people use all caps in their tags. At one point, sometime in the nineties, everyone was trying to decide whether to make all HTML tags uppercase or lowercase. Depending on the site you visited it would be one or the other. I actually supported the uppercase people. However, once we all decided that all HTML tags should be lowercase, that's when everyone should have switched. Unfortunately, there are still people coding this way. In fact, I recently had to take a basic web developing class for my BS degree, and the professor used uppercase tags. Don't do this. Use lowercase tags like <html></html> and <h1></h1>. This is the standard. Obey the standard.

Next up in the "don'ts" category is the <center> tag. This is taught in every HTML beginner tutorial and even the W3Schools tutorials use this for beginning HTML. Why teach it if it's frowned upon? I really wish it wasn't frowned upon because there are some browser quirks that almost require the use of it. There may be other ways I'm unaware of so I won't gripe too much. Just to touch on it, however, when you are trying to create a fixed width center aligned page, you can use CSS rules such as:

margin-right: auto; 
margin-left: auto;
width: 960px;

If a div has these CSS rules, it will be a centered column that is 960px wide.....on every browser other than Internet Explorer. I believe there is an Internet Explorer workaround which doesn't require the use of a center tag, but I'll have to research it.... Apparently it is much easier than I thought. Simply using a text-align: center on the body and using the auto margins will do the trick, but I swear I've tried that before and it didn't work. I'll have to test this further. 

Do not use the <center> tag. It will give you validation errors. 

Do use CSS rules to create the center effect.

Finally, one last "don't" to finish off the post. Don't use tables....one of the most convenient layout controls in HTML. I dreaded the day that I switched from tables to heavily styled divs, but it had to happen. Tables can still be used, but they shouldn't be over-used. They shouldn't be used to control your entire page layout anymore. This is a no-no. The main reason for this is that tables can't be easily manipulated through CSS. You won't be able to change the look of the site dramatically, if you use tables. Tables are a lot easier and render well in all browsers, but the preferred method is to use divs with CSS. 

I should mention that all three of these major "don'ts" were things that I didn't want to stop doing. I had to force myself to stop, in order to meet standards, because I'm a strong proponent of open standards. 

Tuesday, July 6, 2010

Basic HTML Tutorials

Anytime someone asks me how to get started building websites, I always point them to w3schools.com. Sometimes reading is just too much work. That's why I send a lot of people there. Because learning how to write web sites well takes some work. Once you understand how to write a static page of content, then you can progress to learning a web programming language like PHP or ASP. You'll also want to learn how to program in Javascript since most client-side functions are programmed using it.

You can make websites using software that's already available, but you will be stuck within that software package. For instance, you can do just about anything with a Wordpress blog, and it is relatively easy, but you would have trouble fully customizing it to your liking without some knowledge of HTML, CSS, PHP, and Javascript.

I feel that anyone who wants to create websites should learn the basics. We'll be going over some basics in future posts but w3schools is a great place to start.