# How Do You Create a Graph in Data Structure?

//

Heather Bennett

Creating a Graph in Data Structure

Introduction:

Graphs are an essential data structure used to represent relationships between different objects or entities. They consist of a set of vertices or nodes connected by edges. In this tutorial, we will learn how to create a graph using HTML and CSS.

Step 1: Setting up the HTML structure

First, let’s start by setting up the basic HTML structure for our graph. We can use the `<div>` element with an id to represent each vertex in our graph.

``````<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div id="D"></div>
``````

Step 2: Styling the vertices

To make our vertices more visually appealing, let’s add some CSS styles to them. We can use the `<style>` tag within the `<head>` section of our HTML file.

``````<style>
div {
width: 50px;
height: 50px;
background-color: #f1f1f1;
text-align: center;
line-height: 50px;
}
</style>
``````

Step 3: Creating edges between vertices

To create edges between our vertices, we can use CSS pseudo-elements such as `::before` and `::after`. By positioning these pseudo-elements correctly, we can create lines connecting our vertices.

``````<style>
div {
/* vertex styles */
}

div::before,
div::after {
content: "";
position: absolute;
width: 2px;
background-color: #ccc;
}

#A::before {
top: 25px;
left: -25px;
height: 50px;
}

#A::after {
top: 25px;
left: 75px;
height: 100px;
}

/* Define edges for other vertices */

</style>
``````

Step 4: Adding labels to vertices

To add labels to our vertices, we can use the `<span>` element. This will allow us to easily style and position the labels within each vertex.

``<div id="A"><span>A</span></div>``

Step 5: Putting it all together

Now that we have set up the basic structure, styling, and edges for our graph, let’s put it all together in a single HTML file.

``````<!DOCTYPE html>
<html>

<title>Graph Tutorial</title>

<style>
/* CSS styles */
</style>

<body>

<div id="A"><span>A</span></div>
<div id="B"><span>B</span></div>
<div id="C"><span>C</span></div>
<div id="D"><span>D</span></div>

</body>

</html>
``````

Conclusion:

Creating a graph in data structure is an important skill to have. By using HTML and CSS, we can easily represent the vertices, edges, and labels of a graph. With this tutorial, you should now have a solid understanding of how to create a graph visually using HTML styling elements.