HTML Link, Line break and Horizontal Rule with examples.
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-
- HTML Link
- HTML Line Break
- HTML Horizontal Rule
-
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. |
- 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 |
- 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,
27 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…
cbd massage · June 30, 2024 at 8:32 pm
Right now it appears like BlogEngine is the best blogging platform out there right now. (from what I’ve read) Is that what you are using on your blog?
cbd oil side effects · June 30, 2024 at 10:59 pm
I have not checked in here for a while as I thought it was getting boring, but the last few posts are great quality so I guess I will add you back to my everyday bloglist. You deserve it my friend 🙂
slot gacor 2024 terpercaya · September 13, 2024 at 4:08 pm
I?ve recently started a web site, the information you offer on this site has helped me tremendously. Thanks for all of your time & work.
카지노총판 · September 17, 2024 at 10:26 am
wonderful points altogether, you simply gained a new reader. What would you recommend in regards to your submit that you simply made a few days ago? Any certain?
ซีรี่ย์จีน123 · September 20, 2024 at 3:13 am
Nice blog here! Also your web site loads up fast! What host are you using? Can I get your affiliate link to your host? I wish my website loaded up as fast as yours lol
โปรสล็อต ฝาก10รับ100 โปรโมชั · September 26, 2024 at 7:57 am
I will right away grab your rss as I can not find your e-mail subscription link or e-newsletter service. Do you have any? Kindly let me know so that I could subscribe. Thanks.
สล็อต pg เครดิตฟรี 100 · September 26, 2024 at 8:57 am
That is very fascinating, You are an overly professional blogger. I have joined your rss feed and look forward to in the hunt for more of your magnificent post. Additionally, I have shared your website in my social networks!
pure cbd oil · November 2, 2024 at 10:19 am
One other issue is when you are in a problem where you do not possess a cosigner then you may really need to try to wear out all of your federal funding options. You will find many funds and other grants that will offer you money to help you with education expenses. Thx for the post.
cbd oil for cats · November 3, 2024 at 9:26 am
Greetings from Colorado! I’m bored to tears at work so I decided to browse your blog on my iphone during lunch break. I really like the info you provide here and can’t wait to take a look when I get home. I’m amazed at how quick your blog loaded on my phone .. I’m not even using WIFI, just 3G .. Anyhow, awesome blog!
cbd massage · November 3, 2024 at 10:07 am
Great blog right here! Additionally your site so much up very fast! What host are you the usage of? Can I am getting your affiliate hyperlink to your host? I want my site loaded up as quickly as yours lol
bokep indonesia · November 4, 2024 at 8:40 am
Somebody necessarily lend a hand to make significantly articles I would state. That is the first time I frequented your web page and up to now? I surprised with the analysis you made to create this particular post amazing. Excellent activity!
cbd oil effects · November 4, 2024 at 9:19 am
I have seen a lot of useful issues on your web-site about personal computers. However, I’ve the thoughts and opinions that laptops are still not quite powerful sufficiently to be a good choice if you generally do projects that require a great deal of power, for instance video touch-ups. But for web surfing, microsoft word processing, and most other typical computer work they are all right, provided you cannot mind the screen size. Many thanks for sharing your thinking.
smorter giremal · November 4, 2024 at 11:25 am
I’ll immediately grasp your rss feed as I can not in finding your e-mail subscription link or newsletter service. Do you have any? Please permit me understand in order that I could subscribe. Thanks.