loading
I'm a geek.

I'm not certifiable, I don't make money at it, I couldn't hack into my mother's Facebook page no matter how many FBI agents were after me.

But I am a geek, at least in spirit.

I know this because I just finished a week-long project that could have probably been accomplished by a non-geek in about 2.5 hours. Why did it take me so long? Because I didn't use Microsoft Publisher. I didn't use Microsoft Word. I didn't even use OpenOffice.

I used HTML and CSS.

In hopes that I connect heart-to-heart with other wanna-be geeks, here's my story:

Project Goal: Create a 72-page, pocket-sized field book, with formatted pages that include graphics.

Easy, right? Fire up any standard word processing or desktop publisher, spend an hour and a half entering content, and perhaps another half hour to format and tweak page sizes and sections, another 30 minutes to print and staple together, and the project's done!

However, I'm a geek. I think HTML and CSS are cool. I like programming computers. I'm not normal.

Step 1: Backstory

I work as a technician. I operate and maintain equipment that samples air. Everything we do is controlled by very official, frequently updated, Standard Operating Procedures. Highly classified and proprietary, of course. If I told you the details I'd have to kill you...that sort of thing (not really! Although, sort of...it's kind of complicated.)

Anyway, some of the stuff I need to know doesn't really change, not often, but it's not easy to memorize, at least not completely accurately. So, I keep a notepad handy. During my first year at work I wrote down important stuff in a 3x5 spiral notepad. When stuff changed, I scratched it out and added in the updated stuff. When the notepad was full, I got a fresh one, recopied all my important stuff and kept going.

After the first year, my important stuff outgrew my little notepad. It became a pain to recopy everything by hand. So, I cogitated how best to digitize my stuff.

Step 2: Criteria

The method of documenting my stuff had to accomplish the following:

1. Easy to carry
2. Easy to revise
3. Easy for others to use

The third criteria posed the most difficult challenge. I really wanted to create a training tool, something that could be viewed on a computer monitor, as well as printed on paper. I wanted a digital version that others could use, no matter what kind of computer, Mac or PC, no matter what software.

The obvious answer would have been some sort of word processor or desktop publisher. I use Word at work, OpenOffice at home. I've used Scribus and Publisher. But still, not everyone has the same software. I know it's possible to convert to different formats. I know that Portable Document Format (PDF) documents can be opened by many free programs. But each format would appear slightly different. Each would print slightly differently. I wanted something that would be relatively universal and free for anyone with a computer to view and print.

Plus, I'm a geek.

I chose to create a document that could be viewed and printed easily and consistently across any computer system, using any internet browser.

I chose to use HTML and CSS.

Hypertext Markup Language (HTML) allows me to use a basic text editor, something as simple as NotePad or WorkPad, any program that accepts plain text. Using programming codes (tags) I can enter my stuff, my information and images, and organize it into paragraphs, lists and sections. Any browser can open an HTML document, with or without an internet connection.

Cascading Style Sheets (CSS) allows me to format the content in an HTML document. I can format font styles, sizes, bold, italic, spacing, alignment, color and so much more. If I format everything using Times New Roman, and then decide it's boring. With a simple code change I can reformat everything in an instant to Comic Sans MS. (NO! I did not just say that! I didn't mean it! I will NEVER use Comic Sans MS...probably.)

If you're not a geek, or never plan to be a geek, feel free to click off and go to another blog now. From this point on, I'm going to get technical, and it's not going to be pretty.

Step 3: My HTML

I created my HTML document. Here's the essential snippet. Feel free to copy, modify and expand.


<html>
<head>
<title>Air Monitor Technician Field Guide</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/screen.css" />
</head>
<body>
<div id="page">
<div id="content">
<h2>Daily Checklist</h2>
<ul>
<li>Read &amp; Sign/Email/Timesheet</li>
<li>Flowmeter</li>
<li>Keys/lanyard/agent</li>
<li>Prep/install DAAMS tubes</li>
<li>Prep CPA/NOX/shooters</li>
<li>Radio/cellphone (for PMN)</li>
<li>LSS for UPA (213/316)</li>
<li>Waste bags/extra DAAMS tubes</li>
<li>Laundry tubes</li>
<li>PAS/Stack Probes</li>
<li>CEA Board</li>
<li>Work Orders</li>
<li>Driver's License</li>
<li>CEMS Cylinder Checksheet</li>
<li>PCT Supply</li>
</ul>
<p class="footer">1</p>
</div>
</div>
</body>
</html>

