Computer Concepts and Applications – Designing Web Pages

Computer Concepts and Applications – Designing Web Pages

• Designing The web pages

Introduction:

WWW, world wide web,is a system used to find and access different internet resources. it uses hypertext to cross-reference or link related resources anywhere on the internet. HTML(hypertext markup language)is the language used by the Web to define and display its files. These files can contain text, or multimedia. HTML files are ASCII text files that contain the text to be displayed and the markup tags that tell how to display them. Web pages are created using HTML which stands for Hyper Text Markup Language. All web pages whether big or small, have to be developed in HTML to be displayed in web browsers.

6.1 Web Page:

A web page or web page is a document or resource of information that is suitable for the World Wide Web and can be accessed through a web browser and display on a monitor or mobile device. This information is usually in HTML or XHTML format, and may provide navigation to other web page via hypertext links. Web pages may be retrieved from a local computer or from a remote web server. The web server may restrict access only to a private network, e.g. a corporate intranet, or it may publish pages on the World Wide Web.

6.1.1Page Size:

Overall web page size may be considered from 2 factors: web pages and web page width. Web pages today are either 720 pixels wide or about a thousand pixels wide. Pages created at 7420 pixels wide can just make it when printing in standard printer mode- portrait and can be fully seen on monitors / screens setup at 800 wide. Wider web pages require the viewer adjusting the printer to landscape mode if they choose to print it. If web pages are created wider than 720 pixels, anyone with a monitor setup of 800 pixels wide will have to scroll right to see the entire page and that proves an inconvenience to the web page visitor. If the setup of web page is at a width of 720 pixels, users with wider screens can close down part of the screen to they can see other items on their screen at the same time which many do, but they would not miss any part of the message posted on the website. If designers are designing for 1024 pixel wide monitor use, the scroll bars are on the right and left and 80 pixels wide are to be deducted so that a page design should only be 944 pixels wide. Viewers will need to print the web page in landscape mode.

6.1.2 Page Type:

There are many ways to classify web pages.One simple way is by the focus of the page. Is the page primarily a content page, a navigation page , a task page ,or some mixture types. Most pages tend to be some mixture, but certain pages,like site maps , are purely navigational,and some deep content page in site may be nearly all content based.most pages even home pages will focus on content ,navigation , and tasks to varying degrees .within the broad category of navigation oriented pages ,there are further classifications that can be made, users tend to view entrance and exit from a site as important steps.

Content pages:

Content pages are those subpages that are very focus on content presentation. In some sense ,a content page is destination page.often they are the leaf pages in site tree and represent the “bottom” of site .Like other subpages in a site, a content page will probably have some navigational elements , lest it become an orphan page.the layout of a content-focused page will vary with the content presented,but it tends to take cues from ancestors , pages, such as main section or home pages. Often , sites tend to get less visual the deeper in , but this is not necessarily hard and fast rule.common content pages found in commercial sites include things like press releases , product specification,biographics, customer testimonials ,technical support, documentation ,news articles , fianancial reports, leagal informations, and on.personal websites might have stories , resumes , poems,and family trees,while educational site might have syllabi, homework assignments ,and presentations. Other forms of site might have document types completely unique to themselves. The reality is that there are potentially as many types of content pages as there are prople in the world.

Navigation-specific pages:

A variety of special navigation-focused pages,beyond home pages or main sectional pages,can be found in many sites. Two of the most common special navigation pages are site maps and site indices. A site map is used to provide a structural overview of a web site,while a site index provides a list of site’s content organized alphabetically rather than structurally. A search page is the another common navigation-specific page.

Search facilities generally include a query page, result pages and ideally, a help page. C) FAQ Pages:

Frequently Asked question or FAQ pages are common types of document on the internet. The basic idea of a FAQ page is to provide concise answers to common questions in a single document, so that a user doesn’t have to hunt all over a site for information. FAQs are often formatted as a single, long, scrolling document, with an index of questions at the top with links from each question that jump the user down the page to the appropriate answer. An example of a typical FAQ is shown in figure. There may be some question why FAQ files jump up and down a page rather than link to individual files. The main reason is that users will want to print the entire range of question for future reference. D) Privacy Page:

