Enough HTML to get Started

Let us learn enough html to get started.

Tags

Headers tags can be used by wrapping it in <h1>...</h1>. Header tags can range from h1 to h6 each one smaller size than previous one.

<h1>Meet Tandel</h1>

To write paragraph, wrap it in a <p> tag.

<p>I'm a web developer</p>

To write code fast, Emmet can be useful. Emmet is an inbuilt abbreviation in vs code used to complete the code. Type p, h, hr,etc. and press enter, emmet will complete it with full syntax.

For BOLD text always use <strong> tag and for Italics use <em> tag.

Comments are very useful to explain other people about your code. To make a comment press Ctrl + /

To add links to the page use anchor tag <a> and to open the link in new page add target="_blank"

<meta> tag is used for SEO(Search Engine Optimization).

Let's learn Forms now:

Forms

Input can be added by <input> tag. Label tag <label> is used to add label to the input. The <name> attribute is used to store data in the database accessed with back-end. <placeholder> is used to assign default values to the box.

<label for="nm">Name:
<input type="text" name="myName" id="nm" placeholder="Enter Name">
</label>

Types of Input

Checkbox

<label for="ckbx">Are you Eligible?
<input type="checkbox" name="myCheckbox" id="ckbx">
</label>

Textarea

<label for="msg">Your Message:
<textarea name="myMessage" id="msg" cols="30" rows="10" placeholder="Enter Message">
</textarea>
</label>

Radio

<label for="gen">Gender:</label>
Male<input type="radio" name="myGender" id="">
Female<input type="radio" name="myGender" id="">

---

<div> tag is used to divide the code in a box. It is helpful instead of <br> tag. When viewed in pesticide <div> tag creats its own box.

<div>
     <label for="nm">Name:</label>
     <input type="text" name="myName" id="nm" placeholder="Enter Name">
</div><br>

<div>
     <label for="email">eMail:</label>
     <input type="email" name="myeMail" id="email" placeholder="Enter Email">
</div><br>

---

Id and Classes

   <!-- id is for one particular tag and classes is for one or multiple tags -->
    <!-- specific is can be used for only one tag -->
    <!-- id and class are for CSS -->
    <div id="mainBox" class="redBg">This is mainbox</div>

    <!-- div.redBg.MeetT.blackbox - To add mulitple classes-->
    <div class="redBg MeetT blackbox"></div>

    <!-- span#mainBox.redBg.MeetT - Add both id and classes-->
    <span id="mainBox" class="redBg MeetT"></span>

    <!-- .blackbackground - div is Default-->
    <div class="blackbackground"></div>

    <!-- span.redBg.MeetT.blackbox*4 -->
    <span class="redBg MeetT blackbox">First</span>
    <span class="redBg MeetT blackbox">Second</span>
    <span class="redBg MeetT blackbox">Third</span>
    <span class="redBg MeetT blackbox">Fourth</span>

<span> is inline element.

<span>This is a Paragraph.</span>

Table

<table> tag contains a row tag <tr> to specify a row, <th> to specify a heading and <td> to specify a table data.

 <table cellspacing="10">
        <thead>
            <tr>
                <th>Date</th>
                <th>Work</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2016-2020</td>
                <td>GEC Bhavnagar</td>
            </tr>
            <tr>
            <tr>
                <td>2020-</td>
                <td>Coding</td>
            </tr>
            </tr>
    </table>