Tutorial Part 1: HTML Layouts

In this page you'll learn the basic tags available to create nice looking HTML layouts and play with styling the tags to make changes to a page.

Start by reading this introduction to layouts at W3 Schools Links to an external site..

Next, go to this "Try it out" page Links to an external site.. Note that it is split into two panes: the one on the left includes the source HTML and embedded stylesheet (between the <script>...</script> tags); the pane on the right shows the result in the browser. You can change anything on the left then hit the Run» button at the top to see changes on the right. On that page, do the following:

Without changing any HTML on the left, resize the browser window making it very narrow and very wide and see how the result on the right gets re-sized along with the browser.
Change width in the div.container style section from 100% to 600px:
```
div.container {
    width: 600px;
    border: 1px solid gray;
}
```
Note: don't forget to hit the green Run» button at the top to see the changes on the right. Notice how the content is now tucked into the left side of the pane with a fixed width (600px). Just by changing that one style we were able to change the way the layout behaves when the window is resized.
Rather than have the content stay stuck to the left side, let's center it. The style we need to add to make this happen isn't very intuitive: we need to add the style margin: 0 auto; to the div.container style section. The idea is that rather than specifying a margin, we'll let the browser set it automatically so the container stays centered on the page (that's where the "auto" part comes in). The new style section should look like this:
```
div.container {
    width: 600px;
    margin: 0 auto;
    border: 1px solid gray;
}
```
Make the change, hit the Run» button, then re-size the window and see how the container stays centered.
Change the background-color in the div.container section to #ced5ff
Change the background-color in the header, footer style section from black to #13505d
Change the style in the nav section: set it to float right instead of to the left; change the padding to 2em.
In the article style section: change the border property from border-left to border-right; change the style value so the border is 10 pixels instead of 1 pixel, dotted instead of solid, and the color #d88868 instead of black. In the same section, change the margin-left: 170px property to margin-right: 120px.
Add a new style section (add it just after the nav ul section) to change the text styles in the navigation bar:
```
nav ul li {
  line-height: 2em;
  font-size: 1.1em;
}
```

At this point your page should like like this (if it doesn't, go through the steps above again and make sure you made all the required changes):

Important: Don't close your browser tab or window! In the next part of this tutorial, you'll need the HTML and CSS you just edited saved in a file on your computer. You'll make some changes to that file, include an image, then publish everything to WordPress. Before you start on part 2, do the following:

Create a new folder on your computer or flash drive called web-tutorial-2.
Select all the HTML and CSS from the left side of the "Try it now" page you've been working on (make sure you've made all the changes for part 1 of this tutorial).
Copy the selected text (ctrl-c or right-click and choose "copy").
Paste the text into a new empty file in your text editor (probably Notepad++).
Save the file as index.html in the web-tutorial-2 folder you created in step 1. Note: do not name the file anything other than index.html exactly (no spaces! no capital letters!); otherwise your page won't work when you publish it.

Now go on to part 2 of the tutorial and follow the instructions there for making more changes to the page and publishing your work.