HTML Link, Line break and Horizontal Rule with examples.

Published by StudyMuch on

HTML tutorial 3

HTML TUTORIAL (PART-03)

HTML Link, Line break and Horizontal Rule.

HTML part 3 here we are learning some important tag in use html web pages.

Tags and Attributes are given below-

  1. HTML Link
  2. HTML Line Break
  3. HTML Horizontal Rule
  1. HTML Link

    HTML link are very important for web pages, we can easily go one pages to other pages through the link, all website use Hyperlink to jump current web page’s location to another web pages. HTML link are Hyperlink.

    To make HTML link we use <a> element with href attribute.
     HTML link structure

  • Start tag with <a> element.
  • Then use <href> attribute.
  • Content. A text, image and other html elements.
  • End with end tag </a>.
  • Example: <a href=”https://www.studyons.com”>StudyOns.Com</a>.

Example of HTML link:

<!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>link tag</title>
</head>
<body>
    <p style="color: blue;">Here We Use 'a' 
Tag For Link,
 To Jump Another Pages </p>
  <a href="https://www.google.com">
Google</a> ,
  <a href="https://www.facebook.com">
Facebook</a>
  <p style="color: crimson;">When we click 
above 
link 
jump to 
Facebook $ 
Google</p>
</body>
</html>

Output here above “HTML link” coding:

Here We Use ‘<a>’ Tag For Link, To Jump Another Webpages.
Google, Facebook
When we click above link jump to Facebook $ Google.

Opening Link in new tag;

We can also open a link in new tab. Some times we want hold one window because it is important, but that time we have option for one new window.

To do it we need to use target ‘attribute’ with the value ‘_blank’.

Here example of link open in new tab;

<!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>link tag</title>
</head>
<body>
    <p style="color: rgb(255, 208, 0);">Here We Use 'target' 
Attribute
 with 
'_blank' Value, To Jump New Tab.</p>
  <a href="https://www.google.com"
target="_blank">Google</a> ,
  <a href="https://www.facebook.com"
target="_blank">Facebook</a>
  <p style="color: rgb(197, 20, 220);">When we 
click above link
 jump 
to 
Facebook $ Google in New Tab.</p>
</body>
</html>

Output of above program:

Here We Use ‘target’ Attribute with ‘_blank’ Value, To Jump New Tab.
Google, Facebook
When we click above link jump to Facebook $ Google in New Tab.
  1. HTML Line Break

HTML line break is a empty element it use simple to break a line.

To break a line in html use to <br> element.

Look at the example below to understand this element.

Example of HTML Line Break

<!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>Example br tag</title>
</head>
<body>
    <!--Use of br element-->
    I am a boy <br>
    I learn coding <br>
    With use of HTML <br <br>
    <!--Without use of br element-->
    I am a boy
    I learn coding
    With use of HTML
</body>
</html>

Output of above program “<br> element”

Use of <br> element;
I am a boy
I learn coding
With use of HTML
Without use of <br> element;
I am a boy I learn coding with use of HTML
  1. HTML Horizontal Rule

HTML horizontal line is also a empty element, It is use to insert a horizontal line. This is also called Horizontal Rule that is used to separate a content in HTML.

The <hr> element define an HTML horizontal line.

It is also used to break the between paragraph element.

Look at the example below to understand this element rule.

Example of Horizontal Line in HTML

<!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>Example hr tag</title>
</head>
<body>
   <p>This is example of horizontal line.</p>
   <hr>
   <p>We use here hr tag for Horizontal line.</p>
</body>
</html>

Output of the above program horizontal line;

This is example of horizontal line.

We use here hr tag for Horizontal line.

Styling of HTML Horizontal Line, <hr> tag ;

We also style this like change the color, width and height of Horizontal line.

To change style simply use style element.

Example of Styling HTML 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>Exemple hr tag</title>
</head>
<body>
   <p>Horizontal line with color.</p>
   <hr color="black">
   <p>Horizontal line with height.</p>
   <hr color="red"
style="height: 20px;">
   <p>we use width in Horizontal line</p>
   <hr style="width: 150px;">
</body>
</html>

Output of above program:

Horizontal line with colour.

Horizontal line with height.

we use width in Horizontal line

In this tutorial we learned HTML link, HTML line break <br> tag and HTML Horizontal rule <hr> tag, in next tutorial we learn new topic in HTML.

Learn Also-

  • Html horizontal line,
  • Html horizontal line color,
  • Html horizontal line thickness,
  • Html hr style,
  • hr tag attributes,
  • Learn HTML link,

 


14 Comments

zoritoler imol · July 2, 2022 at 1:16 am

Excellent goods from you, man. I have understand your stuff previous to and you are just extremely excellent. I really like what you have acquired here, certainly like what you are stating and the way in which you say it. You make it entertaining and you still care for to keep it wise. I can not wait to read far more from you. This is actually a terrific website.

binance Отваряне на профил · April 18, 2023 at 4:05 am

Can you be more specific about the content of your article? After reading it, I still have some doubts. Hope you can help me.

Открыть учетную запись в binance · May 13, 2023 at 5:35 pm

Your article helped me a lot, is there any more related content? Thanks!

selling POS systems · December 12, 2023 at 9:17 am

I am not sure where you are getting your info, but great topic. I needs to spend some time learning more or understanding more. Thanks for fantastic info I was looking for this info for my mission.

88idr · January 4, 2024 at 4:15 pm

Hi there, You’ve done a great job. I?ll certainly digg it and personally suggest to my friends. I am sure they’ll be benefited from this site.

druck ups iii · February 5, 2024 at 8:20 pm

Great site. Lots of useful info here. I?m sending it to some friends ans also sharing in delicious. And certainly, thanks for your sweat!

film porno · February 10, 2024 at 11:14 pm

Hi there, just became alert to your blog through Google, and found that it’s truly informative. I am gonna watch out for brussels. I?ll appreciate if you continue this in future. Many people will be benefited from your writing. Cheers!

ZoneAlarm coupon · February 24, 2024 at 11:19 am

My spouse and I absolutely love your blog and find most of your post’s to be exactly what I’m looking for. Does one offer guest writers to write content for you? I wouldn’t mind publishing a post or elaborating on some of the subjects you write about here. Again, awesome website!

link bokep · April 30, 2024 at 5:37 am

I like what you guys are up too. Such smart work and reporting! Carry on the excellent works guys I?ve incorporated you guys to my blogroll. I think it’ll improve the value of my website 🙂

bokep indo · April 30, 2024 at 8:24 am

Pretty great post. I just stumbled upon your weblog and wanted to mention that I have truly loved browsing your weblog posts. In any case I?ll be subscribing in your rss feed and I hope you write again soon!

tlovertonet · May 6, 2024 at 5:27 am

I like what you guys are up also. Such smart work and reporting! Keep up the superb works guys I?¦ve incorporated you guys to my blogroll. I think it will improve the value of my web site 🙂

situs bokep · May 7, 2024 at 1:40 am

Hi! I’ve been following your weblog for a while now and finally got the courage to go ahead and give you a shout out from Lubbock Texas! Just wanted to tell you keep up the good job!

situs bokep · May 7, 2024 at 5:06 pm

I appreciate, cause I found exactly what I was looking for. You’ve ended my 4 day long hunt! God Bless you man. Have a great day. Bye

Real Money Ludo Game · May 9, 2024 at 12:29 pm

The information shared is of top quality which has to get appreciated at all levels. Well done…

Leave a Reply

Avatar placeholder

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