Intro to HTML

Anatomy of a Web Page

So what’s a web page, anyway? Do we have to do anything special to produce content for the Web? The answer to this question is both yes and no.

Most of the pages you’ll see on the Web are created using a simple markup language called “HTML.” The idea behind HTML is that a page is simply a text file, as small and simple as possible, and very quick to transfer over the internet. By embedding HTML markup in that text file, you make it possible for the web browser to structure the page for display at the last moment, reconstructing the beautiful and complicated layout for the reader, but not requiring that a lot of complicated data be sent over the Net.

To provide the second part of the answer to our question, it really doesn’t matter at all what a web page is. It can be absolutely anything, as long as both the server and browser know what to do with it. So, a web page could be a text file, an MSWord document, an Adobe Acrobat file, a movie, or anything, as long as the server knows how to serve it and the browser knows what to do with it when it’s received.

Pause for classic HTML

Before we launch into the various ways in which you and your students might create a presence on the web, we should examine the original structure in which web pages and web sites were (and still are sometimes) created. This is important because understanding this system will help you to better use the more complex tools for communicating on the internet (WordPress, Moodle etc.), and because in some cases this will still be the easiest, most effective method for putting content on the internet.

Content and Style

A modern web page has two components: the ‘content’ to be displayed and the ‘styles’ that determine where content should be displayed and how it should appear. The phrase “All power to the penguins” and an image of some penguins are examples of ‘content’. Displaying this phrase in the Arial font at 20 pixels high in dark blue is a ‘style’. Displaying the picture of penguins with a 2 pixel wide border in red is a ‘style’. Displaying the picture to the right of the text is a ‘style’.

It is possible to include both content and styles information in one HTML document for a single web page. It is possible to store the content for a web page in an HTML document and the styles information separately in a CSS (cascading style sheet) document. Lastly, and this is where the efficiencies come in, it is possible to store the content for several (or thousands) of web pages in several (or thousands) of HTML documents and the styles for these web pages in one CSS document. This means that you can edit the way pages on your website look by editing one (CSS) document instead of every (HTML) document. There are further, more complex things that can be done with HTML and CSS documents to manage a website but we won’t get into that here.

<html>
<head>
<link rel=”stylesheet” href=”mystyle.css”/>
<title>My Page</title></head>
<body>
<img src=”penguins.jpg” />
<p>All power to the penguins</p>
</body>
</html>

mypage.html

p {font-size:20px;
font-color:blue;}
img {border:2px solid red;}

mystyle.css

All power to the penguins

On the right you can see an examle of an HTML document and a CSS document, and the web page they create together. They both reside in the same folder (called a ‘directory’) on a webserver, along with an image file called ‘penguins.jpg’. The ‘title’ in the ‘head’ portion of the HTML document normally appears in the tab of your web browser. Notice that, in the ‘head’ portion of the HTML document, the CSS file is called to apply the styles within the browser.

The styles referred to above, that determine how content looks and how it is displayed on a web page, is typically contained within the CSS document (with the file extension ‘.css’). But these styles can also be applied at the top of an HTML document so that they apply to just that page, or they can be applied ‘inline’ – with the content to apply just to that item. This is important for two reasons. First, we aren’t going to spend the weeks that would be needed to properly learn HTML and CSS. Second, learning to apply styles ‘inline’ (right where the content is) allows us to apply styles in situations where we aren’t able to write the whole web page, just a portion of it. This allows us to use styles in a blog post, in a comment on Flickr, or in a Moodle page.

Here are a couple of illustrated examples of inline styles as they would be found in an HTML document. One set of styles is being applied to a ‘p’ tag – the common HTML tag used to define text into paragraphs. The other example is a ‘div’ tag – a generic container used to group content on a web page. Notice that each style consists of an attribute followed by a colon, and then one or more values (most attributes will get just one value).

<p style=”font-size:20px; font-color:blue;”>Some Text</p>

<div style=”border:1px solid blue;”>Some Text</div>

In this week and the next I’d like you to explore the resources available for you here, particulalry the pages that teach you the basic HTML tags and some the most common inline styles. There are resources available if you would like to learn more and TRU offers an introductory course in web design which would be well worth your time if this really interests you.

3 Responses to Intro to HTML

  1. Rick says:

    Keith,

    You mention an introductory web design course offered by TRU.
    Which one are you referring to?

    Rick

Leave a Reply