Other Pages

Make A Web Page

Goals

  • Check out your starter files in the browser

  • Compare strategies for CSS and JavaScript inclusion (inline vs. link)

Steps

Step 1

Open the index.html page in your web browser. It should look something like this:

Step 2

Open the index.html page in your text editor. It should look something like this:

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.

Step 3

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:

<!-- This is a comment. The browser ignores it. -->

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.

Explanation

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:
<script type="text/javascript">
  // Your code goes here!
</script>

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

  • A JavaScript tag looks like this when it's a link:
<script src="resources/javascript.js" type="text/javascript"></script>

CSS

  • A CSS stylesheet looks like this when it's written right into the HTML page:
<style type="text/css" media="all">
  /* Your styles go here! */
</style>

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:
<link rel="stylesheet" href="resources/layout.css" type="text/css">

Optional Step: Deploying to GitHub

Before the next step, you could try deploying (sending your code) your page to GitHub! If you haven't used Git or GitHub before, it's okay to do this later.

Go on to Deploying To Github

Next Step:

Go on to Add More Elements