Other Pages

make_a_web_page.step

goals do
  goal "Check out your starter files in the browser"
  goal "Compare strategies for CSS and JavaScript inclusion (inline vs. link)"
end

steps do

  step do
    message <<-MARKDOWN
Drag the 'index.html' page from your project onto the icon of your web browser. Your browser should look like this:

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

    MARKDOWN
  end

  step do
    message <<-MARKDOWN
Drag the 'index.html' page from your project onto the icon of your text editor. The text editor should look like this:

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

Opening the same file in a browser and in a text editor lets you see the effects of each code change right after you make it.
    MARKDOWN
  end

  step do
    message <<-MARKDOWN
You'll remember when we were working on our hello.html file, we put JavaScript and CSS directly into the HTML document. But you can also include js and css in external files, with a link.

This file, 'index.html', includes a link to a JavaScript file and a CSS file, but they're commented out (i.e. wrapped in an HTML tag that tells the browser, 'ignore this!').

HTML comment tags begin with `<!--` and end with `-->`. Here's an example:
    MARKDOWN
    source_code :html, "<!-- this is a comment. the browser ignores it -->"
    message "Look through index.html and find the links to the CSS and JavaScript files. Delete the comment tags from around them, so the browser will read them."
  end

end

explanation do

  message <<-MARKDOWN

## Inline vs. Linked 

Javascript and CSS can both be put directly into the HTML page, but on bigger projects,
you'll usually want to place your js and CSS in separate files and include those files
in your HTML with a link.

Linking files will help you keep your code organized and easier to maintain. It means,
for example, that if you change the style of buttons on your website, you'll be able to
change it in just one place, instead of having to update every page.

### Javascript

* A JavaScript tag looks like this when it's wrapping code written right into the HTML page:

  MARKDOWN
  source_code :html, <<-HTML
<script type="text/javascript">
  // Your code goes here! 
</script>
  HTML
  message <<-MARKDOWN

* A JavaScript tag looks like this when it's a link:

  MARKDOWN
  source_code :html, <<-HTML
<script src="resources/javascript.js" type="text/javascript"></script>
  HTML
  message <<-MARKDOWN

### CSS

* A CSS stylesheet looks like this when it's written right into the HTML page:

  MARKDOWN
  source_code :html, <<-HTML
<style type="text/css" media="all">
  /* Your styles go here! */ 
</style>
  HTML
  message <<-MARKDOWN

* A CSS tag looks like this when it's a link:

  MARKDOWN
  source_code :html, <<-HTML
<link rel="stylesheet" href="resources/layout.css" type="text/css">
  HTML
end

insert 'consider_deploying_to_github'

next_step "add_more_elements"