Module 3 · Answers
Answers & explanations
Section A — Easy
01
HyperText Markup Language. It describes the structure of a web page.
02
<p> paragraph; <a> link/anchor; <img> image; <ul> unordered list.
03
Content, padding, border, margin (innermost to outermost).
04
A short description of the image. Used by screen readers (accessibility) and shown if the image fails to load.
Section B — Medium
05
<a href="https://example.com">Visit us</a>
06
p {
color: blue;
padding: 20px;
}
07
The closing tag should be
</p>, not another opening <p>.
<p>Hello world</p>
08
(a) JPG — small file size, good for photos.
(b) PNG — supports transparency.
(c) SVG — vector graphic, sharp at any size.
(b) PNG — supports transparency.
(c) SVG — vector graphic, sharp at any size.
Section C — Hard
09
<!DOCTYPE html>
<html>
<head>
<title>My Pets</title>
</head>
<body>
<h1>My Pets</h1>
<p>Here are my pets.</p>
<ul>
<li>Dog</li>
<li>Cat</li>
<li>Hamster</li>
</ul>
</body>
</html>
10
Examples:
1) Increase contrast, e.g.
2) Increase the font size to at least 16px on body text.
3) Increase line-height to ~1.5 — more white space between lines makes long text more readable.
1) Increase contrast, e.g.
color: white; on a black background — much easier to read.2) Increase the font size to at least 16px on body text.
3) Increase line-height to ~1.5 — more white space between lines makes long text more readable.
11
Add
target="_blank" to each <a> tag.
<a href="contact.html" target="_blank">Contact</a>