Introduction to Data Structure

Before we start understanding what is the use of Data Structure and why it is necessary to learn this topic we first need to know the term Data. 

What is Data?

If we go with the basic dictionary definition, the quantities, characters, or symbols on which operations are performed by a computer, may be stored and transmitted in the form of electrical signals and recorded on magnetic, optical, or mechanical recording media.

Now often people get confused between two terms that are Data and Information and people think that both words have similar meanings but it is not correct for this we need to understand when Data become Information. 

Data is an unordered and unrefined collection of facts and if the data is arranged in a systematic way then it gets a structure and becomes meaningful. This meaningful or processed data is called Information.

Before learning about different types of data structures let us first understand the basic difference between Data Type and Abstract Data Type.

What is Data Type?

In programming, a data type is used to define a certain type of value a variable can store and what kind of mathematical, relational, or logical operations are allowed on those values. Let's understand this with two different examples.

For example, the int data type can take only integer values, and all kinds of operations like addition, subtraction, multiplication, bitwise operations, etc are allowed. (alert-passed)

For example, the float data type can take only floating point values and bitwise and % (modulo operations) are not allowed. (alert-passed)

The data types like boolean, byte, short, int, long, float, double, and char are known as primitive data types, and apart from this, there is a concept of user-defined data type in which operations and values of the user-defined data type are not specified by the programming language but user have to specify by themselves. Example of user-defined data type is Structure, union, and enumeration.

What is Abstract Data Type (ADT)?

ADTs are like user-defined data types which define operations on values using functions without specifying what is there inside the function and how the operations are performed. ADT hides the inner structure and design of the data type from the user.

Example: Stack ADT

A stack consists of elements of the same type arranged in sequential order and it can be implemented using arrays or linked lists.

The list of operations that we can perform on the stack are:

• initialize() - Initializing it to be empty.
• push() - Insert an element into the stack.
• pop() - Delete an element from the stack.
• isEmpty() - Checks if stack is empty.
• isFull() - Checks if stack is full.

Note: Stack itself is a data structure that is implemented using other data structures like arrays or linked lists. (alert-success) 

What is Data Structure?

A data structure (DS) is a way of organizing data so that it can be used effectively. It is a way of organizing data in some fashion so that later on it can be accessed reread or updated the data quickly and easily. 

From the above explanation of ADT, we can say that data structure is used to implement an ADT.

In reality, different implementations of ADT are compared for time and space efficiency. The one best suited according to the current requirement of the user will be selected. (alert-passed)

Advantages of Data Structure:

• Efficiency: Proper choice of data structures make the program efficient in terms of space and time.
• Reusability: One implementation can be used by multiple client programs.
• Abstraction: Data structure is specified by an ADT which provides a level of abstraction. The client program doesn't have to worry about the implementation details.  

Why do we need Data Structure?

A Data Structure is a systematic way to organize data so that it can be used efficiently in terms of time and space com. We need Data Structure to provide an appropriate way to structure the data in such a way that it can produce some meaningful information that we can use in a more efficient way.

There are multiple different kinds of Data Structures available to store and manage our data but here we are going to take the example of one of the very popular data structures named Arrays. An array is a linear data structure that can store the elements of the same data type in a contiguous manner so instead of creating multiple variables of the same type we can create an array to store all the values. Like Array, we also use the String data structure to store the sequence of characters. 

Real Life Example of some popular Data Structure.

• Stack Data Structure is used in implementing redoing and undoing features in any application.
• Graph Data Structure stores friendship information on a social networking site.

Type of Data Structure.

There are basically two types of data structure, one a linear data structure and the other a non-linear data structure.

When all the elements are arranged in a linear (sequential) order then that data structure is known as a Linear data structure. Examples, are Arrays, Stack, Queue, and Linked List.

When all the elements are not arranged in a linear (sequential) order then that data structure is known as a non-linear data structure. Examples are trees and Graphs.

Static and Dynamic Data structure.

Static data structure: Memory allocation is done at compile time in a static data structure. The maximum size of the static data structure is fixed and it cannot be changed at run time. It provides faster access to elements but insertion and deletion are quite expensive. Example: Array

Dynamic Data structure: Memory is allocated at run time in a dynamic data structure. The size of the dynamic data structure is not fixed, they are flexible in size. It allows faster insertion and deletion but access to elements is quite expensive. Example: Linked List

👉Support Us by Sharing our post with others if you really found this useful and also share your valuable feedback in the comment section below so we can work on them and provide you best 😊.(alert-success) 

ASCII Table Chart

ASCII stands for Americal Standard Code for Information Interchange designed in 1963 as a standard character set for computers and electronic devices. It is a 7-bit character set that contains a total of 128 characters which includes numbers from 0-9, the upper case and lower case English alphabets A to Z, and many unique characters. 

This is a list of  ASCII (Americal Standard Code for Information Interchange) character codes with Hexa decimal, Octa decimal, and Binary Conversion. 

ASCII Table

Program to Build an Array from Permutation.

Given an array arr[] having n number of elements with zero-based permutation, we need to build a result array of the same length where result[i] = arr[arr[i]] for each 0 <= i < arr.length and return result.

Note: A zero-based permutation array is an array of distinct integers from 0 to n -1 where n is the number of elements in the array. (alert-success)

Input: arr = [0, 2, 1, 5, 3, 4]

Output: result = [0, 1, 2, 4, 5, 3]

Explanation: 

result = [arr[arr[0]], arr[arr[1]], arr[arr[2]], arr[arr[3]], arr[arr[4]], arr[arr[5]]]

       = [arr[0], arr[2], arr[1], arr[5], arr[3], arr[4]] 

       = [0, 1, 2, 4, 5, 3]

Approach 1: Simply create a new array of the same size and store the values of arr[arr[i]] in the new array.

//C++ Program to Build an Array from Permutation.
#include<iostream>
#include<vector>
using namespace std;

vector<int> buildpermutation(vector<int> arr){
    //size of given array
    int n = arr.size();

    vector<int> result(n);

    for(int i = 0; i < n; i++){
        result[i] = arr[arr[i]];
    }

    return result;
}

int main(){
    vector<int> arr = {0, 2, 1, 5, 3, 4};

    vector<int> result = buildpermutation(arr);

    for(int i = 0; i < result.size(); i++){
        cout<<result[i]<<" ";
    }
}

Output:

0 1 2 4 5 3 

• Time Complexity: O(n)
• Space Complexity: O(n)

Approach 2: The above solution is taking O(n) extra space. To solve this problem with O(1) space complexity, we need to find a way to store two values at one position. As we know that value of the input array ranges from 0 to n-1 where n is the number of elements present in the given array. To do this, we can store the input array value in modulo by n and get the required value by dividing the modified value by n. We can use the below formula to solve this problem.

[ arr[i] = arr[i] + n*(arr[arr[i]]%n) ]

Explanation: 

arr[0] = arr[0] + 6*(arr[arr[0]]%6)

         = 0 + 6*(arr[0]%6)

         = 0 + 6*(0%6)

         = 0 + 6*0

         = 0

arr[1] = arr[1] + 6*(arr[arr[1]]%6)

         = 2 + 6*(arr[2]%6)

         = 2 + 6*(1%6)

         = 2 + 6*1

         = 8

arr[2] = arr[2] + 6*(arr[arr[2]]%6)

         = 1 + 6*(arr[1]%6)

         = 1 + 6*(2%6)

         = 1 + 6*2

         = 13

arr[3] = arr[3] + 6*(arr[arr[3]]%6)

         = 5 + 6*(arr[5]%6)

         = 5 + 6*(4%6)

         = 5 + 6*4

         = 29

arr[4] = arr[4] + 6*(arr[arr[4]]%6)

         = 3 + 6*(arr[3]%6)

         = 3 + 6*(5%6)

         = 3 + 6*5

         = 33

arr[5] = arr[5] + 6*(arr[arr[5]]%6)

         = 4 + 6*(arr[4]%6)

         = 4 + 6*(3%6)

         = 4 + 6*3

         = 22

Now, all input array element is modified, and we can modulo the current value to get 

input array elements or divide the current array elements with n to get the required 

answer.

arr[0]/n = 0/6 =  0
arr[1]/n = 8/6 =  1
arr[2]/n = 13/6 = 2
arr[3]/n = 29/6 = 4
arr[4]/n = 33/6 = 5
arr[5]/n = 22/6 = 3

//C++ Program to Build an Array from Permutation.
#include<iostream>
#include<vector>
using namespace std;

vector<int> buildpermutation(vector<int> arr){
    //size of given array
    int n = arr.size();
    for(int i = 0; i <n; i++){
        arr[i] = arr[i] + n*(arr[arr[i]]%n);
    }
    for(int i = 0; i <n; i++){
        arr[i] = arr[i]/n;
    }
    return arr;
}

int main(){
    vector<int> arr = {0, 2, 1, 5, 3, 4};
    vector<int> result = buildpermutation(arr);
    for(int i = 0; i < result.size(); i++){
        cout<<result[i]<<" ";
    }
}

Output:

0 1 2 4 5 3 

• Time Complexity: O(n)
• Space Complexity: (1)

