Loading...

Customising links

Course video 15 of 38

Welcome to the second module of 'Responsive website basics'. <p>In this section of the course we will have a look at linking external CSS files to your HTML documents, controlling fonts with CSS and using CSS to customise hyperlink formatting and to control text layout. We will also install the bootstrap library and implement a responsive grid layout- Enjoy! <p> - Matthew, Marco and Kate

Responsive Website Basics: Code with HTML, CSS, and JavaScript

런던 대학교

Responsive Website Development and Design 전문 분야에서 6의 강좌 1

In this course you will learn three key website programming and design languages: HTML, CSS and JavaScript. You will create a web page using basic elements to control layout and style. Additionally, your web page will support interactivity. At the end of the course, you will be able to: 1. Define the purpose of HTML, CSS and JavaScript 2. Make a simple web page using HTML 3. Use CSS to control text styles and layout 4. Use CSS libraries such as Bootstrap to create responsive layouts 5. Use JavaScript variables and functions 6. Manipulate web page content using JavaScript 7. Respond to user input using JavaScript In this course, you will complete: 2 assignments writing HTML, CSS and JavaScript, each taking ~1 hour to complete 4 quizzes, each taking ~20 minutes to complete 1 programming exercise~30 minutes to complete multiple practice quizzes, each taking ~5 minutes to complete Participation in or completion of this online course will not confer academic credit for University of London programmes.

강의 계획서 보기

배우게 될 기술

Jquery, Html, JavaScript, Cascading Style Sheets (CCS)

강사:

Dr Matthew Yee-King
Lecturer
Dr Marco Gillies
Senior Lecturer
Dr Kate Devlin
Senior Lecturer

스크립트

[MUSIC]

Right, so we've gained control over the fonts that are being

used by the web browser to display the different elements of our site.

But now what we might wanna sort of gain a little bit more control about how

it displays those links.

Now remember that links are really important in a web page,

because those are the things that users use to jump around, and navigate our page.

So we might wanna sort of make them a bit more obvious, and a bit more fun to use.

And so the browsers sort of attempt to already highlight

how there's a link there, by underlining it and making it blue, and

also changing the cursor when someone goes over the top of it,

to show them that they can do something.

But we can exaggerate that a little bit more.

So I'm going to show you a couple of CSS tricks to do that.

So first of all I can say a:hover{.

This is what we would call a selector.

And we've seen this in selectors before.

So we've seen the body selector, which says everything that matches you know,

that's inside the body.

Then, the a selector and then, the a hover selector actually says,

hover is when the user is holding the mouse over the top of the a.

So what we can do is we can change the style, when they move the mouse over.

So let's see what it does.

So let's say, change the color to black.

So you can see actually now those links disappear.

Or maybe that's not ideal, because I can't see,

I can't see where the link's going once I"ve moused over it.

So let's give it a white background, so we've got correct contrast.

Okay.

And finally, I don't really like that underlining, to be honest.

Hit text-decoration: none.

So that's removed it.

If I wanted to remove it for all a tags,

I go back up to the master definition for tha a and reload.

Okay, so I prefer that now, it's really.

It's really obvious that something's going to happen when you click on that,

cuz it now displays a nice block of color around your link.

So we've played around a little bit with how the browser displays a text

to really emphasize to the user that something's gonna happen.

Something exciting's gonna happen to encourage them to click on that link,

by basically setting the background color to something with a high contrast

to the rest of page, and by making the color of the font change as well.

So again, that applies back to all of those pages, so

now, if I jump to the other page,

you can see that nice link activity is applied to all of those pages.

[MUSIC]

Coursera 소개

세계 최고의 대학교와 교육 기관의 최상위 강사가 가르쳐주는 강좌와 전문 강좌를 듣고 온라인 학위를 취득하세요.

Join a community of 40 million learners from around the world

Earn a skill-based course certificate to apply your knowledge

Gain confidence in your skills and further your career

Coursera는 세계 최고의 교육에 대한 보편적인 접근 기회를 제공하며, 최고의 대학 및 기관들과 제휴하여 온라인 강좌를 제공합니다.

© 2019 Coursera Inc. All rights reserved.

앱스토어에서 다운로드하기

구글 플레이에서 받기