Feb 09

I mentioned that HTML is an application of SGML. This means that every HTML document is also an SGML document. The first thing an SGML document must have is a Document Type Declaration. This means exactly what it sounds like: a Document Type Declaration declares the document to be of a specific type. In our case this type is HTML. I won’t go into much depth on Document Type Declarations right now. For the moment, you should use the following declaration:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”

 ”http://www.w3.org/TR/REC-html40/strict.dtd”>

Do not let the angle brackets confuse you. The above is not an element. If you look carefully, you’ll notice that the content of the above construct starts with an exclamation mark; this indicates that this is SGML code. And after looking at it a bit you might be glad you don’t have to learn SGML. So just take me on my word for this once, and put this at the top of your document. In a future tutorial, we’ll explain what this Document Type Declaration means and show that it’s really quite simple.

Now that we have specified that this is an HTML document, we can start adding elements. The first element will always be the HTML element. All HTML documents have an HTML element, which contains all the other elements. Let’s put in the start-tag and end-tag for this element and we’ll worry about its contents later. Here’s what we’ve got so far:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”

 ”http://www.w3.org/TR/REC-html40/strict.dtd”>

<HTML>

</HTML>

Every HTML document is split into a head and a body, which are marked by similarly named elements, HEAD and BODY. Every HTML document must have one of each, inside the HTML element. In fact, these two are the only things you can have inside the HTML element. So let’s put these in as well and see where we are:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”

 ”http://www.w3.org/TR/REC-html40/strict.dtd”>

<HTML>

 <HEAD>

 </HEAD>

 <BODY>

 </BODY>

</HTML>

Notice that I’ve used a slight indent for the HEAD and BODY element tags. This has no special meaning and is only there to make the HTML more legible. You might have noticed that white-space (that is, spaces, tabs and linefeeds) is collapsed in HTML. This means you can add as much of it as you want to, in order to make your HTML easier to read, without any change in the meaning of the document.

The difference between the head and body of a document is that the head contains mostly information about the document, while the body contains the document itself. Before we go on to the body, we’ll deal with the one element every document head must contain: a title.

The title of your document is very important. It distinguishes your document and makes it unique, as well as describing it to the reader. In this case, the title “Acme Computer Corp.” is unsuitable, because it doesn’t describe our document. A more descriptive title would be “About Acme Computer Corp.”, but since this is the world of marketing and we can’t afford to be bland, we’ll give it a title of “Acme Computer Corp.: Who We Are”.

The TITLE element is a very simple element. It cannot contain anything but text and that text is the title of the document. So let’s insert our title into our document, which is almost complete:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”

 ”http://www.w3.org/TR/REC-html40/strict.dtd”>

<HTML>

 <HEAD>

  <TITLE>Acme Computer Corp.: Who We Are</TITLE>

 </HEAD>

 <BODY>

 </BODY>

</HTML>

We’re almost finished! All that remains is to add our document body.

Feb 09

Our document, as noted previously, is comprised of a heading and two paragraphs. HTML has elements specifically designed to denote headings and paragraphs. Paragraphs are simply denoted by the P element. Headings are a bit more complicated, as you can have as many as six levels of headings. These are represented by the H1, H2, H3, H4, H5 and H6 elements. The following example shows paragraphs and multiple levels of headings in action:

<H1>Memo: Designing ACC’s Website</H1><P>Here are some notes on designing AcmeComCorp’s

Website.</P>

<H2>Learning good HTML</H2>

<P>The level of HTML knowledge in this company is

terrible. We should all go over to the HTML with Style

and get up to date with our HTML if we’re going

to design a proper Website.</P>

<H2>Thinking of something more original</H2>

<P>Can’t you people think of something less

boring? Even our competitors, may their name

remain unuttered, have more interesting things

to say about themselves.</P>

Now let’s mark up our text with the appropriate tags and insert it into our HTML document:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”

 ”http://www.w3.org/TR/REC-html40/strict.dtd”>

<HTML>

 <HEAD>

  <TITLE>Acme Computer Corp.: Who We Are</TITLE>

 </HEAD>

 <BODY><H1>Acme Computer Corp.</H1>

