Getting Started

J-Henderson — Sun, 24 Jan 2010 18:03:03 +0000

Before you dig into the tutorial section of this website i recommend that you take a moment to read through this section, here i will go through the process of installing a local web server to your machine, you will need to do this if you wish to practice PHP or Javascript in your web pages.

First you will need to install a program called XAMPP you will be able to find this here: XAMPP

Follow the instructions for installing the program, i generally recommend that you do not install MySQL and Apache as a service mainly for security and to keep the minimum of background programs open at any time.

Once the program has installed successfully you will need to start up the Apache and MySQL service this can be done by going to start>XAMPP for windows>XAMPP Control Panel.

Now we have the Apache and MySQL server running, we can create an area for our website, on your computer navigate to C:\xampp\htdocs and create a folder for your website for example “C:\xampp\htdocs\mywebsite” this will be where all our HTML and PHP files will be saved.

Once you have created an index.html(see: Your first HTML page) file within C:\xampp\htdocs\mywebsite, you will be able to view your page by browsing to http://127.0.0.1/mywebsite/ in your favourite web browser.

I recommend that you also download a text editor with syntax highlighting, this will make troubleshooting allot easier, there are two I would recommend:

Scite: Scite
Notepad++: Notepad++

Using tables for your content

J-Henderson — Sun, 24 Jan 2010 14:09:26 +0000

In more traditional websites tables were used to layout the entire website. This method of using tables has now been replaced with CSS, even though CSS is very powerful there are some things you will want to use tables for.

Lets have a quick look and see what the code for a standard table will look like.


  
    
      First Table cell
    
    
      Second Table cell
    
  
  
    
      2nd Row, First Table cell
    
    
      2nd Row, Second Table cell

The Code above will produce the table below:

First Table cell	Second Table cell
2nd Row, First Table cell	2nd Row, Second Table cell

Now there is quite a bit here lets take a look at our tags:

: The begining of our table, within this tag we can set a few variables such as border, cellspacing and cellpadding, in this example we have set the border to a width of 1 pixel.

: This tag is used to mark the begining of a row.

: End our cell.

: End of our Row.

: Begining of a table cell, traditionally our content that we wish to display will go after this tag before the end of the cell.

: And finally the end of our table.

There are a few more things you can do with tables, what if you wish for part of your content to span accross your table? well we can use a colspan value, as demonstrated below:


  
    
      First Table cell
    
  
  
    
      2nd Row, First Table cell
    
    
      2nd Row, Second Table cell

The above code will give us the following result:

First Table cell
2nd Row, First Table cell	2nd Row, Second Table cell

The colspan attribute tells your browser that the cell should span by a specified amount, the easiest way to think of this is to think of the “merge cell” feature in Microsoft Excel. There are a few other tags you can use with tables i will very quickly go over them here:

& : These tags are used in place of the & tags, and denote a Table Header.

we also have the use of , and , these tags are used after

but before , each marks what content should go where, top of the table, main content or the foot of the table, each tag has its corresponding end tag , and .

Meta tags – Making your webpage search engine friendly

J-Henderson — Thu, 21 Jan 2010 21:43:49 +0000

By now you should have created your first web page and be ready to post this online, however you may be wondering how to go about making your site search engine friendly? Well your anwser is META tags. Lets take a look at a simple HTML page with some meta tags.


  
    

    
    

    My First Page

  
    My header
      a paragraph

For the most part these are pretty self explanatory:

meta name=”description”: This is the description for your website, you may not realise that this description is shown to the user whenever they use a search engine, the description is normally shown under the main link to your website, and only contains a few paragraphs detailing your site.

meta name=”keywords”: Keywords are what a search engine uses to index your site, using the keywords in the code above if you were to goto your favourite search engine such as google and type in the keywords above this site would show up pretty near the top of the results.

The less obvious meta tag, tells our browser what character encoding to use, to be able to validate your web code you will need to tell the browser what character encoding to use, ISO-8859-1 is pretty much the standard encoding you want to use.

Connecting to a MySQL Database

J-Henderson — Thu, 21 Jan 2010 21:20:08 +0000

What you Need:

Notepad
MySql Database
Server with APACHE and MySQL set up (for testing i use XAMPP)

How To
Connecting your code to a MySQL database can open up all sorts of possibilities, without it the comments section here would not be available, and i wouldn’t be able to update this website through my Admin panel. It is vital part of current and future web design and is only becoming more popular with the advent of Web 2.0. So how do you connect to a MySQL database? well all you need is the code below.

Lets look at these variables a little more closely.

$databaseHost: This should be set to the I.P address or server name that you have your database set up on, some ISPs or web hosting services will provide you with an I.P address, however for the most part you should set this value to “localhost” or 127.0.0.1.

$dbUsername: This should be set to the username which contains privileges to make changes to your database, again this might be provided for you, However if you set up a database yourself you should set the username to the one you created.

$dbPassword: This should be the password that correlates with your username.

$dbName: Set this to the name of the database you will be editing.

or die(): Tells php to display your custom error message if the query fails.

mysql_error(): retrieve and display the error from SQL.

That’s all there is to it folks, later i will be going into storing and retrieving data from a database.

Your first HTML page

J-Henderson — Thu, 21 Jan 2010 20:27:28 +0000

Hello and welcome to the first tutorial for this site, here i will be delving into what i consider to be the foundation of all web design, HTML.

What is HTML?

HTML Stands for HyperText Markup Language. This language is interpreted by Web Browsers and is the main backbone of the internet, You can view the HTML in this page by right-clicking and choosing ‘View Source Code’. If you wish to know more about HTML you can find more information here.

Your First Page

Now since your here im guessing you cant wait to get your feet wet. Well all you need to start learning html is this guide and Notepad, now open a new notepad document and copy the code below.


  
    My Page 
  

  
    My first webpage!
      Main content.

Now to save your text document simply goto ‘file > save as’ then make sure that the drop down box ‘Save as Type’ has ‘All Files’ selected. Now just save the document as ‘index.html’ without the quotes. Now if you double click the file you just created you will see the page you just created in your default web browser.

Now then what exactly does the code mean?

well denotes the begining of our html page, this tag also tells the browser that this is a Hypertext Markup Language document, next we have the tag this does not show any content on the page however this is where our Meta Information, title and javascript would go. The </code> tag denotes the begining of our title which will show on the title bar of the browser, the <code> tag simply tells the browser where the title ends. next we need to end the head using and start the main body of the page using the body will contain all of the important stuff that we want to show on our page. Inside the body we have created a header for our content using the

and
tags, next we have a paragraph denoted by
and
, and eventually we simply end the body and our page using the and tags.

J-Henderson » TUTORIALS

Getting Started

Using tables for your content

Meta tags – Making your webpage search engine friendly

My header

Connecting to a MySQL Database

Your first HTML page

My first webpage!

and tags, next we have a paragraph denoted by and , and eventually we simply end the body and our page using the and tags.

tags, next we have a paragraph denoted by and , and eventually we simply end the body and our page using the and tags.

and
tags, next we have a paragraph denoted by
and
, and eventually we simply end the body and our page using the and tags.

tags, next we have a paragraph denoted by
and
, and eventually we simply end the body and our page using the and tags.