2.5 - Hello World(s)!
Links / URLS on my site may be out of date - I made some changes to the organization of the pages. Always refresh your browser (holding CTRL or SHIFT will clear the cache).
Cyber Patriot (Cyber Titan) Security Competition
Option cyber security competition opportunity - Click here to join!
Closing security holes in operating systems while keeping the system live
Training ahead of the events
2 to 5 participants per team
6 hour competitions
Fridays or weekends (mostly Fridays)
All or nothing (no skipping events) because this is a paid thing
Top 10 Canadian teams compete in Cyber Titan
HTML is a document markup language that creates static web pages (no interaction). It uses tags to change where items are placed or how they look. We have several resources to help us lookup tags and examples:
Previous lessons, w3schools, YouTube tutorials, The Structure of an HTML Document, the HTML style guide
List of tags by category or by alphabet
Today's Lesson: 2.5 - Hello World(s)!
First let's look at two more HTML items:
The <div> tag:
Defines a division or a section in an HTML document. (w3schools reference)
An invisible (unless styled) block or section that can contain any amount of other HTML.
The id attribute:
Used to give an element a unique identification. Each id must be unique. (w3schools reference)
<p id="Intro"> or <a href="ocsb.ca" id="Board Site"> or <div id="Title">
Do not confuse this with the name attribute! It gets confusing
Output to the user is crucial in programming:
"Hello World" is the first program almost everyone writes.
Go over the History of Hello World
Note: Using alert() in a site is generally not a great idea.
What is the Console?
Let's ask our computer to print "Hello world!" to the console five different ways:
Use jsconsole.com and type console.log("Hello world!")
Change your console.log("Hello world!") to alert("Hello world!")
Open our developer tools in Chrome and ask that console to do the same thing - typically F12 or CTRL+SHIFT+I
Create a new HTML Repl (name it Hello World)
Type console.log("Hello world!"); in the script.js file
That file is loaded during HTML loading and interpreted line-by-line, in order
Try adding more than one console.log(); command...
In the script.js file, change your console.log("Hello world!"); to alert("Hello world!");
But this is not recommended. The most accepted method is using an external file and linking to it:
Today's Task(s) / Homework
Discover how easy it is to research the syntax of each language
Using new Repls and research on the Internet, recreate the Hello World program in at least three (3) other programming languages (maybe Java, C++, C#, Python, etc...)
Complete the independent learning lesson 0.10 from unit 0.
BTW - here's a site that lists the Hello World program in 300 different languages
Bored? Why not figure out how to put a button on your web page that makes an alert pop up?