Favorite Bands Directions

Back

Introduction

Our goal in this activity will be to increase our ability to code in html by creating a small website in notepad. The theme will be music and you will create some simple pages that will provide some basic information about 2 of your favorite bands. Let's get started

Procedure

Part 1-- Create the Structure

This part will be easy.

Process:

  1. Copy one of your templates folder you want to use for this project
  2. Paste in THE ROOT of your web1-site folder
  3. Rename this folder fav-bands
    • If you are choosing a different "favorite", name appropriately
      • Ex... fav-games if you are a gamer!!
  4. Rename the files in the folder appropriately as well
    • It shouldn't be template1.htm anymore... for example
    • Do the same for css file as well
    • Fix any issues from renaming
top

Part 2-- Remove the embedded CSS to index.css (Already done!!)

We will need to move the embedded CSS from the index.htm file into a new notepad document.

Process:

  1. Cut the embedded CSS (like we did with our template!)
  2. Create a new notepad document, save as: index.css
  3. Paste the cut CSS into this document and save

Part 3-- Attaching index.css to index.htm

Having attached not embedded CSS is essential for this project!!

Process:

  1. Open your correct-doc-type.htm in the root of your web1 folder using notepad
  2. Find the "linked CSS" section and copy the 2 lines of code in that section
  3. Paste this in your index.htm file from your fav-bands folder (BENEATH THE META TAG!)
  4. Placement of these 2 lines of code should match what you see in the correct-doc-type.htm file
  5. Inside the " ", type index.css

If everything is done correctly, this should bring the missing CSS back to your file

top

Part 4-- Create the navigation/pages

We will need 3 pages in this little website and we will need 3 links to navigate to each page

Process:

  1. Creating the navigagtion. Build the unordered list you see below in the nav div (smart people will do this very quickly!)
    • home (links to home... big surprise)
    • band1 (links to band1.htm)
      • Once again, use appropriate naming if not using bands
      • game1.htm if you are a "gamer" for ex...
    • band2 (links to band2.htm)
  2. Replicate this page twice by simply copy/pasting the files
    • Rename the files so you have 3 files in your folder.
    • File names should be:
      • band-home.htm
      • band1.htm
      • band2.htm

Part 5-- Add Content to Header

There are many ways to do this...

Goal: A title for the website

top

Part 6-- Add content to the 2 "bands" pages (in content div)

This is the meat of this assignment! It will require most of your time. Creating a finished, polished product is the goal.

Process:

  1. Use an <h1> tag for the band name on this page
    • This is important for search engine optimization
    • Each page on your website needs to have an h1 tag
    • Search engines (Google) look for h1 tags when indexing your site!
  2. Make your title tag the exact same name as your h1 tag
    • This is also important for SEO
  3. Provide information in content <div>... Requirements:
    • Background information- (ideas... when did they start? What type of music did they play? etc)
    • List of band members- (must be in an ordered or unorderded list )
    • An image (with appropriate file size and dimension)
    • Image needs to be formatted so text and graphic work together

Part 7-- Creating content on your index page

You will need to make some minor modifications to your page titled index. This page is your "welcome" page to your little web site and it needs to introduce the visitor to your site.

Process:

  1. Use an h1 tag and create text... something like "My Bands Home"
  2. Match title to h1 tag for SEO
  3. Page Content:
    • Describe the kind of music you listen to and why you like it.
    • Provide any relevant information to the visitor that you think might be helpful to their understanding as to why you chose these 2 bands as your favorites.
    • For the image find and image that you think represents your type of music. This is pretty open-ended and you have room to find just about any image that you like. Just make sure it is related to music in some way so it fits within the theme!
    • Text and image should work together! Make the text wrap around your image.

Part 8-- Add content to your footer (on each page)

In your footer for each page, make sure you have the following:

  1. Created by: and the date:
  2. A back link to your template index page
  3. A back link to Sprague home (just like your template)

Part 9-- Add a link from your template to your Favorite Bands project

Open your template index and add a link to this project in the "Other Projects" section.

 

**** The directions above do not meet correct SEO requirements since each student will have individual band names. For correct Search Engine Optimization (SEO), the file name, link name page title and h1 tag should all match!! ****