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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                88<html>
<head>
<title> Technical documentation page</title>
<link href="https://fonts.googleapis.com/css2?family=Gotu&display=swap" rel="stylesheet">
<style type="text/css">
    body {
        font-family: 'Gotu', sans-serif;
        margin:0 auto;
        border: 0;
        background-color: black;
        color: white;
        
    }  
    #navbar {
        position: fixed;
        font-size: 1.86em;
        border: 3px solid red;
        box-sizing: border-box;
        min-width: 290px;
        top: 0px;
        left: 0px;
        width: 320px;
        height: 100%;
    } 
    .nav-link {
        text-decoration: none;
        color: white;
        border-bottom: 3px solid yellow;
    }
    #main-doc {
        position: absolute;
        left: 330px;
    }
    h1 {
        position:relative;
        left: 260px;
    }
    
    p,ul {
        font-size: 1.2em;
    }
    code{
        font-size: 1.3em;
        position: relative;
        left: 260px;
        color: orange;
       }
    .and {
        position: relative;
        top: 51px;
        left: 42px;
    }
    table {
        border: 1px solid yellow;
         border-collapse: collapse;
        width: 700px;
        position: relative;
        left: 160px;
    }
    tr,td,th {
        border: 1px solid yellow;
        text-align: center;
       
    }
    #copy a{
        color: white;
        text-decoration: none;
        border-bottom: 1px solid blue;
    }
    @media screen and (max-width: 1100px) {
        #navbar {
            height: 50%;
            position: relative;
            font-size: 16px;
        }
        #main-doc {
            position: relative;
            left: 30px;
            
        }
    }
    .head {
         font-size: 1.8em;
        font-weight: bold;
    }
    </style>

</head>
<body>
<nav id="navbar">
<header> CONTENTS</header>
<a class="nav-link" href="#Introduction_to_SQL"> Introduction to SQL</a> <br>
<a class="nav-link" href="#SQL_Syntax"> SQL Syntax</a> <br>
<a class="nav-link" href="#SQL_Select"> SQL Select</a>  <br>
<a class="nav-link" href="#SQL_Select_Distinct"> SQL Select Distinct</a> <br>
<a class="nav-link" href="#SQL_Where"> SQL Where</a> <br>
<a class="nav-link" href="#SQL_Create_DB"> SQL Create DB</a> <br>
<a class="nav-link" href="#SQL_Drop_DB"> SQL Drop DB</a> <br>
<a class="nav-link" href="#SQL_Backup_DB"> SQL Backup DB</a> <br>
<a class="nav-link" href="#SQL_And"> SQL And</a> <br>
<a class="nav-link" href="#Reference"> Reference</a> <br>
</nav>
<main id="main-doc">
<h1> SQL IN WEB DEVELOPMENT</h1>
<section class="main-section" id="Introduction_to_SQL">
<header class="head"> Introduction to SQL </header>
<p> SQL is a standard language for accessing and manipulating databases.</p>
<h2>What is SQL?</h2>
    <ul>
    <li> SQL stands for Structured Query Language</li>
    <li>SQL lets you access and manipulate databases</li>
    <li>SQL became a standard of the American National Standards Institute (ANSI) in 1986, and of the International Organization for Standardization (ISO) in 1987</li>
    </ul>
<p>Although SQL is an ANSI/ISO standard, there are different versions of the SQL language.
However, to be compliant with the ANSI standard, they all support at least the major commands (such as SELECT, UPDATE, DELETE, INSERT, WHERE) in a similar manner.</p>
    <h2> RDBMS</h2>
<p>RDBMS stands for Relational Database Management System.
RDBMS is the basis for SQL, and for all modern database systems such as MS SQL Server, IBM DB2, Oracle, MySQL, and Microsoft Access.
The data in RDBMS is stored in database objects called tables. A table is a collection of related data entries and it consists of columns and rows.</p>
   <p> SQL Statement </p>
    <code>SELECT * FROM Customers;</code>
</section>
<section class="main-section" id="SQL_Syntax">
<header class="head">SQL Syntax</header> 
<p> A database most often contains one or more tables. Each table is identified by a name (e.g. "Customers" or "Orders"). Tables contain records (rows) with data.
In this tutorial we will use the well-known Northwind sample database (included in MS Access and MS SQL Server). Some database systems require a semicolon at the end of each SQL statement.
Semicolon is the standard way to separate each SQL statement in database systems that allow more than one SQL statement to be executed in the same call to the server.
In this tutorial, we will use semicolon at the end of each SQL statement.</p>    
 <h2>Some of The Most Important SQL Commands</h2>   
  <ul>
    <li>SELECT - extracts data from a database</li>
    <li>UPDATE - updates data in a database</li>
    <li>DELETE - deletes data from a database</li>
    <li>INSERT INTO - inserts new data into a database</li>
    <li>CREATE DATABASE - creates a new database</li>
    <li>ALTER DATABASE - modifies a database</li>
    </ul>  
</section> 
<section class="main-section" id="SQL_Select">
<header class="head"> SQL Select</header>
<p>The SELECT statement is used to select data from a database.
The data returned is stored in a result table, called the result-set. Here, column1, column2, ... are the field names of the table you want to select data from.</p>
 <code> SELECT column1, column2, ... <br>
FROM table_name;</code>   
</section>   
<section class="main-section" id="SQL_Select_Distinct">
<header class="head"> SQL Select Distinct</header>
   <p>The SELECT DISTINCT statement is used to return only distinct (different) values.
