Blog
Home
About Us Joyful Action Blog Twelve Steps

Blog

2/8/05
Gathering Information:
I went to the Walnut Creek Library and checked out many books on Computer Programming. I have a job interview for a Trainee position in Information Analysis on February 15. An aptitude test shows that I can do this, but I have never tried and I have absolutely NO IDEA what would be involved. I spent the evening reading such books as "Beginning Programming for Dummies" and the like. I learned about the basic types of computer languages, their various uses, pros and cons, etc. Surprisingly to me, I found this interesting reading!

2/9/05
Deciding to program Joyhappens.com in HTML:
A friend with some computer programming background came over (Thanks, Denis!) to help me assess the Trainee job, to help me understand what I would be doing on the job, and to help me prepare for the interview. As we talked, he decided the best way for me to understand what I was reading was to actually DO it. He said that HTML programming was just about the easiest, and when I told him that I have two unformed websites called Joy Happens (where my brother made marker pages), he immediately said that I should design my website and then program it in HTML! I was taken aback (learn to program and implement it in less than a week!?), but he said it was easy and he was there to help me, so...
Planning the site:
We drew out a plan with a home page and four other pages. There would be links going across the bottom to each of the four pages. Once we had this simple basic design, it was time to begin!

Viewing the Source Code:
We went to Joyhappens.com on the Internet, to view the Source Code (which my brother had made as a simple page marker). Typing "Joyhappens.com" into my Internet Explorer web browser, we got to my website. All that we saw on the website was a black background with large white lettering which said, predictably, "JoyHappens.com." By clicking under the "View" column and selecting "Source," we could see the programming source code my brother made for the page marker. The source code for that page was very short and simple, only about 20 lines long. (If you want to see that original page marker and its source code, you can go to my OTHER registered site which I did not update, which is JoyHappens.org That was what I started with except for the change in the wording between .org vs .com.)

Working with the source code:
I copied that source code as it existed into a text only file using a TextEdit Application which came on my Mac. For some reason, Denis wanted me to save it as a file with .HTML afterwards. The Textedit program already saves things with .txt afterwards, but by saving this original text as "Index.HTML" and then clicking on the "do not append" button after asking it to save with that name, it agreed to save it as an HTML file. When I click on that file, it opens a fake Internet Explorer window (because it is an HTML document), which then shows what the web page looks like. Then to get to the text file itself (the coding rather than what it looks like), I go the the TextEdit application and open the recent document titled "Index.HTML." Evidently, the default "home" page is always "Index.HTML" for web pages, so it's a good idea to have a file called that. I refer to the Index file as the Home page, or Home. Each time I change something on the Index file, I save it, and then I go to the Internet Explorer page and click on the refresh arrows (in the tool bar) to see what it looks like. (Note: the first title which appears in the programming text is NOT the title which appears on the web page, but rather the heading of what you are looking at! I had a difficult time keeping the windows straight until I learned to rename that part so that I knew what I was looking at!)

Changing the color:
The most obvious thing to change first was the color, because I definitely did not like black and white. I Googled something like ["text color" HTML] and hit a resource which explained the color system (Hexcolor) which has six digits, two corresponding to Red, Green and Blue (sometimes nicknamed the RGB system). It had a chart of colors possible and so we bookmarked that page so that I could refer to it. Then I began experimenting with the colors, deciding to have a yellow background with an orangy-red text for the home page. The HTML programming was fairly clear on that, with the words Bodytext, and BG color for the color of the background. There are also colors for the links, the visited link (Vlink), and the links when clicked on (Alink). My brother had all of those things in the original page marker, so what I did was change just two of those to change the text color and the background color.

Font and font size:
There are many fonts which are universal, and many which are not. Eventually, I want to have a logo which appears instead of a font. Sure, I could choose a font which is closer to my personality, but I decided I have other things to work on. Most people have a default font for HTML, and also a default font size. I used a text font size of "3" for basic text, and for titles or headings which I wanted to appear larger I used "+X" in which x is a number between 1 and 5 which increases the font size from the user's default font size. I was not happy that the difference in size from "+3" and "+2" were not something I could control, but this is a five day web page!! I have to get this finished by Sunday so that my brother can put it on the Web!

Layout and Spacing:
The layout and spacing of the web page is not controlled by the text spacing in the program. The programmer spaces items in the programming in order to make it clear and understandable. (You can make your programming text simpler to read, proofread, and understand with logical spacings and indents. I know I still need to clean some of this up on my website for simplicity and uniformity.) My brother had used "BR" to indicate breaks, or spaces between horizontal segments. These marks "<" and ">" are used on either side of the "BR" to give a command to the computer. I can't print them that way here, or the computer reads it as a break! The "<" and ">" are going to be symbolized by brackets "{" and "}" in the rest of these writings, so that at least something will print. (Things to work on...) There are other ways to add breaks for paragraphs and lines in HTML, but I pretty much continued using the "BR" method, deleting or adding "{BR}'s" as needed.

Details:
I learned that details of how the information appears are extremely important. HTML programming must have "tags," which I like to think of as like sandwiches. The tags appear before and after the text (or whatever you want to appear in the website), like the bread around a sandwich, and tell the computer what to do with that text . The commands must be inside this type of brackets "<>" both before and after whatever you are doing. Often, the end command is exactly like the beginning command, except that there is a back slash "/" inside the bracket before the command.

A simple example of the tag detail and how it works is the command to center some text. You simply enclose the words "CENTER" inside the brackets before the words you want centered, and then place the end command with "/CENTER" in the brackets after the words you want centered. Capitalization does not matter in the programming, but I used all capitals for most of the commands so that they would stand out, as my brother and other informational books had done. As I mentioned before, I have to use a different kind of bracket to show these examples "{}" in order to get something to print, because the computer reads "<>" as commands.

The command tags for centering text, then, with my substituted brackets "{}" for the real ones "<>", would look like:

{CENTER}
Whatever Text or Graphics you want to center
{/CENTER}

You cannot overlap the tags (or sandwiches). In other words, a command within a command must be a complete sandwich within a sandwich. Or two commands can be side by side. But you must not overlap the starting and ending commands with those of another command. This is a painstaking detail as is making sure that all commands have both a beginning and an ending tag.

Inserting a "Table":
The next thing I wanted to do was to get four links to go across the bottom of the page. Rather than create the links first, we decided to type the wanted text first, so that it would appear across the bottom of the page like a link. The only way Denis knew how to make spacing like that was to insert a table with four columns. (Note to self: There are probably other ways to do this. I am suddenly becoming aware of why they might want to train someone for a programming job from scratch. Certainly people with experience have found ways of doing things which work, but may not be the only or the best ways--sorry Denis!) We Googled something like ["insert table" HTML] and got a tutorial on this. By simply adding {TABLE} before and {/TABLE} after, we could add a table. To create the one row, we used the {TR} and {/TR} tags, and then got the details of the text in each column of that row to be in interior sandwiches using {TD} and {/TD}. (Since our "table" is only one row, it would seem that using both "TR" and "TD" would be unnecessary, but I'll have to find a better way later.) We centered the whole table using the centering tags described before.

Layout Spacing of the "Table":
I experimented with cell padding, which makes the spacing between the columns of the "table." Through trial and error, I got a cell padding of 38, which seemed to look right.

By consulting a book I checked out, we figured out how to add the links, but we did not have time to do it today. We spent about three hours working, and then Denis had to leave. I was VERY happy about my website, what I had learned, and the prospect of what I could do on my own at this point!

2/11/05
Now my programming was completely on my own. I used the files we had created, and it all worked! I used some books (in particular, one called "Visual QuickStart Guide: HTML for the World Wide Web," by Elizabeth Castro), plus online resources, plus my own trial and error, and had a lot of fun creating my website.

Adding the links to the Table:
By saving four HTML programming files plus the original Index.HTML file into the same folder, I now have five HTML files in that folder. By adding the sandwich tags {A href="X.html"} and {/A} to the inside of each of the TD tags, each link was created inserting the name of the HTML file where the X is. For instance, the link to the Index file appears as {A href="index.html"}, the closing tag is simply {/A}, and in between are the words that I want the user to click on. The whole link, then, is
{A href="index.html"}Home{/A}
where "Home" is the word the user clicks on to get to the link, and "index.html" is the file the link connects to. Now that there are clearly five pages in my website, I decided to add a fifth "column" to my "table," and to make it appear the same way at the bottom of each page. I will not worry about the redundancy of having a link to the same page you're already on. As soon as I really have the table the way I want it, links and all, I will copy it to all of the five files identically, so that I don't have to keep updating all of the pages with each revision.

Changing the color of the links:
I did not like the link colors which my brother specified particularly, though I did like one of the colors. I chose different colors for my links for each page, and then made the link color correspond to the color of the text in that particular page. Sometimes, I only have the large text with the page's overall color scheme, choosing black for the text color if I think someone might be printing it out or get tired of reading in the other color. Through experimentation, I discovered that I could specify the color inside the link tag (a font color tag sandwiched within the link sandwich), and that this would override my brother's global color scheme. So now the link for the Index file specifies the color of that link and appears:
{A href="index.html"}{font color=#FF6633}Home{/font}{/A}
Unfortunately, because I have overridden the link colors in this manner, I no longer get a different color for links which have been visited. I will have to figure this out later, because I would like to have visited links become a different color.

2/12/05
I had to work on lots of text items today. I wrote most of the About Us and Blog documents, plus much of the other text for the other pages. I will have to insert it all in the correct pages and get it to have the layout and spacing I want. Then, I'll have to proofread all of the pages and finish changing the things which are still undone concerning text and colors. Then I'll have to test everything before giving it to my brother to put up. He needs at least a couple of days, so I MUST finish this tomorrow.

2/13/05
I have been inserting text into my various files today, and will clean them up as mentioned above. One last thing I hope to do is to insert links in the text on the About Us page to the various sections, to change a few more colors of texts and things, to standardize the before and after links, and maybe if I get really ambitious, I'll try inserting a link to the Joyhappens.org actual site up at the top of this Blog. Tonight when I finish (and I MUST finish!) I will email the five files to my brother, who will put them up on the Web. He said he would give me access to my web page so that I could do my own updating, but we will set all of that up after my interview. I am grateful to him for doing this on Valentine's Day!! (He wouldn't let me come over while he was putting it on the Web, though, saying it was too simple to bother.)

I can't wait to learn more about HTML programming and other computer languages! I have found this very exciting and creative!

I am hoping to convey my enthusiasm, my logical and analytical thinking, my communication skills, my creativity, and my teaching abilities by documenting this whole experience. We'll see if it works. I really hope I get the job. At any rate, it DID introduce me to the
JOY OF COMPUTER PROGRAMMING!!!

Home
About Us Joyful Action Blog Twelve Steps