A Few Important tags

1. <p> is used to make paragraphs.


2. <b> or <strong> is used to make text BOLD.


3. <i> or <em> is used to make text italics.


4. <hr> makes a horizontal line.(This is a Self-Closing tag i.e; it does not have </hr>)


5. <br> gives a line break ( This is also a Self-Closing tag . Anything you write next will be written in the next line).


6. <sup> wraped around a text will elevate and dimnish the text like this: 2³=8


7. <sub> wraped around a text will lower and dimnish the text like this: H₂O is Water.


8. <mark> wraped around a text will highlight the text like this: Be Strong

This is a paragraph.

[Original code:
<br>
<p>
<em> This </em> is a <strong> paragraph. </strong>
</p>
<hr> ]

---

Let's learn to make an Ordered list:-

Example:

1. Banana
2. Apple
3. Mango

To start an ordered list we use <ol> tag . To write a list item we use <li>.

[Original code:
<ol>
<li>Banana</li>
<li>Apple</li>
<li>Mango</li>
</ol> ]

---

Let's learn to make an Unordered List

Example:

• Banana
• Apple
• Mango

To start an unordered list we use (< ul >) tag . To write a list item we use (< li >)

[Original code:
<ul>
<li> Banana </li>
<li> Apple </li>
<li> Mango </li>
</ul> ]

---

Let's learn to Link a Web Page

Example:

This is Google's Website

We use an Anchor tag which is <a> </a>.
The a tag has a special attribute called href which goes in the opening tag ( <a href=" "> ) whose value is the link or path(if you are hosting locally on pc ) for the website .
The text to be displayed goes between the opening and closing tag <a> HERE </a>.
target="_BLANK" is added to tell the browser to open the in in another tab.

[Original code: <p>This is <a href="https://www.google.co.in/" target="_BLANK">Google's Website </a> </p> ]

---

Linking a Web Page from your PC

Example:

• If the the file is in the SAME FOLDER then you can directly write the name like :
  This is my <a href="LEARN.html" target="_BLANK"> LEARN Page </a>
  

• It is important to have all your files, images together when making a website .

---

Let's learn to insert Images

Example:

To insert an image we use <img> tag which is a self closing tag. The image tag has 4 attribute which are
<img src="" alt="" width="" height="">
The link for the image goes in the source (src),
the name of the image goes in the alternative (alt) for the screen readers which blind people use.
You want can specify width and height of the image in pixels (px)

[Original code:
<img src="https://www.bing.com/th?id=OIP.6Woov2nyH214udwehZZlGAHaE8&
w =128&h=100&c=8&rs=1&qlt
=90&pid=3.1&rm=2" alt="Silkie Chicken" width="150px" height="100px"> ]

---

Uploading Images from your PC

Example:

• If the image is stored in the same folder then you can write thr name of the image in is source (src).

• If it is stored somewhere else you can locate the file or image and copy the file path and paste it in the source (src) .

---

Grouping you Content

Example:

This is giberishigirlsnvirsrhgrgn

1. <div> is used to group parts of your webpage. In the above Example, the image and the h2 is grouped.
   This allows us to style them together using CSS which you will learn later.
   The DIV takes up its own line in the Web Page which is why the giberish after the DIV is moved towards the next line .

[Original code:
<div>
<img src="Images\groupland.jpg" width="490px" height="300px" alt="">
<h2>Landscape Art</h2>
</div>
]


2. <span> is used to group text so that you can style it later with CSS.
   
   Example:

   This is a Special Sentence

   
   
   [Original code:
   This is a <span> Special Sentence </span> ]

---

Semantic Elements

Semantic HTML is the correct use of HTML to reinforce the meaning of content on a web page, rather than merely define its appearance.
Semantically correct HTML helps search engines, screen readers, and other user devices determine the significance and context of web content.

---

Entity Codes

Entities are frequently used to display reserved characters (which would otherwise be interpretedas HTML code), and invisible characters (like non-breaking spaces) as normal text on screen.

Example:

The Chicken Inc. ^®

[Original code:
<p>The Chicken Inc. ^{& r e g} </p> ]

Making a Table

Example:

The table has an opening tag (<table>) and closing (</table>) tags. The table is dividided into 2 parts which are table head ( <thead> ) and table body ( <tbody> ).
The table head contains the the header for each colomn and the table body contains the data for the particular colomn.
In the table head we need to to declare a table row ( <tr> ) and write our headers in table head ( <th> ) something like this:-

<thead>
<tr>

</tr>
</thead>

This will create the headers for the table.
In the table body, we need to create a table row (<tr>)and write the colomn data in the table data ( &Lttd> ) .

<tbody>
<tr>


</tr>
</tbody>

This will make the second row of the table.
The rest of the table will follow the same format with 3 <td> in 1 <tr>.

---

• Points To Remember While making a Table

1. All the tags within the table have an opening and a closing tag.
2. You can write the title of your table in the <caption> which will apppear in bold and will be centred.
3. You can make a table without using the table head and table body. So in the above code if you remove the <thead> and <tbody> , the result will not change. These are used to organise the code.
4. It is important to use <thead> in the first row to determine your headers in the table .
5. You can specify the rows or columns a table header can take by using colspan or rowspan. There are more attributes such as :
   
   

---

Example:

Types of Input: