MINOS Web Guide - The Code in a Page

What's in a Page

This portion of the Guide will define what purposes are served by the lines of code which are common to all our XHTML pages. The definitions include identifying what lines can be - and should be - edited and customized for individual pages, and what lines must be left as they are for all pages.

The First Two Lines

Both these lines must remain as they are. DO NOT EDIT.

First Line - the DOCTYPE declaration
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
The DOCTYPE declaration tells the Browser how to interpret the rest of the code in your page. It tells the browser to render your code as HTML-4 or as XHTML or as a frames-based page, or one of many other options. W3C Standards requires that all pages identify themselves in this way. There are a variety of valid DOCTYPE statements that can be used. To keep things easy while we transition between HTML and XHTML, we declare a "transitional" as opposed to "strict" interpretation.
Second Line - the Namespace
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
The Namespace line looks like the old <html> tag, but now serves a different purpose. It is a specification for XML, the language XHTML is based on. The Namespace identifies a specific set of elements and attributes which belong to a specific Doctype, by pointing to an online location where these are defined. The Namespace line also declares that this page is written in English, and the version of XML being used is also written in English.

The <head> Section

You can customize the <title> and a couple of the <meta> tags. Do not edit any other lines.

The <title> Tag
<title>Your Page Title Here</title>
YOU EDIT THIS. Each page on the site should have a unique name, and one that is as self-descriptive as possible, in 8 words or less. The Browser generally takes this title and posts it at the top of it's window. Web robots also use the title to index pages.
The encoding <meta /> tag
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
This first <meta /> tag declares the type of character encoding used. There is more than one way to do this, and this method is not the primary one listed by W3C Standards - their primary method depends on proper configuration of your site's Web Server - something we don't have a lot of control over. The above line works reliably at present. Do Not Edit.
The ROBOTS <meta /> tag
<meta name="ROBOTS" content="INDEX, NOFOLLOW" />
This second <meta /> tag tells web robots that they can index any links on this page, but not to follow them through to subsequent pages (links may lead to our internal areas - if they don't, the robots will find those pages eventually anyway). Web robots are how search engines like Google gather information for their databases. Do Not Edit.
The keywords and description <meta /> tags
<meta name="keywords" content="MINOS,NuMI,Pagemaster Guide" />
<meta name="description" content="MINOS web page code" />
YOU EDIT THIS. These <meta /> tags tell web robots what headings to file this page under. You can add more keywords to the list, comma-separated. You can modify the description phrase. You can also add additional keyword and-or description meta tags. In principle, a search using one of your keywords will produce your page as one of the search results. However these tags have been much abused by the commercial side of the web (enter your competitor's name/product in meta tags on your own page, so a search for your competitor's product will also turn up your product); the result is that some robots now ignore these tags, and instead use the actual contents of a page.
The <link /> StyleSheet tags
<link rel="StyleSheet" href="/xstyles/xstyle.css" type="text/css"  media="screen, projection" />
<link rel="StyleSheet" href="/xstyles/xprint.css" type="text/css"  media="print" />
These <link /> tags hold the references for the Style Sheets, telling the Server/Browser where they are located so they get shipped with the page. <link /> tags are also used to load JavaScripts and Plugins that the page may require. You generally Do Not Edit these, unless you have created your own special style sheet (and do we have a good reason why that's necessary?) or if you have utilized (and written) a script. Note that the references are absolute and not relative: the path to the files is with respect to the top level of the web site (the starting /) and not with respect to the web page. This means the page can be relocated within the site, and these lines would not have to be modified in response to that move.

The <body> Section

This is where most of your editing occurs, as it holds the Content. But this Section also holds the code which lays out the header graphic and menu bar, the sidebar, and the footer; all those items are identified.

The Navigation Server Side Includes
Near the top of the page -
<!-- SSI Header Logo and Menu Bar -->
<!--#include virtual="/xstyles/xhdr.html" -->
and near the bottom of the page -
<!-- Sidebar Navigation for this Section of the Web Site -->
<!--#include virtual="LocalSideMenu.html" -->
These two SSI statements, each labeled with a comment, are for the header Logo, top navigation bar, and the navigation sidebar. The statements tell the Server where to find the files of XHTML code which create those page elements. The include for the header logo and top navigation always uses an absolute path, as it is shared across the Site. The sidebar however is specific to a Main Section or a sub-Section, and it can be referenced either by absolute or relative paths, whichever seems best for future management of that area of the Site. You can create your own sidebar menu (copying an existing one) and refer to it here
The Displayed Page Title
<!-- Your Page Title Goes Here.  It will be displayed in the upper right corner -->
<div id="title"><h1>Your Page Title</h1></div>
YOU EDIT THIS. The comment line is there to identify this item unambiguously. The title is placed between the h1 tags. Note that the h1 tags are in turn enclosed within div tags which have a particular id - an id is stronger than a class, in the sense that there can be one and only one item in the page with this id name. The id is the means by which the Style Sheet instructs the browser to display this h1 tag different from all others on the page - not just the color and size of the text but also it's LOCATION on the page. Notice that even though this line of code comes after the lines which install the navigation menus, the page title is not displayed below the menu bar, but above it, next to the site logo. This is CSS positioning in action.
The Main Page Content
<div id="content">
<!-- Your CONTENT goes here -->
<!-- End of the Content -->
YOU EDIT THIS. All your page contents go in the space between those two comments lines. The Content section is contained within a <div> tag, with an id name, and this id is the means by which the Style Sheet formats the text within the Content section.
You should use proper hierarchical markup. What does that mean? The headline gets a <h1> tag, sub-heads get a <h2> tag - they are not <p><b>paragraph</b></p> tags made bold. Search engines and screen readers know the (proper) difference between headers and paragraphs, and do not treat them equivalently, no matter what their appearance is within a browser.
The XHTML Syntax details page tells you exactly what the syntax is for the tags you will use for page content - very similar to HTML but a few important differences.
The Footer Server Side Include
<!-- SSI for Footer graphics and links -->
<!--#include virtual="/xstyles/xftr.html" -->
This Server Side Include inserts the code for the page footer.

Fermi National Accelerator Laboratory Magnet Logo