Test your skills: HTML images - Learn web development | MDN
The aim of this skill test is to assess whether you understand images and how to embed them in HTML.
developer.mozilla.org
- Task 1
폴더 구조
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>HTML images: Task 1</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Basic image embed</h1>
<img
src="images/blueberries.jpg"
alt="blueberries"
width="615"
height="419"
/>
</body>
</html>
- Task 2
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>HTML images: Task 2</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
border: 1px solid black;
max-width: 100%;
}
</style>
</head>
<body>
<h1>Basic image title</h1>
<img
src="larch.jpg"
alt="Several tall evergreen trees called larches"
title="This is a image of forest"
/>
</body>
</html>
- Task 3
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>HTML images: Task 3</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>Image and caption</h1>
<figure>
<img
src="firefox.png"
alt="An abstract flaming fox wrapping around a blue sphere"
width="446"
height="460"
/>
<figcaption>The Firefox logo, newly abstracted for 2019!</figcaption>
</figure>
</body>
</html>
오류있으면 댓글 남겨주세요. 감사합니다!
728x90
'Computer > HTML, CSS, Javascript' 카테고리의 다른 글
| [HTML]과제: 반응형 이미지 (6) | 2024.10.15 |
|---|---|
| [HTML] 과제_Multimedia and embedding (2) | 2024.10.14 |
| [HTML] 콘텐츠 페이지 구조화 (10) | 2024.10.13 |
| [HTML]과제: 문서 마크업하기 (2) | 2024.10.13 |
| [HTML] 고급 텍스트 서식 지정 과제 (1) | 2024.10.12 |
