Laying out a website with CSS and HTML

In this lesson you will create 3 separate web pages that showcase pictures from a trip to Costa Rica and learn a lot about using div tags in conjunction with CSS to position content. When you are finished you will link the three files together into sort of a mini website. Let’s get started.

  1. Download from Unzip it and drag the div_layout folder into your mysite folder.
  2. Create a folder inside of the div_layout folder named css.
  3. Create a new web page and save it inside the div_layout folder as monkeys.html.
  4. Find the rollovers.css file that you created in the previous lesson. Copy and paste it into the div_layout/css folder.
  5. Create a new CSS file named div_layout.css and save it into the div_layout/css folder.
  6. Attach both div_layout.css and rollovers.css to monkeys.html (below the <title> tags).
    <link href="css/div_layout.css" rel="stylesheet" type="text/css">
    <link href="css/rollovers.css" rel="stylesheet" type="text/css">
  7. Create a new style called main inside of div_layout.css. This style, as its name suggests, will contain all of your content. main is a standard html5 element that can be used anywhere in the document but typically is used as a large (ie. the main) container for other elements.
  8. Add the following properties and values to main  (remember the semicolons):

    Let’s discuss those properties and values a bit.

    1. As you can see, the display property of main is set to flex. This will allow content within main to react responsively when the browser window becomes smaller or larger (smartphone versus computer monitor, primarily) We will learn more about flex later on.
    2. width:80% means that main will always occupy 80% of the browser window regardless of the actual size measured in pixels or ems.
    3. flex-wrap causes content within an element with the flex property to wrap when it exceeds the width of the element. Ie. if you have 3 elements that are sized at 300px each and the size of the browser window is less than 900px, the first element will break and move below the other two elements.
    4. Margin-left and margin-right center main within the browser window.
  9. Go back to monkeys.html. Insert <main></main> within your body tags. You are about to insert two additional elements inside of main. This process can be confusing when you do it for the first time. In order to make it less confusing we are going to insert a ‘comment’ immediately after the </main> tag that closes <main> . Comments are invisible to the browser but can be a very useful feature for web developers. When you finish, your code should look something like:

    </main> <!--no content after this point-->
  10. Add a header element. Now create a new style in div_layout.css, just as you did with main, named header. Give it the characteristics shown below, except that you can choose any, or no, background color, and pick your own font-size and height. You can also set the font color if you like, but remember that font color is set simply as color: #fff for example.

      1. The reason we set width to 100% is because header is inside of main, which means that it will automatically be the same width  as main. Ie. 100% of main.
      2. The height is arbitrary. Change it to whatever seems appropriate until you are happy.
      3. text-align center does just what you would expect it to do.
  11. Insert <header> and </header> between <main> and </main>. Your source code should look more or less like this:

  12. Add some text inside of the <header> tags and preview in your browser. The header content should appear at top of your page. If you like it, keep things as they are. Otherwise, feel free to tinker with the CSS. 
  13. Create another new element named nav with these characteristics.

    1. Once again, background-color is optional; height depends on your preferences. If the nav element seems too short or too tall, simply change the height. 
    2. The purpose of the top padding is to keep the links that we will add later from reaching the upper edge of nav, Padding is very accurately named for its actual function.
  14. Now add the nav element just below the header element in your html file. Once you are finished thing should look pretty much like this:

  15. Now return to your css file and add a font family ( enter font-family: and brackets should prompt you with some choices) to your header. Once you apply the changes, the look of the text within your banner should change. If you don’t like it, modify the #banner rule until you are content. While you are at it, experiment with the letter spacing ( letter-spacing: 6px; for example). There are other values that you want to play with as well. For inspiration, you may want to visit w3school’s font information page:
  16. Create a Css tag named body and set a background color. This should change the background for the entire page! You are welcome to revert to the default white background color if you prefer.
  17. Take a look at your page does everything appear to be in it’s proper place? If not, fix it. Otherwise, move on.

Adding and Positioning Content

An important trick for moving quickly in web development is to re-purpose work that already exists. You just invested time developing monkeys.html so let’s leverage that investment by using monkeys.html to create the two additional webpages that we will need for this exercise. Once all three webpages exist, we will develop them further.

  1. Save monkey.html again, but this time save as  and create a brand new file called birds_and_bananas.html. Save as again, and create another file named waterfalls.html.  At this point you should have 3 identical files, but with separate names for each.
  2. Your next task is to link all three of these files together. Place your links within (of course) the nav element. I recommend that you begin by linking monkeys.html to itself, as well as to the other two documents. Now, simply copy the three links and paste them into the nav element in the remaining two documents.
    1. Add a different title within the header tag to each document, save everything and test your links. Do they work? Do they look good?
    2. If you aren’t satisfied with the look of your links, visit rollovers.css and edit the link characteristics. text-align: center; perhaps or maybe a border-radius? 
  3. We are almost ready to insert images but for this exercise we are going to place each image inside of its own div tag.
    1. Why use divs? Because flex automatically sizes its first level child elements to the same height, which can cause images to display in a distorted manner. By placing the images in div tags, we avoid this problem. The divs are a uniform height but the images appear as they are. Do not set a width for each div because we want them to have the same width as the internal image.
    2. The one characteristic we do need is margin-right because we want space between each image.  So add margin-right to your css file as shown below.

  4. Return to monkeys.html. Insert  a div tag just below the </nav> tag, and then insert an image named munkee1.jpg into the div tag. Next, add a <br> tag just after the image tag and give your monkey a title. Repeat the process for the remaining three monkeys.

  5. Save your document and test everything out. Satisfied? Great move on!  If you are really, really frustrated and need help, click the life preserver!
  6. Almost done. Open birds_and_bananas.html and, following the same strategy of images and text within div tags, add all of the appropriately titled (with birds and bananas in the title) images to the document. Save, open waterfalls.html and repeat. You are done!  Connect this work to your home page and upload everything. Visit your site and make sure that it all works.