Week Two
Great start to the After School Programming (AFS) club – we accumulated more students who were keen to learn the world of HTML/Coding. The first lesson was designed to make sure students were logged on to Edmodo, installed Komodo Edit and to understand the basic history of HTML.
Please keep in mind that I’m not a professional coder or programmer. I’m a primary school teacher who has programmed for a hobby and enjoyment.
I felt that it was important to clarify to students the difference between HTML/CSS & Javascript. I explained that HTML is the structure/bones of the website, CSS is the make-up/appearance and Javascript is the functionality or the way a website behaves when things are pushed or requested by the user. I also elaborated on what the abbreviations meant – HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets). Basic information, but definitely an important part of teaching web design.
Once the students were settled, we began our first part of coding a website. The first coding experience was to set up a basic HTML document structure.
————————————————————————————————————————-
<!DOCTYPE html>
<html>
<head>
<title>My First Website </title>
</head>
<body>
<p> A paragraph in a website</p>
</body>
</html>
I’ll explain the above code the same way I explained to the students, trying to keep it simple yet informative and factual.
<!DOCTYPE>
This line simply declares the set of rules or version that the web browser will follow, also saying to the browser “Hey! I’m a HTML document”. This is not a ‘tag’ and is the first thing that should be written in the HTML document – just before the <HTML> tags. There are of course other versions of HTML; such as, HTML 4.01, XHTML etc… For this lesson we are going to stick with the most recent version of HTML5.
<html></html>
These two tags are the beginning of your HTML document content and state that the document will be using Hyper Text Mark-up Language throughout. The opening tag is straight after the document declaration tag and the closing tag goes at the very end of your HTML document.
<head></head>
The second opening and closing tag is the <head> tags. The opening tags are written as <head> and the closing tags are led by a forward slash like so </head>. The <head> tag stores all the important information about a website, e.g., the title that is visible in the browser tab, the meta-information and any other external files/scripts that will be used throughout the document. I will elaborate more on these parts further on in the ASP course.
<body></body>
The body tags are where the content visible on the main webpage is written. I provided an example paragraph or simple line of text. The <p></p> tag simply states a new paragraph or line of text. I have not formatted the text in any way shape or form.
With the above structure sample and explanations I left the students to explore and play with adding new paragraphs. One common mistake that the students were making was not closing the tags and simply not naming their HTML document with the extension .html or .htm at the end of the file name. After the students had had a play with Komodo and the code, I then had them start on Codecademy’s first set of exercises. This allowed them to consolidate their learning and revise what they had just learnt. I also added the sample.html document to the Edmodo shared folder along with a simple quiz on the basic HTML structures and tags that they had just learnt.
Stewart Crainie
iSmart/ ICT Integrator