Resources

//HTML: Basics
//STYLE: Capitalizing tags

Evaluation (out of 10)

___/5 = HTML: Handed in with correct file name
___/5 = HTML: Well formed and matching tags

Hidden Agenda

Use Notepad so that in the future you are thankful for real code editors like Sublime
See how information is contained inside descriptive HTML tags
Get an introduction to the general structure of an HTML document
Get used to the flow and rhythm of typing code
Get used to the horrible, horrible pickiness of filenames and code tags

A great beginning

Type the example code into your document.

Use Notepad as your editor. You can find it by going to Start Menu → All Programs → Accessories → Notepad.

Change the code to suit your personality, but follow the same format as the example as closely as you can. Please don't cut and paste: part of coding is learning the rhythm of typing in the language.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        
        <title>Hello World!</title>
        <meta name="description" content="My first HTML program!">
        <meta name="author" content="Dave Drapak">

        <!--
		Change log: 
			8. August 2015  	- created!
			4. February 2018	- moved script to end for better style
			6. September 2018 	- fixed shameful indentation
        -->
		
        <style>
            /* Your Cascading Style Sheets (CSS) code will go in here someday ...*/
        </style>
    </head>
    
    <body>
        <h1>Hello world!</h1>
        <p>
            Type something prideful and witty in here:
            "Look! I am a programing <strong>superstar!</strong>"
        </p>
        
        <h2>My favourite website</h2>
        <p>
            The website that I visit the most often is
            <a href="http://cbc.ca/news">CBC News</a>.
        </p>
        
        <h3>An awesome image</h3>
        
        <img src="http://imgs.xkcd.com/comics/sandwich.png">
		
	<script>
            // Your Javascript programming code will go in here someday...
        </script>
    </body>
</html>

The above code will create the following:

Saving your work

In this course, work is passed in electronically to your teacher. This means that if it does not get saved electronically and passed in, it does not get marked.

As soon as you start working, save your work temporarily to the D:/ drive.

Save the empty document as "HelloWorld-LastName.html" Programmers usually save their documents with the correct filename before they even begin.

Note the exact characters used in your filename. In computer programming you need to be exact about your code and filenames or things won't work the way you would like. If you do not get the filename correct, you will lose half the points for the assignment. Seriously! Be precise!

Once you are finished, drag and drop your document into your Google Drive. Then join the Computer Programming class in Google classroom. Submit HelloWorld-LastName.html to the assignment called HelloWorld!

Extend and expand

I am curious what else you can do. Do you know any HTML? Put some additional code in there!