In the beginning, W3C created HTML[1]
, a standard which converged rapidly on HTML 4[2],
and became the engine of the web that we all learned to use during
the noughties. And W3C saw that it was good. Good, but there was
something missing. The static nature of HTML 4 gives a very clear separation between the presentation of a web page and the content behind it, but it turns out that it's useful to have more dynamic capabilities in the presentation layer.
And W3C said let there be javascript.
And the Dojo foundation created the dojo toolkit, a javascript
library which provides a more dynamic web experience.
To learn more about dojo, you'll need to start with some HTML. Here's the source for a basic HTML page of a simple form with CSS formatting, in future blogs I'll start adding dojo code to it. If you want to run the code yourself:
- Open a text or code editor (for example notepad, eclipse, or aptana)
- Save the HTML in a file called anything.html
- Save the CSS in a file called hello.css, under a directory called css
- Double click or drag and drop the HTML file into a browser and check out the results
<!DOCTYPE html>
<html>
<head>
<LINK href="css/hello.css"
rel="stylesheet" type="text/css">
<title>Hello Html</title>
</head>
<body>
<h3>Hello Html</h3>
<form>
<div>
<label for="myText">Enter
your name here</label>
<input id="myText"
class="text" type="text">
<!-- note that there's no
action on this button, so it (intentionally) doesn't have any effect -->
<input class="button"
type="submit" value="Submit Form">
</div>
</form>
</body>
</html>
I've pointed out some of these features as they show in the web page in the screenshot below. Here are a few brief explanations of code which doesn't directly control a visible feature:
<div> is a division or section. It's mostly here now because the HTML 4 specification mandates it, but we'll use divs a lot more with dojo.
<!-- --> is a comment.
<!DOCTYPE>, <html>, <head>, and <body> are required by the HTML (4.01) specification
Here's the CSS for formatting:
body {
font-family: "Trebuchet MS",
Helvetica, sans-serif;
}
h3 {
margin-left: 130px;
}
form {
margin-left: 20px;
width: 290px;
background-color: #e0e0e0;
height: 85px;
padding-left: 15px;
padding-right: 15px;
}
div {
padding-top: 10px;
}
.button {
margin-top: 20px;
float: right;
font-size: 17px;
}
If we were using HTML 4, we would need
to make the submit button perform an action, but then we'd also have
to go and write the backend web service. Instead, we'll take another
direction and add javascript in the form of dojo, so for now this is
just a form that doesn't actually do anything.
If you see a result like this, it's
because your HTML page can't find the CSS page, make sure you have it under a folder called css:
The successful result looks like this:
I've loaded this code into JsFiddle
Footnotes
[1] Tim Berners-Lee and the W3C
developed HTML 1, which was never published, and HTML 2, which was.
[2] Technically 4.01, which was
formally released in December 1999, and is still in use today,
although it is being overtaken now by HTML 5 [3]
[3] I generally use figures and
references from Wikipedia, where I am a paid up personal member (but
not an employee)
ok, I think I have this. I like the with and without-CSS screenshots, so that you get the sense of what the css is doing.
ReplyDeleteAm I right in thinking that the Submit button is below everything else in the CSS version because the form (with width declared in the CSS) is too narrow for it to fit on the same line?
On my computer, the text box comes out below the text, with the submit box bottom right. My form doesn't look wide enough for the text and text box to fit on the same line.
Excellent question. Yes, a wider form width would be a reasonable fix. For a longer answer, see my latest post.
Delete