코딩 배우기 | Learning Coding | HTML Basics
코딩 배우기 | Learning Coding | HTML Basics
내 아이가 꼭 배웠으면 하는 한 가지, 바로 코딩 Coding입니다. Developer까지는 아니더라도 온라인에 대한 지식과 이해, 그리고 간단한 웹페이지나 소프트웨어를 만들수 있기를 바라고 있습니다.
예전에 우연히 알게 된 Codecademy를 다시 찾았습니다. 이번에는 꾸준하게 학습해 볼 겁니다. 작심삼일이 되지 않기를.
내 아이가 꼭 배웠으면 하는 한 가지, 바로 코딩 Coding입니다. Developer까지는 아니더라도 온라인에 대한 지식과 이해, 그리고 간단한 웹페이지나 소프트웨어를 만들수 있기를 바라고 있습니다.
예전에 우연히 알게 된 Codecademy를 다시 찾았습니다. 이번에는 꾸준하게 학습해 볼 겁니다. 작심삼일이 되지 않기를.
HTML Basics | Body elements | Codecademy
6/14 Paragraphs and headings
<!DOCTYPE html><html>
<head>
<title>
JONE STUDIO
</title>
</head>
<body>
<h1>
<p>JONE STUDIO</p>
<p>jone studio</p>
</h1>
</body>
</html>
7/14 More about headings!
<!DOCTYPE html><html>
<head>
<title>HTML Basics</title>
</head>
<body>
<h1><p>The CEO</p></h1>
<h2><p>VP</p></h2>
<h3><p>Director</p></h3>
<h4><p>Middle management</p></h4>
<h5><p>Lowly assistant</p></h5>
<h6><p>Gets coffee for everyone</p></h6>
</body>
</html>
8/14 Using every heading
<!DOCTYPE html>
<html>
<head>
<title>Using every heading</title>
</head>
<body>
<h1><p>The CEO</p></h1>
<h2><p>VP</p></h2>
<h3><p>Director</p></h3>
<h4><p>Middle management</p></h4>
<h5><p>Lowly assistant</p></h5>
<h6><p>Gets coffee for everyone</p></h6>
</body>
</html>
HTML Basics | Adding images to your site! | Codecademy
9/14 Mid-lesson breather
<!DOCTYPE html>
<html>
<head>
<title>Mid-lesson breather</title>
</head>
<body>
<h3>
<p>Whatever you want</p>
<p>Just do it!</p>
<p>- JONE STUDIO -</p>
</h3>
</body>
</html>
10/14 You're going places!
<!DOCTYPE html>
<html>
<head>
<title>You're going places!</title>
</head>
<body>
<a href="http://jonestudio.blogspot.com">JONE STUDIO | 뭔가 해보기</a>
</body>
</html>
11/14 Adding images
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
<img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg" />
</body>
</html>
12/14 Click that image
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="http://jonestudio.blogspot.com">
<img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
<img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg" />
</a>
</body>
</html>
13/14 Images and links
<!DOCTYPE html>
<html>
<head>
<title>Images and links</title>
</head>
<body>
<a href="http://newsun1.blog.me">
<img sre="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg" />
</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxQzQ6D8AEC401C5XaeT41GnGXtlhTXs-V7410ib86OkeoitlJJZOpKBqZeIrDVf5Iii16FOh0dVH78UeE9QoXb8Z7hw0N0HdyrZoQb3iOSoBiPDvDeoEJNHnQn9gCQ49RQc6m3k0dzI/s1600/google-adsense.png" />
<p>--------------------------------------</p>
<a href="http://jonestudio.blogspot.com">JONE STUIDO | 뭔가 해보기</a>
</body>
</html>
| 이 부분에서 링크 걸린 이미지(닌자)가 테스트 뷰어에 뜨지 않았다. 왜 안 뜨는지는 모르겠다.
14/14 Congratulations!