Introduction

Ubuntu is the perfect environment for learning how to develop for the web. If you're running Ubuntu now, you're running much of the same software that powers some of the largest sites on the Internet. Any computer can be a webserver that runs a website, and operating systems like Ubuntu provide the software that makes it possible.

This guide is for people who want to learn the basic concepts behind web development on a Linux operating system like Ubuntu. You won't find detailed instructions for all of the options involved in setting up a database. You'll learn how to set up a basic web server, a simple database and scripting language. These simple installations will be insecure and shouldn't be used to run production, or live, websites. Once you master these basics, you can move on to more advanced topics, like ApacheMySQLPHP.

Web Browsers and Servers

The Internet is a huge network of computers that can talk to each other. When you open up Firefox or Chrome, for instance, your computer is sending a signal to another computer on the network, asking it for a web page. (Keep in mind that this is an oversimplification, but this is the level you need to know for now). That other computer, the "server", then sends your computer the web page.

Your computer and that other computer speak a particular kind of language, called a protocol. Protocols are just like human language - when you say "Hello" to someone, protocol dictates that they say some form of "Hello" back. In the same way, computer protocols are standard ways for computers to exchange information. On the web, computers primarily speak a kind of protocol called HTTP - Hypertext Transfer Protocol. If you're running Firefox (or any other major web browser), look at the URL bar at the top (where you type the address for the web page). It will start with "http://", which tells your browser to use that particular protocol when it talks to the server.

HTML and CSS

HTML is a language that defines the structure of a web page. When you want to make a link on a page, you use HTML to "mark up" the link and define where the link should go. This is why HTML is called a markup language. Web browsers like Firefox, Chrome and Internet Explorer speak the language of HTML. At its heart, every page on the Internet is just HTML that gets read and displayed by your web browser.

So, what does HTML look like? The best way to learn is from a few examples. Here's what a link looks like:

<a href="http://www.ubuntu.com">Ubuntu</a>

There are four main parts to this anchor, or link, tag:

  • The opening tag: <a>

  • Any attributes of that tag, before the ending bracket: href="http://www.ubuntu.com/"

  • The text of the link, between the opening and ending tags: Ubuntu

  • The closing tag: </a>

Ubuntu - HTML example.png

Basic HTML tag:

<p>
This is a paragraph tag, used to separate paragraphs of text.
</p>

You can combine tags within other tags. Let's use the anchor and paragraph tags to demonstrate:

<p>
    This is a new paragraph, with a link to <a href="http://www.ubuntu.com/">Ubuntu</a> in it.
</p>

Some tags expect one or more tags to be included inside of them. For instance, to create a list, you use a <ul> tag, with one or more "list item", or <li> tags inside:

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

This looks like:

  • List Item 1
  • List Item 2
  • List Item 3

That creates an "unordered list" by using the <ul> tag, which by default uses bullets next to each list item. To get an ordered list, with numbers instead, you can use the <ol> tag:

<ol>
    <li>Ordered List Item 1</li>
    <li>Ordered List Item 2</li>
    <li>Ordered List Item 3</li>
    <li>Ordered List Item 4</li>
</ol>

This looks like:

  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3
  4. Ordered List Item 4

A Simple Web Page

Scripting Languages

If HTML is the language that your web browser reads and uses, then a scripting language is what the server uses to do advanced things like process a form and store it in a database.

PHP

Ruby

Databases

More Information

There's a wealth of more advanced information available for programming on Ubuntu.

BeginningWebDevelopment (last edited 2010-12-28 02:12:08 by tonyjw)