CASCADING STYLE SHEET WEB TOOL

______

A Thesis

Presented to the

Faculty of

San Diego State University

______

In Partial Fulfillment

of the Requirements for the Degree

Master of Science

in

Computer Science

______

by

Kalthoum Y. Adam

Summer 2011

iii

Copyright © 2011

by

Kalthoum Y. Adam

All Rights Reserved iv

DEDICATION

I dedicate this work to my parents who taught me not to give up on fulfilling my dreams. To my faithful husband for his continued support and motivation. To my sons who were my great inspiration. To all my family and friends for being there for me when I needed them most. v

ABSTRACT OF THE THESIS

Cascading Style Sheet Web Tool by Kalthoum Y. Adam Master of Science in Computer Science San Diego State University, 2011

Cascading Style Sheet (CSS) is a style language that separates the style of a web document from its content. It is used to customize the layout and control the appearance of web pages written by markup languages. CSS saves time while developing the web page by applying the same layout and style to all pages in the website. Furthermore, it makes the website easy to maintain by just editing one file. In this thesis, we developed a CSS web tool that is intended to web developers who will hand-code their HTML and CSS to have a complete control over the web page layout and style. The tool is a form wizard that helps developers through a user-friendly interface to create a website template with a valid CSS and XHTML code. vi

TABLE OF CONTENTS

PAGE

ABSTRACT...... v

LIST OF TABLES...... viii

LIST OF FIGURES ...... ix

ACKNOWLEDGEMENTS...... x

CHAPTER

1 INTRODUCTION ...... 1

1.1 Background...... 1

1.2 Aim and objective...... 2

1.3 Motivation...... 2

1.4 Thesis outline...... 2

2 CASCADING STYLE SHEETS ...... 4

2.1 History of CSS ...... 4

2.2 HTML vs XHTML ...... 5

2.3 (X)HTML and CSS...... 7

2.4 CSS syntax...... 9

2.5 CSS and Browser issues...... 10

3 RELATED WEB APPLICATION AND TOOLS...... 12

3.1 Difference between application and tool ...... 12

3.2 Web design applications ...... 12

3.2.1 Adobe Dreamweaver ...... 13

3.2.2 Microsoft Expression Web ...... 13 vii

3.2.3 Amaya...... 14

3.3 Web Design Tools...... 14

4 CSS WIZARD AND TECHNOLOGIES USED...... 16

4.1 CSS generator Wizard...... 16

4.2 Technologies used...... 20

4.2.1 XHTML ...... 21

4.2.2 CSS ...... 21

4.2.3 JavaScript...... 21

4.2.4 JQuery...... 22

4.2.5 PHP ...... 23

5 TEST AND RESULTS...... 25

6 CONCLUSION AND FUTURE IMPROVEMENT ...... 30

BIBLIOGRAPHY...... 31

APPENDIX

ABBREVIATIONS ...... 33 viii

LIST OF TABLES

PAGE

Table 2.1 Cascading Precedence Order ...... 9

Table A.1. Abbreviations...... 34 ix

LIST OF FIGURES

PAGE

Figure 2.1 FireFox screen shot for 100% height...... 11

Figure 2.2. Internet Explorer screen shot for 100% height...... 11

Figure 4.1 Layout screen...... 16

Figure 4.2. Header options...... 17

Figure 4.3. Body properties...... 18

Figure 4.4 Link and Headings properties...... 19

Figure 4.5. Column properties screen...... 19

Figure 4.6. Column properties options...... 20

Figure 4.7. Output Files...... 21

Figure 5.1 Mac OS and Chrome output Screen...... 26

Figure 5.2. Mac OS and Firefox output screen...... 27

Figure 5.3. Mac OS and Safari output screen...... 28

Figure 5.4. Windows7 and IE8...... 29 x

ACKNOWLEDGEMENTS

My grateful gratitude goes to my Professor Alan Riggins for his generous encouragement and guidance. Without his support I wouldn't have finished my project. My special thanks to committee members, Dr. Carl Eckberg and Dr. Roxana Smarandache, for their support and time. 1

CHAPTER 1

INTRODUCTION

The number of the Internet users is increasing rapidly. Many people use the Internet as their main source of knowledge, communication, and online shopping. Recent statistics show that 1.96 billion of the world's population is using the Internet as of June 30, 2010 [1].

Consequently, websites have become one of the important means of communication required by companies, organizations, governments, and many individuals as a means of reaching the largest number of people worldwide.

1.1 BACKGROUND A web page document consists of two different components. The first part is the content of the web page document, which has the information that is presented to the visitors.

The information comes in the form of texts, images, videos, or sounds. This part is written by using Markup language such as eXtensible HyperText Markup Language (XHTML) and

HyperText Markup Language (HTML) which defines the structure of the document (see

Appendix for a list of abbreviations). The second part is the presentation of the document which controls how the elements in the document are displayed such as the font, background, and paragraph. This part is written by Cascading Style Sheet (CSS) language, which is a technique to customize the web pages' layout and control their appearance.

In this project, a cascading style sheet web tool is developed. The main function of this tool is to create a CSS file and its corresponding XHTML file through a user-friendly wizard. 2

1.2 AIM AND OBJECTIVE There are many available software applications that make creating websites an easy task. In addition to these applications, there are plenty of tools and utilities that help developers to do specific tasks. These applications and tools give users an opportunity to attain a better outcome and enrich the quality of the products with less time and effort.

CSS is a great technique that helps to define the layout and appearance of a website.

Therefore, CSS generator is a practical tool that aids web developers in the web design process, especially those who write their own code using text editors.

The main objective of this thesis is to explain the importance of Cascading Style

Sheets, how this technique works, and its implications in the web design cycle. This thesis will also present the CSS tool and the techniques that are used to build it.

1.3 MOTIVATION Web page layout is an issue that many web designers face. It is often a challenging task to build a layout that works perfectly with different browsers without adding codes or using tools. Moreover, most CSS generator tools and applications are either too complex to use or so overly simple that they don't satisfy user requirements.

The CSS generator tool is a simple and effective web tool to help web developers who will hand code CSS and XHTML to have better control over the web page.

1.4 THESIS OUTLINE This thesis is divided into six chapters. In the next chapter cascading style sheets, its history, and structure is discussed. The following sections will cover markup languages and their relation to CSS. 3

Chapter three is a review of some related projects in the web design field. In the first section, the difference between tool and application is explained. The next sections will examine some applications and tools that contribute in the website development.

Chapter four will discuss the CSS web tool project and its features. In addition, the author will demonstrate the technologies that are used to develop this tool.

Chapter five emphasizes the tests that are conducted during tool development and the outputs of using different browsers.

The last chapter contains the conclusion as well as future improvements of the CSS web tool. 4

CHAPTER 2

CASCADING STYLE SHEETS

2.1 HISTORY OF CSS Although style sheets have been used since the beginning of Standard Generalized

Markup Language (SGML), Cascading Style Sheets were introduced later to clearly distinguish the presentation of the document from its content. [2]

CSS, HTML, and XHTML are maintained and controlled by the World Wide Web

Consortium (W3C). There are several levels of CSS. Each of them becomes a new version of the previous one by adding new features and capabilities. The first one was CSS1, which was published in 1996. CSS1 presents the following features:

 Font properties such as size, type, and other properties  Text, managing text alignment and applying decorative elements to it for instance  Backgrounds such as setting the background image for an element  Color such as setting the background and foreground color for elements  Block-level elements such as margins, paddings, spaces and borders The second level of CSS was CSS2, which, in addition to the above features, possesses new ones. Examples of this are element positioning, visual formatting, and media types. This version was first introduced in 1998. An update to CSS2 was published in 2002 to fix some errors in it without adding any new features.

CSS3 is the latest level which comes with a different approach than was introduced in the last two levels. This level divides the style sheet specifications into small modules instead of a single large one. This division helps in developing web browsers that are more efficient and compact. [3] 5

