Name: CSS and HTML 5 - Format Hyperlinks
Uploaded: 2020-04-06T08:05:37.000Z
Duration: 10 min 49 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

The imperative

please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

Present continuous

So if you are watching this video and you want more information, please go to Eli, the computer guy dot com.

As you know, I am Eli the computer guy and in today's class and going to be showing you how to format hyperlinks using CSS for your 80 Mount documents and Web applications.

So whenever you go to an HTML document or you go to a WETA application, it is going to be full of hyperlinks, really.

One of the defining components of a human documents are these hyperlinks, And one of the cool things that you could do with CSS is you conform at those hyperlinks so that it is easier for your users to understand where the links are, to understand how they're interacting with links, to understand what links they've already visited so on and so forth.

So this is a pretty simple class, especially if you've been following along with my other CSS courses that I've done.

So let's just jump right over to the computer and I can show you how to format your hyperlinks using CSS.

So here we are, back in my demonstration machine again, I am using a Mac book, so I wrote these two files using text at it.

But when you're writing HTML or CSS, all you need is a basic asking text editor.

So if you're in the Windows world, you can use no pad.

If you're in Lenox World, you can use yet it nano them whatever you want.

The two documents that we have here is basically we have a link dot html.

So this is the file that will open up within the Web browser.

It could be named whatever you want, as long as it ends with dot HTM or dot html.

That is then going to point back to a link style that CSS this particular file.

This is the style sheet for this particular project.

With that, let's go over and take a look at the demonstrations you can.

I understand what we're gonna be coding for.

And when you go over here, this is the basically the HTML document that I've created.

All I have is two sentences here, essentially amusing H one with no additional formatting.

So I'm using just using h one on and then in the middle of both of these sentences I have a lake, so you can see here There's a little bit of different formatting eso with a link on the second on the second example here where this is blue.

This is for when I have not collect on that link.

So it shows me haven't clicked on that link up here where it is gray.

That means that I have clicked on that link.

Then what you'll notice is if I hover over the link, you'll see that it has a background color of yellow.

So if I have a whole list of different links, I'm trying to figure out what link I'm actually trying to click on.

This may be useful for things like tag clouds, eh?

So If you ever deal with WordPress or content management systems, one of the cool pieces of functionally do they have they normally have, like a plug in or widget allows you to create tag clouds.

I don't know, kind of just drops it into something.

Looks like a cloud if you don't know what a tag cloud is on a Google search attack cloud.

But anyway, uh, it can be useful to a degree because it does show you the most used tags.

But when you go to try to click on a tag, it might be a little difficult to really realize what tag you're clicking on.

So basically, if you make it so with hyperlinks, whenever you hover over them, they turn yellow.

That could just make it a lot easier for your users to understand what they're actually hovering over.

Then the next thing that's kind of cool is when I click down.

So all I'm doing now is a click down a click down.

I haven't actually lifted my finger yet, right?

So when the link becomes active, what I have here is that the background color becomes red so I can say OK, this is the link that I'm actually clicking on at this moment.

I don't want to actually click on the link.

I can just move, move my mouse off the link, pull up on the mouse and then I'm not actually going to go through.

So, like, with this link, I haven't gone here yet.

But then, like, Oh, is that the link I wanna click on?

And I haven't actually clicked on the link.

So I go here, I hold down and then I pull up.

Then it will actually take me to wherever the link is pointed Thio.

And now we can see that both links are now Grey.

Let's go and actually take a look at the code that's required to create this.

The first thing we'll take a look at is employed the HTML because it is ridiculously simple.

Same stuff we've done in all of our projects.

Basically, we open the HTML we open the head, we're going to point to the style sheet, so the style sheet is called link style dot C s s.

So again, you can simply put the name of style sheet here if it is insane folder or directory as the HTML document.

If not, you have to put the full file path in.

And here basically, I have just to h one sentence is what I have here is that says this is a and I do a ref, So all I'm doing is creating a hyperlink.

So with this, I actually just linked directly back to the page itself again.

These are the kinds of things you can do in the HTML world who doesn't really matter again in the production environment.

Don't do this, But, you know, if you're just trying to create links and they have to go somewhere, you can actually just have them point back to themselves anyway.

So I'm just having this essentially point back to itself.

And then I closed the hyperlink, finished the sentence and then close the H one and then open up another age one.

I'm pointing this to CNN dot com again just to give me a different thing that I'm pointing at with the word.

Then I close the hyperlink at last word closed the age one.

Then I simply closed the body and I closed the HTML.

So the interesting stuff is when we go over then to the CSS, this is where we have the four things that we actually have to code for.

That's what we're going to do Here is a a eso Whenever you're dealing with tags and HTML or elements within CSS, one of things you can do is you can just simply call the tag.

So what we're doing here with the A is we're simply calling the A here for the hyperlink for the A giraffe.

So we're basically saying Whenever you see an A, so whenever you see in a comma and it is a link, then I want you to turn it to a color blue.

Coghlan, Uh, and you're going to be hovering over.

That's basically whenever you're hovering over hyperlink, I want to take the background color and make it yellow.

A active so active means you're holding down on the mouse.

I want to turn the background color to be read and then a visited.

I want the color to be gray, and when you do all of that, this is essentially what you get.

And again, this could be one of those very simple things you can do with CSS and formatting to make your documents.

HTML Documents and Web applications be a lot easier to use again when you think about things from like the coyote perspective, remember, if somebody goes to your page and there's a lot of it's like an administration panel, so there's a lot of different things to click on.

It could be very useful for your user for your visitor toe, have those hyperlinks to be very easy to see, And so when they're trying to navigate through and actually try to use whatever that dashboard you're giving them by formatting those hyperlinks in different ways that can make it a lot easier for them.

So this is basically all there is to it s so when you have a link so you can do Cole and Link.

So when is the link You conform at it in a way, cool and hover.

Subtitles ListPlay Video

CSS and HTML 5 - Format Hyperlinks

essentially

content

basically

opinion