<P>Acme Computer Corporation is a technology-based

company that seeks to offer its customers the

latest in technological innovation. Our products

are created using the latest breakthroughs in

computers and are designed by a team of top-notch

experts.</P>

<P>We are based in Acmetown, USA, and have offices in

most major cities around the world. Our goal is to

have a global approach to the future of computing.

Have a look at our product catalog for some

examples of our innovative approach.</P>

</BODY>

</HTML>

That’s it! We’re finished! The above is a complete, valid HTML document. You can take a break and have a look at how your browser renders it.

You might have noticed that this page is not the pinnacle of Web design, for various reasons. However, it’s a start, and what you’ve learned today are things you’ll need for every single HTML document you ever design. In our next tutorial, in two weeks time, we’ll explore the concept of hypertext links and insert some in our document. And since we’ll need to link with something, we’ll create a product catalog for Acme as well.

Feb 09

I mentioned that HTML, as a computer language, has a defined syntax. This syntax was not thought up at random, since the idea of a markup language is hardly new. A language called SGML, the Standard Generalized Markup Language, exists that is used to define markup languages. Make sure you get this right: SGML is a markup language whose sole use is to define other markup languages. And one of those many languages is HTML.

Now wait. Before you click on our sponsor’s ad and get out of here, afraid that you’ll have to learn another language, let me assure you that no such thing is needed. You do not need to know SGML to learn HTML. It’s just useful to know that HTML is an application of SGML, which will explain a few things.

Now let’s get down to business. Remember the heading we saw in the last section? If not, here it is again.

Acme Computer Corp.

We know this is a heading, but we need a way of encoding this in the document itself. To do this, we make this heading an element. We do this by writing the following (yes, this is HTML!):

<H1>Acme Computer Corp.</H1>

This element can be split into three parts. The first part, <H1> is called the start-tag. Then comes the element’s content, which in this case is the text “Acme Computer Corp.”. Finally, </H1> is the end-tag.

This element is an H1 element, which happens to mean that it is a level 1 heading (we’ll get to that later). You need tags to indicate where the element starts and where it ends. Tags always start with a less-than symbol (<) and end with a greater-than symbol (>). A start tag has the element’s name in between these symbols, (in this case, H1). An end-tag has a slash (/) followed by the element’s name. Here are some more examples of elements:

<H2>I’m an element.</H2>
<P>So am I!</P>
<P>Hey, me too! <B>And me!</B></P>
<P>There’s another element after me.</P>
<HR>

The perceptive amongst you may have noticed a few things in the above elements: first, the B element is inside a P element. This is fine; you can have elements inside other elements, as long as you have proper nesting. This means that if an element starts within another element, it must end within that same element, like this:

<P>This is <B>right</B></P>
<P>This is <B>wrong</P></B>

The second line above is incorrect because the B element starts inside the P element, but ends outside the P element.

The second curious thing you should have noticed is that the HR element has no content and no end-tag. This is also allowed, for some element types. The HR element in this case is called an empty element. Using only a start-tag is permitted in this case, but only for elements that are empty.

Now that you know what an element is and how to specify it in your document, it’s time to learn about some of the elements in HTML and use them to make your first HTML document.

Feb 09

 Our first tutorial aims to teach you plain HTML, from scratch. It would be nice if you forgot everything you knew about HTML and take a fresh look at things for this tutorial.

I’m going to assume that the reader of this tutorial knows nothing about creating Web pages, but has a basic familiarity with browsing the Web. After all, if you couldn’t browse the Web, you probably wouldn’t be reading this! If you have some passing familiarity with creating Web pages, you can quickly go through this tutorial and make sure you’re familiar with everything here, though as we’ve mentioned before, even experienced Web developers might be surprised by learning something new here, and we’re going to use these concepts a lot in future tutorials.

In particular, we will discuss the following:

  1. What is HTML?
  2. Authoring HTML documents
  3. HTML Elements
  4. The global structure of an HTML document
  5. Paragraph and heading elements

That’s not much to start with, but it’s enough to make your first complete HTML document. I know you’re anxious to get to it, so start off with finding out what HTML is.

