Morning y’all! I’ll be without wifi for my computer for most of the day so I’ll get today’s coding session out the way early.
Very few webpages have 100% original content. Most of them link to outside sources.
So if we want to link an outside source on our page, we use the anchor (a) elements. The code looks like:
<a href"sitelink.com">link description</a>
The ‘link description’ is the text on the page that will be blue and clickable. Notice there’s a closing angle bracket (>) after the link.
I’ll definitely be using this a lot as I write more posts that build on previous ones.
While we know that we link other pages to a page, we can also link internal sections of a page within itself; we can jump to other floors of the building instead of going to a different building altogether. You mainly see these as ‘jump to top/bottom’ buttons.
FCC only has me do this with a ‘Jump to Bottom’ button. I’ll have to learn how this works altogether later. So the code:
<a href="#footer">Jump to Bottom</a>
That’s put at the part of the page where you want the button to be. Since this is jumping to the bottom, you would put the next line at the bottom
<footer id="footer">Bottom page text</footer>
The ‘Bottom page text’ will not be a button. It is simply the part of the page our ‘Jump to Bottom’ will take us to.
Unfortunately, most of our external links won’t be standalone text, they’ll have to be nested within a paragraph.
I find this process unnecessarily complicated 🙄, but I gotta do what I gotta do.
So since this is within a paragraph, the code will naturally be within a <p> tag.
<p>Unlinked text <a href="sitelink.com" target="_blank">linked text</a></p>
Now let’s say I’m sure that a certain text will be linked, but I don’t know where it will be linked to yet. This is when I create a dead link.
This one is nice and simple. Wherever you would put the link, you simply put a #.
Yup, that’s it. Right where it says “sitelink.com” in the previous code, you would replace that with #.
What I Learned Today
- How to link a page’s text to an external link
- How to link a page’s text to another section of the same page
- How to link a text within a paragraph, as compared to the link being by itself
- How to create a ‘dead link’, a text that is in place to be linked but has not been yet
Concerns
- I wonder why certain texts need to be quoted or spaced while others don’t.
- I don’t know what purpose the ‘target=”_blank” code serves yet
Only got a few done today. Next post I’ll be closing out the HTML section so I can move onto CSS.