2.2 HTML VS XHTML Markup is information we add to a document to process and format the text in order to produce a distinguishable version of that text. Markup languages specify the code for the structure and presentation of the document. HTML and XHTML are markup languages that are used to tell web browsers how to structure and display web pages. [4]

In 1980, a physicist at the CREN Organization released an authoring language developed for creating and sharing multimedia-enabled integrated electronic document over the Internet. This was the birth of Hypertext Markup Language (HTML). HTML unified authors' fragmented collections of pictures, sounds, and text under one document to facilitate sharing. In addition to that, HTML enabled hypertext linking which automatically links documents in the web. [5]

Subsequently, many versions of HTML were introduced to improve the accessibility and usability of the language. The newer versions of HTML focus on the separation of the presentation from its structure, improving accessibility features, and document rendering, as well as internationalization features. After Extensible Markup Language (XML) was introduced, a new version of HTML with XML was needed. EXtensible HyperText Markup

Language (XHTML) was first presented as a new version of HTML 4.0 using XML 1.0. [6]

XHTML syntax is similar to HTML. In spite of the similarity between the two markup languages, there are some differences between them. XHTML has all the elements in

HTML 4.01, combined with the strict syntax of XML. Since XML is a markup language that produced "well-formed" documents, XHTML is a more rigorous and cleaner version of

HTML. Elements in the XHTML document must be properly nested and closed. This is not the case with HTML which not only allows for optional close tags, but also offers the use of 6 empty tags such line break
. [7] Since XHTML is a strict language, it is easier to maintain, teach, and learn compared to HTML. XHTML is written in a precise code which makes it more widely used in portable devices like cell phones, PDAs and other mobile devices with scaled down browsers.

Let's look at an example of a markup code written by HTML and the same code in

XHTML:

This code is accepted as HTML:

This is heading

This is a paragraph

The same example following XHTML rules:

This is heading

This is a paragraph

One major difference between HTML and XHTML is the DTD or DOCTYPE statement. DTD stands for Document Type Definition and is used to specify which syntax is used in the Web page. If you look at the source of an XHTML document the first thing you will notice is DTD. 7

There are three types used: strict (that will only validate if you have no deprecated tags), transitional (which will still validate with deprecated tags), and frameset (which is for a page that "sets" up "frames"). The three DTD's look like this [8]:

 Strict -  Transitional -  Frameset - .

2.3 (X)HTML AND CSS Style sheet is a file related to the document used to define its presentation on screen or print. CSS is a style sheet that is designed to enable the user with more control over the layout and the appearance of documents like XHTML and HTML.

The main purpose of CSS is to allow the separation of the (X)HTML webpage format from its content by placing this format in a different file. By distinguishing the structure from the presentation, we can easily standardize styles, designs, and layouts of all pages. Thus providing the ability to maintain these pages in more flexible and efficient way.

There are three different ways to apply a cascading style sheets to (X)HTML documents: external style sheets, internal style sheets, and inline styles.

Inline style means embedding the style in the body section of the document using a style attribute. This type of styling is the least preferable by web developers for implementing style due to the fact that it is less flexible and shifts away from the main purpose of using CSS which is separating the style from content. However, this style is 8 useful when we need to apply a different style to the element in a single occurrence. In general this style is not recommended.

Example of inline style :

some text

. [9]

The second type is internal style sheet. This style is embedded in the header section of the (X)HTML document. It is used when we need to apply a unique style to a single page in the website. To apply the internal style,

External style sheet is the third and the most recommended type for styling documents. The style is placed in an external file which, facilitates changing the appearance of all pages in the website by merely editing one file. The external file can be created using any text editor and saved with .css extension. In the (X)HTML document we refer to the external file in the header section of each page of the document. For example :

More than one external style sheet can be used in the same document simply by adding the reference of each style sheet after the head tag as in the example above.

Cascading means applying more than one style rule to a single element in the document. This creates an order of precedence among rules. The highest level of precedence that will be applied by the browser and lower ones will be ignored.

Although the inline style is the least preferable type, it has more precedence over both external and internal style sheets when applying them to elements. Internal style sheet 9

comes in the second level and the external style sheet comes in the lowest level. This is

called the Abstraction level.

Ownership is another method of determining the order of precedence. The user of the

document has the highest level of precedence, the author comes next, and lastly the browser

specification has the lowest level.

Table 2.1 shows the cascading order in different scales. [10]

Table 2.1 Cascading Precedence Order Lowest <======> Highest

Ownership Browser Defaults User's Style Sheet Author's Style Sheet

Abstraction level External Style Internal Style Inline Styles Sheet Sheet

Tag selector specificity Contextual CLASS ID Selector Quantity

2.4 CSS SYNTAX CSS is a language that is easy to read and write. A CSS document consists of set of

rules, and each rule consists of selector and its declaration. The selector is the (X)HTML

element that we need to apply style to its properties. The declaration part contains the

property with the assigned value. Declaration can have more than one property separated by

a semicolon. The following is the syntax of a CSS rule: selector { property1 : value ;

property: value; … } , For example to set the body properties we could have the following

rule: body { background-color: blue; color: red; text-align: left; }. 10

2.5 CSS AND BROWSER ISSUES Browser compatibility is one of the major problems that faces web developers when they write CSS. Different browsers possess different specifications, and even some elements don't exist in one browser and exist in another. Elements occasionally appear different in different browsers because some browsers don't support all properties. Furthermore, as explained earlier, if the browser style sheet has a higher precedence for a certain element, then that style is applied. But because browsers have different style sheet, the final outcome will differ from one browser to another. This inconsistency in the appearance of the document formatted by CSS forces web developers to test how the document looks in different browsers before they deploy it. There are some techniques that are used to solve this problem and some times more codes are added to the CSS file to overcome this issue.

As an example, the height property of the div element is supported differently by different browsers. For instance, when we set the height to 100%, Internet Explorer stretches the div to the content inside it. On the other hand, Firefox gives the full screen height to that div. To solve this problem there are few different tricks. One of these is to simply set the height of the body and any root elements to 100%. [11]

Figures 2.1 and 2.2 show how the same page appears in IE and Firefox. 11

FigureFigure 2.1 2.1 FireFox. FireFox screen screen shot shot for for 100% 100% height height.

FigureFigure 2.1 2.2. FireFox Internetscreen Explorer shot for screen 100% shot height for 100% height. 12

CHAPTER 3

RELATED WEB APPLICATION AND TOOLS

3.1 DIFFERENCE BETWEEN APPLICATION AND TOOL Software is a collection of applications that tells the computer what to do. It comes in different types. An application contains many different parts that perform individual tasks and work together to construct an entire system. This system works as one piece. On the other hand, a software tool is either a single component of the software application that serves specific function in the program, or it could be a small program that supports, maintains, or debugs another program.

Software tools have great benefits to computers. They protect computers from crashing, keep them running accurately, and make sure that memory is being used efficiently.

Another benefit of software tools is to protect important data for business and personal computers. People often forget to save their data to other removable storage disks. Software tools decrease the potential of losing important information and increase the performance of the computer itself. [12]

3.2 WEB DESIGN APPLICATIONS Web design is creating websites with contents intend to reach end-user through the

World Wide Web. The final outcome is displayed to the public by web browser such as

Internet Explorer(IE), FireFox, Opera, Safari, and many other software. The content of the website could be texts, images, audios, and videos. Contents could be static or interactive.

When you design a website, you should be aware of the basic aspects of design: 13

 Web page content: The substance, and information you include in your site should be related to the site and the area of the public that the website is concerned with.  The usability: Make your website user-friendly and easy to navigate.  The appearance: The graphics and text should include a single style that flows throughout, to show consistency. The style should be professional, appealing and relevant.  The structure: of the web site as a whole.[13] The following applications create websites dynamically to users without necessarily mastering (X)HTML and CSS syntax.

3.2.1 Adobe Dreamweaver Adobe Dreamweaver is a commercial web editor application to create a standard- based websites. Also known as Macromedia Dreamweaver. The editor is a What-You-See-Is-

What-You-Get (WYSIWYG) web editor, which means the design you see in the screen is what the visitors of the website will see. Dreamweaver has coding tools for HTML, XHTML,

XML, CSS ,and JavaScript. It also has a code editor where you can easily edit your code.

[14]

Although, this application is a powerful and rich, users need some time to get familiar with its features. Another limitation in this application is the accessibility over the internet.

Since Dreamweaver is a desktop application, you should download it in order to use it. Not to mention its price which is close to $ 400. Moreover, Dreamweaver is not supported in all operating systems like Unix and Linux.

3.2.2 Microsoft Expression Web Microsoft Expression Web is the new version of Microsoft Front page. It is software for creating standard-based websites with CSS based layout. Similar to Dreamweaver, this software is a WYSIWYG HTML editor. Microsoft Expression Web is a commercial 14 application. It is designed mainly to create ASP.NET documents. In addition to that, it supports XHTML with CSS. The User interface is similar to Adobe Dreamweaver.

Microsoft Expression has some limitations similar to Adobe Dreamweaver. Users need to learn this application and be familiar with it is features before using it. Although it’s cheaper than Dreamweaver, it is quite expensive. Limited accessibility is another disadvantage of Expression because the application is desktop software that is supported by windows operating system only.

3.2.3 Amaya Amaya is a W3C web editor and browser used to create a web-standard web page. It is a free WYSIWYG web application. This app was developed to provide a framework that can integrate with W3C technologies. It started with HTML and CSS, and it now supports

XHTML, MathML and SVG. [15]

Amaya web editor has great features and is supported by Macintosh, Linux, Unix and

Windows. However since it is still free web app, there is a lot of stability and usability issues. And it doesn't have built-in FTP support.[16]

3.3 WEB DESIGN TOOLS Designing a website is an easier job as a result of new technologies that become available. These technologies spare the developer both time and effort to produce more efficient websites.

There are many web design tools, each one of which does a specific task in the design process. Some of the tools are free which make it even more convenient for developers.

Below are some tools that are useful and reliable. 15

1. Firebug: A free web development tool that comes as an extension of Firefox web browser. This tool facilitates debugging and editing HTML and CSS. It also has a Console for logging, analyzing and debugging JavaScript, and an inspection tool for Document Object Model (DOM). 2. Web developer extension: Another great extension tool of Firefox web browser. It helps with validating your XHTML document. It also facilitates debugging JavaScript and CSS by displaying warnings and errors in the error console. This tool also fills out web forms to help in testing. As well as having more functionality. 3. Google Web Toolkit (GWT): A free and open source tool that is used in building and optimizing complex browser-based applications. The main function of this tool is to help individuals with minimum experience in browser quirks, XMLHttpRequest, and JavaScript. In addition, it is used to build productive and high-performance web applications. 4. IE developer tool: The Microsoft version of Firefox web developer extension. It has mainly the same features available in web developer tool. This tool is free for IE 6 and 7. 5. ColorZilla: A simple tool and very useful. It is an extension of Firefox browser and used as an eyedropper, color picker and color palette browser. 16

CHAPTER 4

CSS WIZARD AND TECHNOLOGIES USED

This chapter demonstrates the CSS web tool project and technologies that are used to build it.

4.1 CSS GENERATOR WIZARD CSS generator wizard tool is a simple tool written by XHTML, CSS, and JavaScript to build the form and the wizard in which the end-user can put his selection. In conjunction,

PHP script is used to process user selection and creates the CSS and XHTML files.

The wizard starts with specifying user's layout selection as shown in Figure 4.1.

FigureFigure 4.1 Layout 4.1. Layout screen screen.

The first selection is a drop down menu for the Doctype of the XHTML file. There are three options: Strict, Transitional, or Frameset. For more information about XHTML 17 doctype, refer to chapter 2. The second selection is the page alignment, i.e., full page, centered page, or left aligned page. With the last two options the user can set the width of the page compared to the full page. The third selection is the body background color, which is selection is useful when the page alignment is center or left page alignment. The rest of the selections are the website layout div elements. The wizard gives the user the option to choose up to 3 columns and header and footer for the webpage. When the user check a selection, the wizard will give options to set the height or width, and the background color of the div.

As shown in Figure 4.2, the options become visible when the check box is selected. In this example the height option is available.

Figure 4.2. Header options.

The second dialog box in CSS wizard is for body properties. Figure 4.3 shows a screen shot of that dialog box.

In body properties, the user can set the body background properties by choosing a background image, selecting the position of the image and whether it is repeated or not.

Font properties have default values. User can change them to his own preference.

Link and heading are optional selections which expand for the user to provide more specific options.

In the link selection, the user has the option to set the link state properties. The wizard offers three state settings: the link state which is how the hyperlink text appears when page 18

Figure 4.3. Body properties. first loaded, The visited state which is how it is displayed when hyperlink is clicked, and the hover state which is how text appears when mouse hovers over the link. The default setting is provided for each state, but the user always has the option to change them to his preferred setting.

For heading, the user has the option to set h1 to h3 properties. Figure 4.4 shows the expanded options for both link and headings.

The third dialog box is for setting the properties of paragraph and list in the columns.

Since the main column is always available, the selection for that div is always shown. For the left and right columns, the selections to set their properties are shown if they are part of user selection in the first dialog box. Otherwise their selection will be hidden by default. Figure

4.5 shows third dialog when the user selects to have two columns, main and left.

Users can expand the selections for column properties or can simply ignore them. If

(s)he chooses to set the properties for the paragraph and list, then the option will be available.

The default setting is provided and the user can change them. 19

FigureFigure 4.4 4.4. Link Link and and Headings headings properties properties.

Figure 4.5. Column properties screen. 20

Figure 4.6 shows the last step in CSS generator wizard. The user can still go back and change insertions, or reset the whole wizard. If user is satisfied with insertions, then the create button will execute the PHP script to build the output files. Output files are: the

XHTML file with doctype selection and divs of the layout selections, the CSS file which include code correspondent to user insertions, and if user uploaded any image as a background.

Figure 4.6. Column properties options.

Figure 4.7 shows the output files where user can check them or save them.

4.2 TECHNOLOGIES USED CSS project was built using some web application languages. The following sections talks about these languages. 21

Figure 4.7. Output files.

4.2.1 XHTML XHTML 1.0 transitional language was used to construct the webpage form wizard.

For more details about this markup language please refer to (section 2.3) in this thesis.

4.2.2 CSS CSS stands for Cascading Style Sheets. CSS was used to style the form wizard. CSS was explained in detail in chapter 2.

4.2.3 JavaScript JavaScript is a scripting language which is used to add dynamic functionality to web pages written by markup languages. It is a client-side language, that means it can run in the client's computer with no need of network connection. It is also an interpreted language which means it does not need a separate program to execute it. JavaScript code is embedded within the XHTML/HTML document, so that when the page is loaded into the web browser, the JavaScript code is translated by the client's machine. [17]

JavaScript is not a difficult language to learn. In addition, it is a loosely typed language which means that you can use variables in the syntax for any type of data. This makes it even easier for a non-programmer to use it.

Moreover, JavaScript is an object-oriented language in which the webpage and any element included are objects and their attributes are the properties. For example, to set the 22 background color of any element in the document using JavaScript we can access it by: document.getElementById(element id).style.background-color= value;

Many people confuse JavaScript language with Java. In fact, they are totally different languages except for naming convention. The syntax of JavaScript code is similar to C. The following is an example of simple JavaScript code for a button that gives message when it is clicked:

In this project, JavaScript was used to make CSS form wizard more dynamic and interactive with users. For example, the selection of checked boxes controls the presence of the hidden options. When it is checked; more options are displayed which enables the user to set them as was shown in Figure 4.2. As for columns selection, the checked check box displays the column properties in the column properties section. JavaScript is also applied to add some functionality to the reset function, such as resetting the color input box and hiding option boxes for selections.

4.2.4 JQuery JQuery is a compact JavaScript Library that makes the HTML dynamic and adds cool features on to it. It simplifies document traversing, event handling, animating and Ajax interactions. Furthermore, JQuery enables developers to construct plugin with the JavaScript library to create powerful html documents.[18]

To use JQuery you need first to add the JQuery library to your webpage, this is simply done by adding the following line to the head section of the XHTML/HTML : 23

You can alternatively use hosted JQuery library from Google or Microsoft. The following is an example of basic JQuery “hide method” to hide

element when button is clicked [19]:

This is a heading

This is a paragraph.

This is another paragraph.

Click me

JQuery is applied to build an interactive wizard from the regular XHTML form. This will make it easier for the user to use the multi step form. Moreover, the user can go back to change his entries before submitting them. JQuery color picker plugin was added to the wizard to give dynamic color input fields.

4.2.5 PHP PHP stands for Hypertext Preprocessor. It is a server-side scripting language which means that code is executed in the server and then sent to the client. PHP is used so widely in web development for writing dynamically generated pages quickly. It can be embedded into

HTML code. PHP has a syntax influenced by C, Java, and Perl with some specific features.

[20] 24

PHP has some unique features that makes it preferable over other server-side scripting. When it comes to performance, PHP scripts are faster. PHP is also portable between platforms and runs in different operating systems. PHP syntax is clear and consistent and that makes it a sophisticated and ease to use language. Additionally, it is an open source project and it is supported by wide range different databases like MySQL, Oracle and

Microsoft SQL Server. [21]

PHP can retrieve information passed by (X)HTML. And it can generate documents and send them back to clients or save them in the server.

In CSS wizard, information regarding user selections such as, XHTML doctype, layout of the page, and properties of the elements are sent to PHP file in the server. PHP will then process the information that are received to generate CSS and XHTML documents.

PHP scripts starts with . This is an example of simple php code to print out Hello World:

25

CHAPTER 5

TEST AND RESULTS

Testing was done through the development phase. It was applied with every single element or functionality added to the tool. This helped to simplify the final test.

The CSS wizard was mainly developed in Mac OS. Mozilla FireFox 3.6.16 was used to test and display the web tool during the development phase. Continued testing was applied to check the web tool compatibility to different web browser like Safari, Internet Explorer and Google Chrome. Furthermore, the CSS tool has been tested for platform compatibility with Mac OS and Windows7 using the same web browsers. Another testing was applied to check the output files. This was the most important test because it was the main objective of building this tool. This test was conducted using two platforms, Mac OS and Windows7, and the following web browsers: Mozilla FireFox 3.6.16, Safari 5.0.3, Internet Explorer 8.0 and

Google Chrome.

The following Figures show the output XHTML with the following inputs:

Page alignment is centered with 80% width, header is 50px height, left column is 20% width, right column is 20% width, main column is 80% height and footer is 20px height.

The main column shows how the heading will appear in the website, left column and right column show how both ordered and unordered lists look in these columns. Many properties that user can still choose were not used in this testing. 26

Operating system Mac OS:

 Figure 5.1 with Google Chrome browser:

Figure 5.1 Mac OS and Chrome output screen. 27

Operating System: Mac OS

 Figure 5.2 with Firefox browser:

Figure 5.2. Mac OS and Firefox output screen. 28

Operating System: Mac OS

 Figure 5.3 with Safari browser:

Figure 5.3. Mac OS and Safari output screen. 29

Operating System: Windows 7

 Figure 5.4 with Internet Explorer 8.0 browser

Figure 5.4. Windows7 and IE8. 30

CHAPTER 6

CONCLUSION AND FUTURE IMPROVEMENT

This Thesis presents the CSS generator wizard web tool as a helpful tool for web developers who hand code the CSS and (X)HTML. As with any web tool, CSS wizard tool saves both time and efforts by simply following easy steps to create the desired CSS and

XHTML files. This tool builds the website layout by enabling the user to choose the Doctype for the XHTML webpage and the page structure. The page structure consists of number of columns, header and footer. The user can specify the width and the height for the layout structure. Then the user can set the properties of the body and columns of the website.

