3. Structure, and some CSS

Edited 10 February 2019.

Using the same text from the previous assignment, we need to add some further structure. HTML5 adds some structural tags, such as header, article, nav and footer. When reading a book, it is (or should be) obvious when a chapter or section begins and ends. Headers and footers are used to let the viewer know where they are, and may have other information.

The main point of this exercise, as far as CSS goes, is to apply some visual structure. Mostly this means developing the main structural elements as seen above. There are now enough anchors to create a nav element, the header element should be apparent, as should be article. As well, the exercise is a demonstration of two of three ways of implementing CSS: embedded, and inline.

A style tag will be used to define and place the structural elements. This will be placed in the head of the HTML document. The header needs to be on top, with the main and nav side-by-side, and the footer on bottom. The page contents will have a static width (total) of 960px.

Three different methods will be used, on three different pages to position the elements: floats, flex, and grid. The floats page will use embedded CSS, while the latter two will use external style sheets.

bothLayout

Although this problem may seem a bit daunting, as it brings everything so far together at one time, take it one step at a time. Put in the HTML structure, see what that does, then add in the CSS, again, one step at a time. Code, test, code, test. This problem should illustrate how the first two legs of web design, HTML and CSS, work together. The idea is to make this all pretty much second nature, at least in the process.

Paramenters

  1. The exercise will have a minimum of three HTML documents.
  2. The entire content should be 960 pixels wide, centered in the browser window.
  3. The HTML syntax needs to be correct.
  4. CSS needs to to place the header above main, with nav to either side of main, followed by the footer.
  5. One page will (as above) use floats for positioning, one will use flex, and one will use grids.
  6. The page with floats will use an embedded style sheet, the other two external (linked).
  7. The documents must contain anchors back to your home page and the index page for exercises, and should be linked to each other.
  8. As with the all assignments, once the local version is finished and tested, upload the changes to the server, and test from there.