Link not working

I would be grateful if someone can explain to me what mistake I make in this piece of code, because I can easily open the first link in the same tab, whereas the second only opens if I open it in a new tab (but not if click it):

<p> If you are interested in finding more information on Perotin and his musical legacy, you may access this <a href="https://en.wikipedia.org/wiki/P%C3%A9rotin"> Wikipedia entry, </a> whereas for a fairly impressive discography, you may access this <a href="http://www.medieval.org/emfaq/composers/perotin.html"> link. </a> </p>

I am a beginner and I appreciate very much any useful input.

R. Musil

I actually discovered that instead of displying the code, the browser shows the text, and both links are now working. However, in “codepen.io” editor, the second link does not work.

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

Could you post a link to your codepen?

EDIT. If you’re adding links on codepen, always add the target="_blank" attribute to your links so they always open in a new tab. Codepen doesn’t like having links opened in its preview window.

Dear Kev,

many thanks for your kind work and help. Here is the link to my Codepen:

Many thanks,

Robert

Yep, you only need to add the target="_blank" attribute to your <a> tags.

Also, it’s preferable to keep styles together. Instead of using JS, set the <h1>'s font size using CSS.

The align attribute is obsolete; don’t use it. Use CSS to align text.

There shouldn’t be a <body> tag in your code. The entire HTML section in codepen already represents the contents of the <body> element. And stuff like <h1>, <div>, <img>, etc. (things that appear on the webpage) should always be inside <body>.

The empty <p> elements don’t do anything, so you can remove them. On the other hand, those big chunks of text should be enclosed in <p> tags (remember that p stands for paragraph).

The use of <i> I think is perfect :thumbsup:

I think using <figure> is unnecessary. Better yet, add a <figcaption> to describe what the image is about.

Dear Kev,

apologize for replying late and many thanks for your very valuable comments and information.
I tried using css to align the image but it continued to remain in the left, I only managed to have it centered by using the “align” attribute. This was also the reason for which I used the “figure” tag, because I assumed I may do something wrong. Following your suggestion I tried again with css and it seems that it now works. I did not feel the need to add a caption because the figure is not directly related to Perotin, but is only intended to create a visual feeling of the epoch Perotin lived in. The empty <p> are intended to provide some empty space between paragraphs (this is the solution I found recommended on searching for how to insert blanks; I am not sure that it works, if you can suggest a more orthodox way of inserting empty lines (between the heading and the text paragraph) I would be grateful). Yes, you are right that I should have included all big chunks of text in <p> tags, I simply forgot to do it.

Many many thanks,

Robert

I guess the most orthodox way of inserting space between paragraphs is to set a margin property in the CSS. Like

p {
  margin-top: 30px;
  margin-bottom: 30px;
}

I see you have applied display: block; and auto-margins to the image to center it. To center text, you can use text-align: center;. Like

h1 {
  text-align: center;
}

No need to be so formal :smiley:

Thanks, Kev, I’ve done those. Now my question is: for the italicized subtitle (“The unknown master”) I have used an h2 tag, as well as for the other sub-headings (e.g. “Who was Master Perotin?”). I only want the italicized subtitle centered, no the others. If I use CSS h2 for this, it would be applied uniformly. How should I proceed to have different alignments? (I assume I should have one of the h3, but I am not sure which of them and if that is the best option). Can you make a suggestion (apologies for extracting too much from you). As for being formal, I think it is just because I am too old :slight_smile:

You could make “The unknown master” an <h2>, then change those that follow into <h3>. Then you can have

h2 {
  font-style: italic;
}

If your second link is correct, then the problem may be network connection. Had the same problem on a link of my tribute project. Problem was solved when I logged out and the logged in. Hope it helps.

Thanks for your input Artmis3.

I am sorry, it seems I mixed-up the reply buttons. Thanks for your help again, Kev.

Robert

Thanks for your input, Artimis3.

Robert