Starter Template

Boiler Plate - Basic html starter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
</head>
<body>
    
</body>
</html>

Html tags

Heading Tag - Basic h1 to h6 tags

<h1>This is h1</h1>>
<h2>This is h2</h2>>
<h3>This is h3</h3>>
<h4>This is h4</h4>>
<h5>This is h5</h5>>
<h6>This is h6</h6>>

Div tag - Leaves a line at the end

<div>This is a paragraph. It is a block level elemnt</div>

Paragraph tag

<p>This is a paragraph. It is a block level elemnt</p>

Span tag - Does not leave a line

<span>This is span tag. It is an inline element</span>

Anchor Tag - Used to add external links

<a href="https://github.com/Vinayak2805">Visit my github profile</a>

Image Tag - Used to add images
```
<img src="vin.jpg" alt="Vin's Image">
```

Text-styling tags - b, i, u, big, small

<div>
    <b>Html</b>is a markup language. 
    <i>Italics</i>
    <u>Underlined</u>
    <big>This is big</big>
    <small>This is small</small>
</div>

Subscript and Superscript- To modify text

<div>2<sup>2</sup> equals 4</div>
<div>Water's chemical formula is H<sub>2</sub>O</div>

hr(horizontal rule) and br(break line) tags

<div>I am Vin. <br>This is a new line</div>
<hr>

pre tag - Used to display extra spaces between texts
```
<pre>This     is
    me   .
</pre>
```

Html Lists

Ordered Lists

<ol type="i">
    <li>This is item number 1</li>
    <li>This is item number 2</li>
    <li>This is item number 3</li>
    <li>This is item number 4</li>
</ol>

The possible values of type attribute in Ordered Lists are "i/I/1/A/a"

Unordered Lists

<ul type="square">
    <li>This is an item</li>
    <li>This is an item</li>
    <li>This is an item</li>
    <li>This is an item</li>
</ul>

The possible of type attribute in Unordered Lists are "disc/square/circle etc."

Html Tables

Sample layout:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Income</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tom</td>
            <td>2337</td>
            <td>$1</td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>2338</td>
            <td>$2</td>
        </tr>
    </tbody>
</table>

tr: used to display table row
td: used to display table data
th: used in place of table data for displaying headers
thead: used to wrap table head
tbody: used to wrap table body

Html Forms

Forms are generally used in contact page - We can use forms to take users' input

<form action="backend.php">
    Name: <input type="text" placeholder="Enter your name">
    <br>
    Email: <input type="email" placeholder="Enter your email">
    <br>
    Message:
    <br>
    <textarea> name="message"cols="30" rows="5" placeholder="Type your querry here"</textarea>
</form>

Video Embedding

Videos can be embeded using video tags

<video src="vin.mp4" width="100px">Error</video>