Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <nav id="navbar">
  <header>DBMS </header>
  <ul>
    <li><a class="nav-link" href="#dbms_tutorial">DBMS Tutorial</a></li>
    <li>
      <a class="nav-link" href="#What_is_Database">What is Database</a>
    </li>
    <li>
      <a class="nav-link" href="#Database_Management_System">Database Management System</a>
    </li>
    <li><a class="nav-link" href="#Characteristics_of_DBMS">Characteristics of DBMS</a></li>
    <li><a class="nav-link" href="#Advantages_of_DBMS">Advantages of DBMS</a></li>
    <li>
      <a class="nav-link" href="#Disadvantages_of_DBMS">Disadvantages of DBMS</a>
    </li>
    <li><a class="nav-link" href="#DBMS_Architecture">DBMS Architecture</a></li>
    <li><a class="nav-link" href="#Types_of_DBMS_Architecture">Types of DBMS Architecture</a></li>
    <li><a class="nav-link" href="#Three_schema_Architecture">Three schema Architecture</a></li>
    <li><a class="nav-link" href="#Data_model_Schema_and_Instance">Data model Schema and Instance</a></li>
    <li><a class="nav-link" href="#Data_Independence">Data Independence</a></li>
    <li><a class="nav-link" href="#Reference">Reference</a></li>
  </ul>
</nav>
<main id="main-doc">
  <section class="main-section" id="dbms_tutorial">
    <header>DBMS Tutorial</header>
    <article>
      <p>
        DBMS Tutorial provides basic and advanced concepts of Database. Our DBMS Tutorial is designed for beginners and professionals both.</p>
      <p>Database management system is software that is used to manage the database.</p>
      <p>Our DBMS Tutorial includes all topics of DBMS such as introduction, ER model, keys, relational model, join operation, SQL, functional dependency, transaction, concurrency control, etc.
      </p>
      <section class="main-section" id="What_is_Database">
        <header>What is Database</header>
        <p>The database is a collection of inter-related data which is used to retrieve, insert and delete the data efficiently. It is also used to organize the data in the form of a table, schema, views, and reports, etc.</p>
        <p>For example: The college Database organizes the data about the admin, staff, students and faculty etc.</p>
        <p>Using the database, you can easily retrieve, insert, and delete the information.</p>
        <code
        >function greetMe(yourName) { alert("Hello " + yourName); }
        greetMe("World");
      </code>
        <section class="main-section" id="Database_Management_System">
          <header>Database Management System</header>
          <article>
            <ul>
              <li>Database management system is a software which is used to manage the database. For example: MySQL, Oracle, etc are a very popular commercial database which is used in different applications.</li>
              <code>var x = 42.</code>
              <li>DBMS provides an interface to perform various operations like database creation, storing data in it, updating data, creating a table in the database and a lot more.</li>
              <li>It provides protection and security to the database. In the case of multiple users, it also maintains data consistency.
              </li>
            </ul>
          </article>
        </section>
        <section class="main-section" id="Characteristics_of_DBMS">
          <header>Characteristics of DBMS</header>
          <article>
            <ul>
              <li> It uses a digital repository established on a server to store and manage the information.</li>
              <li>It can provide a clear and logical view of the process that manipulates data.</li>
              <code>x = 42.</code>
              <li>DBMS contains automatic backup and recovery procedures.</li>
              <li>It contains ACID properties which maintain data in a healthy state in case of failure.</li>
              <li>It can reduce the complex relationship between data.</li>
              <li>It is used to support manipulation and processing of data.</li>
              <li>It is used to provide security of data.</li>
              <li>It can view the database from different viewpoints according to the requirements of the user.</li>
            </ul>
          </article>
        </section>
        <section class="main-section" id="Advantages_of_DBMS">
          <header>Advantages of DBMS</header>
          <article>
            <ul>
              <li><em>Controls database redundancy:</em> It can control data redundancy because it stores all the data in one single database file and that recorded data is placed in the database.</li>
              <li><em>Data sharing:</em> In DBMS, the authorized users of an organization can share the data among multiple users.</li>
              <li><em>Easily Maintenance:</em> It can be easily maintainable due to the centralized nature of the database system.</li>
              <li><em>Reduce time:</em> It reduces development time and maintenance need.</li>
              <li><em>Backup:</em> It provides backup and recovery subsystems which create automatic backup of data from hardware and software failures and restores the data if required.</li>
              <li><em>multiple user interface:</em> It provides different types of user interfaces like graphical user interfaces, application program interfaces.</li>
            </ul>
            <code> let y = 13.</code>
          </article>
          <section class="main-section" id="Disadvantages_of_DBMS">
            <header>Disadvantages of DBMS</header>
            <article>
              <ul>
                <li><strong>Cost of Hardware and Software:</strong> It requires a high speed of data processor and large memory size to run DBMS software.</li>
                <li><strong>Size:</strong> It occupies a large space of disks and large memory to run them efficiently.</li>
                <li><strong>Complexity:</strong> Database system creates additional complexity and requirements.</li>
                <li><strong>Higher impact of failure:</strong> Failure is highly impacted the database because in most of the organization, all the data stored in a single database and if the database is damaged due to electric failure or database corruption
                  then the data may be lost forever.</li>
              </ul>
               <code
        >if (true) { let y = 5; } console.log(y); // ReferenceError: y is not
        defined</code
      >
            </article>
          </section>
          <section class="main-section" id="DBMS_Architecture">
            <header>DBMS Architecture</header>
            <article>
              <ul>
                <li>The DBMS design depends upon its architecture. The basic client/server architecture is used to deal with a large number of PCs, web servers, database servers and other components that are connected with networks.</li>
                <li>The client/server architecture consists of many PCs and a workstation which are connected via the network.</li>
                <li>DBMS architecture depends upon how users are connected to the database to get their request done.</li>
              </ul>
            </article>
          </section>
          <section class="main-section" id="Types_of_DBMS_Architecture">
            <header>Types of DBMS Architecture</header>
            <article>
              <p>Database architecture can be seen as a single tier or multi-tier. But logically, database architecture is of two types like: <em>2-tier architecture</em> and <em>3-tier architecture</em>.</p>

              <h3>1-Tier Architecture</h3>
              <ul>
                <li>In this architecture, the database is directly available to the user. It means the user can directly sit on the DBMS and uses it.</li>
                <li>Any changes done here will directly be done on the database itself. It doesn't provide a handy tool for end users.</li>
                <li>The 1-Tier architecture is used for development of the local application, where programmers can directly communicate with the database for the quick response.</li>
                <h3>2-Tier Architecture</h3>
                <li>The 2-Tier architecture is same as basic client-server. In the two-tier architecture, applications on the client end can directly communicate with the database at the server side. For this interaction, API's like: ODBC, JDBC are used.</li>
                <li>The user interfaces and application programs are run on the client-side.</li>
                <li>The server side is responsible to provide the functionalities like: query processing and transaction management.</li>
                <li>To communicate with the DBMS, client-side application establishes a connection with the server side.</li>
              </ul>
              <h3> 3-Tier Architecture</h3>
              <ul>
                <li>The 3-Tier architecture contains another layer between the client and server. In this architecture, client can't directly communicate with the server.</li>
                <li>The application on the client-end interacts with an application server which further communicates with the database system.</li>
                <li>End user has no idea about the existence of the database beyond the application server. The database also has no idea about any other user beyond the application.</li>
                <li>The 3-Tier architecture is used in case of large web application.</li>
              </ul>
            </article>
          </section>
          <section class="main-section" id="Three_schema_Architecture">
            <header>Three schema Architecture</header>
            <article>
              <ul>
                <li>The three schema architecture is also called ANSI/SPARC architecture or three-level architecture.</li>
                <li>This framework is used to describe the structure of a specific database system.</li>
                <li>The three schema architecture is also used to separate the user applications and physical database.</li>
                <li>The three schema architecture contains three-levels. It breaks the database down into three different categories:-
                  <h4>Internal Level</h4>
                  <ol>
                    <li>The internal level has an internal schema which describes the physical storage structure of the database.</li>
                    <li>The internal schema is also known as a physical schema.</li>
                    <li>It uses the physical data model. It is used to define that how the data will be stored in a block.</li>
                    <li>The physical level is used to describe complex low-level data structures in detail.</li>
                  </ol>
                  <h4>Conceptual Level</h4>
                  <ol>
                    <li>The conceptual schema describes the design of a database at the conceptual level. Conceptual level is also known as logical level.</li>
                    <li>The conceptual schema describes the structure of the whole database.</li>
                    <li>The conceptual level describes what data are to be stored in the database and also describes what relationship exists among those data.</li>
                    <li>In the conceptual level, internal details such as an implementation of the data structure are hidden.</li>
                    <li>Programmers and database administrators work at this level.</li>
                  </ol>
                  <h4>External Level</h4>
                  <ol>
                    <li>At the external level, a database contains several schemas that sometimes called as subschema. The subschema is used to describe the different view of the database.</li>
                    <li>An external schema is also known as view schema.</li>
                    <li>Each view schema describes the database part that a particular user group is interested and hides the remaining database from that user group.</li>
                    <li>The view schema describes the end user interaction with database systems.</li>
                  </ol>

              </ul>
            </article>
          </section>
          <section class="main-section" id="Data_model_Schema_and_Instance">
            <header>Data model Schema and Instance</header>
            <article>
              <ul>
                <li>The data which is stored in the database at a particular moment of time is called an instance of the database.</li>
                <li>The overall design of a database is called schema.</li>
                <li>A database schema is the skeleton structure of the database. It represents the logical view of the entire database.</li>
                <li>A schema contains schema objects like table, foreign key, primary key, views, columns, data types, stored procedure, etc.</li>
                <li>A database schema can be represented by using the visual diagram. That diagram shows the database objects and relationship with each other.</li>
                <li>A database schema is designed by the database designers to help programmers whose software will interact with the database. The process of database creation is called data modeling.</li>
                <p>A schema diagram can display only some aspects of a schema like the name of record type, data type, and constraints. Other aspects can't be specified through the schema diagram.</p>
                <p>For example, the given figure neither show the data type of each data item nor the relationship among various files.</p>
                <p>In the database, actual data changes quite frequently. For example, in the given figure, the database changes whenever we add a new grade or add a student. The data at a particular moment of time is called the instance of the database.</p>
            </article>
          </section>
          <section class="main-section" id="Data_Independence">
            <header>Data Independence</header>
            <article>
              <ul><li>Data independence can be explained using the three-schema architecture.</li>
