Imran Sarwar Bajwa, M. Abbas Choudhary [2006], "Automatic Web Layout Generation using Natural Language Processing Techniques", in 2nd International Conference From Scientific Computing to Computational Engineering, (IC-SCCE 2006) Athens, Greece, pp:334-340

1. 2nd International Conference “From Scientific Computing to Computational Engineering”
2nd IC-SCCE
Athens, 5-8 July, 2006
© IC-SCCE
AUTOMATIC WEB LAYOUT GENERATION USING NATURAL
LANGUAGE PROCESSING TECHNIQUES
Imran Sarwar Bajwa, Imran Siddique, M. Abbas Choudhary*
Faculty of Computer and Emerging Sciences
*Balochistan University of Information technology and Management Sciences, Quetta
P.O.BOX- 87300, Quetta Pakistan
imransbajwa@yahoo.com, imran@buitms.edu.pk , abbas@buitms.edu.pk
Keywords: Web layout, intelligent systems, Human Computer Interaction, Automatic text understanding, Natural
language processing
Abstract. Web layout designing is a difficult, complex and fuzzy problem to address. The designing of a web layout
exactly according to the user’s requirements is a real tedious issue. Adequate information, cognitive assistance and a
well defined computing mechanism is required to design a well-accepted web-layout. To assist the novel users, an
automated system were required which can design required web layout intelligently and satisfy given preferences
and constraints. A web layout is basically the arrangement of the various web contents on a web page and it is highly
integral and significant component of the structural design of the website. Often the websites from various
perspectives have their peculiar web layouts and designs. The designed system helps to automatically generate some
proposed web. User only provides his particular business related requirements in the form of simple English text.
The designed system bases on a rule based algorithm which reads the user requirements, understand the scenario,
extracts the required information and then at the last automatically designs some sample web layouts. User can use
them with proper adjustments. This automated system can really save the time of the user and web designer for later
web designing process.
1. INTRODUCTION
There are many fields of software engineering and purposely web designing is one of the important fields which has
absolutely revolutionized and grasped the way of communication, information interchange and business styles. To
design a successful and excellent website is real technical task. Web designing field comprises various aspects. A
web designer has to concentrate on various aspects as the web contents, web technology, web visuals and web
economics [4]. Web contents related to the actual data, facts and figures which are actually placed on a web page.
These web contents provide the building blocks for the complete designing of a building that is typically a website.
Web technology provides the actual functionality of a website in the variety of forms, reports, dynamic web content
generation and others [1]. The core functionality of a website depends upon the particular web technology that has
been comprised for its designing purpose. Web visuals are primarily related to the outlook, shape, looks and feels of
a website. This is the feature which principally attracts the viewers and influences them to surf on that particular
website. The web visuals may consist of static images, animated images, audio and video streams for batter and long-
lasting impact of the website. In the last, the web economics contributes the economics rectifications where required
[3]. The web economics helps the web surfers to perform business transactions through web.
The goals and requirements of the user are major persuading parameters that specifically influence the various
aspects of website designing. This type of designing can be named as Requirement Specific Designing (RSD) [3].
All the four web features discussed earlier are significant at their own. But a web designer concentrates on various
aspects in various scenarios. As during the design of a personal homepage, web economics considerations are not
required [8]. On the other hand, a manufacturing company website may not require the highly visual considerations.
As the major issue is to present the company’s products and manifest the all provided services by the company in a
comprehensive way.
A web layout is basically the arrangement of the various web contents on a web page and it is highly integral and
significant component of the structural design of the website [7]. Often the websites from various perspectives have
their peculiar web layouts and designs. As business websites use more user forms and reports as compared to

2. Imran Sarwar Bajwa, Imran Siddique and M. Abbas Choudhary
informative website which ahs more menus and more graphics [5]. The introductory websites as of educational
institutes and universities are more regular and the commercial and showbiz websites rather more irregular and
informal. Showbiz and Personal web pages have more animated pictures, audio and video contents than any other
website. On behalf of this differentiation each website has own set of requirements for design and development.
2. PROBLEM STATEMENT
Designing layouts for websites rather commercial or non-commercial is the most effective and important part of web
designing process. Web designing process is a difficult process due to various factors as developer’s inexperience,
poorly defined process and unrealistic design understanding. The un-effective web-layout can be the major cause of
failure of a website. A website can be really in-effective and un-efficient if a piece of data required by a user is
present on a website but user is unable to search his required information from that particular website.
3. PROBLEM’S SOLUTION
The designed system “Automatic Web layout Generation using Natural Language Processing Techniques” helps to
automatically generate some proposed web layouts and forms according to the user’s given requirement and
guidelines. User only provides his particular business related requirements in the form of simple English text. The
designed system actually bases on a rule based algorithm which reads the user requirements, understand the scenario,
extracts the required information and then at the last automatically designs some sample web layouts. User can use
them with proper adjustments. This automated system can really save the time of the user and web designer for later
web designing process.
4. USEFUL WEB DESIGNING
In early web designing days, websites were small, simple and static. Information was less and websites were
typically specific, hence the design was easy and straightforward. Now a days data as aspects of a website have
grown up to an explosive size due to advancements in technologies and requirements [5]. A website can be
successful and excellent on the basis of various factors as its usefulness, correctness, usability and its pleasant
appearance. More or less all these features are directly related to the structural design of a website. Successful and
effective websites are useful to their users. A website is useful if she occupies the features of utility & usability.
• Utility describes the website’s functionality that a user hopefully meets his requirements and needs easily
• Usability describes the ability to manipulate the site’s features in order to accomplish a particular goal.
• Correctness is also a noteworthy issue. The user should find precise and related information on a particular
web page.
• Pleasant appearance of a website is main key of success or failure for a particular website. More pleasant the
website is healthy chances are there for its success and usefulness.
These entire four features ultimately relate to the layout design of a website and more or less constitute toe the
success factor of a website. A website may be failed due to its complex and unrealistic design [6]. Unrealistic design
means that the functions provided by the websites are so confusing that a website is not functionally useful. Usable
sites are easy to learn, efficient and help the user to easily and satisfactorily accomplish their task in error free
manner [9 Layout design is difficult due to its vast scope as it involves tangible and intangible factors with such high
degree of vitality and subjectivity.
5. RELATED WORK
Web layout generation is not an old field of work. Work from last few years has been started in this really vital area.
The major area of interest is visual interface layout [8]. The research in visual interface layout design came into
being with the advent of new visual applications as web layout and graphical user interface for computer
applications. From so many examples some are UIDE [13], ADDI [14]. Various methods and techniques have been
defined to address the problem of automatic web-layout generation. These interface applications typically provide the
design process and also support incorporation of domain-specific preferences [3]. These applications provide the
half functionality as the course of mapping the domain objects and their properties into corresponding visual
properties in the layout design is left for the user. Some applications also tend to use the visual knowledge base to
solve this problem [10].

3. Imran Sarwar Bajwa, Imran Siddique and M. Abbas Choudhary
These defined models can assist layout designers in addressing the dynamics of the problem in an efficient manner.
The whole related work in this area has been done in the perspective of facilitating the experts. No work has been
done for the novels. A person who is not expert can not use these intimated software applications.
6. USED METHODOLOGY
The designed system works in two halves. In first half the user’s given input text is read by the system and after
proper understanding and analysis the necessary information is extracted. This information is further used to draw the
sample web layouts. In second half if user also wants to draw the user forms automatically, those can also be
designed by just providing the information about the forms as how many text boxes are required what are their names
and other properties.
6.1. Text Understanding
This is the major phase of automatically generating the web layouts. The user writes his requirements and
preferences in simple English text. For example a user gives following preferences to draw a sample web-layout.
“Draw level one module on the top width is 760, height is 140 and background image is ‘back.jpg’. In following row
there is a two level module whose width is 160 and height is 450. In parallel there are two more two level modules
with width 300 and height is 450. Draw a three level module whose width is 760 and height is 80.”
Designed system reads such type of input extracts the information after appropriate analysis. The extracted
information is as following
One_Level_module.height = 760
One_Level _module.width = 140
Two_Level _module.width = 160
Two_Level _module.height = 450
Two_Level _module.width = 300
Two_Level _module.height = 450
Two_Level _module.width = 300
Two_Level _module.height = 450
Three_Level _module.width = 760
Three_Level _module.height = 80
The modules are divided into levels or layers. These levels are defined by the user himself.
6.2. HTML Code Generation
After extracting this type of information the designed system has a vigorous ability of generating related HTML code
on the base of this information. On the behalf of extracted information nested tables technique is used. For this
particular example following code is generated by the system.
<html>
<body>
<center>
<table width=760 border=1>
<tr level=1> <! 1st layer >
<td width=760 height=140 module=1>
Text
</td>
</tr>
<tr level=2 > <! 2nd layer >
<table width=760 border=2>

4. Imran Sarwar Bajwa, Imran Siddique and M. Abbas Choudhary
<tr level =1>
<td width=140 height=450 module=1> Text </td>
<td width=300 height=450 module=1> Text </td>
<td width=300 height=450 module=1> Text </td>
</tr>
</table>
<tr width=760 height=140> <! 3rd layer >
<td> Text</td>
</tr>
</table>
</body>
</html>
Code -1: Automated HTML generated code
This HTML generated code is stored in a new file. The designed system is adequately flexible in analyzing the given
text as in the given example the levels and modules are define horizontally (first layer and then its particular
modules) and the analysis was successful. Designed system also has vigorous ability to analyze the text where layers
and modules are defined vertically (layers are defined first and then modules are defined with reference of the
defined layers).
6.3. Web Layout Generation
After compound analysis and generation of HTML code for web-layout the actual web page is generated by writing
the generate code into new file with .html extension. Following is the example of a generated sample web page
layout.
Figure 1.0: Automatically generated sample web-layout from user given preferences
7. ARCHITECTURE OF DESIGNED SYSTEM
Automatic web layout generation system using natural language processing techniques is adequately capable of
understanding the provided input text [2] and generates the required web-layout according to the provided
information. The designed system generates the web-layout in five distinct phases: Reading User Preferences,
Analyzing User Input, Information Extraction, HTML Code generation and finally producing the actual HTML file
containing web-layout. The intended system based on the structural design shown in the following figure 2.0.
Layout Sample
Web layout page

5. Imran Sarwar Bajwa, Imran Siddique and M. Abbas Choudhary
Web Layout Generation
Creating a new
HTML file
HTML Code Generation
Generating HTML
tags to draw tables
Information Extraction
Extracting HTML
tags information
Analyzing User Input
Text Understanding
with syntax Analysis
Reading User Preferences
User given input text
Input in Simple English
Figure 2.0: Structure of Automatic Web Layout Generation using Natural Language Processing Techniques
7.1 Reading User Preferences
This is the first phase and it helps to acquire input text preference from the user. User provides his requirements in
from of paragraphs of the text. This module reads the input text in the form characters and generates the words by
concatenating those input characters. This module is the implementation of the lexical phase. Lexicons and tokens
are generated in this module.
7.2 Analyzing User Input
This phase reads the input provided by the module 1 in from of words or tokens. These words are categorized into
various classes as verbs, helping verbs, nouns, pronouns, adjectives, prepositions, conjunctions, etc for the various
intentions as understanding and further processing of the text.
7.3 Information Extraction
This phase particularly extracts different objects as the levels and modules of the web-layout and the layouts are
determined by the <tr> tag and module are represented by <td> tag. Other respective attributes are extracted on the
basses of the input provided by the preceding module.
7.4 HTML Code Generation
After extracting the information required to draw the particular HTML tags as <table>, <tr>, <td> tags, the actual
code is generated by this phase which actually divides the whole web-page into component boxes and these boxes
are further used to add contest like text and images.
7.5 Web Layout Generation
This is the final phase which uses the extracted information from the previous phase to actually generate a new
HTML file. The HTML generated code in previous phase is embedded in this file. In response, the output is provided
to the user according to his requirements.

6. Imran Sarwar Bajwa, Imran Siddique and M. Abbas Choudhary
8. CONCLUSION
The designed system “Automatic Web Layout Generation using Natural Language Processing Techniques” was
started with the aim to not only support the experts and save their time but also provide a very simple interface to
novel users who are not highly skilled in designing HTML pages and are not skillful in using complex web designing
software applications. The user provides his requirements and preferences using simple English text and the designed
application performs the compound analysis of the given text after reading it. Desired HTML code is generated on
the basis of the extracted information. A new HTML file is generated which contains the newly generated web
layout. The used approach is based on a newly designed rule based framework which is highly capable of
understanding the user given text and performs the desired task.
9. FUTURE WORK
The designed system can be further improved in terms of its functionality as existing design is only capable of
designing the web-layout. There are so many other tasks still to perform as adding contents (text, images, etc) in this
web layout automatically. Furthermore, user forms are more common these days, more work done is required for
automatic generation of these user forms.
10. REFERENCES
[1] Nikiforos Karamanis and Hisar Maruli Manurung, 2002, Stochastic text structuring using the principle of
continuity, Proceedings of the Second International Conference on Natural Language Generation (INLG-2002),
Ramapo Mountains, NY
[2] Imran S. Bajwa, M. Asif Naeem, Riaz-Ul-Amin, M A. Choudhary, 2006 , Speech Language Processing Interface
for Object-Oriented Application Design using a Rule-based Framework, 4th International Conference on
Computer Applications 2006 Rangoon, Myanmar
[3] A.R. Ahmad, O. Basir, K. Hassanein, “Intelligent Expert System for Decision Support in the Layout Design”,
Working Paper, Systems Design Engineering, University of Waterloo, 2004.
[4] – Imran Sarwar Bajwa, M. Abbas Choudhary (2006), “Speech Language context understanding using a Rule
Based Framework”, International Conference on Intelligent Systems and Knowledge Engineering, Shanghai, China
[5] Malaisé Véronique, Zweigenbaum Pierre, Bachimont Bruno, Mining Defining Contexts to Help Structuring
Differential Ontologies Terminology, 11:1, 2005
[6] Drouin Patrick. "Detection of Domain Specific Terminology Using Corpora Comparison" Proceedings of the
Fourth International Conference on Language Resources and Evaluation (LREC), Lisbon, Portugal (2004)
[7] Gómez-Pérez Asunción, Fernández-López Mariano, Corcho Oscar, Ontological Engineering: with examples from
the areas of Knowledge Management, e-Commerce and the Semantic Web Springer (2004)
[8] Khoo Christopher, Chan Syin, Niu Yun, “The Many Facets of the Cause-Effect Relation”, The Semantics of
Relationships. Kluwer Academic Press. (2002). p. 51-70
[9] A. R. Ahmad, O.Basir, K.Hassanein, “Fuzzy Inferencing in the Web Page Layout Design”, Proc. of the 1st
Workshop on Web Services: Modeling, Architec. & Infrastructure, France, pp. 33-41, April 2003
[10] E. L. Blair, S. Miller, “An interactive approach to facilities design using microcomputers”, Journal of
Computers in Industrial Engineering, Vol. 9, pp. 91-102, 1985
[11] A.R. Ahmad, O. Basir, K. Hassanein, “Efficient Placement Heuristics for Ge netic Algorithm based Layout
Optimization”, Working Paper, Systems Design Engineering, University of Waterloo, 2003
[12] K.A. Dowsland, S. Vaid, W.B. Dowsland, “An algorithm for polygon placement using a bottom-left strategy”,
Euro J of Op Res., Vol. 141 (Special issue on cutting and packing), pp. 371-381, 2002
[13] Henderson, James Merlo, Paola Petroff, Ivan Schneider, Gerold (2002): "Using syntactic analysis to increase
efficiency in visualising text collections". In: Tseng, Shu-Chuan (ed.): Proceedings of the 19th International
Conference on Computational Linguistics (COLING 2002). Taipei, Taiwan: 335-341.
[14] J. Foley, W. Kim, S. Kovacevic, and K. Murray, “UIDE-An Intelligent User Interface Design Environment”, In
J W Sullivan and S.W. Taylor (Eds.), Intelligent User Interface, ACM, NY, 1991

7. Imran Sarwar Bajwa, Imran Siddique and M. Abbas Choudhary
[15] M.G. El-Said, G. Fischer, S.A. Gamael-Din, M. Zaki, “ADDI: A tool for automating the design of visual
interfaces”, Computers & Graphics, Vol 21, No. 1, pp. 79-87, 1997
[16] S. Kim, H. Alani,W. Hall, P. Lewis, D. Millard, N. Shadbolt, and M. Weal. 2002. Artequakt: Generating tailored
biographies with automatically annotated fragments from the web. In Proc. of the Semantic Authoring, Annotation
and Knowledge Markup Workshop in the 15th European Conf. on Artificial Intelligence