goal "Create a blank HTML file"
goal "See how that file is interpreted by a web browser"
## What is HTML?
HTML stands for __H__yper-__t__ext __M__arkup __L__anguage.
Let's go through each of those words in reverse order and explain them...
* __L__anguage - People use different languages for different types of communication.
We use languages such as English or Mandarin for human communication or languages such as
Ruby or Java to give instructions to computers. HTML is a special language for describing documents.
* __M__arkup - Being a *markup* language means that HTML is mixed in with plain content text.
Think of a time when you turned in an essay to your teacher. Your teacher reads your essay
and *marks* it *up* with comments or suggestions, adding extra information on top of the plain text
- __H__yper-__t__ext - This term comes from the fact that early computers could only work with plain text
files. Computer users as early as the 1960s wanted to enrich this text and make it easier to work with.
Thus, hypertext was born. It is text because the file is stored as plain text, yet hyper because the text
has a special meaning beyond the plain text when interpreted by a special program. For HTML, that special
program is your web browser.
You'll need to fire up your text editor (like Sublime Text, Komodo Edit, or Text Wrangler) for these steps. We're going to make an html document!
Make a new file and call it <b>hello.html</b>. (In some editors, you may need to set the file type to 'HTML'; but usually, just using the .html extension will be enough.)
<img src='img/hello_html.png' alt="text editor with empty file named hello.html">
Notice the extension .html. It indicates to the browser that it should render this content as HTML.
Type this within the HTML document you just created:
source_code "Hello World!"
message "Save the file some place you'll be able to find easily, like your Desktop."
Open Chrome and go to File, Open File, then select the file from your Desktop or wherever you put it.
<img src='img/hello_world.png' alt="hello.html file rendered in browser displaying: Hello World">
Even though your file does not include any HTML tags yet, browsers are great at showing text on screen, so your browser will just show you your text.
message "Kind of boring, right? To make it look a little less plain, let's drop in an HTML tag. Update the contents of your hello.html file to look like this:"
source_code :html, "Hello <em>World</em>!"
message "The `em` HTML tag tells your browser to add <em>em</em>phasis to that string of text. Refresh your browser and you'll see the effect:"
message "<img src='img/hello_world_jazzy.png' alt='hello.html file rendered in browser displaying: Hello World with world emphasized'>"
## HTML is Tags
The browser needs more information than just the file extension to display your website's content. The way we provide that information is by *marking up* your text with content clues in the form of HTML tags. Which you just did, by adding the `<em>` tag to your page!
An HTML tag is encased within angle brackets, which look like this: `<`, `>`. Most every tag has a matching closing tag with a forward slash. The tags describe the content they surround, in our example, emphasizing the word "world".
__Opening tag__: `<em>`
__Closing tag__: `</em>`
And all these things combined—opening tag, content, and closing tag—are called an HTML __element__: `<em>World</em>`