코딩 배우기 | Learning Coding | HTML Basics II
코딩 배우기 | Learning Coding | HTML Basics II
HTML STRUCTURE : USING LISTS _ HTML Basics II
Now that you know how to build a webpage, let's learn how to make it look a little nicer. You can add lists, change fonts, and more!
HTML Basics II | Making lists | Codecademy
1/16 Introduction
<!DOCTYPE html>
<html>
<head>
<title>JONE STUDIO</title>
</head>
<body>
<p>Just do it!</p>
</body>
</html>
2/16 Indentation is your friend
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
| Indentation? 뭔지 잘 모르겠네요.
3/16 Ordered lists
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h1>List of my favorite things</h1>
<ol>
<li>Raindrops on roses</li>
<li>Whiskers on kittens</li>
<li>Bright copper kettles</li>
<li>Warm woolen mittens</li>
</ol>
<h2>List of things I find just OK.</h2>
<ol>
<li>Sonata</li>
<li>Genesis</li>
<li>K5</li>
</ol>
</body>
</html>
4/16 One more ordered list
<!DOCTYPE html>
<html>
<head>
<title>JONE STUDIO</title>
</head>
<body>
<h3>Most annoying TV celebrities</h3>
<ol>
<li>유재석</li>
<li>차승원</li>
<li>김병만</li>
</ol>
<h2>Top three things I can do for Mother' Day.</h2>
<ol>
<li>Cook</li>
<li>Vacation</li>
<li>Drive</li>
</ol>
</body>
</html>
5/16 Unordered lists
<!DOCTYPE html>
<html>
<head>
<title>Unordered Lists</title>
</head>
<body>
<h1>Some random thoughts</h1>
<p>Umm...</p>
<ul>
<li>Raindrops on roses</li>
<li>Whiskers on kittens</li>
<li>Bright copper kettles</li>
<li>Warm woolen mittens</li>
</ul>
</body>
</html>
6/16 Lists inside a list
<!DOCTYPE html>
<html>
<head>
<title>Nested lists</title>
</head>
<body>
<ol>
<li>Dad's interests
<ul>
<li>football</li>
<li>knitting</li>
</ul>
</li>
<li>Mom's interests
<ul>
<li>hating football</li>
<li>skydiving</li>
</ul>
</li>
</ol>
<ul>
<li>Favorite Boys' Names
<ol>
<li>철수</li>
<li>영철</li>
<li>민식</li>
</ol>
</li>
<li>Favorite Girls' Names
<ol>
<li>영희</li>
<li>숙희</li>
<li>미영</li>
</ol>
</li>
</ul>
</body>
</html>
HTML STRUCTURE : USING LISTS _ HTML Basics II
Now that you know how to build a webpage, let's learn how to make it look a little nicer. You can add lists, change fonts, and more!
HTML Basics II | Making lists | Codecademy
1/16 Introduction
<!DOCTYPE html>
<html>
<head>
<title>JONE STUDIO</title>
</head>
<body>
<p>Just do it!</p>
</body>
</html>
2/16 Indentation is your friend
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
| Indentation? 뭔지 잘 모르겠네요.
3/16 Ordered lists
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h1>List of my favorite things</h1>
<ol>
<li>Raindrops on roses</li>
<li>Whiskers on kittens</li>
<li>Bright copper kettles</li>
<li>Warm woolen mittens</li>
</ol>
<h2>List of things I find just OK.</h2>
<ol>
<li>Sonata</li>
<li>Genesis</li>
<li>K5</li>
</ol>
</body>
</html>
4/16 One more ordered list
<!DOCTYPE html>
<html>
<head>
<title>JONE STUDIO</title>
</head>
<body>
<h3>Most annoying TV celebrities</h3>
<ol>
<li>유재석</li>
<li>차승원</li>
<li>김병만</li>
</ol>
<h2>Top three things I can do for Mother' Day.</h2>
<ol>
<li>Cook</li>
<li>Vacation</li>
<li>Drive</li>
</ol>
</body>
</html>
5/16 Unordered lists
<!DOCTYPE html>
<html>
<head>
<title>Unordered Lists</title>
</head>
<body>
<h1>Some random thoughts</h1>
<p>Umm...</p>
<ul>
<li>Raindrops on roses</li>
<li>Whiskers on kittens</li>
<li>Bright copper kettles</li>
<li>Warm woolen mittens</li>
</ul>
</body>
</html>
6/16 Lists inside a list
<!DOCTYPE html>
<html>
<head>
<title>Nested lists</title>
</head>
<body>
<ol>
<li>Dad's interests
<ul>
<li>football</li>
<li>knitting</li>
</ul>
</li>
<li>Mom's interests
<ul>
<li>hating football</li>
<li>skydiving</li>
</ul>
</li>
</ol>
<ul>
<li>Favorite Boys' Names
<ol>
<li>철수</li>
<li>영철</li>
<li>민식</li>
</ol>
</li>
<li>Favorite Girls' Names
<ol>
<li>영희</li>
<li>숙희</li>
<li>미영</li>
</ol>
</li>
</ul>
</body>
</html>