« Previous Next »

Website Style Guide

This is the style guide for the website, showing how to use different elements in HTML.

Headings

Headings are used to organize content on the page. Below are examples of different headings:

Basic Code Examples

          
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Forms Page</title>
        </head>
        <body> 
          <h1>This is a Heading 1</h1>
          <h2>This is a Heading 2</h2>
          <h3>This is a Heading 3</h3>
          <h4>This is a Heading 4</h4>
          <h5>This is a Heading 5</h5>
          <h6>This is a Heading 6</h6>
        </body>
      </html>


Output

                    
          
This is a Heading 1

          
This is a Heading 2

          
This is a Heading 3

          
This is a Heading 4

          
This is a Heading 5

          
This is a Heading 6

Paragraphs

Paragraphs should be used for blocks of text. Here is an example of a paragraph:

Basic Code Examples

          
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Forms Page</title>
        </head>
        <body>
          <p>This is a paragraph of text. Paragraphs help separate content and make it easier to read.</p>          
        </body>
      </html>


Output

                    
          
This is a paragraph of text. Paragraphs help separate content and make it easier to read.

Links

Links are used to navigate to other pages or websites. Here is an example of a hyperlink:

Basic Code Examples

          
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Forms Page</title>
        </head>
        <body>
          <a href="https://aitaurangabad.com/">Visit Example</a>
        </body>
      </html>


Output

                    
          Visit (AIT)

Buttons

Buttons are used to trigger actions. Here's an example of a button:

Basic Code Examples

          
      <!DOCTYPE html>
      <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Welcome To My Forms Page</title>
          </head>
          <body>
            <button>Click Me</button>
          </body>
      </html>


Output

Lists

There are two types of lists: unordered and ordered.

Unordered List

Basic Code Examples

          
      <!DOCTYPE html>
      <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Welcome To My Forms Page</title>
          </head>
          <body>
            <ul>
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
            </ul>
          </body>
      </html>


Output

                     
          
    
            
  • Item 1
    • 
            
  • Item 2
    • 
            
  • Item 3
    •

Ordered List

Basic Code Examples

          
      <!DOCTYPE html>
      <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Welcome To My Forms Page</title>
          </head>
          <body>
            <ol>
                <li>First Item</li>
                <li>Second Item</li>
                <li>Third Item</li>
            </ol>
          </body>
      </html>


Output

                     
          
    
            
  1. First Item
    2. 
            
  2. Second Item
    3. 
            
  3. Third Item
    4.

Forms

Forms are used to collect user input. Here is an example of a simple form:

Basic Code Examples

          
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Forms Page</title>
        </head>
        <body>
          <form action="/submit" method="POST">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name"><br>
          
            <label for="email">Email:</label>
            <input type="email" id="email" name="email"><br>
          
            <label for="message">Message:</label>
            <textarea id="message" name="message"></textarea><br>
          
            <input type="submit" value="Submit">
          </form>
        </body>
      </html>


Output

Tables

Tables are used for organizing data in rows and columns. Below is an example of a basic table:

Basic Code Examples

          
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Forms Page</title>
        </head>
        <body>
          <table>
            <tr>
              <th>Header 1</th>
              <th>Header 2</th>
            </tr>
            <tr>
              <td>Data 1</td>
              <td>Data 2</td>
            </tr>
            <tr>
              <td>Data 3</td>
              <td>Data 4</td>
            </tr>
          </table>
        </body>
      </html>


Output

                     
          

            

              Header 1
              Header 2
            

            

              Data 1
              Data 2
            

            

              Data 3
              Data 4
« Previous Next »