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.
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
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.
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...
- Notepad is my editor... I try more
sophisticated software at times, but keep going back to the basics and
simplicity of Notepad. I'll explore Expression Web as one of my next
projects... I'll use it to take screen shots of nicely displayed html
code for this newsletter, but go back to Notepad
afterwards.
- IE7 to explore online websites that let
me look at and copy the html code... if I like a page and it lets me see
the code, I'll check it for ideas. Many today use Firefox, which may
display a website somewhat differently.
- Elements of Web Design by Darcy DiNucci with
Maria Giudice & Lynne Stiles is my favorite book about design and
code. I'm using the 2nd edition of 1998. I use the tried and true
basics...
- Online info about specific website code, as
needed... when my book about the basics isn't sufficient.
- An Internet Service Provider (ISP) to put
my website on... I've been using the
1&1 service for almost 2 years for my papajohn.org site.
I also have some website space at Charter, my ISP.
- Total Commander is the utility I use to
upload and download files (ftp) to and from my website 1&1
server.
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.
A Website Page to
Explore
As 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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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