👉Support Us by Sharing our post with others if you really found this useful and also share your valuable feedback in the comment section below so we can work on them and provide you best 😊.(alert-success) 

HTML Elements Complete List with Example.

This blog post contains an alphabetical list of all the HTML elements with examples and explanations. 

What is HTML Elements?)

Element	Description
<!DOCTYPE>	The HTML document must start with <!DOCTYPE> declaration to inform the browser about the document type.
<a>	The <a> HTML element which is also known as the anchor element used with href attribute to create hyperlinks to web pages, files, different locations on the same page, or anything a URL can address. href holds the URL that the hyperlink is going to load. e.g. Click Me
<abbr>	The <abbr> HTML element is known as the Abbreviation element used to represent abbreviations or acronyms like "WHO", "CSS", "Dr.", and "Mr.". The title attribute is used with <abbr> to show the description of the abbreviation whenever the user hovers the mouse on it. e.g. Hover on -> HTML
<address>	The <address> HTML element is used to provide the contact information of a person or an organization. It can include any kind of contact information like email id, phone number, URL, location, etc.
<area>	The <area> HTML element is used to defines particular area inside an image map. This element is always used inside the <map> element which can add geometric areas to an image and add hyperlinks to that area.
<article>	The <article> HTML element represents a self-contained composition in a document, page, application or website.
<aside>	The <aside> HTML element is used to represent a portion of content that is indirectly related to the surrounding content. The <aside> content are usually placed as a side-bar in a HTML document.
<audio>	The <audio> HTML element is used to add sound content in HTML documents like music or other aduio streams, represented by using scr attribute or <source> element. The audio tag can contain more than one source tag and the browser will choose the most suitable one. HTML supports three audio formats: MP3, WAV, and OGG. e.g.
<b>	The <b> HTML element is used to represent bold text for giving more attention or for giving special importance. Tip: Most browser still support this <b> element but it is recommended to use CSS font-weight property or to use <strong> element for giving text speical importance.
<base>	The <base> HTML element is used to specifies the base/target URL for all relative URLs in a HTML document. There can be only one <base> element in a document and it must be inside <head> element.
<bdi>	The <bdi> HTML element stands for Bi-Directional Isolation and is used to isolate a part of the text that might be formatted in a different way from its surrounding text. e.g. When an Arabic quotation is added in an English string the browser implements the Unicode Bidirectional Algorithm to handle such a situation.
<bdo>	The <bdo> stands for Bi-Directional Override and is used Override the current text direction. The direction of the text is defined by the dir attribute with two different values ltr (left-to-right direction) and rtl (right-to-left direction).
<big>	The <big> HTML element is used to enclosed text for one level larger font-size (e.g. medium become large) than the surrounding text. Tips: It is not recommended to use this element because many browsers do not support it. Use CSS font-size property to change the font size.
<blink>	The <blink> HTML element is the non-standard element that flashes the enclosed text slowly on the screen. Tip: It is not recommended to use this element in HTML documents it is a bad design practice and many browsers do not support this feature.
<blockquote>	The <blockquote> HTML element is used quote a section of text which is taken from another source and browser usually add some indentation to <blockquote> elements. The cite attribute is used with URL as a value to specify the source of the quotation.
<body>	The <body> HTML element one the most important element used to represent all the content of an HTML document. There can be only one <body> element in an HTML document.
<br>	The <br> HTML element is an empty element also known as the Line Break element used to break lines in text. e.g. It is used in between paragraphs or for writing any poems or addresses.
<button>	The <button> HTML element clickable element which performs some action whenever a user clicks on it using mouse or keyboard. Tip: Always specify the type attribute for a button so a browser can understand it. e.g.
<canvas>	The <canvas> HTML element is a transparent container used for graphical drawing using JavaScript. The text content inside the <canvas> element will be displayed only when the browser does not support JavaScript or the <canvas> element.
<caption>	The <caption> HTML element is used to give a title to a table. It must be inserted immediately after the <table> tag. Tip: The caption content is by default center-aligned but you can use the CSS text-align property to place the content in the correct position.
<center>	The <center> HTML element was a block-level element used in HTML4 to center-align the text element. It is no longer recommended to use this feature it is not supported in HTML5.
<cite>	The <cite> HTML element is used to define the title of creative work like a book, a poem, a song, a movie, a painting, etc.
<code>	The <code> HTML element is used to define a piece of computer code in the default monospace font.
<col>	The <col> HTML element is used to define a column within a table present inside <colgroup> element. It is mainly used to apply the same style to an entire column instead of each row.
<colgroup>	The <colgroup> HTML element is used to create a group of one or more than one columns in a table. It is a child of <table> element which is mainly used to style the entire column together instead of each row.
<data>	The <data> HTML element is used to link the given piece of content with a machine-readable translation of the given content. Tip: If the content is time or date-related then we should use the <time> element.
<datalist>	The <datalist> is an HTML element which contain a set of <option> elements used to store pre-defined options to choose for an <input> element. It is basically used to create a drop-down list of available options.
<dd>	The <dd> HTML element is used in conjuction with <dl> and <dt> element for providing description, definition or value.
<del>	The <del> HTML element is used to represent a portion of text that has been deleted from the document. e.g. The browser usually shows deleted text like this- This text is deleted.
<details>	The <details> HTML element is used to create a widget for storing additional information and that will be visible only when the user toggle the widget to open state. e.g. Click Me This is an example of a details disclosure element.
<dfn>	The <dfn> HTML element is known as the "definition element" used to indicate that the term is going to define within the context. Rule: The nearest parent element must contain the definition or explanation for that term.
<dialog>	The <dialog> HTML element is used to create a dialog box like a subwindow or a popup on a web page.
<dir>	The <dir> HTML was used as a container for a directory of files but user use <ul> HTML element for list of files. Warning: It is no longer supported by HTML5.
<div>	The <div> HTML element stand for division which is used to separate different section of an HTML document. It is easy to style a <div> using class or id attribute. Note: By default, the browser always adds a line break before and after the <div> element.
<dl>	The <dl> HTML element is used to represent description list and it is always use with <dt> (defines terms) and <dd> (describes term) element.
<dt>	The <dt> HTML element is used to define a term in a description list and it is always use with <dl> (defines a description list) and <dd> (describes each term) element.
<em>	The <em> HTML element is used to represent emphasized text.
<embed>	The <embed> HTML element is a container used for content from an external resource such as a web page, a picture, video, or browser plug-in. Tip: It is better to use <img> tag to display images, <iframe> tag to display HTML and <video> tag to display videos.
<fieldset>	The <fieldset> HTML element is used to group related form elements together in a box.
<figcaption>	The <figcaption> HTML element is used to add caption for the parent content of <figure> element.
<figure>	The <figure> HTML element is used to specify self-contained content like a diagram or an image. Tip: Use <figcaption> to add caption for the <figure> element.
<font>	The <font> HTML element was used to define the font size, color, and face of the content. Warning: This element is no longer in use from HTML5 because now you can give all these properties using CSS properties.
<footer>	The <footer> HTML element is used to represent a footer for its nearest ancestor. It basically contains information about the owner of the content or shows copyright information.
<form>	The <form> HTML element is used to create a form with interactive controls and input fields to collect information from the user. The List of elements a form tag can contain to get information from user: <input>, <textarea>, <button>, <select>, <option>, <optiongroup>, <fieldset>, <label>, <output>
<frame>	The <frame> HTML element was used in HTML4 for creating a particular window within a <frameset>. It is recommended not to use both elements because it is not supported in HTML5.
<head>	The <head> HTML element is a container for metadata (information about data) like <title>, <script> and <style> sheets. <head> is always declared inside <html> tag and the data present in this tag is not displayed on the web page.
<header>	The <header> HTML element is used to group together the set of introductory content like website name, logo, or navigational links.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>	The <h1> HTML element represent heighest level of heading section. There are total six heading level from <h1> to <h6> and font-size keep on decreasing from each level. e.g. This is h1 Heading This is h2 Heading This is h3 Heading This is h4 Heading This is h5 Heading This is h6 Heading
<hr>	The <hr> HTML element represents a thematic break in HTML (e.g. shift of topic within a section). It is displayed as a horizontal rule or line that is used to separate content in an HTML page.
<html>	The <html> HTML element is the root element of an HTML document which hold all other HTML elements. Tip: It is always recommended to add a lang attribute in the side <html> tag used to declare the language of the Web page.
<i>	The <i> HTML element is used to represent a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, etc. The content inside <i> tag displayed in italic.
<iframe>	The <iframe> HTML element is an inline frame used to represent browsing context, showing another HTML page into current HTML document.
<img>	The <img> HTML element is used to add image into an HTML document. Technically images are not inserted into an HTML document, they are linked to an HTML document. The two very important attribute for the <img> tag are src (use to declare the path of the image) and alt (use to display alternate text if the image fail to load due to some reason)
<input>	The <input> HTML element use mostly use for creating an input field to collect data from users. Note: The default input type is text. Some example of <input> type: Checkbox Color Picker Choose Date Choose Date and Time Enter Email Hidden Image Range Enter Password Radio Button Search Box
<ins>	The <ins> HTML element is used to represent a range of text that is inserted into a document.
<kbd>	The <kbd> HTML element is used to define Keyboard input and the content by default stay in monospace font.
<label>	The <label> HTML element is used to give a caption for an several HTML elements. Tip: Always use an id attribute for a label tag element to bind the related element together.
<legend>	The <legend> HTML element is used to add caption to the <fieldset> parent element.
<li>	The <li> HTML element stands for a list item used to represent an item in a list. It is used inside ordered lists <ol>, unordered lists <ul> and menu list menu. The <ul> and <menu> list item is displayed as bullet points and <ol> list item is displayed as numbers or letters.
<link>	The <link> HTML element is an empty element used to specifies relationships between the current HTML document and an external resource. It is mostly used to link external CSS style sheets or to add the favicon to a website.
<main>	The <main> HTML element is used to specify the main content of an HTML document. There should not be more than one <main> element and content inside the main tag should be unique.
<map>	The <map> HTML element is used with <area> element to map an image (defining clickable area of an image)
<mark>	The <mark> HTML element is used to represent a marked or highlighted text. e.g. highlighted Text
<meta>	The <meta> HTML element is used to provide information about data and is always present in the head tag. The content of metadata is not visible on a web page but the browser can understand this to get information like character set, page description, viewport settings, title, etc.
<meter>	The meter HTML element is used to define scalar measurement within a known range or fractional value. e.g. Download 75%
<p>	The <p> HTML element is a block-level element that is used to represent a paragraph or block of text separated from an adjacent block by blank lines.

