HTML CODE GENERATOR

Application Development -II Report Submitted

In partial fulfillment of the requirements for the award of the degree of

Bachelor of Technology
In
Computer Science and Engineering
By

V.SHARANYA RAO 21N31A05R0

V.DURGA SRI KRISHNA 21N31A05R3
Y.YOGESH 21N31A05R8

Under the esteemed guidance of

MRS.C.S.N.DURGHA

Department of Computer Science and Engineering

Malla Reddy College of Engineering & Technology

(Autonomous Institution- UGC, Govt. of India)

(Affiliated to JNTUH, Hyderabad, Approved by AICTE, NBA &NAAC with ‘A’ Grade)

Maisammaguda, Kompally, Dhulapally, Secunderabad – 500100

Websi

1
 te: www.mrcet.ac.in

Malla Reddy College of Engineering & Technology

(Autonomous Institution- UGC, Govt. of India)

(Affiliated to JNTUH, Hyderabad, Approved by AICTE, NBA &NAAC with ‘A’ Grade)

Maisammaguda, Kompally, Dhulapally, Secunderabad – 500100

website: www.mrcet.ac.in

CERTIFICATE
This is to certify that this is the bonafide record of the Application development-2 entitled

“HTML CODE GENERATOR” submitted by V.Sharanya Rao (21N31A05R0),V.Durga Sri

Krishna(21N31A05R3),Y.Yogesh(21N31A05R8)B.Tech in the partial fulfillment of the

requirements for the degree of Bachelor of Technology in Computer Science and Engineering,

Department of CSE during the year 2023-2024.

Internal Guide Head of the Department

P.Dastagiri Reddy Dr. S. Shanthi

Professor
External Examiner

2
 ABSTRACT OF THE APPLICATION:

This project is to translate the text to a html page. It would be amazing that you can write an HTML
code without actually writing it. Text to HTML conversion are helpful so that HTML web pages can
be easily uploaded to the Internet.HTML declares the different elements on a webpage such as
paragraphs ,buttons, textboxes, images, links etc. For creating text to html converters we have to create
a class model named Editor in which we are going to have our text editor template. After the model
we need to create a form of that model. A Text file contains plain text in the form of lines. If you want
to view or display the Text in a web browser then a smart solution is to change Text to HTML page
using Python and django.
Open the source text file in Python. Load the text file using the Document class .We will be using
django for the template and text editor. Add a library reference(import the library) to this python
project. For this project we require Http. HTTP is a request-response protocol that works in a client-
server computing model. Every time you visit a webpage an initial “request” is sent by the “client”
(i.e. your computer) and a “response” is sent back by a “server.” .The complete Django flow looks like
this:

HTTP Request -> URL -> View -> Model and Template -> HTTP Response

Here we use Django templates which presents the data as HTML with optional CSS. We have to import
path, Http response. Since it is difficult to keep track of all the packages a requirements.txt file is very
important.Requirements.txt file will appear with all our installed packages .Get the result of text
conversion as HTML. This is how we convert a text to HTML page programmatically in Python.

TOOLS USED: Djano,HTML and Python

3
TABLE OF CONTENT
DESCRIPTION PAGE NUMBER

CERTIFICATE 2
ABSTRACT 4
LIST OF FIGURES 7
Chapter 1 Introduction

1.1 Introduction 8
1.2 Problem Statement 8
1.3 Objective of Project 9
1.4 Goal of Project 9

Chapter 2 Problem Identification

2.1 Existing System 10

2.2 Proposed System 10

Chapter 3 Requirements

3.1 Software Requirements 11

3.2 Hardware Requirements 11

Chapter 4 Design and Implementation

4.1 Design 12
4.2 Implementation 12
4.3 Data Flow 13
4.4 Architecture 14
4.6 UML Diagrams 19

4
Chapter 5 Code

5.1 Source Code 20

5.2 Screenshot of Application 26

Chapter 6 Results & Conclusion

6.1 Results 31
6.2 Conclusion 31

5
 LIST OF FIGURES

FIGURE TITLE PAGE NUMBER

1. CSS styles 22

2. Strong
22

3. Heading tags 23

4. Text insertion 23

5. Background Color 25

CHAPTER – 1 INTRODUCTION

6
1.1 Introduction

Open the source text file in Python.Load the text file using the Document class.We will be using
django for the template and text editor.Add a library reference(import the library) to this python
project.For this project we require Http.HTTP is a request-response protocol that works in a client-
server computing model.Every time you visit a webpage an initial “request” is sentby the “client”
(ie your computer) and a “response” is sent back by a “server.”.The complete Django flow looks
like this: HTTP Request -> URL -> View -> Model and Template -> HTTP Response Here we use
Django templates which presents the data as HTML with optional CSS.We have to import
path,Httpresponse.Since it is difficult to keep track of all the packages a requirements.txt file is
very important.Requirements.txt file will appear with all our installed packages .Call the 'save()'
method, passing an output filename with HTML extension .Get the result of text conversion as
HTML.This is how we convert a text to HTML page programmatically in Python.

