Web Page Design

 

Ingredients:
Either a text editor (such as Notepad in Windows, Vi in UNIX, edit.com in MS-DOS, Emacs in Linux, etc.,) a word processor that is capable of saving documents as HTML files (such as Microsoft Word, OpenOffice.org Writer, AbiWord, etc.,) or a "What You See Is What You Get" (WYSIWYG) editor (such as Adobe Dreamweaver, Microsoft FrontPage, Microsoft Expression Web, iWeb, etc.). It is also necessary to have a web server (or an account with a web server provider) & FTP software.


 

Part 1: Selecting The Needed Software & Getting Prepared

WYSIWYG editors are a special type of web design program that allow users to edit the web page while previewing it at the same time; with this, a website designer can understand how the website will appear to an average person surfing the web. Standard word processors also share this quality, though they do not provide as much freedom as a WYSIWYG editor; a WYSIWYG editor is a combination of an ASCII text editor, standard word processor & a web browser. The downside to using a WYSIWYG editor or a word processor is the fact that they range in price (some cost nothing & others cost a lot of money).

For computer users who do not have or cannot afford to buy a WYSIWYG editor such as Expression Web, or those who simply use a non-Microsoft operating system & wish to use a WYSIWYG editor, there are free & open-source programs available with similar abilities to proprietary software suites. These include such projects as Aptana Studio, Amaya Editor/Browser & SeaMonkey (these editors have been recommended as they are all open-source, free to use & widely available for several computer operating systems). This does not mean one cannot use their favourite utilities to follow this tutorial; any web editor can be used as long as it is compatible with whatever operating system the computer uses, including such office suites as OpenOffice.org & AbiWord (these office suites have been recommended as they are also open-source & widely available for several computer operating systems).

However, one can easily use an ordinary ASCII text editor to create a web page (including text editors made for MS-DOS or UNIX). As a matter of fact, with enough skill, a website can be created in MS-DOS with the COPY command as follows:

C:\>copy con filename.html

Once this command is executed, creating any type of text file (including a web page) is a matter of typing the contents line-by-line (i.e.: writing one line, hitting ENTER, writing the next line, hitting ENTER, etc.) & pressing CTRL+Z once the file is completed. In this case, the web page would have to be previewed using a web browser such as Arachne. Download Arachne here or in the Downloads page.

There are also several options for FTP client software; this is software that lets users transfer files from one computer (the user's computer) to another (the web server,) using the File Transfer Protocol (abbreviated as FTP). They also range in price, much like the WYSIWYG editors & word processors. However, some WYSIWYG editors & office suites include functions that accomplish the same thing, though they do not provide as much freedom when it comes to data transfer.

On the upside, Windows users do not need to search for an FTP client program; they can use the DOS command FTP or use Internet Explorer to transfer data onto a web server. However, since Real-Mode MS-DOS users do not have this ability preinstalled; this is why Arachne can also be used as an FTP client program. A clone of the Windows command-line FTP utility is also available here or in the Downloads page. As for Linux & UNIX users, the BASH command FTP can be used as it is also included as part of the operating system. In any case, some web developers prefer to use third part software such as FileZilla FTP Client (this FTP client program has been recommended as it is also open-source & widely available for several computer operating systems).

Naturally, the user's computer must be prepared to handle internet communications. On Windows, UNIX & Linux-based computers, the support is built-in. However, MS-DOS does not include this as it it has no network drivers & programs included (& FreeDOS only has a limitted number of network drivers available for use, which limits what network cards a computer may have). This means MS-DOS users need to search the internet for the packet drivers, ODI drivers & NDIS drivers needed to make their network cards operate under MS-DOS. The best place to start is by searching the website of the network card's manufacturer (typically, manufacturers make such drivers available to their customers to download for free). In the case that this does not help completely, Crynwr is another option; Crynwr is a company dedicated to providing packet drivers for DOS users & network administrators (typically, packet drivers are open-source, may be freely distributed & modified in any way). Once the drivers have been found, internet connectivity in DOS is a matter of installing these drivers. Refer to the DOS networking PDF file here (it is also available in the Downloads page).

And now, it is time to start designing a web page. One can use this website as a simple guide. However, this is not to say other websites can be used for guidance; such websites as www.virtualnes.com or www.n2flash.com may be used, so long as all copyrights are respected (i.e.: do not copy images, applets, text, etc. from such websites unless permission has been given, either through express written consent or through a software license/terms of usage agreement).


 

Part 2: Creating A General Web Page

When using any WYSIWYG editor, a word processor or an ASCII text editor, creating a blank web page is as easy as clicking on a "Create a new document" button or clicking on a "New File" function near the program's title bar; adding content to the web page is a whole different story. For this, one needs to understand the structure of HTML code.

Here is the code behind a blank web page, as seen by ASCII text editors & HTML preview windows of WYSIWYG editors:

<html> <!--This indicates the start of the web page-->

<!--Contained in these braces are comments which are hidden from the rest of the HTML code in a page-->

<!--This is where the head of the page starts-->
<head>

<title>This is the title of the blank web page</title>

<meta name="variable" content="Contained here is information for a search engine to recognise the website">

</head>

<!--This is where the head of the page ends & the body of the page starts-->
<body>

<!--This is where the bulk of the web page's content is inserted-->

</body> <!--This is where the body of the page ends-->

</html> <!--This indicates the end of the web page-->

When using a text editor of any kind, it is necessary to type the HTML code in the format seen above. Between the <body> & </body> tags are where the bulk of the page's information is kept. bare in mind that all comments will remain hidden, so it is best to type the desired information without angled braces. If this were view in a web browser, the file will appear blank & the title bar of the web browser will appear as the content written between the <title> & </title> tags.

As one would expect, HTML code is designed so that web developers can understand where the title, head & body of a document starts & ends; this translates to an organised document that is easy to construct. However, characters & numbers aren't the only thing that can be inserted in a web page; pictures, applets & files of any type can be inserted into a web page. With a WYSIWYG editor or a word processor, this is as simple as dragging a file, picture or applet & dropping it into the document. With a text editor, a different approach is needed; the <img> tag.

Here is the code behind a web page with an image, as seen by ASCII text editors & HTML preview windows of WYSIWYG editors:

<html>

<head>

<title>A web page with a picture</title>

<meta name="variable" content="Come look at this picture">

</head>

<body>

<img src="picture.ext" width="#" height="#"> <!--This is how to insert images into a web page-->

</body>

</html>

This code would appear as a web page with a white background, containing a picture & the words "A web page with a picture" in the web browser's title bar. Note the <img> tag, where picture.ext is the image's file name (with extension) & where # is the width & height of the image; the width & height can be expressed as either a percentage (with a trailing % sign) of the web browser's window size or expressed in pixels (a simple number without any symbols). Also, note that the width & height of the image may be of unequal values; this is perfectly normal for any picture.

These are the basic codes that one would use in creating a web page; a typical web page usually contains images & text to convey information. But this is only for one single page; a website contains multiple pages linked together. It is easy to link multiple web pages together in a WYSIWYG editor or a word processor, but ASCII text editors require the <a> tag.

Here is an example of linking to other web pages, as seen in HTML code:

<html>

<head>

<title>A web page with a link</title>

<meta name="variable" content="Come and click on my link">

</head>

<body>

Welcome to my website!

<a href="page2.html">Click here to see page 2.</a> <!--This is how to link one web page to another-->

</body>

</html>

This web page shows the title "A web page with a link" in the web browser's title bar, with a white background, the words "Welcome to my website!" & a link (which appears as the blue, underlined words "Click here to see page 2."). The <a> tag reports that the html file or URL indicated by the href= code is to be linked to the current web page. After the <a> tag & before the </a> tag is a line of text that would appear on the web browser's screen as the link. Similarly, instead of placing text, one can place an <img> tag & insert an image; this way, the link will appear in the web browser as an image.


 

With this information, it is easy to expand on the sample code & make elaborate web pages & entire website that contain basic textual & pictorial information; thus ends the basic web design tutorial. However, the most important information is yet to come, especially for aspiring designers who wish to create online game portals & video websites; in this case, proceed with the rest of this tutorial.


 

Part 3: Embedding Applets Into Web Pages

When creating multimedia web pages, it is important to know what is an applet & how they function in websites & web browsers. Basically, an applet is a miniature program; what makes it different from standard programs (otherwise known as applications) is the fact that it can run on any computer with an internet browser & the appropriate "plug-in" software (i.e.: web browser additions, which are used to enhance the functionality of web browsers). Note that all modern computer operating systems are either packaged with these plug-ins or have them freely available over the internet.

Applets are typically programmed in Flash, Shockwave, Java & various other programming languages; these can only operate when both the computer accessing the web page (called the client computer) & the computer containing the website's pages (called the server computer) have their respective plug-ins installed (i.e.: Flash applets can only operate with a Flash plug-in, Java applets with the Java Runtime Environment, Shockwave applets with the Shockwave plug-in, etc.).

There are three ways of embedding applets into a web page; with the <embed> tag, the <object> tag or the <applet> tag. Even though these tags serve the same function & are universal, they behave differently at times; this behaviour depends on both the plug-ins used for the applets & the client computer's web browser itself (for example, Microsoft's Internet Explorer handles applets best when they are embedded using the <object> tag, whereas Mozilla-branded web browsers handle applets best when they are embedded using the <applet> tag).

In a WYSIWYG editor or a word processor, embedding applets can be done automatically, either by dragging an applet into the web page or through the use of a functions such as "Insert web component." However, certain WYSIWYG editors & word processors insert only one of the three possible tags automatically (which isn't always a good thing, especially if the web page needs to be accessed regardless of a client computer's software). This may require editing the HTML code directly, either with an ASCII text editor or with the HTML preview window of a WYSIWYG editor.

Here is an HTML sample of a web page containing a Flash applet:

<html>

<head>

<title>A Flash applet in my page</title>

<meta name="variable" content="Come play this Flash game">

</head>

<body>

<object codebase="http://www.macromedia.com/go/getflashplayer" width="#" height="#">
<param name="movie" value="flash.swf">
<param name="quality" value="high/medium/low">
<embed src="flash.swf" quality="high/medium/low" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="#" height="#">
</embed>
</object>

</body>

</html>

Take note of this sample; both the <embed> & the <object> tags have been used in embedding the Flash applet. The website knows which Flash applet to use through the use of parameters within the <object> tags (i.e.: <param> tags); <param name="movie" value="flash.swf"> designates the file "flash.swf" as the applet to be embedded. This must also be done for the <embed> tag using the src= code. Similar to embedding images into a web page, the width & height of the applet must also be defined, either as a percentage (with a trailing % sign) of the web browser's window size or in pixels (a simple number without any symbols).

However, the quality of the Flash applet's graphics must also be defined, both in the <object> tags (using <param name="quality" value="high/medium/low">) & the <embed> tag (using the quality= code). In either case, the Flash applet's graphic quality must be defined using the words "high," "medium" or "low." The quality of the Flash applet will depend on the quality of the server itself; the bandwidth limit of the web server, the speed of all incoming/outgoing connections to the server, the amount of memory the server computer has & the processor speed of the server computer.

Here is an HTML sample of a web page containing a Java applet:

<html>

<head>

<title>A Java applet in my page</title>

<meta name="variable" content="Come play this Java game">

</head>

<body>

<applet name="applet" code="applet.class" archive="java.jar" WIDTH="#" HEIGHT ="#">
<param name="parameter1" value="value1">
<param name="parameter2" value="value2">
<param name="parameter3" value="value3">A Java VM is needed to run this applet!
</applet>

</body>

</html>>

Take note of this sample; both the <applet> tag have been used in embedding the Java applet. The website knows which Java applet to use through the use of archive="java.jar" (where java.jar refers to the file name of the applet). In any case, as with images & Flash applets, the width & height of the applet must defined, either as a percentage (with a trailing % sign) of the web browser's window size or in pixels (a simple number without any symbols)./p>

There is, however, two important differences between Flash & Java applets. Firstly, most Flash applets typically have two parameters only (one to control video quality & one to define the applet in use,) whereas a Java applet can have any number of parameters to control any pre-programmed variable (such as sound volume, video quality, keyboard controls, secondary files to access, etc.). There are some cases where Flash applets have more than two parameters, but such cases also require a number of extra parameters to be inserted within the <embed> tags. Secondly, Java applets can be programmed to access files on both its web server & a web page visitor's hard drive (providing that the applet has been signed with a proper security signature,) whereas Flash applets can only be programmed to access files on its web server alone. In short, Java applets may be used for complex operations (such as writing & reading files from a visitor's hard drive) while Flash applets are only able to complete simplistic tasks (such as playing video or sound from files stored locally)./p>

Even though the <applet> tag has been used in the previous example to embed a Java applet, the <applet> tag could be completely replaced with the <object> tag (again, this depends on which web browsers are intended to access the applet).


 

Part 4: Putting Everything Together

The above subject matter was only a small, basic portion of the many possibilities available to web designers; even though this information my be helpful, it is not enough to create an eye-appealing, full-scale website. That is why many designers tend to insert spreadsheet-styled tables into their sites; this allows designers to arrange graphics, text & applets in an organised way that appeals to visitors. Some web designers also take advantage of what is called an inline frame (or an IFrame, for short); this merely serves as a method of embedding one web page inside another. Regardless, because this tutorial only provides the basics of HTML, it is highly recommended to search the web for other HTML programming tutorials & resources. One such resource is www.w3schools.com; this website provides a comprehensive listing of HTML tags & how they are used in website design. Of course, the forum has a section for web designers; it is a good place to search for assistance & exchange information regarding web page creation.

In spite of the fact that it can take a while to create a website with multiple pages, it helps to use a design template. There are many available on the internet (some for free & others for a small cost). However, it is quite easy to create a template from scratch, as it is simply one single web page; once this web page has been created, it may be copied & use as many times as needed on a website. As for the general information provided here, what sort of a tutorial would this be without a basic template? One possible (& extremely basic) template for designing a multimedia website can be downloaded here or in the Downloads page. As for the appearance & usage of this template, click here to view it as a video website, or click here to view it as a gaming website.

Regardless of which method is used in creating a website's pages, it must be uploaded onto a server computer after it is completed. Many internet service providers offer a web hosting service of some sort to its customers. However, this usually entails having internet service from said provider to begin with. There is also a decent number of free e-mail account providers who offer basic web space accounts (such services include Microsoft's Windows Live Spaces & Yahoo's GeoCities); these providers are great for beginners who wish to host basic information (such as personal daily logs & images,) but usually tend to restrict a website's content matter & design layout to nothing more than a page full of images & personal opinions (or, in the case of GeoCities, tend to add advertisement banners onto all the websites they host).

There are also two other options; free dedicated web hosts & paid dedicated web hosts. Since these options are solely dedicated to web hosting, the service providers understand that web designers wish to create their sites in any layout they wish (this means dedicated service providers do not restrict users on the design layouts they may use). However, many free web hosting services tend to add advertisement banners onto all the websites they host. They may also limit web designers on the amount of hard drive space a website may occupy, the amount of traffic from visitors that is acceptable for the service & the type of files that are readily available for download. In the case of paid web hosts, even though much of the limits tied to free accounts don't exist, service costs vary & are typically paid monthly.

In all cases, no matter who may provide a web server account, it is always important to read the service provider's terms & conditions notice; such notices tell of what legal rights & obligations a customer has with respect to any website they may produce & make available to the public. Terms & conditions notices also tell customers of any limitations to their accounts (such as hard drive space or the number of visitors that may visit the website) & where to access assistance in case there are any problems.

Once a server account has been made, the web host will typically send an e-mail package which includes all the information needed to access the web server using an FTP client program (i.e.: the FTP location, which communication port it is accessible from, access passwords, etc.). When the server is being accessed through the FTP client program, the server will behave as though it is another hard drive attached to the computer that the FTP program is running on; this means uploading the web pages is as simple as copying them from the computer & pasting them into the server.

Along with the FTP information that the web host will usually send, there will also be some general information on how to actually visit the website (i.e.: the web address that average users must use in order to see the website). Under normal circumstances, the web designer chooses what web address (also known as a URL) is desired & notifies the service provider of this. In exceptional circumstances, the service provider will choose a web address for the web designer. With this in mind, the best way for a web designer to advertise a website is to either send the web address to friends & family through the e-mail (or even through word of mouth) or, if a web designer has an account on other websites or forums, it is very common to see forum topics & responses containing the website's URL as a signature.

 
 
html css