HTML Code Editor | AlgoLesson

This is an HTML Online Code Editor by AlgoLesson to edit and see the output in your browser itself. Write your HTML Code inside below Code Editor and Run the Code to see the result in the output box. Click on the Fullscreen icon ⛶ to open the code editor in fullscreen mode.

HTML Code

Output

Elements in HTML

An HTML Element is a component of an HTML document that helps us to give the desired structure to a web page. HTML Element starts with one starting tag, some content, and an ending tag. Everything from the beginning to the ending tag is considered one HTML Element.

HTML Element examples:

<h1>This is a Heading</h1>
<p>This is a Heading</p>
<hr>

Element	Description
<h1>	The <h1> element represents the highest level of the heading section. There are a total of six heading levels from <h1> to <h6>.
<p>	The <p> is a block-level element that is used to represent a paragraph or block of text separated from an adjacent block by blank lines.
<hr>	The <hr> element represents a thematic break in HTML (e.g. shift of topic within a section). It is displayed as a horizontal rule or line that is used to separate content in an HTML page.

Some HTML elements do not have any content so they do not require any closing tag and these types of elements are called Empty elements. (alert-warning)

Nested Elements in HTML.

When one element is present inside another, they are called a nested HTML element. When you start writing HTML code you will notice that almost all elements in an HTML document are nested by one or more elements.

Nested Element example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>This is the title of the Web Page.</title>
  </head>
  <body>
    <h1>This is a heading.</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

(getButton) #text=(Try in Code Editor) #icon=(link) #color=(#34C722)

The above example contains many HTML elements like (<html>, <head>, <meta>, <title>, <body>, <h1> and <p>). (alert-success)

The <html> is the root element of the entire HTML document. Inside <html> you can see there is one <head> element and one <body> element so we can say that <head> and <body> element are nested inside <html> tag. (alert-success)

The <meta> and <title> elements are present with two levels of nesting because they are inside <head> element and <head> element itself present inside <html> element. (alert-success)

The <h1> and <p> elements are also present with two levels of nesting because they are inside <body> element and <body> element itself present inside <html> element. (alert-success)

Few important points to keep in mind about HTML Elements:

• Some HTML elements give you correct results even if you forget to add the ending tag but it is not recommended to do so because sometimes it might give us an unexpected error.

<h1>This is a heading.
<p>This is a paragraph.

Output:

In the above output, we can see that <h1> tag is giving us correct result even without end tag but <p> tag is showing incorrect result and acting like <h1> tag because the ending tag for <h1> is missing and HTML document is unable to find the ending of heading element. (alert-warning)

HTML tags are not case-sensitive but it is always recommended to work work with lowercase in HTML. 

<H1>This is an Uppercase Heading.</H1>
<P>This is an Uppercase Paragraph.</P>

Output:

When we run the above HTML tag with a lowercase or uppercase tag it is going to us the same result.

(getButton) #text=(Complete List of all HTML Elements) #icon=(link) #color=(#2339bd)

👉Support Us by Sharing our post with others if you really found this useful and also share your valuable feedback in the comment section below so we can work on them and provide you best 😊.(alert-success)