🖥️
Intro to Computer Science (ICS3U/C)
  • An Introduction to Computer Science
  • Videos & Slides
  • Unit 1: In the Beginning
    • The History of Computers
    • Binary & Logic
      • Bits and Bytes (Binary)
      • Transistors (Changing Bits)
      • Logic Gates
        • Poster
        • Logic.ly
    • The Parts of a Computer
  • Unit 2: Intro to Code
    • How Do We Code?
      • Coding Conventions (Rules)
      • Commenting Code
    • What is HTML?
      • Hello World! (in HTML)
      • HTML Slideshow
    • Hello World!
    • Input / Output
      • The Console
      • Prompt, Alert, Confirm
    • Variables & Data
      • Strings (Text)
      • Numbers (Values)
        • Converting & Rounding
        • The Math Object
          • Random Numbers
      • Booleans
        • Truthiness
      • Arrays
  • Unit 3: Control Flow
    • Conditionals (if this, do that)
      • If...Else
        • Logical Operators
      • Switch / Case
      • Ternary Operators
    • Loops (Repeating Code)
      • For...Loop
      • While & Do/While Loops
    • Debugging
  • Unit 4: Functions
    • Functional Programming
    • User Defined Functions
      • Hoisting and Scope
    • Calling a JS Function
  • TL;DR
    • Programming Basics
    • Slideshows & Demos
    • Javascript Syntax Poster
  • Advanced Topics
    • Recursion
    • Structures & Algorithms
    • Mmm... Pi
  • External Links
    • Typing Club!
    • repl.it
    • Khan Academy
    • Geek Reading
    • ECOO CS Contest
Powered by GitBook
On this page
  • The Task
  • What you need to know
  • What does that have to do with Hello World?
  • The Structure of HTML
  • A Second (simple) Task
  1. Unit 2: Intro to Code
  2. What is HTML?

Hello World! (in HTML)

It's easy to find examples of the Hello World program all over the Internet. We're going to do our own in a slightly different way.

PreviousWhat is HTML?NextHello World!

Last updated 5 years ago

The Task

Create a file called index.html that has the very basic file. The title should be "My First Web Page!" (without quotes) and the body should contain "Hello World!" (without quotes). Do it using only a plain text editor (leafpad, notepad, etc...). Remember to save the file in your editor before you refresh the browser.

It is important to know that Word and Google Docs are not plain text editors. They have formatting. Notepad in Windows is a great example of a plain text editor - you cannot format the text, create headings, etc. You can only type.

What you need to know

Hypertext Markup Language uses "tags" to decide how information or media will be presented. For example, this bolded text would be surrounded by <strong> and </strong> tags (or something similar - it has changed many times over the years).

What does that have to do with Hello World?

We are going to make our first attempt at displaying text in a webpage by learning the very basics of HTML. Keep in mind, this is not programming in the traditional sense - we cannot do math or react to clicks or interact (yet).

The Structure of HTML

HTML documents have two main parts - HEAD and BODY. Similar to you as a human, your thoughts are kept private in your head but we can see you body and even put makeup and clothing on it.

A document is made of chunked text that might have beginning and ending tags to describe or provide a style to the text (like bold or italics). Here is the basic structure of an empty HTML file:

<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

It is an HTML file because of the first tag, <html>, and lets us know when the HTML code is finished because of the ending (or closing) tag </html> at the very bottom. You can see it has a <head> which ends at </head> and similarly, it has a <body> where the actual visible content goes.

A Second (simple) Task

Your index.html file is pretty boring. Let's spice it up.

There are heading tags with predefined formats for quickly creating a larger, bold heading. Try wrapping your Hello World! text with <h1> and </h1> save the file and refresh your browser. It should look bigger and bolder. There are 6 of these heading tags <h1> through <h6>. Play around with them a bit to see the differences between them.

Confused? Read on. Ahead of the game? There is below, so keep reading.

HTML is . It is a markup language. That means it describes how information will look or be presented through an application that can interpret it (a web browser).

Here is my interactive video on . <- 18 minute intro to HTML (shorter version coming soon)

actively "prints" Hello World to the screen based on a command in a programming language. Typically this would be to or (like a terminal window) but these days we want pretty output to our phone, monitor, television, or projector - anything that can display a pretty picture.

not a programming language
Normal Hello World
the console
standard output
a second task
HTML - The Very Basics
structure of an HTML