# HTML Basics

Thanks to [Dr. Angela Yu](https://www.udemy.com/user/4b4368a3-b5c8-4529-aa65-2056ec31f37e/) you can purchase her course UDAMY at [https://shorturl.at/ehwQ9](https://shorturl.at/ehwQ9)

### HERE WE DISCUSS HTML BASIC TO ADVANCE:

always start with

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;/head&gt;

&lt;/html&gt;

HTML &lt;<mark>h1</mark>\&gt; to &lt;<mark>h6</mark>\&gt; Tags uses for heading

**<mark>&lt;br&gt;</mark>** **Create a line break in a text**.

<mark>&lt;hr&gt; </mark> \= horizontal rule or line

&lt;Center&gt; to allign the text in center.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688191341285/2a71fbc8-de9d-468d-9c4f-62a7eed49d8e.png align="center")

```html
<!DOCTYPE html>
<html>
<body>
   <center>
        <hr size="9" noshade>  
        <h1>The adventure of HTML journey July 2023 </h1>
         <br>
          <h2> how can I become pro 
          <hr size="9" noshade>
          </h2>
    </center>
</body>

</html>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688191817979/c1b0f55f-ff76-4848-abb9-bca2df0cafc6.png align="center")

Add a title for website name

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688208803989/bef58f6f-d4bf-45f8-ad9f-4024432bbc32.png align="center")

Like I add title like below

```html
 <!DOCTYPE html>
 <head>
    <title>  ❤️ Sumaiya's personel site </title> 
 </head>

 <body>
    
 </body>
 </html>
```

Here we add &lt;em&gt; emphasise tag for emphasise the sentence and &lt;strong&gt; tag use to bold the sentence.

```html
 <p> <em>  Founder of <Strong> Sumaiya's Borkha Collection </Strong>  </em> </p>
```

**like below:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688209310554/3f72d733-a02c-420f-abd1-17722da94815.png align="center")

Now we want to add bullet and list

&lt;UL&gt; tag means unordered text

&lt;li&gt; tag means list item tag create each item of bullet point.

```html
      <h3>Our Stores</h3>
      <ul>
         <li> Mirpur 14 </li>
         <li> Basuhndhara</li>
         <li>Jamuna</li>
         <Li>Pabna Sadar</Li>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688210290249/54ad6cde-837b-4bd0-b58c-dfbd1523c279.png align="center")

Now come to the ordered list 123

or i, ii, iii

```html
<ol type="i">
or
<ol start="8">
```

```html
<h3> Our HOT SALE products </h3>
<ol type="i">
   <li> Abiya</li>
   <li>Irany Borkha</li>
</ol>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688210681231/6452ae64-07be-4fff-a728-ac6664622a70.png align="center")

or

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688210714362/4d7b62af-4d6b-4b53-931a-90db5b92f1e2.png align="center")

### **IMAGE &lt;img&gt;TAG: is a self-closing tag.**

```html
 <img src="https://i.pinimg.com/originals/36/64/25/3664252970e153955e6406e6903efb5b.jpg" alt="Borkha images carton">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688214002967/64c9f4ea-798d-4c96-be1d-0f0bb2856549.png align="center")

paste the link to the html

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688214061275/61031193-537c-4e6e-8282-5c79401a9ccc.png align="center")

### &lt;a&gt; = Anchor TAG

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688259138234/88d205a5-e4c7-4310-a34e-301776954ded.png align="center")

see the example

```html
 <a href="https://freelancerhasan.hashnode.dev/html-basics">Sumaiya's Borkha Collection</a>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688259265104/d9cb1ba2-45a9-4f67-aedf-3b226bd72ca8.png align="center")

### **Table: &lt;tr&gt; Table row, &lt;td&gt; Table Data**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688260415143/c4ce96d5-5d7d-4c60-ac94-0ed94f3c9d8c.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688260430335/a7eac804-ee29-4cdb-b91e-fe10055c97fd.png align="center")

```html
<Table>
   <tr>
      <td> 2020-2021</td>
      <td> Honurs First Year</td>
      </tr>
   <tr>
         <td> 2022-2023</td>
         <td> Honurs Second Year</td>
   </tr>
</Table>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688260958384/dfd6637b-ec54-41a2-8f88-32d34a0b5b08.png align="center")

&lt;thead&gt;= table head, &lt;tbody&gt;=table body, &lt;tfoot&gt;= table footer

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688261116527/ceb63fe9-6fcc-4f56-862d-1baabd619fb7.png align="center")

now if we add &lt;th&gt; means table head include then the result will be: &lt;thead&gt;

```html
   <thead> 
      <th>Year </th>
      <th> Result </th>
    </thead>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688261520344/1bbcf807-789e-48d3-a0cf-e5113a7a5e03.png align="center")

if you delete &lt;thead&gt; then it will work same cause you are using &lt;th&gt; tag.&lt;Table&gt;

```html
<Table>
      <th>Year </th>
      <th> Result </th>
   <tr>
      <td> 2020-2021</td>
      <td> Honurs First Year</td>
      </tr>
   <tr>
         <td> 2022-2023</td>
         <td> Honurs Second Year</td>
   </tr>
</Table>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688261520344/1bbcf807-789e-48d3-a0cf-e5113a7a5e03.png align="center")

Actually we are using &lt;thead&gt; or &lt;tbody&gt; cause sometimes we need to change specific information, it might be helpful at that time.

```html
<table>
   <thead>
      <tr>
         <th> Name</th>
         <th> Season </th>
         <th> reason </th>
      </tr>
   </thead>
<tbody>
   <tr>
      <td> Coffee </td>
      <td> Rainy Time</td>
      <td> Mode Changes </td>
   </tr>
</tbody>
</table>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688262212482/3d39b33d-7585-46ad-8d28-0daaea613b49.png align="center")

if you add border it will work but in HTML it will be deprecated, cause no longer is use

```html
<table border="1">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688262492096/f443d4b8-8d2b-4bd5-ae12-964f09ba4769.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688262583288/dace5208-bb0d-4a05-bb23-feac0fd08b69.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688262619875/cf2cf031-1523-40d7-8135-f2499aa246f2.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688262700110/482a5d4e-4047-45dc-ace2-383fa45692ff.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688262740280/cc317c55-008c-426f-a918-24c6f12602e6.png align="center")

### Now the interesting part is how to keep picture and descriptions besides:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688263606069/6ef12f30-caa4-4b51-bd5b-4d8696959f0e.png align="center")

Here is the code

```html
<table>
      <tr>
         <td>
            <img src="PROFILE SUMIAYA.png" alt="Borkha images carton"  width="200"> 
         </td>
         <td>
            <h1> My name is Sumaiya Khatun </h1>
            <p> <em>  Founder of <Strong> <a href="https://freelancerhasan.hashnode.dev/html-basics">Sumaiya's Borkha Collection</a>  </Strong>  </em> </p>
            <p> Explore our fresh range of modest designs. Abayas, Hijabs and more. Wear for day and night. 
                <br>
                Customise and curate the ideal modest outfit, to be cherished and passed down.</p>
         </td>
      </tr>
   </table>
```

add space to look nicer for images and text, though this cell spacing is deprecated.

```html
<table cellspacing="20">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688263756745/e43edef2-ecfe-459f-ad5f-dbdb2af37a63.png align="center")

new challenge

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688264748707/a34cd562-0247-4688-8b01-fa6443cb4400.png align="center")

```html
<table cellspacing="10" border="1">
   <tr> 
      <td>
<table> <tr>Customer Service </tr> <tr> ⭐⭐⭐⭐⭐ </tr></table>
<table> <tr> Office Management </tr> <tr> ⭐⭐⭐⭐⭐</tr> </table>
<table> <tr> Good Team Player</tr><tr> ⭐⭐⭐⭐⭐</tr> </table>
</td>

<td>
   <table> <tr> Selling</tr> <tr> ⭐⭐⭐</tr> </table>
<table> <tr> Face New Challenge </tr> <tr> ⭐⭐⭐⭐⭐</tr>  </table>
<table> <tr> Always Learning </tr> <tr> ⭐⭐⭐</tr>  </table>
</td>

</tr>
</table>
```

or you can simply make a code like that

```html
<table>
<tr>
   <td> Youtube</td>
   <td>⭐⭐⭐⭐⭐</td>
</tr>
<tr>
   <td> Facebook</td>
   <td>⭐⭐</td>
</tr>

