Getting Started: Create the Home Page in HTML

Activity Directions

Estimated Time: 60 minutes

Do you remember?

The activity will use the following html concepts or tags. These concepts were introduced in the first Khan Academy lesson. (Go do that now if you haven't already!):

Verify Setup

If you completed the Software setup activity you should already have an html file ready called index.html. It should look something like this:
```
<!DOCTYPE html>
<html>

<head>
    <title>Hello</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/styles.css">
</head>

<body>
    <header>
        <div class="logo-box"></div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="aboutme.html">About Me</a></li>
                <li><a href="site-plan.html">Site Plan"</a></li>
            </ul>
        </nav>
    </header>
</body>

</html>
            
```
If you don't have that, go follow the Software Setup instructions and come back when you are done.
Naming files for the web

There are a few things to keep in mind as you come up with names for the files and folders that will make up your website.
- Always name the first page of your site index.html
- Most web hosts are case-sensitive which means there is a difference between Index.html and index.html
- So...Make your filenames all lowercase to avoid problems with case sensitivity.
- Avoid spaces and other special characters in your filenames (a-z, 0-9, -, and _ are all safe to use)
Inspect the <head>

If you look at the <head> element of your index.html file you will notice a couple of lines that were not in the aboutme.html page that we completed earlier. One of them should look familiar from the Khan Academy lesson: <meta charset="utf-8">. The other is new.

Meta tags give the browser information to help it build the web page. They are always found in the <head> with the other information that is for the browser only. The charset meta gives information that helps the browser to know which characters it will be expected to render. English for example has a very simple character set. It lacks the characters to list anything in Russian for example. Our charset line tells the browser to use a universal set of characters instead of the default (depends on your computer).

The viewport meta tag makes the page aware of how wide the browser window currently is. This is very important in this day of different screen sizes.
Change the title

Let's go ahead and change the title next. The <title> of the page shows at the top of the browser window or on the tab of a browser window, and in the search listing for a site. Let's pick something that will make sure people know what the site is, and what page they are currently on. Something like "Whitewater Rafting Vacations | Dry Oar Boating | Home".

We know from the wireframe for the home page for the Dry Oar site that there will be a combination of images, headlines, and text on the page. The Khan academy lesson for this week taught you how to add all of those things to a page with HTML. You will need to refer back to your wireframe and site plan document throughout this activity to make sure you don't forget anything on the home page.

As you look at the wireframe you will notice a few things. First a box with an X through it indicates an image will go there. A shaded box around something indicates that it should be colored. The numbers that are in the corners of some of the boxes indicate sizes.

The wireframe also indicates where our headlines and paragraphs will be, and should show approximately how much space the text should take up, and the relative sizes of the headlines and paragraph text. It also helps us to see the organization of the page. Elements are organized into groups. It will be important that we include html markup to represent those groups, as well as to get the content on the page.

Note!

We will NOT be adding colors and other styles this week. Our only goal is to get all of the content onto the page that is shown on the wireframe. Our Page will NOT look like the wireframe when we finish this week. Each week will get us closer, but our page will not look exactly like the wireframe for several weeks, so patience will be required :)
"Framing" with semantic elements

Building a website is actually a lot like building a house. You start with a blueprint (wireframe) and then you build the foundation and frame for the house. We have already built the foundation. We did that when we added the <html>, <head>, and <body> elements above. The framing takes the rooms outlined on the blueprint and creates a real space to put them. We need to do the same thing for our webpage, except for instead of rooms we are looking at content areas.

The way we "frame" in our webpage is by looking carefully at our wireframe to see what "rooms" we have. Then we use some special HTML tags to define them.

Take a moment to review the wireframe again to help remember what we are trying to do. Remember that I mentioned above that we are looking right now at content areas...elements on the page that are related and grouped. The wireframe has colored boxes to help you to see those relationships. We need to add some markup to create those containers in our html.

Html has several tags specifically for this purpose. Some have specific semantic meanings and others don't. We should always try and use the ones with meaning whenever we can. Here is a list of some of the more common of these tags: <header>, <footer>, <main>, <section>, <nav>, <article>, <figure>, <aside>, <div>, and <span>.

Last week you were asked to review a short article on HTML Semantics . There is a chart there that does a nice job of showing how those elements might be used in a simple site layout. Take a minute to go check it out again.

All of these elements behave the same in the browser except for <span>, but they are used to show different sections of the page. Try to use the more specific ones first, using a generic <div> only if none of the others seems to apply to the content you are boxing in.

Add HTML elements to your body to start outlining content areas. The first we need is at the top of the page. Notice that there is a box around the logo and navigation bar. Those elements are related and form the header of the page. Lucky for us if you look in the list of tags above you will see that there is a <header> tag! Not only that but the starter code already has one.

Inside of the header you can see a second box around the links for the navigation. Again after reviewing the list above we see a <nav> tag...perfect! And again it looks like the instructor was a little too generous with the starter code because you already have one!

Next let's add an area where the main content for this page will go. On a normal site the header and footer will stay the same across pages...but the central content will change from page to page. We need a box to hold that. The <main> tag was built for just this use. Add a <main> element to your page right below the </header>

The first thing we need inside our new <main> element is a banner image that will stretch all the way across the screen. Let's add some html to hold that. In this case a simple <div> is probably the right answer.

Tip!

There will be a lot of code examples in this and other lessons. Avoid the temptation to just copy/paste them into your page. Type them out! This might seem like a bother, but you will remember the HTML and CSS we use much better if you do ;)

Below that banner is a bunch of content. It is separate from the banner, but related. Let's use an HTML element to group the content in that section together. Another <div> would work well again.

Notice that the <div>s we created for the banner and the rest of the main content look just the same! We need a way to distinguish between the two elements. The common way to do this in HTML is with a class or id attribute. Lets add unique classes to each of those divs that describe what will be inside them. For example for the banner lets add class="banner-box" and for the rest of the content add class="home-grid" (this name will make more sense later).

Finally we need one more container on our page. This one will hold the footer information. Again if you refer to the list of semantic elements above you will see a <footer> element. Add one below </main>.

At this point my <body> looks like this:
```
<body>
    <header>
        <div class="logo-box"></div>
        <nav> 
             
            <li><a href="index.html">Home</a></li>
            <li><a href="aboutme.html">About Me</a></li>
            <li><a href="site-plan.html">Site Plan"</a></li>
        </nav>
    </header>
    <main>
        <div class="banner-box">  </div>
        <div class="home-grid">  </div>
    </main>
    <footer>  </footer>
</body>
```
You may have noticed the lines in my code above that are in grey. They are called comments...notes to yourself that the browser will ignore. Comments start with  and everything in-between will be ignored. Comments are a great way to remind yourself what you were thinking when you did something in your page.
Adding content.

To add content you need content! This will come from a few sources.
1. Make sure to have the wireframe open and handy.
2. You will find blocks of text you can use embedded in the instructions below. Watch for them! (You can modify these if you want)
3. Images can be found here: Rafting images (or you can find some of your own)
  Finding your own Images
  
  If you opt to look for your own images here are a couple of things to keep in mind:
  - Make sure the image is not restricted for use. These would include images from other whitewater rafting company sites and photographer's sites.
  - You can have Google help you try to avoid those and find images that are free to use by searching something like rafting in Google...then select the Images tab. At the top of the screen you will see a Settings option. Select Advanced Search. Towards the bottom of that page is a Usage Rights option. Select "free to use or share, even commercially"
  - Many of the images you will find will be very large! Don't worry about that this week, we will learn how to correct that next week.
With that we should now have all of the "framing" done on our webpage. We have a place defined now for all the content that needs to be on the page. With that done we are now ready to actually add it! Remember to refer often to the wireframe as you are adding the content. The instructions will make much more sense if you are looking at the blueprint!
Header content

Let's work on the header first. Visit the image links above and find the logo you would like to use. Add the <img> tag to your page inside the <header>. Remember that the <img> tag has 2 required attributes. alt and src.

src should indicate the location of the image and alt="" should contain a short description about the image and is used primarily for the screen readers that the visually impaired use to browse the web.

This image is already the right size and is on a web server, so we just need to figure out what its URL is to add it to our page. Your browser makes it really easy to do that. If you click with the right mouse button on any image in the browser your computer will offer you several actions you can take. The one we are interested in right now is "Copy Image Address".

Copy the address for the logo image and paste the result into the src attribute in our image. the final tag should look something like this:
```
<img src="https://brothert.net/dryoar/images/dryoarlogo.png" alt="Dry Oar boating logo">
```
Indentation

You may have noticed something else about my code as well. Notice how I am indenting my HTML elements to help me clearly see which elements are inside of other elements. As your page gets larger this becomes more and more important. Take a little time to keep your code in order...you will be happy you did later on.
Finish the Menu

Now it's time to add the list of subpages that will eventually become links and provide our site's navigation.You may not know the exact name of these pages yet and that's OK. They can always be changed later.

Notice that I said 'list' there. One thing most people don't realize is that most navigation bars on most websites are made with an unordered list...the same one you learned how to use in this week's Khan Academy lesson. They are well disguised, but they really are lists.

The starter code provided already had the start of a list for you. Notice the <ul> element with two <li> children. Add additional <li> elements for each link that shows in your siteplan. I would let the aboutme.html link drop to the bottom of the list. The home page, index.html, should always be first in the menu.

Your <header> should look something like this:
```
<header>
 <div class="logo-box"><img src="https://brothert.net/dryoar/images/dryoarlogo.png" alt="Dry Oar boating logo"></div>
 <nav>
   <ul>
       <li><a href="index.html">Home</a></li>
       ...the rest of your list...
       <li><a href="aboutme.html">About Me</a></li>
       <li><a href="site-plan.html">Site Plan"</a></li>
   </ul>
 </nav>
</header>
 
```
Add a Banner