Of course, I had much, more more code than this. This was just the first page. I had 72 pages in my final booklet. I also had a cover page (with a cool graphic) and about 70 more pages after this. I didn't bother with meta-tags (I'm NOT going to explain what those are...not now, at least.)

Step 4: The Details

From top to bottom, let's talk about some of these lines of HTML code.


<html>

Any internet browser (Explorer, Firefox, Chrome, Safari or a hundred more varieties) will respond to this tag by interpreting every other tag in the document as HTML code, displaying the document on a computer monitor as a webpage. The last tag on the document indicates the end of the HTML coding: </html>.

<head></head>

Everything between the <head> tags allows the browser to process the document according to specific rules. The information in the <head> section is normally never seen by the user who opens the document, except for the <title> information. The browser uses the <title> to display a short description of the webpage, usually at the very top tab of the browser window.

<link rel="stylesheet" type="text/css" media="all" href="html-css-publisher-reset.css" />

This line of code links the HTML document to a stylesheet called html-css-publisher-reset.css.

The reset stylesheet directs the internet browser to reset all formats and styles to a neutral or zero level. This reset is necessary the design of my booklet, because every internet browser is pre-configured differently by its maker. Internet Explorer formats HTML tags slightly different than Firefox, for example. Spacing and alignment are different, fonts are different, as well as many other style formats. Resetting all formats to zero makes all browsers essentially equal, at least for viewing on a monitor screen.

Immediately after linking my HTML document to the reset stylesheet, I also link to a stylesheet called html-css-publisher-screen. This stylesheet will define the formats and styles according to my own preferences. I can select font size, font type, spacing, alignment, colors...virtually every aspect of formatting can be customized. Since I've already linked to the reset stylesheet, my preferences won't be misinterpreted by different browsers.

After the <head> section comes the <body> section. The <body> contains the content of the document, the text and images that will be displayed on the webpage.

My HTML snippet displays one page of my field guide, the Daily Checklist that I review at the start of each day to remind me of what to get/do/consider. It won't make much sense to anyone else, but it does show you the HTML tags I used to display the information.

Step 5: Tags

Let's look at those tags:


<div id="page">
<div id="content">

I've first set up two divisions, the first one called "page", and the second one "content".

The "page" division can be thought of as a box, or even as a page of the booklet (hence, the name "page"). I will later specify the size and type of division my "page" will be.

Immediately after setting up my "page", I set up another division, "content". Think of this as a smaller box nested inside the larger one, "page". Or, think of "content" as a small note pasted onto my larger page of my booklet. In reality, one division is not necessarily larger or smaller than the other. The size of a division is entirely dependent upon how I define them.

Another way to think of the two divisions would be to imagine a photo album page ("page"), with a photo ("content") pasted on the page. I can specify later the exact size of the album page as well as the exact size of the photo.

After setting up the "content" division I enter the information and images that I want to be on that small note.

<h2> is a tag that identifies my headline, "Daily Checklist". On other pages I used <h1>, which I can define as a large headline. For <h2> I specify later a slightly smaller font size, sort of a sub-heading.

<ul>
 represents an unordered list, simply a bullet-point list as opposed to an ordered list, which would be a numbered list, or an outline list using letters.

Most internet browsers normally display <ul> lists with a bullet point. However, I chose to define it as having no bullet points.

It's my document and I'll cry if I want to...I mean, I'll list without bullets if I want to.

Each item in my list is tagged <li> at the beginning, and </li> at the end. At the end of the entire list is a closing tag, </ul>.


<p class="footer">1</p>

Normally, a simple paragraph in HTML is tagged with <p> at the beginning and </p> at the end. For my purposes, I wanted the paragraph to display page numbers in gray. I used my stylesheet to define a special class of paragraph that I called "footer".

<div class="page-break"></div>
This division tag will have a special class defined later, called "page-break". The division will have no text or images to display, so I immediately followed the tag with a closing tag, </div>. The purpose of the "page-break" division will be to signal the end of one page and the start of another. In my snippet, I put the page-break immediately after page one. In my original document, the full-length version, I put the page-break after every eight pages until I reached the end. I wanted to end up printing eight small booklet pages on a single piece of paper, 8.5 inches by 11 inches. With my page-break division, I could signal the internet browser to print eight booklet pages on one page.

The remaining tags are closing tags, indicating the end of the two divisions, the end of the body, and the end of the document.

Step 6: My CSS

My CSS

With my content entered I could now define each tag according to my own preferences. I did that on a separate document called "html-css-publisher-screen.css", using CSS descriptors.

Let's look at my stylesheet.


div.page-break
{
page-break-after: always;
page-break-inside: avoid;
}

This first description is for a class called "page-break". the internet browser will send a signal to my printer (if I print the document) to start a new page when it encounters this division tag, but only after the small booklet page is printed, avoiding starting a new page if the printer is still in the middle of printing the booklet page.


h1
{
font-size: 2em;
padding-top: 1em;
padding-bottom: 2em;
}

This CSS description configures the font size and spacing above and below any text tagged <h1>. "em" is a way to specifiy letter size and spacing size. I could have specified using other units of measurement, such as inches (in), millimeters (mm), pixels (px) or points (pt).


h2
{
padding-bottom: .2em;
font-size: 1.2em;
}

This defines any text tagged <h2>.


p.footer
{
position: absolute;
bottom: 1em;
height: 1em;
width: 67.9mm;
margin-left: auto;
margin-right: auto;
text-align: center;
color: gray;
}

This is the definition of the special class of paragraph that will display my page numbers. The position of the page number paragraph will be at the absolute bottom of each booklet page, spaced one em up from the bottom. The paragraph will only be one em in height, 67.9 millimeters in width, equally spaced from the left and right margins of the booklet page. The paragraph text (page number) will be aligned in the center of the page, and it will be gray in color.


ul
{
padding-bottom: .8em;
}

My unordered list will have a space, slightly less than one em in height, after the list and before anything else. This separates my list from other text.


#content
{
line-height: 1.3em;
font-size: .8em;
padding: 1em;
padding-top: 3em;
}

All of my content text will have a line height of 1.3 em, although the size of the font will only be slightly less than one em. This allows a bit of spacing after each line of text, increasing readability. There will be a blank line of space, 1 em in height, after each division of content, with 3 em of space allowed at the top of each division of content. This allows me space to punch a couple of holes at the top of each page. I'll hold my booklet together with a couple of ring snaps.


#content.cover
{
line-height: 2em;
text-align: center;
}

I wanted my cover page to look a bit different that the normal pages. I defined a special class of content division called "cover". The line height will be bigger, and all the the text will be aligned in the center (center justified).


#page
{
position: relative;
display: block;
float: left;
width: 67.9mm;
height: 104mm;
border: 1px black solid;
}

Finally, I defined the larger page on which I will "paste" my smaller content, "notes". Each page will be positioned after the one before it, in a "relative" sequence. The page will display as a single block, always displayed from left to right. The width will be 67.9 millimeters, and height will be 104 millimeters. The page will display with a single solid black line border, only one pixel in thickness.

I can tell you that the size of my "page" was painstakingly derived. I started with an educated guess of 70 millimeters wide and 100 millimeters high. When I directed my browser to show me a preview of how it would look if I printed eight of these "pages" on a single page of paper, the size was way off. I tweaked the size, little by little, until I could fit eight booklet pages on a single 8.5 x 11 inch piece of paper, as displayed by my browser. The final size is the absolute most that I could get by with and still print the pages as I desired.

Step 7: CSS

Here's the CSS all on one page:



div.page-break
{
page-break-after: always;
page-break-inside: avoid;
}

h1
{
font-size: 2em;
padding-top: 1em;
padding-bottom: 2em;
}

h2
{
padding-bottom: .2em;
font-size: 1.2em;
}

p.footer
{
position: absolute;
bottom: 1em;
height: 1em;
width: 67.9mm;
margin-left: auto;
margin-right: auto;
text-align: center;
color: gray;
}

ul
{
padding-bottom: .8em;
}

#content
{
line-height: 1.3em;
font-size: .8em;
padding: 1em;
padding-top: 3em;
}

#content.cover
{
line-height: 2em;
font-size: .8em;
text-align: center;
}

#page
{
position: relative;
display: block;
float: left;
width: 67.9mm;
height: 104mm;
border: 1px black solid;
}


Step 8: That's It!

That's the HTML and CSS code required to print a small booklet page. You can take my snippet and copy and paste it 64 times and end up with eight printed pages, each page with eight small booklet pages. Cut the pages out, punch holes in the tops, and you've got yourself a geek-version self-published booklet.

However...

There is one small detail that is incredibly important.

I recommend that you use Firefox as your internet browser. Firefox allows you to specify the margins of your printed page. Start Firefox, open File, select Page Setup, and set all margins to zero, scale to actual size, landscape orientation, and disable printing of the header and footer. This allows the booklet pages to be at their maximum size and still fit on a single page. I further recommend that you have Firefox show you a preview of the page before you print...you might decide you need to tweak my CSS!

You can get a free download of Firefox here: http://www.mozilla.com/en-US/firefox/new/

Image of man courtesy of http://www.rgbstock.com/user/brainloc .

Image of eyeglasses courtesy of Jean Scheijen: http://www.rgbstock.com/photo/mWk9r3Y/Glasses

Image enhancement by GIMP: http://gimp.org

Image of books courtesy of Zsuzsanna Kilian: http://www.sxc.hu/photo/1219898

Image of photo album courtesy of Billy Alexander: http://www.sxc.hu/photo/1293981

Image of css courtesy of Svilen Milev: http://www.sxc.hu/photo/1083339



Enjoy!

