So let's now continue adding content to our page.
At the moment we have this title and this paragraph,
and now I want to add a second paragraph here.
I want to add a second paragraph below the first one,
where we add more texts and I'm adding this text in a new
paragraph instead of adding it in the first paragraph,
because, A, I soon want to style it differently.
And they [inaudible 00:00:34] shouldn't get the styles
which are applied on this first paragraph.
And B if we use a new paragraph,
we'll automatically get a line break.
If I add some text here
and I add a line break in my code,
you notice that if I reload,
the line break is not here on the page.
And that's something to note and something to be aware of.
Line breaks in your text,
and your code, are ignored by browser, by HTML.
If they are in one of the same HTML element,
basically there are some exceptions and you could also
change this behavior with CSS, but by default,
they are ignored.
So if you have a new paragraph of text,
you really want to create a new paragraph element.
And if you think about it, it makes sense.
The HTML element is called a paragraph element.
So every paragraph of text should be wrapped by its own
paragraph element.
That's the most semantically correct way of structuring your
content.
And that's why I'm using a new paragraph here.
I want to have a new paragraph of text.
Now in this paragraph, I'll say,
I'll achieve this goal
by diving
into more learning resources.
That's the text I'll have here.
And if we save this and reload, we see that text here,
and this text does not have the styling from the first
paragraph because we haven't added to that style attribute
here.
So for the moment, I'll just copy this style,
attribute with the values, with the CSS code,
we assigned to the first paragraph and add it to the second
paragraph as well.
And I'll press this format document shortcut,
so that my code is automatically formatted and is structured
in a more readable way.
And now if I reload,
that second paragraph is styled as well.
Now I'll come back to that styling because having to copy
that style around is not ideal for a couple of reasons,
but I'll come back to that.
For the moment,
I want to add more content and to be precise,
I want to turn more learning resources into a link.
The cost that's another common requirement,
which you might have on any website
you're building that you want to include some links that
lead somewhere else, either to another page of your site.
But at the moment, we only have one page,
one HTML file here.
Or to some external resource.
And here I want to start with some external resource.
Let's simply say, we want to link to Google here,
google.com, but you can link to any page.
If we want to link there, we need to grab that address.
google.com or this complete address,
as it shows up in the browser,
including HTTPS colon slash slash,
we need to grab this address.
And then what?
How do we turn this text into a link?
Well, we got a separate dedicated HTML element for this.
We got the a element
and a stands for anchor tag
and the anchor tag is such a link.
Now this anchor tag needs to be wrapped around the text.
That should become a link.
And then you need to add one very important thing to this
anchor element.
You need to add an HTML attribute because, like this,
we would tell the browser which texts should become a link,
the texts between the opening and closing anchor tags,
but we don't tell the browser what the address,
what the target's destination of this link is.
And to tell the browser, we need to add an attribute here,
which defines this target address.
So that's another example of us adding more information to
an element with help of attributes.
And here it's the h ref, the hyperlink reference attribute,
which we need to add.
How do I know that?
From experience, from the MDN docs,
And of course, by using auto completion.
If we add this attribute,
we can now set a target destination of this link
and here the value then should be the URL we want to go to,
for example, in this case,
HTTPS colon slash slash
www.google.com.
But of course you can use any address here.
And I'll press this auto format shortcut again,
so that this is formatted again,
please note that it did now add a line break
after into, for me here
and that this is no problem.
That this will be ignored, as you learned.
And therefore, this will still be one sentence in one line
once it's output by the browser.
And speaking of that, let's see what the browser outputs.
If I reload now,
we see that more learning resources is underlined.
And if I click on it, I'm taken to Google.
And of course, now I'll go back
because I want to stay on my page.
Now, regarding the fact that it's underlined
and actually also has a different color.
We did learn that we can now inspect this in the browser to
open the dev tools and have a look at
why it's looking this way.
And here, indeed,
we see that we haven't assigned any custom styles,
but we have some user agent styles.
And here, some color is set and the text decoration
is set to underline.
And that's why we do have this look here.
So that's now a link added.
And of course that's another key feature
because basically every webpage we're going to build
will, very likely, need some links.