Teaching programming to primary school kids - Part 2

  • Article

We had our second meeting of the School Programming Club last Monday. As the boys want to write an online game, I decided that we should start with some basics about the most common online delivery mechanism, HTML.

We talked about the structure of HTML and about tags. I also set them a task for next Monday:

This week we talked about HTML – Hypertext Markup Language.

In particular we discussed the fact that HTML uses tags to "mark up" the parts of a page, that is, give the items on the page context and properties.

Tags are instructions enclosed in less than and greater than signs, and they should either appear in pairs with an opening and a closing tag like this:

 <h1>This text is a level-1 heading</h1>

Or be self-closing, like this:

 <img src="images/image1.jpg" />

The tags are interpreted by a web browser like Internet Explorer and the result of their content displayed.

An HTML page has two parts, the header of the page, which contains information about the page, and the page body, which is what’s displayed on the screen. A sample HTML page might look like this:

 <html>
<head>
<title>This is a valid HTML page</title>
</head>
<body>
<h1>This is a level 1 heading</h1>
<p>Here's some text in a paragraph. In a web browser, it will be rendered in the default 
font at the default size. Notice that even though we haven't specified a different font 
for the heading above, it's automatically been assigned different attributes because it's 
been tagged as a heading.</p>
</body>
</html>

Viewing this in Internet Explorer looks like this:

There’s lots more information about HTML all over the web

https://en.wikipedia.org/wiki/HTML

https://www.htmlquick.com/tutorials/how-to-begin.html

https://www.html.net/tutorials/html/introduction.asp

Here’s what I asked you to do for next week:

Use the second or third link above to create an HTML page about you. Use tags and include:

  • Headings
  • Images
  • Links to other pages
  • Some other HTML tags
  • For extra credit - research styles (CSS)

E-mail me your pages before our meeting on Monday and we can have a look at them.

I'm looking forward to seeing how self-educating these guys are. One of the real requirements of a good programmer is the thirst for knowledge and the ability to do some research to find it (that and laziness)