OKbizPromotions - Building a Web Page
HOME | Archives | Powerhouse Theatre | Ozone 2008 Drama Festival | A.C.T. Main Page | EventsBC.ca


Building a Web Site
MS Notepad
File Management
The FTP Program
Updating a file
Funky Chickens HTML help
Decoration
Fonts
Tables
Hex Codes for Colours

Building a web site

A web site is composed of one or more web pages, each of which should have links to other pages on the web site and to other pages on other websites. All your pages are found on your server. Copies of your pages may also reside on your computer. Deleting files from your computer does not affect the files on the server. A file must be transferred to the server by an FTP program such as WS_FTP LE from Ipswitch (Google it, if you want a copy). Or, you may edit scripts using the file manager tool on your server (if one is provided by your host.) If you are using the File Manager, say, at Plesk, editing becomes one step easier. 1. Open the file of the page you want to edit, say, index.html, make the changes. 2. Click "Save" 3. refresh the page on your browser and see what you have done. If you use FTP (file transfer protocol,) there is a necessary extra step - see Notepad below.

Building a web page.

A web page consists of text, pictures and links. A link is a command to a web browser to go to a different source and display that page. A link in HTML looks like this: (a href="http://www.mywebsite.com") My Web site (/a) and is bracketed by pointy brackets not round ones as in the above. The text name of the site is then followed by (/a) inside pointy brackets, not round ones. so broadly speaking a link reads (a href="destination URL")Destination(/a) (I can't use the proper brackets here or the browser will display the link as blue-underlined text rather than as html code.) A web page is written in HTML code (Hyper-Text Mark-up Language) "HTML is made up of special codes that add the effects that make your website colorful, cool, and professional looking." - FUNKY CHICKENS This language consists of tags, or commands, such as "Bold this text" which are bracketed by the pointy brackets that look like little arrowheads > or < These brackets in math are known as "is larger than" and "is less than" The tags come in pairs, "open tag" and "/close tag" The purpose of the tags is to change the appearance or function of the text, pictures, graphics on the page. For example, To write the "bold this text" command the letter b is bracketed at the front of the text to be bolded, and the letter b preceded by a forward slash is bracketed at the end of the text to be bolded. At this point it would be good to see some HTML in use on a page. To see the source code for this, very simple page, place your mouse cursor on some white space and right click it once. Choose "view source code" A window will open displaying the code I used to write this page. The browser displays stuff differently according to the tags I insert. At the top of the page it will say "bracket" HTML "slash bracket" followed by "bracket" title "bracket" What follows is what appears in the blue bar at the top of the browser page. Then comes the "HEAD" which is the page heading. The title does not appear on the web page but the HEAD does. Then comes and important tag: BODY There may be some other stuff in brackets called "Meta" these are terms to describe the content of your page to help search engines (a good idea) So we have established that HTML code is a series of typesetting commands written inside pointy brackets. On some keyboards these brackets are found on the upper case keys between the M and the ? above the comma and the period. Between the BODY tags is placed the content of your page. Open Body is typed at the top of the page, after the HEAD and TITLE and META tags.

MS Notepad

Notepad is the best program with which to edit/build a web page, but any word processor will do. You must remember to save the file as a text file with no formatting, such as indents, italics, tabs, columns, etc. as these will confuse the "browser" (such as, Internet Explorer, Netscape Navigator, Firefox) I find it efficient to have three windows open on the desktop: - notepad - the FTP program and - the browser program, say Internet Explorer (IE) I make the edits in notepad, save it, upload the file to the server, refresh my browser page to wiew my changes. It's that simple, in theory. Uploading a file to the server overwrites the existing file on the server. It is vital to maintain backup files in case you accidentally delete, or corrupt a file. Sometimes it is easier to replace it with an older version, than to figure out what went wrong and to change it.

File Management

Managing the files on the server is vital to the efficient control of your web site. There will be an "httpdocs" folder in which your index.html page should be placed. Browsers look for the index page when someone directs their browser to your site, either by clicking a link on someone else's site or by tyoping your URL into their browser address window. On your index page your will type links to other pages on your website. If there are a number of pages of a certain type, say, "Products" make a folder called "Products" and upload those pages to that folder. This will keep your httpdocs folder from becoming cluttered or overloaded as you add pages to your web site.

The FTP Program

The FTP program will display two windows. On the left will be your computer, on the right will be the server that hosts your web site. Highlight the file on your computer that you wish to move and ensure that the RHS window is displaying the proper destination folder. Then click "upload" and the file will be transferred to the server. Alternatively, you may be able to drag the file from the left window to the right window. When updating a file, first make a copy of the file on your computer. Rename index.html say, as index070412.html inserting the date into the name for easy identification, just in case. Then download the index file from the server to your computer and open it with notepad. This ensures that you are working on the latest version of the index page currently displayed on your site. The same goes for all other pages. Of course, if you are the only one editing your site you can shortcut this process because you remember what you did last and which file it is you are working on. heh.

Decoration

Background colours can be chosen from the list at: Webmonkey Colour Hex codes These colours may be applied to text as well.

Fonts

Fonts, or properly, Font faces, come in many styles. An extensive list may be viewed at: BuyFonts.com Mostly I just use the TrueType fonts provided by Microsoft and invented by Apple long ago. A list of these is on your word processor under "Format." Typing (font face ="Milano LET") text (/font) using pointy brackets, produces text in "Milano Letter" typeface and then there is BROADWAY. Font styles may be varied to add character to your page. Further notes about tags can be found at: FUNKY CHICKENS

Tables


To arrange information, text and or pictures, as in a menu or product list, tables can be very effective.
A table is an arrangement of rectangular cells into which you place data or illustrations, for example, a very simple table:


Item for sale Cost of item
Handbags $45.00 + taxes
Belts $25.00 + taxes

Details about making tables should be studied at Funky Chickens, then try a few. As long as the tags (table) and (/table) are employed you may keep out of trouble long enough to learn how to use them. Useful variations include: making the first column narrow running the full height of the page to enclose a menu as at Vernon Vintners, and making the top row a single cell spanning the page to enclose a header graphic as at: Powerhouse Theatre.

"Necessity knows no law." - Publius Syrus


HOME | Promo Tips | Services | Client List | CODE | E-Mail