Feb 08

FTP 101 - A Beginner’s Guide

What is FTP?
FTP (File Transfer Protocol) is the simplest and most secure way to exchange files over the Internet.  Whether you know it or not, you most likely use FTP all the time.
The most common use for FTP is to download files from the Internet.  Because of this, FTP is the backbone of the MP3 music craze, and vital to most online auction and game enthusiasts.  In addition, the ability to transfer files back-and-forth makes FTP essential for anyone creating a Web page, amateurs and professionals alike.

When downloading a file from the Internet you’re actually transferring the file to your computer from another computer over the Internet.  This is why the T (transfer) is in FTP. You may not know where the computer is that the file is coming from but you most likely know it’s URL or Internet address.

An FTP address looks a lot like an HTTP, or Website, address except it uses the prefix ftp:// instead of http://.

Example Website address: http://www.FTPplanet.com
Example FTP site address: ftp://ftp.FTPplanet.com

Most often, a computer with an FTP address is dedicated to receive an FTP connection.  Just as a computer that is setup to host Web pages is referred to as a Web server or Website, a computer dedicated to receiving an FTP connection is referred to as an FTP server or FTP site.

What is an FTP Site?
An FTP site is like a large filing cabinet.  With a traditional filing cabinet, the person who does the filing has the option to label and organize the files how ever they see fit.  They also decide which files to keep locked and which remain public. It is the same with an FTP site.

The virtual ‘key’ to get into an FTP site is the UserID and Password. If the creator of the FTP site is willing to give everyone access to the files, the UserID is ‘anonymous’ and the Password is your e-mail address (e.g. name@domain.com). If the FTP site is not public, there will be a unique UserID and Password for each person who is granted access.

When connecting to an FTP site that allows anonymous logins, you’re frequently not prompted for a name and password.  Hence, when downloading from the Internet, you most likely are using an anonymous FTP login and you don’t even know it.

To make an FTP connection you can use a standard Web browser (Internet Explorer, Netscape, etc.) or a dedicated FTP software program, referred to as an FTP ‘Client’.

When using a Web browser for an FTP connection, FTP uploads are difficult, or sometimes impossible, and downloads are not protected (not recommended for uploading or downloading large files).  

When connecting with an FTP Client, uploads and downloads couldn’t be easier, and you have added security and additional features.  For one, you’re able to to resume a download that did not successfully finish, which is a very nice feature for people using dial-up connections who frequently loose their Internet connection. 

What is an FTP Client?
An FTP Client is software that is designed to transfer files back-and-forth between two computers over the Internet.  It needs to be installed on your computer and can only be used with a live connection to the Internet.

The classic FTP Client look is a two-pane design.  The pane on the left displays the files on your computer and the pane on the right displays the files on the remote computer.

File transfers are as easy as dragging-and-dropping files from one pane to the other or by highlighting a file and clicking one of the direction arrows located between the panes.  

Additional features of the FTP Client include: multiple file transfer; the auto re-get or resuming feature; a queuing utility; the scheduling feature; an FTP find utility; a synchronize utility; and for the advanced user, a scripting utility.

All of these features will be explained in later tutorials.  First you need to download and install an FTP Client.

Next Steps …

Feb 08

WordPress

Overview

WordPress is a PHP/MySQL based blog you can use on your web site for blogging. To learn more about WordPress, visit http://wordpress.org/.

Installation

NOTE: Before you attempt to install the WordPress, make sure you read the License Terms shown on the page.

Steps
  1. Set the following information:
    • Admin User - Enter the username you want to use for the administrator’s username.
    • Admin Pass - Enter the password you want to use for the administrator’s password.
    • Email - Enter the email address you want to use for the administrator’s contact information.
    • Installation URL - Select the domain you want to install the E107 on from the drop down menu. By default, the directory it will be installed in is pre-populated. You can change the directory to meet your specific needs.
    • Table Prefix - The table prefix is used when the software creates a MySQL database. You can leave it as default or modify the table prefix according to your specific needs.
    • MySQL DB - You can create a new database specifically for this installation or choose another database for this installation. Select which one you want to do from the drop down menu.
  2. Click on the Install button.
  3. You should see the following statement:
    • “Done! You can access your new addon at URL_LOCATION”