A particular class of Web “Legal” pages that has garnered much attention is the privacy statement page. Many sites collect sensitive or personal data from users, and what sites do with this data is of particular concern to many users. Because of this concern, which is often well founded, sites should provide a privacy statement that indicates what any collected data will be used for. Links to this statement should be available throughout the site and be prominently displayed in any data collection pages. The design of this page should be like other legal pages, with only basic navigation and graphics limited to those, like logos or colors that identify the organization. The privacy page may also include icons associated with and links to various organizations, particularly if site is built to follow some industry standard. E) Contact Pages:

A contact page provides information for or evens a form contacting the owners of a site. Usually a contact page will provide numerous methods to contact the sites owners, ranging from a simple e-mail address phone number to a form or even an instant chat service.

6.1.3 Page Margin:

Cascading style sheets allow designers to enhance appearance of company’s website surrounding content within boxes or containers of empty gapes or whitespaces. These content containing boxes are standard HTML page element like divs, paragraphs, heading or ordered list elements. The margin CSS attribute allows them to designate the distance for all sides of content box or also, it can be specified a different margin for the top, right, left and bottom sides. Margin distances are measured in percentages, pixels, points, centimeters and ems. Margin can be added to content boxes by inserting an in-line CSS style. The following are some steps are to add margins to a web page.

Step 1:

Launch the Notepad plaintext editor. Load the HTML file for the Web page for which margins are to be added.

Step 2:

Type style=”margine:10x;” inside of any <div> or other tag that is to be created margins around. Changes the 10px margin value to a number that suits the design of the web page. <div style=”margin:10 px;”> in this example, a margin 10pixels wide surrounds the div on all four sides, this works for heading <h1> to<h6>,<p> and <li> tags as well.

Step 3:

Type the following inside of any <div> tags you want to create margin around:

style=”margin: 10px 0px 5px 0px;” Change the numbers to suit the layout design. The first margin is the top margin. the second number is the margin on the right. The third number is the margin for the bottom side of the <div style=”margin:10px 0px 5px 0px;”> in this example, the /,div> has a top margin of 1pixels, a bottom margin of 5 pixels and no margins on left or right sides.

Step 4

Type style =”margin:10px;” inside of any paragraph or <p> tags that are to be created for the margins around. Change the 10px margin value to a number that design for the web page. For example: <p style=”margin:15px;”> This style adds a 15 pixels-width margin around any text contained within the “<p>” tag.

6.1.4 Entrance Page:

Theoretically, any page in a site can serve as an entrance page If the users knows the page’s URL, sites that did not limit entry to particular set of pages were considered porous, while sites that limited entry could be dubbed semi porous or solid, depending on how limited entrance was regardless of any formal attempt to limit users, most sites tend to have only a few entry points. The home page is main entry to a site, but certain important sectional pages or “sub-home” pages might also be entry points into a site, particularly if they have special URLs or unique domains. While most sites will focus traffic through a home page, some sites may have a special entry page called a splash page.

Splash Pages:

splash page is the page that is used to introduce a site, to “make a splash” and leave a strong impression. Often a splash page is used to set the tone of site through the use of graphic layout, animation or even sound.

Home Pages:

home page is generally the first page user see when they visited site. The home page acts as the main entry point of a site and should be a prominent landmark in a site. As a landmark page, a home page’s appearance should be distinct from all other pages in a site. If it is not different, users may feel lost in a site, needing an obvious starting point.

Legal pages:

Now that web is used for commerce, legal terms pages have become commonplace within many sites. Often, bottom of a webpage on public sites includes a corporate statement of some kind. There may also be a short statement about the site usage. Either of this short statement will generally include a link to another page describing the legal aspects of the site. The way legal information is linked to pages varies. Some examples are shown here.