This work covers the most required CSS options by web developers. In future versions, it can be improved to cover more options. For instance, in this version the maximum number of columns which can be created by using this tool is three. Therefore,

The future versions can give more number of columns and layout options. Another enhancement objective is to provide more properties for the columns such as tables and forms. Menus also can be added as some developers could require it. 31

BIBLIOGRAPHY

[1] Internet World Stats. World Internet Usage Statistics News and World Population Stats, n.d. http://www.internetworldstats.com/stats.htm, accessed: Apr. 9, 2011. [2] XML UK: A Forum for SGML and XML Users and Developers. CSS History & Information, 2008. http://www.xmluk.org/css-history-information.htm, accessed: April. 9, 2011. [3] P. Carey. New perspectives on HTML and XHTML. 5th ed., Cengage Learning, Florence, KY, 2008. [4] T. A. Powell. HTML & XHTML: The complete reference. 4th ed., McGraw-Hill Osborne Media, New York, NY, 2003. [5] C. Musciano and B. Kennedy. HTML & XHTML: The definitive guide. 6th ed., O'Reilly Media, Inc., Sebastopol, CA, 2006. [6] W3Schools Online Web Tutorials. XHTML Tutorial, n.d. http://www.w3schools.com/xhtml, accessed April 22, 2011. [7] The Web Standards Project. HTML Versus XHTML, 2003. http://www.webstandards.org/learn/articles/askw3c/oct2003/, accessed April 30, 2011. [8] Htmlfixit.com. XHTML vs. HTML, n.d. http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_-_The_differences.shtml, accessed April 22, 2011. [9] S. Collison. Beginning CSS web development: from novice to professional. Springer Verlag New York, Inc., New York, NY, 2006. [10] B. Wilson. What 'Cascading' Means. University of Toronto, n.d. http://www.cs.toronto.edu/~darrell/csc104h/html/style/cascade.htm, accessed April 30, 2011. [11] TutWow. Quick Tip: CSS 100% Height, 2008. http://www.tutwow.com/htmlcss/quick-tip-css-100-height/, accessed May 14, 2011. [12] Super Web Group. What Do Software Tools Do?, n.d. http://www.superwebgroup.com/what-do-software-tools-do/, accessed April 24, 2011. [13] Wikipedia. Web design, 2011. http://en.wikipedia.org/wiki/Web_design, accessed April 24, 2011. [14] Adobe. Web design software, HTML editor | Adobe Dreamweaver CS5.5, n.d. http://www.adobe.com/products/dreamweaver.html, accessed May 9, 2011. [15] World Wide Web Consortium (W3C). Amaya, 2010. http://www.w3.org/Amaya/, accessed April 30 2011. 32

[16] C. Heng. The Site Wizard. 2008. http://www.thesitewizard.com/reviews/amaya.shtml, accessed April 30, 2011. [17] E. Gandy and S. Stobart. JavaScript: Creating dynamic web pages. Lexden Publishing Limited, Colchester, Essex, 2005. [18] JQuery. JQuery: Write Less Do More, 2010. http://jquery.com/, accessed April 28, 2011. [19] W3Schools. JQuery Tutorial, n.d. http://www.w3schools.com/jquery, accessed April 28, 2011. [20] PHP Group. PHP: Hypertext Preprocessor, n.d. http://www.php.net, accessed April 28, 2011. [21] V. Vikram. PHP: A beginner's guide. McGraw-Hill Osborne Media, New York, NY, 2008. 33

APPENDIX

ABBREVIATIONS 34

Table A.1. Abbreviations CSS Cascading Style Sheet

CREN European Organization for Nuclear Research

DTD Document Type Declaration

HTML Hypertext Markup Language

IE Internet Explorer

PHP Hypertext Preprocessor

SGML Standard Generalized Markup Language

SQL Structured Query Language

W3C World Wide Web Consortium

XHTML Extensible HyperText Markup Language

XML Extensible Markup Language