<li>Data independence refers characteristic of being able to modify the schema at one level of the database system without altering the schema at the next higher level.</li></ul>
              <p>There are two types of data independence:</p>
              <ol><li><h3> Logical Data Independence</h3>
<ul><li>Logical data independence refers characteristic of being able to change the conceptual schema without having to change the external schema.</li>
  <li>Logical data independence is used to separate the external level from the conceptual view.</li>
<li>If we do any changes in the conceptual view of the data, then the user view of the data would not be affected.</li>
  <li>Logical data independence occurs at the user interface level.</li></ul></li>
                <li><h3>Physical Data Independence</h3><ul><li>
Physical data independence can be defined as the capacity to change the internal schema without having to change the conceptual schema.</li>
<li>If we do any changes in the storage size of the database system server, then the Conceptual structure of the database will not be affected.</li>
                  <li>Physical data independence is used to separate conceptual levels from the internal levels.</li>
                  <li>Physical data independence occurs at the logical interface level.</li></ul></li></ol>
             </article>
          </section>
          <section class="main-section" id="Reference">
            <header>Reference</header>
            <article>
              <ul>
                <li>
                  All the documentation in this page is taken from
                  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">MDN</a
          >
        </li>
      </ul>
    </article>
  </section>
</main>
              
            
!

CSS

              
                html,
body {
  min-width: 290px;
  color: #4d4e53;
  background-color: #ffffff;
  font-family: "Open Sans", Arial, sans-serif;
  line-height: 1.5;
}

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4);
}

header {
  color: black;
  margin: 10px;
  text-align: center;
  font-size: 1.8em;
  font-weight: thin;
}

#main-doc header {
  text-align: left;
  margin: 0px;
}

#navbar ul {
  height: 88%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  color: #4d4e53;
  border-top: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
}

#navbar a {
  display: block;
  padding: 10px 30px;
  color: #4d4e53;
  text-decoration: none;
  cursor: pointer;
}

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

section article {
  color: #4d4e53;
  margin: 15px;
  font-size: 0.96em;
}

section li {
  margin: 15px 0px 0px 20px;
}

code {
  display: block;
  text-align: left;
  white-space: pre;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color: #f7f7f7;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
}

@media only screen and (max-width: 815px) {
  /* For mobile phones: */
  #navbar ul {
    border: 1px solid;
    height: 207px;
  }

  #navbar {
    background-color: white;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }

  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 270px;
  }
}

@media only screen and (max-width: 400px) {
  #main-doc {
    margin-left: -10px;
  }

  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 233px;
  }
}
              
            
!

JS

              
                // coded by @ChaituVR 

const projectName = 'technical-docs-page';
localStorage.setItem('example_project', 'Technical Docs Page');


              
            
!
999px

Console