# 3 HTML : Links, Images , Lists, Text Formatting tags

 Anchor Tag:-

To add links in a website

<a href="Link here"  > Button of the link    </a>

Note:- If we want that our link will be open in a new tap then use target attribute

e.q.  <a href="https://www.google.co.in"  target="_blank"> Google </a>

Project 1:- make a page for opening google link in a new tap and also show title this is google when cursor goes to the google .

<!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>Document</title>

</head>

<body>

    <p>Click here to go <a href="https://google.com" target="_blank" title="This is google">Google</a></p>

</body>

</html>

HTML Images:-

<img src="Location of the Photo" alt="Discription about photo">

HTML Lists:-

1. Ordered List :-

      <ol>

            <li>  Item 1 </li>

             <li>  Item 2 </li>

             <li>  Item 3 </li>

             <li>  Item 4 </li>        

       </ol>

Note:- We can set type in Ordered lists by using type="" Attribute

e.q.     <ol type="a">

            <li>  Item 1 </li>

             <li>  Item 2 </li>

             <li>  Item 3 </li>

             <li>  Item 4 </li>        

       </ol>

2. Unordered List:-

         <ul>

            <li>  Item 1 </li>

             <li>  Item 2 </li>

             <li>  Item 3 </li>

             <li>  Item 4 </li>        

         </ul>

Note:- We can also use style attribute in unordered list to give different styles.]

e.q.

<ul style='list-style-type: disc; '>

            <li>  Item 1 </li>

             <li>  Item 2 </li>

             <li>  Item 3 </li>

             <li>  Item 4 </li>        

         </ul>

3. Discription List:-

         <dl>

            <dt>  Item 1 </dt>

             <dd>  Defining the item 1 </dd>    

         </dl>

Project 2:- Make a page on using all 3 lists .

<!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>Document</title>

</head>

<body>

    <ol type="A">

        <li>Item 1</li>

        <li>Item 2</li>

        <li>Item 3</li>

        <li>Item 4</li>

    </ol>

    <ul style="list-style-type: circle;">

        <li>Item 1</li>

        <li>Item 2</li>

        <li>Item 3</li>

        <li>Item 4</li>

    </ul>

    <dl>

        <dt>Monu</dt>

        <dd>He is a good boy</dd>

        <dt>Madhu</dt>

        <dd>She is a bad girl</dd>

    </dl>

</body>

</html>

Output:-

1. Item 1
2. Item 2
3. Item 3
4. Item 4

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

Monu

He is a good boy

Madhu

She is a bad girl

HTML Text Formatting Tags:-

1. Bold :-  <b> Write the word here to bold it </b>

                                     Or

                 <strong> Wrote the word here to bold it </strong>

2.  Italic:-  <i> Write the word here to change it into italic form </i>

                                          Or

                 <em> Write the word here to change it into italic form </em>   

3. Del tag:-   <del> Line come on the text </del>

4. Sub script :-  

5. Super script:-   

6. Mark tag :- To highlight the given text

             <mark> Write here to highlight it </mark>