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 collection and research ideas, with some basic information about your project, including a link to the code view of your repo,
• one or more pages representing analyses of data and metadata from your texts (to be developed as we continue the course)
• perhaps a separate page for conclusions, 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 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:

• Behrend Trees Project (project with a lovely splash page and scrolling site navigation concept completed in Fall 2021 DIGIT 400 class)
• Ancient Mayans Digitized (project with very well-documented CSS and site navigation completed in Fall 2021 DIGIT 400)
• Undertale Project (made by Pitt-Greensburg students in Fall 2019)
• The Rick and Morty Project (made by Pitt-Greensburg students in Spring 2018)
• KPop Project (completed in Penn State Behrend’s Fall 2020 DIGIT 400 Project Design class)
• Poetry by Piper Baron (a senior project with a neat concept for site navigation)

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 for HTML Exercise 2.
2. A link to the code view of your repo, to help me quickly review your docs/ directory.