Using the same text from the previous assignment, we need to add some further structure. HTML5 adds some structural tags, such as
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.
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. Use floats for
nav, and clear
footer, and you will be set. The page will have a static width (total) of 960px.
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.
- The styles added for placement of the major elements should be embedded (that is, in the head of the document). Include at least one inline style (a
styleattribute on a tag).
- The entire page should be 960 pixels wide, centered in the browser window.
- The HTML syntax needs to be correct.
- The HTML file needs to reside in a directory (this is three) inside whatever you called the exercises directory, and will be named
index.html. Get used to it.
- CSS needs to to place the header above main, with nav to either side of main, followed by the footer.
- This file must contain anchors back to your home page and the index page for exercises.
- As with the all assignments, once the local version is finished and tested, upload the changes to the server, and test from there.