HTML_structure.step

goals do
  goal "Add standard HTML head and body tags"
  goal "Add a page title"
  goal "Understand the use of non-visible tags like head"
end

overview do

  message <<-MARKDOWN

## The HTML tag and Doctype

The line `<!DOCTYPE html>` is called the doctype, and it tells the browser which flavor of HTML you're using. `<!DOCTYPE html>` tells your browser you're using HTML5, the latest version of HTML. 

(You may see older doctypes out there that are longer and a lot more complicated, from when people
used various HTML and XHTML versions, but those are annoying, and you can usually just
use this short version for new websites.)

The `<html>` encloses all the rest of your page, and states unequivocally, "Here is my HTML!!!"

## Pages, Like People, Have a Head and a Body

  MARKDOWN
  source_code :html, <<HTML
<!DOCTYPE html>
<html>
  <head>Invisible, Important Stuff</head>
  <body>Actual Visible Content</body>
</html>
HTML
  message <<-MARKDOWN

### The Head

The head contains information _about_ the document, including:

* what language or character set you're using
* what the page title should be
* what CSS and JavaScript files to include (and where they are)

Information in the `<head>` section is __not__ displayed. 

It can also contain metadata tags that can tell a search engine or another
program more about the file, like who wrote it or what keywords are relevant.

### The Body

The Body contains the actual content of your file, the things you'll want your users
to be able to see, read, or interact with!

  MARKDOWN

end

steps do

  step do
    message <<-MARKDOWN
Let's add the doctype, HTML, head, and body tags to your file. It should look like this:

<img src='img/hello_structure.png'>

Save the file and refresh your browser. Everything should look mostly the same.

    MARKDOWN
  end

  step do
    message "Let's add a title to our page within the `<head>` section. Add this line:"
    source_code :html, "<title>My Sample HTML page</title>"
    message <<-MARKDOWN
When you refresh your browser, you should see the title on the tab in Chrome.

<img src='img/hello_title.png'>

(If it doesn't show up, double check that you put the line between the opening and closing head tags, and that you saved your file before refreshing.)
    MARKDOWN
  end

end

next_step "basic_CSS"
Other Pages

HTML_structure.step
