Explore
For Enterprise
Join for Free
Log In

검색
포 엔터프라이즈 (For Enterprise)
로그인
무료 회원 가입

Customising links

Loading...

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

런던 대학교

4.5(3,456개의 평가) | 97K명의 학생이 등록함

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)

검토

4.5(3,456개의 평가)

5 stars
2,310 ratings
4 stars
810 ratings
3 stars
230 ratings
2 stars
65 ratings
1 star
41 ratings

JF

Feb 14, 2016

Bright instructors delivering succinct and interesting content, with quick-paced videos and quizzes make a great learning experience. I am really impressed! Thank you, University of London people!

SS

Jan 03, 2016

It's very good for beginner who already have hands in programming. it gives very basic and important concepts about HTML, CSS and javascript. it also gives a brief history of internet and HTML.

수업에서

CSS

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

Customising links3:01

강사:

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 카탈로그 살펴보기

무료로 참여해 맞춤화된 추천, 업데이트 및 제안을 받아보세요.

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

© 2019 Coursera Inc. All rights reserved.

Coursera
소개
리더십
직업
카탈로그
수료증
MasterTrack™ 수료증
학위
포 엔터프라이즈 (For Enterprise)
정부용
캠퍼스용

커뮤니티
Learners
Partners
Developers
Beta Testers
Translators

연결
블로그
Facebook
Linkedin
Twitter
Instagram
YouTube
기술 블로그

기타
조건
개인정보 보호
도움말
접근성
보도 자료
문의하기
디렉토리
계열사