Introduction to HTML The image tag, anchor tag and the button tag The division tag Ordered and Unordered Lists in HTML Tables in HTML HTML Forms

The image tag, anchor tag and the button tag

Last time, we created our first HTML webpage using the heading tag and paragraph tags. We have also looked at the Emmet Shortcut tricks to make our work easier! Now, lets look at some other tags also which make our webpage even more attractive. Now HTML tags have attributes which control certain behaviour of a tag.

The <image> tag

This tag is used to display an image on the webpage. The src attribute denotes the location of the image. If the image is present in the current folder, we simply give the name of the image. Otherwise, we need to specify its full location so that the browser knows from where to find the image. We can specify the height and width of the image using thewidth and height attributes.If, we do not specify the width and height,the image will be rendered in its full size. The alt attribute specifies the placeholder text that will be displayed in case the browser fails to display the image. 

    <!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">
    </head>
    <body>
        <h1>Rapid Coders</h1>
        <img src="elite.jpeg" width="200" height="200" alt="Rapid Coders">
    </body>
    </html>
output of above code

The <a> tag

It is short for anchor tags. It is used to create hyperlinks in HTML. To use it,we specify the link using the href attribute as follows. 

    <!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">
    </head>

    <body>
        <h1>Rapid Coders</h1>
        <h3>
            <a href="www.youtube.com/Rapid%20Coders">Visit my youtube channel here!</a>
        </h3>
    </body>

    </html>
output of above code
When we click on the text "Visit my youtube channel here!". The browser will open the link in the current window.

The <button> tag

This tag is used to create a button.It is used as follows: 

    <!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">
    </head>
    <h1>Rapid Coders</h1>
    <button>Subscribe</button>

    <body>
    </body>

    </html>
output of above code

Some other tags

  • <strong> -This is used to bold a text.
  • <u> -This is used to underline a text.
  • <del> -This is used to cross a text.
  • <mark> -This is used to highlight a text.
  • <sub> -This is used to write a text in subscript.
  • <sup> -This is used to write a text in superscript.
  • <br> -This is used to give a line break(leave a blank line).
  • <hr> -This is used to add a horizontal line.

    <!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>This is a <strong>strong</strong> word in a paragraph.</p>
        <p>This is a <u>underlined</u> word in a paragraph.</p>
        <p>This is a <del>deleted</del> word in a paragraph.</p>
        <br>
        <p>This is a <mark>marked</mark> word in a paragraph.</p>
        <p>This is a <sub>subscripted</sub> word in a paragraph.</p>
        <p>This is a <sup>superscripted</sup> word in a paragraph.</p>
        <hr>
        </body>
    </html>
output of above code