NOTE: After you have successfully installed your script, the system will tell you how many you have installed on the main page of your cPaddons scripts listing page.

Managing

After you have installed WordPress on your account, it will show the version number you have installed.

Steps
  1. Located to the right of the listed installation URL is a “Rearrange” link. If you click on the Rearrange link, it will allow you to move or copy the installation to another domain and directory of your choice.
  2. To move or copy the installation, select the domain you want to install WordPress on from the drop down menu. By default, the directory it will be installed in is pre-populated. You can change the directory to meet your specific needs.
  3. Click on either the Move or Copy radio button.
  4. Next, click on the Perform Move/Copy button.

Uninstall

If you have installed WordPress on your account, you can uninstall the software at anytime.

Steps
  1. Select the install you want to remove from the drop down menu.
  2. Click on the Uninstall button.

Feb 07

Using The File Manager

Overview

The File Manager is a tool you can use to navigate your way through your web hosting account and view directories, create directories (folders), uploade/delete/view/edit files, view the size of your directories/files, rename files/directories, and see the permissions of your files/directories.

At the top of File Manager you will see “Current Directory” and the path to the current location you are viewing on your web hosting account. Underneath the “Current Directory” display is a “Go Up One Dir” link. You can click on the “Go Up One Dir” link at any time to move up a directory regardless of your current location.

When the File Manager tool loads you will see a four-column table consisting of the following information:

  • Type - This entry contains an icon representing a directory, folder, file, or image.
  • File - This entry shows the name of the associated directory or file.
  • Size - This entry shows the size of the associated directory or file.
  • Mode - This entry shows the permissions of the associated directory or file.

To navigate from one directory to another, find the directory you want to ascend into in the “File” column. Then click on the Folder icon in the “Type” column for the associated directory you want to ascend.

To use the file or directory, click on the directory/file name in the “File” column. A set of tools will be displayed in the top-right corner of the File Manager screen. View your options below:

Tools For Directories

  • Delete this folder and all files under it
  • Change Permissions
  • Rename Folder
  • Copy this folder
  • Move this folder

Tools For Files

  • Show File Contents
  • Delete File
  • Change Permissions
  • Rename File
  • Copy File
  • Move File

Also available is a trash can icon. If you have deleted any files on your web hosting account, you can click on the trash can icon to empty the deleted files.

At the top of the table there are three options you can choose:

  • Upload files
  • Create a New Folder
  • Create a New File

Back To Article Index

Feb 07

Using Web Disk

Overview

The Web Disk allows you to easily drag and drop files to your hosting account. You can create a Web Disk login and access your Web Disk below. Once your Web Disk is configured, you can then drag and drop files to it just like they are part of your home computer. You can also navigate through the files in your hosting account just as you do the files on your local computer. Web disks are relative to your account’s home directory. The “house” icon signifies your home directory.

By default, your cPanel account username will have a Web Disk login account already created. The default login gives you access to all directories in your web hosting account. To skip over how to create a web disk account, click on the Access Web Disk button in the “Access Web Disk” column. It should be the only entry in the “Web Disk Account Management” table shown at the bottom of the page. Also, you may want to read the Accessing and Using Web Disk section below.

Create A Web Disk Login Account

  • Enter the username you want to use for the new web disk account in the “Login” text box.
  • Select the domain you want to use for the web disk account from the drop down menu.
  • Enter the password you want to use for the web disk account in the “Password” text box.
  • Once you place your cursor in the “Directory” text box, the system will automatically fill in the path to a directory using the “public_html” directory and the username you entered in Step 1 above. You can modify the directory path and name according to your own specific needs. However, if this is your first time using Web Disk, you may want to leave it as default until you are comfortable using the Web Disk feature in cPanel.
  • Click on the Create button.
  • You will see the following statement:
    • “ACCOUNT_LOGIN has been given Web Disk access.”
  • Click on the Go Back link.
  • When the page loads, you will see a four-column table consisting of the following information:
    • Login - This entry contains the login account username.
    • Directory - This entry contains the path to the directory associated with the Web Disk login account.
    • Access Web Disk - Click on the Access Web Disk button to use the “Web Disk” program.
    • Actions - The “Actions” column provides two features:
      • Change Password - Click on the Change Password link to modify and change the password for the associated Web Disk login account.
      • Delete - Click on the Delete link to remove the Web Disk login account from the system.

