DECLARATION

The work reported in this report was carried out by me under the supervision of Prof.Tasleem
Mustafa, Department of Computer Science, Agriculture University Faisalabad, Pakistan.
I hereby declare that the Real-Time HTML Editor and the contents of the report is the
product of my own research and no part has been copied from any published source (except the
history). I further declare that this work has not been submitted for award of any other degree /
diploma. The university may take action if the information provided is found inaccurate at any
stage.

Submitted By

ACKNOWLEDGEMENTS
I am immeasurably indebted to ALLAH ALMIGHTY, the propitious, the benevolent and
sovereign whose blessings and glory flourished my thoughts and thrived my ambitions, giving me
talented teachers, affectionate parents, beloved brother, sweet sisters and unique friends. Trembling
lips and wet eyes praise for HOLY PROPHET (PBUH) for enlightening our conscience with the
essence of faith in ALLAH, converging all his kindness and mercy upon him.
The work presented in this manuscript is accomplished under the sympathetic attitude,
animate directions, observant pursuit, scholarly criticism, cheering perspective and enlightened
supervision of Prof.Tasleem Mustafa, Chairman at Department of Computer Science University of
Agriculture, Faisalabad. His effort towards the inculcation of spirit of handwork and maintenance of
professional integrity besides other valuable suggestions always serves as a beacon light through the
course of my life. Earnest and devout appreciation to my supervisory committee members
I owe a debt of gratitude to Mr. Tasleem Mustafa, chairman of Dept of Computer Science
Faisalabad who extended all possible help for the smooth execution of studies reported here.
Words are lacking to express my humble obligations to my parents in grateful appreciation
of their pray, help, kindness, understanding and moral support, when I needed. Special love and
thanks to our ALLAH.

Abstract
The aim of this project is to make an HTML Editor which makes it easy to make and edit the
existing HTML pages. It strikes to make an editor which can change the HTML coding at the RunTime and then show these changes to the user at the very same time so that a user can see what are
the effects of the changes on the web page design and its elements.
This editor also has a built-in Web-Browser which enables a user to see the web-page he/she is
designing and also to surf the internet if need be. Hence it is an easy to use Editor which cuts the
need of writing an HTML code in a notepad and then opening a separate Browser again and again
to watch the changes in design of the Web-Page.
Also a user is able to get the Source-Code of a web-Page in the rich textbox which makes it easy to
view the design of a developed web-page and also to use its coding for your own web-page.

Table of Contents
Chapter 1 Introduction....................................................................................................................1
1 Introduction.......................................................................................................................................1
1.1 Introduction to the Project..............................................................................................................1
1.2 Existing Systems............................................................................................................................1
1.3 Proposed System............................................................................................................................2
1.3.1 WYSIWYG HTML Editors...............................................................................................2
1.4 Problem in previous system...........................................................................................................2
1.5 Developed System..........................................................................................................................3
1.6 System objectives...........................................................................................................................4
1.7 System Requirements.....................................................................................................................4
1.7.1 Hardware Requirements:...................................................................................................4
1.7.2 Software Requirements:....................................................................................................4
1.8 SELECTED SOFTWARE..............................................................................................................4
1.8.1 Visual Studio 2013...........................................................................................................4
1.8.2 .NET Framework..............................................................................................................5
1.9 Programming Language.................................................................................................................5
1.9.1 Visual Basic.....................................................................................................................5
Chapter 2

Methodology..................................................................................................................6

SYSTEM ANALYSIS..........................................................................................................................6
2.1 INTRODUCTION..........................................................................................................................6
2.2 ANALYSIS MODEL......................................................................................................................6
2.3 WATER FALL MODEL.................................................................................................................7
2.3.1 System Requirements.......................................................................................................8
2.3.2 System Analysis...............................................................................................................8
2.3.3 System Design.................................................................................................................8
2.3.4 System Development........................................................................................................9

2.3.5 System Implementation.....................................................................................................9

2.3.6 System Testing.................................................................................................................9
2.3.7 Advantages Of Waterfall Model.........................................................................................9
2.4 FUNCTIONAL FEATURES OF THE MODEL..........................................................................11
2.4.1 INPUTS:........................................................................................................................11
2.4.2 OUTPUTS:....................................................................................................................11
2.5 Use-Case Diagram of the Real-Time HTML Editor....................................................................12
2.6 DFD Diagram of Real-Time HTML Editor..................................................................................13
2.7 Class Diagram of Real-Time HTML Editor.................................................................................14
2.8 ER Diagram of Real-Time HTML Editor....................................................................................15
2.9 System Architecture of Real-Time HTML Editor........................................................................16
2.10 Sequence Diagram of Real-Time HTML Editor........................................................................17
2.10.1 Sequence Diagram when used as HTML Editor......................................................17
2.10.2 Sequence Diagram when used as Web Browser.....................................................18
2.11 Tools of vb.net used to create the Editor....................................................................................19
2.11.1 Dialog Boxes................................................................................................................20
2.11.2 ToolStripMenuItem, ContextMenuStrip..........................................................................20
2.11.3 Adding the Cut, Copy and Paste Functionalities in a Form...............................................21
2.11.4 The Regex Class...........................................................................................................21
2.11.5 Web Browser................................................................................................................21
2.11.6 Timer...........................................................................................................................21
2.11.7 ProgressBar Control......................................................................................................22
Chapter 3

Results..........................................................................................................................23

3.1 Results..........................................................................................................................................23
3.2 User Manual.................................................................................................................................24
3.2.1 Welcome Form..............................................................................................................25
3.2.3 The OpenDialogue Box..................................................................................................27
3.2.4 Editor when being used a Web-Browser...........................................................................28

3.2.5 Getting Inner HTML Code of a Website...........................................................................29

Chapter4

Summary....................................................................................................................30

4.1 Summary......................................................................................................................................30

List of Figures
Figure 1 : Use Case Diagram of Editor..............................................................................................12
Figure 2 : DFD Diagram of Editor.....................................................................................................13
Figure 3 : Class Diagram of Editor....................................................................................................14
Figure 4 : ER Diagram of Editor........................................................................................................15
Figure 5 : Architecture of the HTML Editor......................................................................................16
Figure 6 : Sequence Diagram when used as Editor............................................................................17
Figure 7 : Sequence Diagram when used as Web Browser................................................................18
Figure 8 : User Manual.......................................................................................................................24
Figure 9 : Welcome Screen.................................................................................................................25
Figure 10 : Real-time HTML Editor with HTML Page.....................................................................26
Figure 11 : Open DialogueBox...........................................................................................................27
Figure 12 : Real-time HTML Editor used as a Web Browser............................................................28
Figure 13 : Real-time HTML Editor getting the Inner HTML-Code of a web-page.........................29

Chapter 1

Introduction

1 Introduction
An HTML editor is a computer program for editing HTML, the mark up of a webpage.
HTML (Hypertext Mark-up Language) is the set of markup symbols or codes inserted in a file
intended for display on a World Wide Web browser page. The markup tells the Web browser how to
display a Web page's words and images for the user. Each individual markup code is referred to as
an element (but many people also refer to it as a tag). Some elements come in pairs that indicate
when some display effect is to begin and when it is to end. HTML is a formal Recommendation by
the World Wide Web Consortium (W3C) and is generally adhered to by the major browsers,
Microsoft's Internet Explorer and Netscape's Navigator, which also provide some additional nonstandard codes.

1.1 Introduction to the Project

Real-Time HTML Editor is like a WYSIWYG Editor in which you can see what your web-page
would look like at the development time in the Web Browser.
It is made in vb.net using Visual Studio 2013 using Windows Form Application for development.
It is a Desktop Application and can be used in any OS environment.

1.2 Existing Systems

Currently HTML Pages can be written on any text editor like Notepad and then it can be seen on
any Web-Browser like Chrome and Internet Explorer etc.
Web browsers can read HTML files and render them into visible or audible web pages. Browsers do
not display the HTML tags and scripts, but use them to interpret the content of the page. HTML
describes the structure of a website semantically along with cues for presentation, making it a
markup language, rather than a programming language.
Although the HTML mark up of a web page can be written with any text editor, specialized HTML
editors can offer convenience and added functionality.

1.3 Proposed System

1.3.1 WYSIWYG HTML Editors
A WYSIWYG (pronounced "wiz-ee-wig") editor or program is one that allows a developer to see
what the end result will look like while the interface or document is being created. WYSIWYG is
an acronym for "what you see is what you get". A WYSIWYG editor can be contrasted with more
traditional editors that require the developer to enter descriptive codes (or markup ) and do not
permit an immediate way to see the results of the markup. The first true WYSIWYG editor was a
word processing program called Bravo. Invented by Charles Simonyi at the Xerox Palo Alto
Research Center in the 1970s, it became the basis for Simonyi's work at Microsoft and evolved into
two other WYSIWYG applications called Word and Excel .
WYSIWYG HTML editors provide an editing interface which resembles how the page will be
displayed in a web browser. These editors may be stand-alone programs, such as Adobe
Dreamweaver or Microsoft FrontPage (now discontinued), or come in the form of browser
extensions and allow editing directly within the web browser. Because using a WYSIWYG editor
may not require any HTML knowledge, they are often easier for an inexperienced computer user to
get started with.
The WYSIWYG view is achieved by embedding a layout engine based upon one used in a web
browser. The layout engine will have been considerably enhanced by the editor's developers to
allow for typing, pasting, deleting and manipulation of the content. The goal is that, at all times
during editing, the rendered result should represent what will be seen later in a typical web browser.
HTML is a structured mark-up language. There are certain rules on how HTML must be written if it
is to conform to W3C standards for the World Wide Web.
A given HTML document will have an inconsistent appearance on various platforms and computers
for several reasons:

1.4 Problem in previous system

Following are the problems in the previous systems:

Different browsers and applications will render the same mark-up differently.
o The same page may display slightly differently in Internet Explorer and Firefox on a
high-resolution screen, but it will look very different in the perfectly valid textonly Lynx browser. It needs to be rendered differently again on a PDA, an internetenabled television and on a mobile phone. Usability in a speech or Braille browser,
or via a screen-reader working with a conventional browser, will place demands on
entirely different aspects of the underlying HTML

 Browsers and computer graphics systems have a range of user settings.

o Resolution, font size, colour, contrast etc can all be adjusted at the user's discretion,
and many modern browsers allow even more user control over page appearance. All
an author can do is suggest an appearance.
Web browsers, like all computer software, have bugs
o They may not conform to current standards. It is hopeless to try to design Web pages
around all of the common browsers' current bugs: each time a new version of each
browser comes out, a significant proportion of the World Wide Web would need recoding to suit the new bugs and the new fixes.
WYSIWYG editors let you ignore certain aspects
o that are important to say the least. For instance, the need for the image ALT attribute
should be explicitly mentioned by the editors and images should not be included
without the ALT text. If the purpose of a WYSIWYG editor is to hold a beginner's
hand and guide him/her through the process of creating a web page, the programs
should tell the importance of certain HTML attributes and tags.

1.5 Developed System

Real-Time HTML Editor is like a WYSIWYG Editor in which you can see what your web-page
would look like at the development time in the Web Browser.
Following are the key features of Real-Time HTML Editor;
HTML Syntax Highlighting.
WYSIWG HTML Editor. Type directly in the HTML view.
Split view which enables you to see the design of your web-page as it appears in the
web-browser.
Built-in Web Browser which also can be used for internet surfing.
Load the HTML Source-Code of a web-page opened in the Browser into the Rich
Textbox.
Load and Save HTML Files.
SelectAll, Cut, Copy, Paste and Undo Function.
Open a New File which already has starting HTML Tags.
3

1.6 System objectives

Most editors also offer a HTML code viewer in which the HTML code of the web page is displayed.
So in essence, HTML editors make it very simple for you to create a web page without digging
through the intricacies of HTML.
Ability to type HTML code and see how it looks like at the same time.
What you see is what you get HTML Editor. WYSIWYG HTML Editor.
User friendly and easy to learn.
For simple edits, it is often faster to make changes to a page using editor.
Because you have to learn both HTML and the editor functions itself, a beginner will find a
text editor more difficult to use. Some people find text editors more difficult to design pages
in because they can't visualize how the page will look from just the HTML. This Editor can
be of help here as it is more easy to use.
Anyone can create web sites and put them online
Create web sites quickly
Provide a platform to start learn HTML

1.7 System Requirements

1.7.1 Hardware Requirements:
1

PIV 2.8 GHz Processor and Above

RAM 512MB and Above

HDD 20 GB Hard Disk Space and Above

1.7.2 Software Requirements:

1

WINDOWS OS (vista / 7 / 8 / 10)

Visual Studio .Net 2013 Edition

Internet Information Server 5.0 (IIS)

Visual Studio .Net Framework (3.5,4)

1.8 SELECTED SOFTWARE

1.8.1 Visual Studio 2013
State-of-the-art tools and services that you can use to create great apps for devices, the cloud, and
everything in between.
Microsoft Visual Studio is an integrated development environment (IDE) from Microsoft. It is
used to develop computer programs for Microsoft Windows, as well as web sites, web
4

applications and web services. Visual Studio uses Microsoft software development platforms such
as Windows API, Windows Forms, Windows Presentation Foundation, Store and Microsoft
Silverlight. It can produce both native code and managed code.

1.8.2 .NET Framework

The .NET Framework is a new computing platform that simplifies application development in the
highly distributed environment of the Internet. The .NET Framework is designed to fulfil the
following objectives:

To provide a consistent object-oriented programming environment whether object code is stored

and executed locally, executed locally but Internet-distributed, or executed remotely.

to provide a code-execution environment that minimizes software deployment and versioning

conflicts.
to provide a code-execution environment that guarantees safe execution of code, including code

created by an unknown or semi-trusted third party.

to provide a code-execution environment that eliminates the performance problems of scripted

or interpreted environments.
To make the developer experience consistent across widely varying types of applications, such
as Windows-based applications and Web-based applications.

1.9 Programming Language

Programming language of this Editor is VISUAL BASIC.

1.9.1 Visual Basic

Visual Basic .NET, the next generation of the Visual Basic language, is a fast and easy way to create
.NET-based applications, including XML Web services and Web applications.
Visual Basic .NET has many new and improved features that make it a powerful object-oriented
programming language, including inheritance, interfaces, and overloading. Other new language
features include free threading and structured exception handling. Visual Basic .NET also fully
integrates the .NET Framework and the Common Language Runtime, which provide language
interoperability, garbage collection, enhanced security, and improved versioning support.
A programmer can create an application using the components provided by the Visual Basic
program itself. Over time the community of programmers have developed new third party
components, keeping this programming language to modern standards. Programs written in Visual
Basic can also use the Windows API, which requires external function declarations.

Chapter 2

Methodology

SYSTEM ANALYSIS
2.1 INTRODUCTION
After analysing the requirements of the task to be performed, the next step is to analyse the problem
and understand its context. The first activity in the phase is studying the existing system and other is
to understand the requirements and domain of the new system. Both the activities are equally
important, but the first activity serves as a basis of giving the functional specifications and then
successful design of the proposed system. Understanding the properties and requirements of a new
system is more difficult and requires creative thinking and understanding of existing running system
is also difficult, improper understanding of present system can lead diversion from solution.

2.2 ANALYSIS MODEL

The model that is basically being followed is the WATER FALL MODEL, which states that
the phases are organized in a linear order. First of all the feasibility study is done. Once that part is
over the requirement analysis and project planning begins. If system exists one and modification
and addition of new module is needed, analysis of present system can be used as basic model. The
design starts after the requirement analysis is complete and the coding begins after the design is
complete. Once the programming is completed, the testing is done. In this model the sequence of
activities performed in a software development project are: 1

Requirement Analysis

Project Planning

System design

Detail design

Coding

Unit testing

System integration & testing

2.3 WATER FALL MODEL

WATER FALL MODEL was being chosen because all requirements were known beforehand and
the objective of our software development is the computerization/automation of an already existing
manual working system.

Changed Requirements

Communicated Requirements

Requirements Specification

Requirements Engineering

Design

Design
Specification

Executable Software Modules

Maintenance

Programming

Integrated Software Product

Integration

Delivered Software Product

Delivery

The Waterfall Model was first Process Model to be introduced. It is also referred to as a linearsequential life cycle model. It is very simple to understand and use. In a waterfall model, each phase
must be completed before the next phase can begin and there is no overlapping in the phases.
Waterfall model is the earliest SDLC approach that was used for software development.
The waterfall Model illustrates the software development process in a linear sequential flow; hence
it is also referred to as a linear-sequential life cycle model. This means that any phase in the
development process begins only if the previous phase is complete. In waterfall model phases do
not overlap.

Following are the different phases of the Waterfall Model:

2.3.1 System Requirements

The first phase involves understanding what you need to design and what is its function,
purpose etc. These requirements are presented to the team of programlly .it ensuremers.If this phase
is completed successfully; it ensures a smooth working of the remaining phases. All possible
requirements of the system to be developed are captured in this phase and documented in a
requirement specification doc. In communication phase the major task performed is requirement
gathering which helps in finding out exact need of customer. Once all the needs of the customer are
gathered the next step is planning.

2.3.2 System Analysis

System analysis is the second phase of the waterfall model also called as fact finding phase.
Analysis is the process of studying a problem to find the best solution of the problem. The purpose
of this phase is to learn exactly how the current system operates. In planning major activities like
planning for schedule, keeping tracks on the processes and the estimation related to the project are
done. Planning is even used to find the types of risks involved throughout the projects. Planning
describes how technical tasks are going to take place and what resources are needed and how to use
them.

2.3.3 System Design

Systems design is the process of defining the architecture, components, modules, interfaces,
and data for a system to satisfy specified requirements. Systems design could be seen as the
application of systems theory to product development.The requirement specifications from first
phase are studied in this phase and system design is prepared. System Design helps in specifying
hardware and system requirements and also helps in defining overall system architecture.

2.3.4 System Development

Systems development is the process of defining, designing, testing, and implementing a new
software application or program. The actual coding of the software is done in this phase. This
coding is done on the basis of the model designed in the modeling phase. So in this phase software
is actually developed and tested.

2.3.5 System Implementation

Systems implementation is the construction of the new system and the delivery of that
system into production (that is, the day-to-day business or organization operation). With inputs
from system design, the system is first developed in small programs called units, which are
integrated in the next phase. Each unit is developed and tested for its functionality which is referred
to as Unit Testing. In this last phase the product is actually rolled out or delivered & installed at
customers end and support is given if required. A feedback is taken from the customer to ensure the
quality of the product.

2.3.6 System Testing

System testing of software or hardware is testing conducted on a complete,
integrated system to evaluate the system's compliance with its specified requirements. System
testing falls within the scope of black box testing, and as such, should require no knowledge of the
inner design of the code or logic. There are some issues which come up in the client environment.
To fix those issues patches are released. Also to enhance the product some better versions are
released. Maintenance is done to deliver these changes in the customer environment.

2.3.7 Advantages of Waterfall Model

Here are few of the advantages of this model:

The waterfall model is the oldest and most widely used model in the field of software
development. There are certain advantages of this model, which makes it, one of the most

widely, used models as yet.

Being a linear model, it is very simple to implement. The amount of resources required to

implement this model are minimal.

Documentation is produced at every stage of the softwares development. This makes

understanding the product designing procedure, simpler.

After every major stage of software coding, testing is done to check the correct running of the
code.

The waterfall methodology stresses meticulous record keeping. Having such records allows for
the ability to improve upon the existing program in the future.

With the waterfall methodology, the client knows what to expect. Theyll have an idea of the
size, cost, and timeline for the project. Theyll have a definite idea of what their program will do
in the end.

In the case of employee turnover, waterfalls strong documentation allows for minimal project
impact.

10

2.4 FUNCTIONAL FEATURES OF THE MODEL

As far as the project is developed the functionality is simple, the objective of the proposal is
to make it possible for the user to edit and write HTML codes and then watch these changes at the
run-time. User does not have to open a separate Browser to view these changes and web-pages;
instead they can see it at the very same time.
INPUT AND OUTPUT
The main inputs, outputs and major functions of the system are as follows

2.4.1 INPUTS:
1.
2.
3.
4.
5.

User opens a HTML file.

User makes a new HTML File.
User can copy, paste and select the text in the page.
User requests the search.
User can edit the details and so on.

2.4.2 OUTPUTS:
1.
2.
3.
4.

User can watch the pages in Browser.

Users receive requested URL.
Displays search result.
User can get the Source-Code of a page opened in the Browser.

11

2.5 Use-Case Diagram of the Real-Time HTML Editor

A use case diagram at its simplest is a representation of a user's interaction with the system
that shows the relationship between the user and the different use cases in which the user is
involved. A use case diagram can identify the different types of users of a system and the different
use cases and will often be accompanied by other types of diagrams as well.
The following Use-Case Diagram shows the interaction of a user with Real-Time HTML Editor and
it shows the different actions that the user can perform in this system.

Editor
Editor

Figure 1

12

2.6 DFD Diagram of Real-Time HTML Editor

A Data Flow Diagram (DFD) is a graphical representation of the "flow" of data through an
information system, modeling its process aspects. A DFD is often used as a preliminary step to
create an overview of the system, which can later be elaborated.

Figure 2

13

2.7 Class Diagram of Real-Time HTML Editor

A class diagram in the Unified Modelling Language (UML) is a type of static
structure diagram that describes the structure of a system by showing the system's classes, their
attributes, operations (or methods), and the relationships among objects

Figure 3

14

2.8 ER Diagram of Real-Time HTML Editor

An entity-relationship diagram is a data modelling technique that creates a graphical
representation of the entities, and the relationships between entities.

Figure 4

15

2.9 System Architecture of Real-Time HTML Editor

CRHW ioT ec nM hb t T- L a e i xn
BetE B rdr o i 21 t xw o sr e
r
Figure 5

Explanation
This HTML Editor has two container panes.
Container 1:
In first container there is a rich textbox which enables a user to write and edit html pages. Source
code of any HTML file can be opened and edited here.
Container 2:
In the second container there is Web-Browser which enables a person to see the web page design
whose code it being written in the Rich Textbox .this Browser can also be used for separate internet
surfing.

16

2.10 Sequence Diagram of Real-Time HTML Editor

UML sequence diagrams model the flow of logic within your system in a visual manner,
enabling you both to document and validate your logic, and are commonly used for both analysis
and design purposes. Sequence diagrams are the most popular UML artifact for dynamic modeling,
which focuses on identifying the behavior within your system. Other dynamic modeling techniques
include activity diagramming, communication diagramming, timing diagramming, and interaction
overview diagramming. Sequence diagrams, along with class diagrams and physical data
models are in my opinion the most important design-level models for modern business application
development

2.10.1 Sequence Diagram when used as HTML Editor

Following is the sequence diagram of Real-Time HTML Editor when it is used only as an
Editor for an HTML page means when the user wants to design or edit an HTML page. Here the
user can edit, read or view the actual page.

Actual
Field

Text

Editor

Reading

Figure 6

17

Variance
Text Field

2.10.2 Sequence Diagram when used as Web Browser

Following is the sequence diagram of Real-Time HTML Editor when it is used only as a
Web-Browser for the navigation of a URL.

Figure 7

18

2.11 Tools of vb.net used to create the Editor

There are many tools available in visual studio 2013 for visual based programming. The
tools that I used for my Editor are as follows:

Images

Control Name

Description

Pointer

Used to move and resize controls and forms.

Button

This Control triggers an action when accessed.

Label

Displays a label text.

List Box

Control that lists number of items.

Picture Box

Display image files

Progress Bar

Display the progress of a task.

Rich Textbox

Allows editing, inputting rich text.

Text Box

Control used to input or display text.

Web Browser

Allows opening an html document in form.

2.11.1 Dialog Boxes

19

2.11.2 ToolStripMenuItem, ContextMenuStrip

Windows Forms contain a rich set of classes for creating your own custom menus with modern
appearance, look and feel. The MenuStrip, ToolStripMenuItem,ContextMenuStrip controls are
used to create menu bars and context menus efficiently.

S.N.

Control & Description

MenuStrip
It provides a menu system for a form.

ToolStripMenuItem
It represents a selectable option displayed on
a MenuStrip orContextMenuStrip. The ToolStripMenuItem control replaces
and adds functionality to the MenuItem control of previous versions.

2.11.3 Adding the Cut, Copy and Paste Functionalities in a Form

The methods exposed by the ClipBoard class are used for adding the cut, copy and paste
functionalities in an application. The ClipBoard class provides methods to place data on and
retrieve data from the system Clipboard.
KeyDown
20

 occurs when a key is pressed down and the control has focus
KeyPress
occurs when a key is pressed and the control has focus
KeyUp
occurs when a key is released while the control has focus

2.11.4 The Regex Class

The Regex class is used for representing a regular expression.
In Real-Time HTML Editor, Regular Expressions are used for coloring the tags of HTML with a
different color in the Rich Textbox. By using Regex class the color of the tags can be changed
which make it more visible in the layout page.

2.11.5 Web Browser

There is a built-in web-browser which can be used to watch the html code design and also to surf
the internet. It can also capture the code of the opened web-page by pressing the Get-Source-Code
button.
The other features of the Browser are as follow:

Search for a URL

Refresh

GoForward

GoBackward

Get the Source Code of a Page and display it in the Rich Textbox

2.11.6 Timer
Timer Control plays an important role in the Client side programming and Server side
programming, also used in Windows Services. By using this Timer Control, windows allow you to
control when actions take place without the interaction of another thread.

2.11.7 ProgressBar Control

It represents a Windows progress bar control. It is used to provide visual feedback to your users
about the status of some task. It shows a bar that fills in from left to right as the operation
progresses.

21

Chapter 3

Results

3.1 Results
Following are the results of the final product:

22

 This Real-Time HTML Editor can perform all the functionalities that are mentioned in the
key features of the Editor.
It makes it easy to design web pages in a user friendly environment.
HTML editor is great tools for beginners to quickly create web pages and put them on the
net.
The presence of a fully functional web-Browser make it easy to surf the internet if you have
some problem in understanding the design of the page or it can be used separately as a
browser.
We can get the source code of a web-page opened in the browser which can be useful in
understanding the layout and different elements on that page and can be educationally used.

3.2 User Manual

Following figure shows a description of all the components and their functionalities.

23

Figure 8

3.2.1 Welcome Form

24

This form appears at the start of the Real-Time HTML Editor. This welcome form has a
progress bar which is controlled by the timer.

Figure 9

3.2.2 The Real-Time HTML Editor with an HTML-Page

25

The below figure shows an HTML page being opened in the Real-Time HTML Editor. The
user can see the source code of the page in the Rich Textbox while the page design is loaded in the
web-Browser.

Figure 10

26

3.2.3 The OpenDialogue Box

The following figure shows the OpenDialogue Box that appears when the user presses the
OPEN button in the Editor to open a HTML page. Here the user can chose a file with .html or .htm
extension to be loaded in the Editor.

Figure 11

27

3.2.4 Editor when being used a Web-Browser

The following figure shows the Editor being used as a Stand-Alone Web-Browser. User can
enter a URL in the textbox and then press Enter and then can see the required web-page in the
second panel which contains a web-browser.

Figure 12

28

3.2.5 Getting Inner HTML Code of a Website

By pressing the GET-Source-Code button the inner html code of a website being opened in
the web browser can be loaded into the text area and then this code can be save in any location. The
following figure shows the Source-Code of www.facebook .com being loaded into the
RichTextarea.

Figure 13

29

Chapter4

Summary

4.1 Summary
It has been a great pleasure for me to work on this exciting and challenging project.RealTime HTML Editor is like a WYSIWYG Editor in which you can see what your web-page would
look like at the development time in the Web Browser.
Some people find text editors more difficult to design pages in because they can't visualize how the
page will look from just the HTML. This Editor can be of help here as it is more easy to use.
Apart from that this Editor can also be used as a stand-alone Web-Browser so that a user can browse
a website if he/she encounters a problem. Also, a user can get the Source code of a web page in the
rich textbox and save that source code for the future use. This source code can be helpful in learning
about the design of an already developed web-page.
Most editors also offer a HTML code viewer in which the HTML code of the web page is displayed.
So in essence, HTML editors make it very simple for you to create a web page without digging
through the intricacies of HTML.Ability to type HTML code and see how it looks like at the same
time. What you see is what you get HTML Editor. WYSIWYG HTML Editor. User friendly and
easy to learn. For simple edits, it is often faster to make changes to a page using editor.
Because you have to learn both HTML and the editor functions itself, a beginner will find a text
editor more difficult to use. Some people find text editors more difficult to design pages in because
they can't visualize how the page will look from just the HTML. This Editor can be of help here as
it is more easy to use.Anyone can create web sites and put them online Create web sites quickly
Provide a platform to start learn HTML

30

31