introduction_to_html.step

goals do
  goal "Create a blank HTML file"
  goal "See how that file is interpreted by a web browser"
end

overview do

  message <<-MARKDOWN

## 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 JavaScript 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
  content.

- __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 (like Chrome).
  MARKDOWN



end

steps do

  step do
    message <<MARKDOWN
You'll need to fire up your text editor (like VS Code or Sublime Text) 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:
MARKDOWN

    source_code "Hello World!"
    message "Save the file some place you'll be able to find easily, like your Desktop."
  end

  step do
    message <<MARKDOWN
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.
MARKDOWN
  end

  step do
    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'>"
  end

message <<-MARKDOWN

## 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 tags have 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>`

__Content__: `world`

__Closing tag__: `</em>`

And all these things combined&mdash;opening tag, content, and closing tag&mdash;are called an HTML __element__: `<em>World</em>`

MARKDOWN

end

next_step "HTML_tags"