Scribd
Upload
4 views

Writingcode

Uploaded by

Reet Garcha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Writingcode

Uploaded by

Reet Garcha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

Data Technologies

Writing Computer Code

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Text Editors
You may use any text editor you like, but you will be writing a
lot of computer code and there are some features of Crimson
Editor that you will find very useful.

A text editor is not the same as a word processor. Word


processors tend to focus on what a document looks like and
try to think for you. The most sophisticated operation in a text
editor is cut-and-paste, and even that is usually too
dangerous.

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Text Editors
Desirable text-editor features for writing code:

• Parenthesis matching

• Automatic indenting

• Syntax highlighting

• Line numbering

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Good Coding Practice
HTML will be our first example of creating documents
containing computer code.

HTML is the main language used to create documents for the


World Wide Web.

HTML consists of elements and attributes that describe the


layout, appearance, and behaviour of text and graphics in a
web page.

A web page can be just a text file containing HTML.

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML Example
<html>
<body>
<h1>An HTML Example</h1>
<form>
<input name="rb" type=checkbox value="0">
with<br>
<input name="rb" type=checkbox value="1">
some<br>
<input name="rb" type=checkbox value="2">
checkboxes<br>
<input type=submit name="submit"
value="and a submit button">
</form>
</body>
</html>

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML example

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML Syntax

HTML is a non-proprietary language “standard”.

A group called the World Wide Web Consortium (W3C)


publishes “recommendations”, e.g., HTML 3.2, HTML 4.01,
XHTML.

We will work with HTML 4.01

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML Elements
An HTML document is made up of elements, which are usually
a start tag and an end tag, with some content in between.
<tag>
some context
</tag>

Some elements are “empty”, consisting of only a start tag.


<img src="blah.jpg">

<br>

In more modern versions of HTML, empty elements are written


like this:
<br />

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML Elements
The HTML tags “mark up” the content to indicate the structure
of a document.

<h1>This is a heading</h1>
This is normal text.

Applications that understand HTML, such as web browsers,


present the content based on the structural information. For
example, headings are drawn bigger and bolder than normal
text, and on a line by themselves.

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML Attributes
HTML Attributes provide extra information about an HTML
Element.

Attributes are to Elements as Adjectives are to Nouns.

<img src="auckland_uny_logo.gif"
alt="The University of Auckland">

Attribute values should be surrounded by double-quotes (e.g.,


src="auckland_uny_logo.gif").

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML Rules
Elements can be nested, but should not overlap.
• This is ok ...
<tag1>
<tag2>
blah blah blah
</tag2>
</tag1>

• This is not ok ...


<tag1>
<tag2>
blah blah blah
</tag1>
</tag2>

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML Special Characters
Anything between a < and a > in an HTML document is
treated as a tag.

To put an actual < in an HTML document, for example to


include something like age < 50, you must use &lt;. For a
>, use &gt;.

Anything that starts with a & in an HTML document is treated


as an “escape sequence”.

To put an actual & in a document you must use &amp;.

Escape sequences can also be used to produce some special


characters. For example, &copy; produces c .

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
The Structure of an HTML Document
There should be a DOCTYPE declaration which identifies what
version of HTML is being used.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

There should be an html element.

The html element should consist of an head element and a


body element.

The head element should contain a title element.

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
A Minimal HTML Document

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>
<head>
<title>A Minimal HTML Document</title>
</head>
<body>
Your content goes here!
</body>
</html>

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML Validation

Most software that implements a computer language acts like


a very strict spelling and grammar checker.

Web browsers do NOT act like this.

The result is that the same HTML document can look very
different in different browsers.

Also, web browsers do not tend to give any feedback if there


are errors in the HTML; things just don’t look right.

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML Validation
Web browsers are not very good for testing whether your code
is correct.

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Understanding Errors
HTML Tidy will produce a report telling you about the errors in
your document.

This includes important information like what sort of errors