Next is a wide banner image. Look through the images provided and choose one to add to your page in the <div> we added earlier to hold it. A regular sized image will not work here... it MUST be a page wide image.
Add the Main content

Next we have a collection of a bunch of headlines paragraphs and images. Start right below the banner in the wireframe (you still have that open right?) and read left to right top to bottom to add the content. All of these elements will go inside of the home-grid div.

Using the <h2> tag add the first headline to the page inside of the first home-grid <div>. (There is a headline on the wireframe you can use...or you can make up your own). Give this <h2> a name with a class. Call it home-headline-1

Then use a <p> tag to add the following text: (or something similar...feel free to edit this :) ) inside of that same <div>. Give it a class as well. Call it home-paragraph-1
We believe that there is nothing like a river trip for relaxing. That is why we subscribe to the dry oar philosophy of boating. Keeping your oars dry for us means taking time to look around and notice the beauty that surrounds the rivers we love.
Finally choose another picture from those provided and add it after the paragraph. Add a class to it as well of home-right-img

Here is an example of how your code should look:
```
<div class="home-grid"> 
    <h2 class="home-headline-1">We run Rivers to relax.</h2>
    <p class="home-paragraph-1">We believe that there is nothing like a river trip for relaxing...  </p>
    <img class="home-right-img" src="https://brothert.net/dryoar/images/river-evening.jpg" alt="peaceful evening shot of a river">
</div>    
```
Check your work to make sure that everything is showing up correctly. Then add another headline, paragraph, and image. Make sure to use different names for their classes. I would recommend: home-headline-2, home-paragraph-2, home-left-img. Text for the paragraph is below:
That doesn't mean we don't also like rapids. Opposites in all things after all. We believe that that tenseness that comes when you are looking down the tongue of a big string of waves makes you appreciate the calm beautiful water that always follows even more.

Using personal images

You may be wondering how you might use a picture of your own on a website. It's actually pretty easy. An image needs to be on a webserver in order to be used on a website. Glitch is our webserver, so if you want to add a picture of your own you just need to upload it into Glitch as we did for the About Me activity. You might want to take an early look at the Optimizing Images activity before you do this though.
Finishing up the main content

The next section is a bit different. The headline and paragraph there are going to be kept together when we do our layout. Whenever you want to move multiple elements together you should group them by placing them inside of another element. Let's use a <section> element for this. Add a <section> with a class of home-paragraph-3 inside and at the bottom of the .home-grid element, then add a headline and paragraph inside of that element like we did above. We don't necessarily have to add classes to this <h2> and <p> since we will learn how to find them based off of their parent later. But you can add them if you would like. Here is the text for the last paragraph:
We invite you to come relax with us on one of the amazing rivers we visit. Check out our trips and let us know which one best suits you. We're waiting to hear from you!
And here is what the HTML for this portion of the page should look like.
```
<section class="home-paragraph-3"> 
    <h2>Come Run with us.</h2>
    <p>We invite you to come relax with us on one of the amazing rivers we visit.... </p>
</section>   
        
```
Footer content

Finally let's add the content to the <footer>. The copyright comes first. Put it into the first element that you should have added in your <footer>. To make the copyright symbol we use a special code, there are many of these but we will just learn this one today: © Place that right before the 20XX so it will look like this:
```
<p>&copy; 20XX Dry Oar<p>
```
Let's go ahead and add your name and section as part of the footer as well. So the final html for the footer section should look something like this:
```
<footer>
    <p>&copy; 20XX Dry Oar - FirstName LastName - Section </p>
</footer>
```
Make sure to replace the "XX" with the current year for the copyright! We will add the icons for the social media links later.

One more reminder! Our only goal is to get all of the content onto the page that is shown on the wireframe. Our Page will not look like the wireframe at this point. Each week will get us closer, but our page will not look exactly like the wireframe for several weeks, so patience will be required :)
Verify

Make sure to view your web page online to make sure your changes are correct. Once verified, submit the URL from your browser that you use to view your page to iLearn.

Also make sure to validate your html. Review the Troubleshooting Activity from this week if you have forgotten how to do this.
Remember to give the preview or Show link in Ilearn. It will look something like this:
```
>https://my-project.glitch.me/
```
Always check that URL before you submit your assignments in Ilearn to make sure that all your changes show.

WEB Fundamentals

WDD 130

Getting Started: Create the Home Page in HTML

Activity Directions

Do you remember?

Verify Setup

Naming files for the web

Inspect the `<head>`

Change the title

Note!

"Framing" with semantic elements

Tip!

Adding content.

Finding your own Images

Header content

Indentation

Finish the Menu

Add a Banner

Add the Main content

Using personal images

Finishing up the main content

Footer content

Verify

Getting Started: Create the Home Page in HTML

Activity Directions

Do you remember?

Verify Setup

Naming files for the web

Inspect the <head>

Change the title

Note!

"Framing" with semantic elements

Tip!

Adding content.

Finding your own Images

Header content

Indentation

Finish the Menu

Add a Banner

Add the Main content

Using personal images

Finishing up the main content

Footer content

Verify

Inspect the `<head>`