<html> <head> </head> <body> </body> </html>
I gave a quick introduction to writing HTML web pages over the last interim. The basic outline of a web page can be seen above (but there’s no content in there, so if you tried this file in a web browser you’d get a blank page). Everything is set between tags. The open html tag (<html>) starts the document, and the close html tag (</html>) ends it.
The head section (<head>) holds the information needed to set up the page, while the body section (<body>) holds the stuff that’s actually on the page.
For example, if I wanted to create a heading and a paragraph of text, I would just put it in the body, like so:
<html> <head> </head> <body> <h1>My Heading Here</h1> This is my text. </body> </html>
Note that the heading is placed between h1 tags. And the result should look like this:
Now save this file as an html file, which means save it as a plain text file using a .html extension (e.g. test.html) and open the file in a browser.
Note on Editors: I’ve found that the best way to do this is by using a simple coding editor. I recommend my students use GEdit on Linux, Smultron (free version here) or GEdit on Mac, and Notepad++ on Windows. You don’t want to use something like Microsoft Word, because complex word processing software like it, LiberOffice and Pages need to save a lot of other information about the files as well (like the font style, who created the file etc.).
CSS Styling
But we typically don’t want something so plain, so we’ll style our heading using CSS. Usually, we’ll want all of our headings to be the same so we set up a style to make all of our headings blue. So we’ll add a styling section to our header like so:
<html>
<head>
<style type="text/css">
h1 { color: blue; }
</style>
</head>
<body>
<h1>My Heading Here</h1>
This is my text.
</body>
</html>
Which gives:
There are a few named colors like blue, but if you want more freedom, you can use the hexadecimal color codes like “#A3319F” to give a kind of purple color (hexadecimals are numbers in base 16).
DIV’s to Divide
Finally, we’ll often want pages with separate blocks of information, so let’s make a little column for our heading and paragraph. We’ll make the background yellowish, put a border around it, and give it a set width.
To do this we’ll place our heading and paragraph into a DIV tag, which does not do anything but encapsulate the part of the web page we want into sections.
<html>
<head>
<style type="text/css">
h1 { color: blue; }
</style>
</head>
<body>
<div id="section1">
<h1>My Heading Here</h1>
This is my text.
</div>
</body>
</html>
Note that I’ve given the div tag an id (“section1), this is so that I can refer to that section only in the styling section using “#section”:
<html>
<head>
<style type="text/css">
h1 { color: blue; }
#section1 {
background-color: #A2A82D;
border: solid black 2px;
width: 400px;
}
</style>
</head>
<body>
<div id="section1">
<h1>My Heading Here</h1>
This is my text.
</div>
</body>
</html>
to give:
Unleashed
With that introduction, I set students loose to make their own web pages. They had to make two page, both linking to the other, and one of them being an “About Me” page.
There are lots of places on line to find out what HTML tags and CSS styles are available and how to use them, so my goal was to introduce students to the language they needed to know.
One issue that came up was the use of copyrighted images. Current adolescents see everything online as part of a sharing culture–most of my students for this lesson had Pintrest accounts–and it took some explanation for them to understand why they should not use that cute gif of a bunny eating a slice of pizza without getting permission from the author (or at least finding out if the artwork was free to use).
Finally, I did do a quick intro on how to using JavaScript (with Jquery) to make their pages more interactive, but given that we only had two days for this project, that was pushing things a little too far.