Inside a table, a column often contains many duplicate values; and sometimes you only want to list the different (distinct) values.</p> 
 <h2>Select Distinct Examples</h2>   
    <p>The following SQL statement selects only the DISTINCT values from the "Country" column in the "Customers" table: <br> Example</p>
    <code> SELECT DISTINCT Country FROM Customers;</code>
</section>    
<section class="main-section" id="SQL_Where">
<header class="head">SQL Where</header>    
    <p> The WHERE clause is used to filter records.
The WHERE clause is used to extract only those records that fulfill a specified condition. The WHERE clause is not only used in SELECT statement, it is also used in UPDATE, DELETE statement, etc.SQL requires single quotes around text values (most database systems will also allow double quotes). However, numeric fields should not be enclosed in quotes.</p>
    <p>WHERE Syntax</p> 
   <code> SELECT column1, column2, ...<br>
FROM table_name<br>
WHERE condition;  
   </code>
</section>    
<section class="main-section"  id="SQL_Create_DB">
<header class="head">SQL Create DB</header>
    <p>The CREATE DATABASE statement is used to create a new SQL database.Make sure you have admin privilege before creating any database. Once a database is created, you can check it in the list of databases with the following SQL command: SHOW DATABASES; <br> The following SQL statement creates a database called "testDB":</p>
    <code>CREATE DATABASE testDB;</code>
</section>   
<section class="main-section" id="SQL_Drop_DB">
<header class="head">SQL Drop DB</header>    
 <p>The DROP DATABASE statement is used to drop an existing SQL database.Be careful before dropping a database. Deleting a database will result in loss of complete information stored in the database. <br>The following SQL statement drops the existing database "testDB":</p>  
<code>DROP DATABASE testDB;</code>
</section>    
<section class="main-section" id="SQL_Backup_DB">
<header class="head">SQL Backup DB</header>    
    <p>The BACKUP DATABASE statement is used in SQL Server to create a full back up of an existing SQL database.A differential back up only backs up the parts of the database that have changed since the last full database backup.Always back up the database to a different drive than the actual database. Then, if you get a disk crash, you will not lose your backup file along with the database.<br>A differential back up reduces the back up time (since only the changes are backed up).</p>
    <code>BACKUP DATABASE testDB<br>
TO DISK = 'D:\backups\testDB.bak'<br>
WITH DIFFERENTIAL;</code>
</section>
<section class="main-section" id="SQL_And">
<header class="head">SQL And</header>    
    <p>The WHERE clause can be combined with AND, OR, and NOT operators.<br>
The AND and OR operators are used to filter records based on more than one condition:</p>   
 <ul>
    <li>The AND operator displays a record if all the conditions separated by AND are TRUE.</li>
    <li>The OR operator displays a record if any of the conditions separated by OR is TRUE.</li>
    </ul>   
  <p>The NOT operator displays a record if the condition(s) is NOT TRUE. You can also combine the AND, OR and NOT operators.</p> 
   <p class="and"> AND Syntax</p> 
  <code> SELECT column1, column2, ...<br>
FROM table_name<br>
WHERE condition1 AND condition2 AND condition3 ...;</code>
    <p class="and"> OR Syntax</p>
    <code>SELECT column1, column2, ...<br>
FROM table_name<br>
WHERE condition1 OR condition2 OR condition3 ...;</code>
    <p class="and"> NOT Syntax</p>
    <code>SELECT column1, column2, ...<br>
FROM table_name<br>
WHERE NOT condition;</code>
</section>        
<section class="main-section" id="Reference">
<header class="head">Reference</header>
   <table>
    <tr>
       <th>SQL Statement</th>
       <th>Syntax</th>
    </tr>
    <tr>
       <td>AND / OR	</td>   
       <td>SELECT column_name(s)<br>
FROM table_name<br>
WHERE condition<br>
AND|OR condition</td>
       </tr>
    <tr>
       <td>ALTER TABLE</td>   
       <td>ALTER TABLE table_name<br>
ADD column_name datatype<br>
or<br>
ALTER TABLE table_name<br>
DROP COLUMN column_name
</td>
       </tr>
    <tr>
       <td>AS (alias)</td>   
       <td>SELECT column_name AS column_alias<br>
FROM table_name<br>
or<br>
SELECT column_name<br>
FROM table_name  AS table_alias</td>
       </tr>
    <tr>
       <td>BETWEEN</td>   
       <td>SELECT column_name(s)<br>
FROM table_name<br>
WHERE column_name<br>
BETWEEN value1 AND value2</td>
       </tr>
    <tr>
       <td>CREATE DATABASE</td>   
       <td>CREATE DATABASE database_name</td>
       </tr>
    <tr>
       <td>CREATE TABLE</td>   
       <td>	CREATE TABLE table_name<br>
(<br>
column_name1 data_type,<br>
column_name2 data_type,<br>
column_name3 data_type,...)</td>
       </tr>
    <tr>
       <td>CREATE INDEX	</td>   
       <td>CREATE INDEX index_name<br>
ON table_name (column_name)<br>
or<br>
CREATE UNIQUE INDEX index_name<br>
ON table_name (column_name)</td>
       </tr>
    <tr>
       <td>CREATE VIEW</td>   
       <td>CREATE VIEW view_name AS<br>
SELECT column_name(s)<br>
FROM table_name<br>
WHERE condition</td>
       </tr>
    <tr>
       <td>DROP DATABASE</td>   
       <td>DROP DATABASE database_name</td>
       </tr>
    </table>
   
<p id="copy">For more information refer to <a href="https://www.w3schools.com/sql/sql_quickref.asp">W3Schools</a></p>
</section>
</main>
</body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console