|
The Village Bicycle: basic HTML
I had been meaning to put up a basic HMTL overview page for some time. Here, lightly edited to make more sense as a webpage - is my answer to Gary Weber's query on the subject.
'..I would like to construct a web page..'
Well - first of all there is a lot of hooey about html and design that is almost as tribal and religious as groupware and network specialities. You are less likely to start an argument by putting out that you are in favor of igniting kittens than to provide single answers to most of your questions below. Sooo - whoever is reading this: it's basic advise for someone looking for basic advise.
Yes ASP and FrontPage is wonderful - how anyone ever put up a page without using PHP and active CSS is completely beyond me too.. You are completely correct that - insert your favourite whatever here - is WAY better and certainly less expensive and more in keeping with the wacky gang over at W3C than anything I'm suggesting here.
That said - lets start with basics..
Because of the nature of how HTML developed and the many specialities and commercial interests (AKA everyone from Adobe to MicroSoft to SUN to IBM) who adopted the web into their 'product strategies' by buying seats on the W3C to give voice to their amazing new advances - dumpy old html has been made to benefit from many, many exciting 'features' so as to enhance your internet adventures over the past decade..
In short - HTML has become very much the Village Bicycle and is thought of with about as much respect. I even saw a gig at Dalhousie U recently for a medical facility secretary that required HTML production as a foot note to typing speed.. Arrgg.. However - its still the base compound for everything you ultimately see online - we can think of it like a kind of smart glue that holds a sheet of plywood together - because that is pretty much how it works.
Normally for your first page you would open a text editor and save a file called index.html - although the extension isn't fixed in stone - some servers use just .htm and in some cases, some other file name and extension completely. While index.html is the convention, ask whoever you are hosting your page with what the 'index' page standard is. Then - please consider the following carefully:
<html>
<head><title>my first page</title></head>
<body><p><h1>Music started going to hell when they stopped bringing on the bar cart with the main act..</h1></p></body>
</html>
There is actually something missing at the beginning of our exciting adventure through the ever changing microenvironment that is the HTML laminate - the DOCTYPE declaration. Think of it as a sort of docking ring for space browsers and I have left it off because it's a fairly deep subject and not required to render - basic HTML - although it apparently will be in the not too distance future. I don't use them yet myself - this is deliberate and explained below - but here's the link for valid DTD (DocType Declarations) you can use: W3C DTD. I'd come back to this later if I were you.
Anyway if you look at the problem like the side of a sheet of plywood you'll see that the 'core' - the sad state of the music scene - is layered by a set of opposing 'tags'. You know they are part of a given strata because they are repeated with a closing '/tag' later on. Like plywood there is a difference between the topface and
backface.
<html>
<head>
<title>
my first page
</title>
</head>
<body>
<p>
<h1>
Music started going to hell when they stopped bringing on the bar cart with the main act..
</h1>
</p>
</body>
</html>
There are three core levels of tags - to start with - <html> </html> - which tells the browser 'I am a web page - please stand by'.
We are beginning our journey into the exotic core of our web page laminate at this point and there are no more missing tags. This is not to say that there aren't an awful lot of other tags you can use from here on in - but this is the raw, pristine wilderness HTML your forefathers first saw as they crossed over the TTL BBS Ranges and Gopher salt flats of yesteryear.
We quickly come across our first totem - the <head> </head> tag. As above, used to provide a title for your page - what will appear if the page is bookmarked. But there are of course several other things which can be included for the coming page before it loads into your browser. For example, you often put your Javascript in the head tags as well as any CSS style orders - I haven't included them, but you will get a handle on what the <head> tag is for as you get a little deeper in.. Here is an OK page for stuff on the very exciting and rapidly changing world of the <head> metatags..
Head Tags - http://www.w3schools.com/html/html_head.asp
Then - there is the <body> tag - this tag is where the moneyshot goes - the actual page people see. Here you have your layout orders to the browser.. In the example - I have inserted a paragraph call <p> then told the browser to render the upcoming text using an <h1> style - then sent it some text - then told it to stop rendering </h1> style and close the paragraph </p>..
I then tell the browser that the moneyshot is over (time to light 'em if you got 'em) by issuing a close </body> tag and then tell the browser it's done too with a close </html> tag.. I don't think it smokes between pages - depends on your system I suppose.. Here are a fairly complete list of currently used html 'tags' and their application:
HTML Tags - http://www.w3schools.com/html/html_reference.asp
Beware - there are HUNDREDS of others and this list changes regularly.. Using CSS you can redefine most if not all of the tags listed - but - unless otherwise specified they will work as above, like a plywood strata. They will be read in order when rendering in the browser - and thusly one of the great arguments against putting a advertising banner on the top of your page - your page write speeds may be determined by how busy the third party banner site is..
..How to use or not to use frames for the best results?
Don't use frames if you can avoid it - use liquid tables.. Frames are not usually search engine chummy and thusly, I usually recommend tables - even though they've been depreciated by the W3C. That may be meaningless as frames were once depreciated as well (I think). More importantly - I use them so that my sites realign the text body on the page for all screen sizes and font settings and printer requirements without a horizontal scroll bar. 'Liquid Design'.
Go ahead and change the size of this browser window - unless you are already on 640 x 480 settings - it will simply reformat the text body to accomadate your screen.. Ditto if you change your base font settings and reload (Ctrl R) the page.
Grab a source view of this page and save it to your drive. Chop out the acutal content and try inserting like elements of your own. You'd be surprised how many other webmasters have done it and from where and I don't mind on the whole - if you do use it's table markup to put together a properly liquid page design, I would appreciate a link back. Mostly folks forget, but that's OK - I've swiped a few source codes over the years myself - anyone who says they never have is lying to you..
..Graphic design and layout without getting caried away?
Beginning to end - you are forced to design to your given page objective within the confines of your audience technology - which on the web is as tricky as herding cats.
Most designers take that to mean that they are completely free to do whatever they want and tell the visitor they 'need to upgrade' to view their site and tell the client that they should fix their width at 640px x 480px (which is wrong anyway) or 1024 x whatever depending on their design. This is a fools paradise and one that is increasing victimizing customers and site owners. It represents a failure of design - although a great victory for whatever sales talent is behind the given designers portfolio.
What this attitude doesn't allow for is that there are usually 10's of thousands of other pages that do not require the user to 'upgrade' their browser and most sites that force the user to 'upgrade' are backed out of more often than not.. It's like saying you're welcome to eat here - please go next door and buy that suit and we will make up a table for you while you're getting fitted..
What separates the wheat from the chaff in this biz (at least in my opinion) is the ability to write up one page design that distributes out (renders) liquid and as designed to as many browsers as possible on as many platforms as possible on as many screens as possible using as few and as lightly onerous 'plugin(s)' as possible with as low a bandwidth footprint as possible at the visiting machine. For example, my site renders and streams music in pretty exactly the same amount time on a 28.8 wireless PDA in France as it does here in Halifax..
It looks the same on everything from Netscape 4+ on and 'fails gracefully' back to text browsers without resorting to browser sniffing and redundant pages.. It is printable without chopping off any of the horizontal elements and it supports text only interfaces in the content with basic links.. It doesn't stream music to Web-TV (they block RealAudio - guess who bought out them a while ago) - but - it can feed tunes to mobile phones in England - so it's a trade off..
I have also made a design compromise to use Flash 4 for active objects on the page and line art because I wanted to address some advanced server/page automation and because it is VERY thin for it's total rendered size.. Consider Radio Free Dexterdyne's 'Stickmann' metronome to your left and above - it is 150px (pixels) by 525px 216 colour - yet it only 'weighs' 7k when it transfers..
I use Flash 4 .swf (instead of MX) because it is a compromise that allows for the broadest possible viewership on the page and I include enough links in the text body HTML to allow for folks who don't or can't have Flash 4 installed to get around. I also used PDF for a GMC motorhome manual I keep for my Owners Group because it allows them to take a copy and print it out as needed at whatever repair shop they are stuck at..
In short - I picked three plugins to achieve a desired service - that is the price of admission to my site assets - they are well known and I use older versions of them as it is more likely that folks will already have the plugin(s) to make them work and you can still navigate my site without them and I only put them on after a LOT of first hand research with my targeted user base via NG's and listservers - and even then - I pay close attention to the server logs to see how many visitors are not using the plugin(s) - it shows up as a transfer anomaly.
..Graphic formats and resolution for "best fit" within desired objectives?
bitmap: *.jpg - *.gif - *.png - 100dpi - 216 colour - 8bit.. *.png is very nice..
PNG Bitmaps - http://www.libpng.org/pub/png/
This of course sux in terms of 'photo quality' - so many folks use the boxtop plugin (or something similar) to make it look less raw.
Bitmap Optimization - http://www.home.aone.net.au/byzantium/graphics/btcsafe.html
vector: *.swf - 4 frames/sec for static - 12 frames/sec for animation
I use Flash 5 (which allows a Flash 4 saveas) - I'm staying away from MX for a couple of years to see where it goes..
Macromedia - http://www.macromedia.com/ (you can also find DreamWeaver there)..
However - for quick and dirty Flash animation and such at cut rate prices - although at a great loss of control and power - there is this:
Flash Cloneware - http://www.3dfa.com/
It is relatively easy to use and a bargain at the price - but you want to be saving every change every time because it will corrupt files if it bombs and you should be aware that nothing it generates can subsequently be edited in macromedia flash.. At least last time I tried it..
..Different ways in which photos can be illustrated for on board slide shows?
There are an almost limitless pile of solutions - I use Flash because I can program it to interact with the backend server more seamlessly and reliably - but I would suggest that you look at starting with a free Javascript from:
JavaScripts - http://www.javascriptkit.com/script/cutindex21.shtml
However - you should be aware that many browser clients have shut off Javascript for security reasons and as such - once you get your show up using javascript - you will want to use what you've learned to find something else - which is how I came to Flash 4. I would rather not offer a given feature on a site than have the feature appearently offered - but not working as designed on all browsers and and platforms.
..Discussion of development software to best suit my needs?
I maintain and write most of my back end code using a product called Textpad - about $50 and you will never go back to another text processor again.. Stable and powerful.. I have however built a my entire domain into the backend of my W2K workstation so that I can simply add some text and links and save it - and it formats out to the site as needed using SSI (server side include).. You will not likely be so effectively fettled and will need to use an FTP package to update your site..
I strongly recommend DreamWeaver for creative passes amongst professional developers and for newbies and regular people who just need a site up and don't want to become actual web professionals because it's not a bad overall html sketch pad and it allows for fast layouts and testing.
Once a site is built and tested - it has a pretty good 'update' function that works (FTP's) directly with your site as well and it is very well known and implemented in professional ranks so that if your site becomes the next e-bay - it will not be as difficult to sub-contract out maintenance and upgrades if you have built on Dreamweaver.. You of course don't want that pesky site update interfering with cocktails on the beach and really want to be able to pick up the cell and say "use that little macro I wrote and add 'big sale on prints' to page 3" - then get on with the cocktails..
Beware - depending on your interest and the importance of keeping your site alive - you will need to know exactly what is going on when you use it to format a page.. Otherwise - you won't be able to fix an error if/when it comes up and will be stuck paying someone who does - and any HTML tool other than an simple text editor you use will make errors for you..
On the other hand - all the errors will be your own if you generate using a text editor - which is why I often recommend DreamWeaver when someone finally throws up their hands in despair and asks..
Now html tools like FrontPage and DreamWeaver are looked down on by the birds out there - they are part of the HTML is Village Bicycle crowd though and while I too can pump out liquid tabular HTML with textpad - I'm not silly enough to think it's worth the time to debug hand generated layouts or important enough to brag about knowing how. I have a screwdiver bit for my drill for the same reasons. However - I make of point of KNOWING what it is doing when it's doing it for me so I don't get in a jam..
..How to work with and evaluate various software available?
Very carefully - it takes a great deal of real time and hands on work to learn any given package and several ones will lock you into proprietary display solutions (like flash plugin) that may require your visitor to 'upgrade' their browsers to see your dog and pony. You want to limit that as much as possible and you want to use 'software' (by which you mean Plugin(s)) that is quickly recognizable to average users or are already installed as part of most base system installs (RealAudio came with netscape 4.7 for example).
For both active objects and thin vector graphics (line art) - I've finally settled on Flash (and have locked down at Flash 5 for .exe production and stick with flash 4 for my own site) as I think it's a good tool that works well in design/art phases with DreamWeaver - and I like actionscript's C++ like object structure. Flash 4 is very widely installed - although Flash 5 and MX less so (much less so in the case of MX)..
PhotoShop is the defacto gold standard for bitmap graphics - however it's a very full solution that takes longer to understand than Flash in many ways - so that it really is like using a full Tool and Die shop to make one wood screw.. It's makes great wood screws - but is it worth the time and money?..
I think so - but - it's not a cheap tool (neither are DreamWeaver or Flash for that matter) and you might want to look at how much use knowing how to use them and owning a license will be. What you are then looking at is - can you achieve your design objectives with lesser clone tools and I leave you to google that up as you feel you need to. Older Corel versions aren't bad..
..Considerations to keep in mind as one develops a web page (things not intiutive for the newbie)?
Screen Sizes, the ability for bot's (both good search engine and evil e-mail address harvesters) to read your content and follow the links you want followed unfettered, the ability for your visitor to use a translation page to read your site, the ability for the hearing or sight impaired to access your page content, the ability to navigate your page from a purely text browser (which accommodates bots), the 'weight' of your final page architecture in total (total file(s) sizes making up the page) when rendering and being transferred across low bandwidth connections. Just because you have broadband and they have broadband doesn't mean it's not slower than molasses between you.
The ability to quickly update your site in the event of rapid news or change, the separation of 'the content' from the actual html via the use of SSI now (server side include) so that it is portable, and the likely future requirement to use CSS (cascading style sheets) and XML (eXtensiable Markup Language).
The cross browser problem - the browser version problem - the secured browser problem - the cross platform/cross browser problem (all of which relate to CSS and XML and Javascript) - the popup window/cookie/activeX problem and of course the upcoming wireless device browser problem..
In short - the most important thing to keep in mind is to continually test your site on as many platforms and browsers as possible as far away from where it is served as possible because what you are looking at and how fast it transfers to you are no indication at all as to how it's actually working for the public now or in the future.
..Final Thoughts?
In the end - your website should first and foremost provide something of real content value - after which all the design and art is then in place to support that content because people are not really interested in how slick a particular site looks so much as whether or not it has something they are looking for and how fast it renders to their screen (the World Wide Wait as one wag put it).
Also - most average people still 'print out' information pages - which is sort of a 'don't tell if they don't ask' thing in regards to web design
Thusly - you want to make sure that final design is no more than 610px x 574px in terms of total fixed width items (say two graphic elements side by side horizontally) so that it doesn't clip off when the user prints (which is why 640x480 is 'wrong').. But this limit totally sux, almost more than 216 8bit 100dpi colour - so that is the reason I advocate 'liquid table' layouts and why several folks rip my basic table layout to their requirement.
There is also the question of 'W3C Validation'.
NONE of my pages 'Validate' as W3C compliant and I know exactly why they don't and that's OK by me because my pages still work on every browser out there - which is the objective of 'good design' in my books.. Indeed, several things I have to do to make that happen are in 'violation' of W3C standards.. Which is important to remember because as you go along you too will find something that works great - but is outside the 'standards'..
This is perfectly OK as long as working outside the standards doesn't limit the number of browsers you can render to. For example - there is A LOT about FrontPage and .ASP that is outside the standards - but which doesn't make it render on more browsers.. Whereas - there is MUCH about tables that make it render better on all browsers including IE..
Finally - all designers make compromises to achieve design goals - one of which is how much time you have to invest in making something do a particular trick vs how important doing a particular trick is. This goes to the most important thing of all - you should be happy with the design you put out regardless of any advise above because, in the end, making and maintaining good websites is A LOT of real butt breaking work and you need to feel good about your work to do it well..
In short - make it so it is the best thing out there in your books because despite all the crap you will take from people who think you should do it their way - they are not sitting there making it happen.. Hence my lack of real concern regarding W3C validation - as long as I know it works based on real testing on pretty much all the browsers and platforms out there I want to service..
Ditto - arguments about what I recommend as being good design and tools to achieve it..
Good luck - kick back some links when you get your site up - I'm always interested in what folks are doing..
|