there are and where the errors are (e.g., the line number
where the error occurs).

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
A Broken HTML Document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transi
<html>
<head>
A Minimal HTML Document
</head>
<body>
blah blah blah ...
</body>
</html>

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Good Coding Practice
There are some important principles to learn for writing any
sort of computer code:

• Layout your code

• Comment your code

The layout of your code is important for making the structure of


the code easy to see. This allows you to navigate the code
more easily. It should be easy to read the code.

A good layout will probably look nice; a pretty layout is not


necessarily good.

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Code Layout
Which of these two pieces of code has the better layout?

<html><head><title>A Minimal HTML


Document</title></head><body>
Your content goes here!</body>

... or ...

<html>
<head>
<title>A Minimal HTML Document</title>
</head>
<body>
Your content goes here!
</body>

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Code Blocks
A simple rule is to indent “blocks” of code.

“Blocks” mean different things in different languages, but


generally have the form:

BEGIN
blah
blah
END

In HTML, open and close tags are good examples.

<head>
<title>A Minimal HTML Document</title>
</head>

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Long Lines
Sometimes a single line of code can be very long. In such
cases, it is better to break the line and indent the continuation.
Not ...

<table border="1" cellspacing="5" cellpadding="5" summary="just a tabl

... but ...

<table border="1"
cellspacing="5"
cellpadding="5"
summary="just a table">

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Code Layout
How much should you indent?

It doesn’t really matter. I use 2 or 4 spaces. The only problem


with more spaces is that it becomes hard to fit long
expressions onto a single line.

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Code Layout
Which of these two pieces of code has the better layout?

<head>
<title>A Minimal HTML Document</title>
</head>

... or ...

<head>
<title>
A Minimal HTML Document
</title>
</head>

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Code Layout
In addition to indenting code, it is important to use white space
(spaces or empty lines) within or between expressions to
improve readability.

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Using spaces
It is usually better to put spaces around operators, between
items in a list, and so on.

<table border="1"width="50%"summary="">

<table border="1" width="50%" summary="">

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Using empty lines
Empty lines can be used to separate conceptually distinct
parts of code.

<html> <html>
<head>
<title> <head>
STATS 220 <title>
</title> STATS 220
</head> </title>
<body> </head>
<h1>
STATS 220<br> <body>
</h1> <h1>
... STATS 220<br>
</h1>
...

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Commenting Code
Virtually all computer languages provide a special syntax for
inserting “comments” into code. These parts of the document
are not processed.

It is important to include comments so that:

• other people have some idea of how your code works

• you have some idea of how your code works.

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Commenting Code
In HTML, a comment starts with a <!-- and ends with a -->

<html>
<!-- This HTML document does nothing! -->
<head>
<title>
</title>
</head>
<body>
</body>
</html>

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Commenting Code
Having no comments in your code is bad. But having too many
comments in your code is also bad.

Comments should summarise the code and/or describe the


intention of the code. Do not write comments that just repeat
the code.

<!-- This is the document head -->


<head>
</head>

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Good Coding Practice
All computer languages have a set of syntax (punctuation)
rules which must be obeyed so that your code works correctly.

There is an important distinction between syntax and


semantics: syntax means your code follows the rules of the
language; semantics means your code does what you want it
to do.

This sentence is syntactically correct, but semantically flawed:


“Food went to the picnic and ate Paul”.

The computer can tell you whether your syntax is correct, but
you must also test whether the semantics are correct.

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Good Coding Practice
The techniques for debugging code vary depending on which
computer language you are working with.

Here are three important general techniques to learn for


testing that your code is working correctly:

• Learn to read error information.

• Test your code in small bits and on simple examples


where you know what the answer should be.

• Write your own debugging information.

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Testing Code
Write and test your code in small pieces.

Build your code up in small steps. Get one step working before
adding more code.

<html>
<head>
<title> Check My Title works</title>
</head>
<body>
</body>
</html>

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Testing Code
<html>
<head>
<title> My Title works!</title>
</head>
<body>
Now I can add the body
</body>
</html>

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Further Reading
“Code Complete” 2nd Edition, by Steve McConnell
Microsoft Press (2004)

•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit

You might also like