Editors may want to refer to the page in the PFF Operations Manual for the duties and responsibilities specific to a particular editorship. A manual of style for the website is available at peninsulaflyfishers.org/DoItYourself/style_rules.html. A template for a roster page is available at peninsulaflyfishers.org/DoItYourself/roster_code.html.
Move on to why an html template is the way to go uniformity makes it easier on site's users faster for writers of pages because they don't have to look up how to style and lay out the copy
Don't click until instructed to later.
HTML is an acronym for HyperText Markup Language. Hypertext refers to the ability to link to other files on the internet. Markup refers to coded instructions added to the text that enable the browser to display the text with style and layout beyond the limitations of a text file. The coded instructions are called tags.
Plain English plus tags equals a web page.
A web page is a text file; a text file is limited to a small set of alpha-numeric, punctuation, and page control characters; no bold, italic, font, size, or other changes allowed—sort of like a typewriter.
A browser is an application that reads text files and displays them on a screen: computer, pda, television, cell phone, etc.
An HTML document has a head and a body. The head contains instructions and other information about the page. The body contains the text and images you see and tags that tell the browser what the text and images are and how to display them.
The browser can display elements by default rules (those written into the browser), by attributes assigned to tags by the author of the HTML page, or by a separate method called Cascading Style Sheets (CSS). CSS is good because a collection of web pages can all refer to the same, single style-document; thus all those pages have the same appearance. Changes on the style-document apply to the entire collection of HTML documents, saving an enormous amount of work on larger websites.
CSS frees the HTML from style instructions so that it can be simply heirarchical and structural; that's good because then HTML can be used on many devices: computer screens, cell phones, PDAs, readers for the vision impaired, screen applications for the vision impaired, and internet appliances.
Scripting languages, like JavaScript or PHP, can write content elements common to multiple HTML pages. The scripts would be stored on a separate text document. By refering to the script document, the common elements can be inserted into the HTML pages. Alterations to any of these scripts make changes throughout the HTML document collection. This promotes uniformity, and it save a lot of work.
Different brands and versions of browsers use different rules even though there is an internationally agreed upon recommendation (W3C). Browsers have bugs. Browsers are forgiving of HTML errors. Browsers are unforgiving of CSS and JavaScript errors. Almost everyone is viewing web pages from Internet Explorer on a PC running a Microsoft operating system; all the others (like me on my Mac) don't amount to a hill of beans. Microsoft is the most egregious, deliberate violater of the international recommendation of which they are a participant; deal with it! (They do seem to be cleaning up their act in regard to W3C recommendations.)
The essence of HyperText Markup Language is tags. Tags mark up text (as you knew it before the internet) so that browsers (software that displays text files on a computer screen) can display it with meaning and style.
Here is a paragraph:
Non eo dico, C. Aquili, quo mihi veniat in dubium tua fides et constantia, aut quo non in his quos tibi advocavisti viris lectissimis civitatis spem summam habere P. Quinctius, debeat. Quid ergo est? Primum magnitudo periculi summo timore hominem adficit, quod uno iudicio de fortunis omnibus decernit, idque dum cogitat, non minus saepe ei venit in mentem potestatis quam aequitatis tuae, propterea quod omnes quorum in alterius manu vita posita est saepius illud cogitant, quid possit is cuius in dicione ac potestate sunt quam quid debeat facere.
Here is that paragraph with it's tags shown:
<p>Non eo dico, C. Aquili, quo mihi veniat in dubium tua fides et constantia, aut quo non in his quos tibi advocavisti viris lectissimis civitatis spem summam habere P. Quinctius, debeat. Quid ergo est? Primum magnitudo periculi summo timore hominem adficit, quod uno iudicio de fortunis omnibus decernit, idque dum cogitat, non minus saepe ei venit in mentem potestatis quam aequitatis tuae, propterea quod omnes quorum in alterius manu vita posita est saepius illud cogitant, quid possit is cuius in dicione ac potestate sunt quam quid debeat facere. </p>
The less-than and more-than signs bracket all tags. These characters inform the browser that this bit is an instruction, not something to show on the screen. The part in between the < and the > is the content of the instruction. In the example above, the letter p stands for paragraph. The tags, <p> and </p>, tell the browser to begin and end (notice the slash) a paragraph, respectively. Almost all tags come in begin-end pairs.
| h1, h2, h3, h4, h5, h6 | for headlines of varying degrees of importance |
| p | for paragraphs |
| ul or ol with li | for unordered and ordered lists |
| table with tr, th, and td | for tables |
| img | for images, either photos or graphics |
| a | for links |
| br | for line breaks |
| comment | for adding notes which will not show on screen |
Notice that all these tags are structural with a heirarchical component. They don't give any information, per se, about appearance. The browsers have default instructions that make an h1 bigger than an h2, that place a blank line between paragraphs, that construct a table of rows with cells in the rows with lines separating the rows and cells. These default instructions are extensive, so that, with no style instructions at all, a page would follow sensible, if plain, graphic design traditions.
Tags may have another component. The tag selector (a p or an img, for example) may accept or require furthur instructions. These are called attributes. They take the form of name:value.
<img src="image_name.jpg">
Without the src attribute, the browser would know that you intended for an image to be placed there, but it wouldn't know the web address of the image, so it couldn't fetch the image and put it there.
<p style="font-family:Times,serif;">
This instructs the browser to follow all its built-in rules about displaying a paragraph; plus, show the paragraph in the Times font, or, if that's not available, whatever serif font has been designated by browser default or user preference.
In the earliest days of file transfer, text similar to that which a typewriter could produce was all that could be transmitted and either shown on a screen or printed out. Scientists wished to be able to super- and sub-script some characters for scientific and mathematic notation (O2 and x2 for example). Additionally, when scientific papers were published, they were printed on presses where type face, weight, and size variations were used. In order to make these internet documents more readable, the scientists wished for a means to add these characteristics to the display of documents. Tags were devised and eventually browsers developed so that the the reader would see what you are used to seeing now.
The line(s) of code is shown first, the line(s) following shows what it produces.
<h1>This is the highest importance headline level</h1>
<h2>This is the highest importance headline level</h2>
<h3>This is the highest importance headline level</h3>
<h4>This is the highest importance headline level</h4>
Notice that the type size is the same as that of regular body text, as in a paragraph or list. Most browsers make all headlines bold.
<h5>This is the second least importance headline level</h5>
<h6>This is the least importance headline level</h6>
<p>This is a paragraph, the category that holds most text. ...</p>
This is a paragraph, the category that holds most text. Quae res in civitate duae plurimum possunt, eae contra nos ambae faciunt in hoc tempore, summa gratia et eloquentia; quarum alterum, C. Aquili, vereor, alteram metuo. Eloquentia Q. Hortensi ne me in dicendo impediat, non nihil commoveor, gratia Sex. Naevi ne P. Quinctio noceat, id vero non mediocriter pertimesco.
<!-- The characters less-than, exclamation, hyphen, hyphen start a comment tag. A common use is to add notes to the code to help explain it. Whatever is within comment tags won't display on the screen. Note the comment tag in the unordered list code below. Hyphen, hyphen, greater-than form the closing comment tag. -->
<br>
This tag causes the following text to begin on a new line.
<ul><!-- This tag starts an unordered list—u for unordered, l for list -->
<li>These tags bracket an item in either an unordered or an ordered list</li>
<li>The second item in the list</li>
<li>Repeat as often as necessary</li>
</ul><!-- This tag ends an unordered list -->
<ol><!-- This tag starts an ordered list—o for ordered, l for list -->
<li>These tags bracket an item in either an unordered or an ordered list</li>
<li>The second item in the list</li>
<li>Repeat as often as necessary</li>
</ol><!— This tag ends an ordered list —>
<a href="http://www.somewhere_on_the_web.com/a_page.html">
http://www.somewhere_on_the_web.com/a_page.html
</a>
http://www.somewhere_on_the_web.com/a_page.html
(Ordinarily, the start tag, the between text, and the stop tag would all be written on one line in the code. Here it is not because it would be wider than the page allows.)
The tag selector a stands for anchor; what we all commonly call a link. (A link is actually a different tag altogether; one you need not know.) The attribute href stands for hyper reference: that is, it refers to a document outside of this document. Functionally, href's value is the web address of the document to which the hyperlink connects. The text between the start and stop a tags shows on the screen. In this case, for the text between, I repeated the URL (universal resource locator; now more properly refered to as a URI for universal resouce indicator—don't ask me why they changed it). The text after href= is what makes the connection. The visible text does not help make the connection; it can be any text that the author deems appropriate.
The way this link is written, the current web page will be replaced by the one referred to in the hyperlink. Should the author want the hyperlinked page to open in a new browser window, this attribute should be added:
target="any_name_the_author_chooses".
If you are linking to VirginiaHam.com, you might want to name the target "ham". If you have another link—to Proscuitto.com— which you want to open in the same window as VirginiaHam.com did, then give that link a target attribute with the same value, namely: "ham". If you want Proscuitto.com to open in a different window, give the target any name other than "ham".
<a href="http://www.somewhere.com/index.html" target="a_name">somewhere.com</a>
There is another use for anchor tags besides linking to other web pages. Links can be within a page. To see this in action, go to the top of the page and click the link that reads "Don't click until instructed to later". You'll be brought back here. A good use for this capability is a table of contents list at the top of a page. Each item in the table of contents can be a link directly to the item elsewhere on the page. To do this requires code in two places: the table of contents entry and the item.
Here's how to do it. Assume the table of contents is an unordered list. Here is one list-item from that table of contents with a link to the text it references. <li><a href="#pickle">Pickles Go With Ham</a></li>
The referenced text must be identified by the browser somehow. The way that is done is by using an id attribute. Here is the begining of the referenced item:
<p id="pickle">It's true. Ham and pickles go togther like ...
Notice that "pickle" is the value of the id attribute and the value of the href attribute in the link. There is one important syntactical difference: in the link, the value must be prefixed with a #. The # means "id"; so the browser looks on this page for something with an id of "pickle". By the way, each id value on any single page must be unique.
An image is a file which is separate from the HTML file. It has to be called for, retrieved from the server where it resides, and interpreted by the browser. Images can be photographs, fancy type, a chart, a logo, or any other graphic. No matter which, all these files are digital; to the browser they're all the same. They have four important charactaristics: file type (jpg, gif, png), width, height, web address. The page author should supply the browser with these four bits of information. (Height and width can be deduced by the browser, but that makes the page load more slowly.)
There is another attribute which should be added. It is required by the international convention, but the browser software doesn't require it. This attribute is alt. It's value is descriptive text which is used by devices which read web pages aloud. If the image fails to load into the page for any reason, this alt text will display.
<img src="http://someplace.com/images/image3.gif">
<img src="bob_BigHorn.jpg" width="425px" height="365px" alt="Bob with a 19 inch Big Horn River rainbow">
Note: this is one of the few elements which has no closing tag.
Note: strangely, browsers treat an image like a letter in a paragraph. (Technically, images are in-line elements. Paragraphs, lists, headlines, tables, and more are block elements.) If you have a paragraph (or list or any other element composed of words) you can write, "blah blah blah <img src="image5.png"> blah blah blah". The browser would do it's best (size limitations considered) to stick the image right between blah number 3 and blah number 4. There are bunches of rules to control the placement of images in relation to text. On the PFF website, for simplicity's sake, images are not placed in text. How they are handled using CSS will be explained later.
The most current code standard would call for the width and height attributes to be replaced by a style attribute. The code would look like this:
<img src="bob_BigHorn.jpg" style="width:425px; height:365px;" alt="Bob with a 19 inch Big Horn River rainbow">
Strangely, the value of the style attribute isn't in the HTML language; it's Cascading Style Sheets, refered to as CSS. More about this later.
Another issue has sneaked into the image code above. Look at the alt attribute's value; particularly "...19 inch...". If the author were to write "...a 19" Big...", the brower would pull out all its hair, stomp around the inside of the computer, throw a fit, take a day off for mental health. Why?, you ask timorously, always ready to placate these moody computers. In HTML there are certain characters which must be reserved for use as instructions to the browser. The < and the >, which define tags, are good examples. When between the < and the >, some other characters are reserved. The " and the / have been used in the code you've seen so far. If you want to get into it, get a book or search on the web for "HTML reserved characters".
If your code comes out on the page like scrambled eggs, a misplaced reserved character could be the culprit. What is the cure?, you ask hopefully. There is an escape character which tells the browser to treat the character which follows it as a regular character, nevermind that it is ordinarily a reserved character, this is a special case. The escape character is \. Here is an example:
alt="Bob with a 19\" Big Horn River rainbow"
Why all the fuss? The browser's rules are: an attribute's values are whatever comes after attribute= and is in between quotes. When you feed the browser three quotes, it marks the first, the second (which is in the middle of your text), and wants to stop, but then it sees more text and another quote. What the ?!@#, it says. This isn't in my book of rules! How am I supposed to deal with this mess?, it says. Browsers are sticklers for the rules. (Actually, one reason browser applications are so big is that they have a lot of rules about what to do when authors don't follow the rules. The browser's authors want your pages to display, even if the code isn't just so. Nice of them, actually.)
Tables are used to display tabular data. They have also been used to control page layout because until CSS there wasn't any other real way to get much more layout than a typewriter could do. Graphic designers weren't going to put up with that. They bent the table to their artistic purposes.
Here's the basic structure of a table. Tell the brower that what follows is a table by writing a table tag <table>. The main orgainization element of an HTML table is the row. Write a table row tag <tr>. The table's bits of data are contained in cells arranged in rows. We're already in a row, so now write a table data tag <td>. Write some data; this will appear on screen. Close the cell with a </td>. Repeat table data tags as often as needed to complete a row. Close the row with </tr>. Start a new row, when needed, with the same code as the first row (<tr><td>the data</td></tr>). Be sure to have the same number of cells (<td>the data</td>) in each row. Build a table with as many rows and columns as required. Tell the browser that the table is complete with </table>.
<table>
<tr>
<td>blue</td><td>color</td>
</tr>
<tr>
<td>apple</td><td>fruit</td>
</tr>
</table>
| blue | color |
| apple | fruit |
Browsers have default rules for displaying tables. By specifying CSS rules or HTML attributes, the display of tables can be altered considerably to improve the appearance or utility of the table. Those specifications are a little advanced for this session. Tune in later for that.
There is one other tag which is very useful with tables. It is the table header tag <th>. It behaves like the table data tag. Place it in between a pair of table row tags. The browser default display for table headers is usually bold type. With CSS or attributes, the table header can be given any appearance required.
Some browsers don't display empty cells the same as cells with content. The solution is to put in every empty cell. That is the code for a non-breaking space. Every character you type on your keyboard is designated by a bit of code like that. There are a number of instances when these character code equivalents are needed, but that is a little advanced for now. The syntax is important. Begin with an ampersand, add the code specific to the character, end with a semi-colon. The codes are usually numeric, but some commonly used ones have easier to remember acronyms, like nbsp.
Often, some tablular data needs to span several rows and/or columms. This is accomplished in HTML by using the rowspan or colspan attributes. Do not write a cell when it is taken over by a row or column span. See the comments in the code below.
<table>
<tr>
<th colspan="3">Good Stuff</th><!— spans three columns, but only one cell is written —>
</tr>
<tr>
<th colspan="2">Substantial</th><!— spans two columns, but only one cell is written for those two columns—>
<th>Insubstantial</th><!— this supplies the third cell; the browser expects three cells in every row —>
</tr>
<tr>
<th>Food</th>
<th>Hobbies</th>
<th>Thoughts</th>
</tr>
<tr>
<td>chocolate cake</td>
<td>fishing</td>
<td rowspan="2">Do unto others as you would have them do unto you.</td><!— spans two rows, but only one cell is written. Check the following row. —>
</tr>
<tr>
<td>cherry pie</td>
<td> </td>
</tr>
</table>
| Good Stuff | ||
|---|---|---|
| Substantial | Insubstantial | |
| Food | Hobbies | Thoughts |
| chocolate cake | fishing | Do unto others as you would have them do unto you. |
| cherry pie | ||
(The code above doesn't include the colors I added so that you could see each cell more clearly.) A lot could be done to format this table. By default its width is controlled by the sum of the longest line of each column. Text within cells is centered horizontally and vertically. The chief headline "Good Stuff" is rendered the same as the subordinate headlines. The text within cells has no margin or padding to push it away from the cells' edges. CSS could fix all this and more.
If you want extra white space—extra spaces, tabs, carriage returns—you can't get them by keyboard input. There are ten spaces before this sentence. The browser turns lots of spaces, tabs, carriage returns into one space. To get more spaces you have to use the non-breaking space character-equivalent: . To get carriage returns (line breaks) you have to use the line break tag <br>. CSS provides lots of other spacing and formatting possibilities for horizontal and vertical white space.