PapaJohn
 
Newsletter #147 - April 28, 2006
Hack a Website Page
 

 

Much of today's computer action revolves around the internet... and the future holds more and more of it. Thinking of those I know, just about everyone has an inernet service provider, most have higher bandwidth broadband speed, some have websites, but few know how to make or maintain their own website page(s). Maybe this newsletter will help you jump in. You have everything you need... 
 
You could spend time reading books and doing online research, or jump right in and start hacking... starting with a website page already online and working. That's the route I prefer, 'hacking'
 
In my somewhat dated Webster's dictionary the first meaning of 'hack' is to
 '... cut with repeated irregular or unskillful blows...'.  Yes, that's me and website development!!!
Today's Wikipidea says one meaning of 'hacker' is a software designer and programmer who builds programs and systems that garner the respect of one's peers. A hacker can also be a programmer who hacks or reaches a goal by employing a series of modifications to exploit or extend existing code or resources. Yes, that's me again!!!
 

 
Website pages you respect are those to hack... this post on Mark Coffman's WindowsPhotoStory.com forum had me looking at a website page used to automatically play a large size Photo Story. It was a minimalist design, sleek with mostly blackness, nothing much more than the playing story... here's the link to the page.
 
Revelations
 
With the broadband capibilities expanding and my thinking more and more about putting high quality photo stories online, the page got a moment of respect followed by a half hour of hacking, to get it up and running on my website in this new page
 
Photo Story 3 - Distributing
 
I invite everyone to now hack my page and make your own. I'll help you the best I can by providing some info about the html code... one of the languages of the internet... that makes the page and story display on everyone's browser (except Macs that can't see stories because they can't get the needed codec).
 
That lead me to this newsletter, to present my irregular and unskillful blows. It was quick, easy, fun, and spontanaeous.
 
Before getting into more details, here are...
 
... a few notes...
 

 
Notes...
 
Microsoft Expression... the new encoder will be released on Monday... by the time you read this, one of these links might lead you to a download.
 
Expression - Intro/Overview
 
Expression Media Encoder
 
 
Vista Corner
 
The Vista Readiness Advisor wouldn't get through checking my XP laptop until I disabled the Norton protection system. With that off, the advisor told me the system won't run the aeroglass feature of Vista unless I upgrade the video card (very unlikely event).
 
Sticky Note... Making Movies with Vista! a six page article in the Spring 2007 Special Edition of MaximumPC, is on bookstands now to May 29, 2007. Starting on page 78... the article covers the movie making process from camcorder tape to viewing on a standard video DVD.
 
 
Microsoft Home Magazine
 
Cindy Waxer, a writer for the magazine interviewed me via phone on Wednesday... for an article about Movie Maker 2 in an upcoming issue.
 
 
.... back to the main topic...
 

 
Website Tools
 
The tools I use to maintain my website are...
My Firefox browser opened the page we'll be using, but said I needed a missing plugin for the Windows Media Player. That was followed by a statement about a plug-in not being available, with an offer for me to set it up myself. That's enough for now... as I use IE7, I'll leave the rest of this story to those of you who use Firefox.
Firefox
 

 
A Website Page to Explore
 
View SourceAs I've already hacked the page with the embedded player, let's walk through my page so you can better understand what it reads like now, to hack it further for your use.
 
Start by opening the code behind the page... click anywhere on the background space or regular text of a page... not on a picture or a link. Choose 'View Source' and the code for the page will open in Notepad. Here's the link to the page to use.
 
Photo Story 3 - Distributing
 
Once open, save it to a folder on your hard drive, as you won't be able to make changes to my website page. Your page should be just as functional but without things like pictures and a story file. You'll need to add your own.
 

 
General Notes about a Page of Code
 
The info might look pretty unorganized and messy in Notepad.... try to ignore all the extra spaces and the overall structure... your browser ignores them as it assembles the page from the essential code, treating the extra info as just background noise..
 
A single space is important in many cases, like the separation between two words. But beyond the single space, more spaces don't change a thing. Put a dozen spaces between two words and your browser will use the first one and ignore the rest.
 
Software that specializes in making web pages does a better job than notepad in displaying the same info in a nicely formatted way. For my screen shots of the code, I'm using the new Expression Web software... which gives the code line numbers, some color coding, structure (things like indents and paragraph splits), and even tips on what needs fixing. As I don't have such tips in Notepad, I obviously ignore them, yet browsers seem to know what to do.
 
Let's go through the page in sections.... above the header, the header, the body, a table, the embedded player, some text, and the closing. I'll show the code, make some comments, and show the part of the page that my IE7 browser displays from the code. Different browsers on different systems may see it differently.
 
In html language, tags are used... they start with < > characters, and need closure with </ > characters. For starters, the tag of <html> is the first thing opened, and the last thing closed... scroll all the way to the bottom of the page to see the closing </html> tag.
 

 
Above the Header
 
I'm not sure who this part of the page is for. Maybe it tells the browser what kind of code to expect. My website pages don't have anything above the opening <html> tags.
 
DocType
 
This link is a reference site about the language noted. It says the version of code is known as "loose" hypertext markup language. It has info about a hundred or so tags that constitute the language. The page we're looking at uses 16 of them.
<html>
<head>
<body>
<center>
<table>
<tbody> - table body
<tr> - table row container
<td> - table data cell
<img>
<a> - anchor for a link
<div> - a defined part of a document
<object>
<param>
<font>
<p> - start new paragraph
<hr> - horizontal line
There's no need to study them unless you get stuck on something and want to get some insight into what it means. Hacking usually means making an educated guess at a change, and then seeing if the browser view of the page confirms your guess. If not, undo what you did and try something else.
 

 
the Header...
 
...starts with <head> and closes with </head>... a header is info for things like search engines, not anything that shows up on the page being viewed in a browser. It could say anything. My header is tied into last week's newsletter, where it was first used. 
Header
 

 
the Body...
 
...is where the action is... the things you can tweak as you test the page to see if you want to use it, and turn it into one of your own.
 
The body starts with the <body> tag.
 
Some or many html tags can have more things in it... optional settings such as specific colors to use. If you don't select things like that yourself the browser will use its defaults.
Body Opening
The body ends when you see the </body> tag all the way down toward the bottom of this page.
 
As the page is just about all black, you know by reading the code that the RGB colors of zero mean there is no color, so it's as black as it can be. As the scale of RGB colors goes from 0 to 255, change them all to 255 and it'll be a pure white page. Make each of the 3 numbers different and you'll have some kind of color.
 
Some tags use, as the links do, colors in hexidecimal system numbers, not RGB... they are the colors of links on the page before being viewed, during viewing, and after viewing so you can tell which ones you've used.
 
Here's a website to convert RGB to hexidecimal colors, or vice-versa.
 
Andy Langton's Color Converter
 
Here's where things get interactive. I have at least a couple windows open, moving back and forth between them. In Notepad, I'll tweak an item in the html code for the page, save it (Control-S keys), then press the F-5 key of the browser to refresh the view to see what happened.
 
If you like the change, keep it... if not, change it some more or move on to trying something else... over and over as you hack your way through the page.
 

 
a Table with 3 Images
 
This is the first thing you see on the page after the blackness of the body. It's called a table as it has cells of info. In this case, one row of 3 cells, each one holding an image. On many of my website pages I have a table with a single cell holding my commentary about the page, with text and pictures mixed. A cell isn't limited to a single thing like a picture.
 
The table is centered on the page, with the 3 boxes each getting 1/3 of the overall table's width of 800 pixels.
 
The page I hacked it from used the table for a couple controls, as it had hidden those under the player... back, wait a bit, and play again... I put images in the boxes and used the two controls to simply refresh the page if pressed.
 
If you don't understand what a different setting will do, change it and take a look
Table
My images are usually jpg or gif... gif if I want to use transparancy of part of it, like for these. 
 
By the time I finished with the table, the images used for the 3 buttons had been replaced by 3 of my own.
Tweaking Code
 

 
the Embedded Media Player
 
Here's the part of the code that embeds the Windows Media Player... don't change anything that you don't understand... or change anything you want if you don't mind strarting over from your last backup.
 
My sample story is 800x600 pixels.... I started with that, but saw the code to embed the player was about the overall player dimensions, and needed room for the player controls and displays at the bottom. The site I was hacking from didn't make the controls visible, but I wanted them. 
 
I measured the amount needed as 68 pixels high... that's how I got to the 800 width by 668 height. The video actually expands to fill the player size, and will look distorted if you stay too far from the pixel dimensions...
 
You can see in the code the player is associated with some Microsoft site.
Player
 
The section in the center above has the settings that effect the viwing... I'm able to change, even remove the embed section at the bottom totally, without any apparant change in performance. 
 
I don't know what the bottom section does, but as the page is working OK, I tend to leave it alone. The better hackers who follow me can make things right.
 
Player
 

 
some Text and the Page Ending
 
This is the final part of the page as it is today. Some text under the player, followed by a horizontal dividing line.
 
Verdana is my standard text, an older tried and true good looking font for web pages... the 3 fonts that follow it tell the browser that... if the system doesn't have Verdana, use Arial... if not that, try Helvetica... etc. It's the priority sequence for font types the browser should be following. You can change it at any time with a new font tag.
 
Size 3 is what I usually use... smaller numbers make for smaller fonts... try changing the number and use the size you prefer.
 
For lines like this, higher numbers for the size make thicker lines... my site is full of lines that are zero to 4 in size.
Text
One of the features of Expression Web is the squiggly underlines. Put the cursor over any of them and a 'tool tip' will give you advice. For the one I'm pointing to the tip is that HTML 4.01 Transitional code doesn't permit use of the attribute 'color'.
 
OK, I'll try changing it to red anyway... and it now looks red. Maybe it means that page isn't really in that language. We learned at least that Expression Web reads that first line of the page.
 
Here's the bottom section of the page... with the text still in white but the line changed to red.
Text
 
At the bottom of the page, the </body> closes it... followed by </html> to end the web page code.
 

 
Conclusion and Closing... and What's Next?
 
Website's are easy and fun to do... if you haven't tried one yet, there's noting to lose but a little time. Your ISP already gives you some space. This page would only use a few MB, mostly for the story. If you don't have that much space, put the story on YouTube and embed the YouTube html code in place of the player code above.
 
 
Have a great week and enjoy your video work...
 
PapaJohn