Design and Development of Website Validator using XHTML 1.0 Strict Standard Ibnu Gunawan Informatics Department Petra Christian University Arlinah Imam Rahardjo Surabaya, Indonesia Informatics Department [email protected] Petra Christian University Surabaya, Indonesia Yohanes Edwin [email protected] Informatics Department Petra Christian University Surabaya, Indonesia [email protected] Based on research done by w3.org[1] there are five reasons Web applications know that reliable scripting needs the why we must validate our web site : Validation as a debugging document to be parsed by User-Agents without any tool, Validation as a future-proof quality check, Validation eases unexpected error, and will make sure that their markup and maintenance, Validation helps teach good practices, Validation is CSS is validated before creating a rich interactive layer. a sign of professionalism. Therefore, we need an application that When surveyed, a large majority of Web professionals can help web designer create a good website with a valid HTML will state that validation errors is the first thing they will element and CSS. check whenever they run into a Web styling or scripting This paper will show how to design and develop that bug. application. Validation system process begins with lexical analysis, parsing, and then analysis of the tokens. Tokens being 2. Validation as a future-proof quality check analyzed are elements and attributes. These tokens are checked for compliance with the Document Type Definition (DTD) Checking that a page “displays fine” in several Standard. In addition to the tokens, this application checks web contemporary browsers may be a reasonable insurance that page structures too. This application can also perform CSS the page will “work” today, but it does not guarantee that validation in a web page. Moreover, the user can directly correct it will work tomorrow. an invalid web page, thus shortens correction time. This In the past, many authors who relied on the quirks of application was created using Microsoft Visual Basic .NET 2008 Netscape 1.1 suddenly found their pages appeared totally as a programming framework and Microsoft SQL Server 2008 blank in Netscape 2.0. Whilst Internet Explorer initially set Express as a database. out to be bug-compatible with Netscape, it too has moved Based on application testing, it can be concluded that the towards standards compliance in later releases. application can find errors either to validate HTML code or CSS Validation is one of the simplest ways to check validation. This application can also improve the web page whether a page is built in accordance with Web standards, complying with DTD XHTML 1.0 Strict Standard. and provides one of the most reliable guarantees that Keywords-component; Markup Validation, HTML, CSS, DTD, future Web platforms will handle it as designed. XHTML 1.0 Strict, Website Validator. 3. Validation eases maintenance I. INTRODUCTION It is reasonable to consider that standards such as Based on question that asked by w3.org to the web HTML and CSS are a form of “coding style” which is community in 2009 [1] there are some reason how we must globally agreed upon. Creating Web pages or applications validate our website, like: according to a widely accepted coding style makes them 1. Validation as a debugging tool easier to maintain, even if the maintenance and evolution While contemporary Web browsers do an increasingly is performed by someone else. good job of parsing even the worst HTML “tag soup”, some errors are not always caught gracefully. Very often, different software on different platforms will not handle 4. Validation helps teach good practices errors in a similar fashion, making it extremely difficult to Many professionals have been authoring the Web with apply style or layout consistently. HTML and CSS for years and know these technologies by Using standard, interoperable markup and style heart. Beginners and students, on the other hands, will find sheets, on the other hand, offers a much greater chance of automated checking tools invaluable in spotting mistakes. having one's page handled consistently across platforms Some teachers also stress that automated validation tests and user-agents. Indeed, most developers creating rich are a good introduction to broader, more complex quality concepts such as accessibility. CSS is designed primarily to enable the separation of 5. Validation is a sign of professionalism document content (written in HTML or a similar markup As of today, there is little or no certification for Web language) from document presentation, including elements professionals, and only few universities teach Web such as the layout, colors, and fonts[3]. This separation can technologies, leaving most Web-smiths to learn by improve content accessibility, provide more flexibility and themselves, with varied success. Seasoned, able control in the specification of presentation characteristics, professionals will take pride in creating Web content using enable multiple pages to share formatting, and reduce semantic and well-formed markup, separation of style and complexity and repetition in the structural content (such as by content, etc. Validation can then be used as a quick check allowing for table less web design). to determine whether the code is the clean work of a CSS can also allow the same markup page to be presented seasoned HTML author, or quickly hacked-together tag soup. in different styles for different rendering methods, such as on- Because the importance of this validation process, we build a screen, in print, by voice (when read out by a speech-based web validator that not only can do the validation but can fix the browser or screen reader) and on Braille-based, tactile devices. source code too. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the II. BACKGROUND author has specified. In order to validate website, our validator used xhtml 1.0 strict standard and there are 3 processes involved, begin with C. Lexical Analysis lexical analysis, continued with parsing, and then finished by Lexical analysis or scanning is the process where the token analysis. The following detailed explanation of what is stream of characters making up the source program is read it xhtml 1.0 strict standard, css, lexical analysis and parsing. from left-to-right and grouped into tokens. Tokens are sequences of characters with a collective meaning. There are A. XHTML 1.0 Strict usually only a small number of tokens for a programming December 1998 saw the publication of a W3C Working language: constants (integer, double, char, string, etc.), Draft entitled Reformulating HTML in XML. This introduced operators (arithmetic, relational, logical), punctuation, and Voyager, the codename for a new markup language based on reserved words [4]. HTML 4, but adhering to the stricter syntax rules of XML. By February 1999 the name of the specification had changed to XHTML 1.0: The Extensible HyperText Markup Language, and in January 2000 it was officially adopted as a W3C Recommendation[2]. There are three formal DTDs for XHTML 1.0, corresponding to the three different versions of HTML 4.01: 1. XHTML 1.0 Strict Figure1. Lexical Analyzer diagrams The XML equivalent to strict HTML 4.01, and The lexical analyzer takes a source program as input, and includes elements and attributes that have not been produces a stream of tokens as output. The lexical analyzer marked deprecated in the HTML 4.01 specification. As might recognize particular instances of tokens such as: of May 25 2011, XHTML 1.0 Strict is the document 3 or 255 for an integer constant token type used for the homepage of the website of the "Fred" or "Wilma" for a string constant token World Wide Web Consortium. numTickets or queue for a variable token 2. XHTML 1.0 Transitional Such specific instances are called lexemes. A lexeme is the The XML equivalent of HTML 4.01 Transitional, and actual character sequence forming a token; the token is the includes the presentational elements (such as center, general class that a lexeme belongs to. Some tokens have font strike and ) excluded from the strict version. exactly one lexeme (e.g., the > character); for others, there are 3. XHTML 1.0 Frameset many lexemes (e.g., integer constants). The XML equivalent of HTML 4.01 Frameset, and allows for the definition of frameset documents—a D. Parsing common Web feature in the late 1990s. Parsing is a process that analyzes a token or a few sequences to determine the grammatical structure of a B. CSS (Cascading Style Sheets) programming language [5]. Parsing is a process of converting Cascading Style Sheets (CSS) is a style sheet language a text into a tree. This tree will be processed further. used to describe the presentation semantics (the look and Parsing the first stage of the process is lexical analysis, formatting) of a document written in a markup language. It’s where an input is converted into meaningful tokens. This most common application is to style web pages written in token is then stored in a tree. The next stage is the stage HTML and XHTML, but the language can also be applied to syntactic analysis, namely the examination stage of the token any kind of XML document, including plain XML, SVG and to the standard expression. The last stage is the semantic XUL. parsing; here the code will be generated into a result. III. SYSTEM DESIGN Our Web site validator will follow 3 main sequence as a system. Begin with input (tahap sistem input), continued by processing (tahap pemrosesan validasi) and last one is output (tahap sistem output). Figure 2 show the system flowchart as a whole.