<p>Excellent instructable. Well structured, user-friendly and it flows. </p><p><br>One thing, your meanings for HTML and CSS are ever so slightly wrong. <br>HTML: Meaning - Hyper Text Markup Language, You wrote - Hypertext Markup Language. <br>This is very minor, and it might just be a typo, which happens. <br>CSS: Meaning - Cascade Style Sheet, You wrote - Cascading Style Sheet. <br>Extremely easy mistake to make. <br><br>If the rate button was still there, you'd be 5/5.</p>
<p>Hmmm....So, NomiM1, do you know a Prof. Pickle? Your comment very nearly mirrors that made three years ago by the good professor. Looking back at my conversation with him made me realize that I HAD searched for a concensus of terminology, and my original wording was based upon that. Your comment is not based upon what is actually written in the text (no pun intended!).</p><p>Anyway, have a nice day, with great positivity and constructivity.</p>
<p>Thanks for the corrections...I think I was going off a somewhat shaky memory. I do remember thinking that I wanted to make it clear from where the T came in HTML. I do want to be accurate, and I appreciate the recommended changes.</p><p>Your comments are exceedingly encouraging, especially after some time has passed since I wrote this instructable. I often wish I could spend more time studying HTML/CSS, and keeping up with the latest improvements.</p><p>Glad you liked it!</p>
Excellent instructable. Well structured, user-friendly and it flows. <br> <br>One thing, your meanings for HTML and CSS are ever so slightly wrong. <br>HTML: Meaning - Hyper Text Markup Language, You wrote - Hypertext Markup Language. <br>This is very minor, and it might just be a typo, which happens. <br>CSS: Meaning - Cascade Style Sheet, You wrote - Cascading Style Sheet. <br>Extremely easy mistake to make. <br> <br>If the rate button was still there, you'd be 5/5.
Hello, Prof. Pickle! Thanks for the commendation and correction. <br> <br>I'm not sure who to consult concerning definitions and acroymns. I do want to be accurate, and usually try to gather a majority of opinion by searching the internet. I'm also aware of the impact of time upon words and acroymns. <br> <br>Here's one quick reference that supports the original text of my article: <br> <br>&quot;HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages.&quot; <br> <br>Source: http://www.w3.org/standards/webdesign/htmlcss <br> <br>I notice that your instructables include titles with the word &quot;colour&quot;...could the ever so slightly wrong instances in my article be related to differences in continents? <br> <br>Regardless, I thank you for your encouraging words!
Hello MiltReynolds! I think you're right, it might actually be Hypertext Markup Language and Cascading Style Sheets. I'm beginning to think my source is wrong. I am extremely sorry for the mishap. <br> <br>And although I am in a different continent (Australia), I'm pretty sure that names and the like would stay the same. <br> <br>Nevertheless, I am sorry for the misguided comment. Keep up the good work and thank you for the quick and neutral response.
No worries, mate! (Sorry...slipped out...watching too much TV or Netflicks, I think!) <br> <br>I'm intrigued by your instructable's page, as well. I remember many hours spent (enjoyably, most of them) learning MSDOS and experimenting with exe files. Your instructables are giving me the itch to try it again!
Thank you, you are a more enjoyable person to talk to than the latter. <br> <br>So, you know HTML, CSS, probably Javascript and MSDOS. Anything else in your vast knowledge programming wise? <br> <br>I greatly enjoy talking to you, you always seem to be cheery. <br> <br>Thank you Milt, may peace and prosperity be ever in your future!
The only other area of cyber wilderness in which I've ventured is that of QBASIC. I dabbled in it with my first IBM PC in the 90's. A decade or so later I interviewed for a sales position with a local fabricator of plastic wine tanks. The owner/manager, after asking the usual interview questions, casually threw out a seemingly ill-fitting questing: Did I know how to program computers? I hesitantly described my child-like learning experiences ten years prior, and his eyes opened wide in eager anticipation. I quickly tried to downplay the extent of my knowledge, but he shrugged off all my protests and hired me on the spot. A huge part of my job became the debugging and modification of an intricate program that controlled the company's oven, an enormous machine capable of molding tanks of 1000 gallon capacity!<br><br>I eventually figured out enough of the code to make the needed modifications and fixes...extremely frustrating experience at times, but what a thrill when the code worked!<br>
Wow, it's always a pleasure talking to you, you communicate as if that smile on your profile picture never stops! <br> <br>Who thought that you would get a job on the spot (especially a job that I would have thought had nothing to do with &quot;geeky&quot; stuff) all because of some experience. <br> <br>I know all too well how frustrating scripts that do not work can be. Almost all of my instructables have been worked on meticulously to stomp out all the bugs. And when the code just doesn't work! I have to isolate separate sections and see which one doesn't work, then find the line, then find out what I've done wrong. <br> <br>Well, good luck to you on your future voyages into the unknown.
Simply great! Good work, Milt!
Thank you so much for the encouragement! I was holding my breath, imagining both extremes. Either the post would be seen as too simplistic and not worthwhile (in the eyes of more experienced programmers) or that it would be seen as too technical for a DIY site. <br><br>Your thanks mean a great deal to me!
In programming there's always someone that has no enough knowledge, or too much. But different approaches bring always something. If you drink your 2 gallons-a-day Cool Aid, nothing will be evolved or sophisticated enough. :D<br>Don't be shy. It's a good entry-point and not just that.
I hear you! Thanks!
Cool. Glad to know you use &quot;the gimp&quot; also. Dumb question. You reference two css files, but only have a listing for one css file. Which goes to which?
NOT a dumb question at all! I appreciate your asking for clarity. That's something I did not explain very well.<br> <br> On Step 6 I begin to discuss the css file that I named &quot;html-css-publisher-screen.css&quot;. After resetting all tags to a neutral zero, my document then references &quot;html-css-publisher-screen.css&quot; to set new definitions and settings for my tags.<br> <br> Good question! By the way, my css reset code came from here:<br> <br> <a href="http://meyerweb.com/eric/tools/css/reset/">http://meyerweb.com/eric/tools/css/reset/</a>.<br> <br> You can download a copy of the code I used for this instructable here:<br> <br> <a href="http://miltreynolds.zxq.net/download/html-css-publisher-reset.css">http://miltreynolds.zxq.net/download/html-css-publisher-reset.css</a><br> <br> <a href="http://miltreynolds.zxq.net/download/html-css-publisher-screen.css">http://miltreynolds.zxq.net/download/html-css-publisher-screen.css</a><br> <a href="http://miltreynolds.zxq.net/download/html-css-publisher-snippet.html"><br> http://miltreynolds.zxq.net/download/html-css-publisher-snippet.html</a>
Thanx.
As a web designer. I approve! :D<br>I've done the same thing for some of my projects haha<br>Good work! :D
Thanks for the encouragement!

About This Instructable

7,065views

48favorites

License:

Bio: Grandfather-Christian-husband-father-son-teacher-firefighter-woodworker-lab tech-writer-artist-motorcyclist-forager-sailor-blogger-longhair.
More by MiltReynolds:How To Cook Campfire Planked Fish How to Connect Trailer Wiring: 2003 Chevy S-10 Pickup Break-Away Lanyard Knot 
Add instructable to: