Website Design - The First Step

This first tutorial will give a basic overview of the different aspects of a websites and the purpose of the many different languages available to use.

The languages that will be covered are HTML, CSS, JavaScript, PHP, mySQL. First a brief and hopefully easy definition of each language.

HTML - The scaffolding and content of a site.

CSS - Where the content is placed and how it will appear (style).

JavaScript - Dynamic content vs Static content, i.e. it is what makes content change or move around.

PHP - Web page generation, processes that make the site do something like a calendar system, or email.

mySQL - A place to store content to be used later, i.e. comments, blog articles, etc.

HTML is called a markup language because it does not actually do anything, rather it tells the browser how to process a page. You might have heard of xHTML which is the same as HTML but strict. This means that in HTML where you could use a tag - a keyword surrounded by you could capitalize that keyword or make it lowercase. However, in xHTML the tag must be in lowercase. I.E. vs .

HTML

HTML is a markup language, meaning delimiters or in this case 'tags' are used to designate differences in content. Tags are surrounded with brackets: . All html tags must be closed via the / either like the above example or in some cases where there is no content to be surrounded by a tag like a break, you put it at the end: .

There are two main parts of the HTML document the head and the body The head is in charge of 'meta' data or content that is not found in the body of the website. One example is the title, or the text found in the very upper right hand corner of the browser. Everything found in the body is going to be shown in the viewing section of the browser.

CSS

While HTML is a series of tags delimiting page content, CSS acts as containers of HTML content. There are a few methods to specify what HTML content is contained by CSS. One example is the . Any content surrounded by the ... tags is styled by accordingly. While it is possible to style HTML content within the HTML document (inline styles) this is considered bad programming practice. A better method is to give identifiers to HTML content and use an external style to specify how the content should be styled.

Simply put css acts as a way of identifying elements inside of an HTML document and styling them accordingly. The two main methods this is done is with the class and id identifiers. Example of their use is ... . An id specifies one HTML/CSS element. A class can specify many. Id's are unique, classes are not. Once a div has an id in an external style sheet it can be reference accordingly.

#div1 { text-align: center; }

This tells the browser that anything found within the div with the id of div1 should be center aligned.

JavaScript

JavaScript is difficult to understand because a web page is viewed by the browser much differently than how a human views a web page. While this is an advanced concept, understanding this before learning JavaScript will make JavaScript much easier to use. A browser follows what is called the DOM or document object model. Every element shown in the browser is connected in a large tree structure. JavaScript can be used to walk up and down this tree to change the different branches and leaves of the tree.

One easy example of this is the . Remember from the HTML section that it is one of the core parts of an HTML document. In this way you can think of the as the top of the tree. If you place an element in the body it is like a branch coming from the top of a tree to that element and connecting it. Now that there is this connection you can use JavaScript to be able to change whatever is at that branch.

The language itself is very similar to c and is fairly easy to learn. What is difficult is understanding how to navigate around the DOM to make dynamic web pages.

PHP & mySQL

With the understanding of HTML/CSS/JavaScript it is possible to make interactive websites. But what if you want to be able to save content that is provided by a viewer of your site, i.e. a comment. The most basic use of PHP is to get content submitted from an HTML site and put it into a mySQL database.

A database is like an excel spreadsheet, or a bunch of rows and columns that are able to hold many types of information. PHP and mySQL are the most common and free combination of script/database languages on the web right now.

PHP is considered a scripting language. This is because it is not compiled, i.e there is no .exe or executable like if you are running a program on your desktop. Instead when a website needs something to happen it calls a PHP script which is immediately interpreted by the server that is hosting the website.

This is an important aspect that differs PHP/mySQL from the other languages. PHP/mySQL are run from the server, or the computer that your computer downloaded a web site from. HTML/CSS/JavaScript are run after the files have been downloaded to your computer by your computer via the browser.

This connection has many important and difficult implications. One is that you only have one shot at downloading content from a server. After the page has been downloaded to download something else you have to reconnect to the server to get fresh content. There are a few ways to do this, either requesting a new page or by using JavaScript.

Review

Some final terminology is backend vs. frontend. Frontend is what is being processed by a host (your) computer via the browser. This is done with HTML/CSS/Javascript. You have gone to a url and a server (computer) has sent you some documents. Your browser looks at these documents and figures out what they say (HTML) and how to make them appear(CSS). If it wants to make the content move around it will use JavaScript.

The backend is everything the server can do, this includes providing the HTML/CSS/JavaScript documents to sending off email. This is done via PHP, and if any content is to be stored it is stored using a mySQL database.

Hopefully this will have provided a basic understanding of the different languages and aspects of a website.

I'm a beginning web developer that likes to make light weight money making websites w/a minimal annoyance to the viewer from adds. Check out my contextual affiliate product placement at my latest creation http://finditdaily.com

Please provide any comments and feedback to webdevwriter@gmail.com. Thanks!

Ajax Tutorial Online - Learn More About Ajax

It is fortunate enough for the I.T. aspirants to have a clear perspective of programming through Ajax technology. With so many websites joining in the endeavor to educate learners, it is a challenge to acquire rightful information that can serve you the best. This therefore, calls for the decision to select appropriate websites letting you learn to implement them further in the process of development.

Most of the tutorial websites define Ajax as Asynchronous JavaScript and XML, which is a tool and language that updates data and content dynamically without having to refresh the page. Ajax is interactive and its speed and usability is used to run online polls, instant messages, autofill search fields, calendars, news updates and other things that shows dynamic data.

Sites aim it high with more to offer in ETech Ajax tutorial that brings in Unplugged Slides and a presentation on Ajax unplugged by Kevin Henrikson of Zimbra that can be followed to learn more in offline Ajax technology. You will be fascinated to learn the essentials of Zimbra Desktop, which is the next generation leap forward for Web 2.0 applications where you can have Zimbra's Ajax-based collaboration experience online and offline. It is something like experiencing connectivity while you are moving and writing e-mails, adding appointments, edit documents to highlight changes automatically, after you login to the server.

Learn more about form validation with AJAX/PHP/MySQL, a quick way to validate required form fields using AJAX, PHP and MySQL. As a result of the validation done an error message will appear beside the required field and will restrict to submit the form by disabling submit button and removes the submit button in case of a field that is left blank. However, to understand Ajax tutorial fully, you must have basic understanding of PHP and to connect to a MySQL database and retrieve records, provide with username and email addresses and know the basics of Ajax to set the form validation successfully and know about CSS, to be able to define classes and ID'S to follow the Ajax tutorial explained and implement it thereafter.

Tutorial sites can now give you more information about a property of XMLHttpRequest that is the - onreadystatechange property that stores the function that receives information from the server and catches data that is returned by the server. The next Ajax tutorial, explains steps to follow just after the onreadystatechange property has a response-handling function and send requests in two steps given in the Ajax tutorial for detailed study.

Ajax tutorial offer more on creating Live Data with AJAX also using PHP and is successful in almost all server side scripting language. This tutorial is available online and can be understood with the basics known about XMLHttpRequest. More study materials, articles and scripts are offered on 'Ajax edit in Place with Prototype', an Ajax tutorial presented by Drew McLellan. Easy Ajax tutorial on Ajax Chat using Java Servlet, automating communication between client and with Java are worth referring online. Start learning online, do not spend precious dollars on expensive books, refer online and get more insights on Ajax. Most of the sites bring in Ajax tutorials to download and save and you might be lucky to have additional resources and topics important for you to know.

Visit for more information at http://www.soloscript.com

Peter Parker, content writer and author of this article writes about Ajax tutorial and how internet has been regarded as the knowledge based environment for I.T aspirants and developers. For more information visit at http://www.soloscript.com.

Web Development and Web Design Insights

For very large business bodies, the development team is usually made up of hundreds of employees or developers. Smaller organizations usually hire a single webmaster to do this job. There are secondary employees as well who perform the jobs of graphic designers or technicians. Web development is essentially a collaborative effort.

Web development has been a growing industry since the mid 90s. To add to this, the cost of web development has also come down to a huge extent. A person can now develop a decent website with little money. That is the charm of the World Wide Web. A number of companies have also come up that help people design and maintain their websites at negligible rates. Softwares like Dreamweaver and others have made it possible for a layman to build and develop a website with ease.

The work culture has also changed in the software scenario. Instead of resorting to the age old technique of executing code on a local host machine, users are now interacting online in order to create new content. This has broken all barriers in communication and has created newer methods. Users can now interact with new applications and interfaces from various locations.

Web development has caused serious transformation in communication and commerce. An example of this would be eBay. Online auctions and other interactive processes have literally changed the way in which people used to purchase their goods earlier. Also social networking sites like orkut and face book have created a path breaking method of communicating freely over the Internet.

Web development has several subdivisions and hierarchies. We shall enlist a few as follows:

Client side coding: AJAX provides various techniques of utilizing the JAVA script and other languages to improve the user's experience. JavaScript is a ubiquitous programming tool.

Server side coding: this includes ASP, cold fusion, CGI, C server scripts, java, lotus domino, PHP, python, ruby, Smalltalk, SSJS and Web sphere.

(Client + server) side: Google web toolkit, pyjamas and tarsus would best illustrate this.

Another very important concept that we need to know is database technology. Database technology is the basic backbone of any information system. A few examples would be apache derby, DB2, firebird, Microsoft SQL server, MySQL, oracle, etc.

Along with database, another very important feature of web development is web security. This is also an upcoming industry (you must have heard of cyber security). Thus we can conclude that web development is a thriving industry and is on the rise.

Web hosting, web developement and web designing services are under taken at high quality with Shanth Solution at Coimbatore in India. You can analyze their plans in their services page or contact them directly at fredrickjohnathan@yahoo.com: All your needs for web service will end here.

Using HTML Tables to Format Your Web Page

Designing a professional looking web site involves much more than simply displaying text between your body tags. In order to organize your page, you must use tables.

A table is an HTML element, also referred to as a "tag," and is used to display your web page content in an organized fashion.

Your page can be set up in columns and rows, you can display your table cells with or without a border, and you can even have a color or image patterned background.

Tables can be used in an unlimited number of ways including:

o Organize your text and images

o Display your text in a newspaper format

o Add color and image backgrounds to text areas

o Display charts

If you've never designed a web page, your first step will be to learn some basic HTML. You can find a beginner tutorial at NCSA Beginner's Guide to HTML:

http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

When you begin designing your web page, you may want to consider placing all of your page content within a table. This will enable you to adjust your table's cellspacing to keep your text from displaying too close to the left border of your page. The higher the cellspacing value, the further away from the left border your text will be displayed. In addition, tables will enable you to display your page content in rows and columns rather than one big block of

text.

Tables are created with the tags. The tag begins the table code and the tag ends the table.

In addition to the table tags, you must also specify the number of rows and columns your table will contain. To do this, you must use the tag, which specifies the beginning of a table row and the tag, which will display your table data. The tag should be placed in front of any information you would like to be displayed within a cell. The tag will close the cell. All of these tags will be placed between the and tags.

Basic Table Structure:

Content

If you're just starting out, you may want to use a simple table format that will display your navigational links on the left or right hand side of the page, and your text and other information on the rest of the page -- in two columns.

When working with tables, make sure you create your tables with a border. This will enable you to see exactly where your borders are so that you can make sure everything is displaying properly. Once your page is complete, you can remove the border.

The following table code will create the basic layout for a web page with two columns. The first column will span 20% of the viewers' screen. The second will span 80% -- for a total

of 100%.

 

 

Notice the table width is set to 100%? This width will display the table across 100% of the viewers' screen. The cellspacing and cellpadding are set to 10 so that the text won't display right up against the left edge of the page, and there will be some space between the cells.

Once you have the basic page layout finished, you can begin adding your content. Your first step will be to delete the placeholder  . These placeholders were placed between the and tags to enable the borders to display -- empty table cells do not display within a web browser.

Your logo and navigational links should be displayed within the left column, which is the smaller of the two columns. All of your page content will be placed within the other column.

Keep in mind, the top left corner of your web page will not only be used to display your logo, but should also contain your most important keyword phrase. Make sure you include an image alt tag displaying your keyword phrase within your image code.

To spice up your page, you can create additional tables with color backgrounds and borders to divide your content into sections.

All of your text and additional tables will be placed between  . Simply replace the   text with your content and table codes.

For example, the following table can be used to display an introduction to your product, article, review or whatever you'd like.

Keep in mind, you don't want to place all of your information on your main page. The key is to include highlights of your site on your main page with a link to further information.

The example link at the bottom of the table can be used to direct your visitors to further information. You can use the colors of your choice and adjust the width to suit your needs.

Your Table Heading

your text here

Link to further

info

Keep in mind, when displaying text within each table cell, to specify a specific font, you must use a font tag within each table cell.

Once you complete your web page, make sure you remove your table border. That's all there is to it.

If you're not confident in your ability to design a professional looking web site, Template Monster offers a large variety of highly professional site templates.

http://www.templatemonster.com

If you're in need of a professional logo, Gotlogos will design a beautiful logo for your site for only $25. http://www.gotlogos.com

Take your time and test different table designs. Try adding new rows and columns and change the background and border colors. The more you practice, the better you will become.

Gook luck with your new site!

Copyright © Shelley Lowery

About the Author:

Shelley Lowery is the author of the acclaimed web design course, "Web Design Mastery" (www.webdesignmastery.com) and "eBook Starter - Give Your eBooks the look and feel of a REAL book" (www.ebookstarter.com)

Visit www.Web-Source.net to sign up for a complimentary subscription to eTips and receive a copy of Shelley's acclaimed ebook, "Killer Internet Marketing Strategies."

You have permission to publish this article electronically, in print, in your ebook, or on your web site, free of charge, as long as the author bylines are included.

Is PHP a Server-Side Scripting Language and How We Can Embed PHP Code With HTML?

PHP is the most popular language to create web sites. PHP stands for Hypertext Preprocessor. It is a general-purpose scripting language initially designed for web development to produce dynamic web pages. PHP is a server-side scripting language. You create pages with PHP and HTML. When a visitor opens the page, the server processes the PHP commands and then sends the results to the visitor's browser. this language runs on Windows NT and many UNIX versions, and it can be built as an Apache module and as a binary that can run as a CGI. PHP is especially lightweight and speedy. Without any process creation overhead, it can return results quickly.

PHP extensions: You can save webpage of PHP with following extensions.php,.phtml.php4.php3.php5.phps

It was originally created by Rasmus Lerdorf in 1995. The main implementation of PHP is now produced by The PHP Group.

In addition to manipulating the content of your pages, PHP can also send HTTP headers. You can set cookies, manage authentication, and redirect users. PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc.).It offers excellent connectivity to many databases (and ODBC), and integration with various external libraries that let you do everything from generating PDF documents to parsing XML.

PHP's language syntax is like to C's and Perl's. You don't have to declare variables before you use them, and it's easy to create arrays and hashes (associative arrays). This language even has some basic object-oriented features, providing a helpful way to organize and encapsulate your code.

Scripts sit inside HTML documents, so you don't need a special editor to create pages. You do need to be running on a server that supports PHP, however PHP is compatible with almost all servers used today (Apache, IIS, etc.). PHP is FREE to download from the official PHP resource:

PHP is an open source software.This Language is free to download and use.Its files can contain text, HTML tags and scripts.

you can combined it with MySQL are cross-platform (you can develop in Windows and serve on a Unix platform)

For UNIX systems, you'll need basic UNIX skills, such as using make and a C compiler, an ANSI C compiler on your system, and a Web server. For Windows 95/NT, you'll need one of the following servers: Microsoft Personal Web Server, Microsoft Internet Information Server 3 or 4, Apache 1.3.x.

For PHP tutorials and basic information you can visit http://www.nerdtreasure.com

Are You Embarking On An Internet Marketing Career Without A PHP Developer? Your Kidding, Right?

In my half-decade plus of marketing on the net, I've seen my share of trouble. DDos attacks (distributed denial of service), Viruses, Forums full of trolls, software that didn't work as advertised, tools that came with no documentation, and even less actual support. What was the one, unchanging weapon that steered me through all this? My ROCK? It was my PHP developer.

"What the heck IS a PHP developer and why do I need one?" a freshly-minted Internet Marketer might ask. PHP is an acronym that describes a type of coding language, used almost exclusively in web-based server environments called Hypertext PreProcessor. Don't ask me why it isn't HPP...maybe Hewlett-Packard had something to do with it? Or the SOUND of PHP is better...FUN like the old amusement park in Santa Monica, CA - POP (Pacific Ocean Park)...

PHP is a rival to the Microsoft server scripting languages such as .ASP and the .NET framework. Because PHP is open source, the development cycle is global, and occurs at a furious pace. It is not only relatively easy to learn. It's cheap (free) and the installed base of teaching tools, tutorials, and development libraries are as extensive as the worldwide developer community.

Unless you REALLY want to take a walk down the path less traveled, and embrace a OOPL (object-orient-programming-language) such as ROR: Ruby On Rails, just find yourself a great PHP developer you can communicate effectively with and settle in for a long and profitable ride.

Two bonuses I discovered in my own developer that are often missing among the developer mindset: Graphics skill and understanding marketing logic and tactics. If your developer is "stick-figure-impaired" you might want to keep looking. If you mention the phrase 2TAS (short for two-tier-affiliate system) and they look at you like you are from some other planet, it might be time to move on.

The other really critical skill is knowing how to have one's way with MySQL databases. PHP is just the instruction set that manipulates the data inside the database. And databases are funny animals. Get someone who isn't afraid of them. Someone who can make them DANCE. Once these skills are manifested in a reliable member of your marketing team, all the roadblocks to success just melt away. The web morphs into an infinity of possibilities, instead of a nightmare, just waiting to happen. Your web sites, your weapons, your tactics: all get dialed up a notch...often by an order of magnitude.

One last caveat: you get what you pay for! Get someone who speaks your native language. If your project comes back with all the database tables developed in Greek, or Russian, maintaining them in-house or with a new developer is going to be impossible, or at least prohibitively expensive.

Steve is a CPA, real estate developer and online entrepreneur. He operates a network of mentoring communities for aspiring web marketers. You can peer into his crazy world whenever you like at: [http://bigdogmentoring.com]

Beginners Guide to SQL Injection & How to Prevent it From Happening to You

This article is meant to be a brief overview of SQL injection and how you as a developer can take a few simple steps to stop it from happening. Simple injection attacks can cause headaches, unnecessary stress in a client relationship, and can even sometimes have a financial impact on yourself or a client.

SQL Injection is nowadays a dying problem in the web development community due to stricter coding and the mass use of popular open source projects like WordPress, but it is still definitely something that can not be ignored. Simple coding mistakes can cause a huge vulnerability to the entire site structure.

Let me start by giving a general overview of what an SQL injection attack is:

Wikipedia definition

SQL injection is a code injection technique that exploits a security vulnerability occurring in the database layer of an application. The vulnerability is present when user input is either incorrectly filtered for string literal escape characters embedded in SQL statements or user input is not strongly typed and thereby unexpectedly executed. It is an instance of a more general class of vulnerabilities that can occur whenever one programming or scripting language is embedded inside another. SQL injection attacks are also known as SQL insertion attacks.

So what does that mean in English? At the core of it, it means that anywhere you have a form field, or declare a variable in the URL of your site you are leaving yourself open to an injection attack unless you properly escape the string.

So for example, if I have a database with a table full of staff bios for my organization, I might number each row with an ID. In my PHP I might attach this ID to the end of my "bio.php" page as something similar to

bio.php?id=12

where "12″ is equal to a specific bio that I am trying to read.

There is nothing wrong with using this technique to code your sites with, but if you do no properly escape the string or define the variable as being numeric only, you open yourself up to be attacked.

If you are using the _GET method to read the ID there are a couple of options to guarantee the safety of your site.

Here is an example of vulnerable code:

$id = $_GET['id'];

If I am a hacker and I notice that your site has links in this format (yoursite.com/bio.php?id=12) I know that you are defining the variable $id as 12. It is also safe to assume that you are accessing the database with this specific id using code that probably looks something like this:

$sql = "SELECT * FROM $table_name WHERE id = $id";

If you haven't escaped the string a hacker could easily type in his own code to the end of the URL after "12″. An example of that would be:

<a href="http://www.yourdomain.com/bio.php?id=12;DROP">http://www.yourdomain.com/bio.php?id=12;DROP</a> TABLE users;

This would obviously wipe out any table you had named "users" in your database. This is not good. If your business depended on membership to your site and all of a sudden a hacker deleted all of your user information, you might as well close up shop.

Luckily for all of the membership driven shop owners out there, I have a solution! (Well, PHP has a solution, I can't take credit for that part of it...)

One way to prevent this from happening is by using the "mysql_real_escape_string" function. This functions sole existence is to strip out any special characters that have been attached to the end of the variable. Example:

$id = mysql_real_escape_string($_GET['id']);

Now if someone was to try and attach our "drop table" code, it would strip out the semicolon and would not work.

Another way to beat injection attacks is to use the "intval" function. This forces PHP to convert any string of text and numbers to the actual integer values that are present.

So for example if the hacker typed:

http://www.yourdomain.com/bio.php?id=12;DROP TABLE users;

and your PHP code was:

$id = intval($_GET['id']);

PHP would try and convert the "id" variable to a number. Since ";DROP TABLE users;" is all non-numeric, it would simply ignore that string and just produce "12″ as the value of ID.

One extremely useful tool for PC users (sorry Mac people) to check the vulnerability of your website is the

Havij SQL Injection Tool

. I have used this tool for quite a while now and it is really an eye opener to seeing just how vulnerable your sites might be.

Hopefully you have found this short tutorial on SQL injection useful. It can be a huge headache to try and restore a site if it has been defaced by a hacker. It is thousands of times easier to take the steps up front to prevent such an attack from happening in the first place.

My name is Jarred Smith and I am the owner of http://www.phpsandbox.org where I write articles, tips and tutorials for PHP development.

PHP Tips For Beginners

Alright, I'll admit it! I am hardly a PHP expert myself but I thought I would write this anyway as it should be of some use to someone out there. Here are a few tips that should hopefully help you if you just starting out with the language.

1) Do not rely solely upon one source for instruction and tutorials. I seriously recommend making use of all of the resources available to you whether they be from books or the internet. The Official PHP site, PHP Freaks and PHP Builder are your friends. There is so much out there to learn.

2) Does the_cat look better than theCat? Make your mind up early as it can be quite offputting naming a variable the_cat in one program and theCat in an other. It is best to decide on a convention for naming variables early on your PHP career as consistency is your friend in the long run.

3) Do not follow examples/tutorials blindly on the internet. This is important. A site may be trying to demonstrate a programming concept by using the example of a car company. If you've no interest in cars you won't be in the slightest bit interested. Why not try applying it to something you are interested in like music or sports?

A good example of this was when I was trying to learn about classes in PHP. I had major difficulty staying awake as most of code I read was based around the analogy of a bank or something. So instead I decided to alter the example and create a class based around a soccer player. I couldn't believe how easily I grapsed the concept after this. As with everything in life if you are interested then half the battles won.

4) Comment your code whilst you are working on it. This is not a suggestion but an order. As you grow more competent with the language your coding style will inevitably change and you'll begin questioning your sanity when you look at your old code. Believe me, you'll think someone has broken into your computer and tampered with your scripts. "Was my code really that shabby? What the hell's this meant to do?!?!? Whaaa?????" are all phrases I've caught myself uttering whilst revising old code.

5) Read the PHP manual regularly. Its amazing how many times at the start you try to code a function that is already built into the language. This can be very frustrating.

6) Do not be frightened about writing bad code. Get stuck in and make your mistakes early as it's only through godawful errors that your programming style will evolve. It can be extremely frustrating at times, but if you take a pro-active attitude to programming and do a little bit of research on the difficulties that you've been encountering then you'll overcome these hurdles and you'll become a stronger programmer.

7) print_r() is your friend, particularly when it comes to debugging arrays. It can be crucial when it comes to diagnosing simple but persistant problems.

8) Once you feel confident in your ability as a PHP programmer, I seriously recommend joining Rentacoder. It will give you practical experience in working with clients from all over the world and will force you to improve upon your understanding of the language and web design in general.

9) Play around with PHP and use its built-in functions to create something goofy. Let your PHP IDE be your sketchpad. This is meant to be fun god-damnit. Not a chore!

10) Download PHP Designer 2006. Trust me, it makes programming in PHP a hell of a lot easier. Plus its free, which is always good when you are a cheapskate student like myself.

Written by Matt for Take More Risks