Home > ASP.NET, Web client development > One-page web programming course

One-page web programming course

Back story

I teach web programming courses. In our school (in early 2012), we are refreshing the introductory web programming courses to cover modern yet mainstream topics.

During our discussions, I was challenged to make my views clear and understandable to all, whether they were new to web programming, or whether they had past knowledge and experience. I thought about the challenge for awhile, and decided to publish this “one-page web programming course”. That was my goal – an introduction to web programming, for someone who is new to this topic, on one page. It fits on one web page (ha ha), and it fits on one printed page (with a small font size ☺ ).

Comments and feedback invited. The first time you read it, don’t stop to click the links. Just read it through. Then, you can go back and click the links to learn more, if you like.

.

One-page web programming course

You have decided to learn web programming. Well, you need to learn something about four things:

  1. Web page definition, structure, and content
  2. Web page appearance
  3. Web page programming
  4. Web page publishing

What is a web page? It is a document.

How do you view a web page? With a program called a web browser.

What does a web page contain? Content, and markup text. HTML is the markup language that’s used on web pages. The HTML markup will often also include CSS and JavaScript, which are explained later.

How is a web page organized? Does it have a structure? Yes. A web page (document) must conform to the document object model (DOM) standard. You should know three things about the DOM:

  1. It describes a document’s parts or components (e.g. head, title, body, etc.).
  2. A document is exposed as an object, which means that its structure and content can be manipulated (i.e. viewed, queried, changed, etc.).
  3. The DOM broadcasts events (e.g click, mouse over, etc.), which enables a listener to perform an action.

What is HTML? As noted above, it is a declarative markup language that describes the structure and contents of a document. There are about 100 elements that can be used. All documents include a head element, and a body element. Within each of these, we add other elements (e.g. a title in the head, and structural divisions and content paragraphs in the body), and content.

The syntax used to describe document elements conforms to this format:

<element attribute1=”value1″>Optional content</element>

Notice the start “tag”, which begins with “<ele…”. Also notice the end “tag”, which places a slash character before the element name, e.g. “</ele…”.

How do we identify and locate document elements? There’s an easy way to identify and address document elements by their element name. There’s also an easy way to identify and address a selection of document elements, by using a programmer-specified “class name”, and marking the appropriate document elements to use the class name. Finally, there’s also an easy way to identify and address a specific document element, by marking the element with a programmer-specified unique identifier.

How can we change the document’s appearance? We use CSS rules. The way in which a programmer and designer can affect the document’s appearance is almost unlimited. To use CSS effectively, you must know about the document’s structure, the DOM.

What is CSS? It is a declarative language that is used to describe the appearance of an HTML document. The language statements are called rules. There are rules that affect layout and positioning, fonts, and visuals such as colours and images.

CSS rules can be placed in a separate source code file, and then linked to a document. Alternatively, CSS rules can be placed in the head of a document, or in a document element’s start tag.

The syntax used to describe CSS rules conforms to this format (when located in a separate source code file, or in the head of a document):

ruleName { rule1: value1; rule2: value2 }

The “ruleName” is known as a selector. It can be a document element name, a programmer-specified class name, or a programmer-specified unique identifier name.

How can we make a document interactive and functional? We use JavaScript.

What is JavaScript? It is a programming language that can access and manipulate a document. JavaScript is the programming language for web pages.

A document can display static content. However, a document can also be interactive and functional by using JavaScript. For example, the document’s structure, content, and appearance can be modified, based upon user interaction, or some other event or stimulus. JavaScript can also access the web, and fetch data from a web server. The new data can then be used to modify the document’s content and experience, if desired.

JavaScript source code can be placed in a separate source code file, and then linked to a document. Alternatively, it can be placed in the document (head or body), or in the document’s elements or content.

How can we make our document available to the public? We publish it to a web app.

What is a web app? It is a program, which runs on a web server, and responds to requests from browsers. The requests and responses conform to the HTTP protocol.

A web app can serve static resources (including web pages and images), which means that the web app simply retrieves the resource from the web server’s file system, and returns it to the browser.

However, a web app can also dispatch a request to an executable resource (i.e. a program), which will process the request, dynamically generate an appropriate response, and return it to the browser.

.


.

.

.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: