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.
Create a file called
index.htmlthat has the very basic structure of an HTML 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.
Hypertext Markup Language uses "tags" to decide how information or media will be presented. For example, this bolded text would be surrounded by
</strong>tags (or something similar - it has changed many times over the years).
Normal Hello World actively "prints" Hello World to the screen based on a command in a programming language. Typically this would be to the console or standard output (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.
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).
HTML documents have two main parts -
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
tagsto describe or provide a style to the text (like bold or italics). Here is the basic structure of an empty HTML file:
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.
index.htmlfile 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>save the file and refresh your browser. It should look bigger and bolder. There are 6 of these heading tags
<h6>. Play around with them a bit to see the differences between them.