DOCSLIB.ORG

Cascading Style Sheet Web Tool

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Cascading Style Sheet Web Tool 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
Load more

Recommended publications
  • Just Another Perl Hack Neil Bowers1 Canon Research Centre Europe
    Weblint: Just Another Perl Hack Neil Bowers1 Canon Research Centre Europe Abstract Weblint is a utility for checking the syntax and style of HTML pages. It was inspired by lint [15], which performs a similar function for C and C++ programmers. Weblint does not aspire to be a strict SGML validator, but to provide helpful comments for humans. The importance of quality assurance for web sites is introduced, and one particular area, validation of HTML, is described in more detail. The bulk of the paper is devoted to weblint: what it is, how it is used, and the design and implementation of the current development version. 1. Introduction The conclusion opens with a summary of the information and opinions given in this paper. A Web sites are becoming an increasingly critical part of selection of the lessons learned over the last four years how many companies do business. For many companies is given, followed by plans for the future, and related web sites are their business. It is therefore critical that ideas. owners of web sites perform regular testing and analysis, to ensure quality of service. 2. Web Site Quality Assurance There are many different checks and analyses which The following are some of the questions you should be you can run on a site. For example, how usable is your asking yourself if you have a web presence. I have site when accessed via a modem? An incomplete list of limited the list to those points which are relevant to similar analyses are given at the start of Section 2.
    [Show full text]
  • LEARNING HTML5 and CSS 1. What Is HTML? Ans: HTML Has Been Derived from SGML, Which Stands for Standard General Markup Language
    LEARNING HTML5 AND CSS 1. What is HTML? Ans: HTML has been derived from SGML, which stands for standard general markup language. HTML was created to allow those users who were not specialized in using SGML to create web pages. 2. What are tags in HTML? Ans: An HTML tag begin with a ‘less than’ symbol(<) and ends with a ‘greater than’ symbol(>). These symbols are also called angle brackets. Syntax:<html> text </html> Start tag End tag The part --<html>is called the opening tag, while the part--- </html> is called the closing tag. The closing tag is same as the opening tag except that it has forward slash before its name. 3. What is the difference between the <body>and <head>tags? Ans: The HEAD section contains the title and the other information about the HTML document. The BODY section contains all the information that is displayed on a web page. 4. How are attributes defined? Ans: An attribute provides additional information about an element. Attributes are usually defined its name-value pairs. The name is the property of the tag that you want to set, while the value is the value of the property to be set. <p align = “left”>This text is left aligned </p> The <p> tag, also knows as the paragraph tag, is used to define a paragraph. Now we can use the attribute align with it to set the alignment of the paragraph. Also, there are three possible values of the align attribute—left, right, and center. 5.Define HTML. What is its use? Ans: HTML stands for hypertext markup language.
    [Show full text]
  • Annotea: an Open RDF Infrastructure for Shared Web Annotations
    Proceedings of the WWW 10th International Conference, Hong Kong, May 2001. Annotea: An Open RDF Infrastructure for Shared Web Annotations Jos´eKahan,1 Marja-Riitta Koivunen,2 Eric Prud’Hommeaux2 and Ralph R. Swick2 1 W3C INRIA Rhone-Alpes 2 W3C MIT Laboratory for Computer Science {kahan, marja, eric, swick}@w3.org Abstract. Annotea is a Web-based shared annotation system based on a general-purpose open RDF infrastructure, where annotations are modeled as a class of metadata.Annotations are viewed as statements made by an author about a Web doc- ument. Annotations are external to the documents and can be stored in one or more annotation servers.One of the goals of this project has been to re-use as much existing W3C technol- ogy as possible. We have reacheditmostlybycombining RDF with XPointer, XLink, and HTTP. We have also implemented an instance of our system using the Amaya editor/browser and ageneric RDF database, accessible through an Apache HTTP server. In this implementation, the merging of annotations with documents takes place within the client. The paper presents the overall design of Annotea and describes some of the issues we have faced and how we have solved them. 1Introduction One of the basic milestones in the road to a Semantic Web [22] is the as- sociation of metadata to content. Metadata allows the Web to describe properties about some given content, even if the medium of this content does not directly provide the necessary means to do so. For example, ametadata schema for digital photos [15] allows the Web to describe, among other properties, the camera model used to take a photo, shut- ter speed, date, and location.
    [Show full text]
  • Opera Software the Best Browsing Experience on Any Device
    Opera Software The best browsing experience on any device The best Internet experience on any device Web Standards for the Future – Bruce Lawson, Opera.com • Web Evangelist, Opera • Tech lead, Law Society & Solicitors Regulation Authority (2004-8) • Author 2 books on Web Standards, edited 2 • Committee member for British Standards Institution (BSI) for the new standard for accessible websites • Member of Web Standards Project: Accessibility Task Force • Member of W3C Mobile Best Practices Working Group Web Standards for the Future – Bruce Lawson, Opera.com B.A., Honours English Literature and Language with Drama Theresa is blind But she can use the Web if made with standards The big picture WWW The big picture Western Western Web A web (pre)history • 1989 TBL proposes a project • 1992 <img> in Mosaic beta. Now 99.57% (MAMA) • 1994 W3C started at MIT • 1996 The Browser Wars • 1999 WAP, Web Content Accessibility Guidelines (WCAG) • 2000 Flash Modern web history • 2000-ish .com Crash - Time to grow up... • 2002 Opera Mobile with Small Screen Rendering • 2005 WHAT-WG founded, W3C Mobile Web Initiative starts • 2007 W3C adopts WHAT-WG spec as basis for HTML 5 • January 22, 2008 First public working draft of HTML 5 Standards at Opera • 25 employees work on standards • Mostly at W3C - a big player • Working on many standards • Bringing new work to W3C • Implementing Standards properly (us and you!) (Web Standards Curriculum www.opera.com/wsc) Why standards? The Web works everywhere - The Web is the platform • Good standards help developers: validate; separate content and presentation - means specialisation and maintainability.
    [Show full text]
  • (Vrtp) Design Rationale
    Presented at Workshops on Enabling Technology: Infrastructure for Collaborative Enterprises (WET ICE): Sharing a Distributed Virtual Reality, Massachusetts Institute of Technology, Cambridge Massachusetts, June 18-20 1997. virtual reality transfer protocol (vrtp) Design Rationale Don Brutzman, Mike Zyda and Kent Watsen Mike Macedonia Code UW/Br, CS/Zk, CS/Wa Fraunhofer Center for Research in Naval Postgraduate School Computer Graphics Inc. Monterey California 93943-5000 USA 167 Angell Street 408.656.2149 voice, 408.656.3679 fax Providence Rhode Island 02906 USA [email protected] [email protected] 401.453.6363 voice, 401.453.0444 fax [email protected] [email protected] http://www.stl.nps.navy.mil/~brutzman/vrtp/vrtp_design.ps Abstract We propose a new protocol at the application layer, the The capabilities of the Virtual Reality Modeling virtual reality transfer protocol (vrtp). vrtp is intended to Language (VRML) permit building large-scale virtual significantly extend http in order to provide full support for environments (LSVEs) using the Internet and the World LSVE requirements by enabling a spectrum of functionality Wide Web. However the underlying network support between client-server and peer-peer, all optimized on local provided by the hypertext transfer protocol (http) is desktop computers and across the global Internet. insufficient for LSVEs. Additional capabilities for Years of effort on widely distributed interactive 3D lightweight peer-to-peer communications and network graphics applications have clearly identified networking monitoring need to be combined with the client-server issues as the critical bottlenecks preventing the creation of capabilities of http. To accomplish this task, we present a LSVEs.
    [Show full text]
  • Designing and Implementing the OP and OP2 Web Browsers
    Designing and Implementing the OP and OP2 Web Browsers CHRIS GRIER, SHUO TANG and SAMUEL T. KING, University of Illinois at Urbana-Champaign Current web browsers are plagued with vulnerabilities, providing hackers with easy access to computer systems via browser-based attacks. Browser security efforts that retrofit existing browsers have had lim- ited success because the design of modern browsers is fundamentally flawed. To enable more secure web browsing, we design and implement a new browser, called the OP web browser, that attempts to improve the state-of-the-art in browser security. We combine operating system design principles with formal methods to design a more secure web browser by drawing on the expertise of both communities. Our design philosophy is to partition the browser into smaller subsystems and make all communication between subsystems sim- ple and explicit. At the core of our design is a small browser kernel that manages the browser subsystems and interposes on all communications between them to enforce our new browser security features. To show the utility of our browser architecture, we design and implement three novel security features. First, we develop flexible security policies that allow us to include browser plugins within our security framework. Second, we use formal methods to prove useful security properties including user interface invariants and browser security policy. Third, we design and implement a browser-level information-flow tracking system to enable post-mortem analysis of browser-based attacks. In addition to presenting the OP browser architecture, we discuss the design and implementation of a second version of OP, OP2, that includes features from other secure web browser designs to improve on the overall security and performance of OP.
    [Show full text]
  • 1 Chapter -3 Designing Simple Website Using Kompozer
    RSCD Chapter -3 Designing Simple Website Using KompoZer ------------------------------------------------------------------------------------------- 1. ……………plays a very important role in a business now-a-days. a) Website b) webpage c) Web browser d) Web host 2. …………….is a collection of interlinked web pages for a specific purpose. a) Website b) webpage c) Web browser d) Web host 3. ………….defines what we want to achieve by developing a website. a)Objective b) Goal c) Planning d) Target 4. Once by knowing the reason for developing a website, you must decide …….of the website. a)Objective b) Goal c) Planning d) Target 5. ……….means for whom the website is to be developed. a)Objective b) Goal c) Planning d) Target audience 6. From the following which is important for content of a webpage? a) Text and graphics for website b) Content as per visitor’s requirements c) Too short or too long content d) All of these 7. Who provides trial version of the software for free download? a) Editor b) Vendor c) Visitor d) None 8. The visual diagram of the website is known as ……………… a) Site Map b) Image Map c) Site Editor d) Site Browser 9. The website should contain should be classified into ………….categories. a) General b) Detailed c) Simple d) Both a and b 10. What is the first step for planning a website? a) Homepage b) Target audience c) Objective and Goal d) Browser compatibility 11. The website must contain ………………….information. a) Complete b) relevant c) incomplete d) Both a and b 12. What is the key point of a website? a) Content b) Homepage c) Objective and Goal d) Browser Compatibility 13.
    [Show full text]
  • WEB-BASED ANNOTATION and COLLABORATION Electronic Document Annotation Using a Standards-Compliant Web Browser
    WEB-BASED ANNOTATION AND COLLABORATION Electronic Document Annotation Using a Standards-compliant Web Browser Trev Harmon School of Technology, Brigham Young University, 265 CTB, Provo, Utah, USA Keywords: Annotation, collaboration, web-based, e-learning. Abstract: The Internet provides a powerful medium for communication and collaboration through web-based applications. However, most web-based annotation and collaboration applications require additional software, such as applets, plug-ins, and extensions, in order to work correctly with the web browsers typically found on today’s computers. This in combination with the ever-growing number of file formats poses an obstacle to the wide-scale deployment of annotation and collaboration systems across the heterogeneous networks common in the academic and corporate worlds. In order to address these issues, a web-based system was developed that allows for freeform (handwritten) and typed annotation of over twenty common file formats via a standards-compliant web browser without the need of additional software. The system also provides a multi-tiered security architecture that allows authors control over who has access to read and annotate their documents. While initially designed for use in academia, flexibility within the system allows it to be used for many annotation and collaborative tasks such as distance-learning, collaborative projects, online discussion and bulletin boards, graphical wikis, and electronic grading. The open-source nature of the system provides the opportunity for its continued development and extension. 1 INTRODUCTION did not foresee the broad spectrum of uses expected of their technologies by today’s users. While serving While the telegraph and telephone may have cracked this useful purpose, such add-on software can open the door of instantaneous, worldwide become problematic in some circumstances because communication, the Internet has flung it wide open.
    [Show full text]
  • Automated Cross-Browser Compatibility Testing
    Automated Cross-Browser Compatibility Testing ∗ Ali Mesbah Mukul R. Prasad Electrical and Computer Engineering Trusted Systems Innovation Group University of British Columbia Fujitsu Laboratories of America Vancouver, BC, Canada Sunnyvale, CA, USA [email protected] [email protected] ABSTRACT web browsers render web content somewhat differently [18, With the advent of Web 2.0 applications and new browsers, 24, 25, 26]. However, the scope and impact of this problem the cross-browser compatibility issue is becoming increas- has been rapidly growing due to two, fairly recent trends. ingly important. Although the problem is widely recognized First, modern, rich-content web applications have a heavy among web developers, no systematic approach to tackle client-side behavioral footprint, i.e., they are designed to ex- it exists today. None of the current tools, which provide ecute significant elements of their behavior exclusively on the screenshots or emulation environments, specifies any notion client-side, typically within the web browser. Further, tech- of cross-browser compatibility, much less check it automat- nologies such as Ajax [12], Flash, and event-handling for ically. In this paper, we pose the problem of cross-browser dynamic HTML, which support this thick-client behavior, compatibility testing of modern web applications as a `func- are the very aspects in which web browsers differ. tional consistency' check of web application behavior across Second, recent years have seen an explosion in the num- different web browsers and present an automated solution ber of available web browsers. There are nearly 100 different for it. Our approach consists of (1) automatically analyzing web browsers available today [31].
    [Show full text]
  • Document Object Model
    Document Object Model CITS3403: Agile Web Development Semester 1, 2021 Introduction • We’ve seen JavaScript core – provides a general scripting language – but why is it so useful for the web? • Client-side JavaScript adds collection of objects, methods and properties that allow scripts to interact with HTML documents dynamic documents client-side programming • This is done by bindings to the Document Object Model (DOM) – “The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.” – “The document can be further processed and the results of that processing can be incorporated back into the presented page.” • DOM specifications describe an abstract model of a document – API between HTML document and program – Interfaces describe methods and properties – Different languages will bind the interfaces to specific implementations – Data are represented as properties and operations as methods • https://www.w3schools.com/js/js_htmldom.asp The DOM Tree • DOM API describes a tree structure – reflects the hierarchy in the XTML document – example... <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> A simple document </title> </head> <body> <table> <tr> <th>Breakfast</th> <td>0</td> <td>1</td> </tr> <tr> <th>Lunch</th> <td>1</td> <td>0</td> </tr> </table> </body> </html> Execution Environment • The DOM tree also includes nodes for the execution environment in a browser • Window object represents the window displaying a document – All properties are visible to all scripts – Global variables are properties of the Window object • Document object represents the HTML document displayed – Accessed through document property of Window – Property arrays for forms, links, images, anchors, … • The Browser Object Model is sometimes used to refer to bindings to the browser, not specific to the current page (document) being rendered.
    [Show full text]
  • Chapter 10 Document Object Model and Dynamic HTML
    Chapter 10 Document Object Model and Dynamic HTML The term Dynamic HTML, often abbreviated as DHTML, refers to the technique of making Web pages dynamic by client-side scripting to manipulate the document content and presen- tation. Web pages can be made more lively, dynamic, or interactive by DHTML techniques. With DHTML you can prescribe actions triggered by browser events to make the page more lively and responsive. Such actions may alter the content and appearance of any parts of the page. The changes are fast and e±cient because they are made by the browser without having to network with any servers. Typically the client-side scripting is written in Javascript which is being standardized. Chapter 9 already introduced Javascript and basic techniques for making Web pages dynamic. Contrary to what the name may suggest, DHTML is not a markup language or a software tool. It is a technique to make dynamic Web pages via client-side programming. In the past, DHTML relies on browser/vendor speci¯c features to work. Making such pages work for all browsers requires much e®ort, testing, and unnecessarily long programs. Standardization e®orts at W3C and elsewhere are making it possible to write standard- based DHTML that work for all compliant browsers. Standard-based DHTML involves three aspects: 447 448 CHAPTER 10. DOCUMENT OBJECT MODEL AND DYNAMIC HTML Figure 10.1: DOM Compliant Browser Browser Javascript DOM API XHTML Document 1. Javascript|for cross-browser scripting (Chapter 9) 2. Cascading Style Sheets (CSS)|for style and presentation control (Chapter 6) 3. Document Object Model (DOM)|for a uniform programming interface to access and manipulate the Web page as a document When these three aspects are combined, you get the ability to program changes in Web pages in reaction to user or browser generated events, and therefore to make HTML pages more dynamic.
    [Show full text]
  • CTE Course Description and Standards Crosswalk
    DISTRICT NAME: SITKA SCHOOL DISTRICT CTE Course Description and Standards Crosswalk Course Information Course Name Web Design & Development Course Number 0682 Number of High School 0.5 Credits Sequence or CTEPS (You must first have the Sequence N/A or CTEPS entered into the EED-CTE system.) Date of district Course May 2013 Revision Career & Technical Student Organization (CTSO) CTSO embedded in this Suggested CTSO: Technology Student Association - http://www.tsaweb.org/ sequence Occupational Standards National Workforce Center for Emerging Technologies (NWCET) http://www.washington.edu/accessit/webdesign/nwcet_standards.htm SkillsUSA (SUSA-CP) (SUSA-3D) (SUSA-E) http://www.workforcereadysystem.org/media/blueprints/ComputerProgramming_blueprint.pdf http://www.workforcereadysystem.org/media/blueprints/3Dvisualization_blueprint.pdf Source of Occupational http://www.workforcereadysystem.org/media/blueprints/Employability_blueprint.pdf Standards International Society for Technology in Education (ISTE) www.iste.org World Wide Web Consortium (W3C) http://www.w3.org/ NWCET – Web Development and Administration Cluster A. Perform Technical Analysis (A1-A2, A4-A6) B. Perform Web Programming (B1-B4) C. Develop, Deliver and Manage Content (C4-C6) D. Implement and Maintain Site and Applications (D1-D4) F. Manage Enterprise-wide Web Activities (F1, F4) G. Perform Testing and Quality Assurance (G3-G5) SUSA-CP – SkillsUSA Computer Programming (see link above) Names/Numbers of SUSA-3D - SkillsUSA Visualization and Animation (see link above) Occupational
    [Show full text]