코딩 배우기 | Learning Coding | HTML Basics III
코딩 배우기 | Learning Coding | HTML Basics III
HTML STRUCTURE : TABLES, DIVS, AND SPANS _ HTML Basics III
Now lay your webpage out in a more complex way. Enter tables, divs, and spans!
HTML Basics III | Learning about tables | Codecademy
<!DOCTYPE html>
<html>
<head>
<title>Table Time</title>
</head>
<body>
<h1 style="font-family: Arial">Tables Are Mega Sweet</h1>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/da840950.jpg"/>
<a href="http://jonestudio.blogspot.kr/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Gxgzp2lz3EfozWcQ5_L3Fkv21aG5ZyNS4TAlWUb44MVujyYXqsl-p2DBZwHvZhcEretXnvsLZWcIguJ91Shnau0XCKDIu6GnYYw_3u6AHoz7qihv4HToDq2xK5u2AJ4-njS2fiK7OQA/s360-no/%E1%84%89%E1%85%A1%E1%84%8C%E1%85%B5%E1%86%AB.PNG"/>
</a>
</body>
</html>
2/15 What are tables?
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table></table>
</body>
</html>
3/15 Rows of information
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table>
<tr></tr>
<!-- Add two more rows below this! -->
<tr></tr>
<tr></tr>
</table>
</body>
</html>
4/15 A single column
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<tr>
<td>One</td>
<td>Cell</td>
</tr>
<tr>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
</tr>
</table>
</body>
</html>
5/15 Adding a second column
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<tr>
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td>Dracula</td>
<td>1897</td>
</tr>
<tr>
<td>Bride of Frankenstein</td>
<td>1935</td>
</tr>
</table>
</body>
</html>
HTML Basics III | Better tables | Codecademy
6/15 Head of the table
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<tbody>
<tr>
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td>Dracula</td>
<td>1897</td>
</tr>
<tr>
<td>Bride of Frankenstein</td>
<td>1935</td>
</tr>
</tbody>
</table>
</body>
</html>
7/15 Table Heads
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th>Famous Monster</th>
<th>Birth Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td>Dracula</td>
<td>1897</td>
</tr>
<tr>
<td>Bride of Frankenstein</td>
<td>1935</td>
</tr>
</tbody>
</table>
</body>
</html>
8/15 Naming your table
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th colspan="2">Famous Monsters by Birth Year</th>
</tr>
<tr>
<th>Famous Monster</th>
<th>Birth Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td>Dracula</td>
<td>1897</td>
</tr>
<tr>
<td>Bride of Frankenstein</td>
<td>1935</td>
</tr>
</tbody>
</table>
</body>
</html>
9/15 Style that head!
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th colspan="2" style="color: red">Famous Monsters by Birth Year</th>
</tr>
<tr style="border-bottom:1px solid black;">
<th style="padding:5px;"><em>Famous Monster</em></th>
<th style="padding:5px;border-left:1px solid black;"><em>Birth Year</em></th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;">King Kong</td>
<td style="padding:5px;border-left:1px solid black;">1933</td>
</tr>
<tr>
<td style="padding:5px;">Dracula</td>
<td style="padding:5px;border-left:1px solid black;">1897</td>
</tr>
<tr>
<td style="padding:5px;">Bride of Frankenstein</td>
<td style="padding:5px;border-left:1px solid black;">1944</td>
</tr>
</tbody>
</table>
</body>
</html>
10/15 Recap
HTML Basics III | Div and span | Codecademy
11/15 'Div'ide and conquer
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
<div style="width:50px; height:50px; background-color:red"></div>
<div style="width:50px; height:50px; background-color:blue"></div>
<div style="width:50px; height:50px; background-color:green"></div>
<div style="width:50px; height:50px; background-color:yellow"></div>
</body>
</html>
12/15 Link it!
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
<div style="width:50px; height:50px; background-color:red"></div>
<div style="width:50px; height:50px; background-color:blue"></div>
<div style="width:50px; height:50px; background-color:green"></div>
<a href="http://jonestudio.blogspot.kr/"><div style="width:50px; height:50px; background-color:yellow"></div></a>
</body>
</html>
13/15 Spantastic
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>This text is black, except for the word <span style="color:red">red</span>!</p>
</body>
</html>
14/15 Span is the man
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
<p>My favorite font is <span style="font-family:Impact">Impact</span>!</p>
</body>
</html>
15/15 Recap