HTML TUTORIAL PART-4: Link, Image,Text Formatting,div and span

HTML TUTORIAL PART-4:  Link, Image,Text Formatting,div and span

Introduction

Dear Reader, Already in PART-3 we have HTML Body Tag Element What? Apart from that, we have also learned about HTML Headings, Paragraphs and Lists. In today’s episode we will learn the use of HTML Link, Image, Text Formatting, div and span. Let’s get started:

Link Tag Element

Adding the lexical meaning of link. In other words, LInking is the process of linking one page to another. Linking to HTML is done with the <a> </a> tag. And the one with which the linkup will be done is to give it in the href attribute of the <a> tag. For example: <a href=”test.html”> Link Text or Image or Video </a> and this linking can be of three types.

  1. Inpage Linking
  2. Internal Linking
  3. External Linking

Let us know about the above three types of links:

    Inpage linking is usually linking up with different positions or tags in the page. For example: <a href=”#middletsya> Go Middle </a> that is, linking up with the middle id of the same page.

    Internal Link is to link up one page of the same server with another page. For example: <a href=”test.php”> Go Test Page </a> i.e., linking up to a page called test.php on the same server.

    External Link is to link up with any page of a different server. For example: <a href=”http://www.example.com/test.phpaste> Go Test Page </a> i.e., linking up to a page named test.php on example.com Server.

Image Tag Element :

The tag needed to add an image or picture to a web page is <img>. It has no end tag. Not only does <img> not work, it always has to use the src attribute. Eg <img src = ”pic.png”>, then the pic.png image will be displayed. In addition to the src attribute in the <img> tag, there is also an alt attribute with which you can see an alternative text if you do not get the image for any reason. You can also set the width and height of the image with the width and height attribute.

Pre-preparation

You have to take a folder named web on desktop and put a picture saved as pic.png in it.

Example

Image

Picture Tag

The <picture> </picture> tag is used to display different images for different resolutions of the computer. Let’s illustrate this with an example:

Image

Output

Image

Explanation: Now if you go to the Inspect Element of your browser and check responsive, you will see the automatic change of image three.

SVG Tag

<svg> is used to create svg images on websites.

Let’s understand with an example:

Image

Output

Image

Text Formatting Element

Do you remember Bold, Italic, Underline, strikethrough, Subscript, Superscript etc. text formatting in Microsoft Word? In the case of HTML as well as Microsoft Word text formatting can be done. <b>, <i>, <u>, <strike>, <sub>, <sup>, <big>, <small>>, <strong>, <samp>, <tt> for text formatting in HTML. , <abbr>, <var>, <code>, <address> etc. tags are used.

Let’s look at all the Text Formatting with an example:

Image

Output

Image

HTML div

div means division, a part or division. A section of HTML pages. Div tags are used to divide HTML elements into different groups. And the main purpose of dividing into different parts is to give different styles. The div sits one below the other by default, but you can arrange the div any way you want using the style sheet. Below is an example of a simple layout with div, and we will learn more about div in the CSS section.

So let’s look at the example:

Image

Output

Image

HTML span:

The div by default sits one below the other, i.e. if you use more than one div to CSS Style a specific part of a text line, you will see that one div sits below another div and breaks the corresponding line. And if it ends in one line, you have to write CSS again separately. And if you do this with span, this kind of problem will not happen. Basically span is used to style CSS on a specific part of a line.

See the example below:

Image

Output

Image

Leave a Reply

Your email address will not be published. Required fields are marked *