GEOG646 Webpage Layouts using HTML and CSS

Overview

For this lab, you will design a consistent layout of all the webpages in a website using HTML and CSS. Then, you will develop content pages using the layout you developed.

1. Designing a Layout Page

• frame.html
• layout.css

2. Developing Content Pages from the Layout Page

• index.html - A default page (i.e. home page) of your website.
• content.css - Defines the style for the home page of your website.

3. Developing an Additional Page for the Website from the Layout Page

4. Verifying your HTML and CSS Files

Create a working folder for the lab assignment. Launch Visual Studio Code and click File -> Open Folder. Navigate to the folder you created and open the folder.

Download "Lab 7 Data.zip" and extract all files to the "images" folder under your project folder. Make sure you have the following:

• coffeebean.jpg - Will be used in Part 1
• coffee.jpg - Will be used in Part 2

Part 1 - Designing a Layout Page

Part 1-1 - Create a Standard Layout Page

When you design a webpage layout, it is useful to divide your content into multiple sections. Suppose you want to have a common user interface (i.e. layout) with a common header and a set of navigation links on the top, a "main content" in the middle, and a footer at the bottom as shown in the following figure. To implement this layout, you need to wrap up each section in < header >, < nav >, < div >, < footer > elements in your HTML page.

Figure: see image.

1. Right click on the folder (lab7) on Explorer in Visual Studio Code, click "New File", and create frame.html.

2. Setup the initial structure of your HTML page with the following components.

• Write < !DOCTYPE >, < html >, < head > and < body > elements in frame.html.
• To specify character encoding, add < meta > tag to the head section.
• Insert your title (e.g. Layout Page) between < title > and < /title > in the head section.

3. In the body section, add < header >, < nav >, < div >, and < footer > elements to define sections of header, navigation menu, main content, and footer in your webpage.

4. Set an ID for the div for the main content. Recall the ID property of < div > elements are used to specify and target an element for CSS styles through a CSS ID selector!

< body >
< !-- Define the header element -- >

< !-- Define the nav element -- >

< !-- Define the div element for the main content -- >
< !-- Make sure you give the div element a unique ID to access with CSS! -- >

< !-- Define the footer element -- >
< /body >

5. Write a copyright in the footer section. is an HTML character entity used to represent a copyright character . Add your own name. For more info about HTML character entities: https://www.w3schools.com/html/html_entities.asp.

6. Next, make a set of navigation links in the nav section in frame.html.

• Create a link to index.html by using < a > tag. The text should be "About Us".
• Create a link to coffeebeans.html by using < a > tag. The text should be "Beans".
• Create a link to brewguides.html by using < a > tag. The text should be "Brew Guides".
• Create a link to locations.html by using < a > tag. The text should be "Locations".

7. Save and run frame.html in a web browser. It should look like the figure below.

Figure: see image.

Part 1-2 - Setup the Style for the Layout Page Header with CSS

1. To apply different styles to your webpage, create a CSS file. Click "New File" and type a filename of your choice (e.g. layout.css).

2. Specify the external style sheet file (layout.css) in the head section of frame.html using the < link > tag.

3. Apply the following CSS styles to the < header > element in layout.css.

Target the header element using an element selector and add the following styles:

html {
/* Set the height to 100% */
}

body {
/* Set the height to 100% */
}

header {
/* Complete your code here */
}

4. Save layout.css and preview frame.html in a browser. You may see the margin around the < body > element which is the default margin set by the browser.

Figure: see image.

5. If you don't want to have any space around the < body > element, in your CSS file, set the margin property of the < body > element to 0px. Add this to your CSS file.

6. Save layout.css and preview frame.html again in a browser.

Figure: see image.

Part 1-3 - Setup the Style for the Layout Page Nav Bar with CSS

7. Now you will apply styles to the navigation links to improve their appearance. Your stylesheet (layout.css) should include the following.

• Target the nav element with a selector (see below). Set the width of the < nav > element using %. It should be the same as the width of the parent elements < body > and < html >.

  nav {
  /* Complete your code here */
  }
  
  nav a {
  /* Complete your code here */
  }

• A descendant selector is used to select an element nested in its parent element. Specify a descendant selector to target < a > link elements nested in the < nav > element (see above).
• Set the background-color property of the < a > elements. Select a color that looks good.
• Set the width and height of the link element. The width of each link is determined by the number of links. Suppose that we have 4 links (i.e. menus). Therefore, the width of the link element should be 100% / 4 = 25%. The element height is up to you.

8. Save layout.css and preview frame.html in a browser. You may notice the width and height of the < a > elements you specified in the CSS file are not working. They depend on the width and height of the text of the link. This is how browsers render links normally.

Figure: see image.

To remove normal positioning of the link elements and make each link float to the left and keep its width, set the float property of the nav link elements to left.

9. Save layout.css and preview frame.html in a browser.

Figure: see image.

Part 1-4 - Finalize the Style of the Nav Bar Link Elements

10. The navigation menu in the above figure doesn't look good, so apply the following styles to the navigation menu nav link elements to improve its appearance.

• Set the text-align of the link < a > elements to center.
• Remove the underline (i.e. any text decoration) of the text of each < a > element.
• Transform the text of < a > elements to upper case.
• Render the font of < a > elements in bold.
• Set the size of the font of < a > elements.
• Change the color of the text of < a > elements.
• Set the padding (space between the border and element content) of < a > elements.

