Notes on writing web pages
This page contains some notes for writing proper HTML within the CUHEP web pages.
List of links on the web that might help
Deprecated HTML
CSS Zen Garden
CSS, Accessibility and Standards Links
First Things First
The importance of writing readable HTML
Since most of use write our HTML using a text editor, it is important to format the pages in an easily readable format. I suggest putting URLs on separate lines, putting block tags on separate lines and using reasonable line lengths in the html files. For example, which code is easier to read and therefore easier to go back and modify?
<p class="pre greenBackGround boldFont"> There are 12 faculty members in the University of Colorado High Energy Physics group. Their research interests include both <a href="/experimental" >Experimental</a> and <a href="/theory" >Theoretical</a> High Energy Physics. The experimentalists work in collaboration with such groups as <a href="http://www.slac.stanford.edu/BFROOT" >BaBar</a>, <a href="http://www.linearcollider.org/" >International Linear Collider</a>, and <a href="http://cms.cern.ch/" >Compact Muon Solenoid</a>. They conduct research in such places as the <a href="http://www.cern.ch/" >European Organization for Nuclear Research (CERN)</a>, <a href="http://www.fnal.gov/" >Fermi National Laboratory (FNAL)</a> and the <a href="http://www.slac.stanford.edu/" >Stanford Linear Accelerator</a>. The major research areas of the theory group include string theory and quantum gravity, lattice QCD with an emphasis on issues associated with chiral symmetry, and beyond-standard model phenomenology and the origin of fermion masses. </p>
or
<p> There are 12 faculty members in the University of Colorado High Energy Physics group. Their research interests include both <a href="/experimental" >Experimental</a> and <a href="/theory" >Theoretical</a> High Energy Physics. The experimentalists work in collaboration with such groups as <a href="http://www.slac.stanford.edu/BFROOT" >BaBar</a>, <a href="http://www.linearcollider.org/" >International Linear Collider</a>, and <a href="http://cms.cern.ch/" >Compact Muon Solenoid</a>. They conduct research in such places as the <a href="http://www.cern.ch/" >European Organization for Nuclear Research (CERN)</a>, <a href="http://www.fnal.gov/" >Fermi National Laboratory (FNAL)</a> and the <a href="http://www.slac.stanford.edu/" >Stanford Linear Accelerator</a>. The major research areas of the theory group include string theory and quantum gravity, lattice QCD with an emphasis on issues associated with chiral symmetry, and beyond-standard model phenomenology and the origin of fermion masses. </p>
The source for the web pages
The source for the web pages can be found under:
/nfs/heplocal/WWW/html in directories such as experimental,
computing, faculty, theory, etc. The main page for all directories
is index.html. It must have the permissions -rwxrw-r-- so that the
server side includes work. All other pages should be started using
the
template.html
page. There is a symbolic link to it in all the subdirectories
mentioned above. All subdirectories should contain:
A symbolic link to /nfs/heplocal/WWW/html/templates/template.html A copy of group-links.html A index.html page that was started using template.html
All the files in the directories mentioned above are writable by everyone. Therefore, everyone is free to change the content of the pages.
The experimentalists should modify:
/nfs/heplocal/WWW/html/experimental/index.html
The theorists should modify:
/nfs/heplocal/WWW/html/theory/index.html
The faculty should modify:
/nfs/heplocal/WWW/html/faculty/index.html
The post-docs should modify:
/nfs/heplocal/WWW/html/postdocs/index.html
The support staff should modify:
/nfs/heplocal/WWW/html/support/index.html
When you have some news or information, modify
/nfs/heplocal/WWW/html/news/index.html
Adding additional links to the navigation bar
You can add additional links to the navigation bar by modifying the file group-links.html found in every subdirectory. If you create a new subdirectory, you must put a copy of the file in it. The top of the group-links.html file explains how to add links to the navigation bar. They will appear just under the top most link which points back to the CUHEP home page. You must pay very strict attention to the format of the file, as there is a bug in Internet Explorer that can add unwanted lines between items.
Use the CUHEP Styles
You should write your HTML using the properties of the common style file. Follow the guidelines of the template.html file. The format for every page is done using a centralized style file. To see the power of a style file compare the 2 pagers: with the style file included and without the style file included. Using a central style file allows us to easily change the complete appearance of the web site by changing one file. This means that you must write your HTML using the properties of the style file. This means following the guidelines of the template.html file. So for example, the box on the right was created using a <span> block:
<span class="placeTextRight blueBackGround"> You should write your HTML using the properties of the common style file. Follow the guidelines of the template.html file. </span>
Making paragraphs and other block segments
All new paragraphs begin with <p> and end with </p>. All tags need a beginning tag and an ending tag. The only except is the <br> tag.
In the past, a great deal of formating on web pages was done using tables. With the introduction of styles, this form of formating is obsolete. It is cumbersome and very slow to load. It takes quite a bit of work for a browser to format a long table. I don't think a long explanation of how to format a page is needed here as the supplied index.html and the template.html files together with the site wide style file does this for you. All that is really required is that you should follow the rules on paragraphs and the use of the <h1> and <h2> tags. Here are a few more things you can use:
- <p class="center"> can be used to center text. The proper way to use it is to place your text in between <p class="center"> and </p>.
- <span class="placeTextRight"> and <span class="placeTextLeft"> - These create a text box with a border on the right or left side of the page using 35% of the width of the page.
- <span class="placeImageLeft"> and <span class="placeImageLeft"> - These create a box that you can place an image in. The text will float around the image.
Controlling text appearance
Do not use such tags as <font>, <bold>, <em>, <italic>, etc. This is all better done using style files. Please see: Deprecated HTML. You can have all your text the way you want it using various style classes. You simply add these to your style tag and it will change the way text looks. For example, we can have green font, we can have red font, or we can have blue font simply by using the
<span class="greenFont">, <span class="redFontFont">, <span class="blueFont">
classes. These will work any place you use a class tag and you can combine classes. For example, let's say
you want a paragraph that uses a larger font, is in bold, is red and on a blue background. Then you could use:
<p class="bigFont boldFont redFont blueBackGround"> you want a paragraph that uses a larger font, is in bold, is red and on a blue background. Then you could use: </p>
The following classes are currently available, more could be added:
redBackGround greenBackGround blueBackGround redFont greenFont blueFont center centerunderline pre boldFont smallFont defaultFont bigFont largeFont
Displaying email addresses
Don't put your email in plain view! In today's world, web crawls are used to gather email addresses, so it is best if you don't put your email address on a page without obfuscating it somehow. For example, don't write:
somebody@hostname.edu
One way to obfuscate your email is to write:
somebody at hostname.edu
but I would guess that crawlers are getting wise to this. Still it is hard to find this on a web page. The method that is provided for CUHEP web pages is to use Javascript and write:
<script type="text/javascript">
//<!--
PrintAddress("somebody","hostname.edu",1);
//--></script>
which produces:
Displaying URLs
URLs are placed in HTML documents using the familiar HTML tag:
<a href="someplace">This is the label</a>
Some simple rules to follow are:
- Always put the URL in double quotes ("). See below.
- If the URL points to a remote location, use the full URL. For example:
<a href="http://www.colorado.edu">CU Home Page</a>
Produces:
- If the URL points to a local location, use a relative URL. For example:
<a href="/computing">CUHEP Computing Page</a>
Produces:
- The old familiar ~username URL will work. For example:
<a href="/~drjohn">Doug's Page</a>
Produces: