Going Global: The Web in a Nutshell [Systems thinking & modelling series]
This is part 73 of a series of articles featuring the book Beyond Connecting the Dots, Modeling for Meaningful Results.
The World Wide Web is based on a collection of many different technologies that work together. When developing a webpage you need to be familiar with three major technologies: HTML, CSS, and JavaScript. Each of these technologies or languages plays a different role in webpage development.
The web is interesting in that each of these technologies is based on old-fashioned, simple text files. You write HTML text files, you write CSS files, and you write JavaScript files.1 You do not need any fancy tools to create these files. Any simple text editor will do. A web browser converts the simple instructions and code in these files to the rich interactive webpages you see when you browse the Internet.
Many books and sources on web development recommend that you use some kind of interactive web site builder (like Adobe Dreamweaver). That is certainly a great way to get up and running, but ultimately you will find the approach very limiting. To truly harness the different tools offered by the Internet, you will need a basic understanding of the underlying technologies and be able to work with them directly. So, rather than using a website builder as a crutch, we recommend jumping right into learning HTML, CSS, and JavaScript.
In the following sections we’ll briefly introduce you to each of these fundamental web technologies. This introduction will be rapid, so please do not worry if you do not fully understand everything. Just do your best to engage with this material, as it will provide you with everything you need to know to get the most out of our later examples of interactive modeling webpages.
HTML Basics
HTML defines the structure of a webpage or document. An HTML document is a set of tags. Each tag is enclosed in triangular brackets. For instance, the tag called “<hr>” will create a horizontal division line in your document (“hr” is an abbreviation of “horizontal rule”).
Many types of tags will consist of an opening and closing tag paired together. A closing tag is written the same way as an opening tag except there is a also backslash immediately after the first triangular bracket. For instance, you could use a pair of “<b>…</b>” tags to make some text bold:
This is some text. <b>This text is bold.</b> This text is not bold.
Some tags may also have “attributes” which modify the behavior of the tag. Attributes are included within the opening brackets of the tag after the tag name. For instance, the “<a>” tag is used to make links between webpages. The “” tag has an attribute “href”, which is the URL to which the link should connect.2 The following HTML creates a link to Google:
to <a href=“http://Google.com”>Google.</a>.
Every HTML page contains some general boilerplate that structures the document. This boilerplate will look almost identical from webpage to webpage. The boilerplate contains several unique tags that split the document into two sections. The “head” section stores the page title and page keywords for search engines, and the “body” section contains the page content (what the user sees). You will spend most of your time editing the body section. The standard template for a webpage is as follows:
<head>
<title>A Sample webpage</title>
</head>
<body>
Document contents goes here…
</body>
</html>
There are dozens of different tags you can use to structure your document. We can’t cover them all here, but the following table summarizes a few of the most useful ones:
We can combine these tags to form more complex documents. The following is an example of a full-featured webpage.
<head>
<title>A Sample webpage</title>
</head>
<body>
<h1>Introduction</h1>
<p>Here is some information about my page.</p>
<h1>The Content</h1>
<p>Here we have the meat of the page.</p>
<hr>
<h2>For Further Information</h2>
<p>Here we have links to other sites about this content:<p>
<p>We could check out <a href=“http://BeyondConnectingTheDots.com”>
this book’s site</a> for instance.</p>
</body>
</html>
Open whatever word processor you use on your computer and save this to MyPage.html as a plain text file or a Rich Text Format document (.rtf extension).3 You can then open this file in your web browser (Internet Explore, Firefox, Chrome, Safari, etc.). Experiment by adding some more paragraphs and formatting to see how the document changes.
For more information and tutorials on HTML, we recommend the Mozilla Developer Network HTML guide.
| Exercise 11-1 |
|---|
| Replicate the following formatting in an HTML document:
This text is italic and bold. |
| Exercise 11-2 |
|---|
| Research HTML on-line. Learn how to make a list of items. Create both an ordered and unordered list of the top three countries you wish to visit. |
| Exercise 11-3 |
|---|
| Create an HTML document containing your resume. Use heading tags to separate sections. Include a picture of yourself in the document. |
CSS Basics
Where HTML is used to define the structure of a document, CSS is responsible for styling this structure. In addition to the general layout, this styling includes aspects like font and color choices. A CSS document is a list of rules where each rule has two parts: a selector that tells the browser to what elements of the page the rule applies, and a set of styles that tells the browser how to style those elements. For example, take the following CSS code.
margin: 20px;
}
font-size: 72px;
color: red;
}
This code has two rules. In the first rule the selector is “p”, meaning the rule will apply to all “<p>” tags in the document. The styling for this rule says to apply a 20-pixel margin around each of these paragraph tags. The second rule has the selector “h1, h2”. This means apply the rule to both “<h1>” and “<h2>” tags and to set the contents of those tags to have an extra large font and to be colored red.
You can set numerous aspects of an element’s style with CSS. For a full and detailed reference we recommend the Mozilla Developer Network’s coverage of CSS.
CSS for a webpage can be placed in a standalone file referenced by the webpage, or it can be included directly within the webpage. Both these can be accomplished by placing CSS rules within a special tag in the head section of the document. For example, taking the head section from our earlier document, we could either embed the CSS directly:
<title>A Sample webpage</title>
<style>
p {
margin: 20px;
}
h1, h2 {
font-size: 72px;
color: red;
}
</style>
</head>
Alternatively we could save the CSS to an external text file (such as MyStyles.css) and link to it in the head of our document:
<title>A Sample webpage</title>
<link rel=“stylesheet” type=“text/css” href=“MyStyles.css”>
</head>
| Exercise 11-4 |
|---|
| Create a CSS rule to make <u> tags set their text color to green and add underlining. |
| Exercise 11-5 |
|---|
| Read up about CSS online and create a tag that creates a red box round every link on the web page. |
JavaScript Basics
JavaScript provides interactivity for webpages.4 JavaScript is a powerful programming language that you can use to respond to user actions, run calculations, or modify a webpage. An example of using JavaScript code to calculate a Fibonacci number follows.5
if(n==1 || n==0){
return 1;
}
return fib(n-1) + fib(n-2);
Like CSS, there are two ways to embed JavaScript into an HTML document. The first is to include the JavaScript directly in the document like we did for the CSS:
<title>A Sample webpage</title>
<script>
function fib(n){
if(n==1 || n==0){
return 1;
}
return fib(n-1) + fib(n-2);
}
</script>
</head>
The second method is to save the JavaScript into a text file (such as MyScript.js) and link to it in the document:
<title>A Sample webpage</title>
<script src=“MyScript.js”></script>
</head>
JavaScript is a very powerful, but complex tool. This chapter will illustrate usages of JavaScript but we cannot hope to teach you how to write new JavaScript yourself in this single chapter. Again, we refer you to the Mozilla Developer Network to learn more about JavaScript.
| Exercise 11-6 |
|---|
| Learn about JavaScript online. Create a script that prompts the user for two numbers and then adds them. |
Next edition: Going Global: Creating a Webpage for Engagement.
Article sources: Beyond Connecting the Dots, Insight Maker. Reproduced by permission.
Notes:
- Please note that when you write CSS and JavaScript, your text is case-sensitive. This means that “ABC”, “abc”, and “Abc” will all be understood differently. HTML, on the other hand, is case-insensitive. In HTML, “ABC”, “abc”, and “Abc” will all be understood to mean the same thing. ↩
- The tag name “a” comes from “anchor” and “href” is an abbreviation of “hyperlink reference”. Many of the conventions with web development may seem strange, so you should understand the long history of these technologies and the resulting historical baggage that comes with them. ↩
- Webpages are always stored as plain text. This differs from, for instance, a Microsoft Word document (“.doc” or “.docx” extension.) Save your document as a plain text document with the extension “.html” or “.htm”. You can use any text editor you want, but an editor designed for writing webpages will have helpful features such as coloring your tags differently from the standard text as you edit the webpage. We recommend Sublime Text as a high quality editor for serious work. ↩
- The name “JavaScript” is a source of perpetual confusion. What we know colloquially as JavaScript is officially called ECMAScript. Due to trademark issues, Microsoft refers to it as JScript when you are using Internet Explorer. It is important to note that JavaScript and Java are different technologies. They share part of a name due to historic branding purposes but they are completely different languages. ↩
- Where the first two Fibonacci numbers are 1 and the Fibonacci numbers thereafter are the sum of the two preceding numbers. The Fibonacci sequence begins: 1, 1, 2, 3, 5, 8, 13, 21, 44…. ↩