</table>
```

## **FORM**

now we are going to see the form in HTML:

```html
<form>
    <label> Your Name: </label>
    <input type="Name">
    <input type="color"><br>
    <label> Do you want to submit the form?</label>
    <input type="checkbox">
    <input type="submit"><br>
    <label for=""> Password</label>
    <input type="password" name="" id=""><br>
    <label for="">Email</label>
    <input type="email"><br>
    <label for="">File</label>
    <input type="file"><br>
    <label for="">Upload your image</label>
    <input type="image"><br>
    <label for="">month</label>
    <input type="month"><br>
    <label for=""> Number </label>
    <input type="Number"><br>
</form>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688274634283/c2d66ffe-8146-4383-926a-56199a2a0790.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688275889537/6d067466-352e-41df-ac3c-694d027be06f.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688276107601/cb931d8e-4c90-496b-ad47-59c0610e2f1e.png align="center")

super important LESSON for email address submission:&lt;form class="" a

```html
<form class="" action="mailto:freelancerhasan73@gmail.com" method="post">
```

```html
<form class="" action="mailto:freelancerhasan73@gmail.com" method="post">
    <label> Your Name: </label>
    <input type="Text">
    <input type="submit" name="" id=""><br>
    <label> your Email</label>
    <input type="email"> <br>
    <label> Your Message</label>
    <textarea name="name" id="" cols="30" rows="10"></textarea>
    <input type="submit" name="" id="">

</form>
```

if gmail pop up not coming:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688278128220/0ba500de-aa78-47e4-8fc8-e2f23ad264a0.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688278219297/8516b5c4-79af-436b-a4f5-f7ac6b376576.png align="center")

goto setting&gt; permision&gt; additional permission&gt; protocol handlers &gt; allow

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688278295559/fa316815-a2e6-48f8-96db-4861d5729b78.png align="center")

now just allow it from the browser

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688278348676/6a973b21-339a-45f2-93a3-84e328493532.png align="center")

if you see a problem like below + + + text, the solution is to add enctype="plain/text"

```html
enctype="text/plain"
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688278473721/bdfec88c-cd9c-4230-b2f2-dc07a0e08b3b.png align="center")

also if you want add some auto message, you can add name value

(name="Your Name"&gt;

```html
<form action="mailto:freelancerhasan73@gmail.com" method="post" enctype="text/plain">
    <label> Your Name: </label>
    <input type="Text"name="Your Name">
    <input type="submit" name="" id=""><br>
    <label> your Email</label>
    <input type="email" name="Your Email"> <br>
    <label> Your Message</label>
    <textarea name="Your Message"  cols="30" rows="10"> </textarea>
    <input type="submit" name="" id="">

</form>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688279190624/f393d873-4157-4f9a-b36e-07d198821e3d.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688279140848/56aee933-d9e8-4c95-b451-951670056ad9.png align="center")

finally published your webpages on GitHub

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688279387674/42c3cc99-0601-49ed-8d9a-aac1de261408.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688279475297/f145a5a3-4a6f-4aa8-b363-e0f15403acea.png align="center")

upload your file and make a name initial cv for website

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688279602768/229cce38-eb6c-44eb-9919-f32c89af4e37.png align="center")

goto setting

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688279703739/7f24fe45-dfac-4629-8203-120d8514d122.png align="center")

goto pages select branches to allow

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688279787862/c755d224-4c0d-47a5-a6c8-66bb3dd9d0da.png align="center")

finally, you can see

[https://freelancerhasan73.github.io/cvsumiaya/](https://freelancerhasan73.github.io/cvsumiaya/)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688280256586/7b049fe3-3adb-44f8-b687-2ab6cd458224.png align="center")

NOTE:

sometimes HTML is also work in the base of CSS by their default CSS setting by the browser.

If we change the background color in HTML

```html
<body style="background-color:#EAF6F6">
```

like I changed-

or you can add a &lt;style&gt; tag inside of the head of HTML,like I add select body

```html
<style>
    body{
        background-color: #blue;
    }
    
</style>
```

now you may delete the body color :

now see it change according to style rule

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688298277276/951654a6-96bf-4925-b6cc-e7d418747367.png align="center")

same we are gona change the &lt;hr&gt;

```html
<style>
    body{
        background-color: blue;
    }
    
    hr{
        background-color: red;
        border-style: none;
    }

</style>
```

it changes according to all web pages

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688298518430/215bcd28-4b61-4ce7-8d78-44fc725783f1.png align="center")

border style can be change in various way:

like I specify four side

```html
   border-style: dotted none none none;
```

or

```html
 border-style: none;
        border-top-style: dotted;
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688300444254/e7fb65e8-dd1b-4bed-8430-db8abcd1d56b.png align="center")
