Other Pages

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

`<!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. You can usually just
use this short version for new websites.)

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

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

  MARKDOWN
  source_code :html, <<HTML
<!DOCTYPE html>
<html>
  <head>
    <!-- Important invisible details will go here! -->
  </head>
  <body>
    Visible Content
  </body>
</html>
HTML
  message <<-MARKDOWN

### The Head

The `head` contains information that is not displayed in your browser. It has metadata (data about data) tags that can tell a search engine or another program more about the file, like who wrote it or what keywords are relevant, such as:

 * What language or character set you're using: `<meta charset="utf-8">`
 * What the page title should be: `<title>HTML!</title>`
 * What CSS and JavaScript files to include (and where they are): `<link rel="stylesheet" href="style.css">`

  MARKDOWN
  source_code :html, <<HTML
<!DOCTYPE html>
<html>
  <head>
    <title>HTML!</title>
    <link rel="stylesheet" href="style.css">

    <meta charset="utf-8">
    <meta name="keywords" content="HTML, CSS, JavaScript, Meta">
    <meta name="description" content="Learning HTML, CSS, & JS one step at a time.">
  </head>
</html>
HTML
  message <<-MARKDOWN


### 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 hello.html file. It should look something 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"