HTML for GitHub Pages Exercise 2: Building and Styling a Site with Linked Pages

Overview

This exercise builds on HTML Exercise 1 for GitHub Pages, so that you develop a small, consistently styled website that contains:

• Multiple HTML pages with their own distinct content and images.
• A simple menu of relative links on each page so visitors can find each of the others.
• A single CSS file associated with all of your site pages to give you a consistent style for your website.

Building your site with a consistent layout and navigation

For the semester project, you will be building a website that helps to curate a document, so you can create this GitHub Pages website to be associated with your project. Think about planning a small set of at least three or four pages that will (eventually) contain:

• an introduction to your document and author, with some basic information about your project
• an edition of your document (an HTML representation of the document that you will eventually be preparing wtih XSLT from your XML)
• a page representing some analysis of data and metadata from your markup
• perhaps a separate conclusion page, though this could appear on the introduction or the analysis pages.

Of course for this assignment you do not need to have complete content for any of these pages yet! However, you can begin creating a home for this material by preparing some simple HTML pages with simple headings, perhaps a relevant image or two, and content like Coming soon! or Under construction!

Create some HTML pages with simple one-word filenames (no spaces and ideally no special characters in the filenames), with a .html file extension. The easiest way to create a set of these pages is simply to open the index.html page in <oXygen/> and use save as to save the file with a new filename. Then you can leave the head element mostly intact, just changing its title element. You will want to continue with the CSS file association line, most likely, since our goal is to have just a single CSS file that contains your styling codes for the whole website.

Begin editing the content of the body so that each page contains some distinct content.

Now, give some thought to how visitors will navigate your pages. A coherent website needs to contain clear site navigation cues to guide visitors to each of the main pages. You will want to work with relative links to point to HTML files saved in the same file folder (your docs/ directory) on your site. Here are some of examples of student project sites with reasonably simple navigation menus to give you an idea of site layout and navigation:

• The Ballot and Me project from Fall 2020
• Dennis the Menace CBML project from Fall 2023
• Behrend Family Letters from Europe project from Fall 2022
• KPop Project from Fall 2020

Basically you are establishing a simple plan for a website with multiple HTML pages. There are many ways to create a simple navigation bar, and this w3schools tutorial will walk you through a couple of methods using an HTML unordered list and CSS styling. (Note: w3schools displays CSS styling within the HTML page for demonstration purposes, but because we are building a website with the same consistent styling throughout, we want you to set up all your styling in a separate CSS file linked to each of yoru HTML pages. That way, when you make one update to the CSS you update the styling everywhere across your website.

We also think a very simple HTML menu bar can be very easy to code and maintain, and not take up a lot of space on a page. For example, a menu might look like:

and be coded with relative links to pages in the same folder like so:

<hr/>
<p class="navbar"><a href="index.html">Main</a> | <a href="about.html">About</a> | 
            <a href="texts.html">Texts</a> | <a href="analysis.html">Analysis</a></p>
<hr/>

Explore and experiment with giving your site navigation a distinct look and consistent location and appearance on your webpages. Remember to save your work frequently, and push it to your remote repo to publish updates to your site using:

1. git add .
2. git commit -m "your commit message"
3. git push

Styling your pages with CSS, with help from HTML <span> and @class

Take some time to work on the styling of your site, and learn your way around CSS code. It will help to use HTML elements and attributes especially designed for highlighting and styling, so on that you may want to try the <span> element and @class attribute, which are easy to associate with styling code in CSS. Check out the tutorials and sample sites at the end of our Introduction to CSS, and one of our favorites, the CSS Zen Garden, which features the same HTML page styled in eight shockingly different ways (and shares the code for each). Happy styling!

Submitting your work

Submit two links to the Canvas submission point for this assignment:

1. Your GitHub Pages website on Canvas at the assignment submission point there.
2. A link to the code view of your repo, to help me quickly review your docs/ directory.