Websites with Pico
Ken Guest, ILUG website maintainer
more info. @ www.linux.ie/linux-ie-people.html
- Well, not with pico but any text editor you want.
- about HTML, optimisation, server side includes and search engines.
- not about cgi, editor specifics or scripting.
There are several advantages to creating websites with text editors:
- You can specify exactly how you want your site to look.
- Ensure the correct tags are being used - some infamous office applications have a tendancy to convert files to
html inaccurately, making you spend just as much time correcting their mistakes as you would converting the file by hand.
Basic HTML
HTML
- Hyper text markup language - standard of this overseen by w3 committee (www.w3c.org).
- up to html version 4.
documentation of all ratified tags are available at the w3c website.
test site for the big bad 2 (Exploder & Communicator).
- Why test?
Testing ensures that you're website looks good on all browsers, some tools even check that the site is not difficult
for impaired people to browse.
- there are a number of tools on the web that will do this for you, NetBobby is one.
others are also available, there is a good suite of tools available from the
link exchange website (www.linkexchange.com).
Optimising HTML & Graphics
What can you optimise for?
- Speed:
- Improve down load time:
- not much you can do here regarding html
- graphics can be optimised for download speed
don't include too many large images inside one page ideally the total size of a webpage including images shouldn't be more than
40 k.
if you must include an image with color fades - fade vertically from top to bottom or vice versa.
be innovative - use figlet!
Try not to exceed at bit depth of 8, ie 256 colors
- cut the crap - don't use a fancy applet for the sake of the technology or fancy plug-ins just because you can.
unless, of course, the objective of the website is to demonstrate the cutting edge technology.
- Improve processing time
(time it takes for the browser to interpret the html page while/after
it has completely downloaded).
- specify dimensions of images used.
- break down large tables into smaller ones. Most webbrowsers have to wait until all table code has been loaded until the
the table can be drawn, breaking tables down reduces the delay.
- To look good on any browser:
- Abide by the w3c ratified/approved tags - if possible the less recent the tags the better.
Not everybody likes to upgrade their browser.
- give alternative text for images, this is essential for browsers that absolutely do not support graphics (such as lynx),
for when you switch off 'show pictures' on the browsers that do and especially for pages with image maps.
- <tr><td>News<br></td></tr> displays better on browsers that don't support tables, than the
same line of code without "<br>".
- Common denominator/ more widely supported
use
- html for presenting text
- gif and jpg for graphics
- javascript and java applets for browser side/processed interaction
- hex. rgb color codes instead of named colours, e.g. C0C0C0 for grey instead of the word 'gray'.
Convert pure rgb values to hexadecimal with http://www.dsphere.net/rgb2hex.html.
- To look good on a specific browser:
- Should only be done if you can be guaranteed the [vast] majority of people using your website use that browser.
- how can you tell? - statistics from the server log files - the 'Agent log' or from sites such as www.superstats.com can tell
you of the different browsers that are being used to view your website.
- Remember:
there's nothing more annoying to be told your browser is too old or is the wrong one to see the website as it should be.
- how do you do this? - go to the browsers own websites.
Netscape Communicator and Microsoft Explorer have their own websites documenting their own browser specific tags.
SSI
server side includes
- These are instructions interpreted by the webserver that can make coding webpages much more efficient.
- May need to switch on ssi processing.
- May also need special access writes placed on the html files.
Examples
- <!--#include file="filename"-->
<!--#include virtual="/filename"-->
Includes files into the html output of the server, using this at the moment for linux.ie.
If we decide to change the colour scheme used at www.linux.ie only one file needs to be changed. The virtual directive is
used when the file being included is not in the same as the html file containing the directive.
- <!--#include flastmod="filename"-->
Prints the time of when the file was last modified, also used at the ilug website - there is no need to
manually update the "Last updated: 12 October" details.
- <!--#config timefmt="%D %r"-->
This is used to control the style that the time is printed by the flastmod directive and should precede that directive to
work. There are various styles that can be used.
other directives are also supported, documentation of them should accompany the server documentation.
Search engines, meta and heading tags & linking
How do you find a website?
through search engines, links from related sites and word of mouth (news groups).
search engines
- register your website with the search engines. You can do this individually for each search engine or use www.submit-it.com
which can register your site with 50 or more seach engines.
- search engines obtain information about your websites in different ways.
Some use your meta tag details, others use the details that you are using as headings.
- check your ranking
changing your descriptions of the website should improve its ranking, don't over do it though - some search engines have been known
to demote sites that agressively overuse descriptions that people could misinterpret or that their webbots decide do not relate
to your website.
meta,title, and caption tags
- <meta name="description" content="webpage outlining "Websites with Pico" talk at Intersoc's 98 by linix.ie's Ken Guest>
Some search engines use the description meta tag for describing webpages in results webpages.
- <meta name="keywords" content="websites, design tips, intersocs 98">
Search engines use the keywords meta tag for indexing webpages, the keywords should be comma delimited.
- <title>Websites with Pico - Intersocs 98 talk by Ken Guest</title>
Most search engines use the title of the webpage as the captioned link to that page in their listing, others use the words
during the indexing process.
- <h1>Websites Using Pico</h1>
Some search engines use the heading tags during the indexing process.
Linking - www.linkexchange.com & webrings
- Swop links and arrange reciprocal with people that have similar websites.
- linkexchange.com tries to automate this for you to some extent.
- webrings are other ways of generating links between similar websites.
|