• Read our terms and Conditions of Use.
• Copy right and trademark Notice.

6.1.5 Exit Page:

While it’s clear that the home page serves as the main entry point to a web site, is there a similarly defined exit point? For content=oriented sites,there may not be one, and every page could be considered an obvious exit point. Ideally,in such cases the user will have found some interesting content and then left from a content page.

Not all sites can afford to lack a point of closure. Sites that have definable tasks,such as downloading software,buying a product, making a stock trade and so on ,should have an obvious exit page. The exit page provides a sense of completion or closure to a visit. Closure is very important to site usability,as it signifies to user that they have completed the task properly.

6.2: Graphics In Webpage Design-

When designing graphics for a web page,designer has to always keep in mind the image of someone surfing the Net, idly searching for a topic. As they stumble upon a specific page, this is web designer’s chance to show their stuff. Now on,imagining them entering home page and waiting for graphics to load….. 10 seconds….20….30….40….. The potential viewer viewing the website is now gone and hence off to explore a better and faster site. In the world of web graphics,smaller is better. The trick is to create high quality graphics,with small file sizes.

• Animation Effect:

An animated graphics can be created using appropriate animation software. GIF animation software layers multiple images and controls timing and looping options. Flash software creates the animated SWF(Adobe flash file format) format and, while more complicated,offers more extensive programming options. Creators offer some animated graphics to copy, at no cost, on their websites in exchange for website link.Graphic professionals offer animated graphics for sale. The HTML code written to insert the animation into a website depends on the graphics format, There are some steps given below to add animations to awebsite.

Steps to Insert a Flash Animation on a Website:

The user can upload the SWF file to their web server. For the sake of this code, users must place the file in the same folder as their HTML file.

The next step to open HTML file to edit it. Navigate to the desired location for the animation.

Users can refer the following code

<OBJECT classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” CODEBASE=http://download.macromedia.com/pub/shockwave/cabs/flash/swflas h.cab#version=6,0,40,0“ WIDTH=”X” HEIGHT=”Y” id=”Movie Name”> <PARAM NAME=movie VALUE=”filename.swf”> <PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor

VALUE=#FFFFFF>

<EMBED href=”/support”>

Users can replace “Movie Name” with their chosen name and “filename.swf” with the name of their flash file. Also, users can replace “X” and “Y” with their desired width and height settings.

• Users should save the HTML file to their server.

Steps to insert GIF animation in website- Users should upload the GIF file to their web server. For the sake of this code,users should place the file in the same folder as their HTML file.

Next step for users is to open their HTML file to edit it and navigate to desired location for the animation. 3) Type the following code <imag src=”filename.gif” width=X height=Y> 4)Users can replace “filename.gif” with their filename and can also change the width and height settings.

• 5)Users should save the HTML file to their server.

2)Sound Effect

There are a few different ways to add sound to web pages. Designers can also have a control panel and let users start the sound file on their own or have the sound start automatically. Another option is to link to the sound file to have the sound file open in an external player. That option also gives users the option to save the sound file to their computer. The following point describes to add sound to a webpage.

A)Sound with a Control Panel-

Depending on the available software and configuration, most users will see the miniature control panel below. Users may have to click the play button twice to hear the sound. The code for this mini-panel is shown below except a change in hidden parameter to true, change the autostart to false, and added width=”70” and height=”28” to the code. For the full-sized control panel just leave out the width and height parameters.

B)Adding Sound with a Meta Tag-

It is not well known, but there is also a way to use the refresh Meta Tag to download a sound to the user if they have the software installed to the play the file type. This technique opens the sound in the player rather than in the browser. To do that, designers add the following code to the HEAD section of their web page:

Where it has 0(zero) in the code, that is how long of the delay the browser should wait before opening the sound file. The filename.mid is the name and extension of the sound file, and be sure to include the path to the file in front of the file name if the sound file is not kept in the same directory. The autostart can be set to true or false as with an embedded sound.

C)Sound with a simple link:

Designers can also add sound with a simple link. Depending on how the user’s browser is configured, clicking the link will either open the sound file in the player or give the user the option of opening it or saving it. It is also available to download and save on their computer too, via the right click menu. Coding a link to a sound file thinking just as they would be a web page link, then only place the addresses to a web page, like so- <ahref=”somesound.wav”>the sound plays as</a>

D)Color Effect-

Colour is an important design element. It has an immediate impact on the viewers and the addresses their sub consciousness. So colours should be carefully selected and the colour experience of the target group should be taken into account. A colour tint can be varied by the two factors brightness. and saturation (addition of white, black or grey.

E)Colour Contrast:

The relationship between coours is named colour contrast. When working with coloursmuch can be learned about their characteristics, their effects and their interplay. A warm tonal value.Harmonic compositions can abruptly change completely because of additional coour elements. The following types of colour contrast are distinguished.

Complementary Contrast:

Colours which face each other in the colour circle are termed complementary. Each colour has its complementary. Each colour has its complementary colour with which it is balanced and even can increase to the highest luminosity.

Simultaneous Contrast:

Simaltaneous contrast appears where a rich colour stands without its complementary colour(in which case the eye wil generate this complementary colour), through which phenomenon its tonqal value is optically changed.

Quality Contrast:

• Quality contrast depends on the opposition between bright and dull colours.

Quantity Contrast:

Quantity contrast arises from the confrontation of differently sized colour areas . here the intensity, the strength of a colour’s brightness is of importance, e.g. yellow has a much bigger optical impact than violet . The order reads: yellow,orange,red,gree,blue and violet .

Cold-Warm-Contrast :

The opposition between the red-orange and blue-green pair has the biggest effect on the contrast .

6.3Uploading the Web Site :

After developing the web site is necessary to upload it on the web server. To upload the site all that is needed is FTP access to the host. The hosting service provider will provide username and password to access the server . The command line ftp command is used to upload the site.

Web Space :

Web space is a composite word that has worked its way into common usage Due to it having no strict definition , web space has several subtly different meanings. The context of usage usually indicates the meaning in its simplest sense web space indicates disk space used to store web pafges and other contents that one can access through the internet. For instance, an internet service provider(ISP) usually gives each customer a small amount of web space. A customer can use the web space to host a personal web page or they can use it as a form of storage which they can access through any internet capable computer .

Meaning of Web Space :

In a broader sense, web space indicates a web hosting service and all the aspects that can be associated with it. A web hosting service not only offers web space but also a wide array of functionality . One of the critical functionalities offered is redundancy. Redundant bacup assures the client that their data is safe in the event of hardware failure .

Domain Name :

A Domain Name is an identification string that defines a realm of administrative autonomy, authority, control on the internet. Domain names are formed by the rules and procedures of the Domain Name System(DNS). Technically, any name registered in the DNS is a Domain Name . Domain Names are used in various networking context and applications specific naming and addressing purposes. In general, a domain name represents an internet protocol (IP) resources such as personal computers used to access internet, a server computer hosting a web site, or the website itself or any their services communicated via the internet.

3)Hosting the Website:

Web hosting is the most widespread hosting service. It allows a website to be assessable on the internet 24 hours a day 365 days a year. The website itself is being hosted on a web server most often located in a specialized data center. The web server offers uninterrupted internet connectivity , a certain set of software packages, which offers additional services such as email, FTP, databases as well as an environment for utilizing different programming languages such as Perl, php, Java, XHTML, HTML and others .

Meaning :

Web Hosting is a service that allows organizations and individuals to post a web site or web page on to the internet. A web host, or web hosting service provider , is a business that provides the technologies and services needed for the websites or web page to be viewed in he internet .Webstes are hosted, or stored , on special computers called servers. When internet users want to view any websites , al they need to do is type the website address into their browser. Their computer will then connect to the main server and the relevant web pages will be delivered to them through the browser .Most hosting companies require that site owner should own domain name in order to host with them. If there is no domain name , the hosting companies will help in purchasing one.