https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links
Test your skills: Links - Learn web development | MDN
The aim of this skill test is to assess whether you understand how to implement hyperlinks in HTML.
developer.mozilla.org
- Task 1
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Links: Task 1</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
h1 {
font-size: 2rem;
margin: 0;
color: purple;
}
p {
color: gray;
margin: 0.5em 0;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>Information on Whales</h1>
<p>
For more information on our conservation activities and which Whales we
study, see our
<a href="whales.html" target="_blank" title="whales are smart!!"
>Whales page</a
>.
</p>
<p>
If you want to ask our team more questions, feel free to
<a href="mailto:whales@example.com?subject=Question%20about%20Whales"
>email us</a
>.
</p>
</body>
</html>
whales.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
- Task 2
디렉토리 구조
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Links: Task 2</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
h1 {
font-size: 2rem;
margin: 0;
color: purple;
}
li {
color: gray;
margin: 0.5em 0;
}
div {
height: 600px;
}
</style>
</head>
<body>
<h1>List path tests</h1>
<ul>
<li>
<a href="blue/blue-whale.jpg" target="_blank"
>Link me to the blue whale image</a
>
</li>
<li>
<a href="narwhal/narwhal.jpg" target="_blank"
>Link me to the narwhal image</a
>
</li>
<li>
<a href="https://www.google.co.uk/imghp" target="_blank"
>Link me to Google image search</a
>
</li>
<li>
<a href="#bottom">Link me to the paragraph at the bottom of the page</a>
</li>
</ul>
<div></div>
<p id="bottom">The bottom of the page!</p>
</body>
</html>
- Task 3
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Links: Task 3</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
p {
color: gray;
margin: 0.5em 0;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<p>
We do lots of work with Narwhals. To find out more about this work,
<a href="narwhals.html" target="_blank">click Narwhals</a>.
</p>
<p>
You can email our support team if you have any more questions —
<a href="mailto:whales@example.com">Email on whales@example.com</a> to do
so.
</p>
<p>
You can also
<a href="factfile.pdf" target="_blank">Download factfile(PDF, 4MB)</a> to
download our factfile, which contains lots more information, including an
FAQ.
</p>
</body>
</html>728x90
'Computer > HTML, CSS, Javascript' 카테고리의 다른 글
| [HTML] 과제_Multimedia and embedding (2) | 2024.10.14 |
|---|---|
| [HTML] 과제: HTML 이미지 (1) | 2024.10.13 |
| [HTML] 콘텐츠 페이지 구조화 (10) | 2024.10.13 |
| [HTML]과제: 문서 마크업하기 (2) | 2024.10.13 |
| [HTML] 고급 텍스트 서식 지정 과제 (1) | 2024.10.12 |