1.2 Problem Statement

Design and implement a software tool or program that generates HTML code dynamically based on
user input or predefined data. The HTML generator should take input from the user or retrieve data
from a database or other sources, and produce HTML markup that represents the desired structure and
content.

1.3 Objective

The objective of an HTML generator is to automatically generate HTML code based on specified
parameters or input data. The generator simplifies the process of creating HTML documents by
automating the repetitive tasks involved in writing the code manually.

The specific objectives of an HTML generator may vary depending on its purpose and features, but
some common objectives include:

7
 Efficiency: The generator aims to streamline the process of creating HTML code by automating
repetitive tasks and reducing the need for manual coding.

Customization: Depending on its capabilities, an HTML generator may offer customization options
to tailor the generated code to specific requirements. It may allow developers to define templates,
stylesheets, or configurations to adapt the output HTML to their desired design or functionality.

Code Reusability: An HTML generator may support code reuse by providing components, templates,
or snippets that can be easily inserted into the generated code. This promotes modular and scalable
development, allowing developers to reuse commonly used elements and reduce redundancy in their
HTML code.

1.4Goal of Project

The goal of the HTML generator is to simplify the process of creating HTML code, especially for
users who are not familiar with HTML markup. It will generate valid and well-structured HTML code that
can be used in websites, web applications, or other HTML-based projects.

The HTML generator will also consider accessibility and adhere to web standards and best practices to
ensure the generated HTML is accessible to users with disabilities and compatible across different web
browsers.

Overall, the HTML generator is user-friendly, efficient, and capable of generating high-quality HTML code
.
that meets the requirements and specifications provided by the user or the predefined data source

Chapter 2 Problem Identification

2.1 Existing System

8
 The current approach for translating text to HTML pages may involve manually
creating HTML code based on the text content. This can be a time-consuming and
error-prone process, especially for large amounts of text or complex formatting.

2.2 Proposed System

Increased efficiency: The use of machine learning algorithms and NLP

techniques would automate much of the process of translating text to HTML,
reducing the amount of manual effort required.

Scalability: The proposed system could be scaled up to handle large amounts of

input text, making it suitable for use in a variety of contexts.

Improved accuracy: By using algorithms to parse the input text and generate the
corresponding HTML code, the proposed system would be less prone to errors
and inconsistencies than a manual approach.

Chapter 3 Requirements

3.1 Software Requirements

The software requirements for our project that involves converting text to HTML using Django's
templating engine are:

9
 1. Python: Django is a Python web framework, so you will need to install Python on your
system.

2. Django: You will need to install the Django web framework on your system.

3. A text editor or integrated development environment (IDE): we have cktexteditor

Web server: Django comes with a built-in development server.

3.2 Hardware Requirements

• Intel® Pentium® III/M 1.4 GHz, or Pentium IV 1.4 GHz minimum.

• 512 MB RAM (1 GB for Microsoft® Windows Vista™, Microsoft® Windows 7 or
Microsoft® Windows 8 Release Preview).
• 300 MB free hard disk space.
• SVGA or higher-resolution monitor (XGA is recommended).
• Mouse or other pointing device.

Chapter 4 Design and Implementation

4.1 Design

The design of this html generator involves converting text to HTML using Django's templating engine will
depend on the specific requirements of the project. However, the general design of a Django project follows the
Model-ViewController (MVC) pattern. The Model represents the data and the business logic, the View
represents the presentation layer (in this case, the HTML), and the Controller acts as an intermediary between
the Model and the View. In Django, the Controller is represented by the URL routing and the View is represented

10
by the templates. Additionally, Django projects typically use a database to store and retrieve data, and may use
other components such as forms, middleware, and static files.

4.2 Implementation

1. Create a Django project: First, you need to create a new Django project using the command
Django – admin start project project name

2. Create a Django app: Next, create a Django app within the project using the command python
manage. pystart app appname

3. Create a view: In the Django app, create a view that takes the text input and generates the
HTML page. This can be done using Python string formatting or a template engine like Django's
built-in template engine.

4. Create a template: Create a template file that contains the HTML code for the page. This file
can be created in the app's templates folder.

5. Configure URL routing: Add a URL pattern to the project's URL routing configuration file
that maps the view to a URL.

6. Render the HTML page: In the view,use the render method to

generate the HTML page by passing the template file and any necessary
context variables.

11
4.3DATA FLOW

12
4.4 ARCHITECTURE

13
 4.6. UML DIAGRAM

A UML diagram is a way to visualize systems and software using Unified Modeling Language
(UML). Software engineers create UML diagrams to understand the designs, code architecture, and
proposed implementation of complex software systems. UML diagrams are also used to model
workflows and business processes. Coding can be a complicated process with many interrelated
elements. There are often thousands of lines of programming language that can be difficult to
understand at first glance. A UML diagram simplifies this information into a visual reference that’s
easier to digest. It uses a standardized method for writing a system model and capturing conceptual
ideas.

UML diagrams help keep track of relationships and hierarchies between important lines of code.
While these diagrams look similar to some decision trees or flowcharts, they have unique attributes.
Simplifying something as complex as a barrage of code is extremely useful for engineers and non-
technical stakeholders. It allows them to stay on top of the projects they are working on and avoid
getting lost in the endless complexities inherent in software programming. UML diagrams also
divide the components and subcomponents that are essential to building a piece of software.

A UML class diagram is a fundamental building block of any object-oriented solution. It depicts a
static, object-oriented system, defining projects by classes, attributes, and functions. In other words,
it shows the classes within a system and the operations of each one. Both software engineers and
business managers use this interaction diagram to model different connections involved within a
process.

In the diagram, the class is represented by a rectangle. Each rectangle is split vertically into three
sections. The top section has the name of the class, while the second and third sections provide
details about class operations, behaviors, and attributes.

Object diagrams show the attributes of different objects within a system. And like class diagrams,
they show the relationships between the objects in a piece of software. The difference is that object
diagrams use real-world examples. Object diagrams are also called instance diagrams because they
display what the system looks like at a specific moment in time

14
15
16
17
18
 Chapter 5 Code

5.1 Source Code

setting.py

INSTALLED_APPS = [

'blog',

'ckeditor',]

model.py from django.db import

models from ckeditor.fields import

RichTextField

# Create your models here.

class Post(models.Model):

body=RichTextField(blank=True,null=True)

forms.py from django

import forms from

.models import Post

from ckeditor.widgets

19
import

CKEditorWidget

class PostForm(forms.ModelForm): body =

forms.CharField(widget=CKEditorWidget(),label="Text Editor") class

Meta: model=Post fields=('body',)

views.py

from django import forms from .models

import Post from ckeditor.widgets import

CKEditorWidget

class PostForm(forms.ModelForm):

body = forms.CharField(widget=CKEditorWidget(),label="Text

Editor") class Meta: model=Post fields=('body',)

blog/template/blog/home.htm

home.html

<!DOCTYPE html>

<html lang="en">

20
<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Htmlgenerator</title>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

integrity="sha384-

ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2

M Zw1T" crossorigin="anonymous">

</head>

<style>

#cke_id_body{

width:inherit!important;

.htmleditor p{ font-

weight: 900; font-size:

20px;

.texteditor p label{

font-weight: 800; font-

size: 18px;

21
 }

#htmldata{ font-

weight: 600;

</style>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<a class="navbar-brand" href="#">Htmlgenerator</a>

<button class="navbar-toggler" type="button" data-toggle="collapse"

data-target="#navbarSupportedContent" aria-

controls="navbarSupportedContent" aria-expanded="false" arialabel="Toggle

navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

</div>

</nav>

<div class="container-fluid">

<div class="row">

22
 <div class="col-lg-6 col-md-6 col-sm-6 col-6">

<div class="texteditor">

{{form.media}}

{{form.as_p}}

</div>

<input type="submit" class="btn btn-info" onclick="TextConvert()">

</div>

<div class="col-lg-6 col-md-6 col-sm-6 col-6">

<div class="htmleditor">

<p>HTML:</p>

<div class="form-group">

<textarea class="form-control " rows="16" id='htmldata'>

</textarea>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

23
<script> function TextConvert(){ var x =

CKEDITOR.instances['id_body'].getData(); var

y=document.getElementById('htmldata');

y.innerHTML=x;

</script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"

integrity="sha384-

q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6j

iz o" crossorigin="anonymous"></script>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"

integrity="sha384-

UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIH

N Dz0W1" crossorigin="anonymous">

</script>

<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

integrity="sha384-

JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM
"

crossorigin="anonymous">

</script>

24
urls.py from django.contrib

import admin from django.urls

import path,include from blog

import views urlpatterns = [

path('admin/', admin.site.urls),

path('',views.home,name='home'),

]
5.2 Screenshot of Application

25
CSS styles:

26
Strong:

Heading tags:

27
Text insertion:

28
Background Color:

29
 Chapter 6 Results &Conclusion
6.1 Results

Result of our project is a web application that can take input text and generate HTML output based on
that text. The HTML output can be customized using a variety of template tags and variables, allowing
for dynamic content generation. Users can interact with the web application by entering text and
submitting it to the server for processing. The server will then generate the HTML output and return it to
the user's web browser for display. Overall, the result of our project is a powerful tool for generating
dynamic HTML content in a web application.

6.2 Conclusion
We conclude that we can use Django's template system and write
Python code to process the text and create the HTML page dynamically. Django comes with a powerful
template system that makes it easy to create HTML pages dynamically. In this way we can use
variables, loops, conditions, and other programming constructs in your HTML templates to create
dynamic content.

30