Accessing and Using Web Disk

  • When the page loads, select the operating system you are using to view Web Disk from one of the available drop down menus.
  • The “SSL” option is checked by default. If you prefer not to use a secure SSL connection, click on the SSL (Recommended) checkbox.
  • Then click on the Go button.
  • Follow the on-screen instructions for accessing Web Disk based on the operation system you chose in Step 1 above. Each operating system has its own set of instructions for accessing Web Disk. If you have problems or need further assistance accessing Web Disk from your computer, please contact your hosting provider’s support department.
Feb 05

So you want to put up a blog? I really cant say enough good things about wordpress. Wordpress sites are best for search engines and can get traffic to them in no time at all. The majority of wordpress themes are free with a small handful being paid themes. Check out the resources page for some links

With most websites to get any sign of traffic at all, you have to get hardlinks to your site to have the search engines even think about crawling or indexing your site. With wordpress, if configured correctly, you can have to your site crawled within a week or so usually. Of course you won’t be getting thousands of visits a day, but a few anyway.

I am going to go over some steps that you will need to do in order to get a wordpress site up and going.

Get hosting - We offer hosting for $11.99 a month, This is not super cheap or expensive. Its just the going rate. Trust me when I tell ya, we are not getting rich hosting sites. You have to have hosting in order to put wordpress up. Check out our resources page to find some more places for hosting.

Setup Wordpress - Setting up wordpress is simple! For the sake of this article, I am not going to go into the technical aspect of actually installing it. This information can readily be found on the net. Plugins are one of my favorite things about wordpress, they extended the the functionality of wordpress and can give it a lot more features then it would normally have!

If you check out the products page, There are some e-books for sale and that is running from the e-commerce plugin. The e-commerce in wordpress is great, it’s very simple and the layout features are very flexible. It allows you to add any kind of product you want and set it up with several different payment processors. There is a free version and a paid version. They are both great! The paid version allows you to choose from more payment processors besides PayPal. I would not recommend using wordpress for full blown e-commerce if you are going to have thousands of products. One thing that I have noticed, if you have several products, it can be a bit more challenging to keep the layout under control. Some themes are better then others for keeping things organized, you will just have to experiment and see what looks the best. We have some links to themes pages on the resources page.

My next favorite plugin that I use is Google XML Sitemaps, The way I always set this up by creating a blank robots.txt, sitemap.xml and sitemap.xml.gz upload those to your public_html or document root. The problem with this is that you have to leave them writable or 777 on the server and this has gotten me hacked a couple times, hackers take advantage of this. It’s never been a hack I could not fix in under 10 minutes though. If someone has a solution to this, I would love to hear it!!

The All in One SEO plugin is great also. I don’t personally run this, but I should to be honest. When David, My friend and business partner launched the Redneck site he installed this plugin first thing. As a matter of fact, he installs it on every wordpress blog that he works on. If you are one of the lucky ones that David coaches, I am sure he will tell you about this plugin. You can do separate meta tags on each post if you want, very cool.

After you get your plugins installed, Its important to know that one of the great things about blogging is the “pinging” that wordpress does after you make a post. It will notify many different places that you have updated your site and then they come crawl your site and index your posts. And then in turn, the other search engines crawl those sites, find links back to your site and index your site. Its a win, win situation for everyone. Thinking about this, it does not hurt to put a link back to your index page (Main page) with the anchor text that you are targeting.

Setup pinging

To set this feature up, From your admin panel in wordpress, Click on Options -> Writing and then in the box underneath Update Services, Paste these in….

http://rpc.pingomatic.com/
http://api.my.yahoo.com/RPC2
http://bblog.com/ping.php
http://blog.goo.ne.jp/XMLRPC
http://bulkfeeds.net/rpc
http://coreblog.org/ping/
http://ping.cocolog-nifty.com/xmlrpc
http://ping.rootblog.com/rpc.php
http://ping.syndic8.com/xmlrpc.php
http://rcs.datashed.net/RPC2
http://rpc.blogrolling.com/pinger/
http://rpc.technorati.com/rpc/ping
http://rpc.weblogs.com/RPC2
http://xmlrpc.blogg.de/
http://xping.pubsub.com/ping/
http://api.moreover.com/RPC2
http://www.blogdigger.com/RPC2
http://ping.weblogalot.com/rpc.php
http://www.weblogues.com/RPC/
http://ping.bloggers.jp/rpc/
http://ping.feedburner.com/
http://api.feedster.com/ping
http://www.popdex.com/addsite.php
http://ping.rootblog.com/rpc.php
http://www.lasermemory.com/lsrpc/
http://www.topchoicephonecards.co.uk/
http://rpc.pingomatic.com/
http://1470.net/api/ping
http://www.a2b.cc/setloc/bp.a2b
http://api.feedster.com/ping
http://api.moreover.com/RPC2
http://api.moreover.com/ping
http://api.my.yahoo.com/RPC2
http://api.my.yahoo.com/rss/ping
http://www.bitacoles.net/ping.php
http://bitacoras.net/ping
http://blogdb.jp/xmlrpc
http://www.blogdigger.com/RPC2
http://blogmatcher.com/u.php
http://www.blogoole.com/ping/
http://www.blogoon.net/ping/
http://www.blogpeople.net/servlet/web…
http://www.blogroots.com/tb_populi.bl…
http://www.blogshares.com/rpc.php
http://www.blogsnow.com/ping
http://www.blogstreet.com/xrbin/xmlrp…
http://blog.goo.ne.jp/XMLRPC
http://bulkfeeds.net/rpc
http://coreblog.org/ping/
http://www.lasermemory.com/lsrpc/
http://mod-pubsub.org/kn_apps/blogcha…
http://www.mod-pubsub.org/kn_apps/blo…
http://www.newsisfree.com/xmlrpctest….
http://ping.amagle.com/
http://ping.bitacoras.com
http://ping.blo.gs/
http://ping.bloggers.jp/rpc/
http://ping.blogmura.jp/rpc/
http://ping.cocolog-nifty.com/xmlrpc
http://ping.exblog.jp/xmlrpc
http://ping.feedburner.com
http://ping.myblog.jp
http://ping.rootblog.com/rpc.php
http://ping.syndic8.com/xmlrpc.php
http://ping.weblogalot.com/rpc.php
http://ping.weblogs.se/
http://pingoat.com/goat/RPC2
http://www.popdex.com/addsite.php
http://rcs.datashed.net/RPC2/
http://rpc.blogrolling.com/pinger/
http://rpc.icerocket.com:10080/
http://rpc.technorati.com/rpc/ping
http://rpc.weblogs.com/RPC2
http://www.snipsnap.org/RPC2
http://trackback.bakeinu.jp/bakeping
http://www.weblogues.com/RPC/
http://xping.pubsub.com/ping/
http://xmlrpc.blogg.de/

Click Update Options and start blogging! Don’t forget to read our Start a website site! And yes that link is worded like that on purpose ;) Do you know why?

My 2 cents

Another great thing to do with Wordpress that not to many folks know to do is adjust your permalink structure. Heres my tutorial on that.

if you are using Wordpress for a blog script, make sure to utilize the permalinks feature. It will take your post from being a page number.

Example - www.yoursite.com/?p=123

to

www.yoursite.com/your-post-title/

I have found that if you change your permalinks to custom, and submit your new post to digg.com and reddit.com you will find your new post on the top of google within 2-3 days.

To edit your permalink structure, just go into your WP dashboard,

  • Options,
  • Permalinks,
  • Put this into the custom text box /%postname%/
  • Update

*Remember - If you update your permalink structure make sure your .htaccess is cmodded to 777 before you do it, or just go into your file manager and update your .htaccess file.

I have used this method quite a bit and have had great success for getting on the top of search engines for it.

Hope this helps.

David L.