11. Save layout.css and preview frame.html. It should look something like below.

Figure: see image.

13. Add different styles for when a user hovers over a menu link by using a descendant pseudo-class selector "hover" by adding the following to your CSS file.

• Display a different background-color when a user hovers over a link element in the nav.
• Change the color of the text of the link when a user hovers over a link element in the nav.

/* Define a pseudo-class selector for when the user hovers over a link element in the nav */ {
/* Complete your code here */
}

14. Save layout.css and preview frame.html. It should look something like below.

Figure: see image.

Part 1-5 - Add Styles to the Layout Page for the Footer with CSS

1. Now you will position and fix the footer to the bottom of the webpage.

• Target the footer element using an element selector in your CSS file.
• Set the position property of the footer to "fixed" which positions the element relative to the browser window.
• Set the left property to 0 and the bottom property to 0. It will position the footer at the left bottom corner of the browser window.
• Set the background-color property of the footer (e.g. the same color as the header).
• Set the height and width of the footer.

2. Add at least three (3) styles to paragraph < p > elements in the section of the footer div using a descendant selector (e.g. font, color, text-align, etc.).

/* Define a descendant selector to select paragraph elements in the footer */ {
/* Complete your code here */
}

Part 1-6 - Add Styles to the Layout Page for the Heading with CSS

1. In frame.html, add a heading (h1) element that contains the text "Coffee Factories" in the header section of your HTML page.

2. Target the h1 element in the header. Add at least four (4) styles to the heading (e.g. font, color, padding, text-shadow, margin-block-start, margin-block-end, etc.).

3. Save layout.css and preview frame.html. It should look like the following image.

Figure: see image.

Part 2 - Developing Content Pages from a Layout page

The layout designed for frame.html will be used as the layout of the following pages:

• index.html - Create for Part 2
• coffeebeans.html; brewguides.html; locations.html - Create only one for Part 3

All pages will be stylized using the following external CSS file:

• content.css - Create for Part 2

Part 2-1 - Creating an Index Page

1. Open frame.html and save it as index.html in your working directory. The page index.html will be the home page for your website.

2. Change the title of the page (e.g., "About Us").

3. Click New File and create a CSS file. Type a filename of your choice (e.g. content.css)

4. Make a link to the external stylesheet (content.css) in the head section of index.html using the < link > tag.

5. Edit content.css to set a background image that covers the main content div.

• Target the main content div using an ID selector. Use the ID that you defined in Part 1!
• Set a background image (coffee.jpg) of the main content that covers the entire div.
  • To implement it, you must set the CSS properties: width, height, background- image, background- repeat, background-size, and background-position).
• Set the height and width of the main content div using %.
• Note that you cannot see the background image without setting the dimension (i.e. width and height) of the main content div.

6. Save content.css and preview index.html. It should look like the following image.

Figure: see image.

7. Open index.html. Add the following contents to the main content div.

• Add an < article > element. Write two or more paragraphs inside of the < article > element. The contents of the paragraphs are up to you. You can be as creative as you like when creating the index, as long as you include some content. See the example screenshot below.

8. Apply the following CSS styles to the < article > element in content.css.

• Target the article element using an element selector.
• Set the width of the element using %.
• Set the text color of the element.
• Set the font properties of the element.
• Set the float property to position the article on the right side of the window.
• Set the padding-top and padding-right properties to add the space around the element.

9. Save content.css and preview index.html. It should look like the following image.

Figure: see image.

Part 2-2 - More on Background Image

Add enough content to the "main content" div so the content of the div element overflows the height of the browser window. When you scroll down your page, the background image will not cover the space exceeded the height of the browser window as you see below: see image.

How can you make the background image cover all the content? The solution is to set the background image for the < body > element instead of the main content div element.

Open content.css, comment out (do not delete) the styles applied to the main content div, and edit the CSS file to apply following styles. Save content.css when you are done.

• Create a background image covering the entire content of the body.
• Make the background-image not scroll with the page when a user scrolls the page.
• Set the margin-bottom of the last article element to avoid hidden text below the footer.

Figure: see image.

Part 2-3 - Add Some JavaScript for User Input to the Index Page

1. Add a < script > tag for some JavaScript code to the head section of index.html.

2. Add a prompt for the user to enter their name. Save the output to a variable.

3. Add a prompt for the user to enter their favorite bean. Save the output to a variable.

4. Add an alert to welcome the user based on the info they entered. See Example Output below.

Figure: see image.

Part 3 - Developing an Additional Page for the Website from the Layout Page

On your own, create one additional page (as defined above) that you have not yet created for your website (e.g., coffeebeans.html; brewguides.html; locations.html).

• Specify the title of the page as appropriate as we did for the index.html page.
• You can be as creative as you like for the new page, as long as you include some content.
• You do not need to add any JavaScript to the new page (unless you like to try, it is optional).

When done, you should be able to switch between the pages of your site using the navigation links!

Part 4 - Verifying your HTML and CSS Files

Check for errors in your HTML and CSS files:

• HTML - http://validator.w3.org
• CSS - https://jigsaw.w3.org/css-validator/

If the validators find any significant (i.e., not minor) errors in your files, you should fix them. You should not submit the validation results, but use these tools to correct your code.