Writing accurate code
This page explains a method that professionals often use to make fewer mistakes when typing code into a basic text editor. The actual programming or markup language being used does not matter, as it is useful for any of them.
Say you were presented with the code below and asked to type it into a code editor of some kind
<!doctype html>
<html>
<head>
<title>Wikipedia search box </title>
<style>
body {
height : 580px;
border: 0;
}
iframe {
height: 100%;
border: 0;
}
</style>
</head>
<body>
<iframe src = "http://m.wikipedia.com"> </iframe>
</body>
</html> |
The most straightforward way is to start typing in each line, one by one, starting from the top. This is fine, but the chances are you will miss a bracket or a semi-colon somewhere so the page may not behave correctly.
But there is a better way.
There are rules in place that defines how a particular coding language is to be written - it has a grammar. And this method takes advantage of that.
The code above is the HTML markup code for a simple web page. Every html web page should begin with a declaration as to its type, something like this
<!doctype html> |
This tells the browser what type of page is to be rendered. So start by typing in this line.
Next, every web page should begin with a <html> tag and end with its opposite tag </html>. So now type in that pair, like this
<!doctype html>
<html>
</html> |
Forget the detail at this point. You are putting together the structure of the page before any details. In this way, at least you are likely to get the coding structure right. So, next, within the html tags there is a head section followed by a body section. Write in the head tag pair followed by the body tag pair.
Use spaces in your code to make is easier to read as well.
<!doctype html>
<html>
|
At this point you have the basic setup of a web page and you can clearly see that each tag has got its correct closing tag.
Now let's add some more detail. Within the head tag on this page you can see that there is a title tag pair and a style to be applied. So type in the empty title and style tag pairs
<!doctype html>
<html>
|
And the body tag has a code block called an 'iframe' in it. Don't worry about what an iframe is at this point as you are mainly trying to type accurate, grammatically correct code
<!doctype html>
<html>
|
Now it is time to add more detail. Begin with the detail of the title.
<!doctype html>
<html>
|
Let's expand the style section. It contains a 'body' style, which always needs an opening and closing curly bracket. Try and line up the closing curly bracket beneath the 'b' in body. In this way it is a bit easier to see how they relate. Like this
<!doctype html>
<html>
|
The same with the iframe style - it also needs an opening and closing curly bracket
<!doctype html>
<html>
|
You should see at this point, the page is starting to look complicated with curly brackets, opening and closing tags and so on. But because you have built it up in a logical order that follows the rules of HTML, you can be more certain that you have not missed anything.
Next, build up the detail inside the body style. In CSS styles, the rule (syntax) is that the style begins with a label, followed by a colon, followed by some data, followed by an end semi-colon. Like this label : data ;
So apply this rule first
<!doctype html>
<html>
|
Now look at the original code listing and type in the specific detail within each style command
<!doctype html>
<html>
|
So you can be confident that the grammar of writing the style code will be correct without any missing semicolons etc.
Finally for this code, add the detail inside the iframe tags within the body
<!doctype html>
<html>
|
And there you have it. You have used what you know about the grammar and structure of the coding language you are using to build up accurate, grammatically correct code.
The other thing to note is that laying out the code tidily with plenty of spacing and lining up of related parts makes it a lot easier to read the code at a later date.
In sophisticated code editors, you will often find a 'code completion' feature that will automatically fill out the format of a code snippet in this manner.
Whether you typed this code in by hand or used a code-completion IDE, this code has to run within a web browser in order to be rendered as a web page. This means that you could use 'localhost' on a personal computer. Use the link below to explore this idea
Challenge see if you can find out one extra fact on this topic that we haven't already told you
Click on this link: Setting up a local web server
We recommend using XAMPP as an excellent free application to run as a local web server, it will also install the very popular MySQL database system and the PHP server script language so you can develop some of the most sophisticated services available on the web before having to commit to a real web server.
There are others of course, so feel free to explore.
The ultimate objective is to create a web page on the internet to allow the entire world to have access to your content. To that end, the code you have written has to be hosted on a web server, there are thousands of providers that can do this (for a price) so feel free to use the link below to see what is available
Challenge see if you can find out one extra fact on this topic that we haven't already told you
Click on this link: Hosting a web site
Copyright © www.teach-ict.com