Getting started with the Linux command line interface

If you ever used DOS or the command prompt on Windows machines then just forget everything you’ve seen. The linux command line interface (CLI) is amazingly flexible and powerful. Here are some essential commands to get you started:

List files in a directory
The handiest form is:

ls -l

which gives something like this:

-rw-r--r-- 1 james james 31908 2010-06-02 20:30 exploits_of_a_mom.png

The information here is: files permissions, number of links to this entry (ie files in a sub-directory), the file’s owner, the file’s group, the file size in bytes, date modified and filename.

cd

Change directory
To go up a directory:

cd ..

To go to your home directory:

cd ~

To go down into the test directory:

cd test

To go to the /var/logs directory:

cd /var/logs

And if you’re lost then the pwd command will tell you where you are

pwd

Show the present working directory

whoami

Tells you which user you are logged in as (I mainly included this because it makes me giggle). Can be useful – if your program is running on a web server and it can’t access a file then this might make things clearer.

ifconfig

Displays information about your network interfaces.
Useful for: finding your IP address, MAC address

grep

Search for a phrase
Search all .php files for the string “add_filter”:

grep add_filter *.php

Same but recurse all sub-directories:

grep -r add_filter *.php

Same but case insensitive (ie pick up “Add_Filter” or “ADD_FILTER” as well):

grep -r -i add_filter *.php

mv

Move a file

mv i_am_here.txt another_directory/now_i_am_over_here.txt

cp

Copy a file

cp lovelyfile copyoflovelyfile

rm

Delete a file

rm rubbishfile.txt

cat

Output a file contents as a stream. Useful when piped with “|” into another command, eg search the file myfile.txt for the string “frogs” (case insensitive):

cat myfile.txt | grep -i frogs

tail

Displays the end of a file (ususally used for following log files). As new lines are added they are displayed.

tail -f myfile

See find and backticks below for useful tricks.
Press Control-C (^C) to leave.

find

Find a file
As seen in my article on following your apache webserver logs you can find all files called “access-log” in the /var directory:

find /var -name access.log

unfortunately this gives errors for directories which couldn’t be opened (user has no permissions) so this is better:

find /var -name access.log 2>/dev/null

Linux commands give output streams called standard output (given number 1) and errors (given number 2). Here we send the error stream off to the device /dev/null (which basically throws everything away). We could do this:

find /var -name access.log 2>error.txt 1>out.txt

And now the file “out.txt” contains the output, in this case the filename and “error.txt” contains the error output.

Hints and tips: Backticks

You can send the results of one command to another using backticks (`), as in this example from my article on following your apache webserver logs:

tail -f `find /var -name access.log 2>/dev/null`

This does the find command first to get the location of the file “access.log” and then uses that filename for the tail command.
We could even pipe this result through grep to search for a phrase:

tail -f `find /var -name access.log 2>/dev/null` | grep login.php

This will give a realtime display of all requests to “login.php” on your web server. Neat huh?

wget

Retreive a URL (eg web page)
Download a file to the current directory:

wget http://www.somebodieswebserver/an_image.jpg
Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Natural language web design program

I’ve been playing around with natural language processing again. It’s really nice to communicate with a program using text commands rather than messing about with buttons and dialog boxes.

I’ve been working on a natural language web page designer. This is a very rough beta version for testing so have a play and send me feedback (what works/doesn’t work, things which aren’t clear in the helpfile).

Some knowledge of HTML and CSS is useful but not essential. Look at the example code and I’m sure you’ll get the idea.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Basic Web Design Tutorial Part 14

Well, that’s it. I how you enjoyed it and I’d value any feedback you have.

You could review the finished page and its’ CSS file.

You could go back to the beginning of the web design tutorial.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Basic Web Design Tutorial Part 13

Styling Links

Here’s example 14 (opens in a new window) and the CSS file.

OK, notice on the left hand side that the links have changed in style. The underline has gone but if you roll the mouse over them it reapppears.

A {
text-decoration: none;
}
A:hover {
text-decoration: underline;
}

(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Basic Web Design Tutorial Part 12

Choosing fonts

Here is example 13 and here is the CSS file.

In the BODY section there are now two lines like this:

font-family: Candara, sans-serif;
font-size: 12pt;

(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Basic Web Design Tutorial Part 11

Centering the page and adding borders with CSS

Here is example 12 showing the next stage. The CSS file is here.

So, what’s new? Firstly the page has been centered by including this code in the CSS BODY section:
margin-left: auto;
margin-right: auto;
width: 800px;

This makes the whole page 800 pixels wide and centers it in the browser window.

(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Basic Web Design Tutorial Part 10

Introducing Cascading Stylesheets (CSS)

I’m not going to show the complete source code any more just the changes.

I’ve added a line to the HEAD dection of the HTML file to tell the browser to request a CSS (cascading stylesheet) called “example11.css” (in the same directory as the webpage) and apply it’s effects to the browser. In example 11 it looks like this:

<link rel=”stylesheet” href=”example11.css” type=”text/css” />
The CSS file is here.
(more…)
Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Basic Web Design Tutorial Part 9

Putting it all together, content and layout

Example 10 (opens in a new browser window) puts everything you’ve learnt so far into pratice. The page is layed out in a table. It has headers, an image and links. Next we’ll make it look more stylish by adding a cascading stylesheet (CSS) to change the fonts, background colours, text colours and layout. There’s also an HTML comment or two. It’s good practice to comment your code if there’s anything you think you might forget when you go back to edit it later.
(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Basic Web Design Tutorial Part 8

A complex table

This is a more complex table example. Complex layouts (with headers, footers, columns) might need this.

The COLSPAN and ROWSPAN attributes of the TD tag tell the browser that that TD stretches over multiple rows or columns. I find it helps to imagine the table being built up a row at a time from top to bottom and from left to right. The best way to get your head around this is to play around with it.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Basic Web Design Tutorial Part 7

A simple table

Tables let us lay out information so it looks nice and can be used to lay out your whole webpage. Some would argue that all the positioning should be done with a CSS stylesheet but I’ve found that it’s hard to get working on all browsers (IE6 is particularly foobar). So I still use tables. They’ve been around for ages and all browsers seem to know what to do with them. Here’s a simple table with 2 rows.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter