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.

Sunday, July 11, 2010

Web Sites vs. Web Applications

ASP.NET programmers tend to be an uppity bunch. I'm only joking, but they do seem to think that their web applications are superior to other platforms, such as PHP. You will hardly ever hear an ASP.NET developer say that they are writing a web site. They will almost always say they are writing a web application.

I'm not disagreeing with them in the slightest. ASP.NET is great for writing web applications, but so is Java, PHP, Python, and Perl. The language doesn't really make it a web application. ASP.NET developers also like to state that their applications are compiled. I won't argue that either. ASP.NET does get compiled.

Now I'll talk describe how these descriptions of ASP.NET are unnecessary.

Let's start with the difference between a web site and a web application. Web sites have been around a long time. To some extent, so have web applications. There are three core languages that go into making a web page. These are HTML, CSS, and Javascript. These are the only languages that all standard browsers can do anything with. All web sites and web applications MUST USE these three languages to offer much functionality in the browser. All client side rendering happens through these three languages.

That is the client side of things. Someone visiting your domain, will only be able to see what their browser shows them. The browser can only handle HTML, CSS, Javascript. I've said this a few times in different ways for a reason. There are the core languages everyone should know. Not only should you know each, but you should learn how each is handled by every major browser.

Start off by writing web sites, which can be written with just these three languages. Web sites are mostly static. In fact, that is the defining characteristic of a web site vs a web application. Web sites are static, while web applications are dynamic. Web sites are simple to make, and one should feel comfortable making them before trying to write dynamic sites.

Dynamic simply means that the user can interact with the site and the site will change depending upon the user's action. Dynamic sites are sites like Facebook, while static sites are sites like RefDesk. Other terms used to describe these two are Web1.0 and Web2.0. Web2.0 is based around social sites and interactive sites, while Web1.0 is the older static web sites. I feel there will always be a need for Web1.0 sites, but I'm glad that there are also good Web2.0 sites. I wonder what Web3.0 will include...perhaps an interactive AI.

Web Applications require a few things that normal web sites don't. They typically use a database, server-side programming language, and usually incorporate AJAX, which is just a fancy name for Javascript sending and receiving information from the server on the fly. These things are what make a web application, not ASP.NET. ASP.NET is simply one of the programming platforms that can be used for building web applications.

ASP.NET compiles server-side code, but that server-side code still has to run using the .NET framework. So there is added bloat to the application. Client side code is translated to HTML, CSS, and Javascript.

I went through all of that to tell you this. ASP.NET is a great way to build a web application, but so is PHP. The major difference is that PHP developers spend more time dealing with HTML, CSS, and Javascript in their raw forms. Also it is easier and cheaper to find a PHP host. One of the most popular web content management systems is Wordpress, and it is written in PHP. It is probably THE most popular and most used web applications and it isn't written in ASP.NET.

Most PHP developers are busy writing web applications, but they aren't bragging about how superior their web applications are to normal web sites. You may hear them simply say that they are developing something.

Can you tell that I'm in a ASP.NET class? This is one of my last classes before I finally get my BS. It's an advanced web development class. During the intro to web development class (also an ASP.NET class), I argued with the professor because he had this very bad attitude about ASP.NET's superiority to everything else. I was reminded of these arguments today, and thought that it would be a great subject for my blog, though I may have been a bit hostile in this post. Whether you program in ASP.NET, PHP, Python, or whatever, they all do the same thing in the end. Just program in whichever one feels best to you. Personally, I can program in ASP.NET, Java, PHP, and quite a few others, but I prefer to use PHP for my server-side code because I'm used to that platform and it feels comfortable for me.

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.

How do I Set Up A WebSite Part 1 - Choosing the type of website to build

Starting a website is not as difficult as you may think. A personal website can be very simple to start. Many people use free services like MySpace to create a web presence. Although these sites can be fun, many people avoid sites like MySpace due to the horrendous design of some pages. The pages may feel personalized, but they tend to all be unreadable.

Starting a website can be extremely fun. You may start out using a free service like Blogger.com or Wordpress.com. These services allow you to create many blogs. These blogs can have customized themes, and amazingly, they can be used to generate an online income. Using free services like this is great for the individual. However if you want to create a better web presence, you may consider buying your own domain and hosting package.

An excellent place to purchase a domain is www.GoDaddy.com. Almost everyone I know uses GoDaddy to register their domains. For hosting, I prefer Hostgator. They have great stable service and are probably the best deal around for unlimited hosting. One can use a single Hostgator account to host as many sites as needed.

You can go a step further, if Hostgator isn't good enough for you. If you expect your website to get a ton of traffic, you'll want to use a more dedicated hosting package. There are quite a few options at this point. The option that many will go with is a virtual private server (VPS) or a cloud server.

These servers are part of a server farm. They are usually not a dedicated machine, but are much more powerful than a shared hosting package. Shared hosting packages allow many people to host many sites on one server. Cloud servers are single virtual machines which use a certain portion of community resources within the server farm. This is handy because one can modify the amount of system resources one needs without changing the physical hardware. You pay for what you use. So, if your site needs more horsepower, you simply move a few sliders and voila, you are using (and paying for) more resources.

In the event that your cloud server can't handle your web traffic load (when you are getting quite a few thousand visitors per day), you can opt for a dedicated server or buy a server and send it off for colocation. With the dedicated server option, you pay for the bandwidth and for the use of the server. With the colocation option, you send a server to the provider for them to hook up to their huge network. The colocation option is usually cheaper because you are using your own hardware, however you have to buy the hardware first. So, this makes up for the cost. For cloud, VPS, colocation, and dedicated servers, I recommend 1and1.com.

When your website is as big as Facebook.com, you'll need multiple servers to handle the extremely heavy traffic and requests. When that day comes, you'll have to hire some experts to work for your company, and you should be making enough money by that point to pay for them.

Until that day, start off with a Blogger or Wordpress blog. You may also wish to buy a domain and hosting account. In future posts, I'll be explorer how to write simple sites in HTML. Those lessons will be much easier if you have hosting account and domain name.

First Post

This is the amazing first post of Randy's Hints. In this first post, I'd like to thank everyone who has signed up for my newsletter. You can get all of my posts delivered to your inbox by subscribing. If you haven't subscribed to my newsletter, use the form below.