Test your skills: Advanced HTML text - Learn web development | MDN
The aim of this skill test is to assess whether you understand how to use lesser-known HTML elements to mark up advanced semantic features.
developer.mozilla.org
- Task 1
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Advanced HTML text: 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;
}
dl {
color: gray;
margin: 0.5em 0;
}
dt {
font-weight: bold;
color: purple;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>Advanced HTML Animals</h1>
<dl>
<dt>Llama</dt>
<dd>
Tall, woolly quadruped, pointy ears. Sometimes rideable, but grumpy and
spits a lot. Big fan of list items.
</dd>
<dt>Anaconda</dt>
<dd>
A very large constrictor snake; travels rapidly by way of anchors to
sneak up on his prey.
</dd>
<dt>Hippopotamus</dt>
<dd>His description is bottomless.</dd>
</dl>
</body>
</html>
- Task 2
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Advanced HTML text: 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;
}
p {
margin: 0.5em 0;
}
abbr,
time {
color: green;
}
</style>
</head>
<body>
<h1>Advanced text semantics</h1>
<p>Let's start with a quote:</p>
<blockquote>
<p>
<abbr title="HyperText Markup Langague">HTML</abbr>, Hypertext Markup
Language is by default accessible, if used correctly.
</p>
</blockquote>
<p>
<abbr title="Cascading Style Sheets">CSS</abbr>, Cascading Style Sheets,
can also be used to make web pages more, or less, accessible.
</p>
<p>
Chemical Formulae: H<sub>2</sub>O (Water), C<sub>2</sub>H<sub>6</sub>O
(Ethanol).
</p>
<p>
Dates:
<time datetime="2019-12-25">December 25<sup>th</sup> 2019</time>
(Christmas Day),
<time datetime="2019-11-02">November 2<sup>nd</sup> 2019</time> (Día de
los Muertos).
</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] 하이퍼링크 만들기 과제 (5) | 2024.10.12 |
