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
Open the **index.html** page in your web browser. It should look something like this:

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

    MARKDOWN
  end

  step do
    message <<-MARKDOWN
Open the **index.html** page in your text editor. It should look something 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

When writing code, you'll often want to leave a comment: a message for yourself or other people looking at your code. 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 <<-MARKDOWN
We can also use this technique to temporarily stop a piece of code from running. We call that "commenting the code out."

You'll remember when we were working on our **hello.html** file, we put JavaScript and CSS directly into the HTML document. You can also include JS and CSS from external files, with a link. This **index.html** file 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!').

Look through **index.html** and find the links to the CSS and JavaScript files. Delete the comment tags from around them so that the browser will read them. The lines should change color in your text editor: comments are usually displayed in a dull color in text editors to show that it's code that will be ignored.
    MARKDOWN

  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

In JavaScript you write comments by starting a line with `//`.

* 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

In CSS you write comments by wrapping the comment in inside a `/*` (start a comment) and `*/` (finish a comment). A comment can